This is page 36 of 183. Use http://codebase.md/xmlui-org/xmlui?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-spa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/ContainerWrapper.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | forwardRef,
3 | memo,
4 | type MutableRefObject,
5 | type ReactNode,
6 | type RefObject,
7 | useMemo,
8 | } from "react";
9 | import type { ComponentDef, ParentRenderContext } from "../../abstractions/ComponentDefs";
10 | import type { LayoutContext } from "../../abstractions/RendererDefs";
11 | import type { ContainerDispatcher } from "../abstractions/ComponentRenderer";
12 | import type { ProxyAction } from "../rendering/buildProxy";
13 | import { ErrorBoundary } from "../rendering/ErrorBoundary";
14 | import { StateContainer } from "./StateContainer";
15 |
16 | /**
17 | * This type is the internal representation of a container component, which manages the state of its children.
18 | */
19 | export interface ContainerWrapperDef extends ComponentDef {
20 | type: "Container";
21 |
22 | // --- The unique identifier of the container
23 | containerUid?: symbol;
24 |
25 | // --- The context values this container provides to its children
26 | contextVars?: Record<string, any>;
27 |
28 | // --- If true, this is an API-bound container
29 | apiBoundContainer?: boolean;
30 | }
31 |
32 | /**
33 | * We store the state application state in a hierarchical structure of
34 | * containers. This type represents the state within a single container
35 | * stored as key and value pairs.
36 | */
37 | export type ContainerState = Record<string | symbol, any>;
38 |
39 | /**
40 | * Components can provide an API that other components can invoke (using
41 | * the host component ID). This type defines the shape of a hash object that
42 | * stores the API endpoints.
43 | */
44 | export type ComponentApi = Record<string, ((...args: any[]) => any) | boolean | number | string>;
45 |
46 | /**
47 | * This type declares that function's signature, which registers an exposed
48 | * component method (API endpoint).
49 | */
50 | export type RegisterComponentApiFnInner = (componentUid: symbol, api: ComponentApi) => void;
51 |
52 | /**
53 | * This type declares that function's signature, which runs a clean-up activity.
54 | */
55 | export type ComponentCleanupFn = (uid: symbol) => void;
56 |
57 | /**
58 | * This function checks if a particular component needs a wrapping container to
59 | * manage its internal state, which is closed from its external context but
60 | * available to its children.
61 | * @param node The component definition node to check
62 | * @returns Tru, if the component needs a wrapping container
63 | */
64 | export function isContainerLike(node: ComponentDef) {
65 | if (node.type === "Container") {
66 | return true;
67 | }
68 |
69 | // --- If any of the following properties have a value, we need a container
70 | return !!(
71 | node.loaders ||
72 | node.vars ||
73 | node.uses ||
74 | node.contextVars ||
75 | node.functions ||
76 | node.scriptCollected
77 | );
78 | }
79 |
80 | /**
81 | * This type is that function's signature, which signs that an entire
82 | * state variable or its nested part has been changed.
83 | */
84 | export type StatePartChangedFn = (
85 | // --- String representing the component path ("a.b", "a.b[3].c", etc.)
86 | path: string[],
87 |
88 | // --- The new value of the changed part
89 | value: any,
90 |
91 | // --- The target component that has changed (along the path)
92 | target: string,
93 |
94 | // --- Type of change
95 | action: ProxyAction,
96 | ) => void;
97 |
98 | // --- Properties of the ComponentContainer component
99 | type Props = {
100 | node: ContainerWrapperDef;
101 | resolvedKey?: string;
102 | parentState: ContainerState;
103 | parentStatePartChanged: StatePartChangedFn;
104 | parentRegisterComponentApi: RegisterComponentApiFnInner;
105 | parentDispatch: ContainerDispatcher;
106 | parentRenderContext?: ParentRenderContext;
107 | layoutContextRef: MutableRefObject<LayoutContext | undefined>;
108 | uidInfoRef?: RefObject<Record<string, any>>;
109 | children?: ReactNode;
110 | };
111 |
112 | /**
113 | * This component is a container that manages the state of its children. It
114 | * provides a context for the children to access the state and the API of the
115 | * parent component.
116 | */
117 | export const ContainerWrapper = memo(
118 | forwardRef(function ContainerWrapper(
119 | {
120 | node,
121 | resolvedKey,
122 | parentState,
123 | parentStatePartChanged,
124 | parentRegisterComponentApi,
125 | parentDispatch,
126 | parentRenderContext,
127 | layoutContextRef,
128 | uidInfoRef,
129 | children,
130 | ...rest
131 | }: Props,
132 | ref,
133 | ) {
134 | // --- Make sure the component node is wrapped with a container
135 | const containerizedNode = useMemo(() => getWrappedWithContainer(node), [node]);
136 |
137 | return (
138 | <ErrorBoundary node={node} location={"container"}>
139 | <StateContainer
140 | node={containerizedNode as any}
141 | resolvedKey={resolvedKey}
142 | parentState={parentState}
143 | parentStatePartChanged={parentStatePartChanged}
144 | parentRegisterComponentApi={parentRegisterComponentApi}
145 | parentDispatch={parentDispatch}
146 | parentRenderContext={parentRenderContext}
147 | layoutContextRef={layoutContextRef}
148 | uidInfoRef={uidInfoRef}
149 | isImplicit={node.type !== "Container" && containerizedNode.uses === undefined} //in this case it's an auto-wrapped component
150 | ref={ref}
151 | {...rest}
152 | >
153 | {children}
154 | </StateContainer>
155 | </ErrorBoundary>
156 | );
157 | }),
158 | );
159 |
160 | /**
161 | * Wraps the specified component node with a container
162 | * @param node The component node to wrap
163 | * @returns A "Container" node
164 | */
165 | const getWrappedWithContainer = (node: ContainerWrapperDef) => {
166 | if (node.type === "Container") {
167 | // --- Already wrapped
168 | return node;
169 | }
170 |
171 | // --- Clone the node and remove the properties that will be moved to the container
172 | // --- Note: we need the "when" property in the ModalDialog component, so we don't remove it
173 | const wrappedNode = { ...node, props: { ...node.props } };
174 | delete wrappedNode.loaders;
175 | delete wrappedNode.vars;
176 | delete wrappedNode.functions;
177 | delete wrappedNode.script;
178 | delete wrappedNode.scriptCollected;
179 | delete wrappedNode.scriptError;
180 | delete wrappedNode.uses;
181 | delete (wrappedNode.props as any)?.uses;
182 | delete wrappedNode.api;
183 | delete wrappedNode.contextVars;
184 |
185 | // --- Do the wrapping
186 | return {
187 | type: "Container",
188 | uid: node.uid,
189 | when: node.when,
190 | loaders: node.loaders,
191 | vars: node.vars,
192 | functions: node.functions,
193 | scriptCollected: node.scriptCollected,
194 | scriptError: node.scriptError,
195 | uses: node.uses,
196 | api: node.api,
197 | containerUid: node?.containerUid,
198 | apiBoundContainer: node?.apiBoundContainer,
199 | contextVars: node.contextVars,
200 | props: {
201 | debug: (node.props as any)?.debug,
202 | },
203 | children: [wrappedNode],
204 | } as ContainerWrapperDef;
205 | };
206 |
```
--------------------------------------------------------------------------------
/xmlui/src/language-server/server-common.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type {
2 | Connection,
3 | InitializeParams,
4 | TextDocumentPositionParams,
5 | InitializeResult,
6 | HoverParams,
7 | TextDocumentContentChangeEvent,
8 | TextDocumentChangeEvent,
9 | Diagnostic,
10 | Position,
11 | DocumentFormattingParams,
12 | } from "vscode-languageserver";
13 | import {
14 | MarkupKind,
15 | TextDocumentSyncKind,
16 | DidChangeConfigurationNotification,
17 | TextDocuments,
18 | } from "vscode-languageserver";
19 | import { TextDocument } from "vscode-languageserver-textdocument";
20 | import collectedComponentMetadata from "./xmlui-metadata-generated.js";
21 | import type { XmluiCompletionItem } from "./services/completion";
22 | import { handleCompletion, handleCompletionResolve } from "./services/completion";
23 | import { handleHover } from "./services/hover";
24 | import { handleDocumentFormatting } from "./services/format";
25 | import {
26 | createXmlUiParser,
27 | Error,
28 | type GetText,
29 | type ParseResult,
30 | } from "../parsers/xmlui-parser/parser";
31 | import {
32 | MetadataProvider,
33 | type ComponentMetadataCollection,
34 | } from "./services/common/metadata-utils";
35 | import { getDiagnostics } from "./services/diagnostic";
36 |
37 | const metaByComp = collectedComponentMetadata as ComponentMetadataCollection;
38 | const metadataProvider = new MetadataProvider(metaByComp);
39 |
40 | export function start(connection: Connection) {
41 | // Also include all preview / proposed LSP features.
42 | // Create a simple text document manager.
43 | const documents = new TextDocuments(TextDocument);
44 |
45 | let hasConfigurationCapability = false;
46 | let hasWorkspaceFolderCapability = false;
47 | let hasDiagnosticRelatedInformationCapability = false;
48 |
49 | connection.onInitialize((params: InitializeParams) => {
50 | connection.console.log("Initializing!");
51 | const capabilities = params.capabilities;
52 |
53 | // Does the client support the `workspace/configuration` request?
54 | // If not, we fall back using global settings.
55 | hasConfigurationCapability = !!(
56 | capabilities.workspace && !!capabilities.workspace.configuration
57 | );
58 | hasWorkspaceFolderCapability = !!(
59 | capabilities.workspace && !!capabilities.workspace.workspaceFolders
60 | );
61 | hasDiagnosticRelatedInformationCapability = !!(
62 | capabilities.textDocument &&
63 | capabilities.textDocument.publishDiagnostics &&
64 | capabilities.textDocument.publishDiagnostics.relatedInformation
65 | );
66 |
67 | const result: InitializeResult = {
68 | capabilities: {
69 | textDocumentSync: TextDocumentSyncKind.Incremental,
70 | completionProvider: {
71 | resolveProvider: true,
72 | triggerCharacters: ["<", "/"],
73 | },
74 | hoverProvider: true,
75 | documentFormattingProvider: true,
76 | },
77 | };
78 | if (hasWorkspaceFolderCapability) {
79 | result.capabilities.workspace = {
80 | workspaceFolders: {
81 | supported: true,
82 | },
83 | };
84 | }
85 | return result;
86 | });
87 |
88 | connection.onInitialized(() => {
89 | if (hasConfigurationCapability) {
90 | // Register for all configuration changes.
91 | void connection.client.register(DidChangeConfigurationNotification.type, undefined);
92 | }
93 | if (hasWorkspaceFolderCapability) {
94 | connection.workspace.onDidChangeWorkspaceFolders((_event) => {
95 | connection.console.log("Workspace folder change event received.");
96 | });
97 | }
98 | });
99 |
100 | connection.onCompletion(({ position, textDocument }: TextDocumentPositionParams) => {
101 | const document = documents.get(textDocument.uri);
102 | if (!document) {
103 | return [];
104 | }
105 | const parseResult = parseDocument(document);
106 | return handleCompletion(
107 | {
108 | parseResult: parseResult.parseResult,
109 | getText: parseResult.getText,
110 | metaByComp: metadataProvider,
111 | offsetToPos: (offset: number) => document.positionAt(offset),
112 | },
113 | document.offsetAt(position),
114 | );
115 | });
116 |
117 | connection.onCompletionResolve((completionItem: XmluiCompletionItem) => {
118 | return handleCompletionResolve({ metaByComp: metadataProvider, item: completionItem });
119 | });
120 |
121 | connection.onHover(({ position, textDocument }: HoverParams) => {
122 | const document = documents.get(textDocument.uri);
123 | if (!document) {
124 | return null;
125 | }
126 |
127 | const { parseResult, getText } = parseDocument(document);
128 | const ctx = {
129 | node: parseResult.node,
130 | getText,
131 | metaByComp: metadataProvider,
132 | offsetToPosition: (offset: number) => document.positionAt(offset),
133 | };
134 | return handleHover(ctx, document.offsetAt(position));
135 | });
136 |
137 | connection.onDocumentFormatting(({ textDocument, options }: DocumentFormattingParams) => {
138 | const document = documents.get(textDocument.uri);
139 | if (!document) {
140 | return null;
141 | }
142 | const {
143 | parseResult: { node },
144 | getText,
145 | } = parseDocument(document);
146 | return handleDocumentFormatting({
147 | node,
148 | getText,
149 | options,
150 | offsetToPosition: (offset) => document.positionAt(offset),
151 | });
152 | });
153 |
154 | const parsedDocuments = new Map();
155 | function parseDocument(document: TextDocument): {
156 | parseResult: ParseResult;
157 | getText: GetText;
158 | } {
159 | const parseForDoc = parsedDocuments.get(document.uri);
160 | if (parseForDoc !== undefined) {
161 | if (parseForDoc.version === document.version) {
162 | return {
163 | parseResult: parseForDoc.parseResult,
164 | getText: parseForDoc.getText,
165 | };
166 | }
167 | }
168 | const parser = createXmlUiParser(document.getText());
169 | const parseResult = parser.parse();
170 | parsedDocuments.set(document.uri, {
171 | parseResult,
172 | version: document.version,
173 | getText: parser.getText,
174 | });
175 | return { parseResult, getText: parser.getText };
176 | }
177 | documents.onDidClose(({ document }) => {
178 | parsedDocuments.delete(document.uri);
179 | });
180 |
181 | documents.onDidChangeContent(handleDocunentContentChange);
182 |
183 | function handleDocunentContentChange({ document }: { document: TextDocument }) {
184 | const { parseResult } = parseDocument(document);
185 | const ctx = {
186 | parseResult,
187 | offsetToPos: (offset: number) => document.positionAt(offset),
188 | };
189 |
190 | const diagnostics = getDiagnostics(ctx);
191 | void connection.sendDiagnostics({
192 | version: document.version,
193 | uri: document.uri,
194 | diagnostics,
195 | });
196 | }
197 |
198 | // Make the text document manager listen on the connection
199 | // for open, change and close text document events
200 | documents.listen(connection);
201 |
202 | // Listen on the connection
203 | console.log("starting to listen");
204 | connection.listen();
205 | }
206 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Spinner/Spinner.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { SKIP_REASON } from "../../testing/component-test-helpers";
2 | import { expect, test } from "../../testing/fixtures";
3 | import { getFullRectangle } from "../../testing/themed-app-test-helpers";
4 |
5 | test.describe("Basic Functionality", () => {
6 | test("component renders with basic props", async ({ page, initTestBed }) => {
7 | await initTestBed(`<Spinner />`);
8 |
9 | const spinner = page.getByRole("status");
10 | await expect(spinner).toBeVisible();
11 | });
12 |
13 | test("component renders with delay prop", async ({ page, initTestBed }) => {
14 | await initTestBed(`<Spinner delay="0" />`);
15 |
16 | const spinner = page.getByRole("status");
17 | await expect(spinner).toBeVisible();
18 | });
19 |
20 | test("component renders with fullScreen prop", async ({ page, initTestBed }) => {
21 | await initTestBed(`<Spinner fullScreen="true" />`);
22 |
23 | const spinner = page.getByRole("status");
24 | await expect(spinner).toBeVisible();
25 | });
26 | });
27 |
28 | test.describe("Accessibility", () => {
29 | test("component has correct accessibility attributes", async ({ page, initTestBed }) => {
30 | await initTestBed(`<Spinner />`);
31 |
32 | const spinner = page.getByRole("status");
33 | await expect(spinner).toHaveAttribute("aria-label", "loading", { ignoreCase: true });
34 | });
35 |
36 | test("component maintains accessibility with fullScreen", async ({ page, initTestBed }) => {
37 | await initTestBed(`<Spinner fullScreen="true" />`);
38 |
39 | const spinner = page.getByRole("status");
40 | await expect(spinner).toHaveAttribute("aria-label", "loading", { ignoreCase: true });
41 | });
42 | });
43 |
44 | test.describe("Theme Variables", () => {
45 | test("component applies theme variables", async ({ page, initTestBed }) => {
46 | await initTestBed(`<Spinner delay="0" />`, {
47 | testThemeVars: {
48 | "size-Spinner": "60px",
49 | "thickness-Spinner": "6px",
50 | "borderColor-Spinner": "rgb(255, 0, 0)",
51 | },
52 | });
53 |
54 | const spinnerRing = page.locator("[data-part-id='ring']").first();
55 |
56 | await expect(spinnerRing).toHaveCSS("border-top-color", "rgb(255, 0, 0)");
57 | });
58 | });
59 |
60 | test.describe("Delay Behavior", () => {
61 | test("component respects delay prop", { tag: "@smoke" }, async ({ page, initTestBed }) => {
62 | await initTestBed(`
63 | <Fragment>
64 | control-text
65 | <Spinner delay="500" />
66 | </Fragment>`);
67 |
68 | await page.getByText("control-text").waitFor({ state: "visible" });
69 | const spinner = page.getByRole("status");
70 | await expect(spinner).not.toBeVisible({ timeout: 0 });
71 |
72 | await expect(spinner).toBeVisible();
73 | });
74 |
75 | test("component shows immediately with zero delay", async ({ page, initTestBed }) => {
76 | await initTestBed(`
77 | <Fragment>
78 | control-text
79 | <Spinner delay="0" />
80 | </Fragment>`);
81 |
82 | await page.getByText("control-text").waitFor({ state: "visible" });
83 | const spinner = page.getByRole("status");
84 | await expect(spinner).toBeVisible({ timeout: 0 });
85 | });
86 |
87 | test("component shows immediately with null delay", async ({ page, initTestBed }) => {
88 | await initTestBed(`
89 | <Fragment>
90 | control-text
91 | <Spinner delay="{null}" />
92 | </Fragment>`);
93 |
94 | await page.getByText("control-text").waitFor({ state: "visible" });
95 | const spinner = page.getByRole("status");
96 | await expect(spinner).toBeVisible({ timeout: 0 });
97 | });
98 |
99 | test("component shows immediately with undefined delay", async ({ page, initTestBed }) => {
100 | await initTestBed(`
101 | <Fragment>
102 | control-text
103 | <Spinner delay="{undefined}" />
104 | </Fragment>`);
105 |
106 | await page.getByText("control-text").waitFor({ state: "visible" });
107 | const spinner = page.getByRole("status");
108 | await expect(spinner).toBeVisible({ timeout: 0 });
109 | });
110 |
111 | test("component handles negative delay values", async ({ page, initTestBed }) => {
112 | await initTestBed(`
113 | <Fragment>
114 | control-text
115 | <Spinner delay="-100" />
116 | </Fragment>`);
117 |
118 | await page.getByText("control-text").waitFor({ state: "visible" });
119 | const spinner = page.getByRole("status");
120 | await expect(spinner).toBeVisible({ timeout: 0 });
121 | });
122 |
123 | test("component respects numeric delay prop", async ({ page, initTestBed }) => {
124 | await initTestBed(`
125 | <Fragment>
126 | control-text
127 | <Spinner delay="{ 500 }" />
128 | </Fragment>`);
129 |
130 | await page.getByText("control-text").waitFor({ state: "visible" });
131 | const spinner = page.getByRole("status");
132 | await expect(spinner).not.toBeVisible({ timeout: 0 });
133 |
134 | await expect(spinner).toBeVisible();
135 | });
136 | });
137 |
138 | test.describe("Full Screen Mode", () => {
139 | test("component renders in fullScreen mode", async ({ page, initTestBed }) => {
140 | await initTestBed(`<Spinner fullScreen="true" />`);
141 | const spinner = page.getByRole("status");
142 | await expect(spinner).toBeVisible();
143 |
144 | const { width } = await getFullRectangle(spinner);
145 | expect(width).toEqual(page.viewportSize().width);
146 | });
147 |
148 | test("component renders normally without fullScreen", async ({ page, initTestBed }) => {
149 | await initTestBed(`<Spinner fullScreen="false" />`);
150 |
151 | const spinner = page.getByRole("status");
152 | await expect(spinner).toBeVisible();
153 |
154 | const { width } = await getFullRectangle(spinner);
155 | expect(width).not.toEqual(page.viewportSize().width);
156 | });
157 | });
158 |
159 | test.describe("Edge Cases", { tag: "@smoke" }, () => {
160 | test("delayed fullScreen spinner spans viewport width", async ({ page, initTestBed }) => {
161 | await initTestBed(`
162 | <Fragment>
163 | control-text
164 | <Spinner fullScreen="true" delay="{ 500 }" />
165 | </Fragment>`);
166 |
167 | await page.getByText("control-text").waitFor({ state: "visible" });
168 | const spinner = page.getByRole("status");
169 | await expect(spinner).not.toBeVisible({ timeout: 0 });
170 |
171 | await expect(spinner).toBeVisible();
172 |
173 | const { width } = await getFullRectangle(spinner);
174 | expect(width).toEqual(page.viewportSize().width);
175 | });
176 |
177 | test("button behind fullScreen spinner can't be clicked", async ({ page, initTestBed }) => {
178 | const { testStateDriver } = await initTestBed(`
179 | <Fragment>
180 | <Button label="Click Me" onClick="testState = clicked" />
181 | <Spinner fullScreen="true" />
182 | </Fragment>`);
183 |
184 | const spinner = page.getByRole("status");
185 | await expect(spinner).toBeVisible();
186 |
187 | await page.getByRole("button").click({ force: true });
188 |
189 | await expect.poll(testStateDriver.testState).not.toEqual("clicked");
190 | });
191 | });
192 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/Splitter.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import type React from "react";
2 |
3 | import styles from "./Splitter.module.scss";
4 |
5 | import type { RenderChildFn } from "../../abstractions/RendererDefs";
6 | import { type ComponentDef } from "../../abstractions/ComponentDefs";
7 | import type { ValueExtractor, LookupEventHandlerFn } from "../../abstractions/RendererDefs";
8 | import { createComponentRenderer } from "../../components-core/renderers";
9 | import { isComponentDefChildren } from "../../components-core/utils/misc";
10 | import { NotAComponentDefError } from "../../components-core/EngineError";
11 | import { parseScssVar } from "../../components-core/theming/themeVars";
12 | import type { OrientationOptions } from "../abstractions";
13 | import { createMetadata, d, dComponent } from "../metadata-helpers";
14 | import { Splitter, defaultProps } from "./SplitterNative";
15 |
16 | const COMP = "Splitter";
17 |
18 | const baseSplitterMd = createMetadata({
19 | status: "stable",
20 | description:
21 | "`Splitter` component divides a container into two resizable sections. These " +
22 | "are are identified by their names: primary and secondary. They have a " +
23 | "draggable bar between them.",
24 | props: {
25 | swapped: {
26 | description:
27 | `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
28 | `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
29 | valueType: "boolean",
30 | defaultValue: defaultProps.swapped,
31 | },
32 | splitterTemplate: dComponent(
33 | `The divider can be customized using XMLUI components via this property.`,
34 | ),
35 | initialPrimarySize: {
36 | description:
37 | `This optional number property sets the initial size of the primary section. The unit of ` +
38 | `the size value is in pixels or percentages.`,
39 | valueType: "string",
40 | defaultValue: defaultProps.initialPrimarySize,
41 | },
42 | minPrimarySize: {
43 | description:
44 | `This property sets the minimum size the primary section can have. The unit of the size ` +
45 | `value is in pixels or percentages.`,
46 | valueType: "string",
47 | defaultValue: defaultProps.minPrimarySize,
48 | },
49 | maxPrimarySize: {
50 | description:
51 | `This property sets the maximum size the primary section can have. The unit of the size ` +
52 | `value is in pixels or percentages. Negative values are supported and calculate from the ` +
53 | `end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").`,
54 | valueType: "string",
55 | defaultValue: defaultProps.maxPrimarySize,
56 | },
57 | floating: {
58 | description:
59 | `Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
60 | `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`,
61 | valueType: "boolean",
62 | defaultValue: defaultProps.floating,
63 | },
64 | orientation: {
65 | description:
66 | `Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
67 | `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
68 | `next to each other (\`horizontal\`).`,
69 | valueType: "string",
70 | availableValues: ["horizontal", "vertical"],
71 | defaultValue: defaultProps.orientation,
72 | },
73 | },
74 | events: {
75 | resize: d(`This event fires when the component is resized.`),
76 | },
77 | themeVars: parseScssVar(styles.themeVars),
78 | defaultThemeVars: {
79 | [`backgroundColor-resizer-${COMP}`]: "$color-surface-100",
80 | [`thickness-resizer-${COMP}`]: "5px",
81 | [`cursor-resizer-horizontal-${COMP}`]: "ew-resize",
82 | [`cursor-resizer-vertical-${COMP}`]: "ns-resize",
83 | },
84 | });
85 |
86 | export const SplitterMd = {
87 | ...baseSplitterMd,
88 | props: {
89 | ...baseSplitterMd.props,
90 | },
91 | };
92 |
93 | export const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP };
94 | export const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP };
95 |
96 | type SplitterComponentDef = ComponentDef<typeof SplitterMd>;
97 | type VSplitterComponentDef = ComponentDef<typeof VSplitterMd>;
98 | type HSplitterComponentDef = ComponentDef<typeof HSplitterMd>;
99 |
100 | type RenderSplitterPars = {
101 | node: SplitterComponentDef | VSplitterComponentDef | HSplitterComponentDef;
102 | extractValue: ValueExtractor;
103 | className: string | undefined;
104 | renderChild: RenderChildFn;
105 | orientation?: OrientationOptions;
106 | lookupEventHandler: LookupEventHandlerFn<typeof SplitterMd>;
107 | };
108 |
109 | const DEFAULT_ORIENTATION = "vertical";
110 |
111 | function renderSplitter({
112 | node,
113 | extractValue,
114 | className,
115 | renderChild,
116 | lookupEventHandler,
117 | orientation = extractValue(node.props.orientation) ?? DEFAULT_ORIENTATION,
118 | }: RenderSplitterPars) {
119 | if (!isComponentDefChildren(node.children)) {
120 | throw new NotAComponentDefError();
121 | }
122 | return (
123 | <Splitter
124 | className={className}
125 | swapped={extractValue.asOptionalBoolean(node.props?.swapped)}
126 | orientation={orientation}
127 | splitterTemplate={renderChild(node.props?.splitterTemplate)}
128 | initialPrimarySize={extractValue(node.props?.initialPrimarySize)}
129 | minPrimarySize={extractValue(node.props?.minPrimarySize)}
130 | maxPrimarySize={extractValue(node.props?.maxPrimarySize)}
131 | floating={extractValue.asOptionalBoolean(node.props?.floating)}
132 | resize={lookupEventHandler("resize")}
133 | >
134 | {renderChild(node.children)}
135 | </Splitter>
136 | );
137 | }
138 |
139 | export const splitterComponentRenderer = createComponentRenderer(
140 | COMP,
141 | SplitterMd,
142 | ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
143 | return renderSplitter({
144 | node,
145 | extractValue,
146 | className,
147 | renderChild,
148 | lookupEventHandler: lookupEventHandler as any,
149 | });
150 | },
151 | );
152 |
153 | export const vSplitterComponentRenderer = createComponentRenderer(
154 | "VSplitter",
155 | VSplitterMd,
156 | ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
157 | return renderSplitter({
158 | node,
159 | extractValue,
160 | className,
161 | renderChild,
162 | orientation: "vertical",
163 | lookupEventHandler: lookupEventHandler as any,
164 | });
165 | },
166 | );
167 |
168 | export const hSplitterComponentRenderer = createComponentRenderer(
169 | "HSplitter",
170 | HSplitterMd,
171 | ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
172 | return renderSplitter({
173 | node,
174 | extractValue,
175 | className,
176 | renderChild,
177 | orientation: "horizontal",
178 | lookupEventHandler: lookupEventHandler as any,
179 | });
180 | },
181 | );
182 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/reducer.ts:
--------------------------------------------------------------------------------
```typescript
1 | import produce from "immer";
2 | import { cloneDeep, isPlainObject, keyBy, setWith, unset } from "lodash-es";
3 |
4 | import type { ContainerState } from "../../abstractions/ContainerDefs";
5 | import type { ContainerAction} from "./containers";
6 | import { ContainerActionKind } from "./containers";
7 | import type { IDebugViewContext } from "../DebugViewProvider";
8 |
9 | const MAX_STATE_TRANSITION_LENGTH = 100;
10 |
11 | /**
12 | * This function creates a reducer for the container state. For diagnostics, it may
13 | * log the state transitions.
14 | * @param debugView This debug view determines if the state transitions should be logged.
15 | */
16 | export function createContainerReducer(debugView: IDebugViewContext) {
17 | const allowLogging = debugView.collectStateTransitions;
18 | let prevState: any = undefined;
19 | let nextState: any = undefined;
20 |
21 | // --- The reducer function
22 | return produce((state: ContainerState, action: ContainerAction) => {
23 | // --- Check if the action has an appropriate uid
24 | const { uid } = action.payload;
25 | if (uid === undefined && action.type !== ContainerActionKind.STATE_PART_CHANGED) {
26 | console.error("uid not provided for control component", {
27 | state,
28 | action,
29 | });
30 | return state;
31 | }
32 |
33 | // --- Store the previous state for logging
34 | if (allowLogging) {
35 | try {
36 | prevState = cloneDeep(state[uid]);
37 | } catch (e) {
38 | console.error("Error while cloning previous value", e);
39 | }
40 | }
41 |
42 | // --- Apply the action
43 | switch (action.type) {
44 | case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED: {
45 | state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
46 | storeNextValue(state[uid]);
47 | break;
48 | }
49 | case ContainerActionKind.LOADER_IS_REFETCHING_CHANGED: {
50 | state[uid] = { ...state[uid], isRefetching: action.payload.isRefetching };
51 | storeNextValue(state[uid]);
52 | break;
53 | }
54 | case ContainerActionKind.LOADER_LOADED: {
55 | const { data, pageInfo } = action.payload;
56 | state[uid] = {
57 | value: data,
58 | byId: Array.isArray(data) ? keyBy(data, (item) => item.$id) : undefined,
59 | inProgress: false,
60 | loaded: data !== undefined,
61 | pageInfo,
62 | };
63 | storeNextValue(state[uid]);
64 | break;
65 | }
66 | case ContainerActionKind.LOADER_ERROR: {
67 | const { error } = action.payload;
68 | state[uid] = { ...state[uid], error, inProgress: false, loaded: true };
69 | storeNextValue(state[uid]);
70 | break;
71 | }
72 | case ContainerActionKind.EVENT_HANDLER_STARTED: {
73 | const { eventName } = action.payload;
74 | const inProgressFlagName = `${eventName}InProgress`;
75 | // Preserve existing state or use empty object
76 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: true } : { [inProgressFlagName]: true };
77 | storeNextValue(state[uid]);
78 | break;
79 | }
80 | case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
81 | const { eventName } = action.payload;
82 | const inProgressFlagName = `${eventName}InProgress`;
83 | // Preserve existing state or use empty object
84 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
85 | storeNextValue(state[uid]);
86 | break;
87 | }
88 | case ContainerActionKind.EVENT_HANDLER_ERROR: {
89 | const { eventName } = action.payload;
90 | const inProgressFlagName = `${eventName}InProgress`;
91 | // Preserve existing state or use empty object
92 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
93 | storeNextValue(state[uid]);
94 | break;
95 | }
96 | case ContainerActionKind.COMPONENT_STATE_CHANGED: {
97 | const { state: newState } = action.payload;
98 | state[uid] = {
99 | ...state[uid],
100 | ...newState,
101 | };
102 | storeNextValue(state[uid]);
103 | break;
104 | }
105 | case ContainerActionKind.STATE_PART_CHANGED: {
106 | const { path, value, target, actionType, localVars } = action.payload;
107 | if (actionType === "unset") {
108 | unset(state, path);
109 | } else {
110 | let tempValueInLocalVars = localVars;
111 | setWith(state, path, value, (nsValue, key, nsObject) => {
112 | tempValueInLocalVars = tempValueInLocalVars?.[key];
113 | if (
114 | nsValue === undefined &&
115 | isPlainObject(tempValueInLocalVars) &&
116 | isPlainObject(target)
117 | ) {
118 | // if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
119 | // This way we can force it to be an object.
120 | // (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
121 | // During the first state setting, we don't have a previous value for usersTyped, because it was defined
122 | // in vars, and wasn't updated yet. In the first update, it's value is undefined, and because the key is
123 | // a number (an id in our case), lodash thinks it has to create an array after this 'set'. This way we
124 | // can force it, because in the target we have the target object value (given by the proxy change),so if
125 | // it's an object, it should be an object. Otherwise, we let lodash decide)
126 | const next = Object(nsValue);
127 | return next;
128 | }
129 | });
130 | storeNextValue(state);
131 | }
132 | break;
133 | }
134 | default:
135 | throw new Error();
136 | }
137 |
138 | // --- Log the transition
139 | if (allowLogging) {
140 | const loggedTransition = {
141 | action: action.type,
142 | uid,
143 | prevState,
144 | nextState,
145 | };
146 |
147 | // TODO: Logging to the console is a temporary solution. We should use a proper
148 | // logging mechanism. Nonetheless, this works only with state transition logging
149 | // enabled (which is disabled by default).
150 | if (debugView.stateTransitions) {
151 | if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {
152 | debugView.stateTransitions.shift();
153 | }
154 | debugView.stateTransitions.push(loggedTransition);
155 | }
156 | }
157 |
158 | function storeNextValue(nextValue: any) {
159 | if (allowLogging) {
160 | try {
161 | nextState = cloneDeep(nextValue);
162 | } catch (e) {
163 | console.error("Error while cloning next value", e);
164 | }
165 | }
166 | }
167 | });
168 | }
169 |
```
--------------------------------------------------------------------------------
/docs/content/components/BarChart.md:
--------------------------------------------------------------------------------
```markdown
1 | # BarChart [#barchart]
2 |
3 | `BarChart` displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories.
4 |
5 | The BarChart component accommodates the size of its parent unless you set it explicitly:
6 |
7 | ```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
8 | <Card height="240px" width="75%">
9 | <BarChart
10 | orientation="horizontal"
11 | data="{[
12 | { 'sprint': 'Sprint 1', 'A': 44 },
13 | { 'sprint': 'Sprint 2', 'A': 32 },
14 | { 'sprint': 'Sprint 3', 'A': 48 },
15 | { 'sprint': 'Sprint 4', 'A': 72 }
16 | ]}"
17 | yKeys="{['A']}"
18 | xKey="sprint"
19 | />
20 | </Card>
21 | ```
22 |
23 | ```xmlui-pg copy display height="300px" name="Example: dimension overwritten by BarChart" /height="240px"/ /height="200px"/
24 | <Card height="240px">
25 | <BarChart
26 | orientation="horizontal"
27 | height="200px"
28 | data="{[
29 | { 'sprint': 'Sprint 1', 'A': 44 },
30 | { 'sprint': 'Sprint 2', 'A': 32 },
31 | { 'sprint': 'Sprint 3', 'A': 48 },
32 | { 'sprint': 'Sprint 4', 'A': 72 }
33 | ]}"
34 | yKeys="{['A']}"
35 | xKey="sprint"
36 | />
37 | </Card>
38 | ```
39 |
40 | **Key features:**
41 | - **Flexible orientation**: Choose horizontal or vertical bar layouts
42 | - **Multiple data series**: Display several metrics on the same chart with different colored bars
43 | - **Stacked vs grouped**: Stack bars on top of each other or place them side by side
44 | - **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
45 |
46 | ## Properties [#properties]
47 |
48 | ### `data` [#data]
49 |
50 | This property is used to provide the component with data to display.The data needs to be an array of objects.
51 |
52 | ### `hideTickX` (default: false) [#hidetickx-default-false]
53 |
54 | Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.
55 |
56 | ### `hideTickY` (default: false) [#hideticky-default-false]
57 |
58 | Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.
59 |
60 | ### `hideTooltip` (default: false) [#hidetooltip-default-false]
61 |
62 | Determines whether the tooltip should be hidden. If set to `true`, tooltips will not appear on hover.
63 |
64 | ### `hideX` (default: false) [#hidex-default-false]
65 |
66 | Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.
67 |
68 | ### `hideY` (default: false) [#hidey-default-false]
69 |
70 | Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.
71 |
72 | ### `orientation` (default: "vertical") [#orientation-default-vertical]
73 |
74 | This property determines the orientation of the bar chart. The `vertical` variant specifies the horizontal axis as the primary and lays out the bars from left to right. The `horizontal` variant specifies the vertical axis as the primary and has the bars spread from top to bottom.
75 |
76 | Available values: `horizontal`, `vertical` **(default)**
77 |
78 | ### `showLegend` (default: false) [#showlegend-default-false]
79 |
80 | Determines whether the legend should be displayed.
81 |
82 | ### `stacked` (default: false) [#stacked-default-false]
83 |
84 | This property determines how the bars are laid out.If set to `true`, bars with the same category will be stacked on top of each other rather than placed side by side.
85 |
86 | ### `tickFormatterX` [#tickformatterx]
87 |
88 | A function that formats the tick labels on the X-axis.
89 |
90 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
91 | <App>
92 | <BarChart
93 | orientation="horizontal"
94 | height="240px"
95 | data="{[
96 | { 'sprint': 'Sprint 1', 'A': 44 },
97 | { 'sprint': 'Sprint 2', 'A': 32 },
98 | { 'sprint': 'Sprint 3', 'A': 48 },
99 | { 'sprint': 'Sprint 4', 'A': 72 }
100 | ]}"
101 | yKeys="{['A']}"
102 | xKey="sprint"
103 | tickFormatterX="{(value) => '(' + value + ')'}"
104 | />
105 | </App>
106 | ```
107 |
108 | ### `tickFormatterY` [#tickformattery]
109 |
110 | A function that formats the tick labels on the Y-axis.
111 |
112 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
113 | <App>
114 | <BarChart
115 | orientation="horizontal"
116 | height="240px"
117 | data="{[
118 | { 'sprint': 'Sprint 1', 'A': 44 },
119 | { 'sprint': 'Sprint 2', 'A': 32 },
120 | { 'sprint': 'Sprint 3', 'A': 48 },
121 | { 'sprint': 'Sprint 4', 'A': 72 }
122 | ]}"
123 | yKeys="{['A']}"
124 | xKey="sprint"
125 | tickFormatterY="{(value) => '$' + value}"
126 | />
127 | </App>
128 | ```
129 |
130 | ### `tooltipTemplate` [#tooltiptemplate]
131 |
132 | This property allows replacing the default template to display a tooltip.
133 |
134 | ```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
135 | <App>
136 | <BarChart
137 | orientation="horizontal"
138 | height="240px"
139 | data="{[
140 | { 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
141 | { 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
142 | { 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
143 | { 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
144 | ]}"
145 | yKeys="{['A', 'B']}"
146 | xKey="sprint"
147 | >
148 | <property name="tooltipTemplate">
149 | <VStack backgroundColor='white' padding="$space-2">
150 | <Text fontWeight='bold'>{$tooltip.label}</Text>
151 | <Items data="{$tooltip.payload}">
152 | <HStack gap="$space-2" verticalAlignment="center">
153 | <Stack
154 | width="8px"
155 | height="8px"
156 | backgroundColor="{$item.color}" />
157 | <Text>{$item.label}: {$item.value}</Text>
158 | </HStack>
159 | </Items>
160 | </VStack>
161 | </property>
162 | </BarChart>
163 | </App>
164 | ```
165 |
166 | The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
167 |
168 | - `$tooltip.label`: The label for the data point (typically the yKey value)
169 | - `$tooltip.payload`: An object containing all data values for the hovered point
170 | - `$tooltip.active`: Boolean indicating if the tooltip is currently active
171 |
172 | ### `xKey` [#xkey]
173 |
174 | This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.
175 |
176 | ### `yKeys` [#ykeys]
177 |
178 | Specifies the key in the data objects that will be used to label the different data series.
179 |
180 | ## Events [#events]
181 |
182 | This component does not have any events.
183 |
184 | ## Exposed Methods [#exposed-methods]
185 |
186 | This component does not expose any methods.
187 |
188 | ## Styling [#styling]
189 |
190 | This component does not have any styles.
191 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Backdrop/Backdrop.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { create } from "domain";
2 | import { test, expect } from "../../testing/fixtures";
3 |
4 | // =============================================================================
5 | // BASIC FUNCTIONALITY TESTS
6 | // =============================================================================
7 |
8 | test("component renders with default props", async ({ initTestBed, createBackdropDriver }) => {
9 | // TODO: review these Copilot-created tests
10 |
11 | await initTestBed(`<Backdrop>Content</Backdrop>`, {});
12 | const backdropDriver = await createBackdropDriver();
13 | const backdropElement = backdropDriver.getBackdrop();
14 |
15 | await expect(backdropElement).toBeVisible();
16 | await expect(backdropElement).toHaveCSS(
17 | "background-color",
18 | backdropDriver.getDefaultBackgroundColor(),
19 | );
20 | await expect(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
21 | await expect(backdropDriver.component).toHaveText("Content");
22 | });
23 |
24 | test("component renders with custom background color", async ({
25 | initTestBed,
26 | createBackdropDriver,
27 | }) => {
28 | const EXPECTED_COLOR = "rgb(255, 0, 0)"; // Red color
29 | await initTestBed(`<Backdrop backgroundColor="${EXPECTED_COLOR}">Content</Backdrop>`, {});
30 | const backdropDriver = await createBackdropDriver();
31 | const backdropElement = backdropDriver.getBackdrop();
32 |
33 | await expect(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
34 | });
35 |
36 | test("component renders with custom opacity", async ({ initTestBed, createBackdropDriver }) => {
37 | const EXPECTED_OPACITY = "0.5";
38 | await initTestBed(`<Backdrop opacity="${EXPECTED_OPACITY}">Content</Backdrop>`, {});
39 | const backdropDriver = await createBackdropDriver();
40 | const backdropElement = backdropDriver.getBackdrop();
41 |
42 | await expect(backdropElement).toHaveCSS("opacity", EXPECTED_OPACITY);
43 | });
44 |
45 | test("component renders with overlay template", async ({ initTestBed, createBackdropDriver }) => {
46 | await initTestBed(
47 | `
48 | <Backdrop>
49 | <property name="overlayTemplate">
50 | <H1>Overlay</H1>
51 | </property>
52 | Content
53 | </Backdrop>
54 | `,
55 | {},
56 | );
57 | const backdropDriver = await createBackdropDriver();
58 | const backdropElement = backdropDriver.getBackdrop();
59 |
60 | await expect(backdropElement).toBeVisible();
61 | await expect(backdropElement).toHaveCSS(
62 | "background-color",
63 | backdropDriver.getDefaultBackgroundColor(),
64 | );
65 | await expect(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
66 | await expect(backdropDriver.component).toContainText("Content");
67 | await expect(backdropDriver.getOverlay()).toContainText("Overlay");
68 | });
69 |
70 | // =============================================================================
71 | // ACCESSIBILITY TESTS
72 | // =============================================================================
73 |
74 | // TODO: Implement accessibility tests
75 |
76 | // =============================================================================
77 | // VISUAL STATE TESTS
78 | // =============================================================================
79 |
80 | test("component handles different background colors", async ({
81 | initTestBed,
82 | createBackdropDriver,
83 | }) => {
84 | await initTestBed(`<Backdrop backgroundColor="blue">Content</Backdrop>`, {});
85 | const EXPECTED_COLOR = "rgb(0, 0, 255)"; // Blue color
86 | const backdropDriver = await createBackdropDriver();
87 | const backdropElement = backdropDriver.getBackdrop();
88 |
89 | await expect(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
90 | });
91 |
92 | test("component handles theme variables", async ({
93 | initTestBed,
94 | createBackdropDriver,
95 | }) => {
96 | await initTestBed(`<Backdrop>Content</Backdrop>`, {
97 | testThemeVars: {
98 | "backgroundColor-Backdrop": "rgb(255, 0, 0)", // Red color
99 | "opacity-Backdrop": "0.75",
100 | },
101 | });
102 | const backdropDriver = await createBackdropDriver();
103 | const backdropElement = backdropDriver.getBackdrop();
104 |
105 | await expect(backdropElement).toHaveCSS("background-color", "rgb(255, 0, 0)"); // Red color
106 | await expect(backdropElement).toHaveCSS("opacity", "0.75");
107 | });
108 |
109 |
110 | // =============================================================================
111 | // EDGE CASE TESTS
112 | // =============================================================================
113 |
114 | test("component handles empty string props gracefully", async ({
115 | initTestBed,
116 | createBackdropDriver,
117 | }) => {
118 | await initTestBed(`<Backdrop backgroundColor="">Content</Backdrop>`, {});
119 | const backdropDriver = await createBackdropDriver();
120 | const backdropElement = backdropDriver.getBackdrop();
121 |
122 | await expect(backdropElement).toHaveCSS("background-color", "rgb(0, 0, 0)"); // Default transparent color
123 | await expect(backdropElement).toHaveCSS("opacity", "0.1");
124 | });
125 |
126 | test("component handles special characters in content correctly", async ({
127 | initTestBed,
128 | createBackdropDriver,
129 | }) => {
130 | await initTestBed(`<Backdrop>Content with special characters: !@#$%^&*()</Backdrop>`, {});
131 | const backdropDriver = await createBackdropDriver();
132 | const backdropElement = backdropDriver.getBackdrop();
133 |
134 | await expect(backdropElement).toBeVisible();
135 | await expect(backdropDriver.component).toContainText("Content with special characters: !@#$%^&*()");
136 | });
137 |
138 | // =============================================================================
139 | // INTEGRATION TESTS
140 | // =============================================================================
141 |
142 | test("component works correctly with nested content", async ({ initTestBed, createBackdropDriver }) => {
143 | // TODO: review these Copilot-created tests
144 |
145 | await initTestBed(
146 | `
147 | <Backdrop>
148 | <VStack>
149 | <Text>Line 1</Text>
150 | <Text>Line 2</Text>
151 | </VStack>
152 | </Backdrop>
153 | `,
154 | {},
155 | );
156 | const backdropDriver = await createBackdropDriver();
157 |
158 | // Test that nested content renders correctly
159 | await expect(backdropDriver.component).toContainText("Line 1");
160 | await expect(backdropDriver.component).toContainText("Line 2");
161 |
162 | // Test that backdrop is rendered over the content
163 | await expect(backdropDriver.getBackdrop()).toBeVisible();
164 | });
165 |
166 | test("component works correctly in different layout contexts", async ({
167 | initTestBed,
168 | createBackdropDriver,
169 | }) => {
170 | await initTestBed(
171 | `
172 | <HStack>
173 | <Text>Before</Text>
174 | <Backdrop backgroundColor="blue" opacity="0.3">Backdrop Content</Backdrop>
175 | <Text>After</Text>
176 | </HStack>
177 | `,
178 | {},
179 | );
180 | const backdropDriver = await createBackdropDriver();
181 |
182 | // Test that backdrop is rendered over the content
183 | await expect(backdropDriver.getBackdrop()).toBeVisible();
184 | });
185 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/AutoComplete/AutoComplete.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | // --- This code snippet is required to collect the theme variables used in this module
4 | $themeVars: (
5 | );
6 |
7 | @function createThemeVar($componentVariable) {
8 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
9 | @return t.getThemeVar($themeVars, $componentVariable);
10 | }
11 |
12 | $component: "AutoComplete";
13 | $themeVars: t.composeBorderVars($themeVars, $component);
14 | $themeVars: t.composePaddingVars($themeVars, $component);
15 | $themeVars: t.composePaddingVars($themeVars, "item-#{$component}");
16 |
17 | // --- CSS properties of a particular AutoComplete variant
18 | @mixin variant($variantName) {
19 | border-radius: createThemeVar("Input:borderRadius-#{$component}-#{$variantName}");
20 | border-color: createThemeVar("Input:borderColor-#{$component}-#{$variantName}");
21 | border-width: createThemeVar("Input:borderWidth-#{$component}-#{$variantName}");
22 | border-style: createThemeVar("Input:borderStyle-#{$component}-#{$variantName}");
23 | font-size: createThemeVar("Input:fontSize-#{$component}-#{$variantName}");
24 | background-color: createThemeVar("Input:backgroundColor-#{$component}-#{$variantName}");
25 | box-shadow: createThemeVar("Input:boxShadow-#{$component}-#{$variantName}");
26 | color: createThemeVar("Input:textColor-#{$component}-#{$variantName}");
27 |
28 | &:hover {
29 | border-color: createThemeVar("Input:borderColor-#{$component}-#{$variantName}--hover");
30 | background-color: createThemeVar("Input:backgroundColor-#{$component}-#{$variantName}--hover");
31 | box-shadow: createThemeVar("Input:boxShadow-#{$component}-#{$variantName}--hover");
32 | color: createThemeVar("Input:textColor-#{$component}-#{$variantName}--hover");
33 | }
34 |
35 | &::placeholder {
36 | color: createThemeVar("Input:textColor-placeholder-#{$component}-#{$variantName}");
37 | font-size: createThemeVar("Input:fontSize-placeholder-#{$component}-#{$variantName}");
38 | }
39 | }
40 |
41 | @layer components {
42 | .command {
43 | width: 100%;
44 | height: auto;
45 | overflow: visible;
46 | background-color: transparent;
47 | }
48 |
49 | .badgeListWrapper {
50 | outline: none;
51 | width: 100%;
52 | gap: t.$space-1;
53 | display: flex;
54 | flex-direction: row;
55 | flex-wrap: wrap;
56 | @include t.paddingVars($themeVars, $component);
57 |
58 | @include variant("default");
59 |
60 | &.error {
61 | @include variant("error");
62 | }
63 |
64 | &.warning {
65 | @include variant("warning");
66 | }
67 |
68 | &.valid {
69 | @include variant("success");
70 | }
71 |
72 | &.disabled {
73 | cursor: not-allowed;
74 | opacity: 0.5;
75 | background-color: createThemeVar("Input:backgroundColor-#{$component}--disabled");
76 | color: createThemeVar("Input:textColor-#{$component}--disabled");
77 | border-color: createThemeVar("Input:borderColor-#{$component}--disabled");
78 | }
79 |
80 | &.focused {
81 | outline-width: createThemeVar("Input:outlineWidth-#{$component}--focus");
82 | outline-color: createThemeVar("Input:outlineColor-#{$component}--focus");
83 | outline-style: createThemeVar("Input:outlineStyle-#{$component}--focus");
84 | outline-offset: createThemeVar("Input:outlineOffset-#{$component}--focus");
85 | }
86 | }
87 |
88 | .badgeList {
89 | position: relative;
90 | align-items: center;
91 | display: flex;
92 | flex-wrap: wrap;
93 | gap: 0.25rem;
94 | }
95 |
96 | .inputWrapper {
97 | display: flex;
98 | align-items: center;
99 | min-width: fit-content;
100 | flex: 1;
101 | gap: t.$space-1;
102 | }
103 |
104 | .badge {
105 | width: fit-content;
106 | height: fit-content;
107 | min-width: 0;
108 | padding: createThemeVar("paddingVertical-#{$component}-badge") createThemeVar("paddingHorizontal-#{$component}-badge");
109 | border-radius: createThemeVar("borderRadius-#{$component}-badge");
110 | transition:
111 | color 0.2s,
112 | background-color 0.2s;
113 | user-select: none;
114 | cursor: pointer;
115 | display: flex;
116 | gap: t.$space-1;
117 | justify-content: center;
118 | align-items: center;
119 | font-size: createThemeVar("Input:fontSize-#{$component}-badge");
120 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge");
121 | color: createThemeVar("Input:textColor-#{$component}-badge");
122 |
123 | &:hover {
124 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge--hover");
125 | color: createThemeVar("Input:textColor-#{$component}-badge--hover");
126 | }
127 |
128 | &:active {
129 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge--active");
130 | color: createThemeVar("Input:textColor-#{$component}-badge--active");
131 | }
132 | }
133 |
134 | .commandInput {
135 | width: 100%;
136 | background-color: transparent;
137 | outline: none;
138 |
139 | &:disabled {
140 | cursor: not-allowed;
141 | opacity: 0.5;
142 | }
143 |
144 | &::placeholder {
145 | color: createThemeVar("Input:textColor-placeholder-#{$component}");
146 | }
147 |
148 | &:focus-within {
149 | outline: none;
150 | }
151 | }
152 |
153 | .actions {
154 | display: flex;
155 | align-items: center;
156 | flex-shrink: 0;
157 | }
158 |
159 | .action {
160 | cursor: pointer;
161 | }
162 |
163 | .autoCompleteEmpty {
164 | display: flex;
165 | gap: 0.2rem;
166 | padding: 10px 0;
167 | justify-content: center;
168 | align-items: center;
169 | font-size: 14px;
170 | width: 100%;
171 | }
172 |
173 | .commandList {
174 | width: 100%;
175 | position: absolute;
176 | overflow: hidden;
177 | top: t.$space-1;
178 | z-index: 999;
179 | outline: none;
180 | border-radius: createThemeVar("Input:borderRadius-menu-#{$component}");
181 | border: createThemeVar("Input:borderWidth-menu-#{$component}") solid createThemeVar("Input:borderColor-menu-#{$component}");
182 | background-color: createThemeVar("Input:backgroundColor-menu-#{$component}");
183 | box-shadow: createThemeVar("Input:boxShadow-menu-#{$component}");
184 | animation: fade-in 0.3s ease-in-out;
185 | }
186 |
187 | .autoCompleteOption {
188 | @include t.paddingVars($themeVars, "item-#{$component}");
189 | display: flex;
190 | gap: t.$space-1;
191 | align-items: center;
192 | justify-content: space-between;
193 | cursor: pointer;
194 | transition: background-color 0.2s ease;
195 | background-color: createThemeVar("backgroundColor-item-#{$component}");
196 |
197 | &[aria-selected="true"] {
198 | background-color: createThemeVar("backgroundColor-item-#{$component}--active");
199 | }
200 |
201 | &:hover,
202 | &.highlighted {
203 | background-color: createThemeVar("backgroundColor-item-#{$component}--hover");
204 | }
205 |
206 | &[aria-disabled="true"],
207 | &.disabledOption {
208 | pointer-events: none;
209 | cursor: not-allowed;
210 | color: createThemeVar("textColor-item-#{$component}--disabled");
211 | font-style: italic;
212 | }
213 | }
214 | }
215 |
216 | // --- We export the theme variables to add them to the component renderer
217 | :export {
218 | themeVars: t.json-stringify($themeVars);
219 | }
```
--------------------------------------------------------------------------------
/docs/public/pages/scripting.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Scripting
2 |
3 | With XMLUI you can go a long way without coding anything more than small JavaScript snippets like those we've seen in the [Markup](/markup) chapter.
4 |
5 | An expression:
6 |
7 | ```xmlui !/{ 6 * 7 }/
8 | <Text value="Life, the universe, and everything: { 6 * 7 }" />
9 | ```
10 |
11 | A statement:
12 |
13 | ```xmlui !/{ count++ }/
14 | <Button label="Click to increment the count">
15 | <event name="click">
16 | { count++ }
17 | </event>
18 | </Button>
19 | ```
20 |
21 | An object literal:
22 |
23 | ```xmlui !/{ station: "Brixton", wifi: true, toilets: false }/
24 | <Form
25 | data='{{ station: "Brixton", wifi: true, toilets: false }}'
26 | onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
27 | >
28 | ```
29 |
30 | A function call:
31 |
32 | ```xmlui !/() => { preview.setValue(JSON.stringify($data)) }/
33 | <Form
34 | data='{{ station: "Brixton", wifi: true, toilets: false }}'
35 | onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
36 | >
37 | ```
38 |
39 | The last example uses a JavaScript [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), a concise way to define and use a function in an XMLUI attribute. The function receives the value of a selected theme in the `newTheme` argument (a name of your choosing) and calls the [global](/globals) `setTheme` function with that value.
40 |
41 | ## Writing longer functions
42 |
43 | The most elaborate function we've seen so far was this one, used in [Components](/components-intro) chapter to extract data from a complex API response.
44 |
45 | ```js copy
46 | window.transformStops = function(stops) {
47 | return stops.map(function(stop) {
48 | // Helper to extract a value from additionalProperties by key
49 | function getProp(key) {
50 | if (!stop.additionalProperties) return '';
51 | var propObj = stop.additionalProperties.find(function(p) {
52 | return p.key === key;
53 | });
54 | return propObj ? propObj.value : '';
55 | }
56 | return {
57 | name: stop.commonName,
58 | zone: getProp('Zone'),
59 | wifi: getProp('WiFi'),
60 | toilets: getProp('Toilets'),
61 | // A comma-separated list of line names that serve this stop
62 | lines: stop.lines
63 | ? stop.lines.map(function(line) { return line.name; }).join(', ')
64 | : ''
65 | };
66 | });
67 | }
68 | ```
69 |
70 | Here's how it works.
71 |
72 | - `transformStops` receives a `stops` argument which is an array of JavaScript objects created by a `DataSource`. Each is a complex object representing a London tube stop.
73 | - `map` is a method on an array object like `stops`. It takes an anonymous function as an argument, runs it for each item in the array, and returns a new array with each item transformed by a call to the function.
74 | - `function(stop) { ... }` is the anonymous function passed to `map`. It defines a nested helper function, `getProp`, to extract property values.
75 | - `getProp` calls `find`, another method on an array object. In this case the array is `stop.additionalProperties`. Like `map` it receives an anonymous function (`function(p)`) that receives an `additionalProperties` object. It returns true if the name passed to `getProp` matches the value of `p.key`.
76 |
77 | It helps to see the structure of a single object in the `stops` array.
78 |
79 | ```json
80 | {
81 | "commonName": "Baker Street Underground Station",
82 | "placeType": "StopPoint",
83 | "additionalProperties": [
84 | {
85 | "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
86 | "category": "ServiceInfo",
87 | "key": "WiFi",
88 | "sourceSystemKey": "StaticObjects",
89 | "value": "yes"
90 | },
91 | {
92 | "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
93 | "category": "Facility",
94 | "key": "Car park",
95 | "sourceSystemKey": "StaticObjects",
96 | "value": "no"
97 | },
98 | ]
99 | }
100 | ```
101 |
102 | Here's an example of the transformed output.
103 |
104 | ```json
105 | {
106 | "value": [
107 | {
108 | "name": "Bank Underground Station",
109 | "zone": "1",
110 | "wifi": "yes",
111 | "toilets": "yes",
112 | "lines": "Central, Northern, Waterloo & City"
113 | },
114 | {
115 | "name": "Waterloo Underground Station",
116 | "zone": "1",
117 | "wifi": "yes",
118 | "toilets": "no",
119 | "lines": "Bakerloo, Jubilee, Northern, Waterloo & City"
120 | }
121 | ]
122 | }
123 | ```
124 |
125 | ## Deploying the transform function
126 |
127 | We defined the function in XMLUI's `index.html` like so:
128 |
129 | ```html
130 | <script>
131 | window.transformStops = function(stops) {
132 | ...
133 | }
134 | </script>
135 | ```
136 |
137 | When you define functions in `index.html` you can keep everything in one place for easy reference, and debug your functions in the browser's devtools environment.
138 |
139 | You can alternatively put functions into XMLUI *code-behind* files. In this case, for the `TubeStops` component which lives in the file `TubeStops.xmlui`, you would create a parallel file called `TubeStops.xmlui.xs`. In that context, arrow functions are required, so the function would look like this.
140 |
141 | ```js
142 | function transformStops(stops) {
143 | return stops.map(stop => {
144 | // Helper to extract a value from additionalProperties by key
145 | const getProp = (key) => {
146 | const prop = stop.additionalProperties &&
147 | stop.additionalProperties.find(p => p.key === key);
148 | return prop ? prop.value : '';
149 | };
150 | return {
151 | name: stop.commonName,
152 | zone: getProp('Zone'),
153 | wifi: getProp('WiFi'),
154 | toilets: getProp('Toilets'),
155 | // A comma-separated list of line names that serve this stop
156 | lines: stop.lines ? stop.lines.map(line => line.name).join(', ') : ''
157 | };
158 | });
159 | }
160 | ```
161 |
162 | ## index.html vs code-behind
163 |
164 | You can use either or both of these strategies in an XMLUI app. Use `index.html` if:
165 |
166 | - Your function will be reused across components
167 | - You like keeping all your functions in one place for convenient review
168 | - You need to debug your function
169 | - Your function interacts with JavaScript libraries you load via `index.html`
170 | - You are unfamiliar with "modern" JavaScript features like arrow functions
171 |
172 | Use code-behind if:
173 |
174 | - You prefer to organize functions by component
175 | - Your function works with variables scoped to a component
176 | - Your function works with XMLUI [globals](/globals)
177 |
178 | ## Inline code
179 |
180 | When you write JavaScript expressions in XMLUI attributes you typically write single expressions, not multiline code blocks. But you can write multiline code blocks in some event handlers, for example click handlers.
181 |
182 | ```xmlui copy
183 | <Button label="onClick" onClick="{
184 | console.log('clicked');
185 | count++;
186 | toast('count now' + count)
187 | }" />
188 | ```
189 |
190 | ```xmlui copy
191 | <Button label="event tag">
192 | <event name="click">
193 | {
194 | console.log('clicked');
195 | count++;
196 | toast('count now' + count)
197 | }
198 | </event>
199 | </Button>
200 | ```
201 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/APICall/APICall.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { type ComponentDef } from "../../abstractions/ComponentDefs";
2 | import { createComponentRenderer } from "../../components-core/renderers";
3 | import type { ApiOperationDef } from "../../components-core/RestApiProxy";
4 | import { createMetadata, dInternal } from "../../components/metadata-helpers";
5 | import { httpMethodNames } from "../abstractions";
6 | import { APICallNative, defaultProps } from "./APICallNative";
7 |
8 | const COMP = "APICall";
9 |
10 | export interface ApiActionComponent extends ComponentDef {
11 | props?: ApiOperationDef & {
12 | invalidates?: string | string[];
13 | updates?: string | string[];
14 | confirmTitle?: string;
15 | confirmMessage?: string;
16 | confirmButtonLabel?: string;
17 | optimisticValue: any;
18 | getOptimisticValue: string;
19 | inProgressNotificationMessage?: string;
20 | errorNotificationMessage?: string;
21 | completedNotificationMessage?: string;
22 | };
23 | events?: {
24 | success: string;
25 | progress: string;
26 | error: string;
27 | beforeRequest: string;
28 | };
29 | }
30 |
31 | export const APICallMd = createMetadata({
32 | status: "stable",
33 | description:
34 | "`APICall` creates, updates or deletes data on the backend, versus [`DataSource`]" +
35 | "(/components/DataSource) which fetches data. Unlike DataSource, APICall doesn't " +
36 | "automatically execute - you must trigger it manually with the `execute()` method, " +
37 | "typically from form submissions or button clicks.",
38 | props: {
39 | method: {
40 | description: "The method of data manipulation can be done via setting this property.",
41 | valueType: "string",
42 | availableValues: httpMethodNames,
43 | defaultValue: defaultProps.method,
44 | },
45 | url: {
46 | description:
47 | "Use this property to set the URL to which data will be sent. If not provided, an empty URL is used.",
48 | isRequired: true,
49 | valueType: "string",
50 | },
51 | rawBody: {
52 | description:
53 | "This optional property sets the request body to the value provided here without any conversion. " +
54 | "Use the * \`body\` property if you want the object sent in JSON. When you define " +
55 | "\`body\` and \`rawBody\`, the latest one prevails.",
56 | valueType: "string",
57 | },
58 | body: {
59 | description:
60 | "This optional property sets the request body. Use to pass an object that will be " +
61 | "serialized as a JSON string. If you have an object that is already serialized as " +
62 | "a JSON string, use `rawBody` instead.",
63 | valueType: "string",
64 | },
65 | queryParams: {
66 | description:
67 | "This optional property sets the query parameters for the request. The object you pass here will " +
68 | "be serialized to a query string and appended to the request URL. You can specify key " +
69 | "and value pairs where the key is the name of a particular query parameter and the value " +
70 | "is that parameter's value.",
71 | },
72 | headers: {
73 | description:
74 | "You can optionally define request header values as key-value pairs, where the key is the ID " +
75 | "of the particular header and the value is that header's corresponding value.",
76 | },
77 | confirmTitle: {
78 | description:
79 | "This optional string sets the title in the confirmation dialog that is displayed before " +
80 | `the \`${COMP}\` is executed.`,
81 | valueType: "string",
82 | },
83 | confirmMessage: {
84 | description:
85 | "This optional string sets the message in the confirmation dialog that is displayed before " +
86 | `the \`${COMP}\` is executed.`,
87 | valueType: "string",
88 | },
89 | confirmButtonLabel: {
90 | description:
91 | "This optional string property enables the customization of the submit button in the " +
92 | `confirmation dialog that is displayed before the \`${COMP}\` is executed.`,
93 | valueType: "string",
94 | },
95 | inProgressNotificationMessage: {
96 | description:
97 | "This property customizes the message that is displayed in a toast while the API " +
98 | "operation is in progress. If not defined, no progress message is displayed.",
99 | valueType: "string",
100 | },
101 | errorNotificationMessage: {
102 | description:
103 | "This property defines the message to display automatically when the operation " +
104 | "results in an error. You can use the `$error` context value in an expression to " +
105 | "refer to the original error message.",
106 | valueType: "string",
107 | },
108 | completedNotificationMessage: {
109 | description:
110 | "This property defines the message to display automatically when the operation has " +
111 | "been completed. When this property is not defined, the completion does not display any message.",
112 | valueType: "string",
113 | },
114 | payloadType: dInternal(),
115 | invalidates: dInternal(),
116 | updates: dInternal(),
117 | optimisticValue: dInternal(),
118 | getOptimisticValue: dInternal(),
119 | },
120 | events: {
121 | beforeRequest: {
122 | description:
123 | "This event fires before the request is sent. Returning an explicit boolean" +
124 | "\`false\` value will prevent the request from being sent.",
125 | },
126 | success: {
127 | description: "This event fires when a request results in a success.",
128 | },
129 | // This event fires when a request results in an error.
130 | error: {
131 | description: "This event fires when a request results in an error.",
132 | },
133 | progress: dInternal(),
134 | },
135 | contextVars: {
136 | $param: {
137 | description: "The first parameter passed to `execute()` method",
138 | },
139 | $params: {
140 | description:
141 | "Array of all parameters passed to `execute()` method (access with " +
142 | "`$params[0]`, `$params[1]`, etc.)",
143 | },
144 | $result: {
145 | description:
146 | "Response data (available in `completedNotificationMessage`)",
147 | },
148 | $error: {
149 | description: "Error details (available in `errorNotificationMessage`)",
150 | },
151 | },
152 | apis: {
153 | execute: {
154 | description:
155 | "This method triggers the invocation of the API. You can pass an arbitrary " +
156 | "number of parameters to the method. In the \`APICall\` instance, you can " +
157 | "access those with the \`$param\` and \`$params\` context values.",
158 | signature: "execute(...params: any[])",
159 | parameters: {
160 | params: "An arbitrary number of parameters that can be used in the API call.",
161 | },
162 | },
163 | },
164 | });
165 |
166 | export const apiCallRenderer = createComponentRenderer(
167 | COMP,
168 | APICallMd,
169 | ({ node, registerComponentApi, uid }) => {
170 | return (
171 | <APICallNative registerComponentApi={registerComponentApi} node={node as any} uid={uid} />
172 | );
173 | },
174 | );
175 |
```
--------------------------------------------------------------------------------
/docs/public/pages/working-with-text.md:
--------------------------------------------------------------------------------
```markdown
1 | # Working with Text
2 |
3 | Text elements appear in UI components such as menu items, titles, headings, labels, and descriptions. There is also a [Markdown](/components/Markdown) component for complete text documents (like this page). We'll cover `Text` here and `Markdown` in the [next chapter](/working-with-markdown).
4 |
5 | You can nest text in any component that renders its children.
6 |
7 |
8 | ```xmlui-pg display name="Example: displaying text"
9 | <App>
10 | This is text!
11 | <Button label="This is text too." />
12 | This is more text!
13 | </App>
14 | ```
15 |
16 | To gain more control we can use the `Text` component.
17 |
18 | ```xmlui-pg display name="Example: Using the Text component"
19 | <App>
20 | <Text fontSize="1.5rem" color="purple">This is a text!</Text>
21 | <Button label="I'm just a button" />
22 | <Text backgroundColor="lightgreen">This is another text!</Text>
23 | </App>
24 | ```
25 |
26 | Components that render text support theme variables. You can use them, for example, to control the styling of the heading family of components ([Heading](/components/Heading), [H1](/components/H1), [H2](/components/H2), etc).
27 |
28 | ```xmlui-pg display name="Example: Text can be styled"
29 | <App>
30 | <Theme
31 | textColor-H1 = "red"
32 | textColor-H2 = "green">
33 | <H1>My Main Title</H1>
34 | This document contains several sections.
35 | <H2>Section Title</H2>
36 | </Theme>
37 | </App>
38 | ```
39 |
40 | ## Specifying text content
41 |
42 | Components like `Text`, `H1` and `Badge` can display text in two ways:
43 |
44 | - **Nesting text**
45 | - **Setting the `value` property**
46 |
47 | We've seen nesting, here's an example that uses the `value` property.
48 |
49 | ```xmlui-pg display name="Example: Text and the value property"
50 | <App>
51 | <H2 value="Text Content with Properties" />
52 | <Text value="This text is set in the 'value' property of 'Text'." />
53 | </App>
54 | ```
55 |
56 | >[!INFO]
57 | > With nested text, multiple consecutive spaces or newlines collapse to a single space. That doesn't happen when you set text using the `value`.
58 |
59 | Whitespace collapsing enables you to maintain source text that's broken into multiple lines for easier editing.
60 |
61 | The collapsed view renders neatly.
62 |
63 | ```xmlui-pg display name="Example: whitespace collapsing"
64 | <App>
65 | This is a long text broken into multiple lines.
66 |
67 | The source markup would be challenging to read if
68 |
69 | the entire text were specified in a single line.
70 | </App>
71 | ```
72 |
73 |
74 | ## Binding expressions
75 |
76 | Binding expressions are placeholders for computed values.
77 |
78 |
79 | ```xmlui-pg display name="Try the reset button!"
80 | <App>
81 | Seconds of the current minute: { getDate().getSeconds() }
82 | </App>
83 | ```
84 |
85 | Results of binding expressions are displayed with collapsed whitespace.
86 |
87 |
88 | ## Inline and block rendering
89 |
90 | When you render text, it accommodates the current layout context. If that context uses inline rendering, the text is rendered inline; otherwise, it renders as a block.
91 |
92 | In an `HStack`, text segments render inline.
93 |
94 | ```xmlui-pg copy display name="Example: inline rendering"
95 | <App>
96 | <HStack>
97 | Show me a trash
98 | <Icon name="trash"/>
99 | icon!
100 | </HStack>
101 | </App>
102 | ```
103 |
104 |
105 |
106 | In a `VStack` they render as blocks.
107 |
108 | ```xmlui-pg copy display name="Example: block rendering"
109 | <App>
110 | <VStack>
111 | Show me a trash
112 | <Icon name="trash"/>
113 | icon!
114 | </VStack>
115 | </App>
116 | ```
117 |
118 | ## Non-breaking spaces
119 |
120 | Use ` ` to preserve spaces in a context where they would otherwise collapse.
121 |
122 | ```xmlui-pg copy display name="Example: non-breaking spaces"
123 | <App>
124 | A series of non-breaking segments: [1 2 3 4]
125 | </App>
126 | ```
127 |
128 |
129 | ## Long text
130 |
131 | With long text you may need to control how that text is broken into new lines (if at all) and how to handle overflows. By default a long text breaks into multiple lines.
132 |
133 | ```xmlui-pg copy display name="Example: text breaks into multiple lines"
134 | <App>
135 | <Text width="200px">
136 | This long text does not fit into a width constraint of 200 pixels.
137 | </Text>
138 | </App>
139 | ```
140 |
141 | If necessary, breaks occur within a word.
142 |
143 | ```xmlui-pg copy display name="Example: break within a word"
144 | <App>
145 | <Text width="200px">
146 | ThisLongTextDoesNotFitInTheGivenConstraint of 200 pixels wide.
147 | </Text>
148 | </App>
149 | ```
150 |
151 | ## Preserving line breaks
152 |
153 | Sometimes you want to preserve line breaks, as when inspecting a JSON object.
154 |
155 | ```xmlui-pg copy display name="Example: preserving line breaks" /preserveLinebreaks="true"/
156 | <App
157 | var.data = "{
158 | {
159 | apples: 3,
160 | oranges: 4
161 | }
162 | }"
163 | >
164 | <Text preserveLinebreaks="false">
165 | { JSON.stringify(data, null, 2) }
166 | </Text>
167 | <Text preserveLinebreaks="true">
168 | { JSON.stringify(data, null, 2) }
169 | </Text>
170 | </App>
171 | ```
172 |
173 | ## Variants of the Text component
174 |
175 | In addition to the theme variables that govern the `Text` component, you can use the [`variant`](/components/Text#variant) property to control styles directly.
176 |
177 | ```xmlui-pg
178 | <App>
179 | <HStack>
180 | <Text width="150px">default:</Text>
181 | <Text>This is an example text</Text>
182 | </HStack>
183 | <HStack>
184 | <Text width="150px">paragraph:</Text>
185 | <Text variant="paragraph">This is an example paragraph</Text>
186 | </HStack>
187 | <HStack>
188 | <Text width="150px">placeholder:</Text>
189 | <Text variant="placeholder">
190 | This is an example text
191 | </Text>
192 | </HStack>
193 | <HStack>
194 | <Text width="150px">secondary:</Text>
195 | <Text variant="secondary">
196 | This is an example text
197 | </Text>
198 | </HStack>
199 | <HStack>
200 | <Text width="150px">code:</Text>
201 | <Text variant="code">
202 | This is an example text
203 | </Text>
204 | </HStack>
205 | <HStack>
206 | <Text width="150px">codefence + code:</Text>
207 | <Text variant="codefence">
208 | <Text variant="code">
209 | This is an example text
210 | </Text>
211 | </Text>
212 | </HStack>
213 | <HStack>
214 | <Text width="150px">keyboard:</Text>
215 | <Text variant="keyboard">
216 | This is an example text
217 | </Text>
218 | </HStack>
219 | <HStack>
220 | <Text width="150px">sup:</Text>
221 | <Text>
222 | This is an example text
223 | <Text variant="sup">(with some additional text)</Text>
224 | </Text>
225 | </HStack>
226 | <HStack>
227 | <Text width="150px">sub:</Text>
228 | <Text>
229 | This is an example text
230 | <Text variant="sub">(with some additional text)</Text>
231 | </Text>
232 | </HStack>
233 | <HStack>
234 | <Text width="150px">mono:</Text>
235 | <Text variant="mono">
236 | This is an example text
237 | </Text>
238 | </HStack>
239 | <HStack>
240 | <Text width="150px">strong:</Text>
241 | <Text variant="strong">
242 | This is an example text
243 | </Text>
244 | </HStack>
245 | <HStack>
246 | <Text width="150px">small:</Text>
247 | <Text variant="small">
248 | This is an example text
249 | </Text>
250 | </HStack>
251 | <HStack>
252 | <Text width="150px">caption:</Text>
253 | <Text variant="caption">
254 | This is an example text
255 | </Text>
256 | </HStack>
257 | </App>
258 | ```
259 |
260 |
```