This is page 8 of 137. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── cold-items-taste.md
│ ├── config.json
│ ├── empty-spiders-dress.md
│ ├── shy-windows-allow.md
│ ├── sour-coins-read.md
│ ├── tame-zebras-invite.md
│ ├── three-ideas-invent.md
│ ├── twenty-jeans-watch.md
│ ├── warm-spies-melt.md
│ └── whole-ways-cry.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── 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
│ │ ├── 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
│ │ │ └── PageNotFound.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
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.md
│ ├── containers.md
│ ├── data-sources.md
│ ├── e2e-summary.md
│ ├── expression-evaluation.md
│ ├── glossary.md
│ ├── helper-components.md
│ ├── index.md
│ ├── loaders.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
│ ├── rendering-fundamentals.md
│ ├── reusable-components.md
│ ├── standalone-apps.md
│ ├── state-management.md
│ └── xmlui-extensibility.xlsx
├── 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
│ │ │ ├── BehaviorContext.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/tests-e2e/datasource-direct-binding.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
test("directly bound datasource doesn't show empty list template during load", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<DataSource url="/data1" id="data"/>
<List data="{data}" testId="list">
<property name="emptyListTemplate">
<Text testId="emptyLabel">Empty</Text>
</property>
</List>
</Fragment>
`, {
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data1",
method: "get",
handler: `() => { return ['data1', 'data2']; }`,
},
},
},
});
await page.waitForRequest("/data1", {timeout: 0});
//asserts that the emptyListTemplate is not rendered
expect(await page.getByTestId("emptyLabel").count()).toEqual(0);
await expect(page.getByTestId("list")).toHaveText("data1data2");
});
test("directly bound datasource through multiple container levels", async ({ page, initTestBed }) => {
await initTestBed(`
<App>
<DataSource id="allContacts" url="/data1" />
<Pages>
<Page url="/">
<List data="{allContacts}" testId="list">
<property name="emptyListTemplate">
<Text testId="emptyLabel">Empty</Text>
</property>
</List>
</Page>
</Pages>
</App>
`, {
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data1",
method: "get",
handler: `() => { return ['data1', 'data2']; }`,
},
},
},
});
await page.waitForRequest("/data1", {timeout: 0});
//asserts that the emptyListTemplate is not rendered
expect(await page.getByTestId("emptyLabel").count()).toEqual(0);
await expect(page.getByTestId("list")).toHaveText("data1data2");
});
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/scripting/ScriptingNodeTypes.ts:
--------------------------------------------------------------------------------
```typescript
// --- Statement node type values
export const T_BLOCK_STATEMENT = 1;
export const T_EMPTY_STATEMENT = 2;
export const T_EXPRESSION_STATEMENT = 3;
export const T_ARROW_EXPRESSION_STATEMENT = 4;
export const T_LET_STATEMENT = 5;
export const T_CONST_STATEMENT = 6;
export const T_VAR_STATEMENT = 7;
export const T_IF_STATEMENT = 8;
export const T_RETURN_STATEMENT = 9;
export const T_BREAK_STATEMENT = 10;
export const T_CONTINUE_STATEMENT = 11;
export const T_WHILE_STATEMENT = 12;
export const T_DO_WHILE_STATEMENT = 13;
export const T_FOR_STATEMENT = 14;
export const T_FOR_IN_STATEMENT = 15;
export const T_FOR_OF_STATEMENT = 16;
export const T_THROW_STATEMENT = 17;
export const T_TRY_STATEMENT = 18;
export const T_SWITCH_STATEMENT = 19;
export const T_FUNCTION_DECLARATION = 20;
// --- Expression node type values
export const T_UNARY_EXPRESSION = 100;
export const T_BINARY_EXPRESSION = 101;
export const T_SEQUENCE_EXPRESSION = 102;
export const T_CONDITIONAL_EXPRESSION = 103;
export const T_FUNCTION_INVOCATION_EXPRESSION = 104;
export const T_MEMBER_ACCESS_EXPRESSION = 105;
export const T_CALCULATED_MEMBER_ACCESS_EXPRESSION = 106;
export const T_IDENTIFIER = 107;
export const T_TEMPLATE_LITERAL_EXPRESSION = 108;
export const T_LITERAL = 109;
export const T_ARRAY_LITERAL = 110;
export const T_OBJECT_LITERAL = 111;
export const T_SPREAD_EXPRESSION = 112;
export const T_ASSIGNMENT_EXPRESSION = 113;
export const T_NO_ARG_EXPRESSION = 114;
export const T_ARROW_EXPRESSION = 115;
export const T_PREFIX_OP_EXPRESSION = 116;
export const T_POSTFIX_OP_EXPRESSION = 117;
export const T_REACTIVE_VAR_DECLARATION = 118;
// --- Other node type values
export const T_VAR_DECLARATION = 200;
export const T_DESTRUCTURE = 201;
export const T_ARRAY_DESTRUCTURE = 202;
export const T_OBJECT_DESTRUCTURE = 203;
export const T_SWITCH_CASE = 204;
```
--------------------------------------------------------------------------------
/xmlui/src/components/ToneSwitch/ToneSwitch.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import styles from "./ToneSwitch.module.scss";
import { ToneSwitch, type ToneSwitchProps } from "./ToneSwitchNative";
const COMP = "ToneSwitch";
export const ToneSwitchMd = createMetadata({
status: "stable",
description:
"`ToneSwitch` enables the user to switch between light and dark modes using a switch control.",
props: {
iconLight: {
type: "string",
description: "Icon to display for light mode",
defaultValue: "sun",
},
iconDark: {
type: "string",
description: "Icon to display for dark mode",
defaultValue: "moon",
},
},
themeVars: parseScssVar(styles.themeVars),
limitThemeVarsToComponent: true,
defaultThemeVars: {
[`backgroundColor-${COMP}-light`]: "$color-surface-200",
[`color-${COMP}-light`]: "$color-text-primary",
[`backgroundColor-${COMP}-dark`]: "$color-primary-500",
[`color-${COMP}-dark`]: "$color-surface-0",
[`borderColor-${COMP}`]: "$color-surface-200",
[`borderColor-${COMP}--hover`]: "$color-surface-300",
dark: {
[`backgroundColor-${COMP}-light`]: "$color-surface-700",
[`color-${COMP}-light`]: "$color-text-primary",
[`borderColor-${COMP}`]: "$color-surface-600",
[`borderColor-${COMP}--hover`]: "$color-surface-500",
},
},
});
/**
* Define the renderer for the ToneSwitch component
*/
export const toneSwitchComponentRenderer = createComponentRenderer(
COMP,
ToneSwitchMd,
({ node, extractValue, className }) => {
return <ToneSwitch
className={className}
iconLight={extractValue(node.props.iconLight)}
iconDark={extractValue(node.props.iconDark)}
/>;
}
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/TextArea/TextAreaResizable.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react";
import { useEffect, useRef } from "react";
import { useComposedRef } from "./useComposedRef";
const noop = () => {};
type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
type Style = Omit<NonNullable<TextAreaProps["style"]>, "maxHeight" | "minHeight"> & {
height?: number;
};
interface TextAreaAutosizeProps extends Omit<TextAreaProps, "style"> {
maxRows?: number;
minRows?: number;
style?: Style;
}
const TextAreaResizable: React.ForwardRefRenderFunction<HTMLTextAreaElement, TextAreaAutosizeProps> = (
{ maxRows, minRows, onChange = noop, style, ...props },
userRef
) => {
const libRef = useRef<HTMLTextAreaElement | null>(null);
const ref = useComposedRef(libRef, userRef);
const [minCompHeight, setMinCompHeight] = React.useState<number>();
const [maxCompHeight, setMaxCompHeight] = React.useState<number>();
useEffect(() => {
if (!libRef.current) return;
// --- Simple get the physical sizes of the component...
const style = getComputedStyle(libRef.current as HTMLElement);
const lineHeight = parseFloat(style.lineHeight);
const paddingSize = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
const borderSize = parseFloat(style.borderTop) + parseFloat(style.borderBottom);
const extraSize = (style.boxSizing === "border-box" ? borderSize : 0) + paddingSize;
// --- ... and calculate the min and max heights based on the line height
setMinCompHeight(lineHeight * (minRows ?? 1) + extraSize);
setMaxCompHeight(lineHeight * (maxRows ?? 10_000) + extraSize);
}, [maxRows, minRows]);
return (
<textarea
ref={ref}
{...props}
onChange={onChange}
style={{ ...style, minHeight: minCompHeight, maxHeight: maxCompHeight }}
/>
);
};
export default React.forwardRef(TextAreaResizable);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/request-params.ts:
--------------------------------------------------------------------------------
```typescript
// Testable helper function to convert request parameters
export function convertRequestParamPart(
part: Record<string, any>,
paramTypes?: Record<string, string>
): Record<string, any> {
if (!paramTypes) return part;
const result = { ...part };
Object.keys(part).forEach((key) => {
if (!(key in paramTypes)) return;
const partValue = part[key];
const partValueType = typeof partValue;
switch (paramTypes[key]) {
// --- Parameter to integer
case "integer":
switch (partValueType) {
case "number":
result[key] = Math.round(partValue);
break;
case "string":
result[key] = parseInt(partValue, 10);
break;
case "boolean":
result[key] = partValue ? 1 : 0;
break;
}
break;
// --- Parameter to float
case "float":
case "real":
case "double":
switch (partValueType) {
case "number":
result[key] = partValue;
break;
case "string":
result[key] = parseFloat(partValue);
break;
case "boolean":
result[key] = partValue ? 1 : 0;
break;
}
break;
// --- Parameter to boolean
case "boolean":
switch (partValueType) {
case "string":
switch (partValue.toLowerCase()) {
case "true":
case "yes":
case "on":
result[key] = true;
break;
case "false":
case "no":
case "off":
result[key] = false;
break;
}
break;
case "number":
result[key] = !!partValue;
break;
}
break;
}
});
return result;
}
```
--------------------------------------------------------------------------------
/docs/public/pages/universal-properties.md:
--------------------------------------------------------------------------------
```markdown
# Universal Properties
These properties can be used with any XMLUI component.
## id
The `id` property assigns a unique identifier to a component.
```xmlui
<Button id="submit-button" onClick="{handleSubmit}">Submit</Button>
```
```xmlui
<TextBox id="email-input" placeholder="Enter your email" />
```
```xmlui /detailsDialog/
<!-- Modal with ID used by table action -->
<Table data="/api/clients">
<Column bindTo="name" />
<Column header="Details">
<Icon name="doc-outline" onClick="detailsDialog.open($item)" />
</Column>
</Table>
<ModalDialog id="detailsDialog" maxWidth="800px">
<ClientDetails client="{$param}" />
</ModalDialog>
```
```xmlui
<!-- Dynamic IDs with data -->
<Items data="{posts}">
<DataSource id="replyAccount-{$item.id}" url="/api/accounts/{$item.author_id}">
<Text>Post by {$item.title}</Text>
</DataSource>
</Items>
```
## when
Set `when` to `false` to prevent rendering of a component.
```xmlui
<Text when="{user.isLoggedIn}">Welcome back!</Text>
```
```xmlui
<Spinner when="{isLoading}">Loading...</Spinner>
```
## data
The `data` property makes external data available to a component. It's typically used with [List](/components/List), [Items](/components/Items), and [Table](/components/Table), but any component can receive data this way.
When the property is a reference to a `DataSource`, its value is the data returned from that `DataSource`.
```xmlui
<List data="{users}">
<Text>{$item.name}</Text>
</List>
```
```xmlui
<Items data="{products}">
<Card>
<Text>{$item.title}</Text>
<Text>{$item.price}</Text>
</Card>
</Items>
```
When the property is a string, the value is interpreted as an URL that returns JSON.
```xmlui
<List data="https://api.tfl.gov.uk/line/mode/tube/status">
<Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
</List>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components/CodeBlock/CodeBlock.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./CodeBlock.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { CodeBlock } from "./CodeBlockNative";
import { createMetadata } from "../metadata-helpers";
const COMP = "CodeBlock";
export const CodeBlockMd = createMetadata({
status: "stable",
description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
props: {},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
"backgroundColor-CodeBlock": "$color-primary-50",
"backgroundColor-CodeBlock-header": "$color-primary-100",
"marginTop-CodeBlock": "$space-5",
"marginBottom-CodeBlock": "$space-5",
"backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-200 r g b / 0.25)",
"backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-200 r g b / 0.5)",
"borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
"border-CodeBlock": "0.5px solid $borderColor",
"borderRadius-CodeBlock": "$space-2",
"height-CodeBlock": "fit-content",
"paddingVertical-content-CodeBlock": "0",
"paddingHorizontal-content-CodeBlock": "0",
dark: {
"backgroundColor-CodeBlock-header": "$color-surface-200",
"backgroundColor-CodeBlock": "$color-surface-50",
"backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-300 r g b / 0.15)",
"backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-300 r g b / 0.5)",
}
},
});
export const codeBlockComponentRenderer = createComponentRenderer(
"CodeBlock",
CodeBlockMd,
({ node, renderChild, className }) => {
return (
<CodeBlock className={className}>
{renderChild(node.children)}
</CodeBlock>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Pagination/Pagination.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
## Standalone
If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:
```xmlui-pg copy display
<App>
<Pagination itemCount="100" pageSize="10" />
</App>
```
If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:
```xmlui-pg copy display
<App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App>
```
## Integrations
### Table
`Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.
```xmlui
<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
<Column header="ID" bindTo="elem" width="80px">
<!-- ... -->
</Column>
<!-- ... -->
</Table>
```
See the [Table reference](./Table#ispaginated-default-false) for a working example.
### List
The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:
```xmlui
<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
itemCount="20"
pageSize="{pageSize}"
pageIndex="{currentPage}"
onPageDidChange="(page, size, total) => {
currentPage = page;
before = page * size;
after = before + size - 1;
}"
/>
<List data="{ds}" />
```
For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/abstractions/treeAbstractions.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { NodeLoadingState, FlatTreeNodeWithState, FlatTreeNode } from '../../../src/components-core/abstractions/treeAbstractions';
describe('Tree Abstractions - Loading States', () => {
it('NodeLoadingState type should have correct values', () => {
const unloaded: NodeLoadingState = 'unloaded';
const loading: NodeLoadingState = 'loading';
const loaded: NodeLoadingState = 'loaded';
expect(unloaded).toBe('unloaded');
expect(loading).toBe('loading');
expect(loaded).toBe('loaded');
});
it('FlatTreeNodeWithState should extend FlatTreeNode', () => {
const mockFlatTreeNode: FlatTreeNode = {
id: 1,
key: 1,
path: [],
displayName: 'Test Node',
parentIds: [],
selectable: true,
isExpanded: false,
depth: 0,
hasChildren: false,
};
const nodeWithState: FlatTreeNodeWithState = {
...mockFlatTreeNode,
loadingState: 'unloaded',
};
expect(nodeWithState.loadingState).toBe('unloaded');
expect(nodeWithState.id).toBe(1);
expect(nodeWithState.hasChildren).toBe(false);
});
it('FlatTreeNodeWithState should support all loading states', () => {
const baseNode: FlatTreeNode = {
id: 1,
key: 1,
path: [],
displayName: 'Test Node',
parentIds: [],
selectable: true,
isExpanded: false,
depth: 0,
hasChildren: true,
};
const unloadedNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'unloaded' };
const loadingNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'loading' };
const loadedNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'loaded' };
expect(unloadedNode.loadingState).toBe('unloaded');
expect(loadingNode.loadingState).toBe('loading');
expect(loadedNode.loadingState).toBe('loaded');
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.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: ();
$time: 0.3s;
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$backgroundColor-dropdown-NavGroup: createThemeVar("backgroundColor-dropdown-NavGroup");
$boxShadow-dropdown-NavGroup: createThemeVar("boxShadow-dropdown-NavGroup");
$borderRadius-dropdown-NavGroup: createThemeVar("borderRadius-dropdown-NavGroup");
@layer components {
.dropdownList {
padding: 0;
margin: 0;
left: 0;
top: 0;
position: absolute;
overflow-y: hidden;
background: $backgroundColor-dropdown-NavGroup;
list-style: none;
height: fit-content;
transition: height 0.2s ease;
box-shadow: $boxShadow-dropdown-NavGroup;
min-width: 11rem;
border-radius: $borderRadius-dropdown-NavGroup;
&:focus,
&:focus-visible {
outline: none;
}
}
.groupContent {
/* The core of the grid animation technique */
display: grid;
grid-template-rows: 0fr; /* Initially the content row has 0 height */
will-change: grid-template-rows;
transition: grid-template-rows $time cubic-bezier(0.4, 0, 0.2, 1);
.groupContentInner {
will-change: opacity;
opacity: 0;
}
&.expanded {
.groupContentInner {
opacity: 1;
overflow: hidden;
}
grid-template-rows: 1fr;
}
}
.groupContentInner {
transition: opacity $time ease-out;
/* This is the grid item. Its content determines the 'auto' height. */
overflow: hidden;
display: flex;
flex-direction: column;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/syntax-node.ts:
--------------------------------------------------------------------------------
```typescript
import { SyntaxKind } from "./syntax-kind";
import { findTokenAtPos } from "./utils";
export class Node {
public readonly kind: SyntaxKind;
/** Start position of the node including it's trivia */
public readonly start: number;
public readonly pos: number;
public readonly end: number;
public readonly triviaBefore?: Node[];
public readonly children?: Node[];
constructor(
kind: SyntaxKind,
pos: number,
end: number,
triviaBefore?: Node[],
children?: Node[],
) {
this.kind = kind;
this.pos = pos;
this.end = end;
this.triviaBefore = triviaBefore;
this.children = children;
if (triviaBefore) {
this.start = triviaBefore[0]?.start ?? pos;
} else if (children) {
this.start = children[0]?.start ?? pos;
} else {
this.start = pos;
}
}
isElementNode(): this is ElementNode {
return this.kind === SyntaxKind.ElementNode;
}
isAttributeNode(): this is AttributeNode {
return this.kind === SyntaxKind.AttributeNode;
}
isAttributeKeyNode(): this is AttributeKeyNode {
return this.kind === SyntaxKind.AttributeKeyNode;
}
isContentListNode(): this is ContentListNode {
return this.kind === SyntaxKind.ContentListNode;
}
isAttributeListNode(): this is AttributeListNode {
return this.kind === SyntaxKind.AttributeListNode;
}
isTagNameNode(): this is TagNameNode {
return this.kind === SyntaxKind.TagNameNode;
}
findTokenAtPos(position: number) {
return findTokenAtPos(this, position);
}
}
export class ElementNode extends Node {
getAttributeListNode() {
return this.children!.find((c) => c.isContentListNode());
}
}
export class AttributeNode extends Node {}
export class AttributeKeyNode extends Node {}
export class ContentListNode extends Node {}
export class AttributeListNode extends Node {}
export class TagNameNode extends Node {}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/TabItem.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Label definition**: Provides the clickable tab header text via the label property
- **Content container**: Wraps any child components that display when the tab is active
- **Structural organization**: Creates the relationship between tab headers and their corresponding content
- **Seamless integration**: Designed exclusively for use within [Tabs](/components/Tabs) components
**Usage pattern:**
Always used as a direct child of [Tabs](/components/Tabs) components. The `label` property defines the tab button text, while child components placed within the TabItem provide the content that displays when the tab is selected.
%-DESC-END
%-PROP-START headerTemplate
```xmlui-pg copy {7-9} display name="Example: headerTemplate" /headerTemplate/ height="200px"
<App>
<Tabs>
<TabItem label="Home">
Home content
</TabItem>
<TabItem label="Accounts">
<property name="headerTemplate">
<Text variant="title" color="green">Accounts</Text>
</property>
Accounts content
</TabItem>
<TabItem label="Settings">
Settings content
</TabItem>
</Tabs>
</App>
```
> [!INFO] You can customize the [header templates](./Tabs#headertemplate) of **all** tab items, too. You can mix the `Tabs` level header templates with the `TabItem` level ones. In this case, the `TabItem` level template prevails.
%-PROP-END
%-EVENT-START activated
```xmlui-pg copy display name="Example: activated" /onActivated/ height="200px"
<App var.activationCount="{0}">
<Tabs>
<TabItem label="Account" onActivated="activationCount++">
<Text>Account</Text>
</TabItem>
<TabItem label="Stream">
<Text>Stream</Text>
</TabItem>
<TabItem label="Support">
<Text>Support</Text>
</TabItem>
</Tabs>
<Text>The Account tab has been activated {activationCount} times.</Text>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/APICall/APICall.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key characteristics:**
- **Manual execution**: Call `execute()` method to trigger the API request
- **Form integration**: Commonly used in `<event name="submit">` handlers for forms
- **Parameter passing**: Pass data to the API call via `execute()` parameters
- **Built-in notifications**: Supports automatic progress, success, and error messages
%-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
<APICall
id="ds"
method="post"
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
<APICall
id="ds"
method="post"
url="/api/shopping-list"
errorNotificationMessage="${error.statusCode}, {JSON.stringify($error.details)}" />
```
%-PROP-END
%-PROP-START invalidates
This property takes either a string or a list of strings representing URL endpoints to invalidate the local data cache based on the given URL routes.
For a short overview on client side caching, see the [DataSource component](/components/DataSource).
%-PROP-END
%-PROP-START updates
This property takes either a string or a list of strings representing URL endpoints to indicate which data should be updated in the cache.
%-PROP-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/SelectionStore/SelectionStore.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
For an example that covers all props, and API methods and values, see the [\`Selection-Aware Components\`](#selection-aware-components) section.
## Using `SelectionStore`
A `SelectionStore` instance is a mediator between a component that can manage a list of selected items and the external context.
The wrapped component can report its selection state (which items are currently selected);
so that the external context can access and manage the selection state through the component's API.
## Selection-Aware Components
Some components know they are wrapped with a `SelectionStore` and manage their current selection state through it.
For example, the following sample `SelectionStore` wraps a `Table` with its `rowsSelectable` property set to true.
Whenever the user changes the selection state of a particular row, the `SelectionStore` updates its state accordingly.
```xmlui-pg
---app copy display name="Example: using SelectionStore"
<App>
<H3>Rockets {rockets.value.length ? "(" + rockets.value.length + " selected)" : ""}</H3>
<HStack>
<Button label="Select First"
onClick="if (rockets.value?.length) rockets.setSelectedRowIds([rockets.value[0].id])" />
<Button label="Refresh Table" onClick="rockets.refreshSelection()" />
<Button label="Clear Selection" onClick="rockets.clearSelection()" />
</HStack>
<SelectionStore id="rockets">
<Table
width="100%"
rowsSelectable="{true}"
data="https://api.spacexdata.com/v3/rockets"
height="300px">
<Column header="Image" size="80px">
<Image height="80px" fit="cover" src="{$item.flickr_images[0]}"/>
</Column>
<Column canSort="true" bindTo="country"/>
<Column canSort="true" bindTo="company"/>
</Table>
</SelectionStore>
</App>
---desc
The UI refreshes the number of selected items as you check or uncheck the rows in the following table:
```
%-DESC-END
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ConfirmationDialog.module.scss:
--------------------------------------------------------------------------------
```scss
.Overlay {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.Content {
background-color: #ffffff;
border-radius: 6px;
box-shadow:
rgba(0, 0, 0, 0.35) 0px 10px 38px -10px,
rgba(0, 0, 0, 0.2) 0px 10px 20px -15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 500px;
max-height: 85vh;
padding: 25px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
&:focus {
outline: none;
}
}
.Title {
margin: 0;
color: #1b1c1d;
font-size: 17px;
font-weight: 500;
}
.Description {
margin-bottom: 20px;
color: #6b6c70;
font-size: 15px;
line-height: 1.5;
}
.Button {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0 15px;
font-size: 15px;
line-height: 1;
font-weight: 500;
height: 35px;
}
.Button.violet {
background-color: #ffffff;
color: #7c4dff;
box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 10px;
}
.Button.violet:hover {
background-color: #f2f2f2;
}
.Button.violet:focus {
box-shadow: 0 0 0 2px #000000;
}
.Button.red {
background-color: #ffcccc;
color: #cc0000;
}
.Button.red:hover {
background-color: #ff9999;
}
.Button.red:focus {
box-shadow: 0 0 0 2px #ff6666;
}
.Button.mauve {
background-color: #e5e5e5;
color: #6b6c70;
}
.Button.mauve:hover {
background-color: #d9d9d9;
}
.Button.mauve:focus {
box-shadow: 0 0 0 2px #a6a6a6;
}
.Actions {
width: 100%;
justify-content: flex-end;
align-self: center;
display: flex;
gap: 1rem;
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes contentShow {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/Stack.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);
}
@layer components {
.base {
display: flex;
/* default flexbox alignment */
justify-content: flex-start;
align-items: stretch;
min-height: 0;
min-width: 0;
gap: var(--stack-gap-default);
&.hoverContainer{
:global(.display-on-hover){
transition: opacity .1s;
opacity: 0;
visibility: hidden;
}
&:has(:global(.dropdown-visible)) :global(.display-on-hover){
opacity: 1;
visibility: visible;
}
&:hover, &:focus-within{
:global(.display-on-hover) {
opacity: 1;
visibility: visible;
}
}
}
&.handlesClick{
cursor: pointer;
}
}
.vertical {
flex-direction: column;
min-height: 0;
&.reverse{
flex-direction: column-reverse;
}
}
.horizontal {
flex-direction: row;
&.reverse{
flex-direction: row-reverse;
}
}
/* Main axis */
.justifyItemsStart {
justify-content: flex-start;
}
.justifyItemsCenter {
justify-content: center;
}
.justifyItemsStretch {
justify-content: stretch;
}
.justifyItemsEnd {
justify-content: flex-end;
}
/* Cross axis */
.alignItemsStart {
align-items: flex-start;
}
.alignItemsCenter {
align-items: center;
}
.alignItemsStretch {
align-items: stretch;
}
.alignItemsEnd {
align-items: flex-end;
}
.alignItemsBaseline {
align-items: baseline;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Card/Card.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "Card";
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composeBorderVars($themeVars, $component);
$boxShadow-Card: createThemeVar("boxShadow-Card");
$backgroundColor-Card: createThemeVar("backgroundColor-Card");
$borderRadius-Card: createThemeVar("borderRadius-Card");
$gap-Card: createThemeVar("gap-Card");
$gap-title-Card: createThemeVar("gap-title-Card");
$gap-avatar-Card: createThemeVar("gap-avatar-Card");
$horizontalAlignment-title-Card: createThemeVar("horizontalAlignment-title-Card");
$verticalalAlignment-title-Card: createThemeVar("verticalAlignment-title-Card");
@layer components {
.wrapper {
@include t.borderVars($themeVars, $component);
@include t.paddingVars($themeVars, $component);
box-shadow: $boxShadow-Card;
background-color: $backgroundColor-Card;
display: flex;
flex-direction: column;
gap: $gap-Card;
.avatarWrapper {
display: flex;
flex-direction: row;
align-items: $verticalalAlignment-title-Card;
gap: $gap-avatar-Card;
min-width: 0;
}
.titleWrapper {
display: flex;
flex-direction: column;
align-items: $horizontalAlignment-title-Card;
width: 100%;
gap: $gap-title-Card;
min-width: 0;
}
&.horizontal {
flex-direction: row;
align-items: center;
}
&.vertical {
flex-direction: column;
}
&.isClickable {
cursor: pointer;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export{
themeVars: t.json-stringify($themeVars)
}
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/MacOSAppFrame.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./MacOSAppFrame.module.scss";
import type { ReactNode } from "react";
import { forwardRef } from "react";
export const MacOSAppFrame = forwardRef(({ children }: { children: ReactNode }, ref)=> {
return (
<section role="application" className={styles.app} tabIndex={-1} ref={ref as any}>
<div className={styles.appButtons}>
<div className={styles.appButtonsInner}>
<button className={`${styles.close} ${styles.button}`}>
<svg width="7" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
stroke="#000"
strokeWidth="1.2"
strokeLinecap="round"
d="M1.182 5.99L5.99 1.182m0 4.95L1.182 1.323"
></path>
</svg>
</button>
<button className={`${styles.minimize} ${styles.button}`}>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="6" height="1">
<path stroke="#000" strokeLinecap="round" d="M.61.703h5.8" strokeWidth="2"></path>
</svg>
</button>
<button className={`${styles.stretch} ${styles.button}`}>
<svg
viewBox="0 0 13 13"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
>
<path d="M4.871 3.553L9.37 8.098V3.553H4.871zm3.134 5.769L3.506 4.777v4.545h4.499z"></path>
<circle fill="none" cx="6.438" cy="6.438" r="6.438"></circle>
</svg>
</button>
</div>
</div>
<section className={styles.container}>
<header className={styles.titleBar}>
<span className="s-85680v">XMLUI</span>
</header>
<section className={styles.mainArea}>{children}</section>
</section>
</section>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/Compilation.ts:
--------------------------------------------------------------------------------
```typescript
import type { ComponentDef, CompoundComponentDef } from "../ComponentDefs";
import type { ThemeDefinition } from "../ThemingDefs";
import type { Expression, Statement } from "../../components-core/script-runner/ScriptingSourceTree";
/** Contains the compilation result of a project */
export type ProjectCompilation = {
/** The compiled Main.xmlui file (with its optional code behind) */
entrypoint: EntrypointCompilation;
/** The compiled component files (with their optional code behind) */
components: ComponentCompilation[];
/** The compiled theme files */
themes: Record<string, ThemeDefinition>;
};
/** The compilation result of a single file */
export type FileCompilation = EntrypointCompilation | ComponentCompilation;
type CompilationUnit = {
/** The file name */
filename: string;
/** Optional markup source (used in dev mode) */
markupSource?: string;
/** Optional code behind source (used in dev mode) */
codeBehindSource?: string;
/** Other (non-core) component names this component depends on */
dependencies: Set<string>;
};
export type ComponentCompilation = CompilationUnit & {
/** The compiled markup of the component file */
definition: CompoundComponentDef;
};
export type EntrypointCompilation = CompilationUnit & {
/** The compiled markup of the main file */
definition: ComponentDef;
};
export type ParsedEventValue = {
__PARSED: true;
parseId: number;
statements: Statement[];
source?: string;
}
// --- The parsed property value (if defined by an attribute value)
export type ParsedPropertyValue = {
// --- We recognize this as a parsed property value
__PARSED: true;
// --- ID used for caching the parsed property value
parseId: number;
// --- The property segments
segments?: PropertySegment[];
};
// --- The compliation result of a single property
export type PropertySegment = {
literal?: string;
expr?: Expression;
deps?: string[];
};
```
--------------------------------------------------------------------------------
/docs/content/components/ProgressBar.md:
--------------------------------------------------------------------------------
```markdown
# ProgressBar [#progressbar]
`ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).
**Key features:**
- **Percentage visualization**: Displays progress as a filled portion of a horizontal bar
- **Flexible value handling**: Accepts values from 0 to 1, with automatic bounds handling for out-of-range values
- **Extensive theming**: Customizable background color, indicator color, thickness, and border radius
- **Responsive design**: Adapts to container width while maintaining consistent height
## Properties [#properties]
### `value` (default: 0) [#value-default-0]
This property defines the progress value with a number between 0 and 1.
The following example demonstrates using it:
```xmlui-pg copy {2-6} display name="Example: value" height="200px"
<App>
<ProgressBar />
<ProgressBar value="0.2"/>
<ProgressBar value="0.6"/>
<ProgressBar value="1"/>
<ProgressBar value="1.2"/>
</App>
```
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-ProgressBar | $color-surface-200 | $color-surface-200 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-indicator-ProgressBar | 0px | 0px |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-ProgressBar | $borderRadius | $borderRadius |
| [color](../styles-and-themes/common-units/#color)-indicator-ProgressBar | $color-primary-500 | $color-primary-500 |
| [thickness](../styles-and-themes/common-units/#size)-ProgressBar | $space-2 | $space-2 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/utils/ChartProvider.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import { useState } from "react";
import { createContext, useContext } from "react";
type ChartContextType = {
dataKey: string;
dataKeys: string[];
nameKey: string;
labelList: any;
setLabelList: any;
legend: any;
setLegend: any;
};
const ChartContext = createContext<ChartContextType | undefined>({
dataKey: "",
nameKey: "",
dataKeys: [],
labelList: null,
setLabelList: () => {},
legend: null,
setLegend: () => {},
});
export function useChartContextValue({
dataKey = "",
dataKeys = [],
nameKey = "",
}: {
dataKey?: string;
dataKeys?: string[];
nameKey: string;
}) {
const [dKey] = useState(dataKey);
const [dKeys] = useState(dataKeys);
const [nKey] = useState(nameKey);
const [labelList, setLabelList] = useState(null);
const [legend, setLegend] = useState(null);
return {
dataKey: dKey,
nameKey: nKey,
dataKeys: dKeys,
labelList,
setLabelList,
legend,
setLegend,
};
}
export function useChart() {
const context = useContext(ChartContext);
if (context === undefined) {
throw new Error("useChart must be used within a ChartProvider");
}
return context;
}
export function useLabelList() {
const context = useContext(ChartContext);
if (context === undefined) {
throw new Error("LabelList must be used within a chart");
}
const { setLabelList } = context;
return {
setLabelList,
};
}
export function useLegend() {
const context = useContext(ChartContext);
if (context === undefined) {
throw new Error("Legend must be used within a chart");
}
const { setLegend } = context;
return {
setLegend,
};
}
type ChartProviderProps = {
value: ChartContextType;
children: ReactNode;
};
function ChartProvider({ value, children }: ChartProviderProps) {
return <ChartContext.Provider value={value}>{children}</ChartContext.Provider>;
}
export default ChartProvider;
```
--------------------------------------------------------------------------------
/xmlui/src/components/TreeDisplay/TreeDisplay.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "TreeDisplay";
$fontSize-TreeDisplay: createThemeVar("fontSize-#{$component}");
$themeVars: t.composeBorderVars($themeVars, $component);
@layer components {
.treeDisplay {
display: block;
@include t.borderVars($themeVars, $component);
background-color: createThemeVar("backgroundColor-#{$component}");
padding: createThemeVar("padding-#{$component}");
padding-left: createThemeVar("paddingLeft-#{$component}");
}
.content {
display: block;
word-break: break-word;
font-family: createThemeVar("fontFamily-#{$component}");
font-size: $fontSize-TreeDisplay;
color: createThemeVar("color-#{$component}");
}
.treeNode {
position: relative;
padding: 0;
margin: 0;
}
.treeNodeRow {
display: flex;
align-items: center;
position: relative;
margin: 0;
}
.connectorArea {
position: relative;
flex-shrink: 0;
}
.connector {
position: absolute;
top: 0;
left: 0;
}
.connectorLine {
stroke: createThemeVar("color-connect-#{$component}");
fill: none;
}
.ancestorLine {
position: absolute;
top: 0;
width: 1.5px;
height: 100%;
background-color: createThemeVar("color-connect-#{$component}");
z-index: 1;
pointer-events: none;
}
.treeNodeContent {
padding: 0 4px;
display: inline-block;
position: relative;
z-index: 2;
}
.childrenContainer {
position: relative;
margin: 0;
padding: 0;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Bookmark/BookmarkNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from "react";
import { TableOfContentsContext } from "../../components-core/TableOfContentsContext";
import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
import styles from "./Bookmark.module.scss";
type Props = {
uid?: string;
level?: number;
title?: string;
omitFromToc?: boolean;
children: ReactNode;
registerComponentApi?: RegisterComponentApiFn;
};
export const defaultProps: Pick<Props, "level" | "omitFromToc"> = {
level: 1,
omitFromToc: false,
};
export const Bookmark = ({
uid,
level = defaultProps.level,
children,
title,
omitFromToc = defaultProps.omitFromToc,
registerComponentApi,
...rest
}: Props) => {
const elementRef = useRef<HTMLAnchorElement>(null);
const tableOfContentsContext = useContext(TableOfContentsContext);
const registerHeading = tableOfContentsContext?.registerHeading;
const observeIntersection = tableOfContentsContext?.hasTableOfContents;
const scrollIntoView = useCallback((options?: ScrollIntoViewOptions) => {
if (elementRef.current) {
elementRef.current.scrollIntoView({
behavior: "smooth",
block: "start",
...options,
});
}
}, []);
useEffect(() => {
registerComponentApi?.({
scrollIntoView,
});
}, [registerComponentApi, scrollIntoView]);
useLayoutEffect(() => {
if (observeIntersection && elementRef.current && uid && !omitFromToc) {
return registerHeading?.({
id: uid,
level,
text: title || elementRef.current?.textContent?.trim()?.replace(/#$/, "") || uid,
anchor: elementRef.current,
});
}
}, [uid, observeIntersection, registerHeading, level, title, omitFromToc]);
return (
<span {...rest} ref={elementRef} id={uid} data-anchor={true} className={styles.anchorRef}>
{children}
</span>
);
};
```
--------------------------------------------------------------------------------
/.github/workflows/run-smoke-tests.yml:
--------------------------------------------------------------------------------
```yaml
name: Smoke Tests (e2e smoke tests, unit tests)
concurrency: # Concurrency ensures that only a single job or workflow using the same concurrency group will run at a time.
group: component-e2e-testing-smoke
cancel-in-progress: true
on:
workflow_dispatch:
push:
branches: [main]
jobs:
test:
if: |
github.event_name == 'workflow_dispatch' ||
(
github.event_name == 'push' &&
!contains(github.event.head_commit.message, 'Version Packages for Stable Release') &&
!contains(github.event.head_commit.message, 'chore: version packages for stable release')
)
timeout-minutes: 60
runs-on: ubuntu-latest-8-core
env:
NODE_OPTIONS: "--max-old-space-size=8192"
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: "npm"
- name: Install node dependencies
run: npm ci --prefer-offline
- name: Cache for Turbo
uses: rharkor/[email protected]
- name: Store Playwright's Version
run: |
PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | sort | head -n 1)
echo "Playwright's Version: $PLAYWRIGHT_VERSION"
echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
- name: Cache Playwright Browsers for Playwright's Version
id: cache-playwright-browsers
uses: actions/cache@v4
with:
path: ~/.cache/ms-playwright
key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
- name: Install Playwright Browsers
if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
run: npx playwright install --with-deps
- name: run some tests
run: npm run test-xmlui-smoke
- uses: actions/upload-artifact@v4
with:
name: playwright-report
path: xmlui/playwright-report/
retention-days: 30
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/HelloWorld.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./HelloWorld.module.scss";
import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
import { HelloWorld, defaultProps } from "./HelloWorldNative";
const HelloWorldMd = createMetadata({
description:
"`HelloWorld` is a demonstration component that shows basic XMLUI patterns.",
status: "experimental",
props: {
message: {
description: "The greeting message to display.",
isRequired: false,
type: "string",
defaultValue: defaultProps.message,
},
},
events: {
onClick: {
description:
"Triggered when the click button is pressed. " + "Receives the current click count.",
type: "function",
},
onReset: {
description:
"Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
type: "function",
},
},
apis: {
value: {
description: "The current click count value.",
type: "number",
},
setValue: {
description: "Set the click count to a specific value.",
type: "function",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-HelloWorld`]: "$color-surface-50",
[`textColor-HelloWorld`]: "$color-content-primary",
dark: {
[`backgroundColor-HelloWorld`]: "$color-surface-800",
// No textColor override needed - $color-content-primary should auto-adapt
},
},
});
export const helloWorldComponentRenderer = createComponentRenderer(
"HelloWorld",
HelloWorldMd,
({ node, extractValue, lookupEventHandler, className, registerComponentApi }) => {
return (
<HelloWorld
id={extractValue.asOptionalString(node.props?.id)}
message={extractValue.asOptionalString(node.props?.message)}
onClick={lookupEventHandler("onClick")}
onReset={lookupEventHandler("onReset")}
className={className}
registerComponentApi={registerComponentApi}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Accordion/AccordionItem.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, dComponent } from "../../components/metadata-helpers";
import { MemoizedItem } from "../../components/container-helpers";
import {
AccordionItemComponent,
defaultProps,
} from "../../components/Accordion/AccordionItemNative";
const COMP = "AccordionItem";
export const AccordionItemMd = createMetadata({
status: "in progress",
description:
`\`${COMP}\` is a non-visual component describing a tab. Tabs component may use nested ` +
`${COMP} instances from which the user can select.`,
props: {
header: {
description: "This property declares the text used in the component's header. If not provided, the header will be empty.",
valueType: "string"
},
headerTemplate: dComponent(
"This property describes the template to use as the component's header.",
),
initiallyExpanded: {
description: `This property indicates if the ${COMP} is expanded (\`true\`) or collapsed (\`false\`).`,
valueType: "boolean",
defaultValue: defaultProps.initiallyExpanded
},
},
});
export const accordionItemComponentRenderer = createComponentRenderer(
COMP,
AccordionItemMd,
(rendererContext) => {
const { node, renderChild, extractValue, className } = rendererContext;
return (
<AccordionItemComponent
className={className}
id={extractValue(node.uid)}
header={extractValue(node.props.header)}
initiallyExpanded={extractValue.asOptionalBoolean(node.props.initiallyExpanded)}
headerRenderer={
node.props.headerTemplate
? (item) => (
<MemoizedItem
node={node.props.headerTemplate ?? ({ type: "Fragment" } as any)}
item={item}
renderChild={renderChild}
/>
)
: undefined
}
content={renderChild(node.children)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/HelloWorldNative.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { useState, useEffect } from "react";
import styles from "./HelloWorld.module.scss";
import type { RegisterComponentApiFn } from "xmlui";
type Props = {
id?: string;
message?: string;
className?: string;
onClick?: (event: React.MouseEvent) => void;
onReset?: (event: React.MouseEvent) => void;
registerComponentApi?: RegisterComponentApiFn;
};
export const defaultProps = {
message: "Hello, World!",
};
export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
function HelloWorld(
{
id,
message = defaultProps.message,
className,
onClick,
onReset,
registerComponentApi
},
ref
) {
const [clickCount, setClickCount] = useState(0);
// Create setValue method for external API access
const setValue = (newCount: number) => {
setClickCount(newCount);
};
// Register component API
useEffect(() => {
registerComponentApi?.({
setValue,
value: clickCount,
});
}, [registerComponentApi, setValue, clickCount]);
const handleClick = (event: React.MouseEvent) => {
const newCount = clickCount + 1;
setClickCount(newCount);
onClick?.(event);
};
const handleReset = (event: React.MouseEvent) => {
setClickCount(0);
onReset?.(event);
};
return (
<div className={`${styles.container} ${className || ''}`} id={id} ref={ref}>
<h2 className={styles.message}>{message}</h2>
<button
className={styles.button}
onClick={handleClick}
>
Click me!
</button>
<div className={styles.counter}>
Clicks: <span className={styles.count}>{clickCount}</span>
</div>
{clickCount > 0 && (
<button
className={styles.button}
onClick={handleReset}
>
Reset
</button>
)}
</div>
);
}
);
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/filter-and-transform-data-from-an-api.md:
--------------------------------------------------------------------------------
```markdown
# Filter and transform data from an API
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api display
{
"apiUrl": "/api",
"initialize": "$state.people = [
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]",
"operations": {
"get-people": {
"url": "/people",
"method": "get",
"handler": "return { status: 'ok', data: { items: $state.people } }"
}
}
}
---comp display
<Component name="Test">
<!--
{
items:
[
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]
}
-->
<!-- Use resultSelector to select the items array -->
<DataSource
id="allPeople"
url="/api/people"
resultSelector="data.items"
/>
<!-- Use resultSelector to filter the items array -->
<DataSource
id="activePeople"
url="/api/people"
resultSelector="data.items.filter(p => p.active)"
/>
<!-- Use transformResult -->
<script>
function transformPeople (data) {
console.log(data);
const items = data.data.items;
const itemMap = {
A: 'Austin',
B: 'Boston'
};
return items.map(item => ({
...item,
city: itemMap[item.group]
}));
};
</script>
<DataSource
id="transformedPeople"
url="/api/people"
transformResult="{transformPeople}"
/>
<Text>All people:</Text>
<List data="{allPeople}">
<Text>{$item.name} ({$item.group})</Text>
</List>
<Text>Active people:</Text>
<List data="{activePeople}">
<Text>{$item.name} ({$item.group})</Text>
</List>
<Text>Transformed people:</Text>
<List data="{transformedPeople}">
<Text>{$item.name} ({$item.city})</Text>
</List>
</Component>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components/Image/Image.md:
--------------------------------------------------------------------------------
```markdown
%-PROP-START alt
This is useful in two cases:
1. Accessibility: screen readers read the prop value to users so they know what the image is about.
2. The text is also displayed when the image can't be loaded for some reason (network errors, content blocking, etc.).
```xmlui-pg copy display name="Example: alt"
<App>
<Image
src="cantFindIt.jpg"
alt="This image depicts a wonderful scene not for human eyes" />
</App>
```
%-PROP-END
%-PROP-START fit
| Name | Value |
| --------- | ----- |
| `contain` | The replaced content is scaled to maintain its aspect ratio while fitting within the image's container. The entire image is made to fill the container. |
| `cover` | The image is sized to maintain its aspect ratio while filling the element's entire content box. If the image's aspect ratio does not match the aspect ratio of its container, then the image will be clipped to fit. |
```xmlui-pg copy display name="Example: fit" {5,9}
<App>
<HStack padding="1rem" height="280px" gap="1rem">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="contain"
width="240px" />
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover"
width="240px" />
</HStack>
</App>
```
%-PROP-END
%-PROP-START lazyLoad
Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it).
The default value is eager (\`false\`).
%-PROP-END
%-PROP-START aspectRatio
```xmlui-pg copy display name="Example: aspectRatio"
<App>
<Image
src="/resources/images/components/image/breakfast.jpg"
aspectRatio="200 / 150" />
</App>
```
%-PROP-END
%-EVENT-START click
This event is triggered when the image is clicked.
```xmlui-pg copy {6} display name="Example: click"
<App>
<Stack height="280px" width="400px">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover"
onClick="toast('Image clicked')"
/>
</Stack>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/process-event.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it, assert } from "vitest";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";
import { ArrowExpressionStatement, T_ARROW_EXPRESSION, T_ARROW_EXPRESSION_STATEMENT, T_EXPRESSION_STATEMENT } from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Process statements (exp)", () => {
it("Event with arrow function", async () => {
// --- Arrange
const source = "(x, y) => 2 * x + y";
const evalContext = createEvalContext({
localContext: {},
eventArgs: [123, 1]
});
const statements = parseStatements(source);
if (
statements?.length !== 1 ||
statements[0].type !== T_EXPRESSION_STATEMENT ||
statements[0].expr.type !== T_ARROW_EXPRESSION
) {
assert.fail("Arrow expression expected");
}
// --- Act
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: statements[0].expr
} as ArrowExpressionStatement;
const diag = await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].returnValue).equal(247);
expect(diag.processedStatements).equal(1);
expect(diag.maxLoops).equal(0);
expect(diag.maxBlocks).equal(1);
expect(diag.maxQueueLength).equal(1);
expect(diag.clearToLabels).equal(0);
expect(diag.unshiftedItems).equal(0);
});
it("Event issue", async () => {
// --- Arrange
const source = "(() => {let z = 0; while(z < 3) {console.log(z); z++}})()";
const evalContext = createEvalContext({
localContext: {},
eventArgs: [123, 1]
});
const statements = parseStatements(source);
await processStatementQueueAsync(statements, evalContext);
// --- Assert
expect(evalContext.mainThread!.blocks![0].returnValue).equal(undefined);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/ContentSeparator/ContentSeparator.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ContentSeparator.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { orientationOptionMd } from "../abstractions";
import { ContentSeparator, defaultProps } from "./ContentSeparatorNative";
import { createMetadata } from "../metadata-helpers";
const COMP = "ContentSeparator";
export const ContentSeparatorMd = createMetadata({
status: "stable",
description:
"`ContentSeparator` creates visual dividers between content sections using " +
"horizontal or vertical lines. It's essential for improving readability by " +
"breaking up dense content, separating list items, or creating clear boundaries " +
"between different UI sections.",
props: {
size: {
description:
"This property defines the component's height (if the \`orientation\` is horizontal) " +
"or the width (if the \`orientation\` is vertical). " +
"If not defined, the component uses the entire available width or height.",
valueType: "any",
},
orientation: {
description: "Sets the main axis of the component",
availableValues: orientationOptionMd,
defaultValue: defaultProps.orientation,
valueType: "string",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "$color-surface-200",
[`size-${COMP}`]: "1px",
[`marginVertical-${COMP}`]: "0",
[`marginHorizontal-${COMP}`]: "0",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
export const contentSeparatorComponentRenderer = createComponentRenderer(
COMP,
ContentSeparatorMd,
({ node, className, extractValue }) => {
return (
<ContentSeparator
orientation={extractValue(node.props.orientation)}
size={extractValue.asSize(node.props.size)}
className={className}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/Tooltip.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);
}
@layer components {
.TooltipContent {
border-radius: 4px;
padding: 10px 15px;
font-family: sans-serif;
font-size: 15px;
line-height: 1;
background-color: #ffffff;
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
user-select: none;
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.TooltipContent[data-state='delayed-open'][data-side='top'] {
animation-name: slideDownAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='right'] {
animation-name: slideLeftAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
animation-name: slideUpAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='left'] {
animation-name: slideRightAndFade;
}
@keyframes slideUpAndFade {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRightAndFade {
from {
opacity: 0;
transform: translateX(-2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideDownAndFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideLeftAndFade {
from {
opacity: 0;
transform: translateX(2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/editor/Editor.tsx:
--------------------------------------------------------------------------------
```typescript
import { Editor as MonacoEditor, useMonaco } from "@monaco-editor/react";
import type { CSSProperties } from "react";
import { useEffect } from "react";
import {
xmluiThemeLight,
xmluiThemeDark,
xmluiGrammar,
xmluiScriptGrammar,
} from "xmlui/syntax/monaco";
export type EditorProps = {
readOnly?: boolean;
language?: string;
style?: CSSProperties;
value?: string;
saveViewState?: boolean;
onChange?: any;
onMount?: any;
activeThemeTone?: string;
};
export const Editor = ({
readOnly = true,
language = "xmlui",
value,
onChange = () => {},
onMount = () => {},
saveViewState = false,
activeThemeTone = "light",
}: EditorProps) => {
const monaco = useMonaco();
useEffect(() => {
if (monaco) {
//xmlui markup
monaco.languages.register({ id: xmluiGrammar.id });
monaco.languages.setMonarchTokensProvider(xmluiGrammar.id, xmluiGrammar.language);
monaco.languages.setLanguageConfiguration(xmluiGrammar.id, xmluiGrammar.config);
monaco.editor.defineTheme("xmlui-light", xmluiThemeLight);
monaco.editor.defineTheme("xmlui-dark", xmluiThemeDark);
if (language === "xmlui") {
monaco.editor.setTheme(activeThemeTone === "dark" ? "xmlui-dark" : "xmlui-light");
}
//xmluiscript
monaco.languages.register({ id: xmluiScriptGrammar.id });
monaco.languages.setMonarchTokensProvider(xmluiScriptGrammar.id, xmluiScriptGrammar.language);
monaco.languages.setLanguageConfiguration(xmluiScriptGrammar.id, xmluiScriptGrammar.config);
}
}, [monaco, language, activeThemeTone]);
return (
<MonacoEditor
saveViewState={saveViewState}
onChange={onChange}
onMount={onMount}
key={"devtools"}
options={{
readOnly: readOnly,
scrollBeyondLastLine: false,
minimap: { enabled: false },
overviewRulerLanes: 0,
hideCursorInOverviewRuler: true,
stickyScroll: { enabled: false },
}}
language={language}
value={value}
/>
);
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/ColorPicker/ColorPicker.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "ColorPicker";
@mixin variant($variantName) {
border-radius: createThemeVar("Input:borderRadius-#{$componentName}-#{$variantName}");
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}");
border-width: createThemeVar("Input:borderWidth-#{$componentName}-#{$variantName}");
border-style: createThemeVar("Input:borderStyle-#{$componentName}-#{$variantName}");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}");
&:hover {
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--hover");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--hover");
}
&:focus {
border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--focus");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--focus");
}
}
@layer components {
.colorInput {
width: 100%;
background-color: createThemeVar("Input:backgroundColor-#{$componentName}");
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 2px;
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
@include variant("default");
&.error {
@include variant("error");
}
&.warning {
@include variant("warning");
}
&.valid {
@include variant("success");
}
&:before,
&:after {
display: none;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/process-event.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it, assert } from "vitest";
import {
ArrowExpressionStatement,
T_ARROW_EXPRESSION,
T_ARROW_EXPRESSION_STATEMENT,
T_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";
describe("Process statements", () => {
it("Event with arrow function", async () => {
// --- Arrange
const source = "(x, y) => 2 * x + y";
const evalContext = createEvalContext({
localContext: {},
eventArgs: [123, 1],
});
const statements = parseStatements(source);
if (
statements?.length !== 1 ||
statements[0].type !== T_EXPRESSION_STATEMENT ||
statements[0].expr.type !== T_ARROW_EXPRESSION
) {
assert.fail("Arrow expression expected");
}
// --- Act
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: statements[0].expr,
} as ArrowExpressionStatement;
const diag = await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].returnValue).equal(247);
expect(diag.processedStatements).equal(1);
expect(diag.maxLoops).equal(0);
expect(diag.maxBlocks).equal(1);
expect(diag.maxQueueLength).equal(1);
expect(diag.clearToLabels).equal(0);
expect(diag.unshiftedItems).equal(0);
});
it("Event issue", async () => {
// --- Arrange
const source = "(() => {let z = 0; while(z < 3) {console.log(z); z++}})()";
const evalContext = createEvalContext({
localContext: {},
eventArgs: [123, 1],
});
const statements = parseStatements(source);
await processStatementQueueAsync(statements, evalContext);
// --- Assert
expect(evalContext.mainThread!.blocks![0].returnValue).equal(undefined);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/abstractions/treeAbstractions.ts:
--------------------------------------------------------------------------------
```typescript
export interface TreeNode {
id: string | number;
key: string | number;
path: any[];
displayName?: string;
children?: TreeNode[];
parentIds: (string | number)[];
selectable: boolean;
[x: string]: any;
}
export type TreeItem = {
id: string | number;
children?: Array<TreeItem>;
[x: string]: any;
};
export type UnPackedTreeData = {
treeData: Array<TreeNode>;
treeItemsById: Record<string | number, TreeNode>;
};
export interface FlatTreeNode extends TreeNode {
isExpanded: boolean;
depth: number;
hasChildren: boolean;
}
// New interfaces for Tree component refactoring
export interface TreeFieldConfig {
idField: string;
labelField: string;
iconField?: string;
iconExpandedField?: string;
iconCollapsedField?: string;
parentField?: string;
childrenField?: string;
selectableField?: string;
dynamicField?: string;
}
export interface TreeSelectionEvent {
previousNode: FlatTreeNode | null;
newNode: FlatTreeNode | null;
}
export type TreeDataFormat = 'flat' | 'hierarchy';
export type DefaultExpansion = 'none' | 'all' | 'first-level' | (string | number)[];
// Node loading states for dynamic node handling
export type NodeLoadingState = 'unloaded' | 'loading' | 'loaded';
// Extended FlatTreeNode with loading state information
export interface FlatTreeNodeWithState extends FlatTreeNode {
loadingState: NodeLoadingState;
}
export interface TreeNodeInfo {
id: string | number; // Source data ID
item: any; // Original source item
depth: number; // Nesting depth (0-based)
isExpanded: boolean; // Current expansion state
hasChildren: boolean;// Whether node has children
isSelected: boolean; // Whether node is selected
path: (string | number)[]; // Path from root (source IDs)
parentId?: string | number; // Parent node ID (if any)
childrenIds: (string | number)[]; // Direct children IDs
}
export interface TreeStats {
totalNodes: number;
maxDepth: number;
expandedNodes: number;
visibleNodes: number;
rootNodes: number;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/IFrame/IFrameNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import { type CSSProperties, forwardRef, memo, useEffect, useImperativeHandle, useRef } from "react";
import classnames from "classnames";
import styles from "./IFrame.module.scss";
import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
type Props = {
src?: string;
srcdoc?: string;
allow?: string;
name?: string;
referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
sandbox?: string;
style?: CSSProperties;
className?: string;
registerComponentApi?: RegisterComponentApiFn;
} & Pick<React.HTMLAttributes<HTMLIFrameElement>, "onLoad">;
export const IFrame = memo(forwardRef(function IFrame(
{
src,
srcdoc,
allow,
name,
referrerPolicy,
sandbox,
style,
className,
onLoad,
registerComponentApi,
...rest
}: Props,
ref: React.ForwardedRef<HTMLIFrameElement>,
) {
const iframeRef = useRef<HTMLIFrameElement>(null);
// Expose the iframe element to parent via ref
useImperativeHandle(ref, () => iframeRef.current!, []);
// Register component APIs
useEffect(() => {
registerComponentApi?.({
postMessage: (message: any, targetOrigin: string = "*") => {
const contentWindow = iframeRef.current?.contentWindow;
if (contentWindow) {
contentWindow.postMessage(message, targetOrigin);
}
},
getContentWindow: () => {
return iframeRef.current?.contentWindow || null;
},
getContentDocument: () => {
return iframeRef.current?.contentDocument || null;
},
});
}, [registerComponentApi]);
return (
<iframe
{...rest}
ref={iframeRef}
src={src}
srcDoc={srcdoc}
allow={allow}
name={name}
referrerPolicy={referrerPolicy}
sandbox={sandbox}
className={classnames(className, styles.iframe)}
style={style}
onLoad={onLoad}
/>
);
}));
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/event-handlers.ts:
--------------------------------------------------------------------------------
```typescript
import type { ComponentMetadata } from "../abstractions/ComponentDefs";
import type { LookupEventHandlerFn } from "../abstractions/RendererDefs";
import type { EventHandler} from "react";
import { useCallback } from "react";
import { EMPTY_OBJECT } from "./constants";
/**
* This hook sets up the mouse event handlers for the component
* @param lookupEvent Function to lookup the event handler
* @param shouldSkip Indicates if the event handlers should be skipped
* @returns
*/
export function useMouseEventHandlers(lookupEvent: LookupEventHandlerFn, shouldSkip: boolean) {
// *** Because we use nested React hooks, we cannot use an early return
// *** when shouldSkip is true.
const onClick = useEventHandler("click", lookupEvent, shouldSkip);
const onMouseLeave = useEventHandler("mouseLeave", lookupEvent, shouldSkip);
const onMouseEnter = useEventHandler("mouseEnter", lookupEvent, shouldSkip);
const onDoubleClick = useEventHandler("doubleClick", lookupEvent, shouldSkip);
if (shouldSkip) {
return EMPTY_OBJECT;
}
return Object.fromEntries(
Object.entries({
onClick,
onMouseLeave,
onMouseEnter,
onDoubleClick,
}).filter(([, value]) => value !== undefined)
);
// --- Creates a particular event handler
function useEventHandler<TMd extends ComponentMetadata>(
eventName: string,
lookupEvent: LookupEventHandlerFn<TMd>,
shouldSkip: boolean,
) {
// *** Because we use nested React hooks, we cannot use an early return
// *** when shouldSkip is true.
const onEvent = shouldSkip
? undefined
: lookupEvent(eventName as keyof NonNullable<TMd["events"]>);
const eventHandler: EventHandler<any> = useCallback(
(event) => {
// If the event handler is not defined, we do nothing
if (onEvent) {
if (typeof event.stopPropagation === "function") {
event?.stopPropagation();
}
onEvent(event);
}
},
[onEvent],
);
return !onEvent ? undefined : eventHandler;
}
}
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/state-var-scopes.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../src/testing/fixtures";
test("vars shadowing works", async ({ initTestBed, page }) => {
await initTestBed(`
<Stack var.x="x in outer stack" var.y="y in outer stack">
<Stack var.y="y in inner stack">
<Button testId="button" onClick="y = 123">change y in inner stack</Button>
<Text testId="y_in_inner_stack">{y}</Text>
</Stack>
<Text testId="y_in_outer_stack">{y}</Text>
</Stack>
`);
await page.getByTestId("button").click();
await expect(page.getByTestId("y_in_inner_stack")).toHaveText("123");
await expect(page.getByTestId("y_in_outer_stack")).toHaveText("y in outer stack");
});
test("inner input is available in the file (implicit containers because of vars)", async ({
initTestBed,
page,
}) => {
await initTestBed(`
<Fragment>
<Stack var.x="x in outer stack" var.y="y in outer stack">
<Stack var.y="y in inner stack">
<TextBox id="textbox"/>
</Stack>
</Stack>
<Text testId="textbox_value_outside">{textbox.value}</Text>
</Fragment>
`);
await page.getByTestId("textbox").getByRole("textbox").fill("textbox-value");
await expect(page.getByTestId("textbox_value_outside")).toHaveText("textbox-value");
});
test("inner datasource is available in the file (implicit containers because of vars)", async ({
initTestBed,
page,
}) => {
await initTestBed(
`
<Fragment>
<Stack var.x="x in outer stack" var.y="y in outer stack">
<Stack var.y="y in inner stack">
<DataSource url="/data1" id="explicitDataSource"/>
</Stack>
</Stack>
<Text testId="datasource_value_outside">{explicitDataSource.value}</Text>
</Fragment>
`,
{
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data1",
method: "get",
handler: `()=>{
return 'data1';
}`,
},
},
},
},
);
await expect(page.getByTestId("datasource_value_outside")).toHaveText("data1");
});
```
--------------------------------------------------------------------------------
/docs/public/pages/intro.md:
--------------------------------------------------------------------------------
```markdown
# Introduction
XMLUI is a framework for building user interfaces declaratively, with XML markup and flexible theming. XMLUI apps are:
- **Easy to create**. Build on the web platform with little or no knowledge of React or CSS.
- **Clean and modern**. Enjoy themes that look great out of the box and are easy to modify. Create experiences that meet expectations for modern web apps.
- **Connected**. Read and write APIs with little or no scripting.
- **Modular**. Use a comprehensive suite of [components](/components/_overview) that you can extend with — again! — little or no scripting.
- **Easy to deploy**. Just drop a handful of files onto a static webserver.
This paragraph is static text displayed by XMLUI's [Markdown](/components/Markdown) component.
This list is a live report on the status of London's tube stations.
```xmlui-pg name="London Tube Status"
<App>
<List data="https://api.tfl.gov.uk/line/mode/tube/status">
<Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
</List>
</App>
```
When you reload the page you'll see fresh data.
> [!INFO]
> You can use the  icon to open live elements, like the London Tube Status report, in a playground where you read and edit the XMLUI markup.
This is the XMLUI markup you'll see in the playground.
```xmlui
<List data="https://api.tfl.gov.uk/line/mode/tube/status">
<Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
</List>
```
The [List](/components/List) component fetches JSON from a <a href="https://api.tfl.gov.uk/line/mode/tube/status" target="_blank">REST endpoint</a>, iterates through the array of objects returned from the API, and updates the [context variable](context-variables) called `$item` for each object. The [Text](/components/Text) component uses JavaScript dot notation and array indexing to extract station names and statuses from each `$item`.
In this case the URL is static. In the next chapter you'll see how a data URL can vary to deliver changing data in response to UI interaction.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/StackNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { type CSSProperties, forwardRef, type ReactNode, type Ref } from "react";
import classnames from "classnames";
import styles from "./Stack.module.scss";
import { useContentAlignment } from "../../components-core/component-hooks";
import { useOnMount } from "../../components-core/utils/hooks";
export const DEFAULT_ORIENTATION = "vertical";
export const defaultProps = {
orientation: DEFAULT_ORIENTATION,
reverse: false,
hoverContainer: false,
visibleOnHover: false,
};
type Props = {
children: ReactNode;
orientation?: string;
uid?: string;
horizontalAlignment?: string;
verticalAlignment?: string;
style?: CSSProperties;
className?: string;
reverse?: boolean;
hoverContainer?: boolean;
visibleOnHover?: boolean;
onClick?: any;
onMount?: any;
};
// =====================================================================================================================
// Stack React component
export const Stack = forwardRef(function Stack(
{
uid,
children,
orientation = defaultProps.orientation,
horizontalAlignment,
verticalAlignment,
style,
reverse = defaultProps.reverse,
hoverContainer = defaultProps.hoverContainer,
visibleOnHover = defaultProps.visibleOnHover,
onClick,
onMount,
className,
...rest
}: Props,
ref: Ref<any>,
) {
useOnMount(onMount);
const { horizontal, vertical } = useContentAlignment(
orientation,
horizontalAlignment,
verticalAlignment,
);
return (
<div
{...rest}
onClick={onClick}
ref={ref}
style={style}
className={classnames(
className,
styles.base,
{
[styles.vertical]: orientation === "vertical",
[styles.horizontal]: orientation === "horizontal",
[styles.reverse]: reverse,
[styles.hoverContainer]: hoverContainer,
"display-on-hover": visibleOnHover,
[styles.handlesClick]: !!onClick,
},
horizontal ?? "",
vertical ?? "",
)}
>
{children}
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/themeVars.ts:
--------------------------------------------------------------------------------
```typescript
/**
* The sole purpose of this module is to provide an object with the available keys of theme SCSS variables and the
* prefix of the theme.
*/
import themeVars from "./themeVars.module.scss";
/**
* This function extracts CSS variables from the specified SCSS input. It uses a hack to convert the CSS input to JSON
* and then calls a JSON parser to create the desired object.
* @param scssStr The scss input
*/
export function parseScssVar(scssStr: any) {
if (!scssStr || typeof scssStr !== typeof "") {
return scssStr;
}
// Lists and maps are surrounded by single quotes, e.g. "'[ \"string in list\", 5, \"5px\" ]'"
// Remove them if they exist so they can be parsed correctly.
let jsValue = scssStr.replace(/(^['"])|(['"]$)/g, "");
try {
// JSON-formatted string from within SCSS file
return JSON.parse(jsValue);
} catch (errorParsingJsonGeneratedInUtilScssFile) {
try {
// Value was likely an SCSS literal string; attempt parsing it manually.
// Example: inspect($my-map) => '(num: 10, numWithUnits: 5px, str: hello, color: #fff, "keyAsStr": false, other: null)'
return JSON.parse(
scssStr
.replace("(", "{")
.replace(")", "}")
// JSON values: convert any collection of word characters followed by a comma or bracket to a string
.replace(/: ?([^,}]+)([,}])/g, ': "$1"$2')
// JSON keys: space/bracket/comma as first character, not already a string, anything not colon or
// space (rules out JSON values), ended by colon
.replace(/([\s{,])(?!")([^:\s]+)+:/g, '$1"$2":'),
);
} catch (errorParsingScssStringLiteral) {
return jsValue;
}
}
}
let keyPrefix = parseScssVar(themeVars.keyPrefix) || "";
let vars = parseScssVar(themeVars.themeVars);
/**
* Export the desired SCSS variables and prefix
*/
const theme = {
keyPrefix: keyPrefix,
themeVars: vars,
};
export function getVarKey(varName: string) {
if (keyPrefix) {
return `--${keyPrefix}-${varName}`;
}
return `--${varName}`;
}
export default theme;
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/providers/ToastProvider.tsx:
--------------------------------------------------------------------------------
```typescript
import { createContext, useState, type ReactNode } from "react";
import { noop } from "lodash-es";
import * as RadixToast from "@radix-ui/react-toast";
import styles from "./Toast.module.scss";
import { MdOutlineClose } from "react-icons/md";
import classnames from "classnames";
type ToastMessage = {
type: "success" | "warning" | "error" | "info";
title?: string;
description: string;
};
type ToastContextDefinition = {
toastMessage: ToastMessage | null;
showToast: (toastMessage: ToastMessage) => void;
};
export const ToastContext = createContext<ToastContextDefinition>({
toastMessage: null,
showToast: noop,
});
type ToastProviderProps = {
children: ReactNode;
};
export const ToastProvider = ({ children }: ToastProviderProps) => {
const [toastMessage, setToastMessage] = useState<ToastMessage | null>(null);
const [open, setOpen] = useState(false);
const showToast = (toastMessage: ToastMessage) => {
setToastMessage(toastMessage);
setOpen(true);
};
return (
<ToastContext.Provider value={{ toastMessage, showToast }}>
<RadixToast.Provider swipeDirection="right">
{children}
<RadixToast.Root
open={open}
onOpenChange={setOpen}
className={classnames(styles.ToastRoot, {
[styles.success]: toastMessage?.type === "success",
[styles.warning]: toastMessage?.type === "warning",
[styles.error]: toastMessage?.type === "error",
})}
>
<RadixToast.Close className={styles.ToastClose}>
<MdOutlineClose />
</RadixToast.Close>
{toastMessage?.title && (
<RadixToast.Title className={styles.ToastTitle}>{toastMessage?.title}</RadixToast.Title>
)}
<RadixToast.Description className={styles.ToastDescription} asChild>
<div>{toastMessage?.description}</div>
</RadixToast.Description>
</RadixToast.Root>
<RadixToast.Viewport className={styles.ToastViewport} />
</RadixToast.Provider>
</ToastContext.Provider>
);
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/ToneSwitch/ToneSwitch.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);
}
@layer components {
.iconSwitch {
display: flex;
align-items: center;
padding: 4px;
border-radius: 1rem;
border: 1px solid createThemeVar("borderColor-ToneSwitch");
transition: background-color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
min-height: 1rem;
width: calc(1rem * 3);
position: relative;
pointer-events: auto;
&:hover {
border-color: createThemeVar("borderColor-ToneSwitch--hover");
}
}
.iconThumb {
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: white;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
pointer-events: none;
}
.iconSwitch.light .iconThumb {
transform: translateX(0);
}
.iconSwitch.dark .iconThumb {
transform: translateX(calc(1rem + 4px));
}
// Alternative global override for the label class
:global(.toneSwitchContainer) {
width: fit-content !important;
:global(.label) {
width: fit-content !important;
}
}
.iconSwitch.light {
background-color: createThemeVar("backgroundColor-ToneSwitch-light");
color: createThemeVar("color-ToneSwitch-light");
}
.iconSwitch.dark {
background-color: createThemeVar("backgroundColor-ToneSwitch-dark");
color: createThemeVar("color-ToneSwitch-dark");
}
.icon {
font-size: 12px;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color, #666);
pointer-events: none;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Icon.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import styles from "./Icon.module.scss";
import { parseScssVar } from "../../components-core/theming/themeVars";
import Icon from "./IconNative";
import { createMetadata, d } from "../metadata-helpers";
const COMP = "Icon";
export const IconMd = createMetadata({
status: "stable",
description:
"`Icon` displays scalable vector icons from XMLUI's built-in icon registry " +
"using simple name references. Icons are commonly used in buttons, navigation " +
"elements, and status indicators.",
props: {
name: d(
"This string property specifies the name of the icon to display. All icons have " +
"unique, case-sensitive names identifying them. If the icon name is not set, the " +
"`fallback` value is used.",
),
size: {
description:
`This property defines the size of the \`${COMP}\`. Note that setting the \`height\` and/or ` +
`the \`width\` of the component will override this property. You can use az explicit size ` +
"value (e.g., 32px) or one of these predefined values: `xs`, `sm`, `md`, `lg`.",
availableValues: ["xs", "sm", "md", "lg"],
},
fallback: d(
"This optional property provides a way to handle situations when the icon with the provided " +
"[icon name](#name) name does not exist. If the icon cannot be found, no icon is displayed.",
),
},
events: {
click: d("This event is triggered when the icon is clicked."),
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`size-${COMP}`]: "1.2em",
},
});
export const iconComponentRenderer = createComponentRenderer(
COMP,
IconMd,
({ node, extractValue, className, lookupEventHandler }) => {
return (
<Icon
name={extractValue.asOptionalString(node.props.name)}
size={extractValue(node.props.size)}
className={className}
fallback={extractValue.asOptionalString(node.props.fallback)}
onClick={lookupEventHandler("click")}
/>
);
},
);
```
--------------------------------------------------------------------------------
/docs/content/components/Spinner.md:
--------------------------------------------------------------------------------
```markdown
# Spinner [#spinner]
`Spinner` is an animated indicator that represents an action in progress with no deterministic progress value.
While it is visible, the action is yet to be completed; on completion, the UI logic may opt to remove the component.
## Using the `Spinner` [#using-the-spinner]
```xmlui-pg copy display name="Example: using Spinner"
<App>
<Spinner />
</App>
```
>[!INFO]
> `Spinner` ignores the `width`, `minWidth`, `maxWidth`, `height`, `minHeight`, and `maxHeight` properties. If you want to change its size, use the `size-Spinner` theme variable (see details is the [Styling](#styling) section).
## Properties [#properties]
### `delay` (default: 400) [#delay-default-400]
The delay in milliseconds before the spinner is displayed.
Use the buttons to toggle between the two `Spinners`.
```xmlui-pg copy {8-9} display name="Example: delay"
<App>
<variable name="noDelay" value="{true}" />
<variable name="yesDelay" value="{false}" />
<HStack gap="$space-0_5">
<Button label="No delay" onClick="noDelay = true; yesDelay = false;" />
<Button label="1000 ms delay" onClick="noDelay = false; yesDelay = true;" />
</HStack>
<Spinner when="{noDelay}" delay="0" />
<Spinner when="{yesDelay}" delay="1000" />
</App>
```
### `fullScreen` (default: false) [#fullscreen-default-false]
If set to `true`, the component will be rendered in a full screen container.
```xmlui-pg copy display name="Example: fullScreen" height="200px"
<App>
<Spinner fullScreen="true" />
</App>
```
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [borderColor](../styles-and-themes/common-units/#color)-Spinner | $color-surface-400 | $color-surface-400 |
| [size](../styles-and-themes/common-units/#size)-Spinner | $space-10 | $space-10 |
| [thickness](../styles-and-themes/common-units/#size)-Spinner | $space-0_5 | $space-0_5 |
```