This is page 11 of 138. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── 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
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── containers.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── state-management.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ ├── 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/components-core/scripts-runner/process-function.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import {createEvalContext, parseStatements} from "./test-helpers";
import { processStatementQueue } from "../../../src/components-core/script-runner/process-statement-sync";
describe("Process functions (exp)", () => {
it("Function async #1", async () => {
// --- Arrange
const source = `
let x = myFunction(1,2);
function myFunction(...a) {
return a[0] + a[1];
}
`;
const evalContext = createEvalContext({
localContext: {}
});
const statements = parseStatements(source);
// --- Act
await processStatementQueueAsync(statements, evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].vars.x).equal(3);
});
it("Function async #2", async () => {
// --- Arrange
const source = `
let x = myFunction(1, 2, 3);
function myFunction(b, ...a) {
return b + a[0] + a[1];
}
`;
const evalContext = createEvalContext({
localContext: {}
});
const statements = parseStatements(source);
// --- Act
await processStatementQueueAsync(statements, evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].vars.x).equal(6);
});
it("Function sync #1", () => {
// --- Arrange
const source = `
let x = myFunction(1,2);
function myFunction(...a) {
return a[0] + a[1];
}
`;
const evalContext = createEvalContext({
localContext: {}
});
const statements = parseStatements(source);
// --- Act
processStatementQueue(statements, evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].vars.x).equal(3);
});
it("Function sync #2", () => {
// --- Arrange
const source = `
let x = myFunction(1, 2, 3);
function myFunction(b, ...a) {
return b + a[0] + a[1];
}
`;
const evalContext = createEvalContext({
localContext: {}
});
const statements = parseStatements(source);
// --- Act
processStatementQueue(statements, evalContext);
// --- Assert
const thread = evalContext.mainThread;
expect(thread!.blocks!.length).equal(1);
expect(thread!.blocks![0].vars.x).equal(6);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/FormItem.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);
}
// TODO: Add HelperText styles here, as HelperText React component is used only in FormItem
@layer components {
.container {
display: flex;
width: 100%;
flex-direction: column;
align-items: start;
gap: 0.5em;
&.top {
flex-direction: column;
align-items: start;
justify-content: center;
}
&.end {
flex-direction: row-reverse;
align-items: center;
justify-content: start;
gap: 0.5em;
}
&.bottom {
flex-direction: column-reverse;
align-items: start;
justify-content: center;
}
&.start {
flex-direction: row;
align-items: center;
justify-content: start;
gap: 0.5em;
}
&.shrinkToLabel {
width: fit-content;
}
.inputLabel {
display: flex;
color: createThemeVar("textColor-FormItemLabel");
font-family: createThemeVar("fontFamily-FormItemLabel");
font-size: createThemeVar("fontSize-FormItemLabel");
font-weight: createThemeVar("fontWeight-FormItemLabel");
font-style: createThemeVar("fontStyle-FormItemLabel");
text-transform: createThemeVar("textTransform-FormItemLabel");
user-select: none;
cursor: pointer;
word-break: normal;
white-space: nowrap;
&.disabled {
cursor: not-allowed;
color: t.$textColor--disabled;
}
&.labelBreak {
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
&.required {
color: createThemeVar("textColor-FormItemLabel-required");
font-size: createThemeVar("fontSize-FormItemLabel-required");
font-weight: createThemeVar("fontWeight-FormItemLabel-required");
font-style: createThemeVar("fontStyle-FormItemLabel-required");
text-transform: createThemeVar("textTransform-FormItemLabel-required");
}
.requiredMark {
margin-left: 0.2em;
color: createThemeVar("textColor-FormItemLabel-requiredMark");
}
}
}
.itemWithLabel {
display: flex;
justify-content: center;
align-items: center;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/DebugViewProvider.tsx:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContext, useState } from "react";
// --- Represents the options for the state view.
type StateViewOptions = {
showBoundary?: boolean;
blink?: boolean;
}
// --- Represents a state transition.
type StateTransition = {
action: string;
uid?: string;
prevState: any;
nextState: any;
}
// --- This type represents the shape of the debug configuration stored in the app's global properties.
interface DebugConfiguration {
displayStateView?: boolean;
stateViewOptions?: StateViewOptions;
collectStateTransitions?: boolean;
}
// --- Represents the context for the debug view.
export interface IDebugViewContext extends DebugConfiguration {
// --- Debug tools window
showDebugToolsWindow: boolean;
openDebugToolsWindow: () => void;
closeDebugToolsWindow: () => void;
// --- State view
setDisplayStateView: (display: boolean) => void;
// --- State transition collection
stateTransitions?: StateTransition[];
startCollectingStateTransitions: () => void;
stopCollectingStateTransitions: () => void;
}
export const DebugViewContext = createContext<IDebugViewContext | null>(null);
type Props = {
children: React.ReactNode;
debugConfig?: DebugConfiguration;
}
export function DebugViewProvider({ children, debugConfig }: Props) {
const [showDebugToolsWindow, setShowDebugToolsWindow] = useState(false);
const [displayStateView, setDisplayStateView] = useState(!!debugConfig?.displayStateView);
const [collectStateTransitions, setCollectStateTransitions] = useState(!!debugConfig?.collectStateTransitions);
const [stateTransitions, setStateTransitions] = useState<StateTransition[]>([]);
const openDebugToolsWindow = () => {
setShowDebugToolsWindow(true);
};
const closeDebugToolsWindow = () => {
setShowDebugToolsWindow(false);
};
const startCollectingStateTransitions = () => {
setCollectStateTransitions(true);
setStateTransitions([]);
};
const stopCollectingStateTransitions = () => {
setCollectStateTransitions(false);
};
const contextValue: IDebugViewContext = {
showDebugToolsWindow,
openDebugToolsWindow,
closeDebugToolsWindow,
displayStateView,
stateViewOptions: { showBoundary: true, blink: true },
setDisplayStateView,
collectStateTransitions,
stateTransitions,
startCollectingStateTransitions,
stopCollectingStateTransitions,
};
return (
<DebugViewContext.Provider value={contextValue}>
{children}
</DebugViewContext.Provider>
);
}
export function useDebugView() {
return useContext(DebugViewContext);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { type ErrorInfo, type ReactNode } from "react";
import styles from "./ErrorBoundary.module.scss";
import type { ComponentLike } from "../../abstractions/ComponentDefs";
// --- The properties of the ErrorBoundary component
interface Props {
// --- Child nodes within the boundary
children: ReactNode;
// --- Whenever the value of this property changes, the boundary restores its "no error" state.
node?: ComponentLike;
// --- The location of the error
location?: string;
}
// --- This type represents the current state of the error boundary
type State = {
hasError: boolean;
error: Error | null;
};
/**
* This React component serves as an error boundary; it catches any errors within
* the nested components
*/
export class ErrorBoundary extends React.Component<Props, State> {
// --- We start with "no error" state
state: State = {
hasError: false,
error: null,
};
/**
* This method implements the Error Boundaries for the React application.
* It is invoked if errors occur during the rendering phase of any lifecycle
* methods or children components.
*
* DO NOT DELETE this method! Though it is not referenced directly from the code,
* it is a required part of the React component lifecycle.
*/
static getDerivedStateFromError(error: Error): State {
// --- Update state so the next render will show the fallback UI.
return { hasError: true, error };
}
/**
* Display any error in the console
* @param error Error object
* @param errorInfo Extra information about the error
*/
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error("Uncaught error:", error, errorInfo, this.props.location);
}
/**
* Whenever the `restoreOnChangeOf` property of this component instance
* changes, we reset the state to "no error".
* @param prevProps Previous property values
* @param prevState Previous state
* @param snapshot Optional snapshot (not used in this component)
*/
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) {
if (prevProps.node !== this.props.node) {
this.setState({
hasError: false,
});
}
}
/**
* Display an error message if an error occurred during rendering.
*/
render() {
return this.state.hasError ? (
<div data-error-boundary className={styles.errorOverlay}>
<div className={styles.title}>There was an error!</div>
<div className={styles.errorItem}>{this.state.error?.message}</div>
</div>
) : (
this.props.children
);
}
}
```
--------------------------------------------------------------------------------
/docs/content/components/Icon.md:
--------------------------------------------------------------------------------
```markdown
# Icon [#icon]
`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.
**Key features:**
- **Name-based lookup**: Reference icons by name from the built-in registry (e.g., "home", "search", "trash")
- **Multiple sizes**: Choose from predefined sizes (xs, sm, md, lg) or set custom dimensions
- **Fallback support**: Specify backup icons when the primary icon name doesn't exist
- **Interactive**: Supports click events for creating icon buttons and clickable elements
## Properties [#properties]
### `fallback` [#fallback]
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.
```xmlui-pg copy display name="Example: fallback"
<App>
<Icon name="noicon" fallback="trash" />
</App>
```
### `name` [#name]
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.
The engine looks up the icon in its registry and determines which icon is associated with the name that the component will show.
Nothing is displayed if the icon name is not found in the registry.
```xmlui-pg copy display name="Example: name"
<App>
<HStack>
<Icon name="message" />
<Icon name="note" />
<Icon name="cog" />
<Icon name="start" />
<Icon name="some-non-existing-icon" />
<Icon name="some-non-existing-icon-with fallback" fallback="trash" />
</HStack>
</App>
```
### `size` [#size]
This property defines the size of the `Icon`. 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`.
Available values: `xs`, `sm`, `md`, `lg`
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Icon name="like" />
<Icon name="like" size="xs" />
<Icon name="like" size="sm" />
<Icon name="like" size="md" />
<Icon name="like" size="lg" />
</HStack>
</App>
```
## Events [#events]
### `click` [#click]
This event is triggered when the icon is clicked.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [size](../styles-and-themes/common-units/#size)-Icon | 1.2em | 1.2em |
```
--------------------------------------------------------------------------------
/xmlui/src/components/ColorPicker/ColorPicker.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { ColorPicker, defaultProps } from "./ColorPickerNative";
import {
createMetadata,
dAutoFocus,
dDidChange,
dEnabled,
dGotFocus,
dInitialValue,
dLostFocus,
dReadonly,
dRequired,
dValidationStatus,
} from "../metadata-helpers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import styles from "./ColorPicker.module.scss";
const COMP = "ColorPicker";
export const ColorPickerMd = createMetadata({
status: "stable",
description:
"`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
props: {
initialValue: dInitialValue(),
enabled: dEnabled(),
autoFocus: dAutoFocus(),
required: dRequired(),
readOnly: dReadonly(),
validationStatus: dValidationStatus(defaultProps.validationStatus),
},
events: {
didChange: dDidChange(COMP),
gotFocus: dGotFocus(COMP),
lostFocus: dLostFocus(COMP),
},
apis: {
focus: {
description: `Focus the ${COMP} component.`,
signature: "focus(): void",
},
value: {
description: `This method returns the current value of the ${COMP}.`,
signature: "get value(): string",
},
setValue: {
description: `This method sets the current value of the ${COMP}.`,
signature: "set value(value: string): void",
parameters: {
value: "The new value to set for the color picker.",
},
},
},
themeVars: parseScssVar(styles.themeVars),
});
export const colorPickerComponentRenderer = createComponentRenderer(
"ColorPicker",
ColorPickerMd,
({
node,
extractValue,
className,
state,
lookupEventHandler,
registerComponentApi,
updateState,
}) => {
const readOnly = extractValue.asOptionalBoolean(node.props?.readOnly, false);
const enabled = extractValue.asOptionalBoolean(node.props?.enabled, true);
return (
<ColorPicker
validationStatus={extractValue(node.props.validationStatus)}
value={state.value}
initialValue={extractValue(node.props.initialValue)}
updateState={updateState}
onDidChange={lookupEventHandler("didChange")}
onFocus={lookupEventHandler("gotFocus")}
onBlur={lookupEventHandler("lostFocus")}
registerComponentApi={registerComponentApi}
className={className}
required={extractValue.asOptionalBoolean(node.props?.required)}
enabled={enabled && !readOnly}
readOnly={readOnly}
autoFocus={extractValue.asOptionalBoolean(node.props?.autoFocus)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/docs/content/components/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Components Overview",
"APICall": "APICall",
"App": "App",
"AppHeader": "AppHeader",
"AppState": "AppState",
"AutoComplete": "AutoComplete",
"Avatar": "Avatar",
"Backdrop": "Backdrop",
"Badge": "Badge",
"BarChart": "BarChart",
"Bookmark": "Bookmark",
"Breakout": "Breakout",
"Button": "Button",
"CHStack": "CHStack",
"CVStack": "CVStack",
"Card": "Card",
"Carousel": "Carousel",
"ChangeListener": "ChangeListener",
"Checkbox": "Checkbox",
"ColorPicker": "ColorPicker",
"Column": "Column",
"ContentSeparator": "ContentSeparator",
"DataSource": "DataSource",
"DateInput": "DateInput",
"DatePicker": "DatePicker",
"DonutChart": "DonutChart",
"DropdownMenu": "DropdownMenu",
"EmojiSelector": "EmojiSelector",
"ExpandableItem": "ExpandableItem",
"FileInput": "FileInput",
"FileUploadDropZone": "FileUploadDropZone",
"FlowLayout": "FlowLayout",
"Footer": "Footer",
"Form": "Form",
"FormItem": "FormItem",
"FormSection": "FormSection",
"Fragment": "Fragment",
"H1": "H1",
"H2": "H2",
"H3": "H3",
"H4": "H4",
"H5": "H5",
"H6": "H6",
"HSplitter": "HSplitter",
"HStack": "HStack",
"Heading": "Heading",
"IFrame": "IFrame",
"Icon": "Icon",
"Image": "Image",
"Items": "Items",
"LabelList": "LabelList",
"Legend": "Legend",
"LineChart": "LineChart",
"Link": "Link",
"List": "List",
"Logo": "Logo",
"Markdown": "Markdown",
"MenuItem": "MenuItem",
"MenuSeparator": "MenuSeparator",
"ModalDialog": "ModalDialog",
"NavGroup": "NavGroup",
"NavLink": "NavLink",
"NavPanel": "NavPanel",
"NoResult": "NoResult",
"NumberBox": "NumberBox",
"Option": "Option",
"Page": "Page",
"PageMetaTitle": "PageMetaTitle",
"Pages": "Pages",
"Pagination": "Pagination",
"PasswordInput": "PasswordInput",
"PieChart": "PieChart",
"ProgressBar": "ProgressBar",
"Queue": "Queue",
"RadioGroup": "RadioGroup",
"RealTimeAdapter": "RealTimeAdapter",
"Redirect": "Redirect",
"Select": "Select",
"Slider": "Slider",
"Slot": "Slot",
"SpaceFiller": "SpaceFiller",
"Spinner": "Spinner",
"Splitter": "Splitter",
"Stack": "Stack",
"StickyBox": "StickyBox",
"SubMenuItem": "SubMenuItem",
"Switch": "Switch",
"TabItem": "TabItem",
"Table": "Table",
"TableOfContents": "TableOfContents",
"Tabs": "Tabs",
"Text": "Text",
"TextArea": "TextArea",
"TextBox": "TextBox",
"Theme": "Theme",
"TimeInput": "TimeInput",
"Timer": "Timer",
"ToneChangerButton": "ToneChangerButton",
"ToneSwitch": "ToneSwitch",
"Tooltip": "Tooltip",
"Tree": "Tree",
"VSplitter": "VSplitter",
"VStack": "VStack"
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ThemeSwitcher.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.button {
padding: .5rem 1rem;
}
.RadixMenuContent {
display: flex;
flex-direction: column;
min-width: 100px;
width: fit-content;
background-color: themes.$backgroundColor;
border-radius: 6px;
padding: 5px;
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.RadixMenuContent[data-side='top'] {
animation-name: slideDownAndFade;
}
.RadixMenuContent[data-side='right'] {
animation-name: slideLeftAndFade;
}
.RadixMenuContent[data-side='bottom'] {
animation-name: slideUpAndFade;
}
.RadixMenuContent[data-side='left'] {
animation-name: slideRightAndFade;
}
.dark {
--tw-bg-opacity: 1;
background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
}
.RadixMenuRadioGroup {
width: 100%;
}
.RadixMenuItem,
.RadixMenuRadioItem {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
line-height: 1;
border-radius: 3px;
display: flex;
align-items: center;
height: 25px;
padding: 0 5px;
padding-left: 1rem;
user-select: none;
outline: none;
}
.RadixMenuItem[data-disabled],
.RadixMenuRadioItem[data-disabled] {
pointer-events: none;
}
.RadixMenuItem[data-highlighted],
.RadixMenuRadioItem[data-highlighted] {
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
color: rgba(51, 65, 85, var(--tw-text-opacity));
}
:is(html[class~=dark] .RadixMenuRadioItem[data-highlighted], .RadixMenuItem[data-highlighted]) {
background-color: hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 94%/.05);
--tw-text-opacity: 1;
}
.RadixMenuLabel {
padding-left: 1rem;
font-weight: 600;
font-size: 12px;
line-height: 25px;
}
.RadixMenuSeparator {
height: 1px;
--tw-text-opacity: 1;
margin: 5px;
}
.RadixMenuItemIndicator {
width: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@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);
}
}
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-12.md:
--------------------------------------------------------------------------------
```markdown
# Settings
The `Settings` component demonstrates how to manage application state that persists between sessions using [AppState](/components/AppState), [DataSource](/components/DataSource), and [APICall](/components/APICall) working together.
## State management pattern
XMLUI Invoice uses a three-component pattern for persistent settings:
1. **AppState** - Holds current settings in memory for immediate UI updates
2. **DataSource** - Loads initial settings from the database on app startup
3. **APICall** - Saves settings changes back to the database when triggered
```xmlui /AppState/ /DataSource/ /APICall/
<Component name="Settings">
<DataSource url="/api/users" id="users" />
<AppState id="settings" bucket="settingsState" />
<APICall
id="updateSettings"
method="put"
url="/api/settings"
body="{settings.value}"
completedNotificationMessage="Settings saved successfully"
errorNotificationMessage="Failed to save settings"
/>
</Component>
```
## Loading settings on startup
In `Main.xmlui`, a `DataSource` loads settings from the database and populates the `AppState` when the app starts:
```xmlui /settingsLoader/ /settings.update/
<DataSource id="settingsLoader" url="/api/settings">
<event name="loaded">
settings.update({
avatar_border_radius: settingsLoader.value[0].avatar_border_radius
});
delay(500);
</event>
</DataSource>
```
The `loaded` event fires when the database fetch completes, then calls `settings.update()` to populate the AppState with the retrieved values.
## Reactive UI updates
Components throughout the app can bind directly to AppState values for immediate updates:
```xmlui /settings.value.avatar_border_radius/
<InvoiceAvatar
url="{loggedInUser.avatar_url}"
name="{loggedInUser.display_name}"
borderRadius="{settings.value.avatar_border_radius}"
/>
```
When settings change, any bound UI elements automatically re-render with the new values.
## User input and gated saves
The Settings form uses a [TextBox](/components/TextBox) that updates AppState immediately, but database saves are gated behind a [Button](/components/Button):
```xmlui /onDidChange/ /onClick/
<TextBox
value="{settings.value.avatar_border_radius}"
onDidChange="{(value) => {
if (value && settings.value) {
settings.update({
avatar_border_radius: value
});
}
}}"
/>
<Button onClick="{() => updateSettings.execute()}">
Save
</Button>
```
This pattern provides:
- **Immediate feedback** - UI updates as the user types
- **Controlled persistence** - Database only updates on explicit save
- **Error handling** - Save failures don't lose the user's input
```
--------------------------------------------------------------------------------
/xmlui/src/logo.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/Splitter.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
Most properties of the component focus on the primary section (e.g. sizing).
See also: [HSplitter](/components/HSplitter), [VSplitter](/components/VSplitter).
%-DESC-END
%-PROP-START floating
```xmlui-pg copy display name="Example: floating"
<App>
<Splitter height="200px" floating="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START initialPrimarySize
```xmlui-pg copy display name="Example: initialPrimarySize"
<App>
<Splitter height="200px" initialPrimarySize="40%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START maxPrimarySize
```xmlui-pg copy display name="Example: maxPrimarySize"
<App>
<Splitter height="200px" maxPrimarySize="80%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START minPrimarySize
```xmlui-pg copy display name="Example: minPrimarySize"
<App>
<Splitter height="200px" minPrimarySize="40px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START orientation
```xmlui-pg copy display name="Example: orientation"
<App>
<Splitter height="200px" orientation="horizontal">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START splitterTemplate
```xmlui-pg copy {2-4} display name="Example: splitterTemplate"
<App>
<Splitter height="200px">
<property name="splitterTemplate">
<ContentSeparator backgroundColor="green" height="4px" />
</property>
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-PROP-START swapped
```xmlui-pg copy display name="Example: swapped"
<App>
<Splitter height="200px" swapped="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-PROP-END
%-EVENT-START resize
```xmlui-pg copy {2} display name="Example: resize"
<App height="200px" var.counter="{0}">
<Splitter onResize="counter++">
<Stack backgroundColor="lightblue" height="100%">
<Text value="Resize event called {counter} number of times" />
</Stack>
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Queue/queueActions.ts:
--------------------------------------------------------------------------------
```typescript
export enum QueueActionKind {
ACTION_ITEM_STARTED = "ACTION_ITEM_STARTED",
ACTION_ITEM_PROGRESS = "ACTION_ITEM_PROGRESS",
ACTION_ITEM_COMPLETED = "ACTION_ITEM_COMPLETED",
CLEAR_COMPLETED_ACTION_ITEMS = "CLEAR_COMPLETED_ACTION_ITEMS",
ACTION_ITEM_ERROR = "ACTION_ITEM_ERROR",
ACTION_QUEUE_INITIALIZED = "ACTION_QUEUE_INITIALIZED",
ACTION_ITEM_REMOVED = "ACTION_ITEM_REMOVED",
}
export interface QueueAction {
type: QueueActionKind;
// Potential improvement: Try to specify the type with more details
payload:
| {
uid?: any;
data?: any;
error?: any;
value?: any;
}
| any;
}
// Signs that a particular component (`uid`) has started running an action with `actionItemId`.
export function actionItemStarted(actionItemId: string) {
return {
type: QueueActionKind.ACTION_ITEM_STARTED,
payload: {
actionItemId,
},
};
}
// Signs that a particular component (`uid`) reports progress information (`progressEvent`)
// on an action with `actionItemId`.
export function actionItemProgress(actionItemId: string, progressEvent: any) {
return {
type: QueueActionKind.ACTION_ITEM_PROGRESS,
payload: {
actionItemId,
progressEvent,
},
};
}
// Signs that a particular component (`uid`) has completed an action with `actionItemId` resulting in `result`.
export function actionItemCompleted(actionItemId: string, result: any) {
return {
type: QueueActionKind.ACTION_ITEM_COMPLETED,
payload: {
actionItemId,
result,
},
};
}
// Signs that a particular component (`uid`) has removed an action with `actionItemId` from the execution queue.
export function removeActionItem(actionItemId: string) {
return {
type: QueueActionKind.ACTION_ITEM_REMOVED,
payload: {
actionItemId,
},
};
}
// Signs that a particular component (`uid`) has cleared completed action items from its execution queue.
export function clearCompletedActionItems() {
return {
type: QueueActionKind.CLEAR_COMPLETED_ACTION_ITEMS,
payload: {},
};
}
// Signs that a particular component (`uid`) received an `error` when running an action with `actionItemId`.
export function actionItemError(actionItemId: string, error: any) {
return {
type: QueueActionKind.ACTION_ITEM_ERROR,
payload: {
actionItemId,
error,
},
};
}
// Signs that a particular component (`uid`) has initialized its execution `queue` with the specified `batchId`.
export function actionQueueInitialized(queue: Array<any>, batchId: string, actionItemIds: string[]) {
return {
type: QueueActionKind.ACTION_QUEUE_INITIALIZED,
payload: {
queue,
actionItemIds,
batchId,
},
};
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/ResponsiveBar/ResponsiveBar.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Automatic overflow management**: Automatically moves items that don't fit into a dropdown menu
- **Responsive design**: Adapts to container width changes in real-time
- **Zero configuration**: Works out of the box with sensible defaults
- **Customizable overflow icon**: Use custom icons for the overflow dropdown trigger
The component monitors its container width and automatically determines which child components fit within the available space. Components that don't fit are moved into a dropdown menu accessible via a "..." trigger button.
```xmlui-pg copy display name="Example: Basic ResponsiveBar" height="200px"
---app copy display
<App>
<ResponsiveBar>
<Button label="File" />
<Button label="Edit" />
<Button label="View" />
<Button label="Window" />
<Button label="Help" />
</ResponsiveBar>
</App>
---desc
Try resizing the container or browser window to see the responsive behavior:
```
%-DESC-END
%-PROP-START overflowIcon
You can customize the icon used for the overflow dropdown trigger:
```xmlui-pg copy display name="Example: Custom overflow icon" height="200px"
<App>
<ResponsiveBar overflowIcon="menu">
<Button label="Home" />
<Button label="Products" />
<Button label="Services" />
<Button label="About" />
<Button label="Contact" />
</ResponsiveBar>
</App>
```
%-PROP-END
%-EVENT-START click
```xmlui-pg copy display name="Example: Click event" height="200px"
<App>
<variable name="clickCount" value="{0}" />
<Text value="ResponsiveBar clicked {clickCount} times" />
<ResponsiveBar onClick="clickCount += 1">
<Button label="Item 1" />
<Button label="Item 2" />
<Button label="Item 3" />
</ResponsiveBar>
</App>
```
%-EVENT-END
## Advanced Usage
### With Different Content Types
ResponsiveBar works with any type of child components:
```xmlui-pg copy display name="Example: Mixed content" height="200px"
<App>
<ResponsiveBar>
<Button label="New" icon="plus" />
<Button label="Open" icon="folder" />
<Text>|</Text>
<Button label="Save" icon="save" />
<Button label="Print" icon="printer" />
<Text>|</Text>
<Button label="Settings" icon="cog" />
</ResponsiveBar>
</App>
```
### Navigation Menu Example
Perfect for responsive navigation menus:
```xmlui-pg copy display name="Example: Navigation menu" height="200px"
<App>
<ResponsiveBar>
<Button label="Dashboard" variant="ghost" />
<Button label="Analytics" variant="ghost" />
<Button label="Reports" variant="ghost" />
<Button label="Settings" variant="ghost" />
<Button label="Users" variant="ghost" />
<Button label="Profile" variant="ghost" />
</ResponsiveBar>
</App>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components/Select/SelectOption.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useEffect, useMemo, useRef } from "react";
import type { Option } from "../abstractions";
import { Item, ItemIndicator, ItemText } from "@radix-ui/react-select";
import { useSelect } from "./SelectContext";
import { useOption } from "./OptionContext";
import classnames from "classnames";
import styles from "./Select.module.scss";
import Icon from "../Icon/IconNative";
export const SelectOption = forwardRef<React.ElementRef<typeof Item>, Option>(
function SelectOption(option, ref) {
const visibleContentRef = useRef<HTMLDivElement>(null);
const { value, label, enabled = true, children, className } = option;
const { value: selectedValue, optionRenderer } = useSelect();
const { onOptionRemove, onOptionAdd } = useOption();
const opt: Option = useMemo(() => {
return {
...option,
label: label ?? "",
keywords: [label ?? ""],
};
}, [option, label]);
useEffect(() => {
onOptionAdd(opt);
return () => onOptionRemove(opt);
}, [opt, onOptionAdd, onOptionRemove]);
return (
<Item
ref={ref}
className={classnames(className, styles.selectOption)}
value={value}
textValue={label}
disabled={!enabled}
onClick={(event) => {
event.stopPropagation();
}}
data-state={selectedValue === value && "checked"}
>
{/* SelectItemText is used by SelectValue to display the selected value */}
<span style={{ display: "none" }}>
<ItemText>{label}</ItemText>
</span>
{/* Visible content in the dropdown */}
{children ? (
<>
<div className={styles.selectOptionContent} ref={visibleContentRef}>
{children}
</div>
{selectedValue === value && (
<ItemIndicator className={styles.selectOptionIndicator}>
<Icon name="checkmark" />
</ItemIndicator>
)}
</>
) : optionRenderer ? (
<div className={styles.selectOptionContent} ref={visibleContentRef}>
{optionRenderer(
{
label,
value,
enabled,
},
selectedValue as any,
false,
)}
</div>
) : (
<>
<div className={styles.selectOptionContent} ref={visibleContentRef}>
{label}
</div>
{selectedValue === value && (
<ItemIndicator className={styles.selectItemIndicator}>
<Icon name="checkmark" />
</ItemIndicator>
)}
</>
)}
</Item>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/bin/build-lib.ts:
--------------------------------------------------------------------------------
```typescript
#!/usr/bin/env node
import { build as viteBuild, defineConfig, loadEnv, type UserConfig } from "vite";
// @ts-ignore
import path from "path";
import react from "@vitejs/plugin-react";
import { libInjectCss } from "vite-plugin-lib-inject-css";
import { default as ViteXmlui } from "./vite-xmlui-plugin";
export const buildLib = async ({
watchMode,
mode = "production",
}: {
watchMode?: boolean;
mode?: string;
}) => {
const env = loadEnv(mode, process.cwd(), "");
const umdFileName = `${env.npm_package_name}.js`;
const esFileName = `${env.npm_package_name}.mjs`;
let overrides: UserConfig = {};
try {
const configOverrides = await import(process.cwd() + `/vite.config-overrides`);
overrides = configOverrides.default || {};
} catch (e) {
// console.error(e);
}
const config: UserConfig = {
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".xmlui", ".xmlui.xs", ".xs"],
},
esbuild: {
target: "es2020",
},
optimizeDeps: {
esbuildOptions: {
target: "es2020",
},
},
define: {
"process.env": {
NODE_ENV: env.NODE_ENV,
},
},
build: {
emptyOutDir: false,
outDir: "dist",
watch: watchMode ? {} : undefined,
sourcemap: watchMode ? "inline" : false,
lib:
mode === "metadata"
? {
entry: [path.resolve("meta", "componentsMetadata.ts")],
name: `${env.npm_package_name}-metadata`,
fileName: `${env.npm_package_name}-metadata`,
}
: {
entry: [path.resolve("src", "index.tsx")],
formats: watchMode ? ["es"] : ["umd", "es"],
name: env.npm_package_name,
fileName: (format) => (format === "es" ? esFileName : umdFileName),
},
rollupOptions: {
treeshake: mode === "metadata" ? "smallest" : undefined,
external: mode === "metadata" ? [] : ["react", "react-dom", "xmlui", "react/jsx-runtime"],
output: {
footer: (chunk) => {
if (chunk.name === "index" && chunk.fileName === umdFileName) {
return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}'].default || window['${env.npm_package_name}']);}`;
}
return "";
},
globals: {
react: "React",
"react-dom": "ReactDOM",
jsx: "react/jsx-runtime",
},
},
},
},
plugins:
mode === "metadata"
? [ViteXmlui({})]
: [react(), ViteXmlui({}), libInjectCss(), ...(overrides.plugins || [])],
};
await viteBuild(defineConfig(config));
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/ResponsiveBar/ResponsiveBar.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ResponsiveBar.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { createMetadata, dClick } from "../metadata-helpers";
import { defaultResponsiveBarProps, ResponsiveBar } from "./ResponsiveBarNative";
const COMP = "ResponsiveBar";
export const ResponsiveBarMd = createMetadata({
status: "stable",
description:
"`ResponsiveBar` is a layout container that automatically manages child " +
"component overflow by moving items that don't fit into a dropdown menu. It supports " +
"both horizontal and vertical orientations and provides a space-efficient way to display " +
"navigation items, toolbar buttons, or other components that need to adapt to varying " +
"container dimensions while maintaining full functionality.",
docFolder: COMP,
props: {
orientation: {
description:
"Layout direction of the responsive bar. In horizontal mode, items are arranged " +
"left-to-right and overflow is based on container width. In vertical mode, items are " +
"arranged top-to-bottom and overflow is based on container height.",
valueType: "string",
availableValues: ["horizontal", "vertical"],
defaultValue: defaultResponsiveBarProps.orientation,
},
overflowIcon: {
description:
"Icon to display in the dropdown trigger button when items overflow. " +
"You can use component-specific icons in the format \"iconName:ResponsiveBar\".",
valueType: "string",
defaultValue: defaultResponsiveBarProps.overflowIcon,
},
gap: {
description:
"Gap between child elements in pixels. Controls the spacing between items " +
"in the responsive bar layout.",
valueType: "number",
defaultValue: defaultResponsiveBarProps.gap,
},
},
events: {
click: dClick(COMP),
},
apis: {},
contextVars: {},
themeVars: parseScssVar(styles.themeVars),
limitThemeVarsToComponent: true,
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "transparent",
[`padding-${COMP}`]: "0",
[`margin-${COMP}`]: "0",
},
});
export const responsiveBarComponentRenderer = createComponentRenderer(
COMP,
ResponsiveBarMd,
({ node, extractValue, renderChild, className, lookupEventHandler }) => {
return (
<ResponsiveBar
orientation={extractValue(node.props?.orientation)}
overflowIcon={extractValue(node.props?.overflowIcon)}
gap={extractValue(node.props?.gap)}
onClick={lookupEventHandler("click")}
className={className}
>
{renderChild(node.children)}
</ResponsiveBar>
);
},
);
```
--------------------------------------------------------------------------------
/docs/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-docs
## 0.0.10
### Patch Changes
- eb6454f: refactor: change LineChart/BarChart property names
- Updated dependencies [f12a042]
- Updated dependencies [8731eb8]
- Updated dependencies [eb6454f]
- Updated dependencies [1210852]
- [email protected]
## 0.0.9
### Patch Changes
- 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
- Updated dependencies [8c76c8d]
- Updated dependencies [d56c3e5]
- Updated dependencies [e42d367]
- Updated dependencies [f539526]
- Updated dependencies [19ce234]
- Updated dependencies [455b6c0]
- Updated dependencies [e90dc73]
- Updated dependencies [819b563]
- Updated dependencies [b57dfa2]
- Updated dependencies [9dd0f97]
- Updated dependencies [19ce234]
- Updated dependencies [898346d]
- Updated dependencies [705dd04]
- [email protected]
## 0.0.8
### Patch Changes
- 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
- Updated dependencies [879c09d]
- Updated dependencies [3ad8514]
- Updated dependencies [0c69245]
- Updated dependencies [4ad31fc]
- Updated dependencies [c99f184]
- Updated dependencies [5032e4a]
- Updated dependencies [2394f36]
- [email protected]
## 0.0.7
### Patch Changes
- 6bc9ed1: feat: support aligning cells in a Table row vertically
- Updated dependencies [2e512bb]
- Updated dependencies [46d1d18]
- Updated dependencies [6bc9ed1]
- Updated dependencies [0b1f983]
- Updated dependencies [a2637f3]
- Updated dependencies [eb4d592]
- [email protected]
## 0.0.6
### Patch Changes
- 1451a94: feat: make input padding configurable via theme variables
- Updated dependencies [ff14e15]
- Updated dependencies [1451a94]
- [email protected]
## 0.0.5
### Patch Changes
- bc95844: improve: Select and AutoComplete components
- Updated dependencies [af17117]
- Updated dependencies [44da3d9]
- Updated dependencies [b7a6b9a]
- Updated dependencies [bc95844]
- Updated dependencies [52d94a2]
- Updated dependencies [6629ce5]
- Updated dependencies [0254471]
- Updated dependencies [3318cfb]
- [email protected]
## 0.0.4
### Patch Changes
- c876be8: Turn docs deploy to standard routing
- Updated dependencies [c876be8]
- [email protected]
## 0.0.3
### Patch Changes
- 69b4402: improve: docs - footer logo, FormItem - labelBreak
- Updated dependencies [de8d63c]
- Updated dependencies [bd6d1b4]
- Updated dependencies [db5a5f4]
- Updated dependencies [69b4402]
- [email protected]
## 0.0.2
### Patch Changes
- 3eab4a3: improve: design updates - devtools, playground, docs
- Updated dependencies [3eab4a3]
- Updated dependencies [411cd34]
- Updated dependencies [cdf96bb]
- Updated dependencies [121c55c]
- Updated dependencies [f1092fe]
- [email protected]
- [email protected]
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavPanel/NavPanel.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./NavPanel.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { createMetadata, dComponent } from "../metadata-helpers";
import { NavPanel, defaultProps, buildNavHierarchy } from "./NavPanelNative";
import { useMemo } from "react";
import classnames from "classnames";
const COMP = "NavPanel";
export const NavPanelMd = createMetadata({
status: "stable",
description:
"`NavPanel` defines the navigation structure within an App, serving as a container " +
"for NavLink and NavGroup components that create your application's primary " +
"navigation menu. Its appearance and behavior automatically adapt based on the " +
"App's layout configuration.",
props: {
logoTemplate: dComponent(
`This property defines the logo template to display in the navigation panel with the ` +
`\`vertical\` and \`vertical-sticky\` layout.`,
),
inDrawer: {
description: `This property determines if the navigation panel is displayed in a drawer.`,
valueType: "boolean",
defaultValue: defaultProps.inDrawer,
},
},
themeVars: parseScssVar(styles.themeVars),
limitThemeVarsToComponent: true,
defaultThemeVars: {
[`horizontalAlignment-logo-${COMP}`]: "center",
[`backgroundColor-${COMP}`]: "$backgroundColor",
[`backgroundColor-${COMP}-horizontal`]: "$backgroundColor-AppHeader",
[`border-${COMP}`]: "0px solid $borderColor",
[`paddingHorizontal-${COMP}`]: "0",
[`paddingVertical-logo-${COMP}`]: "$space-4",
[`paddingHorizontal-logo-${COMP}`]: "$space-4",
[`marginBottom-logo-${COMP}`]: "$space-4",
[`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
},
});
function NavPanelWithBuiltNavHierarchy({
node,
renderChild,
className,
layoutContext,
extractValue,
}) {
const navLinks = useMemo(() => {
return buildNavHierarchy(node.children, extractValue, undefined, []);
}, [extractValue, node.children]);
return (
<NavPanel
logoContent={renderChild(node.props.logoTemplate)}
className={classnames(layoutContext?.themeClassName, className)}
inDrawer={layoutContext?.inDrawer}
renderChild={renderChild}
navLinks={navLinks}
>
{renderChild(node.children)}
</NavPanel>
);
}
export const navPanelRenderer = createComponentRenderer(
COMP,
NavPanelMd,
({ node, renderChild, className, layoutContext, extractValue }) => {
return (
<NavPanelWithBuiltNavHierarchy
node={node}
renderChild={renderChild}
className={className}
layoutContext={layoutContext}
extractValue={extractValue}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/Sheet.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$maxWidth-Drawer: createThemeVar("maxWidth-Drawer");
//we do it with animations (instead of transitions) because: https://www.radix-ui.com/primitives/docs/guides/animation
$reveal-anim-duration: 300ms;
@keyframes slide-in-from-left {
from {
transform: translateX(-100%);
opacity: 0;
box-shadow: none;
}
to {
}
}
@keyframes slide-out-to-left {
from {
}
to {
transform: translateX(-100%);
opacity: 0;
box-shadow: none;
}
}
@keyframes blur-in {
from {
background-color: transparent;
backdrop-filter: blur(0);
}
to {
}
}
@keyframes blur-out {
from {
}
to {
backdrop-filter: blur(0);
background-color: transparent;
}
}
.overlay{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
backdrop-filter: blur(4px);
background-color: #{rgb}(from t.useVar(t.$backgroundColor-primary) r g b / 70%);
&[data-state='open']{
animation: blur-in $reveal-anim-duration;
}
&[data-state='closed']{
animation: blur-out $reveal-anim-duration;
}
}
.sheetContent{
position: absolute;
gap: 1rem;
background-color: t.$backgroundColor;
opacity: 1;
transform: translateX(0);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-color: transparent;
&[data-state='open']{
animation: slide-in-from-left $reveal-anim-duration;
}
&[data-state='closed']{
animation: slide-out-to-left $reveal-anim-duration;
}
&.top{
right: 0;
left: 0;
top: 0;
border-bottom-width: 1px;
}
&.bottom{
right: 0;
left: 0;
bottom: 0;
border-top-width: 1px;
}
&.left{
top: 0;
bottom: 0;
left: 0;
border-right-width: 1px;
width: 100%;
height: 100%;
max-width: $maxWidth-Drawer;
}
&.right{
top: 0;
bottom: 0;
right: 0;
border-left-width: 1px;
width: 100%;
height: 100%;
max-width: $maxWidth-Drawer;
}
}
.close{
color: inherit;
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: t.$borderRadius;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
opacity: 0.7;
padding: 0.25rem;
background-color: inherit;
border: 0;
cursor: pointer;
z-index: 2;
&:hover {
opacity: 1;
}
}
// --- We export the theme variables to add them to the component renderer
:export{
themeVars: t.json-stringify($themeVars)
}
```
--------------------------------------------------------------------------------
/docs/content/components/TabItem.md:
--------------------------------------------------------------------------------
```markdown
# TabItem [#tabitem]
`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections.
**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.
**Context variables available during execution:**
- `$header`: This context value represents the header context with props: id (optional), index, label, isActive.
## Properties [#properties]
### `headerTemplate` [#headertemplate]
This property allows the customization of the TabItem header.
```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.
### `label` [#label]
This property sets the label of the component. If not set, the component will not display a label.
## Events [#events]
### `activated` [#activated]
This event is triggered when the tab is 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>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/EngineError.ts:
--------------------------------------------------------------------------------
```typescript
/**
* The abstract base class of all UI engine errors
*/
export abstract class EngineError extends Error {
protected abstract readonly errorCategory: string;
protected constructor(message: string) {
super(message);
Object.setPrototypeOf(this, EngineError.prototype);
}
}
/**
* Extracts information from the error object received from the backend
*/
export class GenericBackendError extends EngineError {
readonly errorCategory = "GenericBackendError";
details: any;
statusCode: number | undefined;
constructor(public readonly info: any, errorCode: number | undefined) {
// `The backend raised an error. (reasonCode: ${info.reasonCode}, isBusiness: ${info.isBusiness}, message: ${info.message})`
let message = "";
if (info?.code) {
message += `[Error code: ${info.code}]\n`;
}
if (info?.details && typeof info.details === "string") {
message += `${info.details}`;
} else if(info?.message){
message += `${info.message}`;
}
super(message || info?.message || "Unknown error");
this.details = info;
this.statusCode = errorCode;
// --- Set the prototype explicitly.
Object.setPrototypeOf(this, GenericBackendError.prototype);
}
}
/**
* Custom exception indicating a parser error
*/
export class ScriptParseError extends EngineError {
readonly errorCategory = "ScriptParserError";
constructor(message: string, public readonly source?: string, public readonly position?: number) {
message = `Parser Error: ${message}`;
super(message);
Object.setPrototypeOf(this, ScriptParseError.prototype);
}
}
/**
* Custom exception signing parsing error
*/
export class StatementExecutionError extends EngineError {
readonly errorCategory = "StatementExecutionError";
constructor(message: string, public readonly source?: string) {
super(message);
Object.setPrototypeOf(this, StatementExecutionError.prototype);
}
}
/**
* Signs that we get an unexpected type instead of a component definition
*/
export class NotAComponentDefError extends EngineError {
readonly errorCategory = "NotAComponentError";
constructor() {
super("Must be a component definition, cannot use dynamic children here...");
Object.setPrototypeOf(this, NotAComponentDefError.prototype);
}
}
/**
* We throw this error when a throw statement is executed
*/
export class ThrowStatementError extends EngineError {
readonly errorCategory = "ThrowStatementError";
readonly message: string;
constructor(public readonly errorObject: any) {
const message = typeof errorObject === "string"
? errorObject : errorObject?.message || "Error without message";
super(message);
this.message = message;
Object.setPrototypeOf(this, ThrowStatementError.prototype);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/language-server/services/common/docs-generation.ts:
--------------------------------------------------------------------------------
```typescript
import type { ComponentMetadata, ComponentPropertyMetadata } from "../../../abstractions/ComponentDefs";
export function generateCompNameDescription(componentName: string, metadata: ComponentMetadata): string {
const sections: string[] = [];
// Add title and description
sections.push(`# ${componentName}`);
if (metadata.description) {
sections.push(metadata.description);
}
// Add status if not stable
if (metadata.status && metadata.status !== 'stable') {
sections.push(`**Status:** ${metadata.status}`);
}
// Add Properties section if there are props
if (metadata.props && Object.keys(metadata.props).length > 0) {
sections.push('\n## Properties');
Object.entries(metadata.props)
.filter(([_, prop]) => !(prop as any).isInternal)
.forEach(([propName, prop]) => {
sections.push(generateAttrDescription(propName, prop));
});
}
// Add Events section if there are events
if (metadata.events && Object.keys(metadata.events).length > 0) {
sections.push('\n## Events');
Object.entries(metadata.events)
.filter(([_, event]) => !(event as any).isInternal)
.forEach(([eventName, event]) => {
sections.push(`### \`${eventName}\`\n${(event as any).description}`);
});
}
// Add APIs section if there are APIs
if (metadata.apis && Object.keys(metadata.apis).length > 0) {
sections.push('\n## APIs');
Object.entries(metadata.apis)
.filter(([_, api]) => !(api as any).isInternal)
.forEach(([apiName, api]) => {
sections.push(`### \`${apiName}\`\n${(api as any).description}`);
});
}
// Add Context Variables section if there are any
if (metadata.contextVars && Object.keys(metadata.contextVars).length > 0) {
sections.push('\n## Context Variables');
Object.entries(metadata.contextVars)
.filter(([_, contextVar]) => !(contextVar as any).isInternal)
.forEach(([varName, contextVar]) => {
sections.push(`### \`${varName}\`\n${(contextVar as any).description}`);
});
}
return sections.join('\n\n');
}
export function generateAttrDescription(attrName: string, attrMd: ComponentPropertyMetadata) {
let propText = `\`${attrName}\``;
if (attrMd.isRequired) {
propText += " (required)";
}
propText += ": ";
if (attrMd.description) {
propText += attrMd.description;
}
if (attrMd.defaultValue !== undefined) {
propText += `\n\nDefault: \`${attrMd.defaultValue}\``;
}
if (attrMd.availableValues && attrMd.availableValues.length > 0) {
const values = attrMd.availableValues.map(v =>
typeof v === 'object' ?
`- \`${v.value}\`: ${v.description}` :
`- \`${v}\``
).join('\n');
propText += `\n\n**Allowed values**:\n${values}`;
}
return propText;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Card/Card.md:
--------------------------------------------------------------------------------
```markdown
%-desc-START
**Key features:**
- **Pre-styled elements**: Built-in support for `title`, `subtitle`, and `avatarUrl` properties
- **Flexible layout**: Choose `vertical` (default) or `horizontal` orientation
- **Visual grouping**: Automatic styling with background, borders, and spacing
- **Clickable areas**: Supports click events for interactive cards
## Using Card
`Card` is a container; it does not have any explicit properties.
You can nest the card's content into the `<Card>` tag:
```xmlui-pg copy display name="Example: using Card"
<App>
<Card maxWidth="200px">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
```
There are also prestyled properties one can make use of, detailed in the [Properties section](#properties).
Prestyled elements always appear above other children.
```xmlui-pg copy display name="Example: using Card with prestyled elements"
<App>
<Card
avatarUrl="https://i.pravatar.cc/100"
title="Example Title"
subtitle="Predefined subtitle"
maxWidth="300px">
<HStack verticalAlignment="center">
<Icon name="info"/>
This is a card
</HStack>
</Card>
</App>
```
%-DESC-END
%-PROP-START showAvatar
Note that in the demo below if the `avatarUrl` is specified, `showAvatar` is automatically set to true but can still be hidden.
```xmlui-pg copy display name="Example: showAvatar"
<App>
<Card maxWidth="300px" avatarUrl="https://i.pravatar.cc/100" />
<Card maxWidth="300px" showAvatar="true" title="Example Card" />
<Card maxWidth="300px" showAvatar="true" />
</App>
```
%-PROP-END
%-PROP-START subtitle
This prop sets the prestyled subtitle.
```xmlui-pg copy display name="Example: subtitle"
<App>
<Card maxWidth="300px" subtitle="Example Subtitle" />
</App>
```
%-PROP-END
%-PROP-START title
This prop sets the prestyled title.
```xmlui-pg copy display name="Example: title"
<App>
<Card maxWidth="300px" title="Example Title" />
</App>
```
%-PROP-END
%-PROP-START orientation
```xmlui-pg copy display name="Example: orientation"
<App>
<Card title="Example Title" subtitle="Example Subtitle" orientation="horizontal">
<SpaceFiller />
<Text>Text child #1</Text>
<Text>Text child #2</Text>
<Button label="Button Child" />
</Card>
</App>
```
%-PROP-END
%-EVENT-START click
This event is triggered when the `Card` is clicked.
```xmlui-pg copy display name="Example: click"
<App>
<Card maxWidth="300px" onClick="toast('Clicked!')">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/ExpandableItem/ExpandableItem.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: "ExpandableItem";
$themeVars: t.composeBorderVars($themeVars, $component);
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composePaddingVars($themeVars, "content-#{$component}");
$backgroundColor-ExpandableItem: createThemeVar("backgroundColor-#{$component}");
$color-ExpandableItem: createThemeVar("color-#{$component}");
$color-ExpandableItem--disabled: createThemeVar("color-#{$component}--disabled");
$fontFamily-ExpandableItem: createThemeVar("fontFamily-#{$component}");
$fontSize-ExpandableItem: createThemeVar("fontSize-#{$component}");
$fontWeight-ExpandableItem: createThemeVar("fontWeight-#{$component}");
$paddingVertical-ExpandableItem-summary: createThemeVar("paddingVertical-ExpandableItem-summary");
$paddingHorizontal-ExpandableItem-summary: createThemeVar("paddingHorizontal-ExpandableItem-summary");
$gap-ExpandableItem: createThemeVar("gap-ExpandableItem");
$transition-ExpandableItem: createThemeVar("transition-ExpandableItem");
@layer components {
.expandableItem {
width: fit-content;
@include t.borderVars($themeVars, $component);
@include t.paddingVars($themeVars, $component);
background-color: $backgroundColor-ExpandableItem;
color: $color-ExpandableItem;
font-family: $fontFamily-ExpandableItem;
font-size: $fontSize-ExpandableItem;
font-weight: $fontWeight-ExpandableItem;
transition: $transition-ExpandableItem;
&.disabled {
color: $color-ExpandableItem--disabled;
cursor: not-allowed;
}
.summary {
display: inline-flex;
align-items: center;
gap: $gap-ExpandableItem;
cursor: pointer;
&.iconStart {
flex-direction: row;
}
&.iconEnd {
flex-direction: row-reverse;
justify-content: space-between;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
}
.switch {
display: flex;
align-items: center;
}
.summaryContent {
flex: 1;
}
}
&.withSwitch {
.summary {
cursor: pointer;
}
}
.content {
width: 100%;
@include t.paddingVars($themeVars, "content-#{$component}");
}
&.disabled .summary {
cursor: not-allowed;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Form/formActions.ts:
--------------------------------------------------------------------------------
```typescript
import type { SingleValidationResult, ValidationResult } from "../Form/FormContext";
export const UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
export enum FormActionKind {
FIELD_LOST_FOCUS = "FormActionKind:FIELD_LOST_FOCUS",
FIELD_VALUE_CHANGED = "FormActionKind:FIELD_VALUE_CHANGED",
FIELD_FOCUSED = "FormActionKind:FIELD_FOCUSED",
FIELD_VALIDATED = "FormActionKind:FIELD_VALIDATED",
FIELD_INITIALIZED = "FormActionKind:FIELD_INITIALIZED",
FIELD_REMOVED = "FormActionKind:FIELD_REMOVED",
TRIED_TO_SUBMIT = "FormActionKind:TRIED_TO_SUBMIT",
BACKEND_VALIDATION_ARRIVED = "FormActionKind:BACKEND_VALIDATION_ARRIVED",
SUBMITTING = "FormActionKind:SUBMITTING",
SUBMITTED = "FormActionKind:SUBMITTED",
RESET = "FormActionKind:RESET",
}
export type FormAction = {
type: FormActionKind;
// Potential improvement: Try to specify the type with more details
payload:
| {
uid?: any;
data?: any;
error?: any;
value?: any;
}
| any;
};
export function fieldInitialized(uid: string, value: any, force = false) {
return {
type: FormActionKind.FIELD_INITIALIZED,
payload: {
uid,
value,
force
},
};
}
export function fieldChanged(uid: string, value: any) {
return {
type: FormActionKind.FIELD_VALUE_CHANGED,
payload: {
uid,
value
},
};
}
export function fieldFocused(uid: string) {
return {
type: FormActionKind.FIELD_FOCUSED,
payload: {
uid,
},
};
}
export function fieldLostFocus(uid: string) {
return {
type: FormActionKind.FIELD_LOST_FOCUS,
payload: {
uid,
},
};
}
export function fieldValidated(uid: string, validationResult: ValidationResult) {
return {
type: FormActionKind.FIELD_VALIDATED,
payload: {
uid,
validationResult,
},
};
}
export function fieldRemoved(uid: string) {
return {
type: FormActionKind.FIELD_REMOVED,
payload: {
uid,
},
};
}
export function triedToSubmit() {
return {
type: FormActionKind.TRIED_TO_SUBMIT,
payload: {},
};
}
export function formSubmitting() {
return {
type: FormActionKind.SUBMITTING,
payload: {},
};
}
export function formSubmitted() {
return {
type: FormActionKind.SUBMITTED,
payload: {},
};
}
export function formReset() {
return {
type: FormActionKind.RESET,
payload: {},
};
}
export function backendValidationArrived({
generalValidationResults = [],
fieldValidationResults = {},
}: {
generalValidationResults: Array<SingleValidationResult>;
fieldValidationResults: Record<string, Array<SingleValidationResult>>;
}) {
return {
type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
payload: {
generalValidationResults,
fieldValidationResults,
},
};
}
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/lint.test.ts:
--------------------------------------------------------------------------------
```typescript
import { LintDiagKind, lint } from "../../../src/parsers/xmlui-parser/lint";
import { describe, expect, it, assert } from "vitest";
import type { ComponentDef, ComponentMetadata } from "../../../src";
import { transformSource } from "./xmlui";
import { MetadataProvider } from "../../../src/language-server/services/common/metadata-utils";
describe("lint", ()=>{
describe("props", ()=>{
const buttonWithPropX = new MetadataProvider({
Button: {
props: {
x: null
},
events: {
click: {
description: "event on click"
}
}
}
});
it("detects unrecognised prop", ()=>{
const component = transformSource(
`<Button something="non-existant" />`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
})
it("detects unrecognised prop deeply nested", ()=>{
const component = transformSource(
`<A><Button something="non-existant" /></A>`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
})
it("detects unrecognised prop in My namespace", ()=>{
const component = transformSource(
`<A xmlns:My="app-ns"><Button something="non-existant" /></A>`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
})
it("detects unrecognised prop in Xmlui namespace", () => {
const component = transformSource(
`<A xmlns:Xmlui="core-ns"><Xmlui:Button something="non-existant" /></A>`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
});
it("recognises layout prop", () => {
const component = transformSource(
`<Button width="anything" />`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags).toHaveLength(0);
});
it("recognises layout prop with sm viewport size", () => {
const component = transformSource(
`<Button width-sm="anything" />`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags).toHaveLength(0);
});
it("recognises click event", () => {
const component = transformSource(
`<Button onClick="anything" />`
) as ComponentDef;
const diags = lint({ component, metadataProvider: buttonWithPropX });
expect(diags).toHaveLength(0);
});
})
})
```
--------------------------------------------------------------------------------
/xmlui/src/components/Image/ImageNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
type CSSProperties,
type HTMLAttributes,
forwardRef,
useEffect,
useMemo,
useState,
} from "react";
import classnames from "classnames";
import styles from "./Image.module.scss";
// =====================================================================================================================
// React Image component implementation
type Props = {
src?: string;
alt?: string;
imageData?: Blob | any;
fit?: "cover" | "contain";
style?: CSSProperties;
className?: string;
lazyLoad?: boolean;
aspectRatio?: string;
animation?: object;
inline?: boolean;
} & Pick<HTMLAttributes<HTMLImageElement>, "onClick">;
export const defaultProps: Pick<Props, "fit" | "lazyLoad" | "inline"> = {
fit: "contain",
lazyLoad: false,
inline: false,
};
export const Image = forwardRef(function Img(
{
src,
alt,
imageData,
fit = defaultProps.fit,
style,
className,
onClick,
aspectRatio,
lazyLoad = defaultProps.lazyLoad,
inline = defaultProps.inline,
...rest
}: Props,
ref,
) {
const [blobUrl, setBlobUrl] = useState<string | null>(null);
const blobToRender = useMemo(() => {
if (!imageData || !(imageData instanceof Blob)) {
return undefined;
}
return imageData;
}, [imageData]);
// Handle Blob data when src is empty
useEffect(() => {
if (!src && blobToRender) {
const url = URL.createObjectURL(blobToRender);
setBlobUrl(url);
// Cleanup function to revoke the blob URL
return () => {
URL.revokeObjectURL(url);
setBlobUrl(null);
};
} else {
// Clean up any existing blob URL if src is provided or imageData is not a Blob
if (blobUrl) {
URL.revokeObjectURL(blobUrl);
setBlobUrl(null);
}
}
}, [src, blobToRender]);
src = safeConvertPropToString(src);
alt = safeConvertPropToString(alt);
// Use blob URL if src is empty and we have a blob URL
const imageSrc = src || blobUrl;
return (
<img
{...rest}
src={imageSrc}
ref={ref as any}
alt={alt}
loading={lazyLoad ? "lazy" : "eager"}
className={classnames(
styles.img,
{
[styles.clickable]: !!onClick,
},
className,
)}
style={{
objectFit: fit,
boxShadow: "none",
...style,
flexShrink: 1,
aspectRatio: aspectRatio,
...(inline ? { display: "inline" } : {}),
}}
onClick={onClick}
/>
);
});
function safeConvertPropToString(prop: unknown): string | undefined {
if (typeof prop === "string") return prop;
if (
prop != null &&
typeof prop !== "object" &&
typeof prop !== "function" &&
!Number.isNaN(prop)
) {
return String(prop);
}
return undefined;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/StickyBox/StickyBoxNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties, ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
import classnames from "classnames";
import { RenderPropSticky } from "react-sticky-el";
import styles from "./StickyBox.module.scss";
import { useRealBackground, useScrollParent } from "../../components-core/utils/hooks";
// --- NOTE: React.StrictMode produces error logs using this component. Deployed apps are okay.
// See here: https://github.com/gm0t/react-sticky-el/issues/82
// =====================================================================================================================
// React StickyBox component implementation
export const defaultProps = {
to: "top" as const,
};
type Props = {
children: ReactNode;
uid?: string;
style?: CSSProperties;
className?: string;
to: "top" | "bottom";
};
export function StickyBox({ children, uid, style, to = defaultProps.to, className }: Props) {
const sentinelRef = useRef(null);
const [wrapper, setWrapper] = useState(null);
const [stuck, setStuck] = useState(false);
const scrollParent = useScrollParent(sentinelRef.current);
const realBackground = useRealBackground(scrollParent);
useEffect(() => {
if (wrapper) {
document.documentElement.style.setProperty(
"--xmlui-scroll-margin-top",
wrapper.clientHeight + "px",
);
// scrollParent.setAttribute("data-xmlui-scroll-padding", true);
}
}, [scrollParent, wrapper]);
const wrapperClassName = classnames(styles.wrapper, className);
const stickyStyles = {
backgroundColor: realBackground,
...style,
};
const stickyClassName = "";
return (
<>
{!!scrollParent && (
<RenderPropSticky
mode={to}
onFixedToggle={setStuck}
// hideOnBoundaryHit={hideOnBoundaryHit}
// offsetTransforms={offsetTransforms}
// disabled={disabled}
// boundaryElement={boundaryElement}
scrollElement={scrollParent}
// bottomOffset={bottomOffset}
// topOffset={topOffset}
// positionRecheckInterval={positionRecheckInterval}
>
{({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => (
<div ref={holderRef} style={holderStyles}>
<div
className={`${wrapperClassName} ${isFixed ? stickyClassName : ""}`}
style={isFixed ? { ...wrapperStyles, ...stickyStyles } : wrapperStyles}
ref={wrapperRef}
>
<div ref={setWrapper}>{children}</div>
</div>
</div>
)}
</RenderPropSticky>
)}
<div
style={{ display: "none" }}
ref={sentinelRef}
className={to === "top" ? styles.sentinel : ""}
/>
</>
);
}
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.attr.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it, assert } from "vitest";
import type { ComponentDef } from "../../../src/abstractions/ComponentDefs";
import type { ButtonMd } from "../../../src/components/Button/Button";
import { transformSource } from "./xmlui";
import type { StackMd } from "../../../src/components/Stack/Stack";
describe("Xmlui transform - attributes", () => {
it("Invalid attribute name fails #1", () => {
try {
transformSource("<Stack prop.sub.sub='a' />");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T007")).equal(true);
}
});
it("Invalid attribute name fails #2", () => {
try {
transformSource("<Stack prop.='a' />");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T007")).equal(true);
}
});
it("Invalid attribute name fails #3", () => {
try {
transformSource("<Component name='MyStack' invaAttr='a'><Stack /></Component>");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T021")).equal(true);
}
});
it("Invalid attribute name fails #4", () => {
try {
transformSource("<Component invaAttr='a' name='MyStack'><Stack /></Component>");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T021")).equal(true);
}
});
it("key-only attr is true", () => {
const cd = transformSource("<Button enabled />") as ComponentDef<typeof ButtonMd>;
expect(cd.props.enabled).equal("true");
});
it("uid works", () => {
const cd = transformSource("<Stack id='myStack' />") as ComponentDef<typeof StackMd>;
expect(cd.type).equal("Stack");
expect(cd.uid).equal("myStack");
});
it("testId works", () => {
const cd = transformSource("<Stack testId='myStack' />") as ComponentDef<typeof StackMd>;
expect(cd.type).equal("Stack");
expect(cd.testId).equal("myStack");
});
it("when works", () => {
const cd = transformSource("<Stack when='isOpen' />") as ComponentDef<typeof StackMd>;
expect(cd.type).equal("Stack");
expect(cd.props ?? {}).not.toHaveProperty("when");
expect(cd.when).equal("isOpen");
});
it("uses works with 1 value", () => {
const cd = transformSource("<Stack uses='isOpen' />") as ComponentDef<typeof StackMd>;
expect(cd.type).equal("Stack");
expect(cd.props ?? {}).not.toHaveProperty("uses");
expect(cd.uses).deep.equal(["isOpen"]);
});
it("uses works with multiple values", () => {
const cd = transformSource("<Stack uses='isOpen, isClosed' />") as ComponentDef<typeof StackMd>;
expect(cd.type).equal("Stack");
expect(cd.props ?? {}).not.toHaveProperty("uses");
expect(cd.uses).deep.equal(["isOpen", "isClosed"]);
});
});
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTop.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ScrollToTop.module.scss";
import { createComponentRenderer, createMetadata, d, parseScssVar } from "xmlui";
import * as ScrollToTopNative from "./ScrollToTopNative";
const COMP = "ScrollToTop";
const { ScrollToTop, defaultProps } = ScrollToTopNative;
export const ScrollToTopMd = createMetadata({
status: "experimental",
description: "A floating button that scrolls the page to the top when clicked",
parts: {
icon: {
description: "The icon displayed inside the scroll to top button",
}
},
props: {
position: {
description: "Horizontal position of the button at the bottom of the screen",
type: "string",
defaultValue: defaultProps.position,
options: ["start", "center", "end"],
},
visible: {
description: "Whether the button is visible",
type: "boolean",
defaultValue: defaultProps.visible,
},
threshold: {
description: "Scroll position threshold (in pixels) after which the button becomes visible",
type: "number",
defaultValue: defaultProps.threshold,
},
icon: {
description: "Name of the icon to display in the button",
type: "string",
defaultValue: defaultProps.icon,
},
behavior: {
description: "Scroll behavior when scrolling to top",
type: "string",
defaultValue: defaultProps.behavior,
options: ["smooth", "instant", "auto"],
},
},
events: {
click: d("Triggered when the scroll to top button is clicked"),
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "$color-primary",
[`borderColor-${COMP}`]: "$color-primary-dark",
[`color-${COMP}`]: "$color-surface-0",
[`size-${COMP}`]: "48px",
[`borderRadius-${COMP}`]: "$space-24",
[`shadow-${COMP}`]: "$shadow-lg",
[`bottom-${COMP}`]: "$space-16",
[`horizontalSpacing-${COMP}`]: "$space-16",
[`zIndex-${COMP}`]: "1000",
},
});
export const scrollToTopComponentRenderer = createComponentRenderer(
COMP,
ScrollToTopMd,
({ node, extractValue, className, lookupEventHandler }) => {
const props = (node.props as typeof ScrollToTopMd.props)!;
return (
<ScrollToTop
className={className}
position={extractValue.asOptionalString(props.position, defaultProps.position)}
visible={extractValue.asOptionalBoolean(props.visible, defaultProps.visible)}
threshold={extractValue.asOptionalNumber(props.threshold, defaultProps.threshold)}
icon={extractValue.asOptionalString(props.icon, defaultProps.icon)}
behavior={extractValue.asOptionalString(props.behavior, defaultProps.behavior) as "smooth" | "instant" | "auto"}
onClick={lookupEventHandler("click")} // This is not an error.
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-primary.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { Parser } from "../../../src/parsers/scripting/Parser";
import {
Identifier,
T_BINARY_EXPRESSION,
T_CALCULATED_MEMBER_ACCESS_EXPRESSION,
T_CONDITIONAL_EXPRESSION,
T_FUNCTION_INVOCATION_EXPRESSION,
T_IDENTIFIER,
T_LITERAL,
T_MEMBER_ACCESS_EXPRESSION,
T_SEQUENCE_EXPRESSION,
T_UNARY_EXPRESSION,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Parser - primary expressions", () => {
it("null", () => {
// --- Arrange
const wParser = new Parser("null");
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(T_LITERAL);
});
it("undefined", () => {
// --- Arrange
const wParser = new Parser("undefined");
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(T_LITERAL);
});
const identifierCases = [
{ src: "$id", exp: "$id" },
{ src: "ident", exp: "ident" },
{ src: "_alma$123", exp: "_alma$123" },
];
identifierCases.forEach((c) => {
it(`Identifier: ${c.src}`, () => {
// --- Arrange
const wParser = new Parser(c.src);
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(T_IDENTIFIER);
const literal = expr as Identifier;
expect(literal.name).equal(c.exp);
});
});
const parenthesizedCases = [
{ src: "(123)", exp: T_LITERAL },
{ src: "(a+b)", exp: T_BINARY_EXPRESSION },
{ src: "(a ? b : c)", exp: T_CONDITIONAL_EXPRESSION },
{ src: "(!a)", exp: T_UNARY_EXPRESSION },
{ src: "(a)", exp: T_IDENTIFIER },
{ src: "(a, b)", exp: T_SEQUENCE_EXPRESSION },
{ src: "(c(a, b))", exp: T_FUNCTION_INVOCATION_EXPRESSION },
{ src: "(a.b)", exp: T_MEMBER_ACCESS_EXPRESSION },
{ src: "(a[b])", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
];
parenthesizedCases.forEach((c) => {
it(`Parenthesized expression: ${c.src}`, () => {
// --- Arrange
const wParser = new Parser(c.src);
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(c.exp);
expect(expr.parenthesized).equal(1);
});
});
it(`Parenthesized expression`, () => {
// --- Arrange
const wParser = new Parser("(c(a, b))");
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(T_FUNCTION_INVOCATION_EXPRESSION);
expect(expr.parenthesized).equal(1);
});
});
```