This is page 94 of 186. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?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-swa.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
│ │ ├── staticwebapp.config.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
│ ├── component-metadata.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
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.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
│ ├── generate-metadata-markdown.js
│ ├── 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.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── 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
--------------------------------------------------------------------------------
/docs/content/components/TextBox.md:
--------------------------------------------------------------------------------
```markdown
1 | # TextBox [#textbox]
2 |
3 | `TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints.
4 |
5 | **Key features:**
6 | - **Visual enhancements**: Add icons and text at start/end positions for context and branding
7 | - **Validation states**: Built-in visual indicators for valid, warning, and error states
8 | - **Input control**: Support for initial values, programmatic focus, and value setting
9 |
10 | Often used in forms, see [this guide](/forms) for details.
11 |
12 | ## Properties [#properties]
13 |
14 | ### `autoFocus` (default: false) [#autofocus-default-false]
15 |
16 | If this property is set to `true`, the component gets the focus automatically when displayed.
17 |
18 | ### `enabled` (default: true) [#enabled-default-true]
19 |
20 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
21 |
22 | ```xmlui-pg copy display name="Example: enabled"
23 | <App>
24 | <TextBox enabled="false" />
25 | </App>
26 | ```
27 |
28 | ### `endIcon` [#endicon]
29 |
30 | This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.
31 |
32 | ```xmlui-pg copy display name="Example: endIcon"
33 | <App>
34 | <TextBox endIcon="email" />
35 | </App>
36 | ```
37 |
38 | It is possible to set the other adornments as well: [`endText`](#endtext), [`startIcon`](#starticon) and [`startText`](#starttext).
39 |
40 | ```xmlui-pg copy display name="Example: all adornments"
41 | <App>
42 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
43 | </App>
44 | ```
45 |
46 | ### `endText` [#endtext]
47 |
48 | This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.
49 |
50 | ```xmlui-pg copy display name="Example: endText"
51 | <App>
52 | <TextBox endText=".com" />
53 | </App>
54 | ```
55 |
56 | It is possible to set the other adornments as well: [`endIcon`](#endicon), [`startIcon`](#starticon) and [`startText`](#starttext).
57 |
58 | ```xmlui-pg copy display name="Example: all adornments"
59 | <App>
60 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
61 | </App>
62 | ```
63 |
64 | ### `gap` [#gap]
65 |
66 | This property defines the gap between the adornments and the input area. If not set, the gap declared by the current theme is used.
67 |
68 | ### `initialValue` (default: "") [#initialvalue-default-]
69 |
70 | This property sets the component's initial value.
71 |
72 | ```xmlui-pg copy display name="Example: initialValue"
73 | <App>
74 | <TextBox initialValue="Example text" />
75 | </App>
76 | ```
77 |
78 | ### `maxLength` [#maxlength]
79 |
80 | This property sets the maximum length of the input it accepts.
81 |
82 | Try to enter a longer value into the input field below.
83 |
84 | ```xmlui-pg copy display name="Example: maxLength"
85 | <App>
86 | <TextBox maxLength="16" />
87 | </App>
88 | ```
89 |
90 | ### `passwordHiddenIcon` (default: "eye-off") [#passwordhiddenicon-default-eye-off]
91 |
92 | The icon to display when the password is hidden (when showPasswordToggle is true).
93 |
94 | ### `passwordVisibleIcon` (default: "eye") [#passwordvisibleicon-default-eye]
95 |
96 | The icon to display when the password is visible (when showPasswordToggle is true).
97 |
98 | ### `placeholder` [#placeholder]
99 |
100 | An optional placeholder text that is visible in the input field when its empty.
101 |
102 | ```xmlui-pg copy display name="Example: placeholder"
103 | <App>
104 | <TextBox placeholder="This is a placeholder" />
105 | </App>
106 | ```
107 |
108 | ### `readOnly` (default: false) [#readonly-default-false]
109 |
110 | Set this property to `true` to disallow changing the component value.
111 |
112 | ```xmlui-pg copy display name="Example: readOnly"
113 | <App>
114 | <TextBox initialValue="Example text" readOnly="true" />
115 | </App>
116 | ```
117 |
118 | ### `required` (default: false) [#required-default-false]
119 |
120 | Set this property to `true` to indicate it must have a value before submitting the containing form.
121 |
122 | ### `showPasswordToggle` (default: false) [#showpasswordtoggle-default-false]
123 |
124 | If `true`, a toggle button is displayed to switch between showing and hiding the password input.
125 |
126 | ### `startIcon` [#starticon]
127 |
128 | This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.
129 |
130 | ```xmlui-pg copy display name="Example: startIcon"
131 | <App>
132 | <TextBox startIcon="hyperlink" />
133 | </App>
134 | ```
135 |
136 | It is possible to set the other adornments as well: [`endText`](#endtext), [`startIcon`](#starticon) and [`startText`](#starttext).
137 |
138 | ```xmlui-pg copy display name="Example: all adornments"
139 | <App>
140 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
141 | </App>
142 | ```
143 |
144 | ### `startText` [#starttext]
145 |
146 | This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.
147 |
148 | ```xmlui-pg copy display name="Example: startText"
149 | <App>
150 | <TextBox startText="www." />
151 | </App>
152 | ```
153 |
154 | It is possible to set the other adornments as well: [`endIcon`](#endicon), [`startIcon`](#starticon) and [`endText`](#endtext).
155 |
156 | ```xmlui-pg copy display name="Example: all adornments"
157 | <App>
158 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
159 | </App>
160 | ```
161 |
162 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
163 |
164 | This property allows you to set the validation status of the input component.
165 |
166 | Available values:
167 |
168 | | Value | Description |
169 | | --- | --- |
170 | | `valid` | Visual indicator for an input that is accepted |
171 | | `warning` | Visual indicator for an input that produced a warning |
172 | | `error` | Visual indicator for an input that produced an error |
173 |
174 | ```xmlui-pg copy display name="Example: validationStatus"
175 | <App>
176 | <TextBox />
177 | <TextBox validationStatus="valid" />
178 | <TextBox validationStatus="warning" />
179 | <TextBox validationStatus="error" />
180 | </App>
181 | ```
182 |
183 | ## Events [#events]
184 |
185 | ### `didChange` [#didchange]
186 |
187 | This event is triggered when value of TextBox has changed.
188 |
189 | Write in the input field and see how the `Text` underneath it is updated in parallel.
190 |
191 | ```xmlui-pg copy {3} display name="Example: didChange"
192 | <App var.field="">
193 | <TextBox initialValue="{field}" onDidChange="(val) => field = val" />
194 | <Text value="{field}" />
195 | </App>
196 | ```
197 |
198 | ### `gotFocus` [#gotfocus]
199 |
200 | This event is triggered when the TextBox has received the focus.
201 |
202 | Clicking on the `TextBox` in the example demo changes the label text.
203 | Note how clicking elsewhere resets the text to its original.
204 |
205 | ```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
206 | <App>
207 | <TextBox
208 | initialValue="{focused === true ? 'I got focused!' : 'I lost focus...'}"
209 | onGotFocus="focused = true"
210 | onLostFocus="focused = false"
211 | var.focused="{false}"
212 | />
213 | </App>
214 | ```
215 |
216 | ### `lostFocus` [#lostfocus]
217 |
218 | This event is triggered when the TextBox has lost the focus.
219 |
220 | ## Exposed Methods [#exposed-methods]
221 |
222 | ### `focus` [#focus]
223 |
224 | This method sets the focus on the `TextBox` component.
225 |
226 | **Signature**: `focus(): void`
227 |
228 | ```xmlui-pg copy {2-3} display name="Example: focus"
229 | <App>
230 | <Button label="Trigger Focus" onClick="inputComponent.focus()" />
231 | <TextBox id="inputComponent" />
232 | </App>
233 | ```
234 |
235 | ### `setValue` [#setvalue]
236 |
237 | This API sets the value of the `TextBox`. You can use it to programmatically change the value.
238 |
239 | **Signature**: `setValue(value: string): void`
240 |
241 | - `value`: The new value to set. If the value is empty, it will clear the input.
242 |
243 | ```xmlui-pg copy {10} display name="Example: setValue"
244 | <App var.changes="">
245 | <TextBox
246 | id="inputField"
247 | readOnly="true"
248 | onDidChange="changes++"
249 | />
250 | <HStack>
251 | <Button
252 | label="Check"
253 | onClick="inputField.setValue('example ')"
254 | />
255 | <Text value="Number of changes: {changes}" />
256 | </HStack>
257 | </App>
258 | ```
259 |
260 | ### `value` [#value]
261 |
262 | You can query the component's value. If no value is set, it will retrieve `undefined`.
263 |
264 | **Signature**: `get value(): string | undefined`
265 |
266 | In the example below, typing in the `TextBox` will also display the length of the text typed into it above the field:
267 |
268 | ```xmlui-pg copy {2-3} display name="Example: value"
269 | <App>
270 | <Text value="TextBox content length: {inputComponent.value.length}" />
271 | <TextBox id="inputComponent" />
272 | </App>
273 | ```
274 |
275 | ## Parts [#parts]
276 |
277 | The component has some parts that can be styled through layout properties and theme variables separately:
278 |
279 | - **`endAdornment`**: The adornment displayed at the end of the text box.
280 | - **`input`**: The text box input area.
281 | - **`label`**: The label displayed for the text box.
282 | - **`startAdornment`**: The adornment displayed at the start of the text box.
283 |
284 | **Default part**: `input`
285 |
286 | ## Styling [#styling]
287 |
288 | ### Theme Variables [#theme-variables]
289 |
290 | | Variable | Default Value (Light) | Default Value (Dark) |
291 | | --- | --- | --- |
292 | | [backgroundColor](../styles-and-themes/common-units/#color)-Input--disabled | $backgroundColor--disabled | $backgroundColor--disabled |
293 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
294 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
295 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
296 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
297 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
298 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
299 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
300 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
301 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
302 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
303 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
304 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
305 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
306 | | [borderColor](../styles-and-themes/common-units/#color)-Input--default | $borderColor-Input-default | $borderColor-Input-default |
307 | | [borderColor](../styles-and-themes/common-units/#color)-Input--default--hover | $borderColor-Input-default--hover | $borderColor-Input-default--hover |
308 | | [borderColor](../styles-and-themes/common-units/#color)-Input--disabled | $borderColor--disabled | $borderColor--disabled |
309 | | [borderColor](../styles-and-themes/common-units/#color)-Input--error | $borderColor-Input-default--error | $borderColor-Input-default--error |
310 | | [borderColor](../styles-and-themes/common-units/#color)-Input--success | $borderColor-Input-default--success | $borderColor-Input-default--success |
311 | | [borderColor](../styles-and-themes/common-units/#color)-Input--warning | $borderColor-Input-default--warning | $borderColor-Input-default--warning |
312 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
313 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
314 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
315 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
316 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
317 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
318 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
319 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
320 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
321 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
322 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
323 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
324 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
325 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Input | $borderRadius | $borderRadius |
326 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--default | *none* | *none* |
327 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--error | *none* | *none* |
328 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--success | *none* | *none* |
329 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--warning | *none* | *none* |
330 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Input | solid | solid |
331 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--default | *none* | *none* |
332 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--error | *none* | *none* |
333 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--success | *none* | *none* |
334 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--warning | *none* | *none* |
335 | | [borderWidth](../styles-and-themes/common-units/#size)-Input | 1px | 1px |
336 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--default | *none* | *none* |
337 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--error | *none* | *none* |
338 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--success | *none* | *none* |
339 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--warning | *none* | *none* |
340 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default | *none* | *none* |
341 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default--focus | *none* | *none* |
342 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default--hover | *none* | *none* |
343 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error | *none* | *none* |
344 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error--focus | *none* | *none* |
345 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error--hover | *none* | *none* |
346 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success | *none* | *none* |
347 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success--focus | *none* | *none* |
348 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success--hover | *none* | *none* |
349 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning | *none* | *none* |
350 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning--focus | *none* | *none* |
351 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning--hover | *none* | *none* |
352 | | [color](../styles-and-themes/common-units/#color)-adornment-Input | $textColor-subtitle | $textColor-subtitle |
353 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--default | *none* | *none* |
354 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--error | *none* | *none* |
355 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--success | *none* | *none* |
356 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--warning | *none* | *none* |
357 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-Input | $textColor-subtitle | $textColor-subtitle |
358 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox | *none* | *none* |
359 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox--focus | *none* | *none* |
360 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox--hover | *none* | *none* |
361 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--default | *none* | *none* |
362 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--error | *none* | *none* |
363 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--success | *none* | *none* |
364 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--warning | *none* | *none* |
365 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--default | *none* | *none* |
366 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--error | *none* | *none* |
367 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--success | *none* | *none* |
368 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--warning | *none* | *none* |
369 | | [gap](../styles-and-themes/common-units/#size)-adornment-Input | $space-2 | $space-2 |
370 | | [gap](../styles-and-themes/common-units/#size)-adornment-TextBox | *none* | *none* |
371 | | [minHeight](../styles-and-themes/common-units/#size)-Input | 39px | 39px |
372 | | [outlineColor](../styles-and-themes/common-units/#color)-Input--focus | $outlineColor--focus | $outlineColor--focus |
373 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
374 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
375 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
376 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
377 | | [outlineOffset](../styles-and-themes/common-units/#size)-Input--focus | $outlineOffset--focus | $outlineOffset--focus |
378 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--default--focus | *none* | *none* |
379 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--error--focus | *none* | *none* |
380 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--success--focus | *none* | *none* |
381 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--warning--focus | *none* | *none* |
382 | | [outlineStyle](../styles-and-themes/common-units/#border)-Input--focus | $outlineStyle--focus | $outlineStyle--focus |
383 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--default--focus | *none* | *none* |
384 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--error--focus | *none* | *none* |
385 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--success--focus | *none* | *none* |
386 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--warning--focus | *none* | *none* |
387 | | [outlineWidth](../styles-and-themes/common-units/#size)-Input--focus | $outlineWidth--focus | $outlineWidth--focus |
388 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--default--focus | *none* | *none* |
389 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--error--focus | *none* | *none* |
390 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--success--focus | *none* | *none* |
391 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--warning--focus | *none* | *none* |
392 | | [padding](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
393 | | [paddingBottom](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
394 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-TextBox | $space-2 | $space-2 |
395 | | [paddingLeft](../styles-and-themes/common-units/#size)-passwordToggle-TextBox | *none* | *none* |
396 | | [paddingLeft](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
397 | | [paddingRight](../styles-and-themes/common-units/#size)-passwordToggle-TextBox | *none* | *none* |
398 | | [paddingRight](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
399 | | [paddingTop](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
400 | | [paddingVertical](../styles-and-themes/common-units/#size)-TextBox | $space-2 | $space-2 |
401 | | [textColor](../styles-and-themes/common-units/#color)-Input | $textColor-primary | $textColor-primary |
402 | | [textColor](../styles-and-themes/common-units/#color)-Input--disabled | $textColor--disabled | $textColor--disabled |
403 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-Input | $textColor-subtitle | $textColor-subtitle |
404 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--default | *none* | *none* |
405 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--error | *none* | *none* |
406 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--success | *none* | *none* |
407 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--warning | *none* | *none* |
408 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
409 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
410 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
411 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
412 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
413 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
414 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
415 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
416 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
417 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
418 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
419 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
420 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
421 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/data-operations.md:
--------------------------------------------------------------------------------
```markdown
1 | # Data Operations
2 |
3 | This document explains XMLUI's data operation architecture, covering automatic loader creation, the ApiBoundComponent system, DataSource/APICall components, state integration, and React Query caching.
4 |
5 | ## Overview
6 |
7 | XMLUI provides declarative data operations through components that automatically manage async state, caching, and integration with the container system. The framework detects data requirements and creates **loaders** - internal mechanisms handling fetch operations, state transitions, and cache management.
8 |
9 | **Core Components:**
10 | - **DataSource** - Fetches and caches data from API endpoints
11 | - **APICall** - Creates, updates, or deletes data (manual execution)
12 | - **FileUpload/FileDownload** - Specialized file operations
13 | - **Loaders** - Internal state machines managing async operations
14 |
15 | **What Loaders Do:**
16 |
17 | Loaders are React components (not user-defined) that the framework automatically creates to manage async operations. Each loader:
18 | 1. Executes HTTP requests via React Query
19 | 2. Manages loading/error/success states
20 | 3. Integrates with container state via reducer actions
21 | 4. Provides programmatic APIs (`refetch()`, `update()`, etc.)
22 | 5. Handles caching, polling, and pagination
23 |
24 | **Key Features:** Automatic loader creation, declarative API operations, integrated caching with React Query, seamless container state integration, polling/refetching, optimistic updates.
25 |
26 | ## Automatic Loader Creation
27 |
28 | ### ApiBoundComponent Detection
29 |
30 | The framework automatically detects when components require API operations and wraps them in `ApiBoundComponent`, which generates necessary loaders. Detection occurs in `ComponentAdapter.tsx`:
31 |
32 | ```typescript
33 | // Scan component for API-bound properties
34 | const apiBoundProps = useMemo(
35 | () => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"),
36 | [safeNode.props]
37 | );
38 |
39 | // Scan events for API actions
40 | const apiBoundEvents = useMemo(
41 | () => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"),
42 | [safeNode.events]
43 | );
44 |
45 | // Wrap if API-bound items found
46 | if (apiBoundProps.length || apiBoundEvents.length) {
47 | return (
48 | <ApiBoundComponent
49 | uid={uid}
50 | node={safeNode}
51 | apiBoundProps={apiBoundProps}
52 | apiBoundEvents={apiBoundEvents}
53 | renderChild={renderChild}
54 | />
55 | );
56 | }
57 | ```
58 |
59 | ### Detection Scenarios
60 |
61 | **1. Property-Based (Data Fetching):**
62 | ```xml
63 | <!-- Direct URL pattern -->
64 | <Table data="/api/users" />
65 | <!-- Creates DataLoader automatically -->
66 |
67 | <!-- DataSource reference -->
68 | <Table data="{users}" />
69 | <!-- Creates DataLoader when 'users' is DataSource -->
70 |
71 | <!-- Explicit DataSource -->
72 | <DataSource id="users" url="/api/users" />
73 | <Table data="{users}" />
74 | <!-- DataSource becomes loader accessible as 'users' -->
75 | ```
76 |
77 | **2. Event-Based (Data Mutation):**
78 | ```xml
79 | <Button>
80 | Save
81 | <event name="click">
82 | <APICall url="/api/save" method="POST" body="{formData}" />
83 | </event>
84 | </Button>
85 | <!-- APICall handler generated for click event -->
86 |
87 | <FileUploadDropZone>
88 | <event name="uploaded">
89 | <FileUpload url="/api/upload" />
90 | </event>
91 | </FileUploadDropZone>
92 | <!-- FileUpload handler attached to uploaded event -->
93 | ```
94 |
95 | ### ApiBoundComponent Transformation
96 |
97 | `ApiBoundComponent` transforms the component definition by:
98 |
99 | 1. **Creating Loader Definitions** - Generates `DataLoader` components for each API-bound property
100 | 2. **Generating Event Handlers** - Converts action components into executable functions
101 | 3. **Injecting API Properties** - Adds loader state properties (`value`, `inProgress`, `loaded`, `error`)
102 | 4. **Registering APIs** - Creates methods like `fetch_data()`, `update_data()`, `refetch()`
103 |
104 | ```typescript
105 | // Inside ApiBoundComponent.tsx
106 | apiBoundProps.forEach((key) => {
107 | const loaderUid = node.props![key].uid || generateloaderUid(key);
108 | const operation = node.props![key].props || node.props![key];
109 |
110 | // Create DataLoader definition
111 | loaders.push({
112 | type: "DataLoader",
113 | uid: loaderUid,
114 | props: operation,
115 | events: loaderEvents,
116 | });
117 |
118 | // Inject reactive properties
119 | props[key] = `{ ${loaderUid}.value }`;
120 | props.loading = `{ ${loaderUid}.inProgress === undefined ? true : ${loaderUid}.inProgress}`;
121 |
122 | // Register API methods
123 | api[`fetch_${key}`] = `() => { ${loaderUid}.refetch(); }`;
124 | api[`update_${key}`] = `(updaterFn) => { ${loaderUid}.update(updaterFn); }`;
125 | });
126 | ```
127 |
128 | **Result:** Component receives transformed props/events and gains API methods for programmatic control.
129 |
130 | ## DataSource Component
131 |
132 | ### Purpose and Properties
133 |
134 | DataSource fetches data from API endpoints with automatic caching, polling, and state management.
135 |
136 | **Core Properties:**
137 | ```typescript
138 | {
139 | id: string; // Required: Identifier for referencing
140 | url: string; // Required: API endpoint
141 | method?: string; // HTTP method (default: "GET")
142 | body?: any; // Request body (JSON serialized)
143 | rawBody?: string; // Pre-serialized body
144 | queryParams?: object; // URL query parameters
145 | headers?: object; // Request headers
146 | pollIntervalInSeconds?: number; // Auto-refresh interval
147 | resultSelector?: string; // Extract subset of response
148 | transformResult?: Function; // Transform response data
149 | structuralSharing?: boolean; // Keep unchanged refs (default: true)
150 | }
151 | ```
152 |
153 | **Events:**
154 | - `loaded(data, isRefetch)` - Fires when data successfully fetched
155 | - `error(error)` - Fires on request failure
156 |
157 | **APIs:**
158 | ```typescript
159 | {
160 | value: any; // Fetched data (post-transformation)
161 | inProgress: boolean; // Loading state
162 | isRefetching: boolean; // Re-fetch state
163 | loaded: boolean; // Has data been loaded
164 | refetch(): void; // Manually trigger re-fetch
165 | }
166 | ```
167 |
168 | ### Usage Patterns
169 |
170 | **Basic Fetching:**
171 | ```xml
172 | <DataSource id="users" url="/api/users" />
173 | <Table data="{users}" />
174 | <!-- Table receives users.value automatically -->
175 | ```
176 |
177 | **With Transformation:**
178 | ```xml
179 | <DataSource
180 | id="products"
181 | url="/api/products"
182 | resultSelector="data.items"
183 | transformResult="(items) => items.filter(i => i.active)"
184 | />
185 | ```
186 |
187 | **With Polling:**
188 | ```xml
189 | <DataSource
190 | id="status"
191 | url="/api/status"
192 | pollIntervalInSeconds="5"
193 | inProgressNotificationMessage="Checking status..."
194 | />
195 | ```
196 |
197 | **Programmatic Control:**
198 | ```xml
199 | <DataSource id="orders" url="/api/orders" />
200 | <Button onClick="orders.refetch()">Refresh</Button>
201 | ```
202 |
203 | ### Data Transformation Pipeline
204 |
205 | 1. **Fetch** - HTTP request via RestApiProxy
206 | 2. **Result Selection** - Extract subset via `resultSelector` (lodash path)
207 | 3. **Transformation** - Apply `transformResult` function
208 | 4. **Structural Sharing** - Preserve unchanged object references (if enabled)
209 | 5. **State Update** - Dispatch `LOADER_LOADED` action to container
210 |
211 | ```typescript
212 | // In DataLoader.tsx
213 | const transformResult = useCallback(async (data: any) => {
214 | // 1. Extract subset
215 | if (loader.props.resultSelector) {
216 | data = extractParam(state, loader.props.resultSelector, appContext, data);
217 | }
218 |
219 | // 2. Apply custom transformation
220 | if (loader.props.transformResult) {
221 | const transform = extractParam(state, loader.props.transformResult, appContext);
222 | data = await transform(data);
223 | }
224 |
225 | return data;
226 | }, [loader.props, state, appContext]);
227 | ```
228 |
229 | ### Paging Support
230 |
231 | DataSource supports pagination when `prevPageSelector` and/or `nextPageSelector` are defined:
232 |
233 | ```xml
234 | <DataSource
235 | id="pagedData"
236 | url="/api/items?page=1"
237 | nextPageSelector="pagination.nextPage"
238 | prevPageSelector="pagination.prevPage"
239 | />
240 |
241 | <Table data="{pagedData}">
242 | <event name="requestFetchNextPage">
243 | <!-- Auto-wired by ApiBoundComponent -->
244 | </event>
245 | </Table>
246 | ```
247 |
248 | Internally uses `PageableLoader` with React Query's infinite query capabilities.
249 |
250 | ## APICall Component
251 |
252 | ### Purpose and Properties
253 |
254 | APICall creates, updates, or deletes data. Unlike DataSource, it doesn't auto-execute - requires manual trigger via `execute()` method.
255 |
256 | **Core Properties:**
257 | ```typescript
258 | {
259 | url: string; // Required: API endpoint
260 | method?: string; // HTTP method (default: "GET")
261 | body?: any; // Request body
262 | rawBody?: string; // Pre-serialized body
263 | queryParams?: object; // URL parameters
264 | headers?: object; // Request headers
265 |
266 | // Confirmation dialog
267 | confirmTitle?: string;
268 | confirmMessage?: string;
269 | confirmButtonLabel?: string;
270 |
271 | // Notifications
272 | inProgressNotificationMessage?: string;
273 | completedNotificationMessage?: string;
274 | errorNotificationMessage?: string;
275 | }
276 | ```
277 |
278 | **Events:**
279 | - `beforeRequest($param, $params)` - Before execution (return `false` to cancel)
280 | - `success($result)` - On successful response
281 | - `error($error)` - On failure
282 |
283 | **APIs:**
284 | ```typescript
285 | {
286 | execute(...params): Promise<any>; // Trigger API call
287 | }
288 | ```
289 |
290 | **Context Variables:**
291 | - `$param` - First argument to `execute()`
292 | - `$params` - Array of all arguments
293 | - `$result` - Response data (in success/notification contexts)
294 | - `$error` - Error details (in error contexts)
295 |
296 | ### Usage Patterns
297 |
298 | **Button Click:**
299 | ```xml
300 | <APICall id="saveUser" url="/api/users" method="POST" body="{userData}" />
301 | <Button onClick="saveUser.execute()">Save</Button>
302 | ```
303 |
304 | **Form Submission:**
305 | ```xml
306 | <Form>
307 | <event name="submit">
308 | <APICall
309 | url="/api/users"
310 | method="POST"
311 | body="{$data}"
312 | completedNotificationMessage="User created successfully!"
313 | />
314 | </event>
315 | </Form>
316 | ```
317 |
318 | **With Parameters:**
319 | ```xml
320 | <APICall id="deleteItem" url="/api/items/{$param}" method="DELETE">
321 | <event name="success">
322 | <script>
323 | users.refetch(); // Refresh user list after deletion
324 | </script>
325 | </event>
326 | </APICall>
327 |
328 | <Button onClick="deleteItem.execute(item.id)">Delete</Button>
329 | ```
330 |
331 | **With Confirmation:**
332 | ```xml
333 | <APICall
334 | id="deleteUser"
335 | url="/api/users/{$param}"
336 | method="DELETE"
337 | confirmTitle="Delete User"
338 | confirmMessage="Are you sure you want to delete this user?"
339 | confirmButtonLabel="Delete"
340 | />
341 | ```
342 |
343 | **Conditional Execution:**
344 | ```xml
345 | <APICall id="updateStatus" url="/api/status" method="PATCH">
346 | <event name="beforeRequest">
347 | <script>
348 | // Return false to prevent execution
349 | return formIsValid;
350 | </script>
351 | </event>
352 | </APICall>
353 | ```
354 |
355 | ### Event-Based APICall
356 |
357 | When APICall is in an event handler, ApiBoundComponent generates inline function:
358 |
359 | ```typescript
360 | // Generated event handler
361 | events.click = `(eventArgs, options) => {
362 | return Actions.callApi({
363 | uid: ${JSON.stringify(uid)},
364 | method: "POST",
365 | url: "/api/save",
366 | body: ${JSON.stringify(body)} || (options?.passAsDefaultBody ? eventArgs : undefined),
367 | params: { '$param': eventArgs },
368 | onSuccess: ${prepareEvent(success)},
369 | onError: ${prepareEvent(error)},
370 | }, { resolveBindingExpressions: true });
371 | }`;
372 | ```
373 |
374 | This allows seamless integration with form submissions and button clicks.
375 |
376 | ## Loader Infrastructure
377 |
378 | ### LoaderComponent
379 |
380 | `LoaderComponent` manages individual loader lifecycle and state integration:
381 |
382 | ```typescript
383 | export function LoaderComponent({
384 | node, // Loader definition
385 | state, // Container state
386 | dispatch, // Container dispatcher
387 | registerComponentApi,
388 | loaderInProgressChanged, // State update callbacks
389 | loaderLoaded,
390 | loaderError,
391 | }) {
392 | const uid = useMemo(() => Symbol(node.uid), [node.uid]);
393 |
394 | // Lookup renderer based on loader type
395 | const renderer = componentRegistry.lookupLoaderRenderer(node.type);
396 |
397 | // Render with callbacks for state updates
398 | return renderer({
399 | loader: node,
400 | state,
401 | loaderInProgressChanged: (isInProgress) =>
402 | dispatch(loaderInProgressChanged(uid, isInProgress)),
403 | loaderLoaded: (data, pageInfo) =>
404 | dispatch(loaderLoaded(uid, data, pageInfo)),
405 | loaderError: (error) =>
406 | dispatch(loaderError(uid, error)),
407 | });
408 | }
409 | ```
410 |
411 | ### DataLoader Implementation
412 |
413 | `DataLoader` is the primary loader renderer, integrating React Query:
414 |
415 | **Key Responsibilities:**
416 | 1. **Query Key Generation** - Creates unique keys for caching
417 | 2. **Data Fetching** - Uses RestApiProxy for HTTP requests
418 | 3. **State Transitions** - Dispatches loader actions to container
419 | 4. **Polling** - Implements refetch intervals
420 | 5. **Transformation** - Applies result selectors and transformers
421 |
422 | ```typescript
423 | function DataLoader({ loader, loaderInProgressChanged, loaderLoaded, loaderError }) {
424 | const url = extractParam(state, loader.props.url, appContext);
425 | const queryParams = useShallowCompareMemoize(
426 | extractParam(state, loader.props.queryParams, appContext)
427 | );
428 |
429 | // Generate cache key
430 | const queryKey = useMemo(() =>
431 | DataLoaderQueryKeyGenerator.generate(url, queryParams, body),
432 | [url, queryParams, body]
433 | );
434 |
435 | // React Query integration
436 | const query = useQuery({
437 | queryKey,
438 | queryFn: ({ signal }) => doLoad(signal),
439 | refetchInterval: loader.props.pollIntervalInSeconds * 1000,
440 | structuralSharing: loader.props.structuralSharing,
441 | });
442 |
443 | // Sync state with container
444 | useEffect(() => {
445 | loaderInProgressChanged(query.isFetching);
446 | }, [query.isFetching]);
447 |
448 | useEffect(() => {
449 | if (query.data !== undefined) {
450 | loaderLoaded(query.data, pageInfo);
451 | }
452 | }, [query.data]);
453 |
454 | useEffect(() => {
455 | if (query.error) {
456 | loaderError(query.error);
457 | }
458 | }, [query.error]);
459 | }
460 | ```
461 |
462 | ### PageableLoader
463 |
464 | Extends DataLoader for infinite pagination using React Query's `useInfiniteQuery`:
465 |
466 | ```typescript
467 | function PageableLoader({ loader, direction }) {
468 | const query = useInfiniteQuery({
469 | queryKey,
470 | queryFn: ({ signal, pageParam }) => doLoad(signal, pageParam),
471 | getNextPageParam: (lastPage) =>
472 | extractParam(state, loader.props.nextPageSelector, appContext, lastPage),
473 | getPreviousPageParam: (firstPage) =>
474 | extractParam(state, loader.props.prevPageSelector, appContext, firstPage),
475 | });
476 |
477 | // Register APIs
478 | registerComponentApi({
479 | fetchNextPage: query.fetchNextPage,
480 | fetchPrevPage: query.fetchPreviousPage,
481 | hasNextPage: query.hasNextPage,
482 | hasPrevPage: query.hasPreviousPage,
483 | });
484 | }
485 | ```
486 |
487 | ## State Integration
488 |
489 | ### Container Reducer Actions
490 |
491 | Loaders integrate with container state via actions:
492 |
493 | ```typescript
494 | export enum ContainerActionKind {
495 | LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
496 | LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
497 | LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
498 | LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
499 | }
500 | ```
501 |
502 | **Reducer Handling:**
503 | ```typescript
504 | switch (action.type) {
505 | case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED:
506 | state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
507 | break;
508 |
509 | case ContainerActionKind.LOADER_LOADED:
510 | state[uid] = {
511 | value: action.payload.data,
512 | byId: Array.isArray(data) ? keyBy(data, item => item.$id) : undefined,
513 | inProgress: false,
514 | loaded: true,
515 | pageInfo: action.payload.pageInfo,
516 | };
517 | break;
518 |
519 | case ContainerActionKind.LOADER_ERROR:
520 | state[uid] = {
521 | ...state[uid],
522 | error: action.payload.error,
523 | inProgress: false,
524 | loaded: true
525 | };
526 | break;
527 | }
528 | ```
529 |
530 | ### State Structure
531 |
532 | Loader state in container:
533 |
534 | ```typescript
535 | {
536 | [loaderUid]: {
537 | value: any, // Fetched/transformed data
538 | byId?: Record<string, any>, // Indexed by $id (if array)
539 | inProgress: boolean, // Loading state
540 | isRefetching: boolean, // Re-fetch state
541 | loaded: boolean, // Has loaded
542 | error?: any, // Error object
543 | pageInfo?: { // Pagination info
544 | hasNextPage: boolean,
545 | hasPrevPage: boolean,
546 | nextPage: any,
547 | prevPage: any,
548 | }
549 | }
550 | }
551 | ```
552 |
553 | ### Reactive Access
554 |
555 | Components access loader state reactively:
556 |
557 | ```xml
558 | <DataSource id="users" url="/api/users" />
559 |
560 | <!-- Reactive bindings -->
561 | <Text>{users.value.length} users</Text>
562 | <Spinner visible="{users.inProgress}" />
563 | <Text visible="{users.error}">Error: {users.error.message}</Text>
564 |
565 | <!-- Programmatic access -->
566 | <Button onClick="users.refetch()" enabled="{!users.inProgress}">
567 | Refresh
568 | </Button>
569 | ```
570 |
571 | ## React Query Integration
572 |
573 | ### Query Client Configuration
574 |
575 | XMLUI provides QueryClient in `AppWrapper`:
576 |
577 | ```typescript
578 | const queryClient = new QueryClient({
579 | defaultOptions: {
580 | queries: {
581 | staleTime: 5 * 60 * 1000, // 5 minutes
582 | cacheTime: 10 * 60 * 1000, // 10 minutes
583 | retry: 1,
584 | refetchOnWindowFocus: false,
585 | },
586 | },
587 | });
588 |
589 | <QueryClientProvider client={queryClient}>
590 | {/* App content */}
591 | </QueryClientProvider>
592 | ```
593 |
594 | ### Cache Key Generation
595 |
596 | `DataLoaderQueryKeyGenerator` creates deterministic keys:
597 |
598 | ```typescript
599 | class DataLoaderQueryKeyGenerator {
600 | static generate(url: string, queryParams?: any, body?: any): QueryKey {
601 | const parts = ['data-loader', url];
602 |
603 | if (queryParams) {
604 | parts.push(JSON.stringify(sortKeys(queryParams)));
605 | }
606 |
607 | if (body) {
608 | parts.push(JSON.stringify(sortKeys(body)));
609 | }
610 |
611 | return parts;
612 | }
613 | }
614 | ```
615 |
616 | **Example Keys:**
617 | ```typescript
618 | ['data-loader', '/api/users']
619 | ['data-loader', '/api/users', '{"role":"admin"}']
620 | ['data-loader', '/api/search', '{"query":"test"}', '{"filters":{}}']
621 | ```
622 |
623 | ### Cache Invalidation
624 |
625 | **Automatic via Cache Keys:**
626 | ```xml
627 | <APICall
628 | url="/api/users"
629 | method="POST"
630 | invalidates="/api/users"
631 | />
632 | <!-- Invalidates all queries matching /api/users -->
633 | ```
634 |
635 | **Manual Invalidation:**
636 | ```typescript
637 | // In event handler
638 | queryClient.invalidateQueries(['data-loader', '/api/users']);
639 | ```
640 |
641 | **Optimistic Updates:**
642 | ```xml
643 | <APICall
644 | id="toggleStatus"
645 | url="/api/items/{$param}/toggle"
646 | method="PATCH"
647 | updates="items"
648 | optimisticValue="{item => ({ ...item, status: !item.status })}"
649 | />
650 | ```
651 |
652 | ## File Operations
653 |
654 | ### FileUpload
655 |
656 | Handles file uploads with multipart/form-data or JSON payloads:
657 |
658 | ```xml
659 | <FileUploadDropZone>
660 | <event name="uploaded">
661 | <FileUpload
662 | url="/api/upload"
663 | asForm="true"
664 | formParams="{metadata}"
665 | />
666 | </event>
667 | </FileUploadDropZone>
668 | ```
669 |
670 | **Properties:**
671 | - `url` - Upload endpoint
672 | - `asForm` - Send as multipart/form-data (default: true)
673 | - `formParams` - Additional form fields
674 | - `file` - File to upload (usually from event)
675 |
676 | ### FileDownload
677 |
678 | Triggers browser download:
679 |
680 | ```xml
681 | <Button>
682 | Export
683 | <event name="click">
684 | <FileDownload
685 | url="/api/export"
686 | fileName="data.csv"
687 | queryParams="{filters}"
688 | />
689 | </event>
690 | </Button>
691 | ```
692 |
693 | ## API Interception
694 |
695 | ### ApiInterceptorProvider
696 |
697 | Enables request mocking, stubbing, and instrumentation:
698 |
699 | ```typescript
700 | <ApiInterceptorProvider
701 | interceptor={(request) => {
702 | // Log request
703 | console.log('API Request:', request.url);
704 |
705 | // Mock response
706 | if (request.url === '/api/users') {
707 | return { data: mockUsers };
708 | }
709 |
710 | // Continue to real endpoint
711 | return null;
712 | }}
713 | >
714 | {/* App content */}
715 | </ApiInterceptorProvider>
716 | ```
717 |
718 | **Use Cases:**
719 | - Development mocking
720 | - Testing
721 | - Request logging
722 | - Error simulation
723 | - Authentication token injection
724 |
725 | ## Advanced Patterns
726 |
727 | ### Dependent Queries
728 |
729 | ```xml
730 | <DataSource id="user" url="/api/user/{userId}" />
731 | <DataSource
732 | id="userPosts"
733 | url="/api/posts?userId={user.value.id}"
734 | />
735 | <!-- userPosts waits for user to load -->
736 | ```
737 |
738 | ### Conditional Loading
739 |
740 | ```xml
741 | <DataSource
742 | id="details"
743 | url="/api/details"
744 | >
745 | <script>
746 | if (!showDetails) return null; // Skip loading
747 | </script>
748 | </DataSource>
749 | ```
750 |
751 | ### Mutation Chaining
752 |
753 | ```xml
754 | <APICall id="createUser" url="/api/users" method="POST">
755 | <event name="success">
756 | <APICall url="/api/welcome-email" method="POST" body="{$result}" />
757 | </event>
758 | </APICall>
759 | ```
760 |
761 | ### Error Recovery
762 |
763 | ```xml
764 | <DataSource id="data" url="/api/data">
765 | <event name="error">
766 | <script>
767 | toast.error('Failed to load data. Retrying...');
768 | setTimeout(() => data.refetch(), 3000);
769 | </script>
770 | </event>
771 | </DataSource>
772 | ```
773 |
774 | ### Custom Data Types
775 |
776 | DataLoader supports specialized data types:
777 |
778 | **CSV:**
779 | ```xml
780 | <DataSource
781 | id="csvData"
782 | url="/data.csv"
783 | dataType="csv"
784 | />
785 | <!-- Auto-parsed with Papa Parse -->
786 | ```
787 |
788 | **SQL (requires backend):**
789 | ```xml
790 | <DataSource
791 | id="sqlData"
792 | url="/query"
793 | dataType="sql"
794 | body="{sql: 'SELECT * FROM users WHERE active = ?', params: [true]}"
795 | />
796 | ```
797 |
798 | ## Performance Considerations
799 |
800 | ### Structural Sharing
801 |
802 | Preserves object references when data unchanged:
803 |
804 | ```xml
805 | <DataSource
806 | id="items"
807 | url="/api/items"
808 | structuralSharing="true"
809 | />
810 | <!-- Child components won't re-render if items unchanged -->
811 | ```
812 |
813 | ### Polling Strategy
814 |
815 | ```xml
816 | <!-- Aggressive polling -->
817 | <DataSource pollIntervalInSeconds="2" />
818 |
819 | <!-- Conservative polling -->
820 | <DataSource pollIntervalInSeconds="60" />
821 |
822 | <!-- Manual only -->
823 | <DataSource />
824 | ```
825 |
826 | ### Query Key Granularity
827 |
828 | **Coarse (shares cache broadly):**
829 | ```xml
830 | <DataSource id="users" url="/api/users" />
831 | <!-- All users queries share cache -->
832 | ```
833 |
834 | **Fine (separate caches):**
835 | ```xml
836 | <DataSource id="activeUsers" url="/api/users" queryParams="{status: 'active'}" />
837 | <DataSource id="inactiveUsers" url="/api/users" queryParams="{status: 'inactive'}" />
838 | <!-- Separate caches due to different query params -->
839 | ```
840 |
841 | ## Summary
842 |
843 | XMLUI's data operation system provides:
844 |
845 | 1. **Automatic Detection** - Framework identifies API requirements and creates loaders
846 | 2. **Declarative API** - XML-based data fetching/mutation without imperative code
847 | 3. **State Integration** - Seamless connection with container reactive state
848 | 4. **Caching** - React Query integration with smart cache management
849 | 5. **Type Safety** - Proper handling of loading/error states
850 | 6. **Flexibility** - Polling, pagination, transformations, interceptors
851 |
852 | This architecture eliminates boilerplate for async operations while maintaining full control through programmatic APIs and event hooks.
853 |
```
--------------------------------------------------------------------------------
/docs/content/components/Tree.md:
--------------------------------------------------------------------------------
```markdown
1 | # Tree [#tree]
2 |
3 | The `Tree` component is a virtualized tree component that displays hierarchical data with support for flat and hierarchy data formats.
4 |
5 | **Key features:**
6 | - **Flat and hierarchical data structures**: You can select the most convenient data format to represent the tree. A set of properties enables you to map your data structure to the visual representation of the tree.
7 | - **Flexible expand/collapse**: You have several properties to represent the expanded and collapsed state of tree nodes. You can also specify several options that determine which tree items are collapsed initially.
8 | - **Tree API**: Several exposed methods allow you to manage the tree's view state imperatively.
9 |
10 | ## Specifying Data [#specifying-data]
11 |
12 | With the `dataFormat` property, you can select between "flat" or "hierarchy" formats. The component transforms the data according to the value of this property into a visual representation.
13 |
14 | The "flat" and "hierarchy" data structures both use these fields for a particular tree node:
15 | - `id`: Unique ID of tree node
16 | - `name`: The field to be used as the display label
17 | - `icon`: An optional icon identifier. If specified, this icon is displayed with the tree item.
18 | - `iconExpanded`: An optional icon identifier. This icon is displayed when the field is expanded.
19 | - `iconCollapsed`: An optional icon identifier. This icon is displayed when the field is collapsed.
20 | - `selectable`: Indicates if the node can be selected.
21 |
22 | The "flat" structure refers to its direct parent node via the `parentId` property, which contains the ID of the node it is referring to.
23 |
24 | The "hierarchy" structure uses a `children` property, which is an array of nested child nodes (using the common node property set above).
25 |
26 | This example demonstrates the use of the "flat" data mode:
27 |
28 | ```xmlui-pg display copy height="220px" /"flat"/ /parentId/ name="Example: flat data format"
29 | <App>
30 | <Tree
31 | testId="tree"
32 | dataFormat="flat"
33 | defaultExpanded="all"
34 | data='{[
35 | { id: 1, icon:"folder", name: "Root Item 1", parentId: null },
36 | { id: 2, icon:"folder", name: "Child Item 1.1", parentId: 1 },
37 | { id: 3, icon: "code", name: "Child Item 1.2", parentId: 1 },
38 | { id: 4, icon: "code", name: "Grandchild Item 1.1.1", parentId: 2 },
39 | ]}'>
40 | </Tree>
41 | </App>
42 | ```
43 |
44 | This example demonstrates the use of the "hiearchy" data mode:
45 |
46 | ```xmlui-pg display copy height="220px" /"flat"/ /children/ name="Example: hierarchical data format"
47 | <App>
48 | <Tree
49 | testId="tree"
50 | dataFormat="hierarchy"
51 | defaultExpanded="all"
52 | data='{[
53 | {
54 | id: 1, icon: "folder", name: "Root Item 1",
55 | children: [
56 | { id: 2, icon: "code", name: "Child Item 1.1" },
57 | { id: 3, icon: "folder", name: "Child Item 1.2",
58 | children: [
59 | { id: 4, icon: "code", name: "Grandchild Item 1.2.1"}
60 | ],
61 | }
62 | ],
63 | },
64 | ]}'>
65 | </Tree>
66 | </App>
67 | ```
68 |
69 | When you use data (for example, retrieved from a backend), those structures may use different property names. The `Tree` component allows mapping data field names through these properties:
70 | - `idField` (default: `id`)
71 | - `nameField` (default: `name`)
72 | - `iconField` (default: `icon`)
73 | - `iconExpandedField` (default: `iconExpanded`)
74 | - `iconCollapsedField` (default: `iconCollapsed`)
75 | - `parentIdField` (default: `parentId`)
76 | - `childrenField` (default: `children`)
77 | - `selectableField` (default: `selectable`)
78 |
79 | The following example uses the `idField`, `nameField`, and `parentIdField` mapping properties:
80 |
81 | ```xmlui-pg display copy height="220px" /idField/ /nameField/ /parentIdField/ /uid/ /label/ /parent/ name="Example: mapping data fields"
82 | <App>
83 | <Tree
84 | testId="tree"
85 | dataFormat="flat"
86 | defaultExpanded="all"
87 | idField="uid"
88 | nameField="label"
89 | parentIdField="parent"
90 | data='{[
91 | { uid: 1, icon:"folder", label: "Root Item 1", parent: null },
92 | { uid: 2, icon:"folder", label: "Child Item 1.1", parent: 1 },
93 | { uid: 3, icon: "code", label: "Child Item 1.2", parent: 1 },
94 | { uid: 4, icon: "code", label: "Grandchild Item 1.1.1", parent: 2 },
95 | ]}'>
96 | </Tree>
97 | </App>
98 | ```
99 |
100 | ## Expanding and collapsing tree nodes [#expanding-and-collapsing-tree-nodes]
101 |
102 | By default, when you click a tree node outside of its expand/collapse icon, the specified item is selected. With the `expandOnItemClick` property (using the `true` value), you can change this behavior to expand or collapse the item when clicking its surface anywhere.
103 |
104 | You can use the `defaultExpanded` property to specify what nodes you want to see expanded initially. You can set this property to a list of node IDs or a string. When you specify IDs, the component expands the hierarchy to reveal the specified nodes. When the value is a string, you can use these options:
105 | - `none`: all nodes are collapsed (default)
106 | - `first-level`: all first-level nodes are expanded
107 | - `all`: all nodes are expanded
108 |
109 | The following example demonstrates the use of `defaultExpanded` with tree node IDs:
110 |
111 | ```xmlui-pg display copy height="300px" /doc-root/ /proj-web/ /media-profile-pic/ name="Example: defaultExpanded with node IDs"
112 | <App>
113 | <Tree
114 | testId="tree"
115 | dataFormat="flat"
116 | defaultExpanded="{['doc-root', 'proj-web', 'media-profile-pic']}"
117 | data='{[
118 | // Branch A: Documents
119 | { id: "doc-root", name: "[Documents]", parentId: null },
120 | { id: "doc-reports", name: "Reports", parentId: "doc-root" },
121 | { id: "doc-invoices", name: "Invoices", parentId: "doc-root" },
122 | { id: "doc-q1-report", name: "Q1 Report.pdf", parentId: "doc-reports" },
123 | { id: "doc-q2-report", name: "Q2 Report.pdf", parentId: "doc-reports" },
124 | { id: "doc-inv-001", name: "Invoice-001.pdf", parentId: "doc-invoices" },
125 |
126 | // Branch B: Projects
127 | { id: "proj-root", name: "Projects", parentId: null },
128 | { id: "proj-web", name: "[Web Apps]", parentId: "proj-root" },
129 | { id: "proj-mobile", name: "Mobile Apps", parentId: "proj-root" },
130 | { id: "proj-ecommerce", name: "E-commerce Site", parentId: "proj-web" },
131 | { id: "proj-dashboard", name: "Admin Dashboard", parentId: "proj-web" },
132 | { id: "proj-ios-app", name: "iOS Shopping App", parentId: "proj-mobile" },
133 |
134 | // Branch C: Media
135 | { id: "media-root", name: "Media", parentId: null },
136 | { id: "media-images", name: "Images", parentId: "media-root" },
137 | { id: "media-videos", name: "Videos", parentId: "media-root" },
138 | { id: "media-profile-pic", name: "[profile.jpg]", parentId: "media-images" },
139 | { id: "media-banner", name: "banner.png", parentId: "media-images" },
140 | ]}'>
141 | </Tree>
142 | </App>
143 | ```
144 |
145 | You have several options to style the icons representing the expanded or collapsed state:
146 | - The icons used for the expanded and collapsed states can be changed with the `iconExpanded` and `iconCollapsed` properties, respectively.
147 | - You can specify a different size with the `iconSize` property (using only numeric values considered as pixels)
148 | - Using a rotate animation when changing the state with the `animateExpand` flag.
149 | The following option demonstrates the last two options:
150 |
151 | ```xmlui-pg display copy {4-5} height="220px" name="Example: expand/collapse options"
152 | <App>
153 | <Tree
154 | testId="tree"
155 | iconSize="24"
156 | animateExpand
157 | dataFormat="flat"
158 | defaultExpanded="all"
159 | data='{[
160 | { id: 1, name: "Root Item 1", parentId: null },
161 | { id: 2, name: "Child Item 1.1", parentId: 1 },
162 | { id: 3, name: "Child Item 1.2", parentId: 1 },
163 | { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
164 | ]}'>
165 | </Tree>
166 | </App>
167 | ```
168 |
169 | ## Selection [#selection]
170 |
171 | Each tree node is selectable by default, unless the node item's data does not have a `selectable` property (or the one specified in `selectedField`).
172 | A selectable item can be selected by clicking the mouse or pressing the Enter or Space keys when it has focus.
173 |
174 | You can set the `selectedValue` property to define the selected tree item, ot use the `selectNode` exposed method for imperative selection.
175 |
176 | ## Item templates [#item-templates]
177 |
178 | You can override the default template used to display a tree item with the `itemTemplate` property. The template definition can use the `$item` context variable to access the item's attributes for display. `$item` provides these properties:
179 | - `id`: The unique node ID
180 | - `name`: The name of the node
181 | - `depth`: The depth level in the tree
182 | - `isExpanded`: Indicates if the tree node is expanded
183 | - `hasChildren`: Indicates if the tree node has children
184 | - `children`: The children of the tree node
185 | - `selectable`: Indicates if the node can be selected
186 | - `parentId`: The ID of the node's parent
187 | - `parentIds`: A list of parent IDs from the root node to the direct parent of the node
188 | - `path`: An array with the node names following the path from the root node to the displayed node.
189 | - `loadingState`: The current state of a dynamic node ("unloaded", "loading", or "loaded")
190 |
191 | This example demonstrates these concepts:
192 |
193 | ```xmlui-pg display copy {20-30} height="400px" /$item.id/ /$item.name/ /$item.hasChildren/ name="Example: itemTemplate"
194 | <App>
195 | <Tree
196 | testId="tree"
197 | id="tree"
198 | defaultExpanded="all"
199 | data='{[
200 | { id: "root", name: "My Files", parentId: null },
201 | { id: "doc-root", name: "Documents", parentId: "root" },
202 | { id: "doc-reports", name: "Reports", parentId: "doc-root" },
203 | { id: "doc-q1-report", name: "Q1 Report.pdf", parentId: "doc-reports" },
204 | { id: "doc-q2-report", name: "Q2 Report.pdf", parentId: "doc-reports" },
205 | { id: "proj-root", name: "Projects", parentId: "root" },
206 | { id: "proj-web", name: "Web Apps", parentId: "proj-root" },
207 | { id: "proj-ecommerce", name: "E-commerce Site", parentId: "proj-web" },
208 | { id: "proj-dashboard", name: "Admin Dashboard", parentId: "proj-web" },
209 | { id: "media-root", name: "Media", parentId: "root" },
210 | { id: "media-images", name: "Images", parentId: "media-root" },
211 | { id: "media-videos", name: "Videos", parentId: "media-root" },
212 | ]}'>
213 | <property name="itemTemplate">
214 | <HStack testId="{$item.id}" verticalAlignment="center" gap="$space-1">
215 | <Icon name="{$item.hasChildren ? 'folder' : 'code'}" />
216 | <Text>
217 | ({$item.id}):
218 | </Text>
219 | <Text variant="strong">
220 | {$item.name}
221 | </Text>
222 | </HStack>
223 | </property>
224 | </Tree>
225 | </App>
226 | ```
227 |
228 | ## Dynamic tree nodes [#dynamic-tree-nodes]
229 |
230 | When initializing the tree with its `data` property, you can set the `dynamic` property of the node to `true` (you can use a field name alias with the `dynamicField` property). When you extend a dynamic node, the tree fires the `loadChildren` event, and the nodes returned by the event handler will be the actual nodes.
231 |
232 | By default, nodes are not dynamic.
233 |
234 | While the child nodes are being queried, the tree node displays a spinner to indicate the loading state.
235 |
236 | You can use the `markNodeUnloaded` exposed method to reset the state of an already loaded dynamic tree node. The next time the user expands the node, its content will be loaded again.
237 |
238 | The following sample demonstrates this feature. Click the "Child Item 1.2" node to check how it loads its children. Click the Unload button to reload the items when the node is expanded the next time.
239 |
240 | ```xmlui-pg display copy {16-19} height="340px" /dynamic: true/ /onLoadChildren/ name="Example: dynamic nodes"
241 | <App var.loadCount="{0}">
242 | <Tree
243 | testId="tree"
244 | defaultExpanded="all"
245 | id="tree"
246 | itemClickExpands
247 | data='{[
248 | { id: 1, name: "Root Item 1", parentId: null },
249 | { id: 2, name: "Child Item 1.1", parentId: 1 },
250 | { id: 3, name: "Child Item 1.2", parentId: 1, dynamic: true },
251 | { id: 4, name: "Child Item 1.3", parentId: 1 },
252 | ]}'
253 | onLoadChildren="(node) => {
254 | loadCount++;
255 | delay(1000);
256 | return ([
257 | { id: 5, name: `Dynamic Item 1.2.1 (${loadCount})` },
258 | { id: 6, name: `Dynamic Item 2.2.2 (${loadCount})` },
259 | ])
260 | }"
261 | >
262 | <property name="itemTemplate">
263 | <HStack testId="{$item.id}" verticalAlignment="center" gap="$space-1">
264 | <Icon name="{$item.hasChildren
265 | ? ($item.loadingState === 'loaded' ? 'folder' : 'folder-outline' )
266 | : 'code'}"
267 | />
268 | <Text>{$item.name}</Text>
269 | </HStack>
270 | </property>
271 | </Tree>
272 | <Button onClick="tree.markNodeUnloaded(3)">Unload</Button>
273 | </App>
274 | ```
275 |
276 | ## Properties [#properties]
277 |
278 | ### `animateExpand` (default: false) [#animateexpand-default-false]
279 |
280 | When true, uses only the collapsed icon and rotates it for expansion instead of switching icons (default: false).
281 |
282 | ### `autoExpandToSelection` (default: true) [#autoexpandtoselection-default-true]
283 |
284 | Automatically expand the path to the selected item.
285 |
286 | ### `childrenField` (default: "children") [#childrenfield-default-children]
287 |
288 | The property name in source data for child arrays (used in hierarchy format).
289 |
290 | ### `data` (required) [#data-required]
291 |
292 | The data source of the tree. Format depends on the dataFormat property.
293 |
294 | ### `dataFormat` (default: "flat") [#dataformat-default-flat]
295 |
296 | The input data structure format: "flat" (array with parent relationships) or "hierarchy" (nested objects).
297 |
298 | ### `defaultExpanded` (default: "none") [#defaultexpanded-default-none]
299 |
300 | Initial expansion state: "none", "all", "first-level", or array of specific IDs.
301 |
302 | ### `dynamicField` (default: "dynamic") [#dynamicfield-default-dynamic]
303 |
304 | The property name in source data for dynamic loading state (default: "dynamic").
305 |
306 | ### `expandRotation` (default: 90) [#expandrotation-default-90]
307 |
308 | The number of degrees to rotate the collapsed icon when expanded in animate mode (default: 90).
309 |
310 | ### `iconCollapsed` (default: "chevronright") [#iconcollapsed-default-chevronright]
311 |
312 | The icon name to use for collapsed nodes (default: "chevronright").
313 |
314 | ### `iconCollapsedField` (default: "iconCollapsed") [#iconcollapsedfield-default-iconcollapsed]
315 |
316 | The property name in source data for collapsed state icons.
317 |
318 | ### `iconExpanded` (default: "chevrondown") [#iconexpanded-default-chevrondown]
319 |
320 | The icon name to use for expanded nodes (default: "chevrondown").
321 |
322 | ### `iconExpandedField` (default: "iconExpanded") [#iconexpandedfield-default-iconexpanded]
323 |
324 | The property name in source data for expanded state icons.
325 |
326 | ### `iconField` (default: "icon") [#iconfield-default-icon]
327 |
328 | The property name in source data for icon identifiers.
329 |
330 | ### `iconSize` (default: "16") [#iconsize-default-16]
331 |
332 | The size of the expand/collapse icons (default: "16").
333 |
334 | ### `idField` (default: "id") [#idfield-default-id]
335 |
336 | The property name in source data for unique identifiers.
337 |
338 | ### `itemClickExpands` (default: false) [#itemclickexpands-default-false]
339 |
340 | Whether clicking anywhere on a tree item should expand/collapse the node, not just the expand/collapse icon.
341 |
342 | ### `itemHeight` (default: 32) [#itemheight-default-32]
343 |
344 | The height of each tree row in pixels (default: 35).
345 |
346 | ### `itemTemplate` [#itemtemplate]
347 |
348 | The template for each item in the tree.
349 |
350 | ### `nameField` (default: "name") [#namefield-default-name]
351 |
352 | The property name in source data for display text.
353 |
354 | ### `parentIdField` (default: "parentId") [#parentidfield-default-parentid]
355 |
356 | The property name in source data for parent relationships (used in flat format).
357 |
358 | ### `selectableField` (default: "selectable") [#selectablefield-default-selectable]
359 |
360 | The property name in source data for selectable state (default: "selectable").
361 |
362 | ### `selectedValue` [#selectedvalue]
363 |
364 | The selected item ID in source data format.
365 |
366 | ## Events [#events]
367 |
368 | ### `loadChildren` [#loadchildren]
369 |
370 | Fired when a tree node needs to load children dynamically. Should return an array of child data.
371 |
372 | ### `nodeDidCollapse` [#nodedidcollapse]
373 |
374 | Fired when a tree node is collapsed.
375 |
376 | ### `nodeDidExpand` [#nodedidexpand]
377 |
378 | Fired when a tree node is expanded.
379 |
380 | ### `selectionDidChange` [#selectiondidchange]
381 |
382 | Fired when the tree selection changes.
383 |
384 | ## Exposed Methods [#exposed-methods]
385 |
386 | ### `appendNode` [#appendnode]
387 |
388 | Add a new node to the tree as a child of the specified parent node.
389 |
390 | **Signature**: `appendNode(parentNodeId: string | number | null, nodeData: any): void`
391 |
392 | - `parentNodeId`: The ID of the parent node, or null/undefined to add to root level
393 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
394 |
395 | ### `clearSelection` [#clearselection]
396 |
397 | Clear the current selection.
398 |
399 | **Signature**: `clearSelection(): void`
400 |
401 | ### `collapseAll` [#collapseall]
402 |
403 | Collapse all nodes in the tree.
404 |
405 | **Signature**: `collapseAll(): void`
406 |
407 | ### `collapseNode` [#collapsenode]
408 |
409 | Collapse a specific node by its source data ID.
410 |
411 | **Signature**: `collapseNode(nodeId: string | number): void`
412 |
413 | - `nodeId`: The ID of the node to collapse (source data format)
414 |
415 | ### `expandAll` [#expandall]
416 |
417 | Expand all nodes in the tree.
418 |
419 | **Signature**: `expandAll(): void`
420 |
421 | ### `expandNode` [#expandnode]
422 |
423 | Expand a specific node by its source data ID.
424 |
425 | **Signature**: `expandNode(nodeId: string | number): void`
426 |
427 | - `nodeId`: The ID of the node to expand (source data format)
428 |
429 | ### `expandToLevel` [#expandtolevel]
430 |
431 | Expand nodes up to the specified depth level (0-based).
432 |
433 | **Signature**: `expandToLevel(level: number): void`
434 |
435 | - `level`: The maximum depth level to expand (0 = root level only)
436 |
437 | ### `getExpandedNodes` [#getexpandednodes]
438 |
439 | Get an array of currently expanded node IDs in source data format.
440 |
441 | **Signature**: `getExpandedNodes(): (string | number)[]`
442 |
443 | ### `getNodeById` [#getnodebyid]
444 |
445 | Get a tree node by its source data ID.
446 |
447 | **Signature**: `getNodeById(nodeId: string | number): TreeNode | null`
448 |
449 | - `nodeId`: The ID of the node to retrieve (source data format)
450 |
451 | ### `getNodeLoadingState` [#getnodeloadingstate]
452 |
453 | Get the loading state of a dynamic node.
454 |
455 | **Signature**: `getNodeLoadingState(nodeId: string | number): NodeLoadingState`
456 |
457 | - `nodeId`: The ID of the node to check loading state for
458 |
459 | ### `getSelectedNode` [#getselectednode]
460 |
461 | Get the currently selected tree node.
462 |
463 | **Signature**: `getSelectedNode(): TreeNode | null`
464 |
465 | ### `insertNodeAfter` [#insertnodeafter]
466 |
467 | Insert a new node after an existing node at the same level.
468 |
469 | **Signature**: `insertNodeAfter(afterNodeId: string | number, nodeData: any): void`
470 |
471 | - `afterNodeId`: The ID of the existing node after which the new node should be inserted
472 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
473 |
474 | ### `insertNodeBefore` [#insertnodebefore]
475 |
476 | Insert a new node before an existing node at the same level.
477 |
478 | **Signature**: `insertNodeBefore(beforeNodeId: string | number, nodeData: any): void`
479 |
480 | - `beforeNodeId`: The ID of the existing node before which the new node should be inserted
481 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
482 |
483 | ### `markNodeLoaded` [#marknodeloaded]
484 |
485 | Mark a dynamic node as loaded.
486 |
487 | **Signature**: `markNodeLoaded(nodeId: string | number): void`
488 |
489 | - `nodeId`: The ID of the node to mark as loaded
490 |
491 | ### `markNodeUnloaded` [#marknodeunloaded]
492 |
493 | Mark a dynamic node as unloaded and collapse it.
494 |
495 | **Signature**: `markNodeUnloaded(nodeId: string | number): void`
496 |
497 | - `nodeId`: The ID of the node to mark as unloaded
498 |
499 | ### `removeChildren` [#removechildren]
500 |
501 | Remove all children (descendants) of a node while keeping the node itself.
502 |
503 | **Signature**: `removeChildren(nodeId: string | number): void`
504 |
505 | - `nodeId`: The ID of the parent node whose children should be removed
506 |
507 | ### `removeNode` [#removenode]
508 |
509 | Remove a node and all its descendants from the tree.
510 |
511 | **Signature**: `removeNode(nodeId: string | number): void`
512 |
513 | - `nodeId`: The ID of the node to remove (along with all its descendants)
514 |
515 | ### `scrollIntoView` [#scrollintoview]
516 |
517 | Scroll to a specific node and expand parent nodes as needed to make it visible.
518 |
519 | **Signature**: `scrollIntoView(nodeId: string | number, options?: ScrollIntoViewOptions): void`
520 |
521 | - `nodeId`: The ID of the node to scroll to (source data format)
522 | - `options`: Optional scroll options
523 |
524 | ### `scrollToItem` [#scrolltoitem]
525 |
526 | Scroll to a specific node if it's currently visible in the tree.
527 |
528 | **Signature**: `scrollToItem(nodeId: string | number): void`
529 |
530 | - `nodeId`: The ID of the node to scroll to (source data format)
531 |
532 | ### `selectNode` [#selectnode]
533 |
534 | Programmatically select a node by its source data ID.
535 |
536 | **Signature**: `selectNode(nodeId: string | number): void`
537 |
538 | - `nodeId`: The ID of the node to select (source data format)
539 |
540 | ## Styling [#styling]
541 |
542 | ### Theme Variables [#theme-variables]
543 |
544 | | Variable | Default Value (Light) | Default Value (Dark) |
545 | | --- | --- | --- |
546 | | [backgroundColor](../styles-and-themes/common-units/#color)-Tree-row--hover | $color-surface-100 | $color-surface-100 |
547 | | [backgroundColor](../styles-and-themes/common-units/#color)-Tree-row--selected | $color-primary-50 | $color-primary-50 |
548 | | [borderColor](../styles-and-themes/common-units/#color)-Tree-row--focus | $color-primary-500 | $color-primary-500 |
549 | | [outlineColor](../styles-and-themes/common-units/#color)-Tree--focus | $outlineColor--focus | $outlineColor--focus |
550 | | [outlineOffset](../styles-and-themes/common-units/#size)-Tree--focus | $outlineOffset--focus | $outlineOffset--focus |
551 | | [outlineStyle](../styles-and-themes/common-units/#border)-Tree--focus | $outlineStyle--focus | $outlineStyle--focus |
552 | | [outlineWidth](../styles-and-themes/common-units/#size)-Tree--focus | $outlineWidth--focus | $outlineWidth--focus |
553 | | [textColor](../styles-and-themes/common-units/#color)-Tree | $textColor-primary | $textColor-primary |
554 | | [textColor](../styles-and-themes/common-units/#color)-Tree--hover | $textColor-primary | $textColor-primary |
555 | | [textColor](../styles-and-themes/common-units/#color)-Tree--selected | $color-primary-900 | $color-primary-900 |
556 |
```
