This is page 94 of 187. Use http://codebase.md/xmlui-org/xmlui/xmlui/tools/vscode/resources/xmlui-markup-syntax-highlighting.png?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── itchy-cases-deny.md
├── .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
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.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 |
```
--------------------------------------------------------------------------------
/docs/content/components/TextBox.md:
--------------------------------------------------------------------------------
```markdown
1 | # TextBox [#textbox]
2 |
3 | `TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints.
4 |
5 | **Key features:**
6 | - **Visual enhancements**: Add icons and text at start/end positions for context and branding
7 | - **Validation states**: Built-in visual indicators for valid, warning, and error states
8 | - **Input control**: Support for initial values, programmatic focus, and value setting
9 |
10 | Often used in forms, see [this guide](/forms) for details.
11 |
12 | ## Properties [#properties]
13 |
14 | ### `autoFocus` (default: false) [#autofocus-default-false]
15 |
16 | If this property is set to `true`, the component gets the focus automatically when displayed.
17 |
18 | ### `enabled` (default: true) [#enabled-default-true]
19 |
20 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
21 |
22 | ```xmlui-pg copy display name="Example: enabled"
23 | <App>
24 | <TextBox enabled="false" />
25 | </App>
26 | ```
27 |
28 | ### `endIcon` [#endicon]
29 |
30 | This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.
31 |
32 | ```xmlui-pg copy display name="Example: endIcon"
33 | <App>
34 | <TextBox endIcon="email" />
35 | </App>
36 | ```
37 |
38 | It is possible to set the other adornments as well: [`endText`](#endtext), [`startIcon`](#starticon) and [`startText`](#starttext).
39 |
40 | ```xmlui-pg copy display name="Example: all adornments"
41 | <App>
42 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
43 | </App>
44 | ```
45 |
46 | ### `endText` [#endtext]
47 |
48 | This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.
49 |
50 | ```xmlui-pg copy display name="Example: endText"
51 | <App>
52 | <TextBox endText=".com" />
53 | </App>
54 | ```
55 |
56 | It is possible to set the other adornments as well: [`endIcon`](#endicon), [`startIcon`](#starticon) and [`startText`](#starttext).
57 |
58 | ```xmlui-pg copy display name="Example: all adornments"
59 | <App>
60 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
61 | </App>
62 | ```
63 |
64 | ### `gap` [#gap]
65 |
66 | This property defines the gap between the adornments and the input area. If not set, the gap declared by the current theme is used.
67 |
68 | ### `initialValue` (default: "") [#initialvalue-default-]
69 |
70 | This property sets the component's initial value.
71 |
72 | ```xmlui-pg copy display name="Example: initialValue"
73 | <App>
74 | <TextBox initialValue="Example text" />
75 | </App>
76 | ```
77 |
78 | ### `maxLength` [#maxlength]
79 |
80 | This property sets the maximum length of the input it accepts.
81 |
82 | Try to enter a longer value into the input field below.
83 |
84 | ```xmlui-pg copy display name="Example: maxLength"
85 | <App>
86 | <TextBox maxLength="16" />
87 | </App>
88 | ```
89 |
90 | ### `passwordHiddenIcon` (default: "eye-off") [#passwordhiddenicon-default-eye-off]
91 |
92 | The icon to display when the password is hidden (when showPasswordToggle is true).
93 |
94 | ### `passwordVisibleIcon` (default: "eye") [#passwordvisibleicon-default-eye]
95 |
96 | The icon to display when the password is visible (when showPasswordToggle is true).
97 |
98 | ### `placeholder` [#placeholder]
99 |
100 | An optional placeholder text that is visible in the input field when its empty.
101 |
102 | ```xmlui-pg copy display name="Example: placeholder"
103 | <App>
104 | <TextBox placeholder="This is a placeholder" />
105 | </App>
106 | ```
107 |
108 | ### `readOnly` (default: false) [#readonly-default-false]
109 |
110 | Set this property to `true` to disallow changing the component value.
111 |
112 | ```xmlui-pg copy display name="Example: readOnly"
113 | <App>
114 | <TextBox initialValue="Example text" readOnly="true" />
115 | </App>
116 | ```
117 |
118 | ### `required` (default: false) [#required-default-false]
119 |
120 | Set this property to `true` to indicate it must have a value before submitting the containing form.
121 |
122 | ### `showPasswordToggle` (default: false) [#showpasswordtoggle-default-false]
123 |
124 | If `true`, a toggle button is displayed to switch between showing and hiding the password input.
125 |
126 | ### `startIcon` [#starticon]
127 |
128 | This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.
129 |
130 | ```xmlui-pg copy display name="Example: startIcon"
131 | <App>
132 | <TextBox startIcon="hyperlink" />
133 | </App>
134 | ```
135 |
136 | It is possible to set the other adornments as well: [`endText`](#endtext), [`startIcon`](#starticon) and [`startText`](#starttext).
137 |
138 | ```xmlui-pg copy display name="Example: all adornments"
139 | <App>
140 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
141 | </App>
142 | ```
143 |
144 | ### `startText` [#starttext]
145 |
146 | This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.
147 |
148 | ```xmlui-pg copy display name="Example: startText"
149 | <App>
150 | <TextBox startText="www." />
151 | </App>
152 | ```
153 |
154 | It is possible to set the other adornments as well: [`endIcon`](#endicon), [`startIcon`](#starticon) and [`endText`](#endtext).
155 |
156 | ```xmlui-pg copy display name="Example: all adornments"
157 | <App>
158 | <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
159 | </App>
160 | ```
161 |
162 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
163 |
164 | This property allows you to set the validation status of the input component.
165 |
166 | Available values:
167 |
168 | | Value | Description |
169 | | --- | --- |
170 | | `valid` | Visual indicator for an input that is accepted |
171 | | `warning` | Visual indicator for an input that produced a warning |
172 | | `error` | Visual indicator for an input that produced an error |
173 |
174 | ```xmlui-pg copy display name="Example: validationStatus"
175 | <App>
176 | <TextBox />
177 | <TextBox validationStatus="valid" />
178 | <TextBox validationStatus="warning" />
179 | <TextBox validationStatus="error" />
180 | </App>
181 | ```
182 |
183 | ## Events [#events]
184 |
185 | ### `didChange` [#didchange]
186 |
187 | This event is triggered when value of TextBox has changed.
188 |
189 | Write in the input field and see how the `Text` underneath it is updated in parallel.
190 |
191 | ```xmlui-pg copy {3} display name="Example: didChange"
192 | <App var.field="">
193 | <TextBox initialValue="{field}" onDidChange="(val) => field = val" />
194 | <Text value="{field}" />
195 | </App>
196 | ```
197 |
198 | ### `gotFocus` [#gotfocus]
199 |
200 | This event is triggered when the TextBox has received the focus.
201 |
202 | Clicking on the `TextBox` in the example demo changes the label text.
203 | Note how clicking elsewhere resets the text to its original.
204 |
205 | ```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
206 | <App>
207 | <TextBox
208 | initialValue="{focused === true ? 'I got focused!' : 'I lost focus...'}"
209 | onGotFocus="focused = true"
210 | onLostFocus="focused = false"
211 | var.focused="{false}"
212 | />
213 | </App>
214 | ```
215 |
216 | ### `lostFocus` [#lostfocus]
217 |
218 | This event is triggered when the TextBox has lost the focus.
219 |
220 | ## Exposed Methods [#exposed-methods]
221 |
222 | ### `focus` [#focus]
223 |
224 | This method sets the focus on the `TextBox` component.
225 |
226 | **Signature**: `focus(): void`
227 |
228 | ```xmlui-pg copy {2-3} display name="Example: focus"
229 | <App>
230 | <Button label="Trigger Focus" onClick="inputComponent.focus()" />
231 | <TextBox id="inputComponent" />
232 | </App>
233 | ```
234 |
235 | ### `setValue` [#setvalue]
236 |
237 | This API sets the value of the `TextBox`. You can use it to programmatically change the value.
238 |
239 | **Signature**: `setValue(value: string): void`
240 |
241 | - `value`: The new value to set. If the value is empty, it will clear the input.
242 |
243 | ```xmlui-pg copy {10} display name="Example: setValue"
244 | <App var.changes="">
245 | <TextBox
246 | id="inputField"
247 | readOnly="true"
248 | onDidChange="changes++"
249 | />
250 | <HStack>
251 | <Button
252 | label="Check"
253 | onClick="inputField.setValue('example ')"
254 | />
255 | <Text value="Number of changes: {changes}" />
256 | </HStack>
257 | </App>
258 | ```
259 |
260 | ### `value` [#value]
261 |
262 | You can query the component's value. If no value is set, it will retrieve `undefined`.
263 |
264 | **Signature**: `get value(): string | undefined`
265 |
266 | In the example below, typing in the `TextBox` will also display the length of the text typed into it above the field:
267 |
268 | ```xmlui-pg copy {2-3} display name="Example: value"
269 | <App>
270 | <Text value="TextBox content length: {inputComponent.value.length}" />
271 | <TextBox id="inputComponent" />
272 | </App>
273 | ```
274 |
275 | ## Parts [#parts]
276 |
277 | The component has some parts that can be styled through layout properties and theme variables separately:
278 |
279 | - **`endAdornment`**: The adornment displayed at the end of the text box.
280 | - **`input`**: The text box input area.
281 | - **`label`**: The label displayed for the text box.
282 | - **`startAdornment`**: The adornment displayed at the start of the text box.
283 |
284 | **Default part**: `input`
285 |
286 | ## Styling [#styling]
287 |
288 | ### Theme Variables [#theme-variables]
289 |
290 | | Variable | Default Value (Light) | Default Value (Dark) |
291 | | --- | --- | --- |
292 | | [backgroundColor](../styles-and-themes/common-units/#color)-Input--disabled | $backgroundColor--disabled | $backgroundColor--disabled |
293 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
294 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
295 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
296 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
297 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
298 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
299 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
300 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
301 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
302 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
303 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
304 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
305 | | [backgroundColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
306 | | [borderColor](../styles-and-themes/common-units/#color)-Input--default | $borderColor-Input-default | $borderColor-Input-default |
307 | | [borderColor](../styles-and-themes/common-units/#color)-Input--default--hover | $borderColor-Input-default--hover | $borderColor-Input-default--hover |
308 | | [borderColor](../styles-and-themes/common-units/#color)-Input--disabled | $borderColor--disabled | $borderColor--disabled |
309 | | [borderColor](../styles-and-themes/common-units/#color)-Input--error | $borderColor-Input-default--error | $borderColor-Input-default--error |
310 | | [borderColor](../styles-and-themes/common-units/#color)-Input--success | $borderColor-Input-default--success | $borderColor-Input-default--success |
311 | | [borderColor](../styles-and-themes/common-units/#color)-Input--warning | $borderColor-Input-default--warning | $borderColor-Input-default--warning |
312 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
313 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
314 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
315 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
316 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
317 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
318 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
319 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
320 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
321 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
322 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
323 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
324 | | [borderColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
325 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Input | $borderRadius | $borderRadius |
326 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--default | *none* | *none* |
327 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--error | *none* | *none* |
328 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--success | *none* | *none* |
329 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-TextBox--warning | *none* | *none* |
330 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Input | solid | solid |
331 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--default | *none* | *none* |
332 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--error | *none* | *none* |
333 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--success | *none* | *none* |
334 | | [borderStyle](../styles-and-themes/common-units/#border-style)-TextBox--warning | *none* | *none* |
335 | | [borderWidth](../styles-and-themes/common-units/#size)-Input | 1px | 1px |
336 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--default | *none* | *none* |
337 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--error | *none* | *none* |
338 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--success | *none* | *none* |
339 | | [borderWidth](../styles-and-themes/common-units/#size)-TextBox--warning | *none* | *none* |
340 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default | *none* | *none* |
341 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default--focus | *none* | *none* |
342 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--default--hover | *none* | *none* |
343 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error | *none* | *none* |
344 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error--focus | *none* | *none* |
345 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--error--hover | *none* | *none* |
346 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success | *none* | *none* |
347 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success--focus | *none* | *none* |
348 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--success--hover | *none* | *none* |
349 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning | *none* | *none* |
350 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning--focus | *none* | *none* |
351 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-TextBox--warning--hover | *none* | *none* |
352 | | [color](../styles-and-themes/common-units/#color)-adornment-Input | $textColor-subtitle | $textColor-subtitle |
353 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--default | *none* | *none* |
354 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--error | *none* | *none* |
355 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--success | *none* | *none* |
356 | | [color](../styles-and-themes/common-units/#color)-adornment-TextBox--warning | *none* | *none* |
357 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-Input | $textColor-subtitle | $textColor-subtitle |
358 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox | *none* | *none* |
359 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox--focus | *none* | *none* |
360 | | [color](../styles-and-themes/common-units/#color)-passwordToggle-TextBox--hover | *none* | *none* |
361 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--default | *none* | *none* |
362 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--error | *none* | *none* |
363 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--success | *none* | *none* |
364 | | [fontSize](../styles-and-themes/common-units/#size)-placeholder-TextBox--warning | *none* | *none* |
365 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--default | *none* | *none* |
366 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--error | *none* | *none* |
367 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--success | *none* | *none* |
368 | | [fontSize](../styles-and-themes/common-units/#size)-TextBox--warning | *none* | *none* |
369 | | [gap](../styles-and-themes/common-units/#size)-adornment-Input | $space-2 | $space-2 |
370 | | [gap](../styles-and-themes/common-units/#size)-adornment-TextBox | *none* | *none* |
371 | | [minHeight](../styles-and-themes/common-units/#size)-Input | 39px | 39px |
372 | | [outlineColor](../styles-and-themes/common-units/#color)-Input--focus | $outlineColor--focus | $outlineColor--focus |
373 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
374 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
375 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
376 | | [outlineColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
377 | | [outlineOffset](../styles-and-themes/common-units/#size)-Input--focus | $outlineOffset--focus | $outlineOffset--focus |
378 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--default--focus | *none* | *none* |
379 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--error--focus | *none* | *none* |
380 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--success--focus | *none* | *none* |
381 | | [outlineOffset](../styles-and-themes/common-units/#size)-TextBox--warning--focus | *none* | *none* |
382 | | [outlineStyle](../styles-and-themes/common-units/#border)-Input--focus | $outlineStyle--focus | $outlineStyle--focus |
383 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--default--focus | *none* | *none* |
384 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--error--focus | *none* | *none* |
385 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--success--focus | *none* | *none* |
386 | | [outlineStyle](../styles-and-themes/common-units/#border)-TextBox--warning--focus | *none* | *none* |
387 | | [outlineWidth](../styles-and-themes/common-units/#size)-Input--focus | $outlineWidth--focus | $outlineWidth--focus |
388 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--default--focus | *none* | *none* |
389 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--error--focus | *none* | *none* |
390 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--success--focus | *none* | *none* |
391 | | [outlineWidth](../styles-and-themes/common-units/#size)-TextBox--warning--focus | *none* | *none* |
392 | | [padding](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
393 | | [paddingBottom](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
394 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-TextBox | $space-2 | $space-2 |
395 | | [paddingLeft](../styles-and-themes/common-units/#size)-passwordToggle-TextBox | *none* | *none* |
396 | | [paddingLeft](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
397 | | [paddingRight](../styles-and-themes/common-units/#size)-passwordToggle-TextBox | *none* | *none* |
398 | | [paddingRight](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
399 | | [paddingTop](../styles-and-themes/common-units/#size)-TextBox | *none* | *none* |
400 | | [paddingVertical](../styles-and-themes/common-units/#size)-TextBox | $space-2 | $space-2 |
401 | | [textColor](../styles-and-themes/common-units/#color)-Input | $textColor-primary | $textColor-primary |
402 | | [textColor](../styles-and-themes/common-units/#color)-Input--disabled | $textColor--disabled | $textColor--disabled |
403 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-Input | $textColor-subtitle | $textColor-subtitle |
404 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--default | *none* | *none* |
405 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--error | *none* | *none* |
406 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--success | *none* | *none* |
407 | | [textColor](../styles-and-themes/common-units/#color)-placeholder-TextBox--warning | *none* | *none* |
408 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default | *none* | *none* |
409 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default--focus | *none* | *none* |
410 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--default--hover | *none* | *none* |
411 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--disabled | *none* | *none* |
412 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error | *none* | *none* |
413 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error--focus | *none* | *none* |
414 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--error--hover | *none* | *none* |
415 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success | *none* | *none* |
416 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success--focus | *none* | *none* |
417 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--success--hover | *none* | *none* |
418 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning | *none* | *none* |
419 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning--focus | *none* | *none* |
420 | | [textColor](../styles-and-themes/common-units/#color)-TextBox--warning--hover | *none* | *none* |
421 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/data-operations.md:
--------------------------------------------------------------------------------
```markdown
1 | # Data Operations
2 |
3 | This document explains XMLUI's data operation architecture, covering automatic loader creation, the ApiBoundComponent system, DataSource/APICall components, state integration, and React Query caching.
4 |
5 | ## Overview
6 |
7 | XMLUI provides declarative data operations through components that automatically manage async state, caching, and integration with the container system. The framework detects data requirements and creates **loaders** - internal mechanisms handling fetch operations, state transitions, and cache management.
8 |
9 | **Core Components:**
10 | - **DataSource** - Fetches and caches data from API endpoints
11 | - **APICall** - Creates, updates, or deletes data (manual execution)
12 | - **FileUpload/FileDownload** - Specialized file operations
13 | - **Loaders** - Internal state machines managing async operations
14 |
15 | **What Loaders Do:**
16 |
17 | Loaders are React components (not user-defined) that the framework automatically creates to manage async operations. Each loader:
18 | 1. Executes HTTP requests via React Query
19 | 2. Manages loading/error/success states
20 | 3. Integrates with container state via reducer actions
21 | 4. Provides programmatic APIs (`refetch()`, `update()`, etc.)
22 | 5. Handles caching, polling, and pagination
23 |
24 | **Key Features:** Automatic loader creation, declarative API operations, integrated caching with React Query, seamless container state integration, polling/refetching, optimistic updates.
25 |
26 | ## Automatic Loader Creation
27 |
28 | ### ApiBoundComponent Detection
29 |
30 | The framework automatically detects when components require API operations and wraps them in `ApiBoundComponent`, which generates necessary loaders. Detection occurs in `ComponentAdapter.tsx`:
31 |
32 | ```typescript
33 | // Scan component for API-bound properties
34 | const apiBoundProps = useMemo(
35 | () => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"),
36 | [safeNode.props]
37 | );
38 |
39 | // Scan events for API actions
40 | const apiBoundEvents = useMemo(
41 | () => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"),
42 | [safeNode.events]
43 | );
44 |
45 | // Wrap if API-bound items found
46 | if (apiBoundProps.length || apiBoundEvents.length) {
47 | return (
48 | <ApiBoundComponent
49 | uid={uid}
50 | node={safeNode}
51 | apiBoundProps={apiBoundProps}
52 | apiBoundEvents={apiBoundEvents}
53 | renderChild={renderChild}
54 | />
55 | );
56 | }
57 | ```
58 |
59 | ### Detection Scenarios
60 |
61 | **1. Property-Based (Data Fetching):**
62 | ```xml
63 | <!-- Direct URL pattern -->
64 | <Table data="/api/users" />
65 | <!-- Creates DataLoader automatically -->
66 |
67 | <!-- DataSource reference -->
68 | <Table data="{users}" />
69 | <!-- Creates DataLoader when 'users' is DataSource -->
70 |
71 | <!-- Explicit DataSource -->
72 | <DataSource id="users" url="/api/users" />
73 | <Table data="{users}" />
74 | <!-- DataSource becomes loader accessible as 'users' -->
75 | ```
76 |
77 | **2. Event-Based (Data Mutation):**
78 | ```xml
79 | <Button>
80 | Save
81 | <event name="click">
82 | <APICall url="/api/save" method="POST" body="{formData}" />
83 | </event>
84 | </Button>
85 | <!-- APICall handler generated for click event -->
86 |
87 | <FileUploadDropZone>
88 | <event name="uploaded">
89 | <FileUpload url="/api/upload" />
90 | </event>
91 | </FileUploadDropZone>
92 | <!-- FileUpload handler attached to uploaded event -->
93 | ```
94 |
95 | ### ApiBoundComponent Transformation
96 |
97 | `ApiBoundComponent` transforms the component definition by:
98 |
99 | 1. **Creating Loader Definitions** - Generates `DataLoader` components for each API-bound property
100 | 2. **Generating Event Handlers** - Converts action components into executable functions
101 | 3. **Injecting API Properties** - Adds loader state properties (`value`, `inProgress`, `loaded`, `error`)
102 | 4. **Registering APIs** - Creates methods like `fetch_data()`, `update_data()`, `refetch()`
103 |
104 | ```typescript
105 | // Inside ApiBoundComponent.tsx
106 | apiBoundProps.forEach((key) => {
107 | const loaderUid = node.props![key].uid || generateloaderUid(key);
108 | const operation = node.props![key].props || node.props![key];
109 |
110 | // Create DataLoader definition
111 | loaders.push({
112 | type: "DataLoader",
113 | uid: loaderUid,
114 | props: operation,
115 | events: loaderEvents,
116 | });
117 |
118 | // Inject reactive properties
119 | props[key] = `{ ${loaderUid}.value }`;
120 | props.loading = `{ ${loaderUid}.inProgress === undefined ? true : ${loaderUid}.inProgress}`;
121 |
122 | // Register API methods
123 | api[`fetch_${key}`] = `() => { ${loaderUid}.refetch(); }`;
124 | api[`update_${key}`] = `(updaterFn) => { ${loaderUid}.update(updaterFn); }`;
125 | });
126 | ```
127 |
128 | **Result:** Component receives transformed props/events and gains API methods for programmatic control.
129 |
130 | ## DataSource Component
131 |
132 | ### Purpose and Properties
133 |
134 | DataSource fetches data from API endpoints with automatic caching, polling, and state management.
135 |
136 | **Core Properties:**
137 | ```typescript
138 | {
139 | id: string; // Required: Identifier for referencing
140 | url: string; // Required: API endpoint
141 | method?: string; // HTTP method (default: "GET")
142 | body?: any; // Request body (JSON serialized)
143 | rawBody?: string; // Pre-serialized body
144 | queryParams?: object; // URL query parameters
145 | headers?: object; // Request headers
146 | pollIntervalInSeconds?: number; // Auto-refresh interval
147 | resultSelector?: string; // Extract subset of response
148 | transformResult?: Function; // Transform response data
149 | structuralSharing?: boolean; // Keep unchanged refs (default: true)
150 | }
151 | ```
152 |
153 | **Events:**
154 | - `loaded(data, isRefetch)` - Fires when data successfully fetched
155 | - `error(error)` - Fires on request failure
156 |
157 | **APIs:**
158 | ```typescript
159 | {
160 | value: any; // Fetched data (post-transformation)
161 | inProgress: boolean; // Loading state
162 | isRefetching: boolean; // Re-fetch state
163 | loaded: boolean; // Has data been loaded
164 | refetch(): void; // Manually trigger re-fetch
165 | }
166 | ```
167 |
168 | ### Usage Patterns
169 |
170 | **Basic Fetching:**
171 | ```xml
172 | <DataSource id="users" url="/api/users" />
173 | <Table data="{users}" />
174 | <!-- Table receives users.value automatically -->
175 | ```
176 |
177 | **With Transformation:**
178 | ```xml
179 | <DataSource
180 | id="products"
181 | url="/api/products"
182 | resultSelector="data.items"
183 | transformResult="(items) => items.filter(i => i.active)"
184 | />
185 | ```
186 |
187 | **With Polling:**
188 | ```xml
189 | <DataSource
190 | id="status"
191 | url="/api/status"
192 | pollIntervalInSeconds="5"
193 | inProgressNotificationMessage="Checking status..."
194 | />
195 | ```
196 |
197 | **Programmatic Control:**
198 | ```xml
199 | <DataSource id="orders" url="/api/orders" />
200 | <Button onClick="orders.refetch()">Refresh</Button>
201 | ```
202 |
203 | ### Data Transformation Pipeline
204 |
205 | 1. **Fetch** - HTTP request via RestApiProxy
206 | 2. **Result Selection** - Extract subset via `resultSelector` (lodash path)
207 | 3. **Transformation** - Apply `transformResult` function
208 | 4. **Structural Sharing** - Preserve unchanged object references (if enabled)
209 | 5. **State Update** - Dispatch `LOADER_LOADED` action to container
210 |
211 | ```typescript
212 | // In DataLoader.tsx
213 | const transformResult = useCallback(async (data: any) => {
214 | // 1. Extract subset
215 | if (loader.props.resultSelector) {
216 | data = extractParam(state, loader.props.resultSelector, appContext, data);
217 | }
218 |
219 | // 2. Apply custom transformation
220 | if (loader.props.transformResult) {
221 | const transform = extractParam(state, loader.props.transformResult, appContext);
222 | data = await transform(data);
223 | }
224 |
225 | return data;
226 | }, [loader.props, state, appContext]);
227 | ```
228 |
229 | ### Paging Support
230 |
231 | DataSource supports pagination when `prevPageSelector` and/or `nextPageSelector` are defined:
232 |
233 | ```xml
234 | <DataSource
235 | id="pagedData"
236 | url="/api/items?page=1"
237 | nextPageSelector="pagination.nextPage"
238 | prevPageSelector="pagination.prevPage"
239 | />
240 |
241 | <Table data="{pagedData}">
242 | <event name="requestFetchNextPage">
243 | <!-- Auto-wired by ApiBoundComponent -->
244 | </event>
245 | </Table>
246 | ```
247 |
248 | Internally uses `PageableLoader` with React Query's infinite query capabilities.
249 |
250 | ## APICall Component
251 |
252 | ### Purpose and Properties
253 |
254 | APICall creates, updates, or deletes data. Unlike DataSource, it doesn't auto-execute - requires manual trigger via `execute()` method.
255 |
256 | **Core Properties:**
257 | ```typescript
258 | {
259 | url: string; // Required: API endpoint
260 | method?: string; // HTTP method (default: "GET")
261 | body?: any; // Request body
262 | rawBody?: string; // Pre-serialized body
263 | queryParams?: object; // URL parameters
264 | headers?: object; // Request headers
265 |
266 | // Confirmation dialog
267 | confirmTitle?: string;
268 | confirmMessage?: string;
269 | confirmButtonLabel?: string;
270 |
271 | // Notifications
272 | inProgressNotificationMessage?: string;
273 | completedNotificationMessage?: string;
274 | errorNotificationMessage?: string;
275 | }
276 | ```
277 |
278 | **Events:**
279 | - `beforeRequest($param, $params)` - Before execution (return `false` to cancel)
280 | - `success($result)` - On successful response
281 | - `error($error)` - On failure
282 |
283 | **APIs:**
284 | ```typescript
285 | {
286 | execute(...params): Promise<any>; // Trigger API call
287 | }
288 | ```
289 |
290 | **Context Variables:**
291 | - `$param` - First argument to `execute()`
292 | - `$params` - Array of all arguments
293 | - `$result` - Response data (in success/notification contexts)
294 | - `$error` - Error details (in error contexts)
295 |
296 | ### Usage Patterns
297 |
298 | **Button Click:**
299 | ```xml
300 | <APICall id="saveUser" url="/api/users" method="POST" body="{userData}" />
301 | <Button onClick="saveUser.execute()">Save</Button>
302 | ```
303 |
304 | **Form Submission:**
305 | ```xml
306 | <Form>
307 | <event name="submit">
308 | <APICall
309 | url="/api/users"
310 | method="POST"
311 | body="{$data}"
312 | completedNotificationMessage="User created successfully!"
313 | />
314 | </event>
315 | </Form>
316 | ```
317 |
318 | **With Parameters:**
319 | ```xml
320 | <APICall id="deleteItem" url="/api/items/{$param}" method="DELETE">
321 | <event name="success">
322 | <script>
323 | users.refetch(); // Refresh user list after deletion
324 | </script>
325 | </event>
326 | </APICall>
327 |
328 | <Button onClick="deleteItem.execute(item.id)">Delete</Button>
329 | ```
330 |
331 | **With Confirmation:**
332 | ```xml
333 | <APICall
334 | id="deleteUser"
335 | url="/api/users/{$param}"
336 | method="DELETE"
337 | confirmTitle="Delete User"
338 | confirmMessage="Are you sure you want to delete this user?"
339 | confirmButtonLabel="Delete"
340 | />
341 | ```
342 |
343 | **Conditional Execution:**
344 | ```xml
345 | <APICall id="updateStatus" url="/api/status" method="PATCH">
346 | <event name="beforeRequest">
347 | <script>
348 | // Return false to prevent execution
349 | return formIsValid;
350 | </script>
351 | </event>
352 | </APICall>
353 | ```
354 |
355 | ### Event-Based APICall
356 |
357 | When APICall is in an event handler, ApiBoundComponent generates inline function:
358 |
359 | ```typescript
360 | // Generated event handler
361 | events.click = `(eventArgs, options) => {
362 | return Actions.callApi({
363 | uid: ${JSON.stringify(uid)},
364 | method: "POST",
365 | url: "/api/save",
366 | body: ${JSON.stringify(body)} || (options?.passAsDefaultBody ? eventArgs : undefined),
367 | params: { '$param': eventArgs },
368 | onSuccess: ${prepareEvent(success)},
369 | onError: ${prepareEvent(error)},
370 | }, { resolveBindingExpressions: true });
371 | }`;
372 | ```
373 |
374 | This allows seamless integration with form submissions and button clicks.
375 |
376 | ## Loader Infrastructure
377 |
378 | ### LoaderComponent
379 |
380 | `LoaderComponent` manages individual loader lifecycle and state integration:
381 |
382 | ```typescript
383 | export function LoaderComponent({
384 | node, // Loader definition
385 | state, // Container state
386 | dispatch, // Container dispatcher
387 | registerComponentApi,
388 | loaderInProgressChanged, // State update callbacks
389 | loaderLoaded,
390 | loaderError,
391 | }) {
392 | const uid = useMemo(() => Symbol(node.uid), [node.uid]);
393 |
394 | // Lookup renderer based on loader type
395 | const renderer = componentRegistry.lookupLoaderRenderer(node.type);
396 |
397 | // Render with callbacks for state updates
398 | return renderer({
399 | loader: node,
400 | state,
401 | loaderInProgressChanged: (isInProgress) =>
402 | dispatch(loaderInProgressChanged(uid, isInProgress)),
403 | loaderLoaded: (data, pageInfo) =>
404 | dispatch(loaderLoaded(uid, data, pageInfo)),
405 | loaderError: (error) =>
406 | dispatch(loaderError(uid, error)),
407 | });
408 | }
409 | ```
410 |
411 | ### DataLoader Implementation
412 |
413 | `DataLoader` is the primary loader renderer, integrating React Query:
414 |
415 | **Key Responsibilities:**
416 | 1. **Query Key Generation** - Creates unique keys for caching
417 | 2. **Data Fetching** - Uses RestApiProxy for HTTP requests
418 | 3. **State Transitions** - Dispatches loader actions to container
419 | 4. **Polling** - Implements refetch intervals
420 | 5. **Transformation** - Applies result selectors and transformers
421 |
422 | ```typescript
423 | function DataLoader({ loader, loaderInProgressChanged, loaderLoaded, loaderError }) {
424 | const url = extractParam(state, loader.props.url, appContext);
425 | const queryParams = useShallowCompareMemoize(
426 | extractParam(state, loader.props.queryParams, appContext)
427 | );
428 |
429 | // Generate cache key
430 | const queryKey = useMemo(() =>
431 | DataLoaderQueryKeyGenerator.generate(url, queryParams, body),
432 | [url, queryParams, body]
433 | );
434 |
435 | // React Query integration
436 | const query = useQuery({
437 | queryKey,
438 | queryFn: ({ signal }) => doLoad(signal),
439 | refetchInterval: loader.props.pollIntervalInSeconds * 1000,
440 | structuralSharing: loader.props.structuralSharing,
441 | });
442 |
443 | // Sync state with container
444 | useEffect(() => {
445 | loaderInProgressChanged(query.isFetching);
446 | }, [query.isFetching]);
447 |
448 | useEffect(() => {
449 | if (query.data !== undefined) {
450 | loaderLoaded(query.data, pageInfo);
451 | }
452 | }, [query.data]);
453 |
454 | useEffect(() => {
455 | if (query.error) {
456 | loaderError(query.error);
457 | }
458 | }, [query.error]);
459 | }
460 | ```
461 |
462 | ### PageableLoader
463 |
464 | Extends DataLoader for infinite pagination using React Query's `useInfiniteQuery`:
465 |
466 | ```typescript
467 | function PageableLoader({ loader, direction }) {
468 | const query = useInfiniteQuery({
469 | queryKey,
470 | queryFn: ({ signal, pageParam }) => doLoad(signal, pageParam),
471 | getNextPageParam: (lastPage) =>
472 | extractParam(state, loader.props.nextPageSelector, appContext, lastPage),
473 | getPreviousPageParam: (firstPage) =>
474 | extractParam(state, loader.props.prevPageSelector, appContext, firstPage),
475 | });
476 |
477 | // Register APIs
478 | registerComponentApi({
479 | fetchNextPage: query.fetchNextPage,
480 | fetchPrevPage: query.fetchPreviousPage,
481 | hasNextPage: query.hasNextPage,
482 | hasPrevPage: query.hasPreviousPage,
483 | });
484 | }
485 | ```
486 |
487 | ## State Integration
488 |
489 | ### Container Reducer Actions
490 |
491 | Loaders integrate with container state via actions:
492 |
493 | ```typescript
494 | export enum ContainerActionKind {
495 | LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
496 | LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
497 | LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
498 | LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
499 | }
500 | ```
501 |
502 | **Reducer Handling:**
503 | ```typescript
504 | switch (action.type) {
505 | case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED:
506 | state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
507 | break;
508 |
509 | case ContainerActionKind.LOADER_LOADED:
510 | state[uid] = {
511 | value: action.payload.data,
512 | byId: Array.isArray(data) ? keyBy(data, item => item.$id) : undefined,
513 | inProgress: false,
514 | loaded: true,
515 | pageInfo: action.payload.pageInfo,
516 | };
517 | break;
518 |
519 | case ContainerActionKind.LOADER_ERROR:
520 | state[uid] = {
521 | ...state[uid],
522 | error: action.payload.error,
523 | inProgress: false,
524 | loaded: true
525 | };
526 | break;
527 | }
528 | ```
529 |
530 | ### State Structure
531 |
532 | Loader state in container:
533 |
534 | ```typescript
535 | {
536 | [loaderUid]: {
537 | value: any, // Fetched/transformed data
538 | byId?: Record<string, any>, // Indexed by $id (if array)
539 | inProgress: boolean, // Loading state
540 | isRefetching: boolean, // Re-fetch state
541 | loaded: boolean, // Has loaded
542 | error?: any, // Error object
543 | pageInfo?: { // Pagination info
544 | hasNextPage: boolean,
545 | hasPrevPage: boolean,
546 | nextPage: any,
547 | prevPage: any,
548 | }
549 | }
550 | }
551 | ```
552 |
553 | ### Reactive Access
554 |
555 | Components access loader state reactively:
556 |
557 | ```xml
558 | <DataSource id="users" url="/api/users" />
559 |
560 | <!-- Reactive bindings -->
561 | <Text>{users.value.length} users</Text>
562 | <Spinner visible="{users.inProgress}" />
563 | <Text visible="{users.error}">Error: {users.error.message}</Text>
564 |
565 | <!-- Programmatic access -->
566 | <Button onClick="users.refetch()" enabled="{!users.inProgress}">
567 | Refresh
568 | </Button>
569 | ```
570 |
571 | ## React Query Integration
572 |
573 | ### Query Client Configuration
574 |
575 | XMLUI provides QueryClient in `AppWrapper`:
576 |
577 | ```typescript
578 | const queryClient = new QueryClient({
579 | defaultOptions: {
580 | queries: {
581 | staleTime: 5 * 60 * 1000, // 5 minutes
582 | cacheTime: 10 * 60 * 1000, // 10 minutes
583 | retry: 1,
584 | refetchOnWindowFocus: false,
585 | },
586 | },
587 | });
588 |
589 | <QueryClientProvider client={queryClient}>
590 | {/* App content */}
591 | </QueryClientProvider>
592 | ```
593 |
594 | ### Cache Key Generation
595 |
596 | `DataLoaderQueryKeyGenerator` creates deterministic keys:
597 |
598 | ```typescript
599 | class DataLoaderQueryKeyGenerator {
600 | static generate(url: string, queryParams?: any, body?: any): QueryKey {
601 | const parts = ['data-loader', url];
602 |
603 | if (queryParams) {
604 | parts.push(JSON.stringify(sortKeys(queryParams)));
605 | }
606 |
607 | if (body) {
608 | parts.push(JSON.stringify(sortKeys(body)));
609 | }
610 |
611 | return parts;
612 | }
613 | }
614 | ```
615 |
616 | **Example Keys:**
617 | ```typescript
618 | ['data-loader', '/api/users']
619 | ['data-loader', '/api/users', '{"role":"admin"}']
620 | ['data-loader', '/api/search', '{"query":"test"}', '{"filters":{}}']
621 | ```
622 |
623 | ### Cache Invalidation
624 |
625 | **Automatic via Cache Keys:**
626 | ```xml
627 | <APICall
628 | url="/api/users"
629 | method="POST"
630 | invalidates="/api/users"
631 | />
632 | <!-- Invalidates all queries matching /api/users -->
633 | ```
634 |
635 | **Manual Invalidation:**
636 | ```typescript
637 | // In event handler
638 | queryClient.invalidateQueries(['data-loader', '/api/users']);
639 | ```
640 |
641 | **Optimistic Updates:**
642 | ```xml
643 | <APICall
644 | id="toggleStatus"
645 | url="/api/items/{$param}/toggle"
646 | method="PATCH"
647 | updates="items"
648 | optimisticValue="{item => ({ ...item, status: !item.status })}"
649 | />
650 | ```
651 |
652 | ## File Operations
653 |
654 | ### FileUpload
655 |
656 | Handles file uploads with multipart/form-data or JSON payloads:
657 |
658 | ```xml
659 | <FileUploadDropZone>
660 | <event name="uploaded">
661 | <FileUpload
662 | url="/api/upload"
663 | asForm="true"
664 | formParams="{metadata}"
665 | />
666 | </event>
667 | </FileUploadDropZone>
668 | ```
669 |
670 | **Properties:**
671 | - `url` - Upload endpoint
672 | - `asForm` - Send as multipart/form-data (default: true)
673 | - `formParams` - Additional form fields
674 | - `file` - File to upload (usually from event)
675 |
676 | ### FileDownload
677 |
678 | Triggers browser download:
679 |
680 | ```xml
681 | <Button>
682 | Export
683 | <event name="click">
684 | <FileDownload
685 | url="/api/export"
686 | fileName="data.csv"
687 | queryParams="{filters}"
688 | />
689 | </event>
690 | </Button>
691 | ```
692 |
693 | ## API Interception
694 |
695 | ### ApiInterceptorProvider
696 |
697 | Enables request mocking, stubbing, and instrumentation:
698 |
699 | ```typescript
700 | <ApiInterceptorProvider
701 | interceptor={(request) => {
702 | // Log request
703 | console.log('API Request:', request.url);
704 |
705 | // Mock response
706 | if (request.url === '/api/users') {
707 | return { data: mockUsers };
708 | }
709 |
710 | // Continue to real endpoint
711 | return null;
712 | }}
713 | >
714 | {/* App content */}
715 | </ApiInterceptorProvider>
716 | ```
717 |
718 | **Use Cases:**
719 | - Development mocking
720 | - Testing
721 | - Request logging
722 | - Error simulation
723 | - Authentication token injection
724 |
725 | ## Advanced Patterns
726 |
727 | ### Dependent Queries
728 |
729 | ```xml
730 | <DataSource id="user" url="/api/user/{userId}" />
731 | <DataSource
732 | id="userPosts"
733 | url="/api/posts?userId={user.value.id}"
734 | />
735 | <!-- userPosts waits for user to load -->
736 | ```
737 |
738 | ### Conditional Loading
739 |
740 | ```xml
741 | <DataSource
742 | id="details"
743 | url="/api/details"
744 | >
745 | <script>
746 | if (!showDetails) return null; // Skip loading
747 | </script>
748 | </DataSource>
749 | ```
750 |
751 | ### Mutation Chaining
752 |
753 | ```xml
754 | <APICall id="createUser" url="/api/users" method="POST">
755 | <event name="success">
756 | <APICall url="/api/welcome-email" method="POST" body="{$result}" />
757 | </event>
758 | </APICall>
759 | ```
760 |
761 | ### Error Recovery
762 |
763 | ```xml
764 | <DataSource id="data" url="/api/data">
765 | <event name="error">
766 | <script>
767 | toast.error('Failed to load data. Retrying...');
768 | setTimeout(() => data.refetch(), 3000);
769 | </script>
770 | </event>
771 | </DataSource>
772 | ```
773 |
774 | ### Custom Data Types
775 |
776 | DataLoader supports specialized data types:
777 |
778 | **CSV:**
779 | ```xml
780 | <DataSource
781 | id="csvData"
782 | url="/data.csv"
783 | dataType="csv"
784 | />
785 | <!-- Auto-parsed with Papa Parse -->
786 | ```
787 |
788 | **SQL (requires backend):**
789 | ```xml
790 | <DataSource
791 | id="sqlData"
792 | url="/query"
793 | dataType="sql"
794 | body="{sql: 'SELECT * FROM users WHERE active = ?', params: [true]}"
795 | />
796 | ```
797 |
798 | ## Performance Considerations
799 |
800 | ### Structural Sharing
801 |
802 | Preserves object references when data unchanged:
803 |
804 | ```xml
805 | <DataSource
806 | id="items"
807 | url="/api/items"
808 | structuralSharing="true"
809 | />
810 | <!-- Child components won't re-render if items unchanged -->
811 | ```
812 |
813 | ### Polling Strategy
814 |
815 | ```xml
816 | <!-- Aggressive polling -->
817 | <DataSource pollIntervalInSeconds="2" />
818 |
819 | <!-- Conservative polling -->
820 | <DataSource pollIntervalInSeconds="60" />
821 |
822 | <!-- Manual only -->
823 | <DataSource />
824 | ```
825 |
826 | ### Query Key Granularity
827 |
828 | **Coarse (shares cache broadly):**
829 | ```xml
830 | <DataSource id="users" url="/api/users" />
831 | <!-- All users queries share cache -->
832 | ```
833 |
834 | **Fine (separate caches):**
835 | ```xml
836 | <DataSource id="activeUsers" url="/api/users" queryParams="{status: 'active'}" />
837 | <DataSource id="inactiveUsers" url="/api/users" queryParams="{status: 'inactive'}" />
838 | <!-- Separate caches due to different query params -->
839 | ```
840 |
841 | ## Summary
842 |
843 | XMLUI's data operation system provides:
844 |
845 | 1. **Automatic Detection** - Framework identifies API requirements and creates loaders
846 | 2. **Declarative API** - XML-based data fetching/mutation without imperative code
847 | 3. **State Integration** - Seamless connection with container reactive state
848 | 4. **Caching** - React Query integration with smart cache management
849 | 5. **Type Safety** - Proper handling of loading/error states
850 | 6. **Flexibility** - Polling, pagination, transformations, interceptors
851 |
852 | This architecture eliminates boilerplate for async operations while maintaining full control through programmatic APIs and event hooks.
853 |
```
