This is page 24 of 140. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── cool-queens-look.md
│ ├── twelve-guests-care.md
│ └── wise-towns-dance.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
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── 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
│ ├── ud-components.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/ModalDialog/ModalDialog.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Overlay presentation**: Appears above existing content with backdrop dimming
- **Programmatic control**: Open and close via exposed methods like `open()` and `close()`
- **Parameter passing**: Accept data when opened for dynamic dialog content
- **Focus management**: Automatically handles focus trapping and accessibility
- **Form integration**: When containing Form components, automatically closes on form submission or cancellation (unless overridden)
## Using the Component
>[!INFO]
> When using the examples in this article, pop them out to the full screen to check how they work.
Opening and closing the modal dialog can be done in two ways depending on circumstances.
### With Imperative API
Event-driven display of the `ModalDialog` dialog is also possible using imperative API.
This method is a good way to toggle the display of the `ModalDialog` if no deep linking is necessary.
It also lends to itself that these events can be triggered programmatically from codebehind.
Note the `id` property of the `ModalDialog` in the example below and how it is used to call the [`open`](#open-api) and [`close`](#close-api)
operations of the component in the `onClick` event handlers.
```xmlui-pg copy display name="Example: imperative API" height="220px"
<App>
<ModalDialog id="dialog" title="Example Dialog">
<Button label="Close Dialog" onClick="dialog.close()" />
</ModalDialog>
<Button label="Open Dialog" onClick="dialog.open()" />
</App>
```
>[!INFO]
> The imperative approach is perhaps the most intuitive way to display and hide modal dialogs.
### With `when`
The `when` property accepts a primitive boolean or a binding expression resolving to a boolean value to toggle the display of a component.
Using the `when` property in a `ModalDialog` dialog component is commonly used with deep linking:
showing the modal in conjunction with an updated URL so that the opened state of the modal dialog is referable.
```xmlui-pg height="220px"
---app copy display name="Example: when"
<App>
<variable name="isDialogShown" value="{false}"/>
<Button label="Open Dialog" onClick="isDialogShown = true" />
<ModalDialog
when="{isDialogShown}"
title="Example Dialog"
onClose="isDialogShown = false" />
</App>
---desc
Click on the button in the demo below to open the modal dialog. Click anywhere outside the opened dialog or the close button to close it.
```
Setting the `when` property is the most straightforward way for deep-linked modals. If you use deep links with query parameters to show a particular dialog, you can set the `when` property to show or hide the dialog according to parameter values.
### The `ModalDialog` as a Container
The `ModalDialog` component is also a container such as the [`Card`](/components/Card), that it also accepts child components.
```xmlui-pg copy {3-8} display name="Example: children" height="340px"
<App>
<Button label="Open Dialog" onClick="dialog.open()" />
<ModalDialog id="dialog" title="Example Dialog">
<Form data="{{ firstName: 'Billy', lastName: 'Bob' }}">
<FormItem bindTo="firstName" required="true" />
<FormItem bindTo="lastName" required="true" />
</Form>
</ModalDialog>
</App>
```
>[!INFO]
> When a form is nested into a modal dialog, closing the form (canceling it or completing its submit action) automatically closes the dialog.
%-DESC-END
%-PROP-START fullScreen
```xmlui-pg height="220px"
---app copy display name="Example: fullScreen"
<App>
<Button label="Open Dialog" onClick="dialog.open()" />
<ModalDialog id="dialog" fullScreen="true" title="Example Dialog" />
</App>
---desc
Click the button to display a full-screen dialog. The icon at the top-right corner of the dialog allows you to close it.
```
%-PROP-END
%-PROP-START title
```xmlui-pg copy {3} display name="Example: title" height="220px"
<App>
<Button label="Open Dialog" onClick="dialog.open()" />
<ModalDialog id="dialog" title="Example Title" />
</App>
```
%-PROP-END
%-PROP-START closeButtonVisible
```xmlui-pg height="220px"
---app copy display name="Example: closeButtonVisible"
<App>
<Button label="Open Dialog" onClick="dialog.open()" />
<ModalDialog id="dialog" closeButtonVisible="false" title="Example Dialog" />
</App>
---desc
Click outside the dialog to close it.
```
%-PROP-END
%-EVENT-START close
In this example, the `close` event counts how many times you closed the dialog:
```xmlui-pg height="220px"
---app copy {6-8} display name="Example: open/close events"
<App>
<Button label="Open Dialog" onClick="myDialog.open()" />
<ModalDialog
id="myDialog"
title="Example Dialog"
var.counter="{0}"
onClose="counter++">
<Text value="Dialog closed {counter} number of times." />
</ModalDialog>
</App>
---desc
Open and close the dialog several times to test that it changes the counter.
```
%-EVENT-END
%-EVENT-START open
In this example, the `open` event counts how many times you opened the dialog:
```xmlui-pg height="220px"
---app copy {6-8} display name="Example: open/close events"
<App>
<Button label="Open Dialog" onClick="myDialog.open()" />
<ModalDialog
id="myDialog"
title="Example Dialog"
var.counter="{0}"
onOpen="counter++">
<Text value="Dialog opened {counter} number of times." />
</ModalDialog>
</App>
---desc
Open and close the dialog several times to test that it changes the counter.
```
%-EVENT-END
%-API-START open
See the [\`With Imperative API\`](#with-imperative-api) subsection for an example.
%-API-END
%-API-START close
See the [\`With Imperative API\`](#with-imperative-api) subsection for an example.
%-API-END
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/interception/orderBy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { orderBy } from "../../../src/components-core/utils/misc"
const numArray = [3,4,1,2,5];
const strArray = ["beta", "delta", "alpha", "gamma", "charlie"]
const objArray = [
{ key: "hey", value: 1},
{ key: "bye", value: 114},
{ key: "hey", value: 3},
{ key: "bye", value: 41},
{ key: "ok", value: 1000},
]
describe("orderBy", () => {
it("single number", async () => {
// --- Act
const res = await orderBy(numArray, async (i: any) => i);
// --- Assert
expect(res[0]).equal(1);
expect(res[1]).equal(2);
expect(res[2]).equal(3);
expect(res[3]).equal(4);
expect(res[4]).equal(5);
});
it("single number, desc", async () => {
// --- Act
const res = await orderBy(numArray, async (i: any) => i, true);
// --- Assert
expect(res[0]).equal(5);
expect(res[1]).equal(4);
expect(res[2]).equal(3);
expect(res[3]).equal(2);
expect(res[4]).equal(1);
});
it("single string", async () => {
// --- Act
const res = await orderBy(strArray, async (i: any) => i);
// --- Assert
expect(res[0]).equal("alpha");
expect(res[1]).equal("beta");
expect(res[2]).equal("charlie");
expect(res[3]).equal("delta");
expect(res[4]).equal("gamma");
});
it("single string, desc", async () => {
// --- Act
const res = await orderBy(strArray, async (i: any) => i, true);
// --- Assert
expect(res[0]).equal("gamma");
expect(res[1]).equal("delta");
expect(res[2]).equal("charlie");
expect(res[3]).equal("beta");
expect(res[4]).equal("alpha");
});
it("single object, string mapper", async () => {
// --- Act
const res = await orderBy(objArray, "value");
// --- Assert
expect(res[0].value).equal(1);
expect(res[1].value).equal(3);
expect(res[2].value).equal(41);
expect(res[3].value).equal(114);
expect(res[4].value).equal(1000);
});
it("single object, string mapper, desc", async () => {
// --- Act
const res = await orderBy(objArray, "value", true);
// --- Assert
expect(res[0].value).equal(1000);
expect(res[1].value).equal(114);
expect(res[2].value).equal(41);
expect(res[3].value).equal(3);
expect(res[4].value).equal(1);
});
it("single object, func mapper", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.value);
// --- Assert
expect(res[0].value).equal(1);
expect(res[1].value).equal(3);
expect(res[2].value).equal(41);
expect(res[3].value).equal(114);
expect(res[4].value).equal(1000);
});
it("single object, func mapper, desc", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.value, true);
// --- Assert
expect(res[0].value).equal(1000);
expect(res[1].value).equal(114);
expect(res[2].value).equal(41);
expect(res[3].value).equal(3);
expect(res[4].value).equal(1);
});
it("multiple object #1", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.key, async (i: any) => i.value);
// --- Assert
expect(res[0].key).equal("bye");
expect(res[0].value).equal(41);
expect(res[1].key).equal("bye");
expect(res[1].value).equal(114);
expect(res[2].key).equal("hey");
expect(res[2].value).equal(1);
expect(res[3].key).equal("hey");
expect(res[3].value).equal(3);
expect(res[4].key).equal("ok");
expect(res[4].value).equal(1000);
});
it("multiple object #2", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.key, true, async (i: any) => i.value);
// --- Assert
expect(res[0].key).equal("ok");
expect(res[0].value).equal(1000);
expect(res[1].key).equal("hey");
expect(res[1].value).equal(1);
expect(res[2].key).equal("hey");
expect(res[2].value).equal(3);
expect(res[3].key).equal("bye");
expect(res[3].value).equal(41);
expect(res[4].key).equal("bye");
expect(res[4].value).equal(114);
});
it("multiple object #3", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.key, async (i: any) => i.value, true);
// --- Assert
expect(res[0].key).equal("bye");
expect(res[0].value).equal(114);
expect(res[1].key).equal("bye");
expect(res[1].value).equal(41);
expect(res[2].key).equal("hey");
expect(res[2].value).equal(3);
expect(res[3].key).equal("hey");
expect(res[3].value).equal(1);
expect(res[4].key).equal("ok");
expect(res[4].value).equal(1000);
});
it("multiple object #4", async () => {
// --- Act
const res = await orderBy(objArray, async (i: any) => i.key, true, async (i: any) => i.value, true);
// --- Assert
expect(res[0].key).equal("ok");
expect(res[0].value).equal(1000);
expect(res[1].key).equal("hey");
expect(res[1].value).equal(3);
expect(res[2].key).equal("hey");
expect(res[2].value).equal(1);
expect(res[3].key).equal("bye");
expect(res[3].value).equal(114);
expect(res[4].key).equal("bye");
expect(res[4].value).equal(41);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/RadioGroup/RadioGroup.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);
}
$gap-RadioGroupOption: createThemeVar("gap-RadioGroupOption");
// --- Borders
$borderWidth-RadioGroupOption: createThemeVar("borderWidth-RadioGroupOption");
$borderWidth-RadioGroupOption-validation: createThemeVar("borderWidth-RadioGroupOption-validation");
$borderColor-RadioGroupOption-default: createThemeVar("Input:borderColor-RadioGroupOption-default");
$borderColor-checked-RadioGroupOption: createThemeVar("Input:borderColor-checked-RadioGroupOption");
$borderColor-RadioGroupOption-default--hover: createThemeVar(
"Input:borderColor-RadioGroupOption-default--hover"
);
$borderColor-RadioGroupOption-default--active: createThemeVar(
"Input:borderColor-RadioGroupOption-default--active"
);
$borderColor-RadioGroupOption--disabled: createThemeVar(
"Input:borderColor-RadioGroupOption--disabled"
);
$borderColor-RadioGroupOption-error: createThemeVar("Input:borderColor-RadioGroupOption-error");
$borderColor-RadioGroupOption-warning: createThemeVar("Input:borderColor-RadioGroupOption-warning");
$borderColor-RadioGroupOption-success: createThemeVar("Input:borderColor-RadioGroupOption-success");
// --- Backgrounds
$backgroundColor-RadioGroupOption-default: createThemeVar(
"Input:backgroundColor-RadioGroupOption-default"
);
$backgroundColor-checked-RadioGroupOption: createThemeVar(
"Input:backgroundColor-checked-RadioGroupOption"
);
$backgroundColor-checked-RadioGroupOption--disabled: createThemeVar(
"Input:backgroundColor-checked-RadioGroupOption--disabled"
);
// --- Foreground
$color-RadioGroupOption--disabled: createThemeVar("Input:color-RadioGroupOption--disabled");
// --- Text
$fontSize-RadioGroupOption: createThemeVar("Input:fontSize-RadioGroupOption");
$fontWeight-RadioGroupOption: createThemeVar("Input:fontWeight-RadioGroupOption");
$textColor-RadioGroupOption-default: createThemeVar("Input:textColor-RadioGroupOption-default");
$textColor-RadioGroupOption-error: createThemeVar("Input:textColor-RadioGroupOption-error");
$textColor-RadioGroupOption-warning: createThemeVar("Input:textColor-RadioGroupOption-warning");
$textColor-RadioGroupOption-success: createThemeVar("Input:textColor-RadioGroupOption-success");
@layer components {
.radioGroupContainer {
width: 100%;
display: flex;
flex-direction: column;
gap: t.$space-2;
}
.radioOptionContainer {
display: flex;
align-items: center;
gap: $gap-RadioGroupOption;
}
.radioOption {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 100%;
background: $backgroundColor-RadioGroupOption-default;
border-width: $borderWidth-RadioGroupOption;
border-style: solid;
border-color: $borderColor-RadioGroupOption-default;
padding: 0;
cursor: pointer;
&:hover {
border-color: $borderColor-RadioGroupOption-default--hover;
}
&:focus-visible {
outline-width: createThemeVar("Input:outlineWidth-RadioGroupOption--focus");
outline-color: createThemeVar("Input:outlineColor-RadioGroupOption--focus");
outline-style: createThemeVar("Input:outlineStyle-RadioGroupOption--focus");
outline-offset: createThemeVar("Input:outlineOffset-RadioGroupOption--focus");
}
&:disabled {
cursor: not-allowed;
border-color: $borderColor-RadioGroupOption--disabled;
}
&:disabled + label {
cursor: not-allowed;
color: $color-RadioGroupOption--disabled;
}
&:not(:disabled) {
&:not(.error):not(.warning):not(.valid) {
border-color: $borderColor-checked-RadioGroupOption;
}
&.error {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption-error;
}
&.warning {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption-warning;
}
&.valid {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption-success;
}
}
}
// The indicator is the circle that appears inside the radio button:
// both the larger circle and an inner circle.
.indicator {
display: grid;
place-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(
circle,
transparent 28%,
$backgroundColor-checked-RadioGroupOption 34%
);
&.disabled {
background: radial-gradient(
circle,
transparent 28%,
$backgroundColor-checked-RadioGroupOption--disabled 34%
);
}
}
.itemContainer {
z-index: -1;
position: relative;
opacity: 0;
width: 0;
height: 0;
}
.optionLabel {
width: 100%;
cursor: pointer;
}
.label {
width: 100%;
color: $textColor-RadioGroupOption-default;
font-size: $fontSize-RadioGroupOption;
font-weight: $fontWeight-RadioGroupOption;
user-select: none;
cursor: pointer;
&.error {
color: $textColor-RadioGroupOption-error;
}
&.warning {
color: $textColor-RadioGroupOption-warning;
}
&.valid {
color: $textColor-RadioGroupOption-success;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/docs/public/resources/files/clients.json:
--------------------------------------------------------------------------------
```json
[{"id":28,"name":"Abstergo Industries","email":"[email protected]","phone":"193-387-4195","address":"685 Commerce Way, New York, WY 71341","created_at":"2023-04-25T10:39:54.288Z"},
{"id":1,"name":"Acme Corp","email":"[email protected]","phone":"837-171-5594","address":"1936 Mountain View, Minneapolis, OH 24211","created_at":"2023-05-30T18:18:58.754Z"},
{"id":29,"name":"Axiom Telecommunication","email":"[email protected]","phone":"964-696-9437","address":"596 Broadway, San Antonio, FL 37788","created_at":"2023-02-19T14:14:02.199Z"},
{"id":26,"name":"Beneke Fabricators","email":"[email protected]","phone":"224-643-3157","address":"5769 Commerce Way, New York, ME 10531","created_at":"2022-07-02T05:59:43.216Z"},
{"id":21,"name":"Bluth Company","email":"[email protected]","phone":"431-671-1197","address":"2136 Tech Plaza, Denver, MN 79275","created_at":"2023-06-01T02:16:06.550Z"},
{"id":8,"name":"Cyberdyne Systems","email":"[email protected]","phone":"958-492-4123","address":"959 Market St, Miami, NE 90247","created_at":"2023-04-21T23:33:46.662Z"},
{"id":13,"name":"Dunder Mifflin","email":"[email protected]","phone":"606-327-8844","address":"471 Main St, San Jose, AR 15771","created_at":"2023-06-15T15:59:30.585Z"},
{"id":15,"name":"Gekko & Co","email":"billing@gekko&co.hotmail.com","phone":"649-277-3273","address":"9537 Commerce Way, Jacksonville, CA 42531","created_at":"2022-10-21T00:08:26.253Z"},
{"id":27,"name":"Genco Pura Oil","email":"[email protected]","phone":"318-505-3974","address":"6930 Lake St, San Jose, NE 96152","created_at":"2023-03-25T05:54:13.340Z"},
{"id":2,"name":"Globex Corporation","email":"[email protected]","phone":"961-780-9184","address":"1381 Park Ave, Detroit, IL 10647","created_at":"2023-03-18T01:01:50.040Z"},
{"id":24,"name":"Goliath National Bank","email":"[email protected]","phone":"648-346-7002","address":"3230 Oak Ave, Chicago, GA 30285","created_at":"2023-04-17T10:56:27.700Z"},
{"id":30,"name":"Gringotts Bank","email":"[email protected]","phone":"404-501-6883","address":"8738 Pine St, Detroit, MO 58497","created_at":"2022-10-07T04:48:18.939Z"},
{"id":11,"name":"Hooli","email":"[email protected]","phone":"706-613-2435","address":"1756 Main St, San Antonio, MI 39851","created_at":"2023-03-19T15:28:23.979Z"},
{"id":4,"name":"Initech","email":"[email protected]","phone":"397-163-5711","address":"4245 Lake St, Dallas, VT 98968","created_at":"2022-07-03T11:41:47.875Z"},
{"id":18,"name":"Iron Mountain","email":"[email protected]","phone":"927-752-2353","address":"9905 Oak Ave, San Jose, OR 92222","created_at":"2022-03-07T13:20:09.399Z"},
{"id":17,"name":"Los Pollos Hermanos","email":"[email protected]","phone":"348-921-6305","address":"182 River Rd, San Jose, WA 90187","created_at":"2022-08-30T17:06:50.456Z"},
{"id":9,"name":"Massive Dynamic","email":"[email protected]","phone":"774-813-4144","address":"4589 Elm St, Boston, CO 13343","created_at":"2023-04-17T01:46:05.229Z"},
{"id":14,"name":"Oceanic Airlines","email":"[email protected]","phone":"875-430-4773","address":"5831 Cedar Ln, Houston, NY 53770","created_at":"2022-10-27T00:03:43.543Z"},
{"id":25,"name":"Oscorp Industries","email":"[email protected]","phone":"619-459-5592","address":"4630 Commerce Way, San Antonio, ND 78191","created_at":"2022-08-05T16:47:42.371Z"},
{"id":12,"name":"Pied Piper","email":"[email protected]","phone":"293-941-4381","address":"7511 Lake St, Seattle, ID 55253","created_at":"2023-07-21T18:35:59.514Z"},
{"id":22,"name":"Prestige Worldwide","email":"[email protected]","phone":"962-697-5383","address":"5031 Pine St, Dallas, MD 80661","created_at":"2022-11-18T19:01:46.865Z"},
{"id":3,"name":"Soylent Corp","email":"[email protected]","phone":"289-702-4140","address":"4433 Oak Ave, San Antonio, WV 87396","created_at":"2023-06-19T12:06:22.986Z"},
{"id":16,"name":"Stanfield LLC","email":"[email protected]","phone":"100-568-1916","address":"7480 Mountain View, Denver, IN 43223","created_at":"2022-09-24T03:40:55.798Z"},
{"id":6,"name":"Stark Industries","email":"[email protected]","phone":"996-381-2579","address":"9117 Washington Ave, San Diego, WY 73075","created_at":"2022-07-28T02:36:32.356Z"},
{"id":20,"name":"Sterling Cooper","email":"[email protected]","phone":"431-927-9146","address":"9432 River Rd, Los Angeles, NY 26752","created_at":"2022-08-24T19:23:11.564Z"},
{"id":5,"name":"Umbrella Corporation","email":"[email protected]","phone":"857-505-4462","address":"3783 Maple Dr, San Jose, MI 70268","created_at":"2022-08-06T05:02:45.139Z"},
{"id":23,"name":"Vehement Capital Partners","email":"[email protected]","phone":"785-799-5617","address":"3625 Broadway, Minneapolis, MN 30364","created_at":"2022-02-25T15:45:54.843Z"},
{"id":7,"name":"Wayne Enterprises","email":"[email protected]","phone":"719-975-7720","address":"1501 Commerce Way, San Jose, MS 86832","created_at":"2022-10-19T05:19:32.363Z"},
{"id":10,"name":"Waystar Royco","email":"[email protected]","phone":"935-654-8514","address":"1413 Elm St, Minneapolis, ND 43976","created_at":"2022-10-26T12:58:51.059Z"},
{"id":19,"name":"Weyland-Yutani","email":"[email protected]","phone":"713-592-8787","address":"8040 Maple Dr, Atlanta, ND 12004","created_at":"2022-11-03T03:38:22.119Z"}]
```
--------------------------------------------------------------------------------
/xmlui/src/components/DataSource/DataSource.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key characteristics:**
- **Conditional loading**: Use `when` property to prevent fetching until dependent data is ready
- **Built-in caching**: Prevents unnecessary requests and provides instant data access
- **Polling support**: Automatically refetch data at specified intervals
- **Data transformation**: Process and filter responses before components use the data
## Preventing the `DataSource` from Executing
Prevent the `DataSource` from executing until the specified condition in the `when` attribute is true.
```xmlui
<DataSource
id="userProfile"
url="/api/users/{selectedUserId}/profile"
when="{selectedUserId}" />
```
## Structural Sharing
`DataSource` uses a technique called "structural sharing" to ensure that as many data references as possible will be kept intact and not cause extra UI refresh. If data is fetched from an API endpoint, you'll usually get a completely new reference by json parsing the response. However, `DataSource` will keep the original reference if *nothing* has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts.
When you initiate the refetching of data (e.g., with the `refetch` method or setting the `pollIntervalInSeconds` property) and you retrieve data structurally equal with the cached data instance, `DataSource` will not fire the `loaded` event.
By default, structural sharing is turned on. If you do not need this behavior, set the `structuralSharing` property to `false`.
%-DESC-END
%-PROP-START completedNotificationMessage
This property customizes the success message displayed in a toast after the finished API invocation. The `$result` context variable can refer to the response body. For example, you can use the following code snippet to display the first 100 characters in the completed operation's response body:
```xmlui copy
<DataSource
id="ds"
url="/api/shopping-list"
completedNotificationMessage="Result: {JSON.stringify($result).substring(0, 100)}" />
```
%-PROP-END
%-PROP-START errorNotificationMessage
This property customizes the message displayed in a toast when the API invocation results in an error. The `$error.statusCode` context variable can refer to the response's status code, while `$error. details` to the response body. For example, you can use the following code snippet to display the status code and the details:
```xmlui copy
<DataSource
id="ds"
method="post"
url="/api/shopping-list"
errorNotificationMessage="${error.statusCode}, {JSON.stringify($error.details)}" />
```
%-PROP-END
%-PROP-START resultSelector
The selector can be a simple dot notation path (e.g., `value.results`) or a JavaScript expression that processes the data (e.g., `results.filter(item => item.type === 'active')`). The selector has access to standard JavaScript functions like `map` and `filter`, and operates on the full response body.
Here is a sample response from the HubSpot API.
```json
{
"results": [
{
"id": "88903258744",
"properties": {
"company": "HubSpot",
"createdate": "2025-01-03T23:38:47.449Z",
"custom_notes": "Nice guy!",
"email": "[email protected]",
"firstname": "Brian",
"hs_object_id": "88903258744",
"lastmodifieddate": "2025-02-18T23:13:34.759Z",
"lastname": "Halligan (Sample Contact)"
},
"createdAt": "2025-01-03T23:38:47.449Z",
"updatedAt": "2025-02-18T23:13:34.759Z",
"archived": false
},
{
"id": "88918034480",
"properties": {
"company": "HubSpot",
"createdate": "2025-01-03T23:38:47.008Z",
"custom_notes": null,
"email": "[email protected]",
"firstname": "Maria",
"hs_object_id": "88918034480",
"lastmodifieddate": "2025-01-03T23:38:59.001Z",
"lastname": "Johnson (Sample Contact)"
},
"createdAt": "2025-01-03T23:38:47.008Z",
"updatedAt": "2025-01-03T23:38:59.001Z",
"archived": false
}
]
}
```
This `resultSelector` builds an array of the `properties` objects.
```xmlui copy
<DataSource
id="contacts"
url="http://{DOMAIN}/{CORS_PROXY}/api.hubapi.com/crm/v3/objects/contacts?properties=firstname,lastname,email,company,custom_notes"
resultSelector="results.map(item => item.properties )"
headers='{{"Authorization":"Bearer not-a-real-token"}}'
```
This `List` uses the array.
```xmlui copy
<List data="{contacts}" title="Hubspot Contacts">
<Card gap="0" width="20em">
<Text fontWeight="bold">
{$item.firstname} {$item.lastname}
</Text>
<Text>
{$item.company}
</Text>
<Text>
{$item.email}
</Text>
<Text>
{$item.custom_notes}
</Text>
</Card>
</List>
```
This `resultSelector` filters the array of the `properties` objects to include only contacts with non-null `custom_notes`.
```xmlui copy
<DataSource
id="contacts"
resultSelector="results.filter(contact => contact.properties.custom_notes !== null).map(contact => contact.properties)"
url="http://{DOMAIN}/{CORS_PROXY}/api.hubapi.com/crm/v3/objects/contacts?properties=firstname,lastname,email,company,custom_notes"
headers='{{"Authorization":"Bearer not-a-real-token"}}'
/>
````
This `Table` uses the filtered array.
```xmlui copy
<Table title="HubSpot contacts" data="{contacts}">
<Column bindTo="firstname" />
<Column bindTo="lastname" />
<Column bindTo="company" />
<Column bindTo="email" />
<Column bindTo="custom_notes" />
</Table>
```
%-PROP-END
```
--------------------------------------------------------------------------------
/blog/public/resources/xmlui-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="312" height="122" viewBox="0 0 312 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M229.875 98.0763C225.499 98.0763 221.696 97.1076 218.467 95.1703C215.31 93.1613 212.87 90.363 211.148 86.7755C209.426 83.1162 208.565 78.8111 208.565 73.8603V43.6173C208.565 42.8998 208.817 42.2899 209.319 41.7877C209.821 41.2854 210.431 41.0343 211.148 41.0343H220.62C221.409 41.0343 222.019 41.2854 222.449 41.7877C222.951 42.2899 223.203 42.8998 223.203 43.6173V73.2146C223.203 82.1117 227.113 86.5602 234.934 86.5602C238.665 86.5602 241.607 85.3763 243.759 83.0086C245.984 80.6408 247.096 77.3761 247.096 73.2146V43.6173C247.096 42.8998 247.347 42.2899 247.849 41.7877C248.351 41.2854 248.961 41.0343 249.679 41.0343H259.15C259.867 41.0343 260.477 41.2854 260.979 41.7877C261.482 42.2899 261.733 42.8998 261.733 43.6173V94.417C261.733 95.1345 261.482 95.7443 260.979 96.2466C260.477 96.7489 259.867 97 259.15 97H250.432C249.643 97 248.997 96.7489 248.495 96.2466C248.064 95.7443 247.849 95.1345 247.849 94.417V90.0043C245.912 92.5156 243.508 94.4887 240.638 95.9237C237.768 97.3587 234.18 98.0763 229.875 98.0763Z" fill="#3367CC"/>
<path d="M278.533 97C277.815 97 277.205 96.7489 276.703 96.2466C276.201 95.7443 275.95 95.1345 275.95 94.417V43.6173C275.95 42.8998 276.201 42.2899 276.703 41.7877C277.205 41.2854 277.815 41.0343 278.533 41.0343H287.466C288.255 41.0343 288.865 41.2854 289.295 41.7877C289.798 42.2899 290.049 42.8998 290.049 43.6173V94.417C290.049 95.1345 289.798 95.7443 289.295 96.2466C288.865 96.7489 288.255 97 287.466 97H278.533ZM278.102 31.7784C277.313 31.7784 276.667 31.5632 276.165 31.1327C275.734 30.6304 275.519 29.9847 275.519 29.1954V21.4463C275.519 20.7288 275.734 20.1189 276.165 19.6167C276.667 19.1144 277.313 18.8633 278.102 18.8633H287.896C288.685 18.8633 289.331 19.1144 289.833 19.6167C290.336 20.1189 290.587 20.7288 290.587 21.4463V29.1954C290.587 29.9847 290.336 30.6304 289.833 31.1327C289.331 31.5632 288.685 31.7784 287.896 31.7784H278.102Z" fill="#3367CC"/>
<path d="M3.73546 97.0006C3.0897 97.0006 2.51569 96.7854 2.01343 96.3549C1.58293 95.8526 1.36768 95.2786 1.36768 94.6329C1.36768 94.4176 1.40355 94.1665 1.4753 93.8795C1.6188 93.5925 1.83406 93.2337 2.12106 92.8032L20.4175 68.2644L3.41258 45.2324C3.19732 44.8736 3.01795 44.5507 2.87444 44.2637C2.80269 43.9767 2.76682 43.6897 2.76682 43.4027C2.76682 42.757 2.98207 42.2188 3.41258 41.7883C3.91483 41.2861 4.48884 41.0349 5.1346 41.0349H14.4981C15.3591 41.0349 16.0049 41.2502 16.4354 41.6807C16.8659 42.1112 17.1887 42.5058 17.404 42.8646L29.5658 59.0085L41.7275 42.8646C42.0146 42.5058 42.3374 42.1112 42.6962 41.6807C43.1267 41.2502 43.7724 41.0349 44.6335 41.0349H53.5664C54.2122 41.0349 54.7503 41.2861 55.1808 41.7883C55.6831 42.2188 55.9342 42.7211 55.9342 43.2951C55.9342 43.6538 55.8625 43.9767 55.719 44.2637C55.6472 44.5507 55.5037 44.8736 55.2885 45.2324L38.0683 68.4797L56.4724 92.8032C56.7594 93.2337 56.9387 93.5925 57.0105 93.8795C57.154 94.1665 57.2257 94.4176 57.2257 94.6329C57.2257 95.2786 56.9746 95.8526 56.4724 96.3549C56.0418 96.7854 55.5037 97.0006 54.858 97.0006H45.064C44.2747 97.0006 43.6648 96.8212 43.2343 96.4625C42.8038 96.032 42.4451 95.6374 42.1581 95.2786L29.2429 78.166L16.1125 95.2786C15.8255 95.6374 15.4667 96.032 15.0362 96.4625C14.6775 96.8212 14.0676 97.0006 13.2066 97.0006H3.73546Z" fill="#333366"/>
<path d="M69.4363 97.0006C68.7188 97.0006 68.1089 96.7495 67.6066 96.2472C67.1044 95.745 66.8532 95.1351 66.8532 94.4176V43.618C66.8532 42.9005 67.1044 42.2906 67.6066 41.7883C68.1089 41.2861 68.7188 41.0349 69.4363 41.0349H77.8311C78.5486 41.0349 79.1585 41.2861 79.6608 41.7883C80.163 42.2906 80.4142 42.9005 80.4142 43.618V47.2773C81.9209 45.2682 83.93 43.5821 86.4412 42.2188C89.0243 40.7838 92.0737 40.0304 95.5895 39.9587C103.769 39.8152 109.473 43.0081 112.702 49.5374C114.352 46.6674 116.72 44.3714 119.805 42.6493C122.962 40.8556 126.442 39.9587 130.245 39.9587C133.976 39.9587 137.348 40.8197 140.362 42.5417C143.447 44.2637 145.851 46.8826 147.573 50.3984C149.367 53.8425 150.264 58.2193 150.264 63.5288V94.4176C150.264 95.1351 150.013 95.745 149.51 96.2472C149.008 96.7495 148.398 97.0006 147.681 97.0006H138.855C138.138 97.0006 137.528 96.7495 137.026 96.2472C136.523 95.745 136.272 95.1351 136.272 94.4176V64.3899C136.272 61.1611 135.806 58.6139 134.873 56.7484C133.94 54.8111 132.685 53.4478 131.106 52.6586C129.528 51.8693 127.77 51.4747 125.832 51.4747C124.254 51.4747 122.675 51.8693 121.097 52.6586C119.518 53.4478 118.227 54.8111 117.222 56.7484C116.218 58.6139 115.716 61.1611 115.716 64.3899V94.4176C115.716 95.1351 115.464 95.745 114.962 96.2472C114.46 96.7495 113.85 97.0006 113.133 97.0006H104.307C103.518 97.0006 102.872 96.7495 102.37 96.2472C101.939 95.745 101.724 95.1351 101.724 94.4176V64.3899C101.724 61.1611 101.222 58.6139 100.217 56.7484C99.2129 54.8111 97.9214 53.4478 96.3429 52.6586C94.7643 51.8693 93.0782 51.4747 91.2844 51.4747C89.6342 51.4747 88.0198 51.9052 86.4412 52.7662C84.8627 53.5555 83.5712 54.8829 82.5667 56.7484C81.5622 58.6139 81.0599 61.1611 81.0599 64.3899V94.4176C81.0599 95.1351 80.8088 95.745 80.3065 96.2472C79.8043 96.7495 79.1944 97.0006 78.4769 97.0006H69.4363Z" fill="#333366"/>
<path d="M166.66 97.0006C165.942 97.0006 165.332 96.7495 164.83 96.2472C164.328 95.745 164.077 95.1351 164.077 94.4176V23.169C164.077 22.4515 164.328 21.8416 164.83 21.3393C165.332 20.8371 165.942 20.5859 166.66 20.5859H175.593C176.31 20.5859 176.92 20.8371 177.422 21.3393C177.925 21.8416 178.176 22.4515 178.176 23.169V94.4176C178.176 95.1351 177.925 95.745 177.422 96.2472C176.92 96.7495 176.31 97.0006 175.593 97.0006H166.66Z" fill="#333366"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M309 3H193V119H309V3ZM191 1V121H311V1H191Z" fill="#3367CC"/>
</svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/xmlui-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="312" height="122" viewBox="0 0 312 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M229.875 98.0763C225.499 98.0763 221.696 97.1076 218.467 95.1703C215.31 93.1613 212.87 90.363 211.148 86.7755C209.426 83.1162 208.565 78.8111 208.565 73.8603V43.6173C208.565 42.8998 208.817 42.2899 209.319 41.7877C209.821 41.2854 210.431 41.0343 211.148 41.0343H220.62C221.409 41.0343 222.019 41.2854 222.449 41.7877C222.951 42.2899 223.203 42.8998 223.203 43.6173V73.2146C223.203 82.1117 227.113 86.5602 234.934 86.5602C238.665 86.5602 241.607 85.3763 243.759 83.0086C245.984 80.6408 247.096 77.3761 247.096 73.2146V43.6173C247.096 42.8998 247.347 42.2899 247.849 41.7877C248.351 41.2854 248.961 41.0343 249.679 41.0343H259.15C259.867 41.0343 260.477 41.2854 260.979 41.7877C261.482 42.2899 261.733 42.8998 261.733 43.6173V94.417C261.733 95.1345 261.482 95.7443 260.979 96.2466C260.477 96.7489 259.867 97 259.15 97H250.432C249.643 97 248.997 96.7489 248.495 96.2466C248.064 95.7443 247.849 95.1345 247.849 94.417V90.0043C245.912 92.5156 243.508 94.4887 240.638 95.9237C237.768 97.3587 234.18 98.0763 229.875 98.0763Z" fill="#3367CC"/>
<path d="M278.533 97C277.815 97 277.205 96.7489 276.703 96.2466C276.201 95.7443 275.95 95.1345 275.95 94.417V43.6173C275.95 42.8998 276.201 42.2899 276.703 41.7877C277.205 41.2854 277.815 41.0343 278.533 41.0343H287.466C288.255 41.0343 288.865 41.2854 289.295 41.7877C289.798 42.2899 290.049 42.8998 290.049 43.6173V94.417C290.049 95.1345 289.798 95.7443 289.295 96.2466C288.865 96.7489 288.255 97 287.466 97H278.533ZM278.102 31.7784C277.313 31.7784 276.667 31.5632 276.165 31.1327C275.734 30.6304 275.519 29.9847 275.519 29.1954V21.4463C275.519 20.7288 275.734 20.1189 276.165 19.6167C276.667 19.1144 277.313 18.8633 278.102 18.8633H287.896C288.685 18.8633 289.331 19.1144 289.833 19.6167C290.336 20.1189 290.587 20.7288 290.587 21.4463V29.1954C290.587 29.9847 290.336 30.6304 289.833 31.1327C289.331 31.5632 288.685 31.7784 287.896 31.7784H278.102Z" fill="#3367CC"/>
<path d="M3.73546 97.0006C3.0897 97.0006 2.51569 96.7854 2.01343 96.3549C1.58293 95.8526 1.36768 95.2786 1.36768 94.6329C1.36768 94.4176 1.40355 94.1665 1.4753 93.8795C1.6188 93.5925 1.83406 93.2337 2.12106 92.8032L20.4175 68.2644L3.41258 45.2324C3.19732 44.8736 3.01795 44.5507 2.87444 44.2637C2.80269 43.9767 2.76682 43.6897 2.76682 43.4027C2.76682 42.757 2.98207 42.2188 3.41258 41.7883C3.91483 41.2861 4.48884 41.0349 5.1346 41.0349H14.4981C15.3591 41.0349 16.0049 41.2502 16.4354 41.6807C16.8659 42.1112 17.1887 42.5058 17.404 42.8646L29.5658 59.0085L41.7275 42.8646C42.0146 42.5058 42.3374 42.1112 42.6962 41.6807C43.1267 41.2502 43.7724 41.0349 44.6335 41.0349H53.5664C54.2122 41.0349 54.7503 41.2861 55.1808 41.7883C55.6831 42.2188 55.9342 42.7211 55.9342 43.2951C55.9342 43.6538 55.8625 43.9767 55.719 44.2637C55.6472 44.5507 55.5037 44.8736 55.2885 45.2324L38.0683 68.4797L56.4724 92.8032C56.7594 93.2337 56.9387 93.5925 57.0105 93.8795C57.154 94.1665 57.2257 94.4176 57.2257 94.6329C57.2257 95.2786 56.9746 95.8526 56.4724 96.3549C56.0418 96.7854 55.5037 97.0006 54.858 97.0006H45.064C44.2747 97.0006 43.6648 96.8212 43.2343 96.4625C42.8038 96.032 42.4451 95.6374 42.1581 95.2786L29.2429 78.166L16.1125 95.2786C15.8255 95.6374 15.4667 96.032 15.0362 96.4625C14.6775 96.8212 14.0676 97.0006 13.2066 97.0006H3.73546Z" fill="#333366"/>
<path d="M69.4363 97.0006C68.7188 97.0006 68.1089 96.7495 67.6066 96.2472C67.1044 95.745 66.8532 95.1351 66.8532 94.4176V43.618C66.8532 42.9005 67.1044 42.2906 67.6066 41.7883C68.1089 41.2861 68.7188 41.0349 69.4363 41.0349H77.8311C78.5486 41.0349 79.1585 41.2861 79.6608 41.7883C80.163 42.2906 80.4142 42.9005 80.4142 43.618V47.2773C81.9209 45.2682 83.93 43.5821 86.4412 42.2188C89.0243 40.7838 92.0737 40.0304 95.5895 39.9587C103.769 39.8152 109.473 43.0081 112.702 49.5374C114.352 46.6674 116.72 44.3714 119.805 42.6493C122.962 40.8556 126.442 39.9587 130.245 39.9587C133.976 39.9587 137.348 40.8197 140.362 42.5417C143.447 44.2637 145.851 46.8826 147.573 50.3984C149.367 53.8425 150.264 58.2193 150.264 63.5288V94.4176C150.264 95.1351 150.013 95.745 149.51 96.2472C149.008 96.7495 148.398 97.0006 147.681 97.0006H138.855C138.138 97.0006 137.528 96.7495 137.026 96.2472C136.523 95.745 136.272 95.1351 136.272 94.4176V64.3899C136.272 61.1611 135.806 58.6139 134.873 56.7484C133.94 54.8111 132.685 53.4478 131.106 52.6586C129.528 51.8693 127.77 51.4747 125.832 51.4747C124.254 51.4747 122.675 51.8693 121.097 52.6586C119.518 53.4478 118.227 54.8111 117.222 56.7484C116.218 58.6139 115.716 61.1611 115.716 64.3899V94.4176C115.716 95.1351 115.464 95.745 114.962 96.2472C114.46 96.7495 113.85 97.0006 113.133 97.0006H104.307C103.518 97.0006 102.872 96.7495 102.37 96.2472C101.939 95.745 101.724 95.1351 101.724 94.4176V64.3899C101.724 61.1611 101.222 58.6139 100.217 56.7484C99.2129 54.8111 97.9214 53.4478 96.3429 52.6586C94.7643 51.8693 93.0782 51.4747 91.2844 51.4747C89.6342 51.4747 88.0198 51.9052 86.4412 52.7662C84.8627 53.5555 83.5712 54.8829 82.5667 56.7484C81.5622 58.6139 81.0599 61.1611 81.0599 64.3899V94.4176C81.0599 95.1351 80.8088 95.745 80.3065 96.2472C79.8043 96.7495 79.1944 97.0006 78.4769 97.0006H69.4363Z" fill="#333366"/>
<path d="M166.66 97.0006C165.942 97.0006 165.332 96.7495 164.83 96.2472C164.328 95.745 164.077 95.1351 164.077 94.4176V23.169C164.077 22.4515 164.328 21.8416 164.83 21.3393C165.332 20.8371 165.942 20.5859 166.66 20.5859H175.593C176.31 20.5859 176.92 20.8371 177.422 21.3393C177.925 21.8416 178.176 22.4515 178.176 23.169V94.4176C178.176 95.1351 177.925 95.745 177.422 96.2472C176.92 96.7495 176.31 97.0006 175.593 97.0006H166.66Z" fill="#333366"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M309 3H193V119H309V3ZM191 1V121H311V1H191Z" fill="#3367CC"/>
</svg>
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/public/resources/xmlui-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="312" height="122" viewBox="0 0 312 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M229.875 98.0763C225.499 98.0763 221.696 97.1076 218.467 95.1703C215.31 93.1613 212.87 90.363 211.148 86.7755C209.426 83.1162 208.565 78.8111 208.565 73.8603V43.6173C208.565 42.8998 208.817 42.2899 209.319 41.7877C209.821 41.2854 210.431 41.0343 211.148 41.0343H220.62C221.409 41.0343 222.019 41.2854 222.449 41.7877C222.951 42.2899 223.203 42.8998 223.203 43.6173V73.2146C223.203 82.1117 227.113 86.5602 234.934 86.5602C238.665 86.5602 241.607 85.3763 243.759 83.0086C245.984 80.6408 247.096 77.3761 247.096 73.2146V43.6173C247.096 42.8998 247.347 42.2899 247.849 41.7877C248.351 41.2854 248.961 41.0343 249.679 41.0343H259.15C259.867 41.0343 260.477 41.2854 260.979 41.7877C261.482 42.2899 261.733 42.8998 261.733 43.6173V94.417C261.733 95.1345 261.482 95.7443 260.979 96.2466C260.477 96.7489 259.867 97 259.15 97H250.432C249.643 97 248.997 96.7489 248.495 96.2466C248.064 95.7443 247.849 95.1345 247.849 94.417V90.0043C245.912 92.5156 243.508 94.4887 240.638 95.9237C237.768 97.3587 234.18 98.0763 229.875 98.0763Z" fill="#3367CC"/>
<path d="M278.533 97C277.815 97 277.205 96.7489 276.703 96.2466C276.201 95.7443 275.95 95.1345 275.95 94.417V43.6173C275.95 42.8998 276.201 42.2899 276.703 41.7877C277.205 41.2854 277.815 41.0343 278.533 41.0343H287.466C288.255 41.0343 288.865 41.2854 289.295 41.7877C289.798 42.2899 290.049 42.8998 290.049 43.6173V94.417C290.049 95.1345 289.798 95.7443 289.295 96.2466C288.865 96.7489 288.255 97 287.466 97H278.533ZM278.102 31.7784C277.313 31.7784 276.667 31.5632 276.165 31.1327C275.734 30.6304 275.519 29.9847 275.519 29.1954V21.4463C275.519 20.7288 275.734 20.1189 276.165 19.6167C276.667 19.1144 277.313 18.8633 278.102 18.8633H287.896C288.685 18.8633 289.331 19.1144 289.833 19.6167C290.336 20.1189 290.587 20.7288 290.587 21.4463V29.1954C290.587 29.9847 290.336 30.6304 289.833 31.1327C289.331 31.5632 288.685 31.7784 287.896 31.7784H278.102Z" fill="#3367CC"/>
<path d="M3.73546 97.0006C3.0897 97.0006 2.51569 96.7854 2.01343 96.3549C1.58293 95.8526 1.36768 95.2786 1.36768 94.6329C1.36768 94.4176 1.40355 94.1665 1.4753 93.8795C1.6188 93.5925 1.83406 93.2337 2.12106 92.8032L20.4175 68.2644L3.41258 45.2324C3.19732 44.8736 3.01795 44.5507 2.87444 44.2637C2.80269 43.9767 2.76682 43.6897 2.76682 43.4027C2.76682 42.757 2.98207 42.2188 3.41258 41.7883C3.91483 41.2861 4.48884 41.0349 5.1346 41.0349H14.4981C15.3591 41.0349 16.0049 41.2502 16.4354 41.6807C16.8659 42.1112 17.1887 42.5058 17.404 42.8646L29.5658 59.0085L41.7275 42.8646C42.0146 42.5058 42.3374 42.1112 42.6962 41.6807C43.1267 41.2502 43.7724 41.0349 44.6335 41.0349H53.5664C54.2122 41.0349 54.7503 41.2861 55.1808 41.7883C55.6831 42.2188 55.9342 42.7211 55.9342 43.2951C55.9342 43.6538 55.8625 43.9767 55.719 44.2637C55.6472 44.5507 55.5037 44.8736 55.2885 45.2324L38.0683 68.4797L56.4724 92.8032C56.7594 93.2337 56.9387 93.5925 57.0105 93.8795C57.154 94.1665 57.2257 94.4176 57.2257 94.6329C57.2257 95.2786 56.9746 95.8526 56.4724 96.3549C56.0418 96.7854 55.5037 97.0006 54.858 97.0006H45.064C44.2747 97.0006 43.6648 96.8212 43.2343 96.4625C42.8038 96.032 42.4451 95.6374 42.1581 95.2786L29.2429 78.166L16.1125 95.2786C15.8255 95.6374 15.4667 96.032 15.0362 96.4625C14.6775 96.8212 14.0676 97.0006 13.2066 97.0006H3.73546Z" fill="#333366"/>
<path d="M69.4363 97.0006C68.7188 97.0006 68.1089 96.7495 67.6066 96.2472C67.1044 95.745 66.8532 95.1351 66.8532 94.4176V43.618C66.8532 42.9005 67.1044 42.2906 67.6066 41.7883C68.1089 41.2861 68.7188 41.0349 69.4363 41.0349H77.8311C78.5486 41.0349 79.1585 41.2861 79.6608 41.7883C80.163 42.2906 80.4142 42.9005 80.4142 43.618V47.2773C81.9209 45.2682 83.93 43.5821 86.4412 42.2188C89.0243 40.7838 92.0737 40.0304 95.5895 39.9587C103.769 39.8152 109.473 43.0081 112.702 49.5374C114.352 46.6674 116.72 44.3714 119.805 42.6493C122.962 40.8556 126.442 39.9587 130.245 39.9587C133.976 39.9587 137.348 40.8197 140.362 42.5417C143.447 44.2637 145.851 46.8826 147.573 50.3984C149.367 53.8425 150.264 58.2193 150.264 63.5288V94.4176C150.264 95.1351 150.013 95.745 149.51 96.2472C149.008 96.7495 148.398 97.0006 147.681 97.0006H138.855C138.138 97.0006 137.528 96.7495 137.026 96.2472C136.523 95.745 136.272 95.1351 136.272 94.4176V64.3899C136.272 61.1611 135.806 58.6139 134.873 56.7484C133.94 54.8111 132.685 53.4478 131.106 52.6586C129.528 51.8693 127.77 51.4747 125.832 51.4747C124.254 51.4747 122.675 51.8693 121.097 52.6586C119.518 53.4478 118.227 54.8111 117.222 56.7484C116.218 58.6139 115.716 61.1611 115.716 64.3899V94.4176C115.716 95.1351 115.464 95.745 114.962 96.2472C114.46 96.7495 113.85 97.0006 113.133 97.0006H104.307C103.518 97.0006 102.872 96.7495 102.37 96.2472C101.939 95.745 101.724 95.1351 101.724 94.4176V64.3899C101.724 61.1611 101.222 58.6139 100.217 56.7484C99.2129 54.8111 97.9214 53.4478 96.3429 52.6586C94.7643 51.8693 93.0782 51.4747 91.2844 51.4747C89.6342 51.4747 88.0198 51.9052 86.4412 52.7662C84.8627 53.5555 83.5712 54.8829 82.5667 56.7484C81.5622 58.6139 81.0599 61.1611 81.0599 64.3899V94.4176C81.0599 95.1351 80.8088 95.745 80.3065 96.2472C79.8043 96.7495 79.1944 97.0006 78.4769 97.0006H69.4363Z" fill="#333366"/>
<path d="M166.66 97.0006C165.942 97.0006 165.332 96.7495 164.83 96.2472C164.328 95.745 164.077 95.1351 164.077 94.4176V23.169C164.077 22.4515 164.328 21.8416 164.83 21.3393C165.332 20.8371 165.942 20.5859 166.66 20.5859H175.593C176.31 20.5859 176.92 20.8371 177.422 21.3393C177.925 21.8416 178.176 22.4515 178.176 23.169V94.4176C178.176 95.1351 177.925 95.745 177.422 96.2472C176.92 96.7495 176.31 97.0006 175.593 97.0006H166.66Z" fill="#333366"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M309 3H193V119H309V3ZM191 1V121H311V1H191Z" fill="#3367CC"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/css-utils.ts:
--------------------------------------------------------------------------------
```typescript
import type {CSSProperties} from "react";
import { useEffect, useRef} from "react";
import Color from "color";
import { getVarKey } from "../theming/themeVars";
import { EMPTY_OBJECT } from "../constants";
import type { ValueExtractor } from "../../abstractions/RendererDefs";
/**
* Converts a string to its kebab-case representation
* @param str Input string
* @returns Kebab-case representation
*/
export function kebabCase(str: string): string {
return str.replace(/[A-Z]/g, (v) => `-${v.toLowerCase()}`);
}
/**
* Converts the set of style properties to a string
* @param style Style properties
* @returns Style string representation
*/
export function toStyleString(style: CSSProperties): string {
return Object.keys(style).reduce((accumulator, key) => {
// remove ' in value
const cssValue = (style as any)[key].toString().replace("'", "");
// build the result
// you can break the line, add indent for it if you need
return `${accumulator}${key}:${cssValue};`;
}, "");
}
const formatStringToCamelCase = (str: string) => {
const splitted = str.split("-");
if (splitted.length === 1) return splitted[0];
return (
splitted[0] +
splitted
.slice(1)
.map((word) => word[0].toUpperCase() + word.slice(1))
.join("")
);
};
export const getStyleObjectFromString = (str: string) => {
const style: React.CSSProperties = {};
str.split(";").forEach((el) => {
const [property, value] = el.split(":");
if (!property || !value) return;
const formattedProperty = formatStringToCamelCase(property.trim());
// @ts-ignore
style[formattedProperty] = value.trim();
});
return style;
};
export function normalizeCssValueForCalc(cssValue: string | number) {
// 1. number -> append "px"
if (typeof cssValue === "number") return cssValue + "px";
// 2. string
const cssTrimmed = cssValue.trim();
if (cssTrimmed.startsWith("var(")) {
return cssTrimmed;
}
const value = parseFloat(cssTrimmed);
const valueStr = value.toString();
const unit = cssTrimmed.replace(valueStr, "");
// a) non-value -> "0px"
if (Number.isNaN(value)) return "0px";
// b) value without unit -> append "px"
if (unit === "") return valueStr + "px";
// c) value with unit -> do nothing
return cssTrimmed;
}
export type ColorDef = {
name: string;
format: "hex" | "rgb" | "hsl";
};
export function getColor(varName: string, format?: "hex" | "rgb" | "hsl") {
const varValue = getComputedStyle(document.getElementById("_ui-engine-theme-root")!).getPropertyValue(
getVarKey(varName)
);
if (format === "hex") {
return Color(varValue).hex().toString();
}
return Color(varValue).toString();
}
export function getColors(...colors: (string | ColorDef)[]) {
const ret: Record<string, string> = {};
for (const color of colors) {
if (typeof color === "string") {
ret[color] = getColor(color);
} else {
ret[color.name] = getColor(color.name, color.format);
}
}
return ret;
}
export function getMaxLinesStyle(maxLines: number | undefined) {
const _maxLines = maxLines && maxLines > 0 ? maxLines : 0;
const maxLinesStyles: CSSProperties =
_maxLines > 1
? {
WebkitLineClamp: _maxLines,
lineClamp: _maxLines,
display: "-webkit-box",
WebkitBoxOrient: "vertical",
boxOrient: "vertical",
whiteSpace: "initial",
}
: EMPTY_OBJECT;
return maxLinesStyles;
}
export function getSizeString(size: any): string {
if (typeof size === "number") {
return size + "px";
}
if (typeof size === "string" && /^\d+$/.test(size.trim())) {
const rowGapValue = parseInt(size, 10);
if (!isNaN(rowGapValue)) {
return rowGapValue + "px";
}
}
return size?.toString();
}
export const useScrollbarWidth = () => {
const didCompute = useRef(false);
const widthRef = useRef(0);
useEffect(()=>{
function handleResize(){
didCompute.current = false;
}
window.addEventListener("resize", handleResize);
return ()=>{
window.removeEventListener("resize", handleResize);
}
}, []);
if (didCompute.current) return widthRef.current;
// Creating invisible container
if(typeof document === 'undefined'){
return 0;
}
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
document.body.appendChild(outer);
// Calculating difference between container's full width and the child width
const scrollbarWidth = outer.offsetWidth - outer.clientWidth;
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
didCompute.current = true;
widthRef.current = scrollbarWidth;
if(window.devicePixelRatio !== Math.round(window.devicePixelRatio)){
//zoomed in a weird ratio, sometimes shows a horizontal scrollbar
widthRef.current = scrollbarWidth - 0.5;
}
return widthRef.current;
};
export function extractPaddings(extractValue: ValueExtractor, props) {
const paddingHorizontal = extractValue.asSize(props.paddingHorizontal);
const paddingVertical = extractValue.asSize(props.paddingVertical);
const paddingLeft = extractValue.asSize(props.paddingLeft);
const paddingRight = extractValue.asSize(props.paddingRight);
const paddingTop = extractValue.asSize(props.paddingTop);
const paddingBottom = extractValue.asSize(props.paddingBottom);
const padding = extractValue.asSize(props.padding);
return {
paddingLeft: paddingLeft || paddingHorizontal || padding,
paddingRight: paddingRight || paddingHorizontal || padding,
paddingTop: paddingTop || paddingVertical || padding,
paddingBottom: paddingBottom || paddingVertical || padding,
};
}
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/screen-breakpoints.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../src/testing/fixtures";
test("Recognizes xs (phone) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 180, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.phone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xs|0|true");
});
test("Recognizes xs (phone) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 320, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.phone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xs|0|true");
});
test("Recognizes xs (phone) viewport size #3", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 575, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.phone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xs|0|true");
});
test("Recognizes sm (landscape phone) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 576, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.landscapePhone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("sm|1|true");
});
test("Recognizes sm (landscape phone) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 640, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.landscapePhone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("sm|1|true");
});
test("Recognizes sm (landscape phone) viewport size #3", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 767, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.landscapePhone}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("sm|1|true");
});
test("Recognizes md (tablet) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 768, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.tablet}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("md|2|true");
});
test("Recognizes md (tablet) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 840, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.tablet}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("md|2|true");
});
test("Recognizes md (tablet) viewport size #3", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 991, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.tablet}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("md|2|true");
});
test("Recognizes lg (desktop) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 992, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.desktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("lg|3|true");
});
test("Recognizes lg (desktop) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1024, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.desktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("lg|3|true");
});
test("Recognizes lg (desktop) viewport size #3", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1199, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.desktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("lg|3|true");
});
test("Recognizes xl (large desktop) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1200, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.largeDesktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xl|4|true");
});
test("Recognizes xl (large desktop) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1364, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.largeDesktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xl|4|true");
});
test("Recognizes xl (large desktop) viewport size #3", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1399, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.largeDesktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xl|4|true");
});
test("Recognizes xxl (xl desktop) viewport size #1", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 1400, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.xlDesktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xxl|5|true");
});
test("Recognizes xxl (xl desktop) viewport size #2", async ({ page, initTestBed }) => {
await page.setViewportSize({ width: 4096, height: 480 });
await initTestBed(
`<Text testId="bp" value="{mediaSize.size}|{mediaSize.sizeIndex}|{mediaSize.xlDesktop}"/>`,
);
await expect(page.getByTestId("bp")).toHaveText("xxl|5|true");
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/RadarChart/RadarChart.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
Interactive radar chart for displaying multivariate data in a two-dimensional chart of three or more quantitative variables.
**Key features:**
- **Multivariate visualization**: Perfect for displaying data across multiple dimensions in a polar coordinate system
- **Multiple data series**: Compare several entities across the same set of metrics
- **Filled areas**: Configurable fill opacity for better visual comparison
- **Flexible styling**: Customizable stroke width and fill properties
- **Polar grid system**: Clear reference lines for value estimation
%-DESC-END
%-PROP-START data
```xml
<RadarChart
nameKey="subject"
data="{[
{ subject: 'Math', A: 120, B: 110, fullMark: 150 },
{ subject: 'Chinese', A: 98, B: 130, fullMark: 150 },
{ subject: 'English', A: 86, B: 130, fullMark: 150 }
]}"
dataKeys="{['A', 'B']}"
/>
```
%-PROP-END
%-PROP-START nameKey
```xml
<RadarChart
nameKey="skill"
data="{[
{ skill: 'Communication', teamA: 80, teamB: 90 },
{ skill: 'Problem Solving', teamA: 95, teamB: 85 },
{ skill: 'Leadership', teamA: 70, teamB: 95 },
{ skill: 'Technical', teamA: 90, teamB: 80 }
]}"
dataKeys="{['teamA', 'teamB']}"
/>
```
%-PROP-END
%-PROP-START dataKeys
```xml
<RadarChart
nameKey="attribute"
data="{[
{ attribute: 'Speed', player1: 85, player2: 90, player3: 75 },
{ attribute: 'Strength', player1: 90, player2: 80, player3: 95 },
{ attribute: 'Agility', player1: 75, player2: 85, player3: 80 },
{ attribute: 'Endurance', player1: 80, player2: 75, player3: 90 }
]}"
dataKeys="{['player1', 'player2', 'player3']}"
/>
```
%-PROP-END
%-PROP-START hideGrid
```xml
<RadarChart
nameKey="metric"
data="{[
{ metric: 'A', value: 80 },
{ metric: 'B', value: 65 },
{ metric: 'C', value: 90 },
{ metric: 'D', value: 75 }
]}"
dataKeys="{['value']}"
hideGrid="true"
/>
```
%-PROP-END
%-PROP-START hideAngleAxis
```xml
<RadarChart
nameKey="metric"
data="{[
{ metric: 'A', value: 80 },
{ metric: 'B', value: 65 },
{ metric: 'C', value: 90 },
{ metric: 'D', value: 75 }
]}"
dataKeys="{['value']}"
hideAngleAxis="true"
/>
```
%-PROP-END
%-PROP-START hideRadiusAxis
```xml
<RadarChart
nameKey="metric"
data="{[
{ metric: 'A', value: 80 },
{ metric: 'B', value: 65 },
{ metric: 'C', value: 90 },
{ metric: 'D', value: 75 }
]}"
dataKeys="{['value']}"
hideRadiusAxis="true"
/>
```
%-PROP-END
%-PROP-START hideTooltip
```xml
<RadarChart
nameKey="metric"
data="{[
{ metric: 'A', value: 80 },
{ metric: 'B', value: 65 },
{ metric: 'C', value: 90 },
{ metric: 'D', value: 75 }
]}"
dataKeys="{['value']}"
hideTooltip="true"
/>
```
%-PROP-END
%-PROP-START showLegend
```xml
<RadarChart
nameKey="attribute"
data="{[
{ attribute: 'Speed', player1: 85, player2: 90, player3: 75 },
{ attribute: 'Strength', player1: 90, player2: 80, player3: 95 },
{ attribute: 'Agility', player1: 75, player2: 85, player3: 80 },
{ attribute: 'Endurance', player1: 80, player2: 75, player3: 90 }
]}"
dataKeys="{['player1', 'player2', 'player3']}"
showLegend="true"
/>
```
%-PROP-END
%-PROP-START filled
```xml
<RadarChart
nameKey="attribute"
data="{[
{ attribute: 'Speed', player1: 85, player2: 90, player3: 75 },
{ attribute: 'Strength', player1: 90, player2: 80, player3: 95 },
{ attribute: 'Agility', player1: 75, player2: 85, player3: 80 },
{ attribute: 'Endurance', player1: 80, player2: 75, player3: 90 }
]}"
dataKeys="{['player1', 'player2', 'player3']}"
filled="true"
fillOpacity="0.4"
/>
```
%-PROP-END
%-PROP-START strokeWidth
```xml
<RadarChart
nameKey="category"
data="{[
{ category: 'Performance', current: 80, target: 95 },
{ category: 'Quality', current: 90, target: 85 },
{ category: 'Efficiency', current: 75, target: 90 },
{ category: 'Innovation', current: 85, target: 80 }
]}"
dataKeys="{['current', 'target']}"
filled="false"
strokeWidth="4"
/>
```
%-PROP-END
%-PROP-START fillOpacity
```xml
<RadarChart
nameKey="dimension"
data="{[
{ dimension: 'Usability', product1: 85, product2: 75 },
{ dimension: 'Performance', product1: 90, product2: 95 },
{ dimension: 'Design', product1: 80, product2: 85 },
{ dimension: 'Features', product1: 75, product2: 80 }
]}"
dataKeys="{['product1', 'product2']}"
filled="true"
fillOpacity="0.6"
/>
```
%-PROP-END
%-PROP-START tooltipTemplate
```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
<App>
<RadarChart
height="240px"
data="{[
{ 'skill': 'Communication', 'teamA': 80, 'teamB': 90 },
{ 'skill': 'Problem Solving', 'teamA': 95, 'teamB': 85 },
{ 'skill': 'Leadership', 'teamA': 70, 'teamB': 95 },
{ 'skill': 'Technical', 'teamA': 90, 'teamB': 80 }
]}"
dataKeys="{['teamA', 'teamB']}"
nameKey="skill"
>
<property name="tooltipTemplate">
<VStack backgroundColor='white' padding="$space-2">
<Text fontWeight='bold'>{$tooltip.label}</Text>
<HStack>
<Text color='blue'>Team A: {$tooltip.payload.teamA}</Text>
<Text color='green'>Team B: {$tooltip.payload.teamB}</Text>
</HStack>
</VStack>
</property>
</RadarChart>
</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 nameKey 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
```