This is page 36 of 143. Use http://codebase.md/xmlui-org/xmlui?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── loud-ducks-thank.md
│ ├── ready-bananas-lose.md
│ ├── sharp-things-knock.md
│ └── slimy-cats-beg.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.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Select/Select.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./Select.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import {
dPlaceholder,
dInitialValue,
dAutoFocus,
dRequired,
dReadonly,
dEnabled,
dValidationStatus,
dDidChange,
dGotFocus,
dLostFocus,
dMulti,
dComponent,
createMetadata,
d,
} from "../metadata-helpers";
import { MemoizedItem } from "../container-helpers";
import { Select, defaultProps } from "./SelectNative";
const COMP = "Select";
export const SelectMd = createMetadata({
status: "stable",
description:
"`Select` provides a dropdown interface for choosing from a list of options, " +
"supporting both single and multiple selection modes. It offers extensive " +
"customization capabilities including search functionality, custom templates, " +
"and comprehensive form integration.",
props: {
placeholder: {
...dPlaceholder(),
defaultValue: defaultProps.placeholder,
},
initialValue: dInitialValue(),
value: {
description: "This property sets the current value of the component.",
isInternal: true, //TODO illesg temp
},
autoFocus: {
...dAutoFocus(),
defaultValue: defaultProps.autoFocus,
},
required: {
...dRequired(),
defaultValue: defaultProps.required,
},
readOnly: {
...dReadonly(),
defaultValue: defaultProps.readOnly,
},
enabled: {
...dEnabled(),
defaultValue: defaultProps.enabled,
},
validationStatus: {
...dValidationStatus(),
defaultValue: defaultProps.validationStatus,
},
optionLabelTemplate: dComponent(
`This property allows replacing the default template to display an option in the dropdown list.`,
),
optionTemplate: dComponent(
`This property allows replacing the default template to display an option in the dropdown list.`,
),
valueTemplate: dComponent(
`This property allows replacing the default template to display a selected value when ` +
`multiple selections (\`multiSelect\` is \`true\`) are enabled.`,
),
dropdownHeight: d(
"This property sets the height of the dropdown list. If not set, the height is determined automatically.",
),
emptyListTemplate: dComponent(
`This optional property provides the ability to customize what is displayed when the ` +
`list of options is empty.`,
),
multiSelect: {
...dMulti(),
defaultValue: defaultProps.multiSelect,
},
searchable: {
description: `This property enables the search functionality in the dropdown list.`,
defaultValue: defaultProps.searchable,
},
inProgress: {
description: `This property indicates whether the component is in progress. It can be used to show a loading message.`,
defaultValue: defaultProps.inProgress,
},
inProgressNotificationMessage: {
description: `This property indicates the message to display when the component is in progress.`,
defaultValue: defaultProps.inProgressNotificationMessage,
},
},
events: {
gotFocus: dGotFocus(COMP),
lostFocus: dLostFocus(COMP),
didChange: dDidChange(COMP),
},
apis: {
focus: {
description: `This method focuses the \`${COMP}\` component. You can use it to programmatically focus the component.`,
signature: "focus(): void",
},
setValue: {
description: `This API sets the value of the \`${COMP}\`. You can use it to programmatically change the value.`,
signature: "setValue(value: string | string[] | undefined): void",
parameters: {
value:
"The new value to set. Can be a single value or an array of values for multi-select.",
},
},
value: {
description: `This API retrieves the current value of the \`${COMP}\`. You can use it to get the value programmatically.`,
signature: "get value(): string | string[] | undefined",
},
reset: {
description: `This method resets the component to its initial value, or clears the selection if no initial value was provided.`,
signature: "reset(): void",
},
},
contextVars: {
$item: d("Represents the current option's data (label and value properties)"),
$itemContext: d("Provides utility methods like `removeItem()` for multi-select scenarios"),
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
[`boxShadow-menu-${COMP}`]: "$boxShadow-md",
[`borderRadius-menu-${COMP}`]: "$borderRadius",
[`borderWidth-menu-${COMP}`]: "1px",
[`borderColor-menu-${COMP}`]: "$borderColor",
[`backgroundColor-${COMP}-badge`]: "$color-primary-500",
[`fontSize-${COMP}-badge`]: "$fontSize-sm",
[`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
[`paddingVertical-${COMP}-badge`]: "$space-0_5",
[`borderRadius-${COMP}-badge`]: "$borderRadius",
[`paddingHorizontal-item-${COMP}`]: "$space-2",
[`paddingVertical-item-${COMP}`]: "$space-2",
[`paddingHorizontal-${COMP}`]: "$space-2",
[`paddingVertical-${COMP}`]: "$space-2",
[`opacity-text-item-${COMP}--disabled`]: "0.5",
[`opacity-${COMP}--disabled`]: "0.5",
[`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
[`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
[`textColor-item-${COMP}--disabled`]: "$color-surface-200",
[`textColor-${COMP}-badge`]: "$const-color-surface-50",
[`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
[`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
[`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
// Default borderColor-Input--disabled is too light so the disabled component is barely visible
[`borderColor-${COMP}--disabled`]: "initial",
},
});
export const selectComponentRenderer = createComponentRenderer(
COMP,
SelectMd,
({
node,
state,
updateState,
extractValue,
renderChild,
lookupEventHandler,
className,
registerComponentApi,
}) => {
const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
const searchable = extractValue.asOptionalBoolean(node.props.searchable);
const isControlled = node.props.value !== undefined;
return (
<Select
multiSelect={multiSelect}
className={className}
inProgress={extractValue.asOptionalBoolean(node.props.inProgress)}
inProgressNotificationMessage={extractValue.asOptionalString(
node.props.inProgressNotificationMessage,
)}
readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
updateState={isControlled ? undefined : updateState}
searchable={searchable}
initialValue={extractValue(node.props.initialValue)}
value={isControlled ? extractValue(node.props.value) : state?.value}
autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
enabled={extractValue.asOptionalBoolean(node.props.enabled)}
placeholder={extractValue.asOptionalString(node.props.placeholder)}
validationStatus={extractValue(node.props.validationStatus)}
onDidChange={lookupEventHandler("didChange")}
onFocus={lookupEventHandler("gotFocus")}
onBlur={lookupEventHandler("lostFocus")}
registerComponentApi={registerComponentApi}
emptyListTemplate={renderChild(node.props.emptyListTemplate)}
dropdownHeight={extractValue(node.props.dropdownHeight)}
required={extractValue.asOptionalBoolean(node.props.required)}
valueRenderer={
node.props.valueTemplate
? (item, removeItem) => {
return (
<MemoizedItem
contextVars={{
$itemContext: { removeItem },
}}
node={node.props.valueTemplate}
item={item}
renderChild={renderChild}
/>
);
}
: undefined
}
optionRenderer={
node.props.optionTemplate
? (item, val, inTrigger) => {
return (
<MemoizedItem
node={node.props.optionTemplate}
item={item}
contextVars={{
$selectedValue: val,
$inTrigger: inTrigger,
}}
renderChild={renderChild}
/>
);
}
: undefined
}
>
{renderChild(node.children)}
</Select>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/SplitterNative.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { useEffect, useState, useMemo } from "react";
import classnames from "classnames";
import styles from "./Splitter.module.scss";
import { noop } from "../../components-core/constants";
import { parseSize, toPercentage } from "../Splitter/utils";
import type { OrientationOptions } from "../abstractions";
export const defaultProps = {
initialPrimarySize: "50%",
minPrimarySize: "0%",
maxPrimarySize: "100%",
orientation: "vertical" as OrientationOptions,
swapped: false,
floating: false,
};
type SplitterProps = {
children: React.ReactNode[] | React.ReactNode;
style?: React.CSSProperties;
className?: string;
splitterTemplate?: React.ReactNode;
orientation?: OrientationOptions;
floating?: boolean;
resize?: (sizes: [number, number]) => void;
swapped?: boolean;
initialPrimarySize?: string;
minPrimarySize?: string;
maxPrimarySize?: string;
visibleChildCount?: number;
};
export const Splitter = ({
initialPrimarySize = defaultProps.initialPrimarySize,
minPrimarySize = defaultProps.minPrimarySize,
maxPrimarySize = defaultProps.maxPrimarySize,
orientation = defaultProps.orientation,
children,
style,
className,
swapped = defaultProps.swapped,
floating = defaultProps.floating,
splitterTemplate,
resize = noop,
visibleChildCount,
...rest
}: SplitterProps) => {
const [sizePercentage, setSizePercentage] = useState(50);
const [containerSize, setContainerSize] = useState(100);
const [splitter, setSplitter] = useState<HTMLDivElement | null>(null);
const [resizerVisible, setResizerVisible] = useState(false);
const [resizer, setResizer] = useState<HTMLDivElement | null>(null);
const [floatingResizer, setFloatingResizer] = useState<HTMLDivElement | null>(null);
const resizerElement = useMemo(
() => (floating ? floatingResizer : resizer),
[floating, resizer, floatingResizer],
);
// Calculate actual size in pixels from percentage
const size = useMemo(() => {
return (sizePercentage / 100) * containerSize;
}, [sizePercentage, containerSize]);
// Since the XMLUI renderer now pre-filters children, we can use them directly
const childrenArray = React.Children.toArray(children);
const actualChildCount = childrenArray.length;
const effectiveChildCount = visibleChildCount ?? actualChildCount;
const isMultiPanel = effectiveChildCount > 1;
// ResizeObserver to track container size changes
useEffect(() => {
if (!splitter) return;
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const newContainerSize =
orientation === "horizontal"
? entry.contentRect.width
: entry.contentRect.height;
setContainerSize(newContainerSize);
}
});
resizeObserver.observe(splitter);
return () => {
resizeObserver.disconnect();
};
}, [splitter, orientation]);
// Initialize container size and primary panel percentage
useEffect(() => {
if (splitter) {
const newContainerSize =
orientation === "horizontal"
? splitter.getBoundingClientRect().width
: splitter.getBoundingClientRect().height;
setContainerSize(newContainerSize);
// Parse initial size and convert to percentage
const initialParsedSize = parseSize(initialPrimarySize, newContainerSize);
const initialPercentage = toPercentage(initialParsedSize, newContainerSize);
setSizePercentage(initialPercentage);
if (resize) {
const actualPrimarySize = (initialPercentage / 100) * newContainerSize;
resize([actualPrimarySize, newContainerSize - actualPrimarySize]);
}
}
}, [initialPrimarySize, orientation, resize, splitter, swapped]);
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
if (splitter && resizerElement && containerSize > 0) {
const newSize =
orientation === "horizontal"
? Math.min(
Math.max(
event.clientX - splitter.getBoundingClientRect().left,
parseSize(minPrimarySize, containerSize),
),
parseSize(maxPrimarySize, containerSize),
)
: Math.min(
Math.max(
event.clientY - splitter.getBoundingClientRect().top,
parseSize(minPrimarySize, containerSize),
),
parseSize(maxPrimarySize, containerSize),
);
const newPercentage = toPercentage(newSize, containerSize);
setSizePercentage(newPercentage);
if (resize) {
resize([
newPercentage,
100 - newPercentage,
]);
}
}
};
const handleMouseUp = () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
const handleMouseDown = () => {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
};
if (resizerElement) {
resizerElement.addEventListener("mousedown", handleMouseDown);
}
return () => {
if (resizerElement) {
resizerElement.removeEventListener("mousedown", handleMouseDown);
}
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter, containerSize]);
useEffect(() => {
const watchResizer = (event: MouseEvent) => {
const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
if (splitter) {
const paneStart =
orientation === "horizontal"
? splitter.getBoundingClientRect().left
: splitter.getBoundingClientRect().top;
const resizerPosition = paneStart + size;
// Check if the cursor is near the resizer (within 20 pixels)
if (cursorPosition > resizerPosition - 20 && cursorPosition < resizerPosition + 20) {
setResizerVisible(true);
} else {
setResizerVisible(false);
}
}
};
if (splitter) {
splitter.addEventListener("mousemove", watchResizer);
splitter.addEventListener("mouseleave", () => setResizerVisible(false));
}
return () => {
if (splitter) {
splitter.removeEventListener("mouseleave", () => setResizerVisible(false));
splitter.removeEventListener("mousemove", watchResizer);
}
};
}, [size, orientation, splitter]);
useEffect(() => {
if (floatingResizer) {
floatingResizer.style.opacity = resizerVisible ? "1" : "0";
}
}, [floatingResizer, resizerVisible]);
return (
<div
{...rest}
ref={(s) => setSplitter(s)}
className={classnames(
styles.splitter,
{
[styles.horizontal]: orientation === "horizontal",
[styles.vertical]: orientation === "vertical",
},
className,
)}
style={style}
>
{isMultiPanel ? (
<>
<div
style={!swapped ? { flexBasis: size } : {}}
className={classnames({
[styles.primaryPanel]: !swapped,
[styles.secondaryPanel]: swapped,
})}
>
{childrenArray[0]}
</div>
{!floating && (
<div
className={classnames(styles.resizer, {
[styles.horizontal]: orientation === "horizontal",
[styles.vertical]: orientation === "vertical",
})}
ref={(r) => setResizer(r)}
>
{splitterTemplate}
</div>
)}
<div
className={classnames({
[styles.primaryPanel]: swapped,
[styles.secondaryPanel]: !swapped,
})}
style={swapped ? { flexBasis: size } : {}}
>
{childrenArray[1]}
</div>
{floating && (
<div
ref={(fr) => setFloatingResizer(fr)}
className={classnames(styles.floatingResizer, {
[styles.horizontal]: orientation === "horizontal",
[styles.vertical]: orientation === "vertical",
})}
style={{
top: orientation === "horizontal" ? 0 : size,
left: orientation === "horizontal" ? size : 0,
}}
>
{splitterTemplate}
</div>
)}
</>
) : (
<>
{childrenArray?.[0] && (
<div className={styles.panel}>{childrenArray[0]}</div>
)}
</>
)}
</div>
);
};
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/DocsGenerator.mjs:
--------------------------------------------------------------------------------
```
import { basename, extname, join } from "path";
import { existsSync, writeFileSync } from "fs";
import { unlink, readFile, writeFile, readdir, mkdir } from "fs/promises";
import { logger, LOGGER_LEVELS, processError } from "./logger.mjs";
import { MetadataProcessor } from "./MetadataProcessor.mjs";
import { getSectionBeforeAndAfter, strBufferToLines, toHeadingPath } from "./utils.mjs";
import { buildPagesMap } from "./build-pages-map.mjs";
import { buildDownloadsMap } from "./build-downloads-map.mjs";
import { FOLDERS } from "./folders.mjs";
import {
FILE_EXTENSIONS,
OUTPUT_FILES,
ERROR_MESSAGES,
METADATA_SECTIONS
} from "./constants.mjs";
logger.setLevels(LOGGER_LEVELS.warning, LOGGER_LEVELS.error);
export class DocsGenerator {
metadata = [];
folders = {
sourceFolder: FOLDERS.pages,
outFolder: FOLDERS.pages,
examplesFolder: FOLDERS.pages,
};
constructor(metadata, folders, { excludeComponentStatuses }) {
this.metadata = metadata;
this.folders = folders;
this.expandMetadata(excludeComponentStatuses);
}
/**
* Filters provided metadata, then adds further information possibly missing.
* @param {string[]} excludeComponentStatuses The status of the component to exclude, e.g. 'in progress' can be excluded
*/
expandMetadata(excludeComponentStatuses) {
logger.info("Transforming & expanding component metadata");
this.metadata = Object.entries(this.metadata)
.filter(([_, compData]) => {
return !excludeComponentStatuses.includes(compData.status?.toLowerCase());
})
.map(([compName, compData]) => {
const displayName = compName;
let componentFolder = "";
if (compData.specializedFrom) {
const parentName = Object.keys(this.metadata).find((name) => name === compData.specializedFrom);
if (parentName) {
componentFolder = this.metadata[parentName].docFolder || compData.specializedFrom;
}
} else {
componentFolder = compData.docFolder || compName;
}
const descriptionRef = join(componentFolder, `${displayName}.md`);
const extendedComponentData = {
...compData,
displayName,
description: compData.description,
descriptionRef,
folderPath: componentFolder,
};
const entries = addDescriptionRef(extendedComponentData, [
METADATA_SECTIONS.PROPS,
METADATA_SECTIONS.EVENTS,
METADATA_SECTIONS.API,
METADATA_SECTIONS.CONTEXT_VARS,
]);
return { ...extendedComponentData, ...entries };
});
}
generateDocs() {
logger.info("Processing MDX files");
const metaProcessor = new MetadataProcessor(this.metadata, "", this.folders);
return metaProcessor.processDocfiles();
}
/**
* Writes the meta file summary to the output folder
* @param {Record<string,string>} metaFileContents The meta file contents
* @param {string} outputFolder The output folder
*/
writeMetaSummary(metaFileContents, outputFolder) {
try {
writeFileSync(join(outputFolder, FILE_EXTENSIONS.METADATA), JSON.stringify(metaFileContents, null, 2));
} catch (e) {
logger.error(ERROR_MESSAGES.WRITE_META_FILE_ERROR, e?.message || ERROR_MESSAGES.UNKNOWN_ERROR);
}
}
async exportMetadataToJson(folderName, filename) {
logger.info("Exporting metadata to JSON");
try {
const outPath = join(FOLDERS.script, "metadata", folderName ?? "");
if (!existsSync(outPath)) {
await mkdir(outPath, { recursive: true });
}
await writeFile(
join(outPath, `${filename ? `${filename}-` : ""}${OUTPUT_FILES.METADATA_JSON}`),
JSON.stringify(this.metadata, null, 2),
);
} catch (error) {
processError(error);
}
}
/**
* Creates the metadata JSON for the landing page to link components to the documentation.
* @param {string} docsUrl docs site base URL
* @param {string} pathToEndpoint the path that leads to the component articles on the site
*/
async createMetadataJsonForLanding(docsUrl, pathToEndpoint) {
logger.info("Creating metadata JSON for landing page");
try {
const dataForLanding = this.metadata.map((component) => ({
displayName: component.displayName,
description: component.description,
docFileLink: new URL(`${pathToEndpoint}/${component.displayName}`, docsUrl).href,
}));
const distMetaFolder = join(FOLDERS.xmluiDist, "metadata");
if (!existsSync(distMetaFolder)) {
await mkdir(distMetaFolder, { recursive: true });
}
await writeFile(
join(distMetaFolder, OUTPUT_FILES.LANDING_METADATA_JSON),
JSON.stringify(dataForLanding, null, 2),
);
} catch (error) {
processError(error);
}
}
/**
* Generates the package description section in a specified file for a given Extension package.
* @param {string} packageDescription The data to add to the file
* @param {string} sectionHeading Name & level of the section to (re)generate
* @param {string} fileName The name and absolute path of the file to write to
*/
async generatePackageDescription(packageDescription, sectionHeading, fileName) {
logger.info("Creating package description section in specified file");
try {
const outFile = fileName || join(FOLDERS.pages, `${basename(this.folders.sourceFolder)}.md`);
if (!existsSync(outFile)) {
await writeFile(outFile, "");
}
let buffer = await readFile(outFile, "utf8");
const { beforeSection, afterSection } = getSectionBeforeAndAfter(buffer, sectionHeading);
const section =
beforeSection + "\n" + sectionHeading + "\n\n" + packageDescription + afterSection;
await writeFile(outFile, section.trim());
} catch (error) {
processError(error);
}
}
async generatePermalinksForHeaders() {
logger.info("Generating permalinks for file headings");
const docFiles = existsSync(this.folders.outFolder)
? (await readdir(this.folders.outFolder)).filter((file) => extname(file) === FILE_EXTENSIONS.MARKDOWN[0])
: [];
for (const file of docFiles) {
const filePath = join(this.folders.outFolder, file);
if (!existsSync(filePath)) {
throw new ErrorWithSeverity(`File ${file} does not exist.`, LOGGER_LEVELS.error);
}
await generatePermalinks(filePath);
}
}
async generateArticleAndDownloadsLinks() {
try {
const pagesMapFile = join(FOLDERS.docsMeta, OUTPUT_FILES.PAGES_MAP);
if (existsSync(pagesMapFile)) {
await unlink(pagesMapFile);
await writeFile(pagesMapFile, "");
}
logger.info("Generating link IDs for article headings");
buildPagesMap(FOLDERS.pages, pagesMapFile);
const downloadsMapFile = join(FOLDERS.docsMeta, OUTPUT_FILES.DOWNLOADS_MAP);
if (existsSync(downloadsMapFile)) {
await unlink(downloadsMapFile);
await writeFile(downloadsMapFile, "");
}
logger.info("Generating link IDs for downloadable files");
buildDownloadsMap(join(FOLDERS.docsRoot, "public", "resources", "files"), downloadsMapFile);
} catch (error) {
processError(error);
}
}
}
function addDescriptionRef(component, entries = []) {
const result = {};
if (component) {
entries.forEach((entry) => {
if (component[entry]) {
result[entry] = Object.fromEntries(
Object.entries(component[entry]).map(([k, v]) => {
v.descriptionRef = `${component.displayName}.md?${k}`;
return [k, v];
}),
);
}
});
}
return result;
}
/**
* Get the ID and path of the article heading.
* @param {string} articlePath The path of the article.
*/
async function generatePermalinks(articlePath) {
try {
const content = await readFile(articlePath, { encoding: "utf8" });
const lines = strBufferToLines(content);
const newContent = appendHeadingIds(lines);
await writeFile(articlePath, newContent, { encoding: "utf8" });
} catch (error) {
processError(error);
}
// ---
function appendHeadingIds(lines) {
let newLines = [];
for (const line of lines) {
// Match Headings
const match = line.match(/^#{1,6}\s+.+?\s*(\[#[\w-]+\])?$/);
if (match && typeof match[1] === "undefined") {
newLines.push(
`${line} [#${toHeadingPath(stripApostrophies(stripParentheses(stripBackticks(match[0]))))}]`,
);
continue;
}
// Rest
newLines.push(line);
}
return newLines.join("\n");
}
function stripBackticks(str) {
return str.replace(/`/g, "");
}
function stripParentheses(str) {
return str.replace(/\(|\)/g, "");
}
function stripApostrophies(str) {
return str.replace(/"|'/g, "");
}
}
```
--------------------------------------------------------------------------------
/docs/content/components/FileInput.md:
--------------------------------------------------------------------------------
```markdown
# FileInput [#fileinput]
`FileInput` enables users to select files from their device's file system for upload or processing. It combines a text field displaying selected files with a customizable button that opens the system file browser. Use it for forms, media uploads, and document processing workflows.
**Key features:**
- **File type filtering**: Restrict selection to specific file types using `acceptsFileType`
- **Multiple file selection**: Enable users to select multiple files simultaneously
- **Directory selection**: Allow folder selection instead of individual files
- **Customizable button**: Configure button text, icons, position, and styling to match your design
## Properties [#properties]
### `acceptsFileType` [#acceptsfiletype]
An optional list of file types the input controls accepts provided as a string array.
```xmlui-pg copy display name="Example: acceptsFileType"
<App>
<FileInput acceptsFileType="{['.txt', '.jpg']}" />
</App>
```
### `autoFocus` (default: false) [#autofocus-default-false]
If this property is set to `true`, the component gets the focus automatically when displayed.
### `buttonIcon` [#buttonicon]
The ID of the icon to display in the button. You can change the default icon for all FileInput instances with the "icon.browse:FileInput" declaration in the app configuration file.
```xmlui-pg copy display name="Example: buttonIcon"
<App>
<FileInput buttonIcon="drive" buttonLabel="Let there be drive" />
<FileInput buttonIcon="drive" />
</App>
```
### `buttonIconPosition` (default: "start") [#buttoniconposition-default-start]
This optional string determines the location of the button icon.
Available values: `start` **(default)**, `end`
```xmlui-pg copy display name="Example: buttonIconPosition"
<App>
<FileInput buttonIcon="drive" buttonLabel="End" buttonIconPosition="end" />
</App>
```
### `buttonLabel` [#buttonlabel]
This property is an optional string to set a label for the button part.
This property is an optional string to set a label for the button part.
```xmlui-pg copy display name="Example: label"
<App >
<FileInput />
<FileInput buttonLabel="I am the button label" />
</App>
```
### `buttonPosition` (default: "end") [#buttonposition-default-end]
This property determines the position of the button relative to the input field.
Available values: `start`, `end` **(default)**
### `buttonSize` [#buttonsize]
The size of the button (small, medium, large)
Available values:
| Value | Description |
| --- | --- |
| `xs` | Extra small |
| `sm` | Small |
| `md` | Medium |
| `lg` | Large |
| `xl` | Extra large |
```xmlui-pg copy display name="Example: buttonSize"
<App>
<FileInput buttonSize="lg" />
</App>
```
### `buttonThemeColor` (default: "primary") [#buttonthemecolor-default-primary]
The button color scheme (primary, secondary, attention)
Available values: `attention`, `primary` **(default)**, `secondary`
```xmlui-pg copy display name="Example: buttonThemeColor"
<App>
<FileInput buttonThemeColor="secondary" />
</App>
```
### `buttonVariant` [#buttonvariant]
The button variant to use
Available values: `solid`, `outlined`, `ghost`
```xmlui-pg copy display name="Example: buttonVariant"
<App>
<FileInput buttonLabel="outlined" buttonVariant="outlined" />
</App>
```
### `directory` (default: false) [#directory-default-false]
This boolean property indicates whether the component allows selecting directories (`true`) or files only (`false`).
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
### `initialValue` [#initialvalue]
This property sets the component's initial value.
### `multiple` (default: false) [#multiple-default-false]
This boolean property enables to add not just one (`false`), but multiple files to the field (`true`). This is done either by dragging onto the field or by selecting multiple files in the browser menu after clicking the input field button.
```xmlui-pg copy display name="Example: multiple"
<App>
<FileInput multiple="false" />
<FileInput multiple="true" />
</App>
```
### `placeholder` [#placeholder]
An optional placeholder text that is visible in the input field when its empty.
### `readOnly` (default: false) [#readonly-default-false]
Set this property to `true` to disallow changing the component value.
### `required` (default: false) [#required-default-false]
Set this property to `true` to indicate it must have a value before submitting the containing form.
### `validationStatus` (default: "none") [#validationstatus-default-none]
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
| --- | --- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |
## Events [#events]
### `didChange` [#didchange]
This event is triggered when value of FileInput has changed.
Write in the input field and see how the `Text` underneath it is updated in accordingly.
```xmlui-pg copy {2} display name="Example: didChange"
<App var.field="">
<FileInput onDidChange="(file) => field = file[0]?.name" />
<Text value="{field}" />
</App>
```
### `gotFocus` [#gotfocus]
This event is triggered when the FileInput has received the focus.
Clicking on the `FileInput` in the example demo changes the label text.
Note how clicking elsewhere resets the text to the original.
```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
<App>
<FileInput
buttonLabel="{focused === true ? 'I got focused!' : 'I lost focus...'}"
onGotFocus="focused = true"
onLostFocus="focused = false"
var.focused="{false}"
/>
</App>
```
### `lostFocus` [#lostfocus]
This event is triggered when the FileInput has lost the focus.
(See the example above)
## Exposed Methods [#exposed-methods]
### `focus` [#focus]
This API command focuses the input field of the component.
**Signature**: `focus(): void`
```xmlui-pg copy /fileInputComponent.focus()/ display name="Example: focus"
<App>
<HStack>
<Button label="Focus FileInput" onClick="fileInputComponent.focus()" />
<FileInput id="fileInputComponent" />
</HStack>
</App>
```
### `open` [#open]
This API command triggers the file browsing dialog to open.
**Signature**: `open(): void`
```xmlui-pg copy /fileInputComponent.open()/ display name="Example: open"
<App>
<HStack>
<Button label="Open FileInput" onClick="fileInputComponent.open()" />
<FileInput id="fileInputComponent" />
</HStack>
</App>
```
### `setValue` [#setvalue]
This method sets the current value of the component.
**Signature**: `setValue(files: File[]): void`
- `files`: An array of File objects to set as the current value of the component.
(**NOT IMPLEMENTED YET**) You can use this method to set the component's current value programmatically.
### `value` [#value]
This property holds the current value of the component, which is an array of files.
**Signature**: `get value(): File[]`
In the example below, select a file using the file browser of the `FileInput` component
and note how the `Text` component displays the selected file's name:
```xmlui-pg copy {3-4} display name="Example: value"
<App>
<HStack>
<Text value="Selected file name: {fileInputComponent.value}" />
<FileInput id="fileInputComponent" />
</HStack>
</App>
```
## Styling [#styling]
The `FileInput` component does not theme variables directly.
However, it uses the [`Button`](/components/Button) and [`TextBox`](/components/TextBox) components under the hood.
Thus, modifying the styles of both of these components affects the `FileInput`.
See [Button styling](/components/Button#styling) and [TextBox styling](/components/TextBox#styling).
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-FileInput--focus | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-FileInput--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-FileInput--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-FileInput--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-FileInput--focus | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
```
--------------------------------------------------------------------------------
/docs/content/components/AppHeader.md:
--------------------------------------------------------------------------------
```markdown
# AppHeader [#appheader]
`AppHeader` defines the top navigation bar of your application within the [`App`](/components/App) component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior.
**Key features:**
- **Logo customization**: Use `logoTemplate` to create rich logo designs beyond simple images
- **Profile menu**: Add user authentication displays, settings menus, or action buttons via `profileMenuTemplate`
- **Layout integration**: Automatically positioned and styled based on your App's `layout` property
## Properties [#properties]
### `logoTemplate` [#logotemplate]
This property defines the template to use for the logo. With this property, you can construct your custom logo instead of using a single image.
This property defines the template to use for the logo.
With this property, you can construct your custom logo instead of using a single image.
```xmlui-pg copy display {3-8} name="Example: logoTemplate" height="170px"
<App>
<AppHeader>
<property name="logoTemplate">
<H3>
<Icon name="drive" />
DriveDiag
</H3>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<Text value="Home" />
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
</Pages>
</App>
```
### `profileMenuTemplate` [#profilemenutemplate]
This property makes the profile menu slot of the `AppHeader` component customizable.
This property makes the profile menu slot of the `AppHeader` component customizable.
It accepts component definitions.
```xmlui-pg copy display {3-9} name="Example: profileMenuTemplate" height="150px"
<App>
<AppHeader>
<property name="profileMenuTemplate">
<DropdownMenu>
<property name="triggerTemplate">
<Avatar name="Joe" size="xs" borderRadius="50%"/>
</property>
</DropdownMenu>
</property>
</AppHeader>
</App>
```
### `showLogo` (default: true) [#showlogo-default-true]
Show the logo in the header
### `title` [#title]
Title for the application logo
### `titleTemplate` [#titletemplate]
This property defines the template to use for the title. With this property, you can construct your custom title instead of using a single image.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [alignment](../styles-and-themes/common-units/#alignment)-content-AppHeader | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-AppHeader | $color-surface-raised | $color-surface-raised |
| [border](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [borderBottom](../styles-and-themes/common-units/#border)-AppHeader | 1px solid $borderColor | 1px solid $borderColor |
| [borderBottomColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | 0px | 0px |
| [borderRight](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
| [height](../styles-and-themes/common-units/#size)-AppHeader | $space-14 | $space-14 |
| [maxWidth](../styles-and-themes/common-units/#size)-AppHeader | $maxWidth-App | $maxWidth-App |
| [maxWidth-content](../styles-and-themes/common-units/#size)-AppHeader | $maxWidth-content-App | $maxWidth-content-App |
| [padding](../styles-and-themes/common-units/#size)-AppHeader | $paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader | $paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader |
| [padding](../styles-and-themes/common-units/#size)-drawerToggle-AppHeader | $space-0_5 | $space-0_5 |
| [padding](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingTop-logo-AppHeader $paddingRight-logo-AppHeader $paddingBottom-logo-AppHeader $paddingLeft-logo-AppHeader | $paddingTop-logo-AppHeader $paddingRight-logo-AppHeader $paddingBottom-logo-AppHeader $paddingLeft-logo-AppHeader |
| [paddingBottom](../styles-and-themes/common-units/#size)-AppHeader | $paddingVertical-AppHeader | $paddingVertical-AppHeader |
| [paddingBottom](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingVertical-logo-AppHeader | $paddingVertical-logo-AppHeader |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-AppHeader | $space-4 | $space-4 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-logo-AppHeader | $space-0 | $space-0 |
| [paddingLeft](../styles-and-themes/common-units/#size)-AppHeader | $paddingHorizontal-AppHeader | $paddingHorizontal-AppHeader |
| [paddingLeft](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingHorizontal-logo-AppHeader | $paddingHorizontal-logo-AppHeader |
| [paddingRight](../styles-and-themes/common-units/#size)-AppHeader | $paddingHorizontal-AppHeader | $paddingHorizontal-AppHeader |
| [paddingRight](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingHorizontal-logo-AppHeader | $paddingHorizontal-logo-AppHeader |
| [paddingTop](../styles-and-themes/common-units/#size)-AppHeader | $paddingVertical-AppHeader | $paddingVertical-AppHeader |
| [paddingTop](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingVertical-logo-AppHeader | $paddingVertical-logo-AppHeader |
| [paddingVertical](../styles-and-themes/common-units/#size)-AppHeader | $space-0 | $space-0 |
| [paddingVertical](../styles-and-themes/common-units/#size)-logo-AppHeader | $space-0 | $space-0 |
| [width](../styles-and-themes/common-units/#size)-logo-AppHeader | *none* | *none* |
### Variable Explanations [#variable-explanations]
| Theme Variable | Description |
| --- | --- |
| **`padding‑logo‑AppHeader`** | This theme variable sets the padding of the logo in the app header (including all `padding` variants, such as `paddingLeft-logo-AppHeader` and others). |
| **`width‑logo‑AppHeader`** | Sets the width of the displayed logo |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/PartialInput.tsx:
--------------------------------------------------------------------------------
```typescript
import { useCallback, useMemo } from "react";
import classnames from "classnames";
import styles from "./PartialInput.module.scss";
/**
* Direction indicator for blur events to help parent components understand
* the user's navigation intent.
*/
export type BlurDirection = "next" | "previous" | "external";
/**
* Props for PartialInput component.
* This component encapsulates common input behavior for multi-field input components,
* including auto-advance, arrow key navigation support, and enhanced blur handling.
*/
export interface PartialInputProps {
// Core functionality (varies by context)
value?: string | null;
/** Explicit placeholder override. If not provided, will be generated from emptyCharacter */
placeholder?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (direction: BlurDirection, event: React.FocusEvent<HTMLInputElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => void;
// EmptyCharacter support
/** Character to use for generating placeholders. Defaults to "-" if not provided */
emptyCharacter?: string;
/** Number of characters to repeat for placeholder. Defaults to 2 */
placeholderLength?: number;
// Validation & constraints (context-dependent)
max: number;
min: number;
maxLength?: number; // PartialInput derives auto-advance logic from this
validateFn?: (value: string) => boolean;
onBeep?: () => void;
// Navigation (context-dependent)
nextInputRef?: React.RefObject<HTMLInputElement | null>;
nextButtonRef?: React.RefObject<HTMLButtonElement | null>;
// Identification & accessibility (varies)
id?: string;
name: string;
ariaLabel?: string;
className?: string;
invalidClassName?: string;
// Standard props (can vary per input)
disabled?: boolean;
readOnly?: boolean;
required?: boolean;
autoFocus?: boolean;
inputRef?: React.RefObject<HTMLInputElement | null>;
// Optional overrides (with sensible defaults)
step?: number; // Default: 1
isInvalid?: boolean; // Default: false (prevents auto-advance when true)
}
/**
* PartialInput is a specialized input component designed for multi-field input scenarios.
*
* Key features:
* - Auto-advance: Automatically moves to the next input when max length is reached
* - Enhanced blur detection: Provides direction information (next/previous/external)
* - Consistent styling: Common base styles with component-specific overrides via className
* - Accessibility: Proper ARIA labels and keyboard navigation support
* - Validation integration: Works with validation functions and provides feedback
*
* This component encapsulates common patterns found in multi-field input components,
* reducing code duplication and ensuring consistent behavior.
*
* @param props - PartialInputProps configuration
* @returns A configured input element with enhanced multi-field input behavior
*/
export function PartialInput({
value,
placeholder,
onChange,
onBlur,
onKeyDown,
emptyCharacter,
placeholderLength = 2,
max,
min,
maxLength = 2,
validateFn,
onBeep,
nextInputRef,
nextButtonRef,
id,
name,
ariaLabel,
className,
invalidClassName,
disabled,
readOnly,
required,
autoFocus,
inputRef,
step = 1,
isInvalid = false,
...restProps
}: PartialInputProps) {
/**
* Process emptyCharacter according to requirements.
* Handles null/empty values, multi-character strings, and unicode characters.
*/
const processedEmptyCharacter = useMemo(() => {
if (!emptyCharacter || emptyCharacter.length === 0) {
return "-";
}
if (emptyCharacter.length > 1) {
// Use unicode-aware character extraction
const firstChar = [...emptyCharacter][0];
return firstChar;
}
return emptyCharacter;
}, [emptyCharacter]);
/**
* Generate final placeholder value.
* Uses explicit placeholder if provided, otherwise generates from emptyCharacter.
*/
const finalPlaceholder = useMemo(() => {
if (placeholder !== undefined) {
return placeholder; // Explicit override takes precedence
}
return processedEmptyCharacter.repeat(placeholderLength);
}, [placeholder, processedEmptyCharacter, placeholderLength]);
/**
* Internal focus handler that automatically selects all text for easier editing.
* This is a common UX pattern for numeric inputs in multi-field components.
*/
const handleInternalFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
// Select all text when gaining focus for easier editing
event.target.select();
}, []);
/**
* Enhanced input change handler with automatic advance logic.
* When the user types the maximum number of characters and the input is valid,
* automatically moves focus to the next input or button.
*/
const handleInputChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value;
// Call the original onChange handler
if (onChange) {
onChange(event);
}
// Auto-advance logic: move to next input when reaching maxLength with valid numeric input
if (newValue.length === maxLength && /^\d+$/.test(newValue) && !isInvalid) {
// Check if the new value is valid before auto-tabbing
const isValueInvalid = validateFn ? validateFn(newValue) : false;
if (!isValueInvalid) {
// Small delay to ensure the current input is properly updated
setTimeout(() => {
if (nextInputRef?.current) {
// Tab to next input field
nextInputRef.current.focus();
nextInputRef.current.select();
} else if (nextButtonRef?.current) {
// Tab to next button (e.g., action button)
nextButtonRef.current.focus();
}
}, 0);
} else {
// Input is ready for auto-tab but invalid - play beep sound and fire event
onBeep?.();
}
}
},
[onChange, nextInputRef, nextButtonRef, maxLength, validateFn, onBeep, isInvalid],
);
/**
* Enhanced blur handler that detects the direction of navigation.
* This helps parent components understand whether the user is moving forward,
* backward, or clicking outside the component entirely.
*/
const handleBlur = useCallback(
(event: React.FocusEvent<HTMLInputElement>) => {
const relatedTarget = event.relatedTarget as HTMLElement;
let direction: BlurDirection = "external";
// Determine direction based on related target
if (relatedTarget) {
// Check if moving to next input
if (nextInputRef?.current === relatedTarget) {
direction = "next";
}
// Check if moving to next button
else if (nextButtonRef?.current === relatedTarget) {
direction = "next";
}
// Check if moving from a navigation event (could be previous)
// Note: This is a simplified heuristic. In practice, we might need more sophisticated detection
else if (relatedTarget.getAttribute("data-input") === "true") {
// If it's another input, we assume it could be previous navigation
// The parent component can provide more context if needed
direction = "previous";
}
}
// Call the enhanced onBlur handler with direction
onBlur?.(direction, event);
},
[onBlur, nextInputRef, nextButtonRef],
);
/**
* Enhanced key down handler that prevents space character input.
* Filters out space key presses while allowing other keys to pass through.
*/
const handleKeyDown = useCallback(
(event: React.KeyboardEvent<HTMLInputElement>) => {
// Prevent space character input
if (event.key === " " || event.code === "Space") {
event.preventDefault();
return;
}
// Call the original onKeyDown handler for other keys
onKeyDown?.(event as React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement });
},
[onKeyDown],
);
return (
<input
{...restProps}
id={id}
aria-label={ariaLabel}
autoComplete="off"
// biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
autoFocus={autoFocus}
className={classnames(styles.partialInput, className, {
[invalidClassName]: isInvalid,
})}
data-input="true"
disabled={disabled}
inputMode="numeric"
max={max}
maxLength={maxLength}
min={min}
name={name}
onChange={handleInputChange}
onBlur={handleBlur}
onFocus={handleInternalFocus}
onKeyDown={handleKeyDown}
placeholder={finalPlaceholder}
readOnly={readOnly}
ref={inputRef as React.RefObject<HTMLInputElement>}
required={required}
step={step}
type="text"
value={value !== null ? value : ""}
/>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/syntax/monaco/grammar.monacoLanguage.ts:
--------------------------------------------------------------------------------
```typescript
export const XmluiGrammar: any = {
id: "xmlui",
config: {
comments: {
blockComment: ["<!--", "-->"],
},
brackets: [["<", ">"]],
autoClosingPairs: [
{ open: "<", close: ">" },
{ open: "'", close: "'" },
{ open: '"', close: '"' },
{ open: "`", close: "`" },
],
surroundingPairs: [
{ open: "<", close: ">" },
{ open: "'", close: "'" },
{ open: '"', close: '"' },
{ open: "`", close: "`" },
],
},
language: {
defaultToken: "",
tokenPostfix: ".xmlui",
ignoreCase: false,
identifier: /[a-zA-Z$_][-\w.$]*/,
tokenizer: {
root: [
{ include: "@commentStart" },
{ include: "@helperTag" },
{ include: "@componentTagStart" },
{ include: "@escapeCharacter" },
{ include: "@textWithBindingExpr" },
{ include: "@entity" },
{ include: "@cdataStart" },
],
helperTag: [
{ include: "@scriptTagStart" },
{ include: "@eventTagStart" },
{ include: "@apiTagStart" },
{ include: "@methodTagStart" },
{ include: "@propOrVarTagStart" },
],
eventTagStart: [
[
/(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(event)/,
["delimiter.angle", "namespace", { token: "tag-event", next: "@eventTag" }],
],
],
eventTag: [
{ include: "@commentStart" },
{ include: "@valueAttributeScriptInsideStart" },
{ include: "@attributeStart" },
[/\/>/, "delimiter.angle", "@pop"],
[
/(<\/)(event)(\s*>)/,
["delimiter.angle", "tag-event", { token: "delimiter.angle", next: "@pop" }],
],
[/>/, { token: "delimiter.angle", next: "@eventTagContent" }],
],
eventTagContent: [
{ include: "commentStart" },
{ include: "componentTagStart" },
[
/[^<]/,
{ token: "@rematch", next: "@eventTagScriptContent", nextEmbedded: "xmluiscript" },
],
[/<\/event\s*>/, { token: "@rematch", next: "@pop" }],
],
eventTagScriptContent: [
[/<\/event\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
[/[^<]/, ""],
],
methodTagStart: [
[
/(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(method)/,
["delimiter.angle", "namespace", { token: "tag-helper", next: "@methodTag" }],
],
],
methodTag: [
{ include: "@commentStart" },
{ include: "@valueAttributeScriptInsideStart" },
{ include: "@attributeStart" },
[/\/>/, "delimiter.angle", "@pop"],
[
/>/,
{
token: "delimiter.angle",
next: "@methodTagScriptContent",
nextEmbedded: "xmluiscript",
},
],
[
/(<\/)(method)(\s*>)/,
["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
],
],
methodTagScriptContent: [
[/<\/method\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
[/[^</]/, ""],
],
apiTagStart: [
[
/(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(api)/,
["delimiter.angle", "namespace", { token: "tag-helper", next: "@apiTag" }],
],
],
apiTag: [
{ include: "@commentStart" },
{ include: "@valueAttributeScriptInsideStart" },
{ include: "@attributeStart" },
[/\/>/, "delimiter.angle", "@pop"],
[
/>/,
{ token: "delimiter.angle", next: "@apiTagScriptContent", nextEmbedded: "xmluiscript" },
],
[
/(<\/)(api)(\s*>)/,
["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
],
],
apiTagScriptContent: [
[/<\/api\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
[/[^</]/, ""],
],
valueAttributeScriptInsideStart: [
[
/(^|\s+)(value)(\s*=)(['\"`])/,
[
"",
"attribute",
"operators",
{
cases: {
"'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
'"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
"`": {
token: "string",
next: "@backtickQuotedScript",
nextEmbedded: "xmluiscript",
},
},
},
],
],
],
scriptTagStart: [
[
/(<)(script\s*)(>)/,
[
"delimiter.angle",
"tag-script",
{ token: "delimiter.angle", nextEmbedded: "xmluiscript", next: "@scriptTag" },
],
],
[/(<\/)(script\s*)(>)/, ["delimiter.angle", "tag-script", "delimiter.angle"]],
],
scriptTag: [
[/<\/script>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
[/[^<]+/, ""],
],
propOrVarTagStart: [
[
/(<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)((?:property)|(?:prop)|(?:var))/,
["delimiter.angle", "namespace", { token: "tag-helper", next: "@propOrVarTag" }],
],
],
propOrVarTag: [
[/\/?>/, { token: "delimiter.angle", next: "@pop" }],
{ include: "@commentStart" },
{ include: "@attributeStart" },
],
componentTagStart: [
[
/(\s*<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)([A-Z][\w\.\-]*)/,
["delimiter.angle", "namespace", { token: "tag-component", next: "@componentTag" }],
],
],
componentTag: [
[/\/?>/, { token: "delimiter.angle", next: "@pop" }],
{ include: "@commentStart" },
{ include: "@eventHandler" },
{ include: "@attributeStart" },
],
eventHandler: [
[
/(^|\s+)(on[A-Z][-\w.]*)(\s*=)(['\"`])/,
[
"",
"attribute",
"operators",
{
cases: {
"'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
'"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
"`": {
token: "string",
next: "@backtickQuotedScript",
nextEmbedded: "xmluiscript",
},
},
},
],
],
],
doubleQuotedScript: [
[/"/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
[/[^"]/, ""],
],
singleQuotedScript: [
[/'/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
[/[^']/, ""],
],
backtickQuotedScript: [
[/`/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
[/[^`]/, ""],
],
attributeStart: [
[
/(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(['\"`])/,
[
"",
"attribute",
"operators",
{
cases: {
"'": { token: "string", next: "@singleQuotedString" },
'"': { token: "string", next: "@doubleQuotedString" },
"`": { token: "string", next: "@backtickQuotedString" },
},
},
],
],
[
/(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(@identifier)/,
["", "attribute", "operators", "string"],
],
[/(^|\s+)(@identifier(?::@identifier)?)/, ["", "attribute"]],
],
singleQuotedString: [
[/'/, "string", "@pop"],
{ include: "@textWithBindingExpr" },
[/[^']/, "string"],
],
doubleQuotedString: [
[/"/, "string", "@pop"],
{ include: "@textWithBindingExpr" },
[/[^"]/, "string"],
],
backtickQuotedString: [
[/`/, "string", "@pop"],
{ include: "@textWithBindingExpr" },
[/[^`]/, "string"],
],
textWithBindingExpr: [
{ include: "@escapeCharacter" },
{ include: "@entity" },
[/{/, { token: "delimiter.curly", next: "@bindingExpr", nextEmbedded: "xmluiscript" }],
],
bindingExpr: [
[/}/, { token: "delimiter.curly", next: "@pop", nextEmbedded: "@pop" }],
[/[^}]+/, ""],
],
cdataStart: [
[
/(<!\[)(CDATA)(\[)/,
["delimiter.angle", "tag-cdata", { token: "delimiter.angle", next: "@cdata" }],
],
],
cdata: [
[/]]>/, "delimiter.angle", "@pop"],
[/./, "string"],
],
commentStart: [[/<!--/, "comment", "@comment"]],
comment: [
[/[^<\-]+/, "comment.content"],
[/-->/, { token: "comment", next: "@pop" }],
[/[<\-]/, "comment.content"],
],
escapeCharacter: [[/\\S/, "string.escape"]],
entity: [[/&(amp|lt|gt|quot|apos|nbsp);/, "string.escape"]],
},
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./DateInput.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import {
createMetadata,
dAutoFocus,
dDidChange,
dEnabled,
dEndIcon,
dEndText,
dGotFocus,
dInitialValue,
dLostFocus,
dReadonly,
dStartIcon,
dStartText,
dValidationStatus,
} from "../metadata-helpers";
import {
dateFormats,
DateInput,
DateInputModeValues,
defaultProps,
WeekDays,
} from "./DateInputNative";
const COMP = "DateInput";
export const DateInputMd = createMetadata({
status: "experimental",
description:
"`DateInput` provides a text-based date input interface for selecting single dates " +
"or date ranges, with direct keyboard input similar to TimeInput. It offers customizable " +
"formatting and validation options without dropdown calendars.",
parts: {
day: {
description: "The day input field.",
},
month: {
description: "The month input field.",
},
year: {
description: "The year input field.",
},
clearButton: {
description: "The button to clear the date input.",
},
},
props: {
initialValue: dInitialValue(),
autoFocus: dAutoFocus(),
readOnly: dReadonly(),
enabled: dEnabled(defaultProps.enabled),
validationStatus: dValidationStatus(defaultProps.validationStatus),
mode: {
description: "The mode of the date input (single or range)",
valueType: "string",
availableValues: DateInputModeValues,
defaultValue: defaultProps.mode,
},
dateFormat: {
description: "The format of the date displayed in the input field",
valueType: "string",
defaultValue: defaultProps.dateFormat,
availableValues: dateFormats,
},
emptyCharacter: {
description: "Character used to create placeholder text for empty input fields",
valueType: "string",
defaultValue: defaultProps.emptyCharacter,
},
showWeekNumber: {
description: "Whether to show the week number (compatibility with DatePicker, not used in DateInput)",
valueType: "boolean",
defaultValue: defaultProps.showWeekNumber,
},
weekStartsOn: {
description: "The first day of the week. 0 is Sunday, 1 is Monday, etc. (compatibility with DatePicker, not used in DateInput)",
valueType: "number",
defaultValue: defaultProps.weekStartsOn,
availableValues: [
{
value: WeekDays.Sunday,
description: "Sunday",
},
{
value: WeekDays.Monday,
description: "Monday",
},
{
value: WeekDays.Tuesday,
description: "Tuesday",
},
{
value: WeekDays.Wednesday,
description: "Wednesday",
},
{
value: WeekDays.Thursday,
description: "Thursday",
},
{
value: WeekDays.Friday,
description: "Friday",
},
{
value: WeekDays.Saturday,
description: "Saturday",
},
],
},
minValue: {
description:
"The optional start date of the selectable date range. If not defined, the range " +
"allows any dates in the past.",
valueType: "string",
},
maxValue: {
description:
"The optional end date of the selectable date range. If not defined, the range allows " +
"any future dates.",
valueType: "string",
},
disabledDates: {
description: "An optional array of dates that are disabled (compatibility with DatePicker, not used in DateInput)",
valueType: "any",
},
inline: {
description: "Whether to display the date input inline (compatibility with DatePicker, always true for DateInput)",
valueType: "boolean",
defaultValue: defaultProps.inline,
},
clearable: {
description: "Whether to show a clear button to reset the input",
valueType: "boolean",
defaultValue: defaultProps.clearable,
},
clearIcon: {
description: "Icon name for the clear button",
valueType: "string",
},
clearToInitialValue: {
description: "Whether clearing resets to initial value or null",
valueType: "boolean",
defaultValue: defaultProps.clearToInitialValue,
},
gap: {
description: "The gap between input elements",
valueType: "string",
},
required: {
description: "Whether the input is required",
valueType: "boolean",
defaultValue: defaultProps.required,
},
startText: dStartText(),
startIcon: dStartIcon(),
endText: dEndText(),
endIcon: dEndIcon(),
},
events: {
didChange: dDidChange(COMP),
gotFocus: dGotFocus(COMP),
lostFocus: dLostFocus(COMP),
},
apis: {
focus: {
description: `Focus the ${COMP} component.`,
signature: "focus(): void",
},
value: {
description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
signature: "get value(): any",
},
setValue: {
description: `This method sets the current value of the ${COMP}.`,
signature: "set value(value: any): void",
parameters: {
value: "The new value to set for the date input.",
},
},
isoValue: {
description: `Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.`,
signature: "isoValue(): string | null",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
// DateInput specific theme variables (matching TimeInput structure)
[`paddingHorizontal-${COMP}`]: "$space-2",
[`paddingVertical-${COMP}`]: "$space-2",
[`color-divider-${COMP}`]: "$textColor-secondary",
[`spacing-divider-${COMP}`]: "1px 0",
[`width-input-${COMP}`]: "1.8em",
[`minWidth-input-${COMP}`]: "0.54em",
[`padding-input-${COMP}`]: "0 2px",
[`textAlign-input-${COMP}`]: "center",
[`fontSize-input-${COMP}`]: "inherit",
[`borderRadius-input-${COMP}`]: "$borderRadius",
[`backgroundColor-input-${COMP}-invalid`]: "rgba(220, 53, 69, 0.15)",
[`padding-button-${COMP}`]: "4px 6px",
[`borderRadius-button-${COMP}`]: "$borderRadius",
[`hoverColor-button-${COMP}`]: "$color-surface-800",
[`disabledColor-button-${COMP}`]: "$textColor-disabled",
[`outlineColor-button-${COMP}--focused`]: "$color-accent-500",
[`outlineWidth-button-${COMP}--focused`]: "2px",
[`outlineOffset-button-${COMP}--focused`]: "2px",
[`minWidth-ampm-${COMP}`]: "2em",
[`fontSize-ampm-${COMP}`]: "inherit",
},
});
export const dateInputComponentRenderer = createComponentRenderer(
COMP,
DateInputMd,
({
node,
state,
updateState,
extractValue,
className,
lookupEventHandler,
registerComponentApi,
}) => {
return (
<DateInput
id={node.uid}
className={className}
mode={extractValue(node.props?.mode)}
value={state?.value}
initialValue={extractValue(node.props.initialValue)}
enabled={extractValue.asOptionalBoolean(node.props.enabled)}
validationStatus={extractValue(node.props.validationStatus)}
updateState={updateState}
onDidChange={lookupEventHandler("didChange")}
onFocus={lookupEventHandler("gotFocus")}
onBlur={lookupEventHandler("lostFocus")}
registerComponentApi={registerComponentApi}
dateFormat={extractValue(node.props.dateFormat)}
showWeekNumber={extractValue.asOptionalBoolean(node.props.showWeekNumber)}
weekStartsOn={extractValue.asOptionalNumber(node.props.weekStartsOn)}
minValue={extractValue.asOptionalString(node.props.minValue)}
maxValue={extractValue.asOptionalString(node.props.maxValue)}
disabledDates={extractValue(node.props.disabledDates)}
inline={extractValue.asOptionalBoolean(node.props.inline, defaultProps.inline)}
startText={extractValue.asOptionalString(node.props.startText)}
startIcon={extractValue.asOptionalString(node.props.startIcon)}
endText={extractValue.asOptionalString(node.props.endText)}
endIcon={extractValue.asOptionalString(node.props.endIcon)}
readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
required={extractValue.asOptionalBoolean(node.props.required)}
clearable={extractValue.asOptionalBoolean(node.props.clearable, defaultProps.clearable)}
clearIcon={extractValue.asOptionalString(node.props.clearIcon)}
clearToInitialValue={extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps.clearToInitialValue)}
gap={extractValue.asOptionalString(node.props.gap)}
emptyCharacter={extractValue.asOptionalString(node.props.emptyCharacter)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/NestedApp.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "NestedApp";
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composeBorderVars($themeVars, $component);
$themeVars: t.composeTextVars($themeVars, "header-#{$component}");
$backgroundColor-frame-NestedApp: createThemeVar("backgroundColor-frame-#{$component}");
$gap-frame-NestedApp: createThemeVar("gap-frame-#{$component}");
$marginTop-NestedApp: createThemeVar("marginTop-#{$component}");
$marginBottom-NestedApp: createThemeVar("marginBottom-#{$component}");
$boxShadow-NestedApp: createThemeVar("boxShadow-#{$component}");
$backgroundColor-viewControls-NestedApp: createThemeVar("backgroundColor-viewControls-#{$component}"
);
$borderRadius-viewControls-NestedApp: createThemeVar("borderRadius-viewControls-#{$component}");
$padding-viewControls-NestedApp: createThemeVar("padding-viewControls-#{$component}");
$paddingVertical-viewControls-button-NestedApp: createThemeVar("paddingVertical-viewControls-button-#{$component}"
);
$paddingHorizontal-viewControls-button-NestedApp: createThemeVar("paddingHorizontal-viewControls-button-#{$component}"
);
$borderRadius-NestedApp: createThemeVar("borderRadius-#{$component}");
$borderBottom-header-NestedApp: createThemeVar("borderBottom-header-#{$component}");
$height-logo-splitView-NestedApp: createThemeVar("height-logo-splitView-#{$component}");
$width-logo-splitView-NestedApp: createThemeVar("width-logo-splitView-#{$component}");
$width-controls-NestedApp: createThemeVar("width-controls-#{$component}");
// --- Split view styles
$padding-button-splitView-NestedApp: createThemeVar("padding-button-splitView-#{$component}");
$width-button-splitView-NestedApp: createThemeVar("width-button-splitView-#{$component}");
$height-button-splitView-NestedApp: createThemeVar("height-button-splitView-#{$component}"
);
$backgroundColor-code-splitView-NestedApp: createThemeVar("backgroundColor-code-splitView-#{$component}"
);
$backgroundColor-button-splitView-NestedApp--active: createThemeVar("backgroundColor-button-splitView-#{$component}--active"
);
$color-button-splitView-NestedApp: createThemeVar("color-button-splitView-#{$component}"
);
$color-button-splitView-NestedApp--active: createThemeVar("color-button-splitView-#{$component}--active"
);
$borderRadius-button-splitView-NestedApp: createThemeVar("borderRadius-button-splitView-#{$component}"
);
$borderColor-button-splitView-NestedApp: createThemeVar("borderColor-button-splitView-#{$component}"
);
$color-loadingText-NestedApp: createThemeVar("color-loadingText-#{$component}");
$border-NestedApp: createThemeVar("border-#{$component}");
@layer components {
.nestedAppPlaceholder {
width: 100%;
height: 100%;
background-color: t.$backgroundColor;
position: relative;
border-radius: $borderRadius-NestedApp;
}
.loadingContainer {
position: absolute;
left: 50%;
top: calc(50% - 25px);
transform: translateX(-50%);
/* Center perfectly on the X axis */
display: flex;
align-items: center;
justify-content: center;
/* Center the content horizontally */
width: 300px;
height: 50px;
}
.logoWrapper {
width: 50px;
height: 50px;
transform: translateZ(0);
.animatedLogoPath {
will-change: stroke-dashoffset, stroke-dasharray;
/* The total length of the rectangle path is ~82. */
stroke-dasharray: 82;
stroke-dashoffset: 82;
/* Animation: name, duration, easing, and iteration count */
animation: draw-loop 3s ease-in-out infinite;
}
}
.loadingText {
margin-right: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
/* Increased by 20% from 16px */
font-weight: 500;
color: $color-loadingText-NestedApp;
text-align: right;
}
/* Defines the animation steps */
@keyframes draw-loop {
/* At the start, the path is not drawn */
0% {
stroke-dashoffset: 82;
}
/* Animate to fully drawn over 40% of the duration */
40% {
stroke-dashoffset: 0;
}
/* Hold the fully drawn state until the end */
100% {
stroke-dashoffset: 0;
}
}
.nestedAppRoot {
width: 100%;
height: 100%;
position: relative;
isolation: isolate;
background-color: t.$backgroundColor;
border-radius: 0 0 $borderRadius-NestedApp $borderRadius-NestedApp;
&.shouldAnimate {
transition: clip-path 1s, opacity 1s;
clip-path: inset(50% round 50%);
&:not(.initialized) {
opacity: 0;
}
&.initialized {
opacity: 1;
clip-path: inset(0% round 0%);
}
}
}
// --- End of theme variables collection
.nestedAppContainer {
@include t.paddingVars($themeVars, $component);
//https://stackoverflow.com/a/70422489
//https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
//" ...If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following:
// A filter, backdrop-filter, transform, or perspective value other than none. ..."
// so we do this to make the position 'fixed' elements to be positioned relative to the nestedAppContainer
//transform: scale(1);
margin-top: $marginTop-NestedApp;
margin-bottom: $marginBottom-NestedApp;
width: 100%;
height: fit-content;
display: flex;
border: $border-NestedApp;
border-radius: $borderRadius-NestedApp;
flex-direction: column;
gap: $gap-frame-NestedApp;
background-color: $backgroundColor-frame-NestedApp;
align-content: center;
box-shadow: $boxShadow-NestedApp;
.contentContainer {
width: 100%;
flex: 1;
min-height: 0;
display: flex;
align-items: center;
.splitViewMarkdown {
height: 100%;
:global(.global-codeBlock) {
background-color: $backgroundColor-code-splitView-NestedApp;
height: 100%;
border: none;
border-radius: 0;
}
}
}
}
.hidden {
display: none;
}
:is(html[class~="dark"]) {
.preview {
border: 1px solid #33404f;
}
}
.preview {
overflow: hidden;
}
.viewControls {
display: flex;
flex-direction: row;
align-items: center;
padding: $padding-viewControls-NestedApp;
background-color: $backgroundColor-viewControls-NestedApp;
border-radius: $borderRadius-viewControls-NestedApp;
}
.logo {
width: $width-logo-splitView-NestedApp;
height: $height-logo-splitView-NestedApp;
}
.splitViewButton {
padding: $padding-button-splitView-NestedApp !important;
width: $width-button-splitView-NestedApp !important;
height: $height-button-splitView-NestedApp !important;
color: $color-button-splitView-NestedApp !important;
border-radius: $borderRadius-button-splitView-NestedApp !important;
border-color: $borderColor-button-splitView-NestedApp !important;
&.show {
background-color: $backgroundColor-button-splitView-NestedApp--active;
color: $color-button-splitView-NestedApp--active !important;
&:hover {
background-color: $backgroundColor-button-splitView-NestedApp--active !important;
}
}
&.hide {
background-color: transparent;
&:hover {
background-color: transparent !important;
}
}
}
.header {
width: 100%;
display: flex;
align-items: center;
padding: 0 t.$space-2;
border-bottom: $borderBottom-header-NestedApp;
justify-content: space-between;
.headerText {
@include t.textVars($themeVars, "header-#{$component}");
padding-left: t.$space-2;
margin-right: auto;
}
.headerButton {
padding: t.$space-2 t.$space-3;
}
.spacer {
flex: 1 1 0 !important;
place-self: stretch;
}
}
.wrapper {
width: $width-controls-NestedApp;
}
.shadowRoot {
// "My solution was to add a dummy transform property so that all elements with fixed position got attached to their parent div." see: https://stackoverflow.com/a/70422489
transform: scale(1);
width: 100%;
height: 100%;
position: relative;
isolation: isolate;
background-color: transparent;
border-radius: $borderRadius-NestedApp;
}
.content {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: $borderRadius-NestedApp;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/docs/public/pages/routing-and-links.md:
--------------------------------------------------------------------------------
```markdown
# Routing and Links
XMLUI implements client-side routing with URLs bound to UI views. You can use two different routing mechanisms: **hash** and **standard**. Both store the current location in the browser's address bar and work with the browser's history stack. However, they differ in the URLs they send to the backend server.
## Hash routing (default)
If you don't have complete control over the server, you may not be able to configure it to retrieve the `index.html` file as a single-page app requires. Hash routing solves this issue. If your app is hosted at the `myComp.com/accountapp` URL (this URL serves the default `index.html` file from the server), navigation URLs will look like `myComp.com/accountapp/#/leads/12` or `myComp.com/accountapp/#/list?zip=98005`. Even multiple hash marks may show up (for example, if you navigate to a bookmark: `myComp.com/accountapp/#/leads/12#callhistory`.
The server receives only the part of the URL (`myComp.com/accountapp`) that precedes the hash mark. The client-side routing mechanism uses the remainder to navigate within the app.
You can turn off hash routing and switch to standard routing using the app's `config.json` file.
```json
{
"name": "MyHashRoutedApp",
"appGlobals": {
"useHashBasedRouting": false
}
};
```
## Standard routing (optional)
When you navigate to an URL (e.g., refresh the current page), the browser sends the entire path to the web server. XMLUI apps are single-page web apps, and your web server should be configured accordingly.
For example, if your app is hosted at the `myComp.com/accountapp` URL (this URL serves the default `index.html` file from the server), it should be configured to retrieve the same `index.html` file even if the browser-sent URL contains path or query segments, such as `myComp.com/accountapp/leads/12` or `myComp.com/accountapp/list?zip=98005`
If your web server is not configured this way, you'll receive 404 errors for the latest two (and similar) requests when refreshing the current page. Here's a sample `nginx` configuration.
``` copy {10}
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
sendfile on;
server {
root /path/to/your/project;
index index.html index.htm;
location ~ \.(js|css|png|jpg|jpeg|gif|ico|json|woff|woff2|ttf|eot|svg|xs|xmlui)$ {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
expires off;
try_files $uri =404;
}
location / {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
expires off;
try_files $uri $uri/ /index.html;
}
}
}
```
## Serving from a subdirectory with proxy
If you need to serve your XMLUI app from a subdirectory path (e.g., `/myapp/`) while proxying to a running XMLUI server, you can use this nginx configuration. This approach works with both hash-based and standard routing.
### Nginx configuration
```nginx
server {
listen 80;
server_name example.com;
location /myapp/ {
rewrite ^/myapp(/.*)$ $1 break;
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_intercept_errors on;
error_page 404 = /myapp/;
}
}
```
### Base path configuration
You'll need to configure the base path in your `index.html`:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.__PUBLIC_PATH = '/myapp'
</script>
<script src="xmlui/0.9.23.js"></script>
</head>
<body>
</body>
</html>
```
### How it works
This configuration:
- Rewrites incoming `/myapp/...` requests to remove the prefix before proxying
- Proxies requests to your XMLUI server running on port 8080
- Redirects 404 errors back to `/myapp/` to enable SPA fallback behavior
- Works with both routing modes: Hash-based routing rarely triggers 404s, while standard routing uses the 404 redirect for client-side navigation
### Routing mode compatibility
This subdirectory deployment works with both routing configurations:
**Hash-based routing** (`useHashBasedRouting: true` - default):
- URLs: `example.com/myapp/#/contacts`
- Server sees: `example.com/myapp/`
- Behavior: Serves app normally from base path
**Standard routing** (`useHashBasedRouting: false` in config.json):
- URLs: `example.com/myapp/contacts`
- Server sees: `example.com/myapp/contacts`
- Behavior: 404s redirect to `/myapp/` which loads the app, then client-side routing takes over
## Links
XMLUI uses the specified links as absolute links (starting with a slash) or relative links, as the following example shows:
```xmlui-pg display
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/contacts">Contacts</NavLink>
<NavLink to="about">About</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="contacts">
Contacts
</Page>
<Page url="about">
About
</Page>
</Pages>
</App>
```
Here, `/` and `/contacts` are absolute links within the app, `about` is a relative link. As the `NavPanel` hierarchy is at the root level within the app, `/contacts` and `contacts` is the same URL.
## Dynamic route segments
You can use parameter placeholders in the URLs as part of the route. These placeholders start with a colon and are followed by a [valid identifier](/glossary#variable). In the target, you can query the value of these placeholders through the `$routeParams` context variable.
```xmlui-pg display copy
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/account/Cameron">Cameron</NavLink>
<NavLink to="/account/Joe">Joe</NavLink>
<NavLink to="/account/Kathy">Kathy</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="/account/:id">
Account: {$routeParams.id}
</Page>
</Pages>
</App>
```
## Using query parameters
You can also use query parameters in routes. The third link uses two query parameters, "from" and "to". The target page uses the `$queryParams` context variable to access them.
```xmlui-pg display copy /from=December&to=February/ /{$queryParams.from}-{$queryParams.to}/ name="try clicking Winter Report"
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/contacts">Contacts</NavLink>
<NavLink to="/report?from=December&to=February">Winter Report</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="contacts">
Contacts
</Page>
<Page url="/report">
Reported period: {$queryParams.from}-{$queryParams.to}
</Page>
</Pages>
</App>
```
## Active links
When the app visits a particular target in its available routes, the `NavLink` component matching with the visited route is marked as active, and it gets a visual indication (a blueish left border), like in this example:
```xmlui-pg copy display name="Active links"
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="/about">
About this app
</Page>
</Pages>
</App>
```
When you start the app, the route is "/" (by default) and matches the Home page's route specification. Thus, Home is marked as the active link. When you click About, the route changes to "/about," so the active link becomes About (its route specification matches the current route):
As a `NavLink` activity is based on matching, multiple active links may exist simultaneously. The following example demonstrates such a situation:
```xmlui-pg copy display {4-5}
<App display layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/report?from=December&to=February">Winter Report</NavLink>
<NavLink to="/report?from=June&to=August">Summer Report</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="/report">
Reported period: {$queryParams.from}-{$queryParams.to}
</Page>
</Pages>
</App>
```
Query parameters are not considered to be part of the route. So, in this sample, the Winter report and Summer report match the same route, "/report." If you select any of them, both links are marked active:
The semantic meaning of routes is analogous to routes used at the backend. When you send two requests with the same routes but different query parameters, they will reach the same backend endpoint. Of course, that endpoint may consider the query parameters, process them, and respond differently. However, this differentiation is not in the routing but in the processing mechanism.
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroupNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
cloneElement,
type CSSProperties,
forwardRef,
type ReactElement,
type ReactNode,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@radix-ui/react-dropdown-menu";
import styles from "./NavGroup.module.scss";
import type { RenderChildFn } from "../../abstractions/RendererDefs";
import type { ComponentDef } from "../../abstractions/ComponentDefs";
import { EMPTY_OBJECT } from "../../components-core/constants";
import { mergeProps } from "../../components-core/utils/mergeProps";
import { useTheme } from "../../components-core/theming/ThemeContext";
import { Icon } from "../Icon/IconNative";
import { NavLink } from "../NavLink/NavLinkNative";
import { useAppLayoutContext } from "../App/AppLayoutContext";
import { NavPanelContext } from "../NavPanel/NavPanelNative";
import type { NavGroupMd } from "./NavGroup";
import { useLocation } from "@remix-run/react";
import classnames from "classnames";
import { NavGroupContext } from "./NavGroupContext";
import { getAppLayoutOrientation } from "../App/AppNative";
type NavGroupComponentDef = ComponentDef<typeof NavGroupMd>;
type Props = {
style?: CSSProperties;
label: string;
icon?: React.ReactNode;
to?: string;
disabled?: boolean;
node: NavGroupComponentDef;
renderChild: RenderChildFn;
initiallyExpanded: boolean;
iconHorizontalExpanded?: string;
iconHorizontalCollapsed?: string;
iconVerticalExpanded?: string;
iconVerticalCollapsed?: string;
};
export const defaultProps: Pick<
Props,
| "iconHorizontalExpanded"
| "iconHorizontalCollapsed"
| "iconVerticalExpanded"
| "iconVerticalCollapsed"
> = {
iconHorizontalExpanded: "chevronright",
iconHorizontalCollapsed: "chevronright",
iconVerticalExpanded: "chevrondown",
iconVerticalCollapsed: "chevronright",
};
export const NavGroup = forwardRef(function NavGroup(
{
node,
style,
label,
icon,
renderChild,
to,
disabled = false,
initiallyExpanded = false,
iconHorizontalCollapsed,
iconHorizontalExpanded,
iconVerticalCollapsed,
iconVerticalExpanded,
...rest
}: Props,
ref,
) {
const { level } = useContext(NavGroupContext);
const appLayoutContext = useAppLayoutContext();
const navPanelContext = useContext(NavPanelContext);
const layoutIsVertical =
!!appLayoutContext && getAppLayoutOrientation(appLayoutContext.layout).includes("vertical");
let inline =
appLayoutContext?.layout === "vertical" ||
appLayoutContext?.layout === "vertical-sticky" ||
appLayoutContext?.layout === "vertical-full-header";
if (navPanelContext !== null) {
inline = navPanelContext.inDrawer;
}
const navGroupContextValue = useMemo(() => {
return {
level: level + 1,
layoutIsVertical,
iconHorizontalCollapsed: iconHorizontalCollapsed ?? defaultProps.iconHorizontalCollapsed,
iconHorizontalExpanded: iconHorizontalExpanded ?? defaultProps.iconHorizontalExpanded,
iconVerticalCollapsed:
iconVerticalCollapsed ??
(level < 0 && !inline
? defaultProps.iconVerticalExpanded
: defaultProps.iconVerticalCollapsed),
iconVerticalExpanded: iconVerticalExpanded ?? defaultProps.iconVerticalExpanded,
};
}, [
iconHorizontalCollapsed,
iconHorizontalExpanded,
iconVerticalCollapsed,
iconVerticalExpanded,
level,
layoutIsVertical,
inline,
]);
return (
<NavGroupContext.Provider value={navGroupContextValue}>
{inline ? (
<ExpandableNavGroup
{...rest}
to={to}
style={style}
label={label}
icon={icon}
node={node}
renderChild={renderChild}
ref={ref}
initiallyExpanded={initiallyExpanded}
disabled={disabled}
/>
) : (
<DropDownNavGroup
{...rest}
label={label}
icon={icon}
node={node}
renderChild={renderChild}
ref={ref}
to={to}
initiallyExpanded={initiallyExpanded}
disabled={disabled}
/>
)}
</NavGroupContext.Provider>
);
});
type ExpandableNavGroupProps = {
style?: CSSProperties;
label: string;
icon: ReactNode;
node: NavGroupComponentDef;
renderChild: RenderChildFn;
to?: string;
initiallyExpanded?: boolean;
disabled?: boolean;
};
const ExpandableNavGroup = forwardRef(function ExpandableNavGroup(
{
style = EMPTY_OBJECT,
label,
icon,
renderChild,
node,
to,
initiallyExpanded = false,
disabled = false,
...rest
}: ExpandableNavGroupProps,
ref,
) {
const { level, iconVerticalCollapsed, iconVerticalExpanded, layoutIsVertical } =
useContext(NavGroupContext);
const [expanded, setExpanded] = useState(initiallyExpanded);
const groupContentInnerRef = useRef<HTMLDivElement>(null);
const { pathname } = useLocation();
useEffect(() => {
const hasActiveNavLink =
groupContentInnerRef.current.querySelector(".xmlui-navlink-active") !== null;
if (hasActiveNavLink) {
setExpanded(true);
}
}, [pathname]);
const toggleStyle = {
...style,
"--nav-link-level": layoutIsVertical ? level : 0,
};
const handleClick = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setExpanded((prev) => !prev);
};
return (
<>
<NavLink
{...rest}
style={toggleStyle}
onClick={handleClick}
icon={icon}
to={to}
disabled={disabled}
aria-expanded={expanded}
>
{label}
<div style={{ flex: 1 }} />
<Icon name={expanded ? iconVerticalExpanded : iconVerticalCollapsed} />
</NavLink>
<div
aria-hidden={!expanded}
className={classnames(styles.groupContent, {
[styles.expanded]: expanded,
})}
>
<div className={styles.groupContentInner} ref={groupContentInnerRef}>
{renderChild(node.children)}
</div>
</div>
</>
);
});
const DropDownNavGroup = forwardRef(function DropDownNavGroup(
{
label,
icon,
renderChild,
node,
to,
disabled = false,
initiallyExpanded = false,
...rest
}: {
style?: CSSProperties;
label: string;
icon: ReactNode;
node: NavGroupComponentDef;
renderChild: RenderChildFn;
to?: string;
disabled?: boolean;
initiallyExpanded?: boolean;
},
ref,
) {
const {
level,
iconHorizontalCollapsed,
iconHorizontalExpanded,
iconVerticalCollapsed,
iconVerticalExpanded,
} = useContext(NavGroupContext);
const { root } = useTheme();
let Wrapper = DropdownMenu;
let Trigger = DropdownMenuTrigger;
let Content = DropdownMenuContent;
if (level >= 1) {
Wrapper = DropdownMenuSub;
Trigger = DropdownMenuSubTrigger as any;
Content = DropdownMenuSubContent;
}
const [expanded, setExpanded] = useState(initiallyExpanded);
const [renderCount, setRenderCount] = useState(false);
useEffect(() => setRenderCount(true), []);
return (
<Wrapper
{...rest}
open={expanded}
onOpenChange={(open) => {
if (renderCount) setExpanded(open);
}}
>
<Trigger asChild disabled={disabled}>
<NavLink
icon={icon}
style={{ flexShrink: 0 }}
vertical={level >= 1}
to={to}
disabled={disabled}
>
{label}
<div style={{ flex: 1 }} />
{level === 0 && <Icon name={expanded ? iconVerticalExpanded : iconVerticalCollapsed} />}
{level >= 1 && (
<Icon name={expanded ? iconHorizontalExpanded : iconHorizontalCollapsed} />
)}
</NavLink>
</Trigger>
<DropdownMenuPortal container={root}>
<Content
className={styles.dropdownList}
style={{ display: "flex", flexDirection: "column" }}
side={"bottom"}
align={"start"}
>
{renderChild(node.children, {
wrapChild: ({ node }, renderedChild, hints) => {
if (hints?.opaque) {
return renderedChild;
}
if (node.type === "List") {
return renderedChild;
}
if (node.type === "NavGroup") {
return renderedChild;
}
let child = renderedChild;
if (node.type === "NavLink") {
child = cloneElement(renderedChild as ReactElement, {
...mergeProps((renderedChild as ReactElement).props, {
vertical: true,
}),
});
}
return <DropdownMenuItem asChild={true}>{child}</DropdownMenuItem>;
},
})}
</Content>
</DropdownMenuPortal>
</Wrapper>
);
});
```