This is page 48 of 186. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/content/components/FileInput.md:
--------------------------------------------------------------------------------
```markdown
1 | # FileInput [#fileinput]
2 |
3 | `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.
4 |
5 | **Key features:**
6 | - **File type filtering**: Restrict selection to specific file types using `acceptsFileType`
7 | - **Multiple file selection**: Enable users to select multiple files simultaneously
8 | - **Directory selection**: Allow folder selection instead of individual files
9 | - **Customizable button**: Configure button text, icons, position, and styling to match your design
10 |
11 | ## Properties [#properties]
12 |
13 | ### `acceptsFileType` [#acceptsfiletype]
14 |
15 | An optional list of file types the input controls accepts provided as a string array.
16 |
17 | ```xmlui-pg copy display name="Example: acceptsFileType"
18 | <App>
19 | <FileInput acceptsFileType="{['.txt', '.jpg']}" />
20 | </App>
21 | ```
22 |
23 | ### `autoFocus` (default: false) [#autofocus-default-false]
24 |
25 | If this property is set to `true`, the component gets the focus automatically when displayed.
26 |
27 | ### `buttonIcon` [#buttonicon]
28 |
29 | 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.
30 |
31 | ```xmlui-pg copy display name="Example: buttonIcon"
32 | <App>
33 | <FileInput buttonIcon="drive" buttonLabel="Let there be drive" />
34 | <FileInput buttonIcon="drive" />
35 | </App>
36 | ```
37 |
38 | ### `buttonIconPosition` (default: "start") [#buttoniconposition-default-start]
39 |
40 | This optional string determines the location of the button icon.
41 |
42 | Available values: `start` **(default)**, `end`
43 |
44 | ```xmlui-pg copy display name="Example: buttonIconPosition"
45 | <App>
46 | <FileInput buttonIcon="drive" buttonLabel="End" buttonIconPosition="end" />
47 | </App>
48 | ```
49 |
50 | ### `buttonLabel` [#buttonlabel]
51 |
52 | This property is an optional string to set a label for the button part.
53 |
54 | This property is an optional string to set a label for the button part.
55 |
56 | ```xmlui-pg copy display name="Example: label"
57 | <App >
58 | <FileInput />
59 | <FileInput buttonLabel="I am the button label" />
60 | </App>
61 | ```
62 |
63 | ### `buttonPosition` (default: "end") [#buttonposition-default-end]
64 |
65 | This property determines the position of the button relative to the input field.
66 |
67 | Available values: `start`, `end` **(default)**
68 |
69 | ### `buttonSize` [#buttonsize]
70 |
71 | The size of the button (small, medium, large)
72 |
73 | Available values:
74 |
75 | | Value | Description |
76 | | --- | --- |
77 | | `xs` | Extra small |
78 | | `sm` | Small |
79 | | `md` | Medium |
80 | | `lg` | Large |
81 | | `xl` | Extra large |
82 |
83 | ```xmlui-pg copy display name="Example: buttonSize"
84 | <App>
85 | <FileInput buttonSize="lg" />
86 | </App>
87 | ```
88 |
89 | ### `buttonThemeColor` (default: "primary") [#buttonthemecolor-default-primary]
90 |
91 | The button color scheme (primary, secondary, attention)
92 |
93 | Available values: `attention`, `primary` **(default)**, `secondary`
94 |
95 | ```xmlui-pg copy display name="Example: buttonThemeColor"
96 | <App>
97 | <FileInput buttonThemeColor="secondary" />
98 | </App>
99 | ```
100 |
101 | ### `buttonVariant` [#buttonvariant]
102 |
103 | The button variant to use
104 |
105 | Available values: `solid`, `outlined`, `ghost`
106 |
107 | ```xmlui-pg copy display name="Example: buttonVariant"
108 | <App>
109 | <FileInput buttonLabel="outlined" buttonVariant="outlined" />
110 | </App>
111 | ```
112 |
113 | ### `directory` (default: false) [#directory-default-false]
114 |
115 | This boolean property indicates whether the component allows selecting directories (`true`) or files only (`false`).
116 |
117 | ### `enabled` (default: true) [#enabled-default-true]
118 |
119 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
120 |
121 | ### `initialValue` [#initialvalue]
122 |
123 | This property sets the component's initial value.
124 |
125 | ### `multiple` (default: false) [#multiple-default-false]
126 |
127 | 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.
128 |
129 | ```xmlui-pg copy display name="Example: multiple"
130 | <App>
131 | <FileInput multiple="false" />
132 | <FileInput multiple="true" />
133 | </App>
134 | ```
135 |
136 | ### `placeholder` [#placeholder]
137 |
138 | An optional placeholder text that is visible in the input field when its empty.
139 |
140 | ### `readOnly` (default: false) [#readonly-default-false]
141 |
142 | Set this property to `true` to disallow changing the component value.
143 |
144 | ### `required` (default: false) [#required-default-false]
145 |
146 | Set this property to `true` to indicate it must have a value before submitting the containing form.
147 |
148 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
149 |
150 | This property allows you to set the validation status of the input component.
151 |
152 | Available values:
153 |
154 | | Value | Description |
155 | | --- | --- |
156 | | `valid` | Visual indicator for an input that is accepted |
157 | | `warning` | Visual indicator for an input that produced a warning |
158 | | `error` | Visual indicator for an input that produced an error |
159 |
160 | ## Events [#events]
161 |
162 | ### `didChange` [#didchange]
163 |
164 | This event is triggered when value of FileInput has changed.
165 |
166 | Write in the input field and see how the `Text` underneath it is updated in accordingly.
167 |
168 | ```xmlui-pg copy {2} display name="Example: didChange"
169 | <App var.field="">
170 | <FileInput onDidChange="(file) => field = file[0]?.name" />
171 | <Text value="{field}" />
172 | </App>
173 | ```
174 |
175 | ### `gotFocus` [#gotfocus]
176 |
177 | This event is triggered when the FileInput has received the focus.
178 |
179 | Clicking on the `FileInput` in the example demo changes the label text.
180 | Note how clicking elsewhere resets the text to the original.
181 |
182 | ```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
183 | <App>
184 | <FileInput
185 | buttonLabel="{focused === true ? 'I got focused!' : 'I lost focus...'}"
186 | onGotFocus="focused = true"
187 | onLostFocus="focused = false"
188 | var.focused="{false}"
189 | />
190 | </App>
191 | ```
192 |
193 | ### `lostFocus` [#lostfocus]
194 |
195 | This event is triggered when the FileInput has lost the focus.
196 |
197 | (See the example above)
198 |
199 | ## Exposed Methods [#exposed-methods]
200 |
201 | ### `focus` [#focus]
202 |
203 | This API command focuses the input field of the component.
204 |
205 | **Signature**: `focus(): void`
206 |
207 | ```xmlui-pg copy /fileInputComponent.focus()/ display name="Example: focus"
208 | <App>
209 | <HStack>
210 | <Button label="Focus FileInput" onClick="fileInputComponent.focus()" />
211 | <FileInput id="fileInputComponent" />
212 | </HStack>
213 | </App>
214 | ```
215 |
216 | ### `open` [#open]
217 |
218 | This API command triggers the file browsing dialog to open.
219 |
220 | **Signature**: `open(): void`
221 |
222 | ```xmlui-pg copy /fileInputComponent.open()/ display name="Example: open"
223 | <App>
224 | <HStack>
225 | <Button label="Open FileInput" onClick="fileInputComponent.open()" />
226 | <FileInput id="fileInputComponent" />
227 | </HStack>
228 | </App>
229 | ```
230 |
231 | ### `setValue` [#setvalue]
232 |
233 | This method sets the current value of the component.
234 |
235 | **Signature**: `setValue(files: File[]): void`
236 |
237 | - `files`: An array of File objects to set as the current value of the component.
238 |
239 | (**NOT IMPLEMENTED YET**) You can use this method to set the component's current value programmatically.
240 |
241 | ### `value` [#value]
242 |
243 | This property holds the current value of the component, which is an array of files.
244 |
245 | **Signature**: `get value(): File[]`
246 |
247 | In the example below, select a file using the file browser of the `FileInput` component
248 | and note how the `Text` component displays the selected file's name:
249 |
250 | ```xmlui-pg copy {3-4} display name="Example: value"
251 | <App>
252 | <HStack>
253 | <Text value="Selected file name: {fileInputComponent.value}" />
254 | <FileInput id="fileInputComponent" />
255 | </HStack>
256 | </App>
257 | ```
258 |
259 | ## Styling [#styling]
260 |
261 | The `FileInput` component does not theme variables directly.
262 | However, it uses the [`Button`](/components/Button) and [`TextBox`](/components/TextBox) components under the hood.
263 | Thus, modifying the styles of both of these components affects the `FileInput`.
264 |
265 | See [Button styling](/components/Button#styling) and [TextBox styling](/components/TextBox#styling).
266 |
267 | ### Theme Variables [#theme-variables]
268 |
269 | | Variable | Default Value (Light) | Default Value (Dark) |
270 | | --- | --- | --- |
271 | | [backgroundColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
272 | | [borderColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
273 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-FileInput--focus | *none* | *none* |
274 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-FileInput--focus | *none* | *none* |
275 | | [outlineColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
276 | | [outlineOffset](../styles-and-themes/common-units/#size)-FileInput--focus | *none* | *none* |
277 | | [outlineStyle](../styles-and-themes/common-units/#border)-FileInput--focus | *none* | *none* |
278 | | [outlineWidth](../styles-and-themes/common-units/#size)-FileInput--focus | *none* | *none* |
279 | | [textColor](../styles-and-themes/common-units/#color)-FileInput--focus | *none* | *none* |
280 |
```
--------------------------------------------------------------------------------
/docs/content/components/AppHeader.md:
--------------------------------------------------------------------------------
```markdown
1 | # AppHeader [#appheader]
2 |
3 | `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.
4 |
5 | **Key features:**
6 |
7 | - **Logo customization**: Use `logoTemplate` to create rich logo designs beyond simple images
8 | - **Profile menu**: Add user authentication displays, settings menus, or action buttons via `profileMenuTemplate`
9 | - **Layout integration**: Automatically positioned and styled based on your App's `layout` property
10 |
11 | ## Properties [#properties]
12 |
13 | ### `logoTemplate` [#logotemplate]
14 |
15 | 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.
16 |
17 | This property defines the template to use for the logo.
18 | With this property, you can construct your custom logo instead of using a single image.
19 |
20 | ```xmlui-pg copy display {3-8} name="Example: logoTemplate" height="170px"
21 | <App>
22 | <AppHeader>
23 | <property name="logoTemplate">
24 | <H3>
25 | <Icon name="drive" />
26 | DriveDiag
27 | </H3>
28 | </property>
29 | </AppHeader>
30 | <NavPanel>
31 | <NavLink label="Home" to="/" icon="home"/>
32 | <NavLink label="Page 1" to="/page1"/>
33 | </NavPanel>
34 | <Pages fallbackPath="/">
35 | <Page url="/">
36 | <Text value="Home" />
37 | </Page>
38 | <Page url="/page1">
39 | <Text value="Page 1" />
40 | </Page>
41 | </Pages>
42 | </App>
43 | ```
44 |
45 | ### `profileMenuTemplate` [#profilemenutemplate]
46 |
47 | This property makes the profile menu slot of the `AppHeader` component customizable.
48 |
49 | This property makes the profile menu slot of the `AppHeader` component customizable.
50 | It accepts component definitions.
51 |
52 | ```xmlui-pg copy display {3-9} name="Example: profileMenuTemplate" height="150px"
53 | <App>
54 | <AppHeader>
55 | <property name="profileMenuTemplate">
56 | <DropdownMenu>
57 | <property name="triggerTemplate">
58 | <Avatar name="Joe" size="xs" borderRadius="50%"/>
59 | </property>
60 | </DropdownMenu>
61 | </property>
62 | </AppHeader>
63 | </App>
64 | ```
65 |
66 | ### `showLogo` (default: true) [#showlogo-default-true]
67 |
68 | Show the logo in the header
69 |
70 | ### `title` [#title]
71 |
72 | Title for the application logo
73 |
74 | ### `titleTemplate` [#titletemplate]
75 |
76 | 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.
77 |
78 | ## Events [#events]
79 |
80 | This component does not have any events.
81 |
82 | ## Exposed Methods [#exposed-methods]
83 |
84 | This component does not expose any methods.
85 |
86 | ## Styling [#styling]
87 |
88 | ### Theme Variables [#theme-variables]
89 |
90 | | Variable | Default Value (Light) | Default Value (Dark) |
91 | | --- | --- | --- |
92 | | [alignment](../styles-and-themes/common-units/#alignment)-content-AppHeader | *none* | *none* |
93 | | [backgroundColor](../styles-and-themes/common-units/#color)-AppHeader | $color-surface-raised | $color-surface-raised |
94 | | [border](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
95 | | [borderBottom](../styles-and-themes/common-units/#border)-AppHeader | 1px solid $borderColor | 1px solid $borderColor |
96 | | [borderBottomColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
97 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
98 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
99 | | [borderColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
100 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
101 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
102 | | [borderHorizontal](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
103 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
104 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
105 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
106 | | [borderLeft](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
107 | | [color](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
108 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
109 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
110 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | 0px | 0px |
111 | | [borderRight](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
112 | | [color](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
113 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
114 | | [borderRightWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
115 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
116 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-AppHeader | *none* | *none* |
117 | | [borderStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
118 | | [borderTop](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
119 | | [borderTopColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
120 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
121 | | [borderTopWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
122 | | [borderHorizontal](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
123 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
124 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-AppHeader | *none* | *none* |
125 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
126 | | [borderWidth](../styles-and-themes/common-units/#size)-AppHeader | *none* | *none* |
127 | | [height](../styles-and-themes/common-units/#size)-AppHeader | $space-14 | $space-14 |
128 | | [maxWidth](../styles-and-themes/common-units/#size)-AppHeader | $maxWidth-App | $maxWidth-App |
129 | | [maxWidth-content](../styles-and-themes/common-units/#size)-AppHeader | $maxWidth-content-App | $maxWidth-content-App |
130 | | [padding](../styles-and-themes/common-units/#size)-AppHeader | $paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader | $paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader |
131 | | [padding](../styles-and-themes/common-units/#size)-drawerToggle-AppHeader | $space-0_5 | $space-0_5 |
132 | | [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 |
133 | | [paddingBottom](../styles-and-themes/common-units/#size)-AppHeader | $paddingVertical-AppHeader | $paddingVertical-AppHeader |
134 | | [paddingBottom](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingVertical-logo-AppHeader | $paddingVertical-logo-AppHeader |
135 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-AppHeader | $space-4 | $space-4 |
136 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-logo-AppHeader | $space-0 | $space-0 |
137 | | [paddingLeft](../styles-and-themes/common-units/#size)-AppHeader | $paddingHorizontal-AppHeader | $paddingHorizontal-AppHeader |
138 | | [paddingLeft](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingHorizontal-logo-AppHeader | $paddingHorizontal-logo-AppHeader |
139 | | [paddingRight](../styles-and-themes/common-units/#size)-AppHeader | $paddingHorizontal-AppHeader | $paddingHorizontal-AppHeader |
140 | | [paddingRight](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingHorizontal-logo-AppHeader | $paddingHorizontal-logo-AppHeader |
141 | | [paddingTop](../styles-and-themes/common-units/#size)-AppHeader | $paddingVertical-AppHeader | $paddingVertical-AppHeader |
142 | | [paddingTop](../styles-and-themes/common-units/#size)-logo-AppHeader | $paddingVertical-logo-AppHeader | $paddingVertical-logo-AppHeader |
143 | | [paddingVertical](../styles-and-themes/common-units/#size)-AppHeader | $space-0 | $space-0 |
144 | | [paddingVertical](../styles-and-themes/common-units/#size)-logo-AppHeader | $space-0 | $space-0 |
145 | | [width](../styles-and-themes/common-units/#size)-logo-AppHeader | *none* | *none* |
146 |
147 | ### Variable Explanations [#variable-explanations]
148 |
149 | | Theme Variable | Description |
150 | | --- | --- |
151 | | **`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). |
152 | | **`width‑logo‑AppHeader`** | Sets the width of the displayed logo |
153 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/PartialInput.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { useCallback, useMemo } from "react";
2 | import classnames from "classnames";
3 | import styles from "./PartialInput.module.scss";
4 |
5 | /**
6 | * Direction indicator for blur events to help parent components understand
7 | * the user's navigation intent.
8 | */
9 | export type BlurDirection = "next" | "previous" | "external";
10 |
11 | /**
12 | * Props for PartialInput component.
13 | * This component encapsulates common input behavior for multi-field input components,
14 | * including auto-advance, arrow key navigation support, and enhanced blur handling.
15 | */
16 | export interface PartialInputProps {
17 | // Core functionality (varies by context)
18 | value?: string | null;
19 | /** Explicit placeholder override. If not provided, will be generated from emptyCharacter */
20 | placeholder?: string;
21 | onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
22 | onBlur?: (direction: BlurDirection, event: React.FocusEvent<HTMLInputElement>) => void;
23 | onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => void;
24 |
25 | // EmptyCharacter support
26 | /** Character to use for generating placeholders. Defaults to "-" if not provided */
27 | emptyCharacter?: string;
28 | /** Number of characters to repeat for placeholder. Defaults to 2 */
29 | placeholderLength?: number;
30 |
31 | // Validation & constraints (context-dependent)
32 | max: number;
33 | min: number;
34 | maxLength?: number; // PartialInput derives auto-advance logic from this
35 | validateFn?: (value: string) => boolean;
36 | onBeep?: () => void;
37 |
38 | // Navigation (context-dependent)
39 | nextInputRef?: React.RefObject<HTMLInputElement | null>;
40 | nextButtonRef?: React.RefObject<HTMLButtonElement | null>;
41 |
42 | // Identification & accessibility (varies)
43 | id?: string;
44 | name: string;
45 | ariaLabel?: string;
46 | className?: string;
47 | invalidClassName?: string;
48 |
49 | // Standard props (can vary per input)
50 | disabled?: boolean;
51 | readOnly?: boolean;
52 | required?: boolean;
53 | autoFocus?: boolean;
54 | inputRef?: React.RefObject<HTMLInputElement | null>;
55 |
56 | // Optional overrides (with sensible defaults)
57 | step?: number; // Default: 1
58 | isInvalid?: boolean; // Default: false (prevents auto-advance when true)
59 | }
60 |
61 | /**
62 | * PartialInput is a specialized input component designed for multi-field input scenarios.
63 | *
64 | * Key features:
65 | * - Auto-advance: Automatically moves to the next input when max length is reached
66 | * - Enhanced blur detection: Provides direction information (next/previous/external)
67 | * - Consistent styling: Common base styles with component-specific overrides via className
68 | * - Accessibility: Proper ARIA labels and keyboard navigation support
69 | * - Validation integration: Works with validation functions and provides feedback
70 | *
71 | * This component encapsulates common patterns found in multi-field input components,
72 | * reducing code duplication and ensuring consistent behavior.
73 | *
74 | * @param props - PartialInputProps configuration
75 | * @returns A configured input element with enhanced multi-field input behavior
76 | */
77 | export function PartialInput({
78 | value,
79 | placeholder,
80 | onChange,
81 | onBlur,
82 | onKeyDown,
83 | emptyCharacter,
84 | placeholderLength = 2,
85 | max,
86 | min,
87 | maxLength = 2,
88 | validateFn,
89 | onBeep,
90 | nextInputRef,
91 | nextButtonRef,
92 | id,
93 | name,
94 | ariaLabel,
95 | className,
96 | invalidClassName,
97 | disabled,
98 | readOnly,
99 | required,
100 | autoFocus,
101 | inputRef,
102 | step = 1,
103 | isInvalid = false,
104 | ...restProps
105 | }: PartialInputProps) {
106 | /**
107 | * Process emptyCharacter according to requirements.
108 | * Handles null/empty values, multi-character strings, and unicode characters.
109 | */
110 | const processedEmptyCharacter = useMemo(() => {
111 | if (!emptyCharacter || emptyCharacter.length === 0) {
112 | return "-";
113 | }
114 | if (emptyCharacter.length > 1) {
115 | // Use unicode-aware character extraction
116 | const firstChar = [...emptyCharacter][0];
117 | return firstChar;
118 | }
119 | return emptyCharacter;
120 | }, [emptyCharacter]);
121 |
122 | /**
123 | * Generate final placeholder value.
124 | * Uses explicit placeholder if provided, otherwise generates from emptyCharacter.
125 | */
126 | const finalPlaceholder = useMemo(() => {
127 | if (placeholder !== undefined) {
128 | return placeholder; // Explicit override takes precedence
129 | }
130 | return processedEmptyCharacter.repeat(placeholderLength);
131 | }, [placeholder, processedEmptyCharacter, placeholderLength]);
132 |
133 | /**
134 | * Internal focus handler that automatically selects all text for easier editing.
135 | * This is a common UX pattern for numeric inputs in multi-field components.
136 | */
137 | const handleInternalFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
138 | // Select all text when gaining focus for easier editing
139 | event.target.select();
140 | }, []);
141 |
142 | /**
143 | * Enhanced input change handler with automatic advance logic.
144 | * When the user types the maximum number of characters and the input is valid,
145 | * automatically moves focus to the next input or button.
146 | */
147 | const handleInputChange = useCallback(
148 | (event: React.ChangeEvent<HTMLInputElement>) => {
149 | const newValue = event.target.value;
150 |
151 | // Call the original onChange handler
152 | if (onChange) {
153 | onChange(event);
154 | }
155 |
156 | // Auto-advance logic: move to next input when reaching maxLength with valid numeric input
157 | if (newValue.length === maxLength && /^\d+$/.test(newValue) && !isInvalid) {
158 | // Check if the new value is valid before auto-tabbing
159 | const isValueInvalid = validateFn ? validateFn(newValue) : false;
160 |
161 | if (!isValueInvalid) {
162 | // Small delay to ensure the current input is properly updated
163 | setTimeout(() => {
164 | if (nextInputRef?.current) {
165 | // Tab to next input field
166 | nextInputRef.current.focus();
167 | nextInputRef.current.select();
168 | } else if (nextButtonRef?.current) {
169 | // Tab to next button (e.g., action button)
170 | nextButtonRef.current.focus();
171 | }
172 | }, 0);
173 | } else {
174 | // Input is ready for auto-tab but invalid - play beep sound and fire event
175 | onBeep?.();
176 | }
177 | }
178 | },
179 | [onChange, nextInputRef, nextButtonRef, maxLength, validateFn, onBeep, isInvalid],
180 | );
181 |
182 | /**
183 | * Enhanced blur handler that detects the direction of navigation.
184 | * This helps parent components understand whether the user is moving forward,
185 | * backward, or clicking outside the component entirely.
186 | */
187 | const handleBlur = useCallback(
188 | (event: React.FocusEvent<HTMLInputElement>) => {
189 | const relatedTarget = event.relatedTarget as HTMLElement;
190 | let direction: BlurDirection = "external";
191 |
192 | // Determine direction based on related target
193 | if (relatedTarget) {
194 | // Check if moving to next input
195 | if (nextInputRef?.current === relatedTarget) {
196 | direction = "next";
197 | }
198 | // Check if moving to next button
199 | else if (nextButtonRef?.current === relatedTarget) {
200 | direction = "next";
201 | }
202 | // Check if moving from a navigation event (could be previous)
203 | // Note: This is a simplified heuristic. In practice, we might need more sophisticated detection
204 | else if (relatedTarget.getAttribute("data-input") === "true") {
205 | // If it's another input, we assume it could be previous navigation
206 | // The parent component can provide more context if needed
207 | direction = "previous";
208 | }
209 | }
210 |
211 | // Call the enhanced onBlur handler with direction
212 | onBlur?.(direction, event);
213 | },
214 | [onBlur, nextInputRef, nextButtonRef],
215 | );
216 |
217 | /**
218 | * Enhanced key down handler that prevents space character input.
219 | * Filters out space key presses while allowing other keys to pass through.
220 | */
221 | const handleKeyDown = useCallback(
222 | (event: React.KeyboardEvent<HTMLInputElement>) => {
223 | // Prevent space character input
224 | if (event.key === " " || event.code === "Space") {
225 | event.preventDefault();
226 | return;
227 | }
228 |
229 | // Call the original onKeyDown handler for other keys
230 | onKeyDown?.(event as React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement });
231 | },
232 | [onKeyDown],
233 | );
234 |
235 | return (
236 | <input
237 | {...restProps}
238 | id={id}
239 | aria-label={ariaLabel}
240 | autoComplete="off"
241 | // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
242 | autoFocus={autoFocus}
243 | className={classnames(styles.partialInput, className, {
244 | [invalidClassName]: isInvalid,
245 | })}
246 | data-input="true"
247 | disabled={disabled}
248 | inputMode="numeric"
249 | max={max}
250 | maxLength={maxLength}
251 | min={min}
252 | name={name}
253 | onChange={handleInputChange}
254 | onBlur={handleBlur}
255 | onFocus={handleInternalFocus}
256 | onKeyDown={handleKeyDown}
257 | placeholder={finalPlaceholder}
258 | readOnly={readOnly}
259 | ref={inputRef as React.RefObject<HTMLInputElement>}
260 | required={required}
261 | step={step}
262 | type="text"
263 | value={value !== null ? value : ""}
264 | />
265 | );
266 | }
267 |
```
--------------------------------------------------------------------------------
/xmlui/src/syntax/monaco/grammar.monacoLanguage.ts:
--------------------------------------------------------------------------------
```typescript
1 | export const XmluiGrammar: any = {
2 | id: "xmlui",
3 | config: {
4 | comments: {
5 | blockComment: ["<!--", "-->"],
6 | },
7 | brackets: [["<", ">"]],
8 | autoClosingPairs: [
9 | { open: "<", close: ">" },
10 | { open: "'", close: "'" },
11 | { open: '"', close: '"' },
12 | { open: "`", close: "`" },
13 | ],
14 | surroundingPairs: [
15 | { open: "<", close: ">" },
16 | { open: "'", close: "'" },
17 | { open: '"', close: '"' },
18 | { open: "`", close: "`" },
19 | ],
20 | },
21 | language: {
22 | defaultToken: "",
23 | tokenPostfix: ".xmlui",
24 | ignoreCase: false,
25 | identifier: /[a-zA-Z$_][-\w.$]*/,
26 | tokenizer: {
27 | root: [
28 | { include: "@commentStart" },
29 | { include: "@helperTag" },
30 | { include: "@componentTagStart" },
31 | { include: "@escapeCharacter" },
32 | { include: "@textWithBindingExpr" },
33 | { include: "@entity" },
34 | { include: "@cdataStart" },
35 | ],
36 | helperTag: [
37 | { include: "@scriptTagStart" },
38 | { include: "@eventTagStart" },
39 | { include: "@apiTagStart" },
40 | { include: "@methodTagStart" },
41 | { include: "@propOrVarTagStart" },
42 | ],
43 | eventTagStart: [
44 | [
45 | /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(event)/,
46 | ["delimiter.angle", "namespace", { token: "tag-event", next: "@eventTag" }],
47 | ],
48 | ],
49 | eventTag: [
50 | { include: "@commentStart" },
51 | { include: "@valueAttributeScriptInsideStart" },
52 | { include: "@attributeStart" },
53 | [/\/>/, "delimiter.angle", "@pop"],
54 | [
55 | /(<\/)(event)(\s*>)/,
56 | ["delimiter.angle", "tag-event", { token: "delimiter.angle", next: "@pop" }],
57 | ],
58 | [/>/, { token: "delimiter.angle", next: "@eventTagContent" }],
59 | ],
60 | eventTagContent: [
61 | { include: "commentStart" },
62 | { include: "componentTagStart" },
63 | [
64 | /[^<]/,
65 | { token: "@rematch", next: "@eventTagScriptContent", nextEmbedded: "xmluiscript" },
66 | ],
67 | [/<\/event\s*>/, { token: "@rematch", next: "@pop" }],
68 | ],
69 | eventTagScriptContent: [
70 | [/<\/event\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
71 | [/[^<]/, ""],
72 | ],
73 | methodTagStart: [
74 | [
75 | /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(method)/,
76 | ["delimiter.angle", "namespace", { token: "tag-helper", next: "@methodTag" }],
77 | ],
78 | ],
79 | methodTag: [
80 | { include: "@commentStart" },
81 | { include: "@valueAttributeScriptInsideStart" },
82 | { include: "@attributeStart" },
83 | [/\/>/, "delimiter.angle", "@pop"],
84 | [
85 | />/,
86 | {
87 | token: "delimiter.angle",
88 | next: "@methodTagScriptContent",
89 | nextEmbedded: "xmluiscript",
90 | },
91 | ],
92 | [
93 | /(<\/)(method)(\s*>)/,
94 | ["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
95 | ],
96 | ],
97 | methodTagScriptContent: [
98 | [/<\/method\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
99 | [/[^</]/, ""],
100 | ],
101 | apiTagStart: [
102 | [
103 | /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(api)/,
104 | ["delimiter.angle", "namespace", { token: "tag-helper", next: "@apiTag" }],
105 | ],
106 | ],
107 | apiTag: [
108 | { include: "@commentStart" },
109 | { include: "@valueAttributeScriptInsideStart" },
110 | { include: "@attributeStart" },
111 | [/\/>/, "delimiter.angle", "@pop"],
112 | [
113 | />/,
114 | { token: "delimiter.angle", next: "@apiTagScriptContent", nextEmbedded: "xmluiscript" },
115 | ],
116 | [
117 | /(<\/)(api)(\s*>)/,
118 | ["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
119 | ],
120 | ],
121 | apiTagScriptContent: [
122 | [/<\/api\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
123 | [/[^</]/, ""],
124 | ],
125 | valueAttributeScriptInsideStart: [
126 | [
127 | /(^|\s+)(value)(\s*=)(['\"`])/,
128 | [
129 | "",
130 | "attribute",
131 | "operators",
132 | {
133 | cases: {
134 | "'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
135 | '"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
136 | "`": {
137 | token: "string",
138 | next: "@backtickQuotedScript",
139 | nextEmbedded: "xmluiscript",
140 | },
141 | },
142 | },
143 | ],
144 | ],
145 | ],
146 | scriptTagStart: [
147 | [
148 | /(<)(script\s*)(>)/,
149 | [
150 | "delimiter.angle",
151 | "tag-script",
152 | { token: "delimiter.angle", nextEmbedded: "xmluiscript", next: "@scriptTag" },
153 | ],
154 | ],
155 | [/(<\/)(script\s*)(>)/, ["delimiter.angle", "tag-script", "delimiter.angle"]],
156 | ],
157 | scriptTag: [
158 | [/<\/script>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
159 | [/[^<]+/, ""],
160 | ],
161 | propOrVarTagStart: [
162 | [
163 | /(<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)((?:property)|(?:prop)|(?:var))/,
164 | ["delimiter.angle", "namespace", { token: "tag-helper", next: "@propOrVarTag" }],
165 | ],
166 | ],
167 | propOrVarTag: [
168 | [/\/?>/, { token: "delimiter.angle", next: "@pop" }],
169 | { include: "@commentStart" },
170 | { include: "@attributeStart" },
171 | ],
172 | componentTagStart: [
173 | [
174 | /(\s*<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)([A-Z][\w\.\-]*)/,
175 | ["delimiter.angle", "namespace", { token: "tag-component", next: "@componentTag" }],
176 | ],
177 | ],
178 | componentTag: [
179 | [/\/?>/, { token: "delimiter.angle", next: "@pop" }],
180 | { include: "@commentStart" },
181 | { include: "@eventHandler" },
182 | { include: "@attributeStart" },
183 | ],
184 | eventHandler: [
185 | [
186 | /(^|\s+)(on[A-Z][-\w.]*)(\s*=)(['\"`])/,
187 | [
188 | "",
189 | "attribute",
190 | "operators",
191 | {
192 | cases: {
193 | "'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
194 | '"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
195 | "`": {
196 | token: "string",
197 | next: "@backtickQuotedScript",
198 | nextEmbedded: "xmluiscript",
199 | },
200 | },
201 | },
202 | ],
203 | ],
204 | ],
205 | doubleQuotedScript: [
206 | [/"/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
207 | [/[^"]/, ""],
208 | ],
209 | singleQuotedScript: [
210 | [/'/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
211 | [/[^']/, ""],
212 | ],
213 | backtickQuotedScript: [
214 | [/`/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
215 | [/[^`]/, ""],
216 | ],
217 | attributeStart: [
218 | [
219 | /(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(['\"`])/,
220 | [
221 | "",
222 | "attribute",
223 | "operators",
224 | {
225 | cases: {
226 | "'": { token: "string", next: "@singleQuotedString" },
227 | '"': { token: "string", next: "@doubleQuotedString" },
228 | "`": { token: "string", next: "@backtickQuotedString" },
229 | },
230 | },
231 | ],
232 | ],
233 | [
234 | /(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(@identifier)/,
235 | ["", "attribute", "operators", "string"],
236 | ],
237 | [/(^|\s+)(@identifier(?::@identifier)?)/, ["", "attribute"]],
238 | ],
239 | singleQuotedString: [
240 | [/'/, "string", "@pop"],
241 | { include: "@textWithBindingExpr" },
242 | [/[^']/, "string"],
243 | ],
244 | doubleQuotedString: [
245 | [/"/, "string", "@pop"],
246 | { include: "@textWithBindingExpr" },
247 | [/[^"]/, "string"],
248 | ],
249 | backtickQuotedString: [
250 | [/`/, "string", "@pop"],
251 | { include: "@textWithBindingExpr" },
252 | [/[^`]/, "string"],
253 | ],
254 | textWithBindingExpr: [
255 | { include: "@escapeCharacter" },
256 | { include: "@entity" },
257 | [/{/, { token: "delimiter.curly", next: "@bindingExpr", nextEmbedded: "xmluiscript" }],
258 | ],
259 | bindingExpr: [
260 | [/}/, { token: "delimiter.curly", next: "@pop", nextEmbedded: "@pop" }],
261 | [/[^}]+/, ""],
262 | ],
263 | cdataStart: [
264 | [
265 | /(<!\[)(CDATA)(\[)/,
266 | ["delimiter.angle", "tag-cdata", { token: "delimiter.angle", next: "@cdata" }],
267 | ],
268 | ],
269 | cdata: [
270 | [/]]>/, "delimiter.angle", "@pop"],
271 | [/./, "string"],
272 | ],
273 | commentStart: [[/<!--/, "comment", "@comment"]],
274 | comment: [
275 | [/[^<\-]+/, "comment.content"],
276 | [/-->/, { token: "comment", next: "@pop" }],
277 | [/[<\-]/, "comment.content"],
278 | ],
279 | escapeCharacter: [[/\\S/, "string.escape"]],
280 | entity: [[/&(amp|lt|gt|quot|apos|nbsp);/, "string.escape"]],
281 | },
282 | },
283 | };
284 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./DateInput.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import {
6 | createMetadata,
7 | dAutoFocus,
8 | dDidChange,
9 | dEnabled,
10 | dEndIcon,
11 | dEndText,
12 | dGotFocus,
13 | dInitialValue,
14 | dLostFocus,
15 | dReadonly,
16 | dStartIcon,
17 | dStartText,
18 | dValidationStatus,
19 | } from "../metadata-helpers";
20 | import {
21 | dateFormats,
22 | DateInput,
23 | DateInputModeValues,
24 | defaultProps,
25 | WeekDays,
26 | } from "./DateInputNative";
27 |
28 | const COMP = "DateInput";
29 |
30 | export const DateInputMd = createMetadata({
31 | status: "experimental",
32 | description:
33 | "`DateInput` provides a text-based date input interface for selecting single dates " +
34 | "or date ranges, with direct keyboard input similar to TimeInput. It offers customizable " +
35 | "formatting and validation options without dropdown calendars.",
36 | parts: {
37 | day: {
38 | description: "The day input field.",
39 | },
40 | month: {
41 | description: "The month input field.",
42 | },
43 | year: {
44 | description: "The year input field.",
45 | },
46 | clearButton: {
47 | description: "The button to clear the date input.",
48 | },
49 | },
50 | props: {
51 | initialValue: dInitialValue(),
52 | autoFocus: dAutoFocus(),
53 | readOnly: dReadonly(),
54 | enabled: dEnabled(defaultProps.enabled),
55 | validationStatus: dValidationStatus(defaultProps.validationStatus),
56 | mode: {
57 | description: "The mode of the date input (single or range)",
58 | valueType: "string",
59 | availableValues: DateInputModeValues,
60 | defaultValue: defaultProps.mode,
61 | },
62 | dateFormat: {
63 | description: "The format of the date displayed in the input field",
64 | valueType: "string",
65 | defaultValue: defaultProps.dateFormat,
66 | availableValues: dateFormats,
67 | },
68 | emptyCharacter: {
69 | description: "Character used to create placeholder text for empty input fields",
70 | valueType: "string",
71 | defaultValue: defaultProps.emptyCharacter,
72 | },
73 | showWeekNumber: {
74 | description: "Whether to show the week number (compatibility with DatePicker, not used in DateInput)",
75 | valueType: "boolean",
76 | defaultValue: defaultProps.showWeekNumber,
77 | },
78 | weekStartsOn: {
79 | description: "The first day of the week. 0 is Sunday, 1 is Monday, etc. (compatibility with DatePicker, not used in DateInput)",
80 | valueType: "number",
81 | defaultValue: defaultProps.weekStartsOn,
82 | availableValues: [
83 | {
84 | value: WeekDays.Sunday,
85 | description: "Sunday",
86 | },
87 | {
88 | value: WeekDays.Monday,
89 | description: "Monday",
90 | },
91 | {
92 | value: WeekDays.Tuesday,
93 | description: "Tuesday",
94 | },
95 | {
96 | value: WeekDays.Wednesday,
97 | description: "Wednesday",
98 | },
99 | {
100 | value: WeekDays.Thursday,
101 | description: "Thursday",
102 | },
103 | {
104 | value: WeekDays.Friday,
105 | description: "Friday",
106 | },
107 | {
108 | value: WeekDays.Saturday,
109 | description: "Saturday",
110 | },
111 | ],
112 | },
113 | minValue: {
114 | description:
115 | "The optional start date of the selectable date range. If not defined, the range " +
116 | "allows any dates in the past.",
117 | valueType: "string",
118 | },
119 | maxValue: {
120 | description:
121 | "The optional end date of the selectable date range. If not defined, the range allows " +
122 | "any future dates.",
123 | valueType: "string",
124 | },
125 | disabledDates: {
126 | description: "An optional array of dates that are disabled (compatibility with DatePicker, not used in DateInput)",
127 | valueType: "any",
128 | },
129 | inline: {
130 | description: "Whether to display the date input inline (compatibility with DatePicker, always true for DateInput)",
131 | valueType: "boolean",
132 | defaultValue: defaultProps.inline,
133 | },
134 | clearable: {
135 | description: "Whether to show a clear button to reset the input",
136 | valueType: "boolean",
137 | defaultValue: defaultProps.clearable,
138 | },
139 | clearIcon: {
140 | description: "Icon name for the clear button",
141 | valueType: "string",
142 | },
143 | clearToInitialValue: {
144 | description: "Whether clearing resets to initial value or null",
145 | valueType: "boolean",
146 | defaultValue: defaultProps.clearToInitialValue,
147 | },
148 | gap: {
149 | description: "The gap between input elements",
150 | valueType: "string",
151 | },
152 | required: {
153 | description: "Whether the input is required",
154 | valueType: "boolean",
155 | defaultValue: defaultProps.required,
156 | },
157 | startText: dStartText(),
158 | startIcon: dStartIcon(),
159 | endText: dEndText(),
160 | endIcon: dEndIcon(),
161 | },
162 | events: {
163 | didChange: dDidChange(COMP),
164 | gotFocus: dGotFocus(COMP),
165 | lostFocus: dLostFocus(COMP),
166 | },
167 | apis: {
168 | focus: {
169 | description: `Focus the ${COMP} component.`,
170 | signature: "focus(): void",
171 | },
172 | value: {
173 | description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
174 | signature: "get value(): any",
175 | },
176 | setValue: {
177 | description: `This method sets the current value of the ${COMP}.`,
178 | signature: "set value(value: any): void",
179 | parameters: {
180 | value: "The new value to set for the date input.",
181 | },
182 | },
183 | isoValue: {
184 | description: `Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.`,
185 | signature: "isoValue(): string | null",
186 | },
187 | },
188 | themeVars: parseScssVar(styles.themeVars),
189 | defaultThemeVars: {
190 | // DateInput specific theme variables (matching TimeInput structure)
191 | [`paddingHorizontal-${COMP}`]: "$space-2",
192 | [`paddingVertical-${COMP}`]: "$space-2",
193 | [`color-divider-${COMP}`]: "$textColor-secondary",
194 | [`spacing-divider-${COMP}`]: "1px 0",
195 | [`width-input-${COMP}`]: "1.8em",
196 | [`minWidth-input-${COMP}`]: "0.54em",
197 | [`padding-input-${COMP}`]: "0 2px",
198 | [`textAlign-input-${COMP}`]: "center",
199 | [`fontSize-input-${COMP}`]: "inherit",
200 | [`borderRadius-input-${COMP}`]: "$borderRadius",
201 | [`backgroundColor-input-${COMP}-invalid`]: "rgba(220, 53, 69, 0.15)",
202 | [`padding-button-${COMP}`]: "4px 6px",
203 | [`borderRadius-button-${COMP}`]: "$borderRadius",
204 | [`hoverColor-button-${COMP}`]: "$color-surface-800",
205 | [`disabledColor-button-${COMP}`]: "$textColor-disabled",
206 | [`outlineColor-button-${COMP}--focused`]: "$color-accent-500",
207 | [`outlineWidth-button-${COMP}--focused`]: "2px",
208 | [`outlineOffset-button-${COMP}--focused`]: "2px",
209 | [`minWidth-ampm-${COMP}`]: "2em",
210 | [`fontSize-ampm-${COMP}`]: "inherit",
211 | },
212 | });
213 |
214 | export const dateInputComponentRenderer = createComponentRenderer(
215 | COMP,
216 | DateInputMd,
217 | ({
218 | node,
219 | state,
220 | updateState,
221 | extractValue,
222 | className,
223 | lookupEventHandler,
224 | registerComponentApi,
225 | }) => {
226 | return (
227 | <DateInput
228 | id={node.uid}
229 | className={className}
230 | mode={extractValue(node.props?.mode)}
231 | value={state?.value}
232 | initialValue={extractValue(node.props.initialValue)}
233 | enabled={extractValue.asOptionalBoolean(node.props.enabled)}
234 | validationStatus={extractValue(node.props.validationStatus)}
235 | updateState={updateState}
236 | onDidChange={lookupEventHandler("didChange")}
237 | onFocus={lookupEventHandler("gotFocus")}
238 | onBlur={lookupEventHandler("lostFocus")}
239 | registerComponentApi={registerComponentApi}
240 | dateFormat={extractValue(node.props.dateFormat)}
241 | showWeekNumber={extractValue.asOptionalBoolean(node.props.showWeekNumber)}
242 | weekStartsOn={extractValue.asOptionalNumber(node.props.weekStartsOn)}
243 | minValue={extractValue.asOptionalString(node.props.minValue)}
244 | maxValue={extractValue.asOptionalString(node.props.maxValue)}
245 | disabledDates={extractValue(node.props.disabledDates)}
246 | inline={extractValue.asOptionalBoolean(node.props.inline, defaultProps.inline)}
247 | startText={extractValue.asOptionalString(node.props.startText)}
248 | startIcon={extractValue.asOptionalString(node.props.startIcon)}
249 | endText={extractValue.asOptionalString(node.props.endText)}
250 | endIcon={extractValue.asOptionalString(node.props.endIcon)}
251 | readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
252 | autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
253 | required={extractValue.asOptionalBoolean(node.props.required)}
254 | clearable={extractValue.asOptionalBoolean(node.props.clearable, defaultProps.clearable)}
255 | clearIcon={extractValue.asOptionalString(node.props.clearIcon)}
256 | clearToInitialValue={extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps.clearToInitialValue)}
257 | gap={extractValue.asOptionalString(node.props.gap)}
258 | emptyCharacter={extractValue.asOptionalString(node.props.emptyCharacter)}
259 | />
260 | );
261 | },
262 | );
263 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/NestedApp.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | // --- This code snippet is required to collect the theme variables used in this module
4 | $themeVars: (
5 | );
6 |
7 | @function createThemeVar($componentVariable) {
8 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
9 | @return t.getThemeVar($themeVars, $componentVariable);
10 | }
11 |
12 | $component: "NestedApp";
13 | $themeVars: t.composePaddingVars($themeVars, $component);
14 | $themeVars: t.composeBorderVars($themeVars, $component);
15 | $themeVars: t.composeTextVars($themeVars, "header-#{$component}");
16 | $backgroundColor-frame-NestedApp: createThemeVar("backgroundColor-frame-#{$component}");
17 | $gap-frame-NestedApp: createThemeVar("gap-frame-#{$component}");
18 | $marginTop-NestedApp: createThemeVar("marginTop-#{$component}");
19 | $marginBottom-NestedApp: createThemeVar("marginBottom-#{$component}");
20 | $boxShadow-NestedApp: createThemeVar("boxShadow-#{$component}");
21 | $backgroundColor-viewControls-NestedApp: createThemeVar("backgroundColor-viewControls-#{$component}"
22 | );
23 | $borderRadius-viewControls-NestedApp: createThemeVar("borderRadius-viewControls-#{$component}");
24 | $padding-viewControls-NestedApp: createThemeVar("padding-viewControls-#{$component}");
25 | $paddingVertical-viewControls-button-NestedApp: createThemeVar("paddingVertical-viewControls-button-#{$component}"
26 | );
27 | $paddingHorizontal-viewControls-button-NestedApp: createThemeVar("paddingHorizontal-viewControls-button-#{$component}"
28 | );
29 | $borderRadius-NestedApp: createThemeVar("borderRadius-#{$component}");
30 | $borderBottom-header-NestedApp: createThemeVar("borderBottom-header-#{$component}");
31 | $height-logo-splitView-NestedApp: createThemeVar("height-logo-splitView-#{$component}");
32 | $width-logo-splitView-NestedApp: createThemeVar("width-logo-splitView-#{$component}");
33 | $width-controls-NestedApp: createThemeVar("width-controls-#{$component}");
34 |
35 | // --- Split view styles
36 | $padding-button-splitView-NestedApp: createThemeVar("padding-button-splitView-#{$component}");
37 | $width-button-splitView-NestedApp: createThemeVar("width-button-splitView-#{$component}");
38 | $height-button-splitView-NestedApp: createThemeVar("height-button-splitView-#{$component}"
39 | );
40 | $backgroundColor-code-splitView-NestedApp: createThemeVar("backgroundColor-code-splitView-#{$component}"
41 | );
42 | $backgroundColor-button-splitView-NestedApp--active: createThemeVar("backgroundColor-button-splitView-#{$component}--active"
43 | );
44 | $color-button-splitView-NestedApp: createThemeVar("color-button-splitView-#{$component}"
45 | );
46 | $color-button-splitView-NestedApp--active: createThemeVar("color-button-splitView-#{$component}--active"
47 | );
48 | $borderRadius-button-splitView-NestedApp: createThemeVar("borderRadius-button-splitView-#{$component}"
49 | );
50 | $borderColor-button-splitView-NestedApp: createThemeVar("borderColor-button-splitView-#{$component}"
51 | );
52 | $color-loadingText-NestedApp: createThemeVar("color-loadingText-#{$component}");
53 | $border-NestedApp: createThemeVar("border-#{$component}");
54 |
55 | @layer components {
56 | .nestedAppPlaceholder {
57 | width: 100%;
58 | height: 100%;
59 | background-color: t.$backgroundColor;
60 | position: relative;
61 | border-radius: $borderRadius-NestedApp;
62 | }
63 |
64 | .loadingContainer {
65 | position: absolute;
66 | left: 50%;
67 | top: calc(50% - 25px);
68 | transform: translateX(-50%);
69 | /* Center perfectly on the X axis */
70 | display: flex;
71 | align-items: center;
72 | justify-content: center;
73 | /* Center the content horizontally */
74 | width: 300px;
75 | height: 50px;
76 | }
77 |
78 | .logoWrapper {
79 | width: 50px;
80 | height: 50px;
81 | transform: translateZ(0);
82 |
83 | .animatedLogoPath {
84 | will-change: stroke-dashoffset, stroke-dasharray;
85 | /* The total length of the rectangle path is ~82. */
86 | stroke-dasharray: 82;
87 | stroke-dashoffset: 82;
88 |
89 | /* Animation: name, duration, easing, and iteration count */
90 | animation: draw-loop 3s ease-in-out infinite;
91 | }
92 | }
93 |
94 | .loadingText {
95 | margin-right: 12px;
96 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
97 | font-size: 16px;
98 | /* Increased by 20% from 16px */
99 | font-weight: 500;
100 | color: $color-loadingText-NestedApp;
101 | text-align: right;
102 | }
103 |
104 | /* Defines the animation steps */
105 | @keyframes draw-loop {
106 |
107 | /* At the start, the path is not drawn */
108 | 0% {
109 | stroke-dashoffset: 82;
110 | }
111 |
112 | /* Animate to fully drawn over 40% of the duration */
113 | 40% {
114 | stroke-dashoffset: 0;
115 | }
116 |
117 | /* Hold the fully drawn state until the end */
118 | 100% {
119 | stroke-dashoffset: 0;
120 | }
121 | }
122 |
123 | .nestedAppRoot {
124 | width: 100%;
125 | height: 100%;
126 | position: relative;
127 | isolation: isolate;
128 | background-color: t.$backgroundColor;
129 | border-radius: 0 0 $borderRadius-NestedApp $borderRadius-NestedApp;
130 |
131 | &.shouldAnimate {
132 | transition: clip-path 1s, opacity 1s;
133 | clip-path: inset(50% round 50%);
134 |
135 | &:not(.initialized) {
136 | opacity: 0;
137 | }
138 |
139 | &.initialized {
140 | opacity: 1;
141 | clip-path: inset(0% round 0%);
142 | }
143 | }
144 | }
145 |
146 | // --- End of theme variables collection
147 |
148 | .nestedAppContainer {
149 | @include t.paddingVars($themeVars, $component);
150 |
151 | //https://stackoverflow.com/a/70422489
152 | //https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
153 | //" ...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:
154 | // A filter, backdrop-filter, transform, or perspective value other than none. ..."
155 |
156 | // so we do this to make the position 'fixed' elements to be positioned relative to the nestedAppContainer
157 | //transform: scale(1);
158 | margin-top: $marginTop-NestedApp;
159 | margin-bottom: $marginBottom-NestedApp;
160 | width: 100%;
161 | height: fit-content;
162 | display: flex;
163 | border: $border-NestedApp;
164 | border-radius: $borderRadius-NestedApp;
165 | flex-direction: column;
166 | gap: $gap-frame-NestedApp;
167 | background-color: $backgroundColor-frame-NestedApp;
168 | align-content: center;
169 | box-shadow: $boxShadow-NestedApp;
170 |
171 | .contentContainer {
172 | width: 100%;
173 | flex: 1;
174 | min-height: 0;
175 | display: flex;
176 | align-items: center;
177 |
178 | .splitViewMarkdown {
179 | height: 100%;
180 |
181 | :global(.global-codeBlock) {
182 | background-color: $backgroundColor-code-splitView-NestedApp;
183 | height: 100%;
184 | border: none;
185 | border-radius: 0;
186 | }
187 | }
188 | }
189 | }
190 |
191 | .hidden {
192 | display: none;
193 | }
194 |
195 | :is(html[class~="dark"]) {
196 | .preview {
197 | border: 1px solid #33404f;
198 | }
199 | }
200 |
201 | .preview {
202 | overflow: hidden;
203 | }
204 |
205 | .viewControls {
206 | display: flex;
207 | flex-direction: row;
208 | align-items: center;
209 | padding: $padding-viewControls-NestedApp;
210 | background-color: $backgroundColor-viewControls-NestedApp;
211 | border-radius: $borderRadius-viewControls-NestedApp;
212 | }
213 |
214 | .logo {
215 | width: $width-logo-splitView-NestedApp;
216 | height: $height-logo-splitView-NestedApp;
217 | }
218 |
219 | .splitViewButton {
220 | padding: $padding-button-splitView-NestedApp !important;
221 | width: $width-button-splitView-NestedApp !important;
222 | height: $height-button-splitView-NestedApp !important;
223 | color: $color-button-splitView-NestedApp !important;
224 | border-radius: $borderRadius-button-splitView-NestedApp !important;
225 | border-color: $borderColor-button-splitView-NestedApp !important;
226 |
227 | &.show {
228 | background-color: $backgroundColor-button-splitView-NestedApp--active;
229 | color: $color-button-splitView-NestedApp--active !important;
230 |
231 | &:hover {
232 | background-color: $backgroundColor-button-splitView-NestedApp--active !important;
233 | }
234 | }
235 |
236 | &.hide {
237 | background-color: transparent;
238 |
239 | &:hover {
240 | background-color: transparent !important;
241 | }
242 | }
243 | }
244 |
245 | .header {
246 | width: 100%;
247 | display: flex;
248 | align-items: center;
249 | padding: 0 t.$space-2;
250 | border-bottom: $borderBottom-header-NestedApp;
251 | justify-content: space-between;
252 |
253 | .headerText {
254 | @include t.textVars($themeVars, "header-#{$component}");
255 | padding-left: t.$space-2;
256 | margin-right: auto;
257 | }
258 |
259 | .headerButton {
260 | padding: t.$space-2 t.$space-3;
261 | }
262 |
263 | .spacer {
264 | flex: 1 1 0 !important;
265 | place-self: stretch;
266 | }
267 | }
268 |
269 | .wrapper {
270 | width: $width-controls-NestedApp;
271 | }
272 |
273 | .shadowRoot {
274 | // "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
275 | transform: scale(1);
276 | width: 100%;
277 | height: 100%;
278 | position: relative;
279 | isolation: isolate;
280 | background-color: transparent;
281 | border-radius: $borderRadius-NestedApp;
282 | }
283 |
284 | .content {
285 | width: 100%;
286 | height: 100%;
287 | overflow: hidden;
288 | border-radius: $borderRadius-NestedApp;
289 | }
290 | }
291 |
292 |
293 | // --- We export the theme variables to add them to the component renderer
294 | :export {
295 | themeVars: t.json-stringify($themeVars);
296 | }
```
--------------------------------------------------------------------------------
/docs/public/pages/routing-and-links.md:
--------------------------------------------------------------------------------
```markdown
1 | # Routing and Links
2 |
3 | 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.
4 |
5 | ## Hash routing (default)
6 |
7 | 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`.
8 |
9 | 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.
10 |
11 | You can turn off hash routing and switch to standard routing using the app's `config.json` file.
12 |
13 | ```json
14 | {
15 | "name": "MyHashRoutedApp",
16 | "appGlobals": {
17 | "useHashBasedRouting": false
18 | }
19 | };
20 | ```
21 |
22 | ## Standard routing (optional)
23 |
24 | 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.
25 |
26 | 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`
27 |
28 | 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.
29 |
30 | ``` copy {10}
31 | events {
32 | worker_connections 1024;
33 | }
34 |
35 | http {
36 | include /etc/nginx/mime.types;
37 | sendfile on;
38 |
39 | server {
40 | root /path/to/your/project;
41 |
42 | index index.html index.htm;
43 |
44 | location ~ \.(js|css|png|jpg|jpeg|gif|ico|json|woff|woff2|ttf|eot|svg|xs|xmlui)$ {
45 | add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
46 | expires off;
47 | try_files $uri =404;
48 | }
49 |
50 | location / {
51 | add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
52 | expires off;
53 | try_files $uri $uri/ /index.html;
54 | }
55 | }
56 | }
57 | ```
58 |
59 |
60 | ## Serving from a subdirectory with proxy
61 |
62 | 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.
63 |
64 | ### Nginx configuration
65 |
66 | ```nginx
67 | server {
68 | listen 80;
69 | server_name example.com;
70 |
71 | location /myapp/ {
72 | rewrite ^/myapp(/.*)$ $1 break;
73 | proxy_pass http://127.0.0.1:8080;
74 | proxy_set_header Host $host;
75 | proxy_set_header X-Real-IP $remote_addr;
76 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
77 | proxy_set_header X-Forwarded-Proto $scheme;
78 |
79 | proxy_intercept_errors on;
80 | error_page 404 = /myapp/;
81 | }
82 | }
83 | ```
84 |
85 | ### Base path configuration
86 |
87 | You'll need to configure the base path in your `index.html`:
88 |
89 | ```html
90 | <!DOCTYPE html>
91 | <html lang="en">
92 | <head>
93 | <meta charset="UTF-8" />
94 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
95 | <script>
96 | window.__PUBLIC_PATH = '/myapp'
97 | </script>
98 | <script src="xmlui/0.9.23.js"></script>
99 | </head>
100 | <body>
101 | </body>
102 | </html>
103 | ```
104 |
105 | ### How it works
106 |
107 | This configuration:
108 | - Rewrites incoming `/myapp/...` requests to remove the prefix before proxying
109 | - Proxies requests to your XMLUI server running on port 8080
110 | - Redirects 404 errors back to `/myapp/` to enable SPA fallback behavior
111 | - Works with both routing modes: Hash-based routing rarely triggers 404s, while standard routing uses the 404 redirect for client-side navigation
112 |
113 | ### Routing mode compatibility
114 |
115 | This subdirectory deployment works with both routing configurations:
116 |
117 | **Hash-based routing** (`useHashBasedRouting: true` - default):
118 | - URLs: `example.com/myapp/#/contacts`
119 | - Server sees: `example.com/myapp/`
120 | - Behavior: Serves app normally from base path
121 |
122 | **Standard routing** (`useHashBasedRouting: false` in config.json):
123 | - URLs: `example.com/myapp/contacts`
124 | - Server sees: `example.com/myapp/contacts`
125 | - Behavior: 404s redirect to `/myapp/` which loads the app, then client-side routing takes over
126 |
127 | ## Links
128 |
129 | XMLUI uses the specified links as absolute links (starting with a slash) or relative links, as the following example shows:
130 |
131 | ```xmlui-pg display
132 | <App layout="vertical">
133 | <NavPanel>
134 | <NavLink to="/">Home</NavLink>
135 | <NavLink to="/contacts">Contacts</NavLink>
136 | <NavLink to="about">About</NavLink>
137 | </NavPanel>
138 | <Pages>
139 | <Page url="/">
140 | Home
141 | </Page>
142 | <Page url="contacts">
143 | Contacts
144 | </Page>
145 | <Page url="about">
146 | About
147 | </Page>
148 | </Pages>
149 | </App>
150 | ```
151 |
152 | 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.
153 |
154 | ## Dynamic route segments
155 |
156 | 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.
157 |
158 | ```xmlui-pg display copy
159 | <App layout="vertical">
160 | <NavPanel>
161 | <NavLink to="/">Home</NavLink>
162 | <NavLink to="/account/Cameron">Cameron</NavLink>
163 | <NavLink to="/account/Joe">Joe</NavLink>
164 | <NavLink to="/account/Kathy">Kathy</NavLink>
165 | </NavPanel>
166 | <Pages>
167 | <Page url="/">
168 | Home
169 | </Page>
170 | <Page url="/account/:id">
171 | Account: {$routeParams.id}
172 | </Page>
173 | </Pages>
174 | </App>
175 | ```
176 |
177 |
178 | ## Using query parameters
179 |
180 | 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.
181 |
182 | ```xmlui-pg display copy /from=December&to=February/ /{$queryParams.from}-{$queryParams.to}/ name="try clicking Winter Report"
183 | <App layout="vertical">
184 | <NavPanel>
185 | <NavLink to="/">Home</NavLink>
186 | <NavLink to="/contacts">Contacts</NavLink>
187 | <NavLink to="/report?from=December&to=February">Winter Report</NavLink>
188 | </NavPanel>
189 | <Pages>
190 | <Page url="/">
191 | Home
192 | </Page>
193 | <Page url="contacts">
194 | Contacts
195 | </Page>
196 | <Page url="/report">
197 | Reported period: {$queryParams.from}-{$queryParams.to}
198 | </Page>
199 | </Pages>
200 | </App>
201 | ```
202 |
203 |
204 | ## Active links
205 |
206 | 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:
207 |
208 | ```xmlui-pg copy display name="Active links"
209 | <App layout="vertical">
210 | <NavPanel>
211 | <NavLink to="/">Home</NavLink>
212 | <NavLink to="/about">About</NavLink>
213 | </NavPanel>
214 | <Pages>
215 | <Page url="/">
216 | Home
217 | </Page>
218 | <Page url="/about">
219 | About this app
220 | </Page>
221 | </Pages>
222 | </App>
223 | ```
224 |
225 | 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):
226 |
227 |
228 | As a `NavLink` activity is based on matching, multiple active links may exist simultaneously. The following example demonstrates such a situation:
229 |
230 | ```xmlui-pg copy display {4-5}
231 | <App display layout="vertical">
232 | <NavPanel>
233 | <NavLink to="/">Home</NavLink>
234 | <NavLink to="/report?from=December&to=February">Winter Report</NavLink>
235 | <NavLink to="/report?from=June&to=August">Summer Report</NavLink>
236 | </NavPanel>
237 | <Pages>
238 | <Page url="/">
239 | Home
240 | </Page>
241 | <Page url="/report">
242 | Reported period: {$queryParams.from}-{$queryParams.to}
243 | </Page>
244 | </Pages>
245 | </App>
246 | ```
247 |
248 | 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:
249 |
250 | 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.
251 |
252 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroupNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | cloneElement,
3 | type CSSProperties,
4 | forwardRef,
5 | type ReactElement,
6 | type ReactNode,
7 | useContext,
8 | useEffect,
9 | useMemo,
10 | useRef,
11 | useState,
12 | } from "react";
13 | import {
14 | DropdownMenu,
15 | DropdownMenuContent,
16 | DropdownMenuItem,
17 | DropdownMenuPortal,
18 | DropdownMenuSub,
19 | DropdownMenuSubContent,
20 | DropdownMenuSubTrigger,
21 | DropdownMenuTrigger,
22 | } from "@radix-ui/react-dropdown-menu";
23 |
24 | import styles from "./NavGroup.module.scss";
25 |
26 | import type { RenderChildFn } from "../../abstractions/RendererDefs";
27 | import type { ComponentDef } from "../../abstractions/ComponentDefs";
28 | import { EMPTY_OBJECT } from "../../components-core/constants";
29 | import { mergeProps } from "../../components-core/utils/mergeProps";
30 | import { useTheme } from "../../components-core/theming/ThemeContext";
31 | import { Icon } from "../Icon/IconNative";
32 | import { NavLink } from "../NavLink/NavLinkNative";
33 | import { useAppLayoutContext } from "../App/AppLayoutContext";
34 | import { NavPanelContext } from "../NavPanel/NavPanelNative";
35 | import type { NavGroupMd } from "./NavGroup";
36 | import { useLocation } from "@remix-run/react";
37 | import classnames from "classnames";
38 | import { NavGroupContext } from "./NavGroupContext";
39 | import { getAppLayoutOrientation } from "../App/AppNative";
40 |
41 | type NavGroupComponentDef = ComponentDef<typeof NavGroupMd>;
42 |
43 | type Props = {
44 | style?: CSSProperties;
45 | label: string;
46 | icon?: React.ReactNode;
47 | to?: string;
48 | disabled?: boolean;
49 | node: NavGroupComponentDef;
50 | renderChild: RenderChildFn;
51 | initiallyExpanded: boolean;
52 | iconHorizontalExpanded?: string;
53 | iconHorizontalCollapsed?: string;
54 | iconVerticalExpanded?: string;
55 | iconVerticalCollapsed?: string;
56 | };
57 |
58 | export const defaultProps: Pick<
59 | Props,
60 | | "iconHorizontalExpanded"
61 | | "iconHorizontalCollapsed"
62 | | "iconVerticalExpanded"
63 | | "iconVerticalCollapsed"
64 | > = {
65 | iconHorizontalExpanded: "chevronright",
66 | iconHorizontalCollapsed: "chevronright",
67 | iconVerticalExpanded: "chevrondown",
68 | iconVerticalCollapsed: "chevronright",
69 | };
70 |
71 | export const NavGroup = forwardRef(function NavGroup(
72 | {
73 | node,
74 | style,
75 | label,
76 | icon,
77 | renderChild,
78 | to,
79 | disabled = false,
80 | initiallyExpanded = false,
81 | iconHorizontalCollapsed,
82 | iconHorizontalExpanded,
83 | iconVerticalCollapsed,
84 | iconVerticalExpanded,
85 | ...rest
86 | }: Props,
87 | ref,
88 | ) {
89 | const { level } = useContext(NavGroupContext);
90 | const appLayoutContext = useAppLayoutContext();
91 | const navPanelContext = useContext(NavPanelContext);
92 | const layoutIsVertical =
93 | !!appLayoutContext && getAppLayoutOrientation(appLayoutContext.layout).includes("vertical");
94 |
95 | let inline =
96 | appLayoutContext?.layout === "vertical" ||
97 | appLayoutContext?.layout === "vertical-sticky" ||
98 | appLayoutContext?.layout === "vertical-full-header";
99 |
100 | if (navPanelContext !== null) {
101 | inline = navPanelContext.inDrawer;
102 | }
103 |
104 | const navGroupContextValue = useMemo(() => {
105 | return {
106 | level: level + 1,
107 | layoutIsVertical,
108 | iconHorizontalCollapsed: iconHorizontalCollapsed ?? defaultProps.iconHorizontalCollapsed,
109 | iconHorizontalExpanded: iconHorizontalExpanded ?? defaultProps.iconHorizontalExpanded,
110 | iconVerticalCollapsed:
111 | iconVerticalCollapsed ??
112 | (level < 0 && !inline
113 | ? defaultProps.iconVerticalExpanded
114 | : defaultProps.iconVerticalCollapsed),
115 | iconVerticalExpanded: iconVerticalExpanded ?? defaultProps.iconVerticalExpanded,
116 | };
117 | }, [
118 | iconHorizontalCollapsed,
119 | iconHorizontalExpanded,
120 | iconVerticalCollapsed,
121 | iconVerticalExpanded,
122 | level,
123 | layoutIsVertical,
124 | inline,
125 | ]);
126 |
127 | return (
128 | <NavGroupContext.Provider value={navGroupContextValue}>
129 | {inline ? (
130 | <ExpandableNavGroup
131 | {...rest}
132 | to={to}
133 | style={style}
134 | label={label}
135 | icon={icon}
136 | node={node}
137 | renderChild={renderChild}
138 | ref={ref}
139 | initiallyExpanded={initiallyExpanded}
140 | disabled={disabled}
141 | />
142 | ) : (
143 | <DropDownNavGroup
144 | {...rest}
145 | label={label}
146 | icon={icon}
147 | node={node}
148 | renderChild={renderChild}
149 | ref={ref}
150 | to={to}
151 | initiallyExpanded={initiallyExpanded}
152 | disabled={disabled}
153 | />
154 | )}
155 | </NavGroupContext.Provider>
156 | );
157 | });
158 |
159 | type ExpandableNavGroupProps = {
160 | style?: CSSProperties;
161 | label: string;
162 | icon: ReactNode;
163 | node: NavGroupComponentDef;
164 | renderChild: RenderChildFn;
165 | to?: string;
166 | initiallyExpanded?: boolean;
167 | disabled?: boolean;
168 | };
169 |
170 | const ExpandableNavGroup = forwardRef(function ExpandableNavGroup(
171 | {
172 | style = EMPTY_OBJECT,
173 | label,
174 | icon,
175 | renderChild,
176 | node,
177 | to,
178 | initiallyExpanded = false,
179 | disabled = false,
180 | ...rest
181 | }: ExpandableNavGroupProps,
182 | ref,
183 | ) {
184 | const { level, iconVerticalCollapsed, iconVerticalExpanded, layoutIsVertical } =
185 | useContext(NavGroupContext);
186 | const [expanded, setExpanded] = useState(initiallyExpanded);
187 | const groupContentInnerRef = useRef<HTMLDivElement>(null);
188 | const { pathname } = useLocation();
189 |
190 | useEffect(() => {
191 | const hasActiveNavLink =
192 | groupContentInnerRef.current.querySelector(".xmlui-navlink-active") !== null;
193 | if (hasActiveNavLink) {
194 | setExpanded(true);
195 | }
196 | }, [pathname]);
197 |
198 | const toggleStyle = {
199 | ...style,
200 | "--nav-link-level": layoutIsVertical ? level : 0,
201 | };
202 |
203 | const handleClick = (e: React.MouseEvent) => {
204 | e.preventDefault();
205 | e.stopPropagation();
206 | setExpanded((prev) => !prev);
207 | };
208 |
209 | return (
210 | <>
211 | <NavLink
212 | {...rest}
213 | style={toggleStyle}
214 | onClick={handleClick}
215 | icon={icon}
216 | to={to}
217 | disabled={disabled}
218 | aria-expanded={expanded}
219 | >
220 | {label}
221 | <div style={{ flex: 1 }} />
222 | <Icon name={expanded ? iconVerticalExpanded : iconVerticalCollapsed} />
223 | </NavLink>
224 | <div
225 | aria-hidden={!expanded}
226 | className={classnames(styles.groupContent, {
227 | [styles.expanded]: expanded,
228 | })}
229 | >
230 | <div className={styles.groupContentInner} ref={groupContentInnerRef}>
231 | {renderChild(node.children)}
232 | </div>
233 | </div>
234 | </>
235 | );
236 | });
237 |
238 | const DropDownNavGroup = forwardRef(function DropDownNavGroup(
239 | {
240 | label,
241 | icon,
242 | renderChild,
243 | node,
244 | to,
245 | disabled = false,
246 | initiallyExpanded = false,
247 | ...rest
248 | }: {
249 | style?: CSSProperties;
250 | label: string;
251 | icon: ReactNode;
252 | node: NavGroupComponentDef;
253 | renderChild: RenderChildFn;
254 | to?: string;
255 | disabled?: boolean;
256 | initiallyExpanded?: boolean;
257 | },
258 | ref,
259 | ) {
260 | const {
261 | level,
262 | iconHorizontalCollapsed,
263 | iconHorizontalExpanded,
264 | iconVerticalCollapsed,
265 | iconVerticalExpanded,
266 | } = useContext(NavGroupContext);
267 | const { root } = useTheme();
268 |
269 | let Wrapper = DropdownMenu;
270 | let Trigger = DropdownMenuTrigger;
271 | let Content = DropdownMenuContent;
272 | if (level >= 1) {
273 | Wrapper = DropdownMenuSub;
274 | Trigger = DropdownMenuSubTrigger as any;
275 | Content = DropdownMenuSubContent;
276 | }
277 | const [expanded, setExpanded] = useState(initiallyExpanded);
278 | const [renderCount, setRenderCount] = useState(false);
279 |
280 | useEffect(() => setRenderCount(true), []);
281 |
282 | return (
283 | <Wrapper
284 | {...rest}
285 | open={expanded}
286 | onOpenChange={(open) => {
287 | if (renderCount) setExpanded(open);
288 | }}
289 | >
290 | <Trigger asChild disabled={disabled}>
291 | <NavLink
292 | icon={icon}
293 | style={{ flexShrink: 0 }}
294 | vertical={level >= 1}
295 | to={to}
296 | disabled={disabled}
297 | >
298 | {label}
299 | <div style={{ flex: 1 }} />
300 | {level === 0 && <Icon name={expanded ? iconVerticalExpanded : iconVerticalCollapsed} />}
301 | {level >= 1 && (
302 | <Icon name={expanded ? iconHorizontalExpanded : iconHorizontalCollapsed} />
303 | )}
304 | </NavLink>
305 | </Trigger>
306 | <DropdownMenuPortal container={root}>
307 | <Content
308 | className={styles.dropdownList}
309 | style={{ display: "flex", flexDirection: "column" }}
310 | side={"bottom"}
311 | align={"start"}
312 | >
313 | {renderChild(node.children, {
314 | wrapChild: ({ node }, renderedChild, hints) => {
315 | if (hints?.opaque) {
316 | return renderedChild;
317 | }
318 | if (node.type === "List") {
319 | return renderedChild;
320 | }
321 | if (node.type === "NavGroup") {
322 | return renderedChild;
323 | }
324 | let child = renderedChild;
325 | if (node.type === "NavLink") {
326 | child = cloneElement(renderedChild as ReactElement, {
327 | ...mergeProps((renderedChild as ReactElement).props, {
328 | vertical: true,
329 | }),
330 | });
331 | }
332 | return <DropdownMenuItem asChild={true}>{child}</DropdownMenuItem>;
333 | },
334 | })}
335 | </Content>
336 | </DropdownMenuPortal>
337 | </Wrapper>
338 | );
339 | });
340 |
```