This is page 95 of 193. Use http://codebase.md/xmlui-org/xmlui/0.9.23.js?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-swa.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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ └── Separator.xmlui
│ │ ├── config.ts
│ │ └── Main.xmlui
│ └── 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
│ │ │ ├── ResponsiveBar.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
│ │ ├── HelloMd.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-modal-dialog-onclose.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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ ├── staticwebapp.config.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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── Separator.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── 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.module.scss
│ │ │ ├── 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.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.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
│ │ │ └── test-padding.xmlui
│ │ ├── 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
│ │ ├── Part
│ │ │ └── Part.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
│ │ │ ├── ResponsiveBarItem.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
│ └── 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.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Table/useRowSelection.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import type { KeyboardEventHandler } from "react";
2 | import { useCallback, useEffect, useMemo, useRef, useState } from "react";
3 | import { union, uniq } from "lodash-es";
4 |
5 | import { useEvent } from "../../components-core/utils/misc";
6 | import { EMPTY_ARRAY } from "../../components-core/constants";
7 | import { usePrevious } from "../../components-core/utils/hooks";
8 | import { useSelectionContext } from "../SelectionStore/SelectionStoreNative";
9 |
10 | /**
11 | * An interval of selected items
12 | */
13 | type SelectionInterval = {
14 | from: string;
15 | to: string;
16 | };
17 |
18 | /**
19 | * Represents an item that has an ID unique in its context
20 | */
21 | type Item = any;
22 |
23 | /**
24 | * This type defines the event options of a toggle event we consider to change the current selection
25 | */
26 | type ToggleOptions = {
27 | shiftKey?: boolean;
28 | metaKey?: boolean;
29 | ctrlKey?: boolean;
30 | singleItem?: boolean;
31 | };
32 |
33 | type SelectionApi = {
34 | getSelectedItems: () => any[];
35 | getSelectedIds: () => any[];
36 | clearSelection: () => void;
37 | selectAll: () => void;
38 | selectId: (id: any | Array<any>) => void;
39 | };
40 |
41 | /**
42 | * This type defines an object with properties and operations to manage the selection
43 | */
44 | type RowSelectionOperations = {
45 | /**
46 | * Operation to handle the keydown event
47 | */
48 | onKeyDown: KeyboardEventHandler;
49 |
50 | /**
51 | * The currently focused index (row number)
52 | */
53 | focusedIndex: number;
54 |
55 | /**
56 | * Operation to toggle the specified index
57 | * @param targetIndex Index to toggle
58 | * @param options Key options (state of SHIFT, CTRL, and META keys)
59 | */
60 | toggleRowIndex: (targetIndex: number, options: ToggleOptions | undefined) => void;
61 |
62 | /**
63 | * Operation to toggle the item with a particular ID
64 | * @param targetId Item identifier
65 | * @param options Key options (state of SHIFT, CTRL, and META keys)
66 | */
67 | toggleRow: (row: any, options: ToggleOptions | undefined) => void;
68 |
69 | /**
70 | * Operation to check or uncheck all rows
71 | * @param checked True to check, false to uncheck all rows
72 | */
73 | checkAllRows: (checked: boolean) => void;
74 |
75 | /**
76 | * A hash object that indicates if a particular row ID is selected or not
77 | */
78 | selectedRowIdMap: Record<string, boolean>;
79 |
80 | /**
81 | * The list of selected row IDs
82 | */
83 | selectedItems: any[];
84 |
85 | idKey: string;
86 |
87 | selectionApi: SelectionApi;
88 | };
89 |
90 | /**
91 | * Hook for managing table row selection with optional bidirectional AppState synchronization.
92 | *
93 | * ## AppState Synchronization Mechanism
94 | *
95 | * When `syncWithAppState` is provided, this hook implements a robust bidirectional synchronization
96 | * between the table's selection state and an AppState instance. The synchronization prevents
97 | * infinite loops using a state machine approach.
98 | *
99 | * ### State Machine Design
100 | *
101 | * The sync operates through three states:
102 | * - `idle`: Normal state, ready to respond to changes from either side
103 | * - `updating_to_appstate`: Currently propagating table selection → AppState (blocks AppState → table)
104 | * - `updating_from_appstate`: Currently propagating AppState → table selection (blocks table → AppState)
105 | *
106 | * ### Synchronization Flow
107 | *
108 | * **AppState → Table (External Updates)**:
109 | * 1. AppState.value.selectedIds changes externally (e.g., from another component)
110 | * 2. Effect detects change and validates it's not from our own update (using source tracking)
111 | * 3. Sets state to `updating_from_appstate` to block reverse sync
112 | * 4. Updates table selection via setSelectedRowIds()
113 | * 5. Uses requestAnimationFrame to reset state to `idle` after update completes
114 | *
115 | * **Table → AppState (User Interaction)**:
116 | * 1. User interacts with table (clicks, keyboard navigation)
117 | * 2. selectedItems changes through normal table selection logic
118 | * 3. Effect detects change and validates it's different from AppState
119 | * 4. Sets state to `updating_to_appstate` to block reverse sync
120 | * 5. Calls syncWithAppState.update({ selectedIds: [...] })
121 | * 6. Uses requestAnimationFrame to reset state to `idle` after update completes
122 | *
123 | * ### Loop Prevention Strategy
124 | *
125 | * Multiple mechanisms prevent infinite loops:
126 | * - **State Machine**: Directional blocking prevents simultaneous updates
127 | * - **Source Tracking**: lastUpdateSourceRef tracks whether the last change came from 'table' or 'appstate'
128 | * - **Value Tracking**: lastAppStateSelectionRef and lastTableSelectionRef track last known values
129 | * - **Change Detection**: Only triggers updates when values actually differ using JSON.stringify comparison
130 | * - **Frame-Based Reset**: Uses requestAnimationFrame instead of setTimeout for deterministic timing
131 | *
132 | * ### Usage with AppState
133 | *
134 | * ```typescript
135 | * // In your component
136 | * const appState = useAppState('myBucket');
137 | *
138 | * // Pass to Table
139 | * <Table
140 | * items={data}
141 | * syncWithAppState={appState}
142 | * // ... other props
143 | * />
144 | *
145 | * // AppState will contain: { selectedIds: ['id1', 'id2', ...] }
146 | * // Changes from either side are automatically synchronized
147 | * ```
148 | *
149 | * ### Precedence Rules
150 | *
151 | * - When both `initiallySelected` and `syncWithAppState` are provided, `syncWithAppState` takes precedence
152 | * - Multi-row selection limits are respected (single selection truncates to first ID)
153 | * - Only valid item IDs (present in current `items` array) are synchronized
154 | *
155 | * @param options Configuration object for row selection behavior
156 | * @returns Row selection operations and state management interface
157 | */
158 | export default function useRowSelection({
159 | items = EMPTY_ARRAY,
160 | visibleItems = items,
161 | rowsSelectable,
162 | enableMultiRowSelection,
163 | rowDisabledPredicate,
164 | onSelectionDidChange,
165 | initiallySelected = EMPTY_ARRAY,
166 | syncWithAppState,
167 | }: {
168 | items: Item[];
169 | visibleItems: Item[];
170 | rowsSelectable: boolean;
171 | enableMultiRowSelection: boolean;
172 | rowDisabledPredicate?: (item: any) => boolean;
173 | onSelectionDidChange?: (newSelection: Item[]) => Promise<void>;
174 | initiallySelected?: string[];
175 | syncWithAppState?: any;
176 | }): RowSelectionOperations {
177 | // --- The focused index in the row source (if there is any)
178 | const [focusedIndex, setFocusedIndex] = useState<number>(-1);
179 | // --- The current selection interval
180 | const [selectionInterval, setSelectionInterval] = useState<SelectionInterval | null>(null);
181 | // --- Access the selection context that stores the current state of selection
182 | const { selectedItems, setSelectedRowIds, refreshSelection, idKey } = useSelectionContext();
183 | // --- Refresh the list of item IDs whenever the items in the selection change
184 | const walkableList: string[] = useMemo(() => {
185 | return visibleItems.map((item) => item[idKey]);
186 | }, [idKey, visibleItems]);
187 |
188 | // --- Track if initial selection has been applied
189 | const [initialSelectionApplied, setInitialSelectionApplied] = useState(false);
190 |
191 | // --- If the items change, refresh the selectable items (if the rows are selectable)
192 | useEffect(() => {
193 | refreshSelection(rowsSelectable ? items : EMPTY_ARRAY);
194 | }, [refreshSelection, items, rowsSelectable]);
195 |
196 | // --- Handle AppState synchronization
197 | // This implements bidirectional sync between Table selection and AppState.
198 | // The approach uses React's useEffect pattern which is appropriate for React-to-React communication.
199 | // The new AppState didUpdate event is more useful for non-React integrations.
200 | const appStateSelection = syncWithAppState?.value?.selectedIds;
201 | const prevAppStateSelection = usePrevious(appStateSelection);
202 |
203 | // --- State machine for sync direction control
204 | const [syncState, setSyncState] = useState<
205 | "idle" | "updating_to_appstate" | "updating_from_appstate"
206 | >("idle");
207 |
208 | // --- Use refs to track the last known selections to prevent update loops
209 | const lastAppStateSelectionRef = useRef<any[]>();
210 | const lastTableSelectionRef = useRef<any[]>();
211 |
212 | // --- Track the source of the last update to prevent echoing
213 | const lastUpdateSourceRef = useRef<"table" | "appstate" | null>(null);
214 |
215 | // --- Sync from AppState to table selection (when AppState changes externally)
216 | useEffect(() => {
217 | // Skip if not selectable, no sync, no selection, or we're currently updating to AppState
218 | if (
219 | !rowsSelectable ||
220 | !syncWithAppState ||
221 | !appStateSelection ||
222 | syncState === "updating_to_appstate"
223 | ) {
224 | return;
225 | }
226 |
227 | // Only update if AppState selection actually changed and this wasn't caused by our own table update
228 | const appStateChanged = appStateSelection !== prevAppStateSelection;
229 | const isDifferentFromLastKnown =
230 | JSON.stringify([...(appStateSelection || [])].sort()) !==
231 | JSON.stringify([...(lastAppStateSelectionRef.current || [])].sort());
232 | const wasNotOurUpdate = lastUpdateSourceRef.current !== "table";
233 |
234 | if (appStateChanged && isDifferentFromLastKnown && wasNotOurUpdate && items.length > 0) {
235 | // Set state machine to indicate we're updating from AppState
236 | setSyncState("updating_from_appstate");
237 |
238 | const validIds = appStateSelection.filter((id: string) =>
239 | items.some((item) => item[idKey] === id),
240 | );
241 |
242 | const idsToSelect = enableMultiRowSelection ? validIds : validIds.slice(0, 1);
243 |
244 | // Track what we're setting to prevent loop
245 | lastAppStateSelectionRef.current = [...appStateSelection];
246 | lastTableSelectionRef.current = [...idsToSelect];
247 | lastUpdateSourceRef.current = "appstate";
248 |
249 | setSelectedRowIds(idsToSelect);
250 | setInitialSelectionApplied(true);
251 | }
252 | }, [
253 | appStateSelection,
254 | prevAppStateSelection,
255 | items,
256 | rowsSelectable,
257 | syncWithAppState,
258 | idKey,
259 | enableMultiRowSelection,
260 | setSelectedRowIds,
261 | syncState,
262 | ]);
263 |
264 | // --- Sync from table selection to AppState (when user interacts with table)
265 | useEffect(() => {
266 | // Skip if not selectable, no sync, or currently updating from AppState
267 | if (!rowsSelectable || !syncWithAppState || syncState === "updating_from_appstate") {
268 | return;
269 | }
270 |
271 | const currentSelectionIds = selectedItems.map((item) => item[idKey]);
272 | const appStateSelectionIds = appStateSelection || [];
273 |
274 | // Only update if table selection is different from AppState, different from our last update, and wasn't caused by AppState
275 | const tableChanged =
276 | JSON.stringify([...currentSelectionIds].sort()) !==
277 | JSON.stringify([...(lastTableSelectionRef.current || [])].sort());
278 | const isDifferentFromAppState =
279 | JSON.stringify([...currentSelectionIds].sort()) !==
280 | JSON.stringify([...appStateSelectionIds].sort());
281 | const wasNotAppStateUpdate = lastUpdateSourceRef.current !== "appstate";
282 |
283 | if (tableChanged && isDifferentFromAppState && wasNotAppStateUpdate) {
284 | // Set state machine to indicate we're updating to AppState
285 | setSyncState("updating_to_appstate");
286 |
287 | // Track what we're updating to prevent loop
288 | lastTableSelectionRef.current = [...currentSelectionIds];
289 | lastAppStateSelectionRef.current = [...currentSelectionIds];
290 | lastUpdateSourceRef.current = "table";
291 |
292 | syncWithAppState.update?.({ selectedIds: currentSelectionIds });
293 | }
294 | }, [selectedItems, syncWithAppState, appStateSelection, idKey, rowsSelectable, syncState]);
295 |
296 | // --- Reset sync state machine to idle when updates are complete
297 | useEffect(() => {
298 | if (syncState !== "idle") {
299 | // Reset to idle state in the next tick to allow the current update to complete
300 | const resetTimer = requestAnimationFrame(() => {
301 | setSyncState("idle");
302 | });
303 |
304 | return () => cancelAnimationFrame(resetTimer);
305 | }
306 | }, [syncState, appStateSelection, selectedItems]);
307 |
308 | // --- Clear update source when sync state becomes idle
309 | useEffect(() => {
310 | if (syncState === "idle") {
311 | // Use a separate frame to clear the source after the sync state is reset
312 | const clearTimer = requestAnimationFrame(() => {
313 | lastUpdateSourceRef.current = null;
314 | });
315 |
316 | return () => cancelAnimationFrame(clearTimer);
317 | }
318 | }, [syncState]);
319 |
320 | // --- Set initial selection when component mounts and items are available
321 | // Use a separate effect that runs after the refresh to ensure timing is correct
322 | useEffect(() => {
323 | // If we have AppState sync, don't use initiallySelected
324 | if (syncWithAppState) {
325 | return;
326 | }
327 |
328 | if (
329 | !rowsSelectable ||
330 | !initiallySelected ||
331 | initiallySelected.length === 0 ||
332 | initialSelectionApplied
333 | ) {
334 | return;
335 | }
336 |
337 | // Only set initial selection when items are available and we haven't applied it yet
338 | if (items.length > 0) {
339 | // Use requestAnimationFrame to ensure this runs after the refreshSelection effect
340 | const frameId = requestAnimationFrame(() => {
341 | // Filter initiallySelected to only include IDs that exist in current items
342 | const validIds = initiallySelected.filter((id) => items.some((item) => item[idKey] === id));
343 |
344 | if (validIds.length > 0) {
345 | // If multi-row selection is disabled, only select the first valid ID
346 | const idsToSelect = enableMultiRowSelection ? validIds : [validIds[0]];
347 | setSelectedRowIds(idsToSelect);
348 | setInitialSelectionApplied(true);
349 | }
350 | });
351 |
352 | return () => cancelAnimationFrame(frameId);
353 | }
354 | }, [
355 | items,
356 | initiallySelected,
357 | rowsSelectable,
358 | idKey,
359 | enableMultiRowSelection,
360 | setSelectedRowIds,
361 | initialSelectionApplied,
362 | selectedItems,
363 | syncWithAppState,
364 | ]);
365 |
366 | // --- If the multi-row selection switches to disabled, keep only the first selected item
367 | const prevEnableMultiRowSelection = usePrevious(enableMultiRowSelection);
368 | useEffect(() => {
369 | if (prevEnableMultiRowSelection && !enableMultiRowSelection) {
370 | if (selectedItems.length > 1) {
371 | setSelectedRowIds([selectedItems[0][idKey]]);
372 | }
373 | }
374 | }, [
375 | enableMultiRowSelection,
376 | idKey,
377 | prevEnableMultiRowSelection,
378 | selectedItems,
379 | setSelectedRowIds,
380 | ]);
381 |
382 | // --- If the focused item is not available set the focus to the first item
383 | useEffect(() => {
384 | if (!rowsSelectable) {
385 | return;
386 | }
387 | if (focusedIndex !== -1 && !walkableList[focusedIndex] && walkableList[0]) {
388 | setFocusedIndex(0);
389 | }
390 | }, [focusedIndex, rowsSelectable, setFocusedIndex, walkableList]);
391 |
392 | // --- Handle the user event to change the current selection. The event function handles the SHIFT, CTRL,
393 | // --- and META keys to decide how to change or extend the existing selection
394 | const toggleRowIndex = useEvent(
395 | // targetIndex: the item affected by an event
396 | // options: key event options
397 | (targetIndex: number, options: ToggleOptions = {}) => {
398 | if (!rowsSelectable) {
399 | return;
400 | }
401 |
402 | const targetId = walkableList[targetIndex];
403 | const { shiftKey, metaKey, ctrlKey } = options;
404 |
405 | const singleItem = !enableMultiRowSelection || (!shiftKey && !metaKey && !ctrlKey);
406 |
407 | // --- This variable will hold the newest selection interval
408 | let newSelectionInterval: SelectionInterval;
409 | let newSelectedRowsIdsInOrder = [...selectedItems.map((item) => item[idKey])];
410 |
411 | if (singleItem) {
412 | newSelectionInterval = {
413 | from: targetId,
414 | to: targetId,
415 | };
416 | newSelectedRowsIdsInOrder = [targetId];
417 | } else {
418 | if (shiftKey) {
419 | // --- SHIFT is pressed, extend the current selection
420 | let normalizedFromIdx: number;
421 | let normalizedToIdx: number;
422 | let from: string;
423 | let to: string;
424 |
425 | if (selectionInterval) {
426 | // --- Get the selection boundaries and normalize them (from is less than or equal than to)
427 | let oldFromIdx = walkableList.indexOf(selectionInterval.from);
428 | let oldToIdx = walkableList.indexOf(selectionInterval.to);
429 |
430 | let normalizedOldFromIdx = Math.min(oldFromIdx, oldToIdx);
431 | let normalizedOldToIdx = Math.max(oldFromIdx, oldToIdx);
432 |
433 | // --- Get the slice of selected IDs
434 | const slice = walkableList.slice(normalizedOldFromIdx, normalizedOldToIdx + 1);
435 | newSelectedRowsIdsInOrder = newSelectedRowsIdsInOrder.filter(
436 | (item) => !slice.includes(item),
437 | );
438 | from = selectionInterval.from;
439 | to = targetId;
440 | let fromIdx = walkableList.indexOf(from);
441 | let toIdx = walkableList.indexOf(to);
442 | normalizedFromIdx = Math.min(fromIdx, toIdx);
443 | normalizedToIdx = Math.max(fromIdx, toIdx);
444 | } else {
445 | from = targetId;
446 | to = targetId;
447 | normalizedFromIdx = targetIndex;
448 | normalizedToIdx = targetIndex;
449 | }
450 |
451 | const sl = walkableList.slice(normalizedFromIdx, normalizedToIdx + 1);
452 | newSelectedRowsIdsInOrder = union(newSelectedRowsIdsInOrder, sl);
453 | newSelectionInterval = {
454 | from: from,
455 | to: to,
456 | };
457 | } else {
458 | // --- SHIFT is not pressed, set the new interval to the newly focused item
459 | newSelectionInterval = {
460 | from: targetId,
461 | to: targetId,
462 | };
463 |
464 | if (metaKey || ctrlKey) {
465 | // --- If META key (Mac) or CTRL (Windows) is pressed, toggle the selection of the targeted item
466 | if (newSelectedRowsIdsInOrder.includes(targetId)) {
467 | newSelectedRowsIdsInOrder = newSelectedRowsIdsInOrder.filter(
468 | (item) => item !== targetId,
469 | );
470 | } else {
471 | newSelectedRowsIdsInOrder.push(targetId);
472 | }
473 | } else {
474 | // --- The targeted item remains the only selection
475 | newSelectedRowsIdsInOrder = [targetId];
476 | }
477 | }
478 | }
479 |
480 | // --- Update the state variables of the selection
481 | setFocusedIndex(targetIndex);
482 | setSelectedRowIds(uniq(newSelectedRowsIdsInOrder));
483 | setSelectionInterval(newSelectionInterval);
484 | },
485 | );
486 |
487 | // --- This function handles the user event to change the current selection according to the row ID
488 | // --- affected by the event
489 | const toggleRow = useEvent((item: any, options?: ToggleOptions) => {
490 | if (!rowsSelectable) {
491 | return;
492 | }
493 | const targetIndex = walkableList.indexOf(item[idKey]);
494 | toggleRowIndex(targetIndex, options);
495 | });
496 |
497 | // --- Handle the key events that may change the current selection
498 | const onKeyDown: KeyboardEventHandler = useEvent((event) => {
499 | if (!rowsSelectable) {
500 | return;
501 | }
502 | if (event.key === "ArrowDown") {
503 | // --- Move/extend the selection to the item below the focused one
504 | event.preventDefault();
505 | let newFocusIndex = Math.min(visibleItems.length - 1, focusedIndex + 1);
506 | if (focusedIndex !== visibleItems.length - 1) {
507 | toggleRowIndex(newFocusIndex, event);
508 | }
509 | }
510 | if (event.key === "PageDown") {
511 | // --- Move/extend the selection to the item 8 items below the focused one
512 | event.preventDefault();
513 | const newFocusIndex = Math.min(visibleItems.length - 1, focusedIndex + 8);
514 | toggleRowIndex(newFocusIndex, event);
515 | }
516 | if (event.key === "ArrowUp") {
517 | // --- Move/extend the selection to the item above the focused one
518 | event.preventDefault();
519 | let newFocusIndex = Math.max(0, focusedIndex - 1);
520 | if (focusedIndex >= 0) {
521 | toggleRowIndex(newFocusIndex, event);
522 | }
523 | }
524 | if (event.key === "PageUp") {
525 | // --- Move/extend the selection to the item 8 items above the focused one
526 | event.preventDefault();
527 | const newFocusIndex = Math.max(0, focusedIndex - 8);
528 | toggleRowIndex(newFocusIndex, event);
529 | }
530 | });
531 |
532 | useEffect(() => {
533 | // console.log("selection DID CHANGE?");
534 | void onSelectionDidChange?.(selectedItems);
535 | }, [selectedItems, onSelectionDidChange]);
536 |
537 | /**
538 | * This operation checks or clears all rows
539 | */
540 | const checkAllRows = useEvent((checked: boolean) => {
541 | if (!rowsSelectable) {
542 | return;
543 | }
544 | if (!enableMultiRowSelection && checked) {
545 | return;
546 | }
547 | setSelectedRowIds(
548 | checked
549 | ? items
550 | .filter((item) => (rowDisabledPredicate ? !rowDisabledPredicate(item) : true))
551 | .map((item) => item[idKey])
552 | : [],
553 | );
554 | });
555 |
556 | /**
557 | * This operation creates a hash object that indicates the selected status of selected row IDs
558 | */
559 | const selectedRowIdMap = useMemo(() => {
560 | let rows: Record<string, boolean> = {};
561 | selectedItems.forEach((item) => {
562 | rows[item[idKey]] = true;
563 | });
564 | return rows;
565 | }, [idKey, selectedItems]);
566 |
567 | const getSelectedItems = useCallback(() => {
568 | return selectedItems;
569 | }, [selectedItems]);
570 |
571 | const getSelectedIds = useCallback(() => {
572 | return selectedItems.map((item) => item[idKey]);
573 | }, [idKey, selectedItems]);
574 |
575 | const clearSelection = useCallback(() => {
576 | checkAllRows(false);
577 | }, [checkAllRows]);
578 |
579 | const selectAll = useCallback(() => {
580 | checkAllRows(true);
581 | }, [checkAllRows]);
582 |
583 | const selectId = useCallback(
584 | (id: any | Array<any>) => {
585 | if (!rowsSelectable) {
586 | return;
587 | }
588 | let ids = Array.isArray(id) ? id : [id];
589 | if (ids.length > 1 && !enableMultiRowSelection) {
590 | ids = [ids[0]];
591 | }
592 | setSelectedRowIds(ids);
593 | },
594 | [enableMultiRowSelection, rowsSelectable, setSelectedRowIds],
595 | );
596 |
597 | const api = useMemo(() => {
598 | return {
599 | getSelectedItems,
600 | getSelectedIds,
601 | clearSelection,
602 | selectAll,
603 | selectId,
604 | };
605 | }, [clearSelection, getSelectedIds, getSelectedItems, selectAll, selectId]);
606 |
607 | // --- Retrieve the selection management object
608 | return {
609 | onKeyDown,
610 | focusedIndex,
611 | toggleRowIndex,
612 | toggleRow,
613 | checkAllRows,
614 | selectedRowIdMap,
615 | selectedItems,
616 | idKey,
617 | selectionApi: api,
618 | };
619 | }
620 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/ResponsiveBar/ResponsiveBarNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import React, {
2 | forwardRef,
3 | useRef,
4 | useEffect,
5 | useState,
6 | type CSSProperties,
7 | type ReactNode,
8 | type ReactElement,
9 | } from "react";
10 | import classnames from "classnames";
11 |
12 | import styles from "./ResponsiveBar.module.scss";
13 | import { useResizeObserver } from "../../components-core/utils/hooks";
14 | import { DropdownMenu, MenuItem } from "../DropdownMenu/DropdownMenuNative";
15 | import type { AlignmentOptions } from "../abstractions";
16 | import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
17 | import { Part } from "../Part/Part";
18 |
19 |
20 | // Component part names
21 | const PART_OVERFLOW = "overflow";
22 |
23 | /**
24 | * ResponsiveBar Component - Adaptive Layout with Overflow Management
25 | *
26 | * The ResponsiveBar is a sophisticated layout component that automatically manages space
27 | * by moving child components that don't fit into a dropdown menu. It supports both horizontal
28 | * and vertical orientations, making it ideal for toolbars, navigation bars, sidebars, and
29 | * action panels that need to adapt to different screen sizes and container dimensions.
30 | *
31 | * ## How It Works:
32 | *
33 | * ### Orientation Support
34 | * - **Horizontal**: Items are arranged left-to-right, overflow is based on container width
35 | * - **Vertical**: Items are arranged top-to-bottom, overflow is based on container height
36 | * - Uses the parent container's available space (width for horizontal, height for vertical)
37 | *
38 | * ### Two-Phase Rendering System
39 | * The component uses a two-phase rendering approach to accurately calculate layout:
40 | *
41 | * **Phase 1 - Measurement Phase:**
42 | * - Renders all child components invisibly (visibility: hidden, opacity: 0)
43 | * - Measures the actual size of each child component using getBoundingClientRect()
44 | * - For horizontal: measures width; for vertical: measures height
45 | * - Also measures the dropdown button size for accurate overflow calculations
46 | * - This phase ensures we have precise measurements before making layout decisions
47 | *
48 | * **Phase 2 - Layout Phase:**
49 | * - Uses the measured dimensions to calculate which items fit in the available space
50 | * - Renders visible items in the main container and overflow items in a dropdown menu
51 | * - Accounts for gaps between items and the space needed for the dropdown button
52 | *
53 | * ### Overflow Logic
54 | * The overflow calculation works as follows:
55 | * 1. Calculate total size needed for all items (including gaps)
56 | * 2. If all items fit: show all items, no dropdown
57 | * 3. If overflow needed: calculate how many items can fit alongside the dropdown button
58 | * 4. Ensure at least one item is always visible (even if it means showing dropdown with one item)
59 | * 5. Account for gaps between items and the gap before the dropdown button
60 | *
61 | * ### Responsive Behavior
62 | * - Uses ResizeObserver to detect container size changes and recalculate layout
63 | * - Monitors width changes for horizontal orientation, height changes for vertical
64 | * - Prevents infinite loops by only triggering recalculation during the layout phase
65 | * - Debounces calculations to avoid excessive re-renders during rapid resize events
66 | *
67 | * ### Performance Optimizations
68 | * - Stable children array using React.useMemo to prevent unnecessary re-measurements
69 | * - Reference tracking to detect actual changes vs. rendering artifacts
70 | * - Calculation throttling to prevent excessive DOM measurements
71 | * - Layout completion tracking to ignore temporary children changes during layout updates
72 | *
73 | * ### Key Features
74 | * - **Dual orientation support**: Works in both horizontal and vertical layouts
75 | * - **Automatic overflow management**: Items that don't fit are moved to a dropdown
76 | * - **Configurable gaps**: Consistent spacing between items and dropdown
77 | * - **Custom overflow icon**: Customizable dropdown trigger button icon
78 | * - **Responsive**: Automatically adapts to container size changes
79 | * - **Accessible**: Uses proper dropdown menu with keyboard navigation
80 | * - **Performance optimized**: Minimal re-renders and efficient DOM measurements
81 | *
82 | * @example
83 | * ```tsx
84 | * // Horizontal toolbar
85 | * <ResponsiveBar orientation="horizontal" gap={8} overflowIcon="menu">
86 | * <Button>Action 1</Button>
87 | * <Button>Action 2</Button>
88 | * <Button>Action 3</Button>
89 | * </ResponsiveBar>
90 | *
91 | * // Vertical sidebar
92 | * <ResponsiveBar orientation="vertical" gap={4} overflowIcon="moreVertical">
93 | * <NavItem>Home</NavItem>
94 | * <NavItem>Settings</NavItem>
95 | * <NavItem>Profile</NavItem>
96 | * </ResponsiveBar>
97 | * ```
98 | */
99 |
100 | type ResponsiveBarProps = {
101 | children?: ReactNode;
102 | childNodes?: any[]; // XMLUI node definitions for context variable support
103 | renderChildFn?: (node: any, isOverflow: boolean) => ReactNode;
104 | overflowIcon?: string;
105 | dropdownText?: string;
106 | dropdownAlignment?: AlignmentOptions;
107 | triggerTemplate?: ReactNode;
108 | gap?: number; // Gap between children in pixels
109 | orientation?: "horizontal" | "vertical"; // Layout direction
110 | reverse?: boolean; // Reverse the direction of children
111 | style?: CSSProperties;
112 | className?: string;
113 | onClick?: () => void;
114 | onWillOpen?: () => Promise<boolean | undefined>;
115 | registerComponentApi?: RegisterComponentApiFn;
116 | [key: string]: any; // For test props
117 | };
118 |
119 | interface LayoutState {
120 | visibleItems: ReactElement[];
121 | overflowItems: ReactElement[];
122 | }
123 |
124 | // Helper component to avoid duplication of DropdownMenu properties
125 | const ResponsiveBarDropdown = ({
126 | overflowIcon,
127 | dropdownText,
128 | dropdownAlignment,
129 | triggerTemplate,
130 | children,
131 | className,
132 | onWillOpen,
133 | registerComponentApi,
134 | }: {
135 | overflowIcon: string;
136 | dropdownText: string;
137 | dropdownAlignment: AlignmentOptions;
138 | triggerTemplate?: ReactNode;
139 | children: ReactNode;
140 | className?: string;
141 | onWillOpen?: () => Promise<boolean | undefined>;
142 | registerComponentApi?: RegisterComponentApiFn;
143 | }) => (
144 | <Part partId={PART_OVERFLOW}>
145 | <div className={className}>
146 | <DropdownMenu
147 | label={dropdownText}
148 | triggerButtonIcon={overflowIcon}
149 | triggerTemplate={triggerTemplate}
150 | alignment={dropdownAlignment}
151 | compact={true}
152 | onWillOpen={onWillOpen}
153 | registerComponentApi={registerComponentApi}
154 | >
155 | {children}
156 | </DropdownMenu>
157 | </div>
158 | </Part>
159 | );
160 |
161 | export const defaultResponsiveBarProps = {
162 | overflowIcon: "ellipsisHorizontal:ResponsiveBar",
163 | dropdownText: "More options",
164 | gap: 0,
165 | orientation: "horizontal" as const,
166 | reverse: false,
167 | };
168 |
169 | export const ResponsiveBar = forwardRef<HTMLDivElement, ResponsiveBarProps>(function ResponsiveBar(
170 | {
171 | children,
172 | childNodes,
173 | renderChildFn,
174 | overflowIcon = defaultResponsiveBarProps.overflowIcon,
175 | dropdownText = defaultResponsiveBarProps.dropdownText,
176 | dropdownAlignment,
177 | triggerTemplate,
178 | gap = defaultResponsiveBarProps.gap,
179 | orientation = defaultResponsiveBarProps.orientation,
180 | reverse = defaultResponsiveBarProps.reverse,
181 | style,
182 | className,
183 | onClick,
184 | onWillOpen,
185 | registerComponentApi,
186 | ...rest
187 | }: ResponsiveBarProps,
188 | ref,
189 | ) {
190 | // Compute default alignment based on reverse if not explicitly provided
191 | const effectiveAlignment: AlignmentOptions = dropdownAlignment ?? (reverse ? "start" : "end");
192 | const containerRef = useRef<HTMLDivElement>(null);
193 | const measurementDropdownRef = useRef<HTMLDivElement>(null);
194 | const isCalculatingRef = useRef(false);
195 | const lastContainerSize = useRef(0); // Renamed for clarity - stores width OR height
196 | const lastChildrenCount = useRef(0);
197 | const lastChildrenRef = useRef<ReactNode>(null);
198 | const layoutCompletedRef = useRef(false);
199 | const dropdownApiRef = useRef<{ open: () => void; close: () => void } | null>(null);
200 |
201 | // Two-phase rendering state
202 | const [isInMeasurementPhase, setIsInMeasurementPhase] = useState(true);
203 | const [measuredWidths, setMeasuredWidths] = useState<number[]>([]);
204 | const [measuredDropdownSize, setMeasuredDropdownSize] = useState<number>(0);
205 |
206 | // Simple layout state
207 | const [layout, setLayout] = useState<LayoutState>({
208 | visibleItems: [],
209 | overflowItems: [],
210 | });
211 |
212 | // Convert children to array for processing - use stable reference
213 | const childrenArray = React.useMemo(() => {
214 | const result = React.Children.toArray(children).filter((child): child is ReactElement =>
215 | React.isValidElement(child),
216 | );
217 | return result;
218 | }, [children]);
219 |
220 | // Stable children count to prevent unnecessary re-measurements
221 | const childrenCount = childrenArray.length;
222 |
223 | // Register component API
224 | useEffect(() => {
225 | if (registerComponentApi) {
226 | registerComponentApi({
227 | open: () => {
228 | dropdownApiRef.current?.open();
229 | },
230 | close: () => {
231 | dropdownApiRef.current?.close();
232 | },
233 | hasOverflow: () => {
234 | return layout.overflowItems.length > 0;
235 | },
236 | });
237 | }
238 | }, [registerComponentApi, layout.overflowItems.length]);
239 |
240 | // Measurement phase - measure all items in the same container
241 | const measureItems = () => {
242 | if (!containerRef.current) return;
243 |
244 | const items: HTMLElement[] = [];
245 |
246 | // Get the visibleItems container (during measurement phase, it has inline visibility styles)
247 | const measurementContainer = containerRef.current.querySelector(
248 | `.${styles.visibleItems}`,
249 | ) as HTMLElement;
250 |
251 | if (measurementContainer) {
252 | // Get all direct child divs within the measurement container
253 | const childDivs = Array.from(measurementContainer.children) as HTMLElement[];
254 |
255 | childDivs.forEach((div) => {
256 | const child = div.firstElementChild as HTMLElement;
257 | if (child) {
258 | items.push(child);
259 | }
260 | });
261 | }
262 |
263 | const measurements = items.map((item) => {
264 | const rect = item.getBoundingClientRect();
265 | // For horizontal orientation, use width; for vertical, use height
266 | return orientation === "horizontal" ? rect.width : rect.height;
267 | });
268 |
269 | // Also measure the dropdown size during measurement phase
270 | let dropdownSize = orientation === "horizontal" ? 147 : 47; // Default fallback
271 | if (measurementDropdownRef.current) {
272 | const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
273 | const measuredSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
274 | if (measuredSize > 0) {
275 | dropdownSize = measuredSize;
276 | }
277 | }
278 |
279 | setMeasuredWidths(measurements);
280 | setMeasuredDropdownSize(dropdownSize);
281 | setIsInMeasurementPhase(false);
282 | };
283 |
284 | // Calculate overflow layout with pre-measured dimensions
285 | const calculateOverflowLayout = () => {
286 | if (
287 | isCalculatingRef.current ||
288 | !containerRef.current ||
289 | childrenArray.length === 0 ||
290 | measuredWidths.length === 0
291 | ) {
292 | return;
293 | }
294 |
295 | const container = containerRef.current;
296 | const containerRect = container.getBoundingClientRect();
297 | const containerSize = orientation === "horizontal" ? containerRect.width : containerRect.height;
298 | const lastSize = lastContainerSize.current;
299 |
300 | if (containerSize === 0 || containerSize === lastSize) {
301 | return; // Not ready yet or no change
302 | }
303 |
304 | isCalculatingRef.current = true;
305 | lastContainerSize.current = containerSize;
306 |
307 | // Use the gap prop instead of computed style
308 | const gapValue = gap;
309 |
310 | // First, calculate if all items fit without any dropdown
311 | let totalSize = 0;
312 |
313 | for (let i = 0; i < childrenArray.length; i++) {
314 | const childSize = measuredWidths[i];
315 | if (!childSize) continue;
316 |
317 | const gapSize = i > 0 ? gapValue : 0;
318 | totalSize += gapSize + childSize;
319 | }
320 |
321 | let visibleItems: ReactElement[];
322 | let overflowItems: ReactElement[];
323 |
324 | // If all items fit, show all
325 | if (totalSize <= containerSize) {
326 | visibleItems = childrenArray;
327 | overflowItems = [];
328 | } else {
329 | // Use pre-measured dropdown size from measurement phase
330 | let dropdownSize = measuredDropdownSize > 0 ? measuredDropdownSize : (orientation === "horizontal" ? 147 : 47);
331 |
332 | // Try to get actual dropdown size if it exists in the visible layout (for resize scenarios)
333 | const existingDropdown = container.querySelector(
334 | `.${styles.overflowDropdown}`,
335 | ) as HTMLElement;
336 | if (existingDropdown) {
337 | const dropdownRect = existingDropdown.getBoundingClientRect();
338 | const currentSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
339 | if (currentSize > 0) {
340 | dropdownSize = currentSize;
341 | }
342 | }
343 |
344 | let accumulatedSize = 0;
345 | let visibleCount = 0;
346 |
347 | for (let i = 0; i < childrenArray.length; i++) {
348 | const childSize = measuredWidths[i];
349 | if (!childSize) continue;
350 |
351 | const gapSize = i > 0 ? gapValue : 0;
352 | const proposedSize = accumulatedSize + gapSize + childSize;
353 |
354 | // Check if this item would fit alongside the dropdown
355 | // When we have overflow: visibleItems + dropdown = visibleCount items + visibleCount gaps
356 | // The proposedSize already accounts for (visibleCount-1) gaps between items
357 | // We need to add 1 more gap for the space before the dropdown
358 | const totalSizeWithDropdown = proposedSize + gapValue + dropdownSize;
359 |
360 | if (totalSizeWithDropdown <= containerSize) {
361 | accumulatedSize = proposedSize;
362 | visibleCount++;
363 | } else {
364 | // This item doesn't fit when considering the dropdown gap, so stop here
365 | break;
366 | }
367 | }
368 |
369 | // Verify our calculation
370 | if (visibleCount > 0) {
371 | let verifyWidth = 0;
372 | for (let i = 0; i < visibleCount; i++) {
373 | verifyWidth += measuredWidths[i];
374 | }
375 | // When we have overflow: visibleCount items + dropdown need visibleCount gaps total
376 | // (visibleCount-1 gaps between items + 1 gap before dropdown)
377 | const totalGaps = visibleCount * gapValue;
378 | }
379 |
380 | // Also check actual visible item widths for comparison
381 | const visibleContainer = containerRef.current?.querySelector(
382 | `.${styles.visibleItems}`,
383 | ) as HTMLElement;
384 | if (visibleContainer && visibleContainer.children.length > 0) {
385 | let actualTotalWidth = 0;
386 | for (let i = 0; i < Math.min(visibleContainer.children.length, visibleCount); i++) {
387 | const actualWidth = (visibleContainer.children[i] as HTMLElement).offsetWidth;
388 | actualTotalWidth += actualWidth;
389 | }
390 | }
391 |
392 | // Ensure we move at least one item to overflow if we're showing dropdown
393 | if (visibleCount >= childrenArray.length) {
394 | // If all items would fit with dropdown space, don't show dropdown
395 | visibleItems = childrenArray;
396 | overflowItems = [];
397 | } else if (visibleCount === 0) {
398 | // If no items fit, show at least one visible and rest in overflow
399 | visibleItems = childrenArray.slice(0, 1);
400 | overflowItems = childrenArray.slice(1);
401 | } else {
402 | visibleItems = childrenArray.slice(0, visibleCount);
403 | overflowItems = childrenArray.slice(visibleCount);
404 | }
405 | }
406 |
407 | // Only update if there's an actual change
408 | if (
409 | visibleItems.length !== layout.visibleItems.length ||
410 | overflowItems.length !== layout.overflowItems.length
411 | ) {
412 | setLayout({
413 | visibleItems,
414 | overflowItems,
415 | });
416 | }
417 |
418 | // Allow future calculations
419 | setTimeout(() => {
420 | isCalculatingRef.current = false;
421 | }, 50);
422 | };
423 |
424 | // Phase 1: Measure items when children actually change
425 | useEffect(() => {
426 |
427 | // Ignore children changes that happen immediately after layout completion
428 | if (layoutCompletedRef.current) {
429 | setTimeout(() => {
430 | layoutCompletedRef.current = false;
431 | }, 100);
432 | return;
433 | }
434 |
435 | if (childrenCount !== lastChildrenCount.current) {
436 | lastChildrenCount.current = childrenCount;
437 | setIsInMeasurementPhase(true);
438 | setMeasuredWidths([]);
439 | setMeasuredDropdownSize(0);
440 | }
441 | }, [childrenCount]);
442 |
443 | // Phase 1: Trigger measurement after render
444 | useEffect(() => {
445 | if (isInMeasurementPhase) {
446 | const timer = setTimeout(() => {
447 | measureItems();
448 | }, 10);
449 | return () => clearTimeout(timer);
450 | }
451 | }, [isInMeasurementPhase, childrenCount]);
452 |
453 | // Phase 2: Calculate layout when measurements are ready
454 | useEffect(() => {
455 | if (!isInMeasurementPhase && measuredWidths.length > 0) {
456 | calculateOverflowLayout();
457 | // Mark that layout just completed to ignore immediate children changes
458 | layoutCompletedRef.current = true;
459 | }
460 | }, [isInMeasurementPhase, measuredWidths]);
461 |
462 | // Monitor container size changes - only in phase 2 to avoid infinite loops
463 | useResizeObserver(containerRef, () => {
464 | if (!isInMeasurementPhase && containerRef.current) {
465 | const containerRect = containerRef.current.getBoundingClientRect();
466 | const currentSize = orientation === "horizontal" ? containerRect.width : containerRect.height;
467 |
468 | if (currentSize !== lastContainerSize.current) {
469 | calculateOverflowLayout();
470 | }
471 | }
472 | });
473 |
474 | return (
475 | <div
476 | ref={(el) => {
477 | containerRef.current = el;
478 | if (typeof ref === "function") {
479 | ref(el);
480 | } else if (ref) {
481 | ref.current = el;
482 | }
483 | }}
484 | className={classnames(
485 | styles.responsiveBar,
486 | orientation === "vertical" ? styles.vertical : styles.horizontal,
487 | className
488 | )}
489 | style={{
490 | ...style,
491 | gap: `${gap}px`, // Gap between visibleItems and overflowDropdown
492 | flexDirection: orientation === "horizontal"
493 | ? (reverse ? "row-reverse" : "row")
494 | : (reverse ? "column-reverse" : "column"),
495 | height: orientation === "vertical" ? "100%" : undefined,
496 | width: orientation === "horizontal" ? "100%" : undefined,
497 | }}
498 | onClick={onClick}
499 | {...rest}
500 | >
501 | {isInMeasurementPhase ? (
502 | // Phase 1: Render all items invisibly for measurement - identical structure to layout phase
503 | <>
504 | <div
505 | className={classnames(
506 | styles.visibleItems,
507 | orientation === "vertical" ? styles.vertical : styles.horizontal
508 | )}
509 | style={{
510 | gap: `${gap}px`, // Gap between items same as layout phase
511 | visibility: "hidden",
512 | opacity: 0,
513 | pointerEvents: "none",
514 | flexDirection: orientation === "horizontal"
515 | ? (reverse ? "row-reverse" : "row")
516 | : (reverse ? "column-reverse" : "column"),
517 | }}
518 | >
519 | {childrenArray.map((child, index) => (
520 | <div key={`item-${index}`}>{child}</div>
521 | ))}
522 | </div>
523 |
524 | {/* Measurement dropdown - rendered in same location as visible dropdown */}
525 | <div
526 | ref={measurementDropdownRef}
527 | style={{
528 | visibility: "hidden",
529 | opacity: 0,
530 | pointerEvents: "none",
531 | }}
532 | >
533 | <ResponsiveBarDropdown
534 | overflowIcon={overflowIcon}
535 | dropdownText={dropdownText}
536 | dropdownAlignment={effectiveAlignment}
537 | triggerTemplate={triggerTemplate}
538 | className={styles.overflowDropdown}
539 | onWillOpen={onWillOpen}
540 | registerComponentApi={(api) => {
541 | // Don't store measurement dropdown API
542 | }}
543 | >
544 | {childrenArray.length > 0 && <MenuItem>{childrenArray[0]}</MenuItem>}
545 | </ResponsiveBarDropdown>
546 | </div>
547 | </>
548 | ) : (
549 | // Phase 2: Render final layout
550 | <>
551 | <div
552 | className={classnames(
553 | styles.visibleItems,
554 | orientation === "vertical" ? styles.vertical : styles.horizontal
555 | )}
556 | style={{
557 | gap: `${gap}px`, // Gap between visible items
558 | flexDirection: orientation === "horizontal"
559 | ? (reverse ? "row-reverse" : "row")
560 | : (reverse ? "column-reverse" : "column"),
561 | }}
562 | >
563 | {childrenArray.map((child, index) => {
564 | const isVisible =
565 | layout.visibleItems.length > 0 ? index < layout.visibleItems.length : true;
566 | return (
567 | <div key={`item-${index}`} style={{ display: isVisible ? "flex" : "none", alignItems: "stretch" }}>
568 | {renderChildFn && childNodes ? renderChildFn(childNodes[index], false) : child}
569 | </div>
570 | );
571 | })}
572 | </div>
573 |
574 | {/* Overflow dropdown */}
575 | {layout.overflowItems.length > 0 && (
576 | <ResponsiveBarDropdown
577 | overflowIcon={overflowIcon}
578 | dropdownText={dropdownText}
579 | dropdownAlignment={effectiveAlignment}
580 | triggerTemplate={triggerTemplate}
581 | className={styles.overflowDropdown}
582 | onWillOpen={onWillOpen}
583 | registerComponentApi={(api) => {
584 | dropdownApiRef.current = api as { open: () => void; close: () => void };
585 | }}
586 | >
587 | {layout.overflowItems.map((item, index) => {
588 | const originalIndex = layout.visibleItems.length + index;
589 | const renderedChild = renderChildFn && childNodes ? renderChildFn(childNodes[originalIndex], true) : item;
590 | return (
591 | <MenuItem key={index} compact={true}>
592 | {renderedChild}
593 | </MenuItem>
594 | );
595 | })}
596 | </ResponsiveBarDropdown>
597 | )}
598 | </>
599 | )}
600 | </div>
601 | );
602 | });
603 |
```
--------------------------------------------------------------------------------
/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 |
```