This is page 16 of 140. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cool-queens-look.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── netlify.toml
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── 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
│ │ │ ├── Debug.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ ├── Main.xmlui.xs
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.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
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── 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
│ │ │ │ ├── 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
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ ├── tsconfig.json
│ │ └── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── 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.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── 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.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
│ ├── containers.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
│ ├── state-management.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.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
│ ├── get-langserver-metadata.mjs
│ ├── 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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── 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
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ │ ├── 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.mjs
│ ├── 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
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LineChart/LineChart.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
The LineChart component accommodates the size of its parent unless you set it explicitly:
```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
<Card height="240px" width="75%">
<LineChart
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
```xmlui-pg copy display height="300px" name="Example: dimension overwritten by LineChart" /height="240px"/ /height="200px"/
<Card height="240px">
<LineChart
height="200px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
**Key features:**
- **Flexible orientation**: Choose horizontal or vertical bar layouts
- **Multiple data series**: Display several metrics on the same chart with different colored bars
- **Stacked vs grouped**: Stack bars on top of each other or place them side by side
- **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
%-DESC-END
%-PROP-START tickFormatterY
```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterY="{(value) => '$' + value}"
/>
</App>
```
%-PROP-END
%-PROP-START tickFormatterX
```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterX="{(value) => '(' + value + ')'}"
/>
</App>
```
%-PROP-END
%-PROP-START tooltipTemplate
```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
{ 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
{ 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
{ 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
]}"
yKeys="{['A', 'B']}"
xKey="sprint"
>
<property name="tooltipTemplate">
<VStack backgroundColor='white' padding="$space-2">
<Text fontWeight='bold'>{$tooltip.label}</Text>
<Items data="{$tooltip.payload}">
<HStack gap="$space-2" verticalAlignment="center">
<Stack
width="8px"
height="8px"
backgroundColor="{$item.color}" />
<Text>{$item.label}: {$item.value}</Text>
</HStack>
</Items>
</VStack>
</property>
</LineChart>
</App>
```
The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
- `$tooltip.label`: The label for the data point (typically the yKey value)
- `$tooltip.payload`: An object containing all data values for the hovered point
- `$tooltip.active`: Boolean indicating if the tooltip is currently active
%-PROP-END
```
--------------------------------------------------------------------------------
/docs/content/components/Image.md:
--------------------------------------------------------------------------------
```markdown
# Image [#image]
`Image` displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions.
## Properties [#properties]
### `alt` [#alt]
This optional property specifies an alternate text for the image.
This is useful in two cases:
1. Accessibility: screen readers read the prop value to users so they know what the image is about.
2. The text is also displayed when the image can't be loaded for some reason (network errors, content blocking, etc.).
```xmlui-pg copy display name="Example: alt"
<App>
<Image
src="cantFindIt.jpg"
alt="This image depicts a wonderful scene not for human eyes" />
</App>
```
### `aspectRatio` [#aspectratio]
This property sets a preferred aspect ratio for the image, which will be used in calculating auto sizes and other layout functions. If this value is not used, the original aspect ratio is kept. The value can be a number of a string (such as "16/9").
```xmlui-pg copy display name="Example: aspectRatio"
<App>
<Image
src="/resources/images/components/image/breakfast.jpg"
aspectRatio="200 / 150" />
</App>
```
### `data` [#data]
This property contains the binary data that represents the image.
### `fit` (default: "contain") [#fit-default-contain]
This property sets how the image content should be resized to fit its container.
| Name | Value |
| --------- | ----- |
| `contain` | The replaced content is scaled to maintain its aspect ratio while fitting within the image's container. The entire image is made to fill the container. |
| `cover` | The image is sized to maintain its aspect ratio while filling the element's entire content box. If the image's aspect ratio does not match the aspect ratio of its container, then the image will be clipped to fit. |
```xmlui-pg copy display name="Example: fit" {5,9}
<App>
<HStack padding="1rem" height="280px" gap="1rem">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="contain"
width="240px" />
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover"
width="240px" />
</HStack>
</App>
```
### `inline` (default: false) [#inline-default-false]
When set to true, the image will be displayed as an inline element instead of a block element.
### `lazyLoad` (default: false) [#lazyload-default-false]
Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it).
Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it).
The default value is eager (\`false\`).
### `src` [#src]
This property is used to indicate the source (path) of the image to display. When not defined, no image is displayed.
## Events [#events]
### `click` [#click]
This event is triggered when the Image is clicked.
This event is triggered when the image is clicked.
```xmlui-pg copy {6} display name="Example: click"
<App>
<Stack height="280px" width="400px">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover"
onClick="toast('Image clicked')"
/>
</Stack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [borderColor](../styles-and-themes/common-units/#color)-Image | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Image | *none* | *none* |
```
--------------------------------------------------------------------------------
/xmlui/src/components/NumberBox/numberbox-abstractions.ts:
--------------------------------------------------------------------------------
```typescript
export const NUMBERBOX_MAX_VALUE = 999999999999999;
export const DECIMAL_SEPARATOR = ".";
export const EXPONENTIAL_SEPARATOR = "e";
export const INT_REGEXP = /^-?\d+$/;
export const FLOAT_REGEXP = /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/;
export const DEFAULT_STEP = 1;
export type empty = null | undefined;
export function isEmptyLike(value: string | number | empty): value is empty {
return typeof value === "undefined" || value === null || value === "";
}
export function mapToRepresentation(value: string | number | empty) {
if (typeof value === "string") return value;
if (typeof value === "number") return value.toString();
return "";
}
export function isOutOfBounds(value: number, min: number, max: number) {
return value < min || value > max;
}
export function clamp(value: number, min: number, max: number) {
let clamped = value;
if (value < min) clamped = min;
if (value > max) clamped = max;
return clamped;
}
export function toUsableNumber(value: string | number | empty, isInteger = false): number | empty {
const isUsable = isInteger ? isUsableInteger : isUsableFloat;
if (!isUsable(value)) return null;
if (typeof value === "string") {
value = isInteger ? Number.parseInt(value) : +value;
}
return value;
}
/**
* Check whether the input value is a usable number for operations.
* Passes if it's of type number or a non-empty string that evaluates to a number.
*/
export function isUsableFloat(value: string | number | empty) {
if (typeof value === "string" && value.length > 0) {
return !Number.isNaN(+value) && naiveFloatBounding(value);
}
return typeof value === "number";
}
// TEMP
// Rounding and arithmetic with large floats is a hassle if loss of precision is apparent.
// Just bound the incoming floating point value to the max value available.
// This is an edge case but makes it so that we stay consistent and can do arithmetic with the spinner box.
function naiveFloatBounding(value: string) {
const integerPart = value.split(".")[0];
return Math.abs(Number.parseInt(integerPart)) <= NUMBERBOX_MAX_VALUE;
}
/**
* Check whether the input value is a usable integer for operations.
* Passes if it's of type number and is an integer
* or a non-empty string that evaluates to an integer.
*/
export function isUsableInteger(value: string | number | empty) {
if (
typeof value === "string" &&
value.length > 0 &&
![EXPONENTIAL_SEPARATOR, DECIMAL_SEPARATOR].some((item) => value.includes(item))
) {
return Number.isSafeInteger(+value);
} else if (typeof value === "number") {
return Number.isSafeInteger(value);
}
return false;
}
// TODO:
class NumberFormatter2 {
private formatter: Intl.NumberFormat;
private model: {
value: number;
formatted: string;
stripped: string;
group: string;
decimal: string;
sign: string;
//exponent: string;
}
locale: string;
options?: Intl.NumberFormatOptions;
constructor(locale: string, options?: Intl.NumberFormatOptions) {
this.locale = locale;
this.options = options;
this.formatter = new Intl.NumberFormat(locale, options);
}
set input(value: string | number | empty) {
}
private buildModel() {
const parts = this.formatter.formatToParts(1234.5);
this.model.group = parts.find((p) => p.type === "group")?.value || "";
this.model.decimal = parts.find((p) => p.type === "decimal")?.value || "";
}
parse(value: string): number {
return 0;
}
format(value: number): string {
return this.formatter.format(value);
}
/**
* Strip all non-numeric characters but keep the type of string
* @param value
*/
sanitize(value: string): string {
return "";
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/ModalDialog.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$component: "ModalDialog";
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
// --- Theme vars for paddings
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composePaddingVars($themeVars, "overlay-#{$component}");
$padding-ModalDialog: createThemeVar("padding-#{$component}");
$backgroundColor-ModalDialog: createThemeVar("Dialog:backgroundColor-#{$component}");
$backgroundColor-overlay-ModalDialog: createThemeVar("Dialog:backgroundColor-overlay-#{$component}");
$borderRadius-ModalDialog: createThemeVar("Dialog:borderRadius-#{$component}");
$fontFamily-ModalDialog: createThemeVar("Dialog:fontFamily-#{$component}");
$textColor-ModalDialog: createThemeVar("Dialog:textColor-#{$component}");
$minWidth-ModalDialog: createThemeVar("Dialog:minWidth-#{$component}");
$maxWidth-ModalDialog: createThemeVar("Dialog:maxWidth-#{$component}");
$marginBottom-title-ModalDialog: createThemeVar("Dialog:marginBottom-title-#{$component}");
@layer components {
.overlay {
position: absolute;
display: grid;
place-items: center;
overflow-y: auto;
inset: 0;
padding: t.$space-4;
}
.fullScreen {
padding: 0;
width: 100%;
height: 100%;
display: block;
.content {
overflow: auto;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
border-radius: 0;
}
}
.overlayBg {
background-color: $backgroundColor-overlay-ModalDialog;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
position: fixed;
&.nested {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
}
.content {
background-color: $backgroundColor-ModalDialog;
border-radius: $borderRadius-ModalDialog;
font-family: $fontFamily-ModalDialog;
color: $textColor-ModalDialog;
@include t.paddingVars($themeVars, $component);
box-shadow: t.$boxShadow-spread;
transform: translate(0);
width: 90vw;
max-height: 100%;
max-width: $maxWidth-ModalDialog;
min-width: $minWidth-ModalDialog;
isolation: isolate;
position: relative;
display: flex;
flex-direction: column;
gap: t.$space-4;
}
.contentAnimation {
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.content:focus {
outline: none;
}
.dialogTitle {
flex: 1;
margin-bottom: $marginBottom-title-ModalDialog;
font-size: t.$fontSize-2xl;
}
.innerContent {
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--stack-gap-default);
flex: 1;
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes contentShow {
from {
opacity: 0;
transform: translateY(2%) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.closeButton {
position: absolute;
right: 0.5rem;
top: 0.4rem;
}
@media (max-width: 70em) {
.dialog, .content {
max-width: 90%;
}
}
@media (max-width: 50em) {
.dialog, .content {
width: 100%;
max-width: calc(100% - #{t.$space-6});
min-width: 0 !important;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/data-bindings.spec.ts:
--------------------------------------------------------------------------------
```typescript
import type { ApiInterceptorDefinition } from "../src";
import { expect, test } from "../src/testing/fixtures";
const CustomComponent = [
`
<Component name="CustomComponent">
<Text testId="dataValue">{$props.data}</Text>
</Component>
`,
];
const apiInterceptor: ApiInterceptorDefinition = {
operations: {
"load-api-data": {
url: "/api/data",
method: "get",
handler: `() => { return 'STRING_DATA_FROM_API'; }`,
},
},
};
test("raw_data binds as data", async ({ page, initTestBed }) => {
await initTestBed(`<CustomComponent raw_data="RUNNING"/>`, {
components: CustomComponent,
});
await expect(page.getByTestId("dataValue")).toHaveText("RUNNING");
});
test("inline datasource as data", async ({ page, initTestBed }) => {
await initTestBed(
`
<CustomComponent>
<property name="data">
<DataSource url="/api/data"/>
</property>
</CustomComponent>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("datasource reference as data", async ({ page, initTestBed }) => {
await initTestBed(
`
<Fragment>
<DataSource url="/api/data" id="someDataSource"/>
<CustomComponent data="{someDataSource}"/>
</Fragment>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("datasource reference as any property", async ({ page, initTestBed }) => {
await initTestBed(
`
<Fragment>
<DataSource url="/api/data" id="someDataSource"/>
<Text testId="dataValue" value="{someDataSource}"/>
</Fragment>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("datasource reference outside of implicit container", async ({ page, initTestBed }) => {
await initTestBed(
`
<Fragment>
<DataSource url="/api/data" id="someDataSource"/>
<Stack backgroundColor="lightgreen" var.something="something that makes it an implicit container">
<CustomComponent data="{someDataSource}"/>
</Stack>
</Fragment>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("datasource value as data", async ({ page, initTestBed }) => {
await initTestBed(
`
<Fragment>
<DataSource url="/api/data" id="someDataSource"/>
<CustomComponent data="{someDataSource.value}"/>
</Fragment>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("data url", async ({ page, initTestBed }) => {
await initTestBed(`<CustomComponent data="/api/data"/>`, {
components: CustomComponent,
apiInterceptor: apiInterceptor,
});
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
test("data url from binding expression", async ({ page, initTestBed }) => {
await initTestBed(
`
<Fragment>
<script>
var dataUrl = "/api/data";
</script>
<CustomComponent data="{dataUrl}"/>
</Fragment>
`,
{
components: CustomComponent,
apiInterceptor: apiInterceptor,
},
);
await expect(page.getByTestId("dataValue")).toHaveText("STRING_DATA_FROM_API");
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/ComponentDecorator.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import {
cloneElement,
forwardRef,
useCallback,
useLayoutEffect,
useRef,
useState,
} from "react";
import { composeRefs } from "@radix-ui/react-compose-refs";
import { useShallowCompareMemoize } from "./utils/hooks";
// --- Describes the properties of the decorator component
interface DecoratorProps {
// --- Attribute name and value pairs to add to the component's DOM node
attr: Record<string, any>;
// --- If true, only the ref'd child will have the attributes added
allowOnlyRefdChild?: boolean;
// --- Callback function to be called when the target component is mounted
onTargetMounted?: () => void;
// --- The component to decorate
children: React.ReactElement;
}
const HIDDEN_STYLE: React.CSSProperties = { position: "absolute", width: 0, display: "none" };
/**
* This component decorates the DOM element of a component with a set of
* attributes. We use this feature to assign helper attributes to the app's
* xmlui component nodes for testing, debugging, and other development-related
* purposes.
*/
const ComponentDecorator = forwardRef((props: DecoratorProps, forwardedRef) => {
// the concept:
// we want to add attributes to the component's DOM node even if that component doesn't handle refs
// to find the actual dom node, we use either the ref passed to the component, or the ref of the previous or next sibling
// with those sibling refs we can find the actual dom node (via nextElementSibling)
// we are making sure that the next and previous elements are not the same, to avoid adding attributes to the wrong element
const prevSiblingRef = useRef(null);
const nextSiblingRef = useRef(null);
const { onTargetMounted } = props;
const foundNode = useRef(null);
const itemRef = useRef<HTMLElement | null>(null);
const [handlesItemRefs, setHandlesItemRefs] = useState(false);
const itemRefCallback = useCallback(
(node: any) => {
itemRef.current = node;
if (node !== null) {
onTargetMounted?.();
}
setHandlesItemRefs(true);
},
[onTargetMounted],
);
const [_, setForceRender] = useState(0);
const shallowAttrs = useShallowCompareMemoize(props.attr);
const shouldRenderHelperSpan = !props.allowOnlyRefdChild && !handlesItemRefs;
// --- When the component mounts, we add the attributes to the component's DOM node
useLayoutEffect(() => {
let node;
if (handlesItemRefs) {
node = itemRef.current;
} else {
if (shouldRenderHelperSpan) {
if (foundNode.current) {
node = foundNode.current;
} else {
node =
(prevSiblingRef.current.nextElementSibling === nextSiblingRef.current
? null
: prevSiblingRef.current.nextElementSibling) || null;
foundNode.current = node;
setForceRender((prev) => prev++);
}
}
}
if (node) {
Object.entries(shallowAttrs).forEach(([key, value]) => {
if (value !== undefined) {
node.setAttribute?.(key, value);
} else {
node.removeAttribute?.(key);
}
});
}
}, [shouldRenderHelperSpan, shallowAttrs, handlesItemRefs]);
return (
<>
{!foundNode.current && shouldRenderHelperSpan && (
<span style={HIDDEN_STYLE} ref={prevSiblingRef} />
)}
{cloneElement(props.children, {
ref: forwardedRef ? composeRefs(itemRefCallback, forwardedRef) : itemRefCallback,
})}
{!foundNode.current && shouldRenderHelperSpan && (
<span style={HIDDEN_STYLE} ref={nextSiblingRef} />
)}
</>
);
});
ComponentDecorator.displayName = "ComponentDecorator";
export default ComponentDecorator;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Link/Link.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "Link";
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composePaddingVars($themeVars, "icon-#{$component}");
$themeVars: t.composeBorderVars($themeVars, $component);
$themeVars: t.composeTextVars($themeVars, $component);
$textColor-Link--active: createThemeVar("textColor-#{$component}--active");
$textColor-Link--hover: createThemeVar("textColor-#{$component}--hover");
$textColor-Link--hover--active: createThemeVar("textColor-#{$component}--hover--active");
$fontWeight-Link--active: createThemeVar("fontWeight-#{$component}--active");
$gap-icon-Link: createThemeVar("gap-icon-#{$component}");
$textUnderlineOffset-Link: createThemeVar("textUnderlineOffset-#{$component}");
$textDecorationLine-Link: createThemeVar("textDecorationLine-#{$component}");
$textDecorationColor-Link: createThemeVar("textDecorationColor-#{$component}");
$textDecorationColor-Link--hover: createThemeVar("textDecorationColor-#{$component}--hover");
$textDecorationColor-Link--active: createThemeVar("textDecorationColor-#{$component}--active");
$textDecorationStyle-Link: createThemeVar("textDecorationStyle-#{$component}");
$textDecorationThickness-Link: createThemeVar("textDecorationThickness-#{$component}");
@layer components {
.container {
@include t.borderVars($themeVars, $component);
@include t.paddingVars($themeVars, $component);
@include t.textVars($themeVars, $component);
flex-shrink: 0;
cursor: pointer;
text-decoration: none;
width: fit-content;
max-width: 100%;
max-height: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
&.active {
color: $textColor-Link--active;
font-weight: $fontWeight-Link--active;
}
&.disabled {
pointer-events: none;
}
&:not(.disabled) {
&:hover {
color: $textColor-Link--hover;
}
&:focus-visible {
outline-width: createThemeVar("outlineWidth-#{$component}--focus");
outline-color: createThemeVar("outlineColor-#{$component}--focus");
outline-style: createThemeVar("outlineStyle-#{$component}--focus");
outline-offset: createThemeVar("outlineOffset-#{$component}--focus");
}
&.active {
&:hover {
color: $textColor-Link--hover--active;
}
}
}
}
.iconWrapper {
@include t.paddingVars($themeVars, "icon-#{$component}");
padding-right: $gap-icon-Link;
line-height: 0;
}
.container:not(.active) {
text-underline-offset: $textUnderlineOffset-Link;
text-decoration-line: $textDecorationLine-Link;
text-decoration-color: $textDecorationColor-Link;
&:not([disabled]) {
&:hover {
text-decoration-color: $textDecorationColor-Link--hover;
text-decoration-style: $textDecorationStyle-Link;
text-decoration-thickness: $textDecorationThickness-Link;
&:has(> button) {
text-decoration-line: none;
}
}
&:active {
text-decoration-color: $textDecorationColor-Link--active;
text-decoration-style: $textDecorationStyle-Link;
text-decoration-thickness: $textDecorationThickness-Link;
&:has(> button) {
text-decoration-line: none;
}
}
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/ItemWithLabel.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties, ForwardedRef, ReactElement, ReactNode } from "react";
import { cloneElement, forwardRef, useId } from "react";
import classnames from "classnames";
import { Slot } from "@radix-ui/react-slot";
import styles from "./FormItem.module.scss";
import type { LabelPosition } from "../abstractions";
import { Spinner } from "../Spinner/SpinnerNative";
import { PART_LABELED_ITEM, PART_LABEL } from "../../components-core/parts";
// Component part names
type ItemWithLabelProps = {
id?: string;
labelPosition?: LabelPosition;
style?: CSSProperties;
className?: string;
labelStyle?: CSSProperties;
label?: string;
labelWidth?: string;
labelBreak?: boolean;
enabled?: boolean;
required?: boolean;
children: ReactNode;
validationInProgress?: boolean;
shrinkToLabel?: boolean;
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
isInputTemplateUsed?: boolean;
onLabelClick?: () => void;
validationResult?: ReactNode;
layoutContext?: any;
testId?: string;
};
export const defaultProps: Pick<ItemWithLabelProps, "labelBreak"> = {
labelBreak: true,
};
const numberRegex = /^[0-9]+$/;
export const ItemWithLabel = forwardRef(function ItemWithLabel(
{
id,
labelPosition = "top",
style = {},
className,
label,
labelBreak = defaultProps.labelBreak,
labelWidth,
enabled = true,
required = false,
children,
validationInProgress = false,
shrinkToLabel = false,
onFocus,
onBlur,
labelStyle,
validationResult,
isInputTemplateUsed = false,
onLabelClick,
layoutContext,
...rest
}: ItemWithLabelProps,
ref: ForwardedRef<HTMLDivElement>,
) {
const generatedId = useId();
const inputId = id || generatedId;
if (label === undefined && !validationResult) {
return (
<Slot
{...rest}
data-part-id={PART_LABELED_ITEM}
style={style}
className={className}
id={inputId}
ref={ref}
>
{children}
</Slot>
);
}
return (
<div {...rest} ref={ref} style={style} className={classnames(className, styles.itemWithLabel)}>
<div
className={classnames(styles.container, {
[styles.top]: labelPosition === "top",
[styles.bottom]: labelPosition === "bottom",
[styles.start]: labelPosition === "start",
[styles.end]: labelPosition === "end",
[styles.shrinkToLabel]: shrinkToLabel,
})}
>
{label && (
<label
data-part-id={PART_LABEL}
htmlFor={inputId}
onClick={onLabelClick || (() => document.getElementById(inputId)?.focus())}
style={{
...labelStyle,
width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
flexShrink: labelWidth !== undefined ? 0 : undefined,
}}
className={classnames(styles.inputLabel, {
[styles.required]: required,
[styles.disabled]: !enabled,
[styles.labelBreak]: labelBreak,
})}
>
{label} {required && <span className={styles.requiredMark}>*</span>}
{validationInProgress && (
<Spinner
style={{ height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" }}
/>
)}
</label>
)}
{cloneElement(children as ReactElement, {
id: !isInputTemplateUsed ? inputId : undefined,
style: undefined,
className: undefined,
"data-part-id": PART_LABELED_ITEM,
})}
</div>
{validationResult}
</div>
);
});
```
--------------------------------------------------------------------------------
/docs/public/pages/reactive-intro.md:
--------------------------------------------------------------------------------
```markdown
# Reactive data binding
Let's load that same London tube data into a [Select](/components/Select) component.
```xmlui-pg height="280px" name="pick a station"
---app display
<App>
<Select id="lines" initialValue="bakerloo" dropdownHeight="200px">
<Items data="https://api.tfl.gov.uk/line/mode/tube/status">
<Option value="{$item.id}" label="{$item.name}" />
</Items>
</Select>
</App>
```
The `Select` uses the same API as the `List`. It contains an <a href="/components/Items">Items</a> component which is another way to loop through a sequence and embed a component that receives each item. In this case what's embedded is a selectable <a href="/components/Option">Option</a> which again receives the `$item` variable.
Nothing happens yet when you select a tube line. Let's wire up the selection to display details for the selected line in a <a href="/components/Table">Table</a>.
```xmlui-pg name="pick a station"
---app display /lines/ /tubeStations/
<App>
<Select id="lines" initialValue="bakerloo">
<Items data="https://api.tfl.gov.uk/line/mode/tube/status">
<Option value="{$item.id}" label="{$item.name}" />
</Items>
</Select>
<DataSource
id="tubeStations"
when="{lines.value}"
url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
resultSelector="stations"/>
<Table data="{tubeStations}" height="280px">
<Column bindTo="name" />
<Column bindTo="modes" />
</Table>
</App>
```
The <a href="/components/DataSource">DataSource</a> component works like the `data` attribute we used with `List` and `Items`: it fetches from a REST endpoint. Unlike `List`,`Select`, and `Table`, `DataSource` isn't a visible component. It works behind the scenes to capture data for use by visible components.
In this case the returned data object is big and complex, and we only want to display data from the `stations` object nested within it.
The `resultSelector` property on the `DataSource` targets the nested `stations` object so we can feed just that data into the table.
## Reactive magic
The `Select` is wired to the `Table`. When you make a new selection, the table fills with details for the selected line. Try it!
How does this work? Note how the `Select` declares the property `id="lines"`.
```xmlui /lines/
<Select id="lines" initialValue="bakerloo" width="30%">
```
That makes `lines` a variable accessible other XMLUI components, and `lines.value` holds the value of the current selection.
Now look at the `url` property of the `DataSource`.
```xmlui /{lines.value}/
<DataSource
id="tubeStations"
url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
resultSelector="stations"/>
```
It embeds a reference to `lines.value`. When you loaded this page, that URL fetched details for the initial value of the `Select`. Changing the selection changes `lines.value` which causes the `DataSource` to fetch a new batch of details. Likewise the `Table`'s `data` property refers to `tubeStations` (the `DataSource` id) so it automatically displays the new data.
There's a name for this pattern: reactive data binding. It's what spreadsheets do when a change in one cell propagates to others that refer to it. And it's what the popular framework React enables for web apps. React, as you may know, is a complex beast that only expert programmers can tame. Fortunately the expert programmers who build XMLUI have done that for you. When you build apps declaratively with XMLUI you enjoy the benefit of reactive data binding without the burden of React's complexity. You don't need to write code to make this magic happen, it's automatic!
So far we've seen examples of built-in XMLUI components. But it's easy to make your own too, in the next chapter we'll see how.
```
--------------------------------------------------------------------------------
/xmlui/src/components/TextArea/TextArea.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "TextArea";
$themeVars: t.composePaddingVars($themeVars, $componentName);
// --- CSS properties of a particular Textarea variant
@mixin variant($variantName) {
border-radius: createThemeVar("Input:borderRadius-#{$componentName}-#{$variantName}");
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}");
border-width: createThemeVar("Input:borderWidth-#{$componentName}-#{$variantName}");
border-style: createThemeVar("Input:borderStyle-#{$componentName}-#{$variantName}");
font-size: createThemeVar("Input:fontSize-#{$componentName}-#{$variantName}");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}");
color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}");
&:hover {
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--hover");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}--hover"
);
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--hover");
color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}--hover");
}
&:focus-within {
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--focus");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}--focus"
);
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--focus");
color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}--focus");
}
&:focus-visible {
outline-width: createThemeVar("Input:outlineWidth-#{$componentName}-#{$variantName}--focus");
outline-color: createThemeVar("Input:outlineColor-#{$componentName}-#{$variantName}--focus");
outline-style: createThemeVar("Input:outlineStyle-#{$componentName}-#{$variantName}--focus");
outline-offset: createThemeVar("Input:outlineOffset-#{$componentName}-#{$variantName}--focus");
}
&::placeholder {
color: createThemeVar("Input:textColor-placeholder-#{$componentName}-#{$variantName}");
font-size: createThemeVar("Input:fontSize-placeholder-#{$componentName}-#{$variantName}");
}
}
@layer components {
.textarea {
display: block;
width: 100%;
line-height: 1.5em;
outline: none;
resize: none;
border-style: solid;
border-width: 1px;
transition:
border 0.1s ease-in-out,
box-shadow 0.1s ease-in-out,
background 0.1s ease-in-out;
@include t.paddingVars($themeVars, $componentName);
@include variant("default");
&.error {
@include variant("error");
}
&.warning {
@include variant("warning");
}
&.valid {
@include variant("success");
}
&:is(:disabled) {
cursor: not-allowed;
background-color: createThemeVar("Input:backgroundColor-#{$componentName}--disabled");
color: createThemeVar("Input:textColor-#{$componentName}--disabled");
border-color: createThemeVar("Input:borderColor-#{$componentName}--disabled");
}
}
.resizeHorizontal {
resize: horizontal;
}
.resizeVertical {
resize: vertical;
}
.resizeBoth {
resize: both;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/ParserError.ts:
--------------------------------------------------------------------------------
```typescript
// The common root class of all parser error objects
export class ParserError extends Error {
constructor(
message: string,
public code?: string,
) {
super(`${code ? `${code}: ` : ""}${message}`);
// --- Set the prototype explicitly.
Object.setPrototypeOf(this, ParserError.prototype);
}
}
// Describes the structure of error messages
export interface ParserErrorMessage {
code: ErrorCodes;
text: string;
position: number;
line: number;
column: number;
}
export type ErrorCodes =
| "U001"
| "U002"
| "U003"
| "U004"
| "U005"
| "U006"
| "U007"
| "U008"
| "U009"
| "U010"
| "U011"
| "U012"
| "U013"
| "U014"
| "U015"
| "T001"
| "T002"
| "T003"
| "T004"
| "T005"
| "T006"
| "T007"
| "T008"
| "T009"
| "T010"
| "T011"
| "T012"
| "T013"
| "T014"
| "T015"
| "T016"
| "T017"
| "T018"
| "T019"
| "T020"
| "T021"
| "T022"
| "T023"
| "T024"
| "T025"
| "T026"
| "T027"
| "T028"
| "T029";
// Error message type description
type ErrorText = Record<ErrorCodes, string>;
// The error messages of error codes
export const errorMessages: ErrorText = {
U001: "Unexpected token: {0}.",
U002: "A component definition can have exactly one XMLUI element.",
U003: "A '<' token expected.",
U004: "A node identifier expected.",
U005: "A '</' token expected.",
U006: "A '>' or '/>' token expected.",
U007: "An '{0}' ID expected in the closing tag but '{1}' received.",
U008: "A '>' token expected.",
U009: "An attribute identifier expected.",
U010: "An '=' token expected.",
U011: "An attribute value expected.",
U012: "Duplicated attribute: '{0}'.",
U013: "Attribute name cannot start with an uppercase letter.",
U014: "An '{0}' ID expected in the closing tag's namespace but '{1}' received.",
U015: "Unexpected token in text element: {0}.",
T001: "A component definition must have exactly one XMLUI element.",
T002: "A component definition's name must start with an uppercase letter.",
T003: "A reusable component must have a non-empty name.",
T004: "A reusable component's name must start with an uppercase letter.",
T005: "A reusable component must have at least one nested component definition.",
T006: "A reusable component definition cannot nest another one.",
T007: `Invalid attribute name: '{0}'`,
T008: `Event attribute names should not start with 'on' prefix: '{0}'`,
T009: `Invalid node name '{0}' in a component definition`,
T010: `The '{0}' element does not accept a text child`,
T011: "Only 'name', 'value', and type hint attributes are accepted in '{0}'.",
T012: "The 'name' attribute in '{0}' is required.",
T013: "A loader element must have an id.",
T014: "A loader element must not have '{0}'.",
T015: "The uses element must define only a non-empty 'value' attribute.",
T016: "Only 'field' or 'item' are accepted as a child element.",
T017: "Cannot mix 'field' and 'item' nodes within an element.",
T018: "The '{0}' node cannot have a 'name' attribute.",
T019: "The 'value' attribute in '{0}' is required.",
T020: "Cannot mix nested components and non-component children.",
T021: "Invalid reusable component attribute '{0}'.",
T022: "The 'script' tag must not have any attribute.",
T023: "A 'script' tag cannot nest other child nodes, only text.",
T024: "Cannot put a reusable component definitions into a slot.",
T025: "Duplicate xmlns found: '{0}'.",
T026: "The top level component's name cannot have a namespace.",
T027: "Cannot resolve namespace '{0}'. It was not defined in any of the ancestor components.",
T028: "Incorrect namespace value '{0}'. {1}",
T029: "Incorrect scheme specified before ':' (colon) in namespace {0}. Delete it to get the default '{1}'.",
};
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/CodeSelector.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useMemo, useState } from "react";
import * as RadixSelect from "@radix-ui/react-select";
import selectStyles from "./Select.module.scss";
import { usePlayground } from "../hooks/usePlayground";
import { contentChanged } from "../state/store";
import { useTheme, Button, type CompoundComponentDef, Icon, type ThemeDefinition } from "xmlui";
export const SelectItem = forwardRef(({ children, className, ...props }: any, forwardedRef) => {
return (
<RadixSelect.Item className={selectStyles.RadixMenuItem} {...props} ref={forwardedRef}>
<RadixSelect.ItemText>{children}</RadixSelect.ItemText>
</RadixSelect.Item>
);
});
SelectItem.displayName = "SelectItem";
export const CodeSelector = () => {
const { appDescription, options, dispatch } = usePlayground();
const [open, setOpen] = useState(false);
const { root } = useTheme();
const selectedValue = useMemo(() => {
let content = "";
if (options.content === "app") {
content = "Main.xmlui";
} else if (content === "config") {
content = "config.json";
} else if (
appDescription.config?.themes?.some((theme: ThemeDefinition) => theme.id === options.content)
) {
content = `${options.content}.json`;
} else if (
appDescription.components?.some(
(component: CompoundComponentDef) =>
component.name.toLowerCase() === options.content.toLowerCase(),
)
) {
content = `${options.content}.xmlui`;
}
return content;
}, [appDescription.components, appDescription.config?.themes, options.content]);
return (
<RadixSelect.Root
open={open}
onOpenChange={(open) => setOpen(open)}
value={options.content}
onValueChange={(value) => dispatch(contentChanged(value))}
>
<RadixSelect.Trigger aria-label="component">
<Button themeColor="primary" variant="ghost">
<RadixSelect.Value>{selectedValue}</RadixSelect.Value>
<RadixSelect.Icon className={selectStyles.SelectIcon}>
{open ? <Icon name="chevronup" /> : <Icon name="chevrondown" />}
</RadixSelect.Icon>
</Button>
</RadixSelect.Trigger>
<RadixSelect.Portal container={root}>
<RadixSelect.Content
className={selectStyles.RadixMenuContent}
side="bottom"
align="start"
position="popper"
>
<RadixSelect.Viewport>
<RadixSelect.Group>
<SelectItem value="app" key="app">
Main.xmlui
</SelectItem>
</RadixSelect.Group>
{appDescription.config?.themes?.length > 0 && (
<RadixSelect.Group>
<RadixSelect.Label className={selectStyles.SelectLabel}>Themes</RadixSelect.Label>
{appDescription.config?.themes?.map((theme: ThemeDefinition, index: number) => (
<SelectItem value={theme.id} key={index}>
{`${theme.id}.json`}
</SelectItem>
))}
</RadixSelect.Group>
)}
{appDescription.components?.length > 0 && (
<RadixSelect.Group>
<RadixSelect.Label className={selectStyles.SelectLabel}>
Components
</RadixSelect.Label>
{appDescription.components?.map(
(component: CompoundComponentDef, index: number) => (
<SelectItem value={component.name} key={index}>
{`${component.name}.xmlui`}
</SelectItem>
),
)}
</RadixSelect.Group>
)}
</RadixSelect.Viewport>
</RadixSelect.Content>
</RadixSelect.Portal>
</RadixSelect.Root>
);
};
```
--------------------------------------------------------------------------------
/xmlui/tests/language-server/mockData.ts:
--------------------------------------------------------------------------------
```typescript
import { MetadataProvider, ComponentMetadataCollection } from "../../src/language-server/services/common/metadata-utils";
export const mockMetadata = {
"Stack": {
"description": "`Stack` is a layout container displaying children in a horizontal or vertical stack.",
"props": {
"gap": {
"description": "Optional size value indicating the gap between child elements.",
"valueType": "string",
"defaultValue": "$gap-normal"
},
"reverse": {
"description": "Optional boolean property to reverse the order of child elements.",
"valueType": "boolean",
"defaultValue": false
},
"wrapContent": {
"description": "Optional boolean which wraps the content if set to true and the available space is not big enough. Works only with horizontal orientations.",
"valueType": "boolean",
"defaultValue": false
},
"orientation": {
"description": "An optional property that governs the Stack's orientation (whether the Stack lays out its children in a row or a column).",
"availableValues": [
"horizontal",
"vertical"
],
"valueType": "string",
"defaultValue": "vertical"
},
"horizontalAlignment": {
"description": "Manages the horizontal content alignment for each child element in the Stack.",
"availableValues": [
"start",
"center",
"end"
],
"valueType": "string",
"defaultValue": "start"
},
"verticalAlignment": {
"description": "Manages the vertical content alignment for each child element in the Stack.",
"availableValues": [
"start",
"center",
"end"
],
"valueType": "string",
"defaultValue": "start"
},
"hoverContainer": {
"description": "Reserved for future use",
"isInternal": true
},
"visibleOnHover": {
"description": "Reserved for future use",
"isInternal": true
}
},
"events": {
"click": {
"description": "This event is triggered when the Stack is clicked."
},
"mounted": {
"description": "Reserved for future use",
"isInternal": true
}
},
},
"Button": {
"description": "Button is an interactive element that triggers an action when clicked.",
"status": "stable",
"props": {
"label": {
"description": "This property is an optional string to set a label for the Button. If no label is specified and an icon is set, the Button will modify its styling to look like a small icon button. When the Button has nested children, it will display them and ignore the value of the `label` prop.",
"type": "string"
},
"variant": {
"description": "The button variant determines the level of emphasis the button should possess.",
"isRequired": false,
"type": "string",
"availableValues": [
{
"value": "solid",
"description": "A button with a border and a filled background."
},
{
"value": "outlined",
"description": "The button is displayed with a border and a transparent background."
},
{
"value": "ghost",
"description": "A button with no border and fill. Only the label is visible; the background is colored when hovered or clicked."
}
],
"defaultValue": "solid"
},
},
"events": {
"click": {
"description": "This event is triggered when the Button is clicked."
},
},
},
}
export const mockMetadataProvider = new MetadataProvider(mockMetadata as ComponentMetadataCollection);
```
--------------------------------------------------------------------------------
/xmlui/src/components/TableOfContents/TableOfContentsNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
type CSSProperties,
type ForwardedRef,
forwardRef,
useEffect,
useRef,
useState,
} from "react";
import { Link } from "@remix-run/react";
import scrollIntoView from "scroll-into-view-if-needed";
import { composeRefs } from "@radix-ui/react-compose-refs";
import classnames from "classnames";
import styles from "./TableOfContents.module.scss";
import { useTableOfContents } from "../../components-core/TableOfContentsContext";
import { useIsomorphicLayoutEffect } from "../../components-core/utils/hooks";
type Props = {
style?: CSSProperties;
className?: string;
smoothScrolling?: boolean;
maxHeadingLevel?: number;
omitH1?: boolean;
};
export const defaultProps = {
smoothScrolling: false,
maxHeadingLevel: 6,
omitH1: false,
};
export const TableOfContents = forwardRef(function TableOfContents(
{
style,
smoothScrolling = defaultProps.smoothScrolling,
maxHeadingLevel = defaultProps.maxHeadingLevel,
omitH1 = defaultProps.omitH1,
className,
...rest
}: Props,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
const tocRef = useRef<HTMLDivElement>(null);
const {
headings,
scrollToAnchor,
subscribeToActiveAnchorChange,
activeAnchorId: initialActiveAnchorId,
} = useTableOfContents();
const [activeAnchorId, setActiveId] = useState(initialActiveAnchorId);
useIsomorphicLayoutEffect(() => {
return subscribeToActiveAnchorChange((id) => {
const foundHeading = headings.find((heading) => heading.id === id);
if (foundHeading?.level <= maxHeadingLevel) {
setActiveId(id);
}
});
}, [headings, maxHeadingLevel, subscribeToActiveAnchorChange]);
const ref = forwardedRef ? composeRefs(tocRef, forwardedRef) : tocRef;
useEffect(() => {
if (activeAnchorId && tocRef?.current) {
const activeAnchor = tocRef.current.querySelector(`#${activeAnchorId}`);
if (activeAnchor) {
scrollIntoView(activeAnchor, {
block: "center",
inline: "center",
behavior: "smooth",
scrollMode: "always",
boundary: tocRef.current,
});
}
}
}, [activeAnchorId, headings]);
return (
<nav
{...rest}
aria-label="Table of Contents"
className={classnames(styles.nav, className)}
ref={ref}
style={style}
>
<ul className={styles.list}>
{headings.map((value) => {
if (value.level <= maxHeadingLevel && (!omitH1 || value.level !== 1)) {
return (
<li
key={value.id}
className={classnames(styles.listItem, {
[styles.active]: value.id === activeAnchorId,
})}
>
<Link
aria-current={value.id === activeAnchorId ? "page" : "false"}
className={classnames(styles.link, {
[styles.head_1]: value.level === 1,
[styles.head_2]: value.level === 2,
[styles.head_3]: value.level === 3,
[styles.head_4]: value.level === 4,
[styles.head_5]: value.level === 5,
[styles.head_6]: value.level === 6,
})}
to={`#${value.id}`}
onClick={(event) => {
// cmd/ctrl + click - open in new tab, don't prevent that
if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
event.preventDefault();
}
scrollToAnchor(value.id, smoothScrolling);
}}
id={value.id}
>
{value.text}
</Link>
</li>
);
}
return null;
})}
</ul>
</nav>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Switch/Switch.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
## Switch Values
The `initialValue` and `value` properties of the switch are transformed to a Boolean value to display the on (`true`) or off (`false`) state with this logic:
- `null` and `undefined` go to `false`.
- If the property is Boolean, the property value is used as is.
- If it is a number, `NaN` and `0` result in `false`; other values represent `true`.
- If the property is a string, the empty string and the literal "false" string result in `false`; others result in `true`.
- The empty array value goes to `false`; other array values result in `true`.
- Object values with no properties result in `false`; other values represent `true`.
%-DESC-END
%-PROP-START enabled
This boolean property indicates whether the checkbox responds to user events (i.e. clicks);
it is `true` by default.
```xmlui-pg copy {4-5, 9-10} display name="Example: enabled"
<App>
Enabled switches:
<HStack>
<Switch initialValue="true" enabled="true" />
<Switch initialValue="false" enabled="true" />
</HStack>
Disabled switches:
<HStack>
<Switch initialValue="true" enabled="false" />
<Switch initilaValue="false" enabled="false" />
</HStack>
</App>
```
%-PROP-END
%-PROP-START label
This property sets the label of the component.
```xmlui-pg copy display name="Example: label"
<App>
<Switch label="Example label" initialValue="true" />
<Switch label="Another label" intialValue="false" />
</App>
```
%-PROP-END
%-PROP-START labelPosition
```xmlui-pg copy display name="Example: labelPosition"
<App>
<Switch label="Top label" labelPosition="top" initialValue="true" />
<Switch label="End label" labelPosition="end" initialValue="true" />
<Switch label="Bottom label" labelPosition="bottom" initialValue="true" />
<Switch label="Start label" labelPosition="start" initialValue="true" />
</App>
```
%-PROP-END
%-PROP-START readOnly
If true, the value of the component cannot be modified.
```xmlui-pg copy display name="Example: readOnly"
<App>
<Switch readOnly="true" label="Checked" initialValue="true" />
<Switch readOnly="true" label="Unchecked" intialValue="false" />
</App>
```
%-PROP-END
%-API-START setValue
```xmlui-pg copy {10,13,15} display name="Example: value and setValue"
<App var.changes="">
<Switch
id="mySwitch"
readOnly="true"
label="This switch can be set only programmatically"
onDidChange="changes += '+'" />
<HStack>
<Button
label="Check"
onClick="mySwitch.setValue(true)" />
<Button
label="Uncheck"
onClick="mySwitch.setValue(false)" />
</HStack>
<Text>The switch is {checkbox.value ? "checked" : "unchecked"}</Text>
<Text value="Changes: {changes}" />
</App>
```
%-API-END
%-EVENT-START didChange
This event is triggered when the `Switch` is toggled due to user interaction.
A read-only switch never fires this event, and it won't fire if the switch's value is set programmatically.
```xmlui-pg copy display name="Example: didChange"
<App verticalAlignment="center" var.changes="">
<Switch label="Changeable" onDidChange="changes += '+'" />
<Switch label="Readonly" readOnly="true" onDidChange="changes += '-'" />
<Text value="Changes: {changes}" />
</App>
```
%-EVENT-END
%-EVENT-START gotFocus
This event is triggered when the `Switch` receives focus.
Click the `Switch` in the example demo to change the label text. Note how clicking elsewhere resets the text to the original.
```xmlui-pg copy {4,5} display name="Example: gotFocus"
<App var.focused="{false}" verticalAlignment="center">
<Switch
value="true"
onGotFocus="focused = true"
onLostFocus="focused = false"
/>
<Text value="{focused === true ? 'I am focused!' : 'I have lost the focus!'}" />
</App>
```
%-EVENT-END
This event is triggered when the `Switch` loses focus.
(See the example above)
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tree/TreeComponent.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "Tree";
// Tree component theme variables
$backgroundColor-Tree-row--selected: createThemeVar("backgroundColor-#{$component}-row--selected");
$backgroundColor-Tree-row--hover: createThemeVar("backgroundColor-#{$component}-row--hover");
$textColor-Tree: createThemeVar("textColor-#{$component}");
$textColor-Tree--selected: createThemeVar("textColor-#{$component}--selected");
$textColor-Tree--hover: createThemeVar("textColor-#{$component}--hover");
$borderColor-Tree-row--focus: createThemeVar("borderColor-#{$component}-row--focus");
$outlineColor-Tree--focus: createThemeVar("outlineColor-#{$component}--focus");
$outlineWidth-Tree--focus: createThemeVar("outlineWidth-#{$component}--focus");
$outlineStyle-Tree--focus: createThemeVar("outlineStyle-#{$component}--focus");
$outlineOffset-Tree--focus: createThemeVar("outlineOffset-#{$component}--focus");
@layer components {
.wrapper {
flex: 1;
// Add small padding to provide breathing room for focus indicators
padding: 1px 2px;
// Remove focus outline since individual tree items handle focus styling
outline: none;
&:focus {
outline: none;
}
}
.rowWrapper {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
min-width: 0;
height: 100%;
color: $textColor-Tree;
position: relative;
// Add small margin to ensure focus ring has space
margin: 0 1px;
// Use border-radius to make focus ring more polished
border-radius: 2px;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// Remove browser default focus outline since we handle focus styling with CSS classes
outline: none;
&:focus {
outline: none;
}
&.selected {
background-color: $backgroundColor-Tree-row--selected;
color: $textColor-Tree--selected;
&:focus-visible {
// Use inset box-shadow to stay within bounds
box-shadow: inset 0 0 0 2px $outlineColor-Tree--focus;
}
}
&.focused {
// Use inset box-shadow to stay within row bounds and avoid clipping
box-shadow: inset 0 0 0 2px $outlineColor-Tree--focus;
}
&:hover:not(.selected) {
background-color: $backgroundColor-Tree-row--hover;
color: $textColor-Tree--hover;
}
&:hover {
.addButton {
opacity: 1;
}
}
}
.gutter {
flex-direction: row;
flex-shrink: 0;
height: 100%;
display: flex;
align-items: center;
}
.toggleWrapper {
width: 40px;
height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.hidden {
visibility: hidden;
pointer-events: none;
}
}
.toggleIcon {
transition: transform 0.2s ease-in-out;
color: currentColor;
display: flex;
align-items: center;
justify-content: center;
}
.depthPlaceholder {
flex-shrink: 0;
}
.labelWrapper{
white-space: nowrap;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
flex-shrink: 0;
min-width: fit-content;
user-select: none;
}
.addButton {
height: 100%;
width: 32px;
background-color: transparent;
border: 0;
cursor: pointer;
opacity: 0;
flex-shrink: 0;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/BarChart/BarChart.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
The BarChart component accommodates the size of its parent unless you set it explicitly:
```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
<Card height="240px" width="75%">
<BarChart
orientation="horizontal"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
```xmlui-pg copy display height="300px" name="Example: dimension overwritten by BarChart" /height="240px"/ /height="200px"/
<Card height="240px">
<BarChart
orientation="horizontal"
height="200px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
**Key features:**
- **Flexible orientation**: Choose horizontal or vertical bar layouts
- **Multiple data series**: Display several metrics on the same chart with different colored bars
- **Stacked vs grouped**: Stack bars on top of each other or place them side by side
- **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
%-DESC-END
%-PROP-START tickFormatterY
```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
<App>
<BarChart
orientation="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterY="{(value) => '$' + value}"
/>
</App>
```
%-PROP-END
%-PROP-START tickFormatterX
```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
<App>
<BarChart
orientation="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterX="{(value) => '(' + value + ')'}"
/>
</App>
```
%-PROP-END
%-PROP-START tooltipTemplate
```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
<App>
<BarChart
orientation="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
{ 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
{ 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
{ 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
]}"
yKeys="{['A', 'B']}"
xKey="sprint"
>
<property name="tooltipTemplate">
<VStack backgroundColor='white' padding="$space-2">
<Text fontWeight='bold'>{$tooltip.label}</Text>
<Items data="{$tooltip.payload}">
<HStack gap="$space-2" verticalAlignment="center">
<Stack
width="8px"
height="8px"
backgroundColor="{$item.color}" />
<Text>{$item.label}: {$item.value}</Text>
</HStack>
</Items>
</VStack>
</property>
</BarChart>
</App>
```
The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
- `$tooltip.label`: The label for the data point (typically the yKey value)
- `$tooltip.payload`: An object containing all data values for the hovered point
- `$tooltip.active`: Boolean indicating if the tooltip is currently active
%-PROP-END
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/markdown/parse-binding-expression.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { parseBindingExpression } from "../../../src/components/Markdown/parse-binding-expr";
describe("parseBindingExpression - Safari Compatibility", () => {
// Simple mock value extractor for testing basic functionality
const mockValueExtractor = ((expr: any) => `EXTRACTED(${expr})`) as any;
it("should handle empty binding expressions", () => {
const input = "Some text @{} more text";
const result = parseBindingExpression(input, mockValueExtractor);
// Should replace empty binding with empty string
expect(result).toBe("Some text more text");
});
it("should handle binding expressions with content", () => {
const input = "Hello @{name}!";
const result = parseBindingExpression(input, mockValueExtractor);
// Should extract and replace binding expressions with content
expect(result).toBe("Hello EXTRACTED({name})!");
});
it("should handle escaped binding expressions", () => {
const input = "This is \\@{} not a binding";
const result = parseBindingExpression(input, mockValueExtractor);
// Should preserve escaped bindings
expect(result).toBe("This is \\@{} not a binding");
});
it("should handle multiple empty bindings", () => {
const input = "Text @{} middle @{} end";
const result = parseBindingExpression(input, mockValueExtractor);
// Should replace both empty bindings
expect(result).toBe("Text middle end");
});
it("should handle mixed empty and content bindings", () => {
const input = "Start @{} @{value} @{} end";
const result = parseBindingExpression(input, mockValueExtractor);
// Should only replace empty bindings and extract content bindings
expect(result).toBe("Start EXTRACTED({value}) end");
});
it("should handle bindings at start and end", () => {
const input = "@{} middle text @{}";
const result = parseBindingExpression(input, mockValueExtractor);
// Should handle edge cases
expect(result).toBe(" middle text ");
});
it("should handle whitespace in empty bindings", () => {
const input = "Text @{ } more text";
const result = parseBindingExpression(input, mockValueExtractor);
// Should replace whitespace-only bindings
expect(result).toBe("Text more text");
});
it("should not break with complex text", () => {
const input = "Complex @{} text with @{variable} and \\@{escaped} and @{} end";
const result = parseBindingExpression(input, mockValueExtractor);
// Should handle complex scenarios correctly
expect(result).toBe("Complex text with EXTRACTED({variable}) and \\@{escaped} and end");
});
it("should handle Safari-incompatible regex patterns", () => {
// This is the key test to ensure our Safari fix works
const input = "Before @{} after @{content} final @{}";
// This should not throw "Invalid regular expression" on Safari
expect(() => {
parseBindingExpression(input, mockValueExtractor);
}).not.toThrow();
const result = parseBindingExpression(input, mockValueExtractor);
expect(result).toBe("Before after EXTRACTED({content}) final ");
});
it("should preserve escaped content bindings", () => {
const input = "Escaped \\@{name} binding";
const result = parseBindingExpression(input, mockValueExtractor);
expect(result).toBe("Escaped \\@{name} binding");
});
it("should handle nested braces", () => {
const input = "Nested @{outer{inner}} binding";
const result = parseBindingExpression(input, mockValueExtractor);
expect(result).toBe("Nested EXTRACTED({outer{inner}}) binding");
});
it("should handle adjacent bindings", () => {
const input = "@{a}@{b}@{}";
const result = parseBindingExpression(input, mockValueExtractor);
expect(result).toBe("EXTRACTED({a})EXTRACTED({b})");
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./NavGroup.module.scss";
import navLinkStyles from "../NavLink/NavLink.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { Icon } from "../Icon/IconNative";
import { createMetadata, d, dEnabled, dLabel } from "../metadata-helpers";
import { defaultProps, NavGroup } from "./NavGroupNative";
const COMP = "NavGroup";
export const NavGroupMd = createMetadata({
status: "stable",
description:
"`NavGroup` creates collapsible containers for organizing related navigation " +
"items into hierarchical menu structures. It groups `NavLink` components and " +
"other `NavGroup` components, providing expandable submenus with customizable " +
"icons and states.",
props: {
label: dLabel(),
initiallyExpanded: d(
"This property defines whether the group is initially expanded or collapsed. If not " +
"defined, the group is collapsed by default.",
),
enabled: dEnabled(),
to: {
description: `This property defines an optional navigation link.`,
valueType: "string",
},
icon: {
description: `This property defines an optional icon to display along with the \`${COMP}\` label.`,
valueType: "string",
},
iconHorizontalExpanded: {
description:
"Set a custom icon to display when the navigation menu is expanded, " +
"is in a **horizontal** app layout, and is in a navigation submenu.",
valueType: "string",
defaultValue: defaultProps.iconHorizontalExpanded,
},
iconVerticalExpanded: {
description:
"Set a custom icon to display when the navigation menu is expanded, " +
"is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
valueType: "string",
defaultValue: defaultProps.iconVerticalExpanded,
},
iconHorizontalCollapsed: {
description:
"Set a custom icon to display when the navigation menu is collapsed, " +
"is in a **horizontal** app layout, and is in a navigation submenu.",
valueType: "string",
defaultValue: defaultProps.iconHorizontalCollapsed,
},
iconVerticalCollapsed: {
description:
"Set a custom icon to display when the navigation menu is collapsed, " +
"is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
valueType: "string",
defaultValue: defaultProps.iconVerticalCollapsed,
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-dropdown-${COMP}`]: "$backgroundColor-primary",
[`borderRadius-dropdown-${COMP}`]: "$borderRadius",
[`boxShadow-dropdown-${COMP}`]: "$boxShadow-spread",
},
});
export const navGroupComponentRenderer = createComponentRenderer(
COMP,
NavGroupMd,
({ node, extractValue, renderChild }) => {
return (
<NavGroup
label={extractValue.asDisplayText(node.props.label)}
disabled={!extractValue.asOptionalBoolean(node.props.enabled ?? true)}
to={extractValue.asOptionalString(node.props.to)}
icon={<Icon name={extractValue.asString(node.props.icon)} className={navLinkStyles.icon} />}
node={node}
initiallyExpanded={extractValue.asOptionalBoolean(node.props.initiallyExpanded)}
renderChild={renderChild}
iconHorizontalExpanded={extractValue.asOptionalString(node.props.iconHorizontalExpanded)}
iconVerticalExpanded={extractValue.asOptionalString(node.props.iconVerticalExpanded)}
iconHorizontalCollapsed={extractValue.asOptionalString(node.props.iconHorizontalCollapsed)}
iconVerticalCollapsed={extractValue.asOptionalString(node.props.iconVerticalCollapsed)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.regression.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, assert, it } from "vitest";
import type { ComponentDef, CompoundComponentDef } from "../../../src/abstractions/ComponentDefs";
import { transformSource } from "./xmlui";
import { ParserError } from "../../../src/parsers/xmlui-parser";
describe("Xmlui transform - regression", () => {
it("prop with multiple component #1", () => {
const cd = transformSource(`
<Table width="50%">
<property name="items">
<DataSource url="https://api.spacexdata.com/v3/rockets"/>
</property>
<Column size="140">
<property name="template">
<Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
</property>
</Column>
<Column accessor="key" header="Header"/>
</Table>
`) as ComponentDef;
expect(cd.type).equal("Table");
});
it("Element with attribute comment #1", () => {
const cd = transformSource(`
<Table width="50%" <!-- height="100%" --> >
<property name="items">
<DataSource url="https://api.spacexdata.com/v3/rockets"/>
</property>
<Column size="140">
<property name="template">
<Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
</property>
</Column>
<Column accessor="key" header="Header"/>
</Table>
`) as ComponentDef;
expect(cd.type).equal("Table");
});
it("Element with attribute comment #2", () => {
const cd = transformSource(`
<Table <!--width="50%"--> <!-- height="100%" --> >
<property name="items">
<DataSource url="https://api.spacexdata.com/v3/rockets"/>
</property>
<Column size="140">
<property name="template">
<Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
</property>
</Column>
<Column accessor="key" header="Header"/>
</Table>
`) as ComponentDef;
expect(cd.type).equal("Table");
});
it("Element with attribute comment #3", () => {
const cd = transformSource(`
<Table <!--width="50%"--> height="100%">
<property name="items">
<DataSource url="https://api.spacexdata.com/v3/rockets"/>
</property>
<Column size="140">
<property name="template">
<Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
</property>
</Column>
<Column accessor="key" header="Header"/>
</Table>
`) as ComponentDef;
expect(cd.type).equal("Table");
});
it("Event keeps whitespaces", () => {
const cd = transformSource(`
<Text><event name="click">
const a = 1;
const b = 2;
</event>
</Text>
`) as ComponentDef;
expect(cd.type).equal("Text");
expect((cd.events as any).click.source).toBe("\nconst a = 1;\n\nconst b = 2;\n");
});
it("method keeps whitespaces", () => {
const cd = transformSource(`
<Text><method name="myMethod">
const a = 1;
const b = 2;
</method>
</Text>
`) as ComponentDef;
expect(cd.type).equal("Text");
expect((cd.api as any).myMethod).toBe("\nconst a = 1;\n\nconst b = 2;\n");
});
it("Var removes whitespaces", () => {
const cd = transformSource(`
<Text><variable name="myVar">
const a = 1;
const b = 2;
</variable>
</Text>
`) as ComponentDef;
expect(cd.type).equal("Text");
expect(cd.vars!.myVar).toBe(" const a = 1; const b = 2; ");
});
it("Component with html tag", () => {
const cd = transformSource(`
<Component name="MyComp">
<h1>Heading1 </h1>
</Component>
`) as CompoundComponentDef;
expect(cd.name).toBe("MyComp");
expect(cd.component.type).toBe("h1");
});
it("Markup with event error #1", () => {
try {
transformSource(`<Button onClick="<" />`) as ComponentDef;
} catch (e) {
expect((e as ParserError).code).toBe("W002");
return;
}
assert.fail("Exception expected");
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Table/react-table-config.d.ts:
--------------------------------------------------------------------------------
```typescript
import type {
UseColumnOrderInstanceProps,
UseColumnOrderState,
UseExpandedHooks,
UseExpandedInstanceProps,
UseExpandedOptions,
UseExpandedRowProps,
UseExpandedState,
UseFiltersColumnOptions,
UseFiltersColumnProps,
UseFiltersInstanceProps,
UseFiltersOptions,
UseFiltersState,
UseGlobalFiltersColumnOptions,
UseGlobalFiltersInstanceProps,
UseGlobalFiltersOptions,
UseGlobalFiltersState,
UseGroupByCellProps,
UseGroupByColumnOptions,
UseGroupByColumnProps,
UseGroupByHooks,
UseGroupByInstanceProps,
UseGroupByOptions,
UseGroupByRowProps,
UseGroupByState,
UsePaginationInstanceProps,
UsePaginationOptions,
UsePaginationState,
UseResizeColumnsColumnOptions,
UseResizeColumnsColumnProps,
UseResizeColumnsOptions,
UseResizeColumnsState,
UseRowSelectHooks,
UseRowSelectInstanceProps,
UseRowSelectOptions,
UseRowSelectRowProps,
UseRowSelectState,
UseRowStateCellProps,
UseRowStateInstanceProps,
UseRowStateOptions,
UseRowStateRowProps,
UseRowStateState,
UseSortByColumnOptions,
UseSortByColumnProps,
UseSortByHooks,
UseSortByInstanceProps,
UseSortByOptions,
UseSortByState,
} from "react-table";
declare module "react-table" {
// take this file as-is, or comment out the sections that don't apply to your plugin configuration
export interface TableOptions<
D extends Record<string, unknown>
> extends UseExpandedOptions<D>,
UseFiltersOptions<D>,
UseGlobalFiltersOptions<D>,
UseGroupByOptions<D>,
UsePaginationOptions<D>,
UseResizeColumnsOptions<D>,
UseRowSelectOptions<D>,
UseRowStateOptions<D>,
UseSortByOptions<D>,
// note that having Record here allows you to add anything to the options, this matches the spirit of the
// underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
// feature set, this is a safe default.
Record<string, any> {}
export interface Hooks<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseExpandedHooks<D>,
UseGroupByHooks<D>,
UseRowSelectHooks<D>,
UseSortByHooks<D> {}
export interface TableInstance<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseColumnOrderInstanceProps<D>,
UseExpandedInstanceProps<D>,
UseFiltersInstanceProps<D>,
UseGlobalFiltersInstanceProps<D>,
UseGroupByInstanceProps<D>,
UsePaginationInstanceProps<D>,
UseRowSelectInstanceProps<D>,
UseRowStateInstanceProps<D>,
UseSortByInstanceProps<D> {}
export interface TableState<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseColumnOrderState<D>,
UseExpandedState<D>,
UseFiltersState<D>,
UseGlobalFiltersState<D>,
UseGroupByState<D>,
UsePaginationState<D>,
UseResizeColumnsState<D>,
UseRowSelectState<D>,
UseRowStateState<D>,
UseSortByState<D> {}
export interface ColumnInterface<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseFiltersColumnOptions<D>,
UseGlobalFiltersColumnOptions<D>,
UseGroupByColumnOptions<D>,
UseResizeColumnsColumnOptions<D>,
UseSortByColumnOptions<D> {}
export interface ColumnInstance<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseFiltersColumnProps<D>,
UseGroupByColumnProps<D>,
UseResizeColumnsColumnProps<D>,
UseSortByColumnProps<D> {}
export interface Cell<
D extends Record<string, unknown> = Record<string, unknown>,
V = any
> extends UseGroupByCellProps<D>,
UseRowStateCellProps<D> {}
export interface Row<
D extends Record<string, unknown> = Record<string, unknown>
> extends UseExpandedRowProps<D>,
UseGroupByRowProps<D>,
UseRowSelectRowProps<D>,
UseRowStateRowProps<D> {}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/Heading.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$themeVars: t.composeBorderVars($themeVars, "H1");
$themeVars: t.composePaddingVars($themeVars, "H1");
$themeVars: t.composeTextVars($themeVars, "H1");
$themeVars: t.composeBorderVars($themeVars, "H2");
$themeVars: t.composePaddingVars($themeVars, "H2");
$themeVars: t.composeTextVars($themeVars, "H2");
$themeVars: t.composeBorderVars($themeVars, "H3");
$themeVars: t.composePaddingVars($themeVars, "H3");
$themeVars: t.composeTextVars($themeVars, "H3");
$themeVars: t.composeBorderVars($themeVars, "H4");
$themeVars: t.composePaddingVars($themeVars, "H4");
$themeVars: t.composeTextVars($themeVars, "H4");
$themeVars: t.composeBorderVars($themeVars, "H5");
$themeVars: t.composePaddingVars($themeVars, "H5");
$themeVars: t.composeTextVars($themeVars, "H5");
$themeVars: t.composeBorderVars($themeVars, "H6");
$themeVars: t.composePaddingVars($themeVars, "H6");
$themeVars: t.composeTextVars($themeVars, "H6");
$color-anchor-Heading: createThemeVar("color-anchor-Heading");
$gap-anchor-Heading: createThemeVar("gap-anchor-Heading");
$textDecorationLine-anchor-Heading: createThemeVar("textDecorationLine-anchor-Heading");
@mixin heading($level) {
@include t.paddingVars($themeVars, $level);
@include t.borderVars($themeVars, $level);
@include t.textVars($themeVars, $level);
color: createThemeVar("Heading:textColor-#{$level}");
letter-spacing: createThemeVar("Heading:letterSpacing-#{$level}");
font-family: createThemeVar("Heading:fontFamily-#{$level}");
font-weight: createThemeVar("Heading:fontWeight-#{$level}");
margin-top: createThemeVar("marginTop-#{$level}"); // Intentionally omitting "Heading" inheritance
margin-bottom: createThemeVar(
"marginBottom-#{$level}"
); // Intentionally omitting "Heading" inheritance
text-decoration-line: createThemeVar("Heading:textDecorationLine-#{$level}");
text-decoration-color: createThemeVar("Heading:textDecorationColor-#{$level}");
text-decoration-style: createThemeVar("Heading:textDecorationStyle-#{$level}");
text-decoration-thickness: createThemeVar("Heading:textDecorationThickness-#{$level}");
text-underline-offset: createThemeVar("Heading:textUnderlineOffset-#{$level}");
}
@layer components{
.heading {
&.h1 {
@include heading("H1");
}
&.h2 {
@include heading("H2");
}
&.h3 {
@include heading("H3");
}
&.h4 {
@include heading("H4");
}
&.h5 {
@include heading("H5");
}
&.h6 {
@include heading("H6");
}
--my-scroll-margin-top: var(--header-height);
scroll-margin-top: var(--my-scroll-margin-top);
a {
opacity: 0; // Hide the <a> element by default
margin-left: $gap-anchor-Heading;
color: $color-anchor-Heading;
transition: opacity 0.2s ease-in-out; // Smooth transition for visibility
}
&:hover {
a {
opacity: 1;
text-decoration: $textDecorationLine-anchor-Heading;
}
}
}
.anchorRef {
width: 0;
height: 0;
--my-scroll-margin-top: var(--header-height);
scroll-margin-top: var(--my-scroll-margin-top);
}
/*
This is a Chromium based solution that is supported by most modern browsers.
See this source for details: https://css-tricks.com/line-clampin/
*/
.truncateOverflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preserveLinebreaks {
white-space: pre-wrap;
}
.noEllipsis {
text-overflow: clip;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/NestedApp.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./NestedApp.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { IndexAwareNestedApp } from "./NestedAppNative";
import { defaultProps } from "./defaultProps";
import { createMetadata } from "../metadata-helpers";
const COMP = "NestedApp";
export const NestedAppMd = createMetadata({
status: "stable",
description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
`,
props: {
app: {
description: "The source markup of the app to be nested",
},
api: {
description: "This property defines an optional emulated API to be used with the nested app.",
},
components: {
description:
"This property defines an optional list of components to be used with the nested app.",
defaultValue: defaultProps.components,
},
config: {
description: "You can define the nested app's configuration with this property.",
},
activeTheme: {
description:
"This property defines the active theme for the nested app. " +
"If not set, the default theme is used.",
},
activeTone: {
description:
"This property defines the active tone for the nested app. " +
"If not set, the default tone is used.",
},
height: {
description:
"The height of the nested app. If not set, the height is determined automatically.",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`marginTop-${COMP}`]: "$space-3",
[`marginBottom-${COMP}`]: "$space-3",
[`padding-${COMP}`]: "0",
[`paddingTop-${COMP}`]: "0",
[`border-${COMP}`]: "0.5px solid $borderColor",
[`borderRadius-${COMP}`]: "$space-2",
[`backgroundColor-frame-${COMP}`]: "$color-primary-50",
[`gap-frame-${COMP}`]: "0",
[`fontWeight-header-${COMP}`]: "$fontWeight-bold",
[`boxShadow-${COMP}`]: "0px 0px 32px 0px rgba(0, 0, 0, 0.05)",
[`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
[`borderRadius-viewControls-${COMP}`]: "5px",
[`padding-viewControls-${COMP}`]: "$space-0_5",
[`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
[`color-loadingText-${COMP}`]: "$color-surface-600",
// --- Split view styles
[`padding-button-splitView-${COMP}`]: "1px 6px",
[`width-button-splitView-${COMP}`]: "60px",
[`height-button-splitView-${COMP}`]: "19px",
[`width-logo-splitView-${COMP}`]: "1.5rem",
[`height-logo-splitView-${COMP}`]: "2rem",
[`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-0",
[`color-button-splitView-${COMP}`]: "$color-surface-600",
[`color-button-splitView-${COMP}--active`]: "$color-primary",
[`width-controls-${COMP}`]: "80px",
[`backgroundColor-code-splitView-${COMP}`]: "$color-surface-0",
[`borderRadius-button-splitView-${COMP}`]: "$space-1",
[`borderColor-button-splitView-${COMP}`]: "transparent",
dark: {
[`backgroundColor-frame-${COMP}`]: "$color-surface-50",
[`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-200",
[`color-button-splitView-${COMP}`]: "$color-surface-500",
[`color-button-splitView-${COMP}--active`]: "$color-surface-1",
},
},
});
export const nestedAppComponentRenderer = createComponentRenderer(
COMP,
NestedAppMd,
({ node, extractValue, className }) => {
return (
<IndexAwareNestedApp
app={node.props?.app}
className={className}
api={extractValue(node.props?.api)}
components={extractValue(node.props?.components)}
config={extractValue(node.props?.config)}
activeTheme={extractValue(node.props?.activeTheme)}
activeTone={extractValue(node.props?.activeTone)}
height={extractValue(node.props?.height)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/bin/viteConfig.ts:
--------------------------------------------------------------------------------
```typescript
import { defineConfig } from "vite";
import type { UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import { default as ViteYaml } from "@modyfi/vite-plugin-yaml";
import { default as ViteXmlui } from "./vite-xmlui-plugin";
import * as path from "path";
type ViteConfigData = {
flatDist?: boolean;
withRelativeRoot?: boolean;
flatDistUiPrefix?: string;
};
export async function getViteConfig({
flatDist = false,
withRelativeRoot = false,
flatDistUiPrefix = "",
}: ViteConfigData = {}) {
//TODO finish this (merge smart)
let overrides: UserConfig = {};
try {
const configOverrides = await import(process.cwd() + `/vite.config-overrides`);
overrides = configOverrides.default || {};
} catch (e) {
// console.error(e);
}
return defineConfig({
plugins: [react(), svgr(), ViteYaml(), ViteXmlui({}), ...(overrides.plugins || [])],
base: withRelativeRoot ? "" : undefined,
// experimental: {
// renderBuiltUrl: (filename, {type, hostType, hostId}) =>{
// if (type === 'asset') {
// // return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
// return 'https://static.themohoz.com/xmlui/v0.31/' + filename
// } else {
// return { relative: true }
// }
// }
// },
define: overrides.define,
resolve: {
alias: overrides.resolve?.alias,
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.xmlui', '.xmlui.xs', '.xs', ...(overrides.resolve?.extensions || [])],
},
css: overrides.css,
optimizeDeps: {
extensions: ['.xmlui', '.xmlui.xs', '.xs'],
...overrides.optimizeDeps,
},
build: {
rollupOptions: {
input: path.resolve(process.cwd(), "index.html"),
output: {
assetFileNames: (assetInfo) => {
const extType = assetInfo.name?.split(".").pop();
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
return flatDist
? `${flatDistUiPrefix}internal_img_[name].[hash][extname]`
: `internal/img/[name].[hash][extname]`;
}
if (assetInfo.name === "index.css") {
return flatDist
? `${flatDistUiPrefix}internal_[name].[hash][extname]`
: `internal/[name].[hash][extname]`;
}
return flatDist
? `${flatDistUiPrefix}internal_chunks_[name].[hash][extname]`
: `internal/chunks/[name].[hash][extname]`;
},
chunkFileNames: flatDist
? `${flatDistUiPrefix}internal_chunks_[name].[hash].js`
: "internal/chunks/[name].[hash].js",
entryFileNames: flatDist
? `${flatDistUiPrefix}internal_[name].[hash].js`
: "internal/[name].[hash].js",
},
// treeshake: {
// preset: "recommended",
// moduleSideEffects: (id: string, external: boolean)=>{
// if(id.includes(path.resolve(process.cwd(), 'index.html'))){ //otherwise tree shaking doesn't work
// return true;
// }
// if(id.includes(path.resolve(process.cwd(), "src", 'main.tsx'))){ //otherwise tree shaking doesn't work
// return true;
// }
// return false;
// }
// }
// assetFileNames: (assetInfo) => {
// let extType = assetInfo.name?.split(".").pop();
// if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
// return `img/[name][extname]`;
// }
// if (assetInfo.name === "index.css") {
// return `[name][extname]`;
// }
// return `chunks/[name][extname]`;
// },
// chunkFileNames: "chunks/[name].js",
// entryFileNames: "[name].js",
// },
},
},
});
}
```