This is page 27 of 148. Use http://codebase.md/xmlui-org/xmlui/main.tsx?lines=false&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-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ └── Separator.xmlui
│ │ ├── config.ts
│ │ └── Main.xmlui
│ └── 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
│ │ │ ├── ResponsiveBar.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
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ ├── use-modal-dialog-onclose.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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ ├── staticwebapp.config.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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── Separator.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ ├── ContentSeparatorNative.tsx
│ │ │ └── test-padding.xmlui
│ │ ├── 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
│ │ ├── Part
│ │ │ └── Part.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
│ │ │ ├── ResponsiveBarItem.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ └── infrastructure
│ │ ├── index.html
│ │ ├── main.tsx
│ │ ├── public
│ │ │ ├── mockServiceWorker.js
│ │ │ ├── resources
│ │ │ │ ├── bell.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── flower-640x480.jpg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ └── txt.svg
│ │ │ └── serve.json
│ │ └── TestBed.tsx
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/WindowsAppFrame.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./WindowsAppFrame.module.scss";
import type { ReactNode } from "react";
import { forwardRef } from "react";
export const ToolBar = (props) => {
return (
<div className={styles.toolbar}>
<div className={styles.topInfo}>
<div className={styles.uicon} style={{ margin: "0 10px 0 6px" }}>
<div style={{ width: 14 }}>
<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.20647 19.6315C7.36494 19.6315 6.63359 19.4431 6.01263 19.0663C5.40551 18.6756 4.93628 18.1313 4.60513 17.4336C4.27397 16.7219 4.1084 15.8846 4.1084 14.9218V9.03995C4.1084 8.90041 4.15686 8.78179 4.2534 8.68412C4.34994 8.58643 4.46724 8.5376 4.60513 8.5376H6.42667C6.5784 8.5376 6.69571 8.58643 6.7784 8.68412C6.87494 8.78179 6.9234 8.90041 6.9234 9.03995V14.7962C6.9234 16.5266 7.67532 17.3917 9.17936 17.3917C9.89686 17.3917 10.4626 17.1615 10.8765 16.701C11.3044 16.2405 11.5182 15.6056 11.5182 14.7962V9.03995C11.5182 8.90041 11.5665 8.78179 11.663 8.68412C11.7596 8.58643 11.8769 8.5376 12.0149 8.5376H13.8363C13.9742 8.5376 14.0915 8.58643 14.188 8.68412C14.2847 8.78179 14.333 8.90041 14.333 9.03995V18.9198C14.333 19.0593 14.2847 19.1779 14.188 19.2756C14.0915 19.3733 13.9742 19.4221 13.8363 19.4221H12.1597C12.008 19.4221 11.8838 19.3733 11.7872 19.2756C11.7044 19.1779 11.663 19.0593 11.663 18.9198V18.0616C11.2905 18.55 10.8282 18.9337 10.2763 19.2128C9.72436 19.4919 9.03436 19.6315 8.20647 19.6315Z"
fill="#3367CC"
/>
<path
d="M17.564 19.4252C17.4259 19.4252 17.3086 19.3764 17.2121 19.2787C17.1155 19.181 17.0673 19.0624 17.0673 18.9229V9.04306C17.0673 8.90352 17.1155 8.7849 17.2121 8.68723C17.3086 8.58954 17.4259 8.54071 17.564 8.54071H19.2819C19.4336 8.54071 19.5509 8.58954 19.6336 8.68723C19.7303 8.7849 19.7786 8.90352 19.7786 9.04306V18.9229C19.7786 19.0624 19.7303 19.181 19.6336 19.2787C19.5509 19.3764 19.4336 19.4252 19.2819 19.4252H17.564ZM17.4811 6.74056C17.3294 6.74056 17.2051 6.69871 17.1086 6.61498C17.0257 6.51729 16.9844 6.39171 16.9844 6.23821V4.73112C16.9844 4.59157 17.0257 4.47296 17.1086 4.37529C17.2051 4.27759 17.3294 4.22876 17.4811 4.22876H19.3646C19.5163 4.22876 19.6405 4.27759 19.7371 4.37529C19.8338 4.47296 19.8821 4.59157 19.8821 4.73112V6.23821C19.8821 6.39171 19.8338 6.51729 19.7371 6.61498C19.6405 6.69871 19.5163 6.74056 19.3646 6.74056H17.4811Z"
fill="#3367CC"
/>
<path
fillRule="evenodd"
d="M23.4228 1.14092H1.11508V23.7013H23.4228V1.14092ZM0.730469 0.751953V24.0903H23.8074V0.751953H0.730469Z"
fill="#3367CC"
/>
</svg>
</div>
</div>
<div className={styles.appFullName}>XMLUI</div>
</div>
<div className={styles.actbtns}>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="l192sq9Ma1sM2oXLQ331nvD" fill="rgb(0,0,0)">
<g>
<path
id="pf2evWQPs"
d="M730 2643 c-108 -55 -108 -215 0 -270 l44 -23 1786 0 c1719 0 1787 1 1826 19 105 48 116 194 21 265 l-28 21 -1807 3 c-1705 2 -1809 1 -1842 -15z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="lld67zMMrGguqZbYTM5KDT" fill="rgb(0,0,0)">
<g>
<path
id="pJNFf1TAf"
d="M1162 4469 c-226 -29 -411 -177 -482 -385 -39 -113 -41 -192 -38 -1589 3 -1250 5 -1354 21 -1410 63 -217 212 -364 427 -422 61 -17 159 -18 1470 -18 1311 0 1409 1 1470 18 217 59 368 210 427 427 17 61 18 159 18 1470 0 1311 -1 1409 -18 1470 -58 215 -205 364 -422 427 -56 16 -158 18 -1435 19 -756 1 -1404 -2 -1438 -7z m2823 -320 c54 -15 149 -110 164 -164 15 -56 15 -2794 0 -2850 -15 -54 -110 -149 -164 -164 -56 -15 -2794 -15 -2850 0 -54 15 -149 110 -164 164 -15 56 -15 2794 0 2849 14 52 101 142 154 161 34 12 257 14 1430 15 982 0 1402 -3 1430 -11z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.closeBtn} ${styles.prtclk}`}>
<div style={{ width: 14, height: 14 }}>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
preserveAspectRatio="xMidYMid meet"
>
<g fill="#000000">
<path
d="M87.4 424.6 c-2.9 -2.9 -3.4 -4.1 -3.4 -8.2 l0 -4.9 77.7 -77.7 77.8 -77.8 -77.8 -77.8 -77.7 -77.7 0 -4.9 c0 -4.1 0.5 -5.3 3.4 -8.2 2.9 -2.9 4.1 -3.4 8.2 -3.4 l4.9 0 77.7 77.7 77.8 77.8 77.8 -77.8 77.7 -77.7 4.9 0 c4.1 0 5.3 0.5 8.2 3.4 2.9 2.9 3.4 4.1 3.4 8.2 l0 4.9 -77.7 77.7 -77.8 77.8 77.8 77.8 77.7 77.7 0 4.9 c0 4.1 -0.5 5.3 -3.4 8.2 -2.9 2.9 -4.1 3.4 -8.2 3.4 l-4.9 0 -77.7 -77.7 -77.8 -77.8 -77.8 77.8 -77.7 77.7 -4.9 0 c-4.1 0 -5.3 -0.5 -8.2 -3.4z" />
</g>
</svg>
</div>
</div>
</div>
</div>
);
};
export const WindowsAppFrame = forwardRef(({ children }: { children: ReactNode }, ref) => {
return (
<div className={styles.notepad} ref={ref as any}>
<ToolBar />
<div className={styles.windowScreen}>
<div className={styles.topBar}>
<div className={styles.topBarItem}>File</div>
<div className={styles.topBarItem}>Edit</div>
<div className={styles.topBarItem}>View</div>
</div>
<div className={styles.restWindow}>
<div className={styles.noteText}>{children}</div>
</div>
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/RadioGroup/RadioGroup.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$gap-RadioGroupOption: createThemeVar("gap-RadioGroupOption");
// --- Borders
$borderWidth-RadioGroupOption: createThemeVar("borderWidth-RadioGroupOption");
$borderWidth-RadioGroupOption-validation: createThemeVar("borderWidth-RadioGroupOption-validation");
$borderColor-RadioGroupOption--default: createThemeVar("Input:borderColor-RadioGroupOption--default");
$borderColor-checked-RadioGroupOption: createThemeVar("Input:borderColor-checked-RadioGroupOption");
$borderColor-RadioGroupOption--default--hover: createThemeVar(
"Input:borderColor-RadioGroupOption--default--hover"
);
$borderColor-RadioGroupOption--default--active: createThemeVar(
"Input:borderColor-RadioGroupOption--default--active"
);
$borderColor-RadioGroupOption--disabled: createThemeVar(
"Input:borderColor-RadioGroupOption--disabled"
);
$borderColor-RadioGroupOption--error: createThemeVar("Input:borderColor-RadioGroupOption--error");
$borderColor-RadioGroupOption--warning: createThemeVar("Input:borderColor-RadioGroupOption--warning");
$borderColor-RadioGroupOption--success: createThemeVar("Input:borderColor-RadioGroupOption--success");
// --- Backgrounds
$backgroundColor-RadioGroupOption--default: createThemeVar(
"Input:backgroundColor-RadioGroupOption--default"
);
$backgroundColor-checked-RadioGroupOption: createThemeVar(
"Input:backgroundColor-checked-RadioGroupOption"
);
$backgroundColor-checked-RadioGroupOption--disabled: createThemeVar(
"Input:backgroundColor-checked-RadioGroupOption--disabled"
);
// --- Foreground
$color-RadioGroupOption--disabled: createThemeVar("Input:color-RadioGroupOption--disabled");
// --- Text
$fontSize-RadioGroupOption: createThemeVar("Input:fontSize-RadioGroupOption");
$fontWeight-RadioGroupOption: createThemeVar("Input:fontWeight-RadioGroupOption");
$textColor-RadioGroupOption--default: createThemeVar("Input:textColor-RadioGroupOption--default");
$textColor-RadioGroupOption--error: createThemeVar("Input:textColor-RadioGroupOption--error");
$textColor-RadioGroupOption--warning: createThemeVar("Input:textColor-RadioGroupOption--warning");
$textColor-RadioGroupOption--success: createThemeVar("Input:textColor-RadioGroupOption--success");
// Variables for @layer section
$outlineWidth-RadioGroupOption--focus: createThemeVar("Input:outlineWidth-RadioGroupOption--focus");
$outlineColor-RadioGroupOption--focus: createThemeVar("Input:outlineColor-RadioGroupOption--focus");
$outlineStyle-RadioGroupOption--focus: createThemeVar("Input:outlineStyle-RadioGroupOption--focus");
$outlineOffset-RadioGroupOption--focus: createThemeVar("Input:outlineOffset-RadioGroupOption--focus");
@layer components {
.radioGroupContainer {
width: 100%;
display: flex;
flex-direction: column;
gap: t.$space-2;
}
.radioOptionContainer {
display: flex;
align-items: center;
gap: $gap-RadioGroupOption;
}
.radioOption {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 100%;
background: $backgroundColor-RadioGroupOption--default;
border-width: $borderWidth-RadioGroupOption;
border-style: solid;
border-color: $borderColor-RadioGroupOption--default;
padding: 0;
cursor: pointer;
&:hover {
border-color: $borderColor-RadioGroupOption--default--hover;
}
&:focus-visible {
outline-width: $outlineWidth-RadioGroupOption--focus;
outline-color: $outlineColor-RadioGroupOption--focus;
outline-style: $outlineStyle-RadioGroupOption--focus;
outline-offset: $outlineOffset-RadioGroupOption--focus;
}
&:disabled {
cursor: not-allowed;
border-color: $borderColor-RadioGroupOption--disabled;
}
&:disabled + label {
cursor: not-allowed;
color: $color-RadioGroupOption--disabled;
}
&:not(:disabled) {
&.checked:not(.error):not(.warning):not(.valid) {
border-color: $borderColor-checked-RadioGroupOption;
}
&.error {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption--error;
}
&.warning {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption--warning;
}
&.valid {
border-width: $borderWidth-RadioGroupOption-validation;
border-color: $borderColor-RadioGroupOption--success;
}
}
}
// The indicator is the circle that appears inside the radio button:
// both the larger circle and an inner circle.
.indicator {
display: grid;
place-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(
circle,
transparent 28%,
$backgroundColor-checked-RadioGroupOption 34%
);
&.disabled {
background: radial-gradient(
circle,
transparent 28%,
$backgroundColor-checked-RadioGroupOption--disabled 34%
);
}
}
.itemContainer {
z-index: -1;
position: relative;
opacity: 0;
width: 0;
height: 0;
}
.optionLabel {
width: 100%;
cursor: pointer;
}
.label {
width: 100%;
color: $textColor-RadioGroupOption--default;
font-size: $fontSize-RadioGroupOption;
font-weight: $fontWeight-RadioGroupOption;
user-select: none;
cursor: pointer;
&.error {
color: $textColor-RadioGroupOption--error;
}
&.warning {
color: $textColor-RadioGroupOption--warning;
}
&.valid {
color: $textColor-RadioGroupOption--success;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTopNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useEffect, useState, useCallback } from "react";
import { Icon } from "xmlui";
import classnames from "classnames";
import styles from "./ScrollToTop.module.scss";
type Props = {
position?: "start" | "center" | "end";
visible?: boolean;
threshold?: number;
icon?: string;
behavior?: "smooth" | "instant" | "auto";
onClick?: () => void;
className?: string;
style?: React.CSSProperties;
};
export const defaultProps: Pick<Props, "position" | "visible" | "threshold" | "icon" | "behavior"> = {
position: "end",
visible: true,
threshold: 300,
icon: "chevronup",
behavior: "smooth",
};
export const ScrollToTop = forwardRef<HTMLButtonElement, Props>(
function ScrollToTop(
{
position = defaultProps.position,
visible = defaultProps.visible,
threshold = defaultProps.threshold,
icon = defaultProps.icon,
behavior = defaultProps.behavior,
onClick,
className,
style,
}: Props,
ref,
) {
const [isVisible, setIsVisible] = useState(false);
// Validate position and fall back to "end" if invalid
const validPosition = ["start", "center", "end"].includes(position || "") ? position : "end";
// Validate behavior and fall back to "smooth" if invalid
const validBehavior = ["smooth", "instant", "auto"].includes(behavior || "") ? behavior : "smooth";
// Check scroll position to determine visibility
useEffect(() => {
if (!visible) {
setIsVisible(false);
return;
}
const handleScroll = () => {
// Check multiple possible scroll containers using the same logic as scroll-to-top
const windowScrollTop = window.pageYOffset || document.documentElement.scrollTop;
const bodyScrollTop = document.body.scrollTop;
let maxScrollTop = Math.max(windowScrollTop, bodyScrollTop);
// Check all elements that might be scrolled (same as in handleClick)
const allElements = document.querySelectorAll('*');
allElements.forEach((element) => {
if (element instanceof HTMLElement && element.scrollTop > 0) {
maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
}
});
// Also check common XMLUI containers
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
if (element instanceof HTMLElement) {
maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
}
});
// If threshold is 0, show the button regardless of scroll position
if (threshold === 0) {
setIsVisible(true);
} else {
setIsVisible(maxScrollTop > (threshold || 0));
}
};
window.addEventListener("scroll", handleScroll);
document.addEventListener("scroll", handleScroll, true); // Capture phase for all scroll events
// Also listen to scroll events on common container elements
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
element.addEventListener("scroll", handleScroll);
});
handleScroll(); // Check initial position
return () => {
window.removeEventListener("scroll", handleScroll);
document.removeEventListener("scroll", handleScroll, true);
xmluiContainers.forEach((element) => {
element.removeEventListener("scroll", handleScroll);
});
};
}, [visible, threshold]);
// Scroll to top functionality
const handleClick = useCallback(() => {
// Force scroll to top using multiple methods
// This will work regardless of which container is scrolled
// Convert behavior prop to ScrollBehavior type
const scrollBehavior: ScrollBehavior = validBehavior === "instant" ? "instant" : validBehavior === "auto" ? "auto" : "smooth";
// Method 1: Standard window scroll
window.scrollTo({ top: 0, behavior: scrollBehavior });
// Method 2: Direct property setting (for instant behavior)
if (validBehavior === "instant") {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
// Method 3: Find and scroll any scrolled containers
const allElements = document.querySelectorAll('*');
allElements.forEach((element) => {
if (element instanceof HTMLElement && element.scrollTop > 0) {
if (validBehavior === "instant") {
element.scrollTop = 0;
} else {
element.scrollTo({ top: 0, behavior: scrollBehavior });
}
}
});
// Method 4: Scroll specific XMLUI containers (common patterns)
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
if (element instanceof HTMLElement) {
if (validBehavior === "instant") {
element.scrollTop = 0;
} else {
element.scrollTo({ top: 0, behavior: scrollBehavior });
}
}
});
onClick?.();
}, [validBehavior, onClick]);
if (!isVisible) {
return null;
}
return (
<button
ref={ref}
className={classnames(
styles.scrollToTop,
{
[styles.positionStart]: validPosition === "start",
[styles.positionCenter]: validPosition === "center",
[styles.positionEnd]: validPosition === "end",
},
className,
)}
onClick={handleClick}
style={style}
aria-label="Scroll to top"
type="button"
>
<Icon name={icon} fallback="chevronup" aria-hidden />
</button>
);
},
);
```
--------------------------------------------------------------------------------
/docs/content/components/Splitter.md:
--------------------------------------------------------------------------------
```markdown
# Splitter [#splitter]
`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container.
Most properties of the component focus on the primary section (e.g. sizing).
See also: [HSplitter](/components/HSplitter), [VSplitter](/components/VSplitter).
## Properties [#properties]
### `floating` (default: false) [#floating-default-false]
Toggles whether the resizer is visible (`false`) or not (`true`) when not hovered or dragged. The default value is `false`, meaning the resizer is visible all the time.
```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>
```
### `initialPrimarySize` (default: "50%") [#initialprimarysize-default-50-]
This optional number property sets the initial size of the primary section. The unit of the size value is in pixels or percentages.
```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>
```
### `maxPrimarySize` (default: "100%") [#maxprimarysize-default-100-]
This property sets the maximum size the primary section can have. The unit of the size value is in pixels or percentages. Negative values are supported and calculate from the end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").
```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>
```
```xmlui-pg copy display name="Example: maxPrimarySize with negative value (from end)"
<App>
<Splitter height="200px" maxPrimarySize="-50px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `minPrimarySize` (default: "0%") [#minprimarysize-default-0-]
This property sets the minimum size the primary section can have. The unit of the size value is in pixels or percentages.
```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>
```
### `orientation` (default: "vertical") [#orientation-default-vertical]
Sets whether the `Splitter` divides the container horizontally and lays out the section on top of each other (`vertical`), or vertically by placing the sections next to each other (`horizontal`).
Available values: `horizontal`, `vertical` **(default)**
```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>
```
### `splitterTemplate` [#splittertemplate]
The divider can be customized using XMLUI components via this property.
```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>
```
### `swapped` (default: false) [#swapped-default-false]
This optional booelan property indicates whether the `Splitter` sections are layed out as primary and secondary (`false`) or secondary and primary (`true`) from left to right.
```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>
```
## Events [#events]
### `resize` [#resize]
This event fires when the component is resized.
```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>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-resizer-Splitter | $color-surface-100 | $color-surface-100 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Splitter | *none* | *none* |
| [border](../styles-and-themes/common-units/#border)-Splitter | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Splitter | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Splitter | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Splitter | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Splitter | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Splitter | *none* | *none* |
| [cursor](../styles-and-themes/common-units/#cursor)-resizer-horizontal-Splitter | ew-resize | ew-resize |
| [cursor](../styles-and-themes/common-units/#cursor)-resizer-vertical-Splitter | ns-resize | ns-resize |
| [thickness](../styles-and-themes/common-units/#size)-resizer-Splitter | 5px | 5px |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { createEvalContext, parseStatements } from "./test-helpers";
import type {
ArrowExpressionStatement,
ExpressionStatement} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import {
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
describe("Function proxies", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/function-proxy.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 type {
ArrowExpressionStatement,
ExpressionStatement} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import {
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Function proxies (exp)", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/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, d, dClick, dTriggerTemplate } from "../metadata-helpers";
import { defaultResponsiveBarProps, ResponsiveBar } from "./ResponsiveBarNative";
import { ResponsiveBarItem } from "./ResponsiveBarItem";
import { alignmentOptionMd } from "../abstractions";
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,
},
dropdownText: {
description:
"Text to display in the dropdown trigger button label when items overflow. " +
"This text is used for accessibility and appears alongside the overflow icon.",
valueType: "string",
defaultValue: defaultResponsiveBarProps.dropdownText,
},
dropdownAlignment: {
description:
"Alignment of the dropdown menu relative to the trigger button. " +
"By default, uses 'end' when reverse is false (dropdown on the right/bottom) " +
"and 'start' when reverse is true (dropdown on the left/top).",
valueType: "string",
availableValues: alignmentOptionMd,
},
triggerTemplate: dTriggerTemplate(COMP),
gap: {
description:
"Gap between child elements in pixels. Controls the spacing between items " +
"in the responsive bar layout.",
valueType: "number",
defaultValue: defaultResponsiveBarProps.gap,
},
reverse: {
description:
"Reverses the direction of child elements. In horizontal mode, items are arranged " +
"from right to left instead of left to right. In vertical mode, items are arranged " +
"from bottom to top instead of top to bottom. The dropdown menu position also adjusts " +
"to appear at the start (left/top) instead of the end (right/bottom).",
valueType: "boolean",
defaultValue: defaultResponsiveBarProps.reverse,
},
},
events: {
click: dClick(COMP),
willOpen: d(
`This event fires when the \`${COMP}\` overflow dropdown menu is about to be opened. ` +
`You can prevent opening the menu by returning \`false\` from the event handler. ` +
`Otherwise, the menu will open at the end of the event handler like normal.`,
),
},
apis: {
close: {
description: `This method closes the overflow dropdown menu.`,
signature: "close(): void",
},
open: {
description: `This method opens the overflow dropdown menu.`,
signature: "open(): void",
},
hasOverflow: {
description: `This method returns true if the ResponsiveBar currently has an overflow menu (i.e., some items don't fit and are in the dropdown).`,
signature: "hasOverflow(): boolean",
},
},
contextVars: {
$overflow: {
description:
"Boolean indicating whether the child component is displayed in the overflow " +
"dropdown menu (true) or visible in the main bar (false).",
valueType: "boolean",
},
},
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, registerComponentApi, layoutContext }) => {
const children = Array.isArray(node.children) ? node.children : node.children ? [node.children] : [];
const renderChildWithContext = (childNode: any, isOverflow: boolean) => (
<ResponsiveBarItem
node={childNode}
isOverflow={isOverflow}
renderChild={renderChild}
layoutContext={layoutContext}
/>
);
return (
<ResponsiveBar
orientation={extractValue(node.props?.orientation)}
overflowIcon={extractValue(node.props?.overflowIcon)}
dropdownText={extractValue(node.props?.dropdownText)}
dropdownAlignment={extractValue(node.props?.dropdownAlignment)}
triggerTemplate={renderChild(node.props?.triggerTemplate)}
gap={extractValue(node.props?.gap)}
reverse={extractValue.asOptionalBoolean(node.props?.reverse)}
onClick={lookupEventHandler("click")}
onWillOpen={lookupEventHandler("willOpen")}
registerComponentApi={registerComponentApi}
className={className}
childNodes={children}
renderChildFn={renderChildWithContext}
>
{children.map((child, index) => (
<ResponsiveBarItem
key={index}
node={child}
isOverflow={false}
renderChild={renderChild}
layoutContext={layoutContext}
/>
))}
</ResponsiveBar>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/reducer.ts:
--------------------------------------------------------------------------------
```typescript
import produce from "immer";
import { cloneDeep, isPlainObject, keyBy, setWith, unset } from "lodash-es";
import type { ContainerState } from "../../abstractions/ContainerDefs";
import type { ContainerAction} from "./containers";
import { ContainerActionKind } from "./containers";
import type { IDebugViewContext } from "../DebugViewProvider";
const MAX_STATE_TRANSITION_LENGTH = 100;
/**
* This function creates a reducer for the container state. For diagnostics, it may
* log the state transitions.
* @param debugView This debug view determines if the state transitions should be logged.
*/
export function createContainerReducer(debugView: IDebugViewContext) {
const allowLogging = debugView.collectStateTransitions;
let prevState: any = undefined;
let nextState: any = undefined;
// --- The reducer function
return produce((state: ContainerState, action: ContainerAction) => {
// --- Check if the action has an appropriate uid
const { uid } = action.payload;
if (uid === undefined && action.type !== ContainerActionKind.STATE_PART_CHANGED) {
console.error("uid not provided for control component", {
state,
action,
});
return state;
}
// --- Store the previous state for logging
if (allowLogging) {
try {
prevState = cloneDeep(state[uid]);
} catch (e) {
console.error("Error while cloning previous value", e);
}
}
// --- Apply the action
switch (action.type) {
case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED: {
state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_IS_REFETCHING_CHANGED: {
state[uid] = { ...state[uid], isRefetching: action.payload.isRefetching };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_LOADED: {
const { data, pageInfo } = action.payload;
state[uid] = {
value: data,
byId: Array.isArray(data) ? keyBy(data, (item) => item.$id) : undefined,
inProgress: false,
loaded: data !== undefined,
pageInfo,
};
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_ERROR: {
const { error } = action.payload;
state[uid] = { ...state[uid], error, inProgress: false, loaded: true };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_STARTED: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: true };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: false };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_ERROR: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: false };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.COMPONENT_STATE_CHANGED: {
const { state: newState } = action.payload;
state[uid] = {
...state[uid],
...newState,
};
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.STATE_PART_CHANGED: {
const { path, value, target, actionType, localVars } = action.payload;
if (actionType === "unset") {
unset(state, path);
} else {
let tempValueInLocalVars = localVars;
setWith(state, path, value, (nsValue, key, nsObject) => {
tempValueInLocalVars = tempValueInLocalVars?.[key];
if (
nsValue === undefined &&
isPlainObject(tempValueInLocalVars) &&
isPlainObject(target)
) {
// if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
// This way we can force it to be an object.
// (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
// During the first state setting, we don't have a previous value for usersTyped, because it was defined
// in vars, and wasn't updated yet. In the first update, it's value is undefined, and because the key is
// a number (an id in our case), lodash thinks it has to create an array after this 'set'. This way we
// can force it, because in the target we have the target object value (given by the proxy change),so if
// it's an object, it should be an object. Otherwise, we let lodash decide)
const next = Object(nsValue);
return next;
}
});
storeNextValue(state);
}
break;
}
default:
throw new Error();
}
// --- Log the transition
if (allowLogging) {
const loggedTransition = {
action: action.type,
uid,
prevState,
nextState,
};
// TODO: Logging to the console is a temporary solution. We should use a proper
// logging mechanism. Nonetheless, this works only with state transition logging
// enabled (which is disabled by default).
if (debugView.stateTransitions) {
if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {
debugView.stateTransitions.shift();
}
debugView.stateTransitions.push(loggedTransition);
}
}
function storeNextValue(nextValue: any) {
if (allowLogging) {
try {
nextState = cloneDeep(nextValue);
} catch (e) {
console.error("Error while cloning next value", e);
}
}
}
});
}
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-10.md:
--------------------------------------------------------------------------------
```markdown
# Search
The `Search` component uses [Tabs](/components/Tabs) to enable switching between two different search experiences.
```xmlui-pg display noHeader
---app display
<App>
<Search />
</App>
---comp display
<Component name="Search">
<Tabs>
<TabItem label="Find invoices issued after date">
<SearchInvoicesAfter />
</TabItem>
<TabItem label="Search clients, products, and invoices">
<SearchEverything />
</TabItem>
</Tabs>
</Component>
---comp display
<Component name="SearchInvoicesAfter">
This is SearchInvoicesAfter.
</Component>
---comp display
<Component name="SearchEverything">
This is SearchEverything.
</Component>
---desc
Try switching between the two tabs.
```
## Search invoices after date
Here is `SearchInvoicesAfter`. Try changing the date.
```xmlui-pg noHeader
---app display
<App>
<SearchInvoicesAfter />
</App>
---comp
<Component
name="StatusBadge"
var.statusColors="{{
draft: { background: '#f59e0b', label: 'white' },
sent: { background: '#3b82f6', label: 'white' },
paid: { background: '#10b981', label: 'white' }
}}"
>
<Badge
value="{$props.status}"
colorMap="{statusColors}"
variant="pill"
/>
</Component>
---comp
<Component name="SearchInvoicesAfter">
<VStack marginTop="1rem">
<DatePicker
id="dateAfter"
width="20rem"
initialValue="2025-01-01"
dateFormat="yyyy-MM-dd"
onDidChange="(val) => console.log('Date selected:', val)"
/>
<DataSource
id="invoicesAfter"
url="/resources/files/invoices.json"
when="{dateAfter.value}"
transformResult="{(data) => window.filterInvoicesAfter(data || [], dateAfter.value)}"
/>
<ChangeListener
listenTo="{dateAfter.value}"
onDidChange="invoicesAfter.reload()"
/>
<Fragment when="{invoicesAfter}">
<Card>
<VStack>
<Table data="{ invoicesAfter }">
<Column bindTo="client" header="Client" />
<Column bindTo="issue_date" header="Issue Date">
{ window.formatDate($item.issue_date) }
</Column>
<Column header="Status">
<StatusBadge status="{$item.status}" />
</Column>
<Column bindTo="total" header="Total" >
${$item.total}
</Column>
</Table>
</VStack>
</Card>
</Fragment>
</VStack>
</Component>
```
```xmlui /when/
<Component name="SearchInvoicesAfter">
<VStack paddingTop="$space-4">
<DatePicker
id="dateAfter"
width="20rem"
initialValue="2025-01-01"
dateFormat="yyyy-MM-dd"
onDidChange="(val) => console.log('Date selected:', val)"
/>
<Card when="{dateAfter.value}">
<Table data="/api/invoices/after/{dateAfter.value}">
<Column bindTo="name" header="Client"/>
<Column bindTo="issue_date" header="Issue Date">
{ window.formatDate($item.issue_date) }
</Column>
<Column header="Status">
<StatusBadge status="{$item.status}"/>
</Column>
<Column bindTo="total" header="Total">
${$item.total}
</Column>
</Table>
</Card>
</VStack>
</Component>
```
The `when` guards the [DatePicker](/components/DatePicker)'s `dateAfter`, so the `Table`
s `data` URL won't fire until its dependent variable is ready.
> [!INFO]
> You can use the `when` property on *any* XMLUI component to prevent it from rendering until some condition is true.
## Search everything
Here is `SearchEverything`. Try typing `a`, then `c`, then `m`, and watch the results converge dynamically on `Acme`.
```xmlui-pg height="400px" noHeader
---app
<App>
<SearchEverything />
</App>
---comp
<Component name="SearchEverything">
<VStack marginTop="1rem">
<TextBox
placeholder="Enter search term..."
width="25rem"
id="searchTerm"
/>
<DataSource id="clients" url="/resources/files/clients.json" />
<DataSource id="products" url="/resources/files/products.json" />
<DataSource id="allInvoices" url="/resources/files/invoices.json" />
<Fragment when="{searchTerm.value}">
<Card>
<VStack>
<Text>Found {window.filterSearchResults(clients, products, allInvoices, searchTerm.value).length} results for
"{searchTerm.value}":</Text>
<Table data="{window.filterSearchResults(clients, products, allInvoices, searchTerm.value)}">
<Column bindTo="table_name" header="Type" width="100px" />
<Column bindTo="title" header="Title" width="*" />
<Column bindTo="snippet" header="Match Details" width="3*" />
</Table>
</VStack>
</Card>
</Fragment>
</VStack>
</Component>
```
It's similar to `SearchInvoicesAfter`.
```xmlui /when=/
<Component name="SearchEverything">
<VStack paddingTop="$space-4">
<TextBox
placeholder="Enter search term..."
width="25rem"
id="searchTerm"
/>
<Card when="{searchTerm.value}">
<DataSource
id="search"
url="/api/search/{searchTerm.value}"
/>
<Text>Found {search.value ? search.value.length : 0} results for
"{searchTerm.value}":</Text>
<Table data="{search}">
<Column bindTo="table_name" header="Type" width="100px" />
<Column bindTo="title" header="Title" width="*" />
<Column bindTo="snippet" header="Match Details" width="3*" />
</Table>
</Card>
</VStack>
</Component>
```
```
--------------------------------------------------------------------------------
/docs/content/components/LineChart.md:
--------------------------------------------------------------------------------
```markdown
# LineChart [#linechart]
`LineChart` displays data as connected points over a continuous axis, ideal for showing trends, changes over time, or relationships between variables. Use it time series data, progress tracking, and comparing multiple data series on the same scale.
The LineChart component accommodates the size of its parent unless you set it explicitly:
```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
<Card height="240px" width="75%">
<LineChart
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
```xmlui-pg copy display height="300px" name="Example: dimension overwritten by LineChart" /height="240px"/ /height="200px"/
<Card height="240px">
<LineChart
height="200px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
/>
</Card>
```
**Key features:**
- **Flexible orientation**: Choose horizontal or vertical bar layouts
- **Multiple data series**: Display several metrics on the same chart with different colored bars
- **Stacked vs grouped**: Stack bars on top of each other or place them side by side
- **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
## Properties [#properties]
### `data` [#data]
The data to be displayed in the line chart.It needs to be an array of objects, where each object represents a data point.
### `hideTickX` (default: false) [#hidetickx-default-false]
Determines whether the X-axis ticks should be hidden. If set to (`true`), the ticks will not be displayed.
### `hideTickY` (default: false) [#hideticky-default-false]
Determines whether the Y-axis ticks should be hidden. If set to (`true`), the ticks will not be displayed.
### `hideTooltip` (default: false) [#hidetooltip-default-false]
Determines whether the tooltip should be hidden.If set to (`true`), no tooltip will be shown when hovering over data points.
### `hideX` (default: false) [#hidex-default-false]
Determines whether the X-axis should be hidden. If set to (`true`), the axis will not be displayed.
### `hideY` (default: false) [#hidey-default-false]
Determines whether the Y-axis should be hidden. If set to (`true`), the axis will not be displayed.
### `marginBottom` [#marginbottom]
The bottom margin of the chart
### `marginLeft` [#marginleft]
The left margin of the chart
### `marginRight` [#marginright]
The right margin of the chart
### `marginTop` [#margintop]
The top margin of the chart
### `showLegend` (default: false) [#showlegend-default-false]
Determines whether the legend should be displayed.
### `tickFormatterX` [#tickformatterx]
A function that formats the X-axis tick labels. It receives a tick value and returns a formatted string.
```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterX="{(value) => '(' + value + ')'}"
/>
</App>
```
### `tickFormatterY` [#tickformattery]
A function that formats the Y-axis tick labels. It receives a tick value and returns a formatted string.
```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
yKeys="{['A']}"
xKey="sprint"
tickFormatterY="{(value) => '$' + value}"
/>
</App>
```
### `tooltipTemplate` [#tooltiptemplate]
This property allows replacing the default template to display a tooltip.
```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
<App>
<LineChart
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
{ 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
{ 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
{ 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
]}"
yKeys="{['A', 'B']}"
xKey="sprint"
>
<property name="tooltipTemplate">
<VStack backgroundColor='white' padding="$space-2">
<Text fontWeight='bold'>{$tooltip.label}</Text>
<Items data="{$tooltip.payload}">
<HStack gap="$space-2" verticalAlignment="center">
<Stack
width="8px"
height="8px"
backgroundColor="{$item.color}" />
<Text>{$item.label}: {$item.value}</Text>
</HStack>
</Items>
</VStack>
</property>
</LineChart>
</App>
```
The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
- `$tooltip.label`: The label for the data point (typically the yKey value)
- `$tooltip.payload`: An object containing all data values for the hovered point
- `$tooltip.active`: Boolean indicating if the tooltip is currently active
### `xKey` [#xkey]
The key in the data objects used for labeling different data series.
### `yKeys` [#ykeys]
This property specifies the keys in the data objects that should be used for rendering the lines.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [width](../styles-and-themes/common-units/#size)-line-LineChart | 1px | 1px |
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/AttributeValueParser.test.ts:
--------------------------------------------------------------------------------
```typescript
import { assert, describe, expect, it } from "vitest";
import { parseAttributeValue } from "../../../src/components-core/script-runner/AttributeValueParser";
import type { Identifier, ObjectLiteral} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { T_IDENTIFIER } from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { T_OBJECT_LITERAL } from "../../../src/parsers/scripting/ScriptingNodeTypes";
describe("Attribute value parsing", () => {
it("Empty value", () => {
// --- Act
const source = "";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(0);
});
it("single string literal", () => {
// --- Act
const source = "hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
});
it("single expression value", () => {
// --- Act
const source = "{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![0].expr as Identifier).name).toBe("myId");
});
it("compound value #1", () => {
// --- Act
const source = "{myId}hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![0].expr as Identifier).name).toBe("myId");
expect(val.segments![1].expr).toBeUndefined();
expect(val.segments![1].literal).toBe("hello");
});
it("compound value #2", () => {
// --- Act
const source = "hello{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("myId");
});
it("compound value #3", () => {
// --- Act
const source = "hello{myId}world";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(3);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("myId");
expect(val.segments![2].expr).toBeUndefined();
expect(val.segments![2].literal).toBe("world");
});
it("value with escaped brace #1", () => {
// --- Act
const source = "\\{myId";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("{myId");
});
it("value with escaped brace #2", () => {
// --- Act
const source = "\\{myId}hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("{myId}hello");
});
it("value with escaped brace #3", () => {
// --- Act
const source = "hello\\{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello{myId}");
});
it("value with escaped brace #4", () => {
// --- Act
const source = "hello\\{myId}{world}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello{myId}");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("world");
});
it("value with unclosed brace", () => {
// --- Act
const source = "{myId";
try {
const val = parseAttributeValue(source)!;
} catch (err) {
expect(err.toString()).toContain("Unclosed");
return;
}
assert.fail("Exception expected");
});
it("object value #1", () => {
// --- Act
const source = "{{ from: from, to: to }}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_OBJECT_LITERAL);
expect((val.segments![0].expr as ObjectLiteral).props.length).toBe(2);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Carousel/Carousel.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./Carousel.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { createMetadata, d, dDidChange } from "../metadata-helpers";
import { CarouselComponent, defaultProps } from "./CarouselNative";
import { orientationOptionMd } from "../abstractions";
const COMP = "Carousel";
export const CarouselMd = createMetadata({
status: "stable",
description:
`This component displays a slideshow by cycling through elements (images, text, or ` +
`custom slides) like a carousel.`,
props: {
orientation: {
description:
"This property indicates the orientation of the carousel. The `horizontal` " +
"value indicates that the carousel moves horizontally, and the `vertical` " +
"value indicates that the carousel moves vertically.",
availableValues: orientationOptionMd,
valueType: "string",
defaultValue: defaultProps.orientation,
},
indicators: {
description: "Display the individual slides as buttons (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.indicators,
},
controls: {
description: "Display the previous/next controls (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.controls,
},
autoplay: {
description: "Start scrolling the carousel automatically (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.autoplay,
},
loop: {
description: "Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.",
valueType: "boolean",
defaultValue: defaultProps.loop,
},
startIndex: {
description: "The index of the first slide to display.",
valueType: "number",
defaultValue: defaultProps.startIndex,
},
transitionDuration: {
description: "The duration of the transition between slides.",
valueType: "number",
defaultValue: defaultProps.transitionDuration,
},
autoplayInterval: {
description: "Specifies the interval between autoplay transitions.",
valueType: "number",
defaultValue: defaultProps.autoplayInterval,
},
stopAutoplayOnInteraction: {
description: "This property indicates whether autoplay stops on user interaction.",
valueType: "boolean",
defaultValue: defaultProps.stopAutoplayOnInteraction,
},
prevIcon: {
description: "The icon to display for the previous control.",
valueType: "string",
},
nextIcon: {
description: "The icon to display for the next control.",
valueType: "string",
},
},
events: {
displayDidChange: dDidChange(COMP),
},
apis: {
canScrollPrev: {
description: `This method returns \`true\` if the carousel can scroll to the previous slide.`,
signature: "canScrollPrev(): boolean",
},
canScrollNext: {
description: `This method returns \`true\` if the carousel can scroll to the next slide.`,
signature: "canScrollNext(): boolean",
},
scrollTo: {
description: `This method scrolls the carousel to the specified slide index.`,
signature: "scrollTo(index: number): void",
parameters: {
index: "The index of the slide to scroll to.",
},
},
scrollPrev: {
signature: "scrollPrev(): void",
description: "This method scrolls the carousel to the previous slide.",
},
scrollNext: {
signature: "scrollNext(): void",
description: "This method scrolls the carousel to the next slide.",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-control-${COMP}`]: "$color-primary",
[`textColor-control-${COMP}`]: "$textColor",
[`backgroundColor-control-hover-${COMP}`]: "$color-primary",
[`textColor-control-hover-${COMP}`]: "$textColor",
[`backgroundColor-control-active-${COMP}`]: "$color-primary",
[`backgroundColor-control-disabled-${COMP}`]: "$color-surface-200",
[`textColor-control-disabled-${COMP}`]: "$textColor-disabled",
[`textColor-control-active-${COMP}`]: "$color-primary",
[`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
[`backgroundColor-indicator-active-${COMP}`]: "$color-primary",
[`textColor-indicator-${COMP}`]: "$color-primary",
[`textColor-indicator-active-${COMP}`]: "$color-primary",
[`backgroundColor-indicator-hover-${COMP}`]: "$color-surface-200",
[`textColor-indicator-hover-${COMP}`]: "$color-primary",
[`width-indicator-${COMP}`]: "25px",
[`height-indicator-${COMP}`]: "6px",
[`height-control-${COMP}`]: "36px",
[`width-control-${COMP}`]: "36px",
[`borderRadius-control-${COMP}`]: "50%",
[`height-${COMP}`]: "100%",
[`width-${COMP}`]: "100%",
},
});
export const carouselComponentRenderer = createComponentRenderer(
COMP,
CarouselMd,
({ node, renderChild, className, extractValue, lookupEventHandler, registerComponentApi }) => {
return (
<CarouselComponent
className={className}
stopAutoplayOnInteraction={extractValue.asOptionalBoolean(
node.props?.stopAutoplayOnInteraction,
)}
autoplayInterval={extractValue.asOptionalNumber(node.props?.autoplayInterval)}
transitionDuration={extractValue.asOptionalNumber(node.props?.transitionDuration)}
indicators={extractValue.asOptionalBoolean(node.props?.indicators)}
controls={extractValue.asOptionalBoolean(node.props?.controls)}
orientation={extractValue(node.props?.orientation)}
onDisplayDidChange={lookupEventHandler("displayDidChange")}
autoplay={extractValue.asOptionalBoolean(node.props?.autoplay)}
registerComponentApi={registerComponentApi}
loop={extractValue.asOptionalBoolean(node.props?.loop)}
startIndex={extractValue.asOptionalNumber(node.props?.startIndex)}
prevIcon={extractValue(node.props?.prevIcon)}
nextIcon={extractValue(node.props?.nextIcon)}
>
{renderChild(node.children)}
</CarouselComponent>
);
},
);
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/Carousel/Carousel.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./Carousel.module.scss";
import { createComponentRenderer, parseScssVar, createMetadata, d } from "xmlui";
const dDidChange = (componentName: string) => d(`This event is fired when the displayed content of the ${componentName} changes.`);
const orientationOptionMd = ["horizontal", "vertical"];
import { CarouselComponent, defaultProps } from "./CarouselNative";
const COMP = "CarouselNew";
export const CarouselMd = createMetadata({
status: "stable",
description:
`This component displays a slideshow by cycling through elements (images, text, or ` +
`custom slides) like a carousel.`,
props: {
orientation: {
description:
"This property indicates the orientation of the carousel. The `horizontal` " +
"value indicates that the carousel moves horizontally, and the `vertical` " +
"value indicates that the carousel moves vertically.",
availableValues: orientationOptionMd,
valueType: "string",
defaultValue: defaultProps.orientation,
},
indicators: {
description: "Display the individual slides as buttons (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.indicators,
},
controls: {
description: "Display the previous/next controls (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.controls,
},
autoplay: {
description: "Start scrolling the carousel automatically (`true`) or not (`false`).",
valueType: "boolean",
defaultValue: defaultProps.autoplay,
},
loop: {
description: "Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.",
valueType: "boolean",
defaultValue: defaultProps.loop,
},
startIndex: {
description: "The index of the first slide to display.",
valueType: "number",
defaultValue: defaultProps.startIndex,
},
transitionDuration: {
description: "The duration of the transition between slides.",
valueType: "number",
defaultValue: defaultProps.transitionDuration,
},
autoplayInterval: {
description: "Specifies the interval between autoplay transitions.",
valueType: "number",
defaultValue: defaultProps.autoplayInterval,
},
stopAutoplayOnInteraction: {
description: "This property indicates whether autoplay stops on user interaction.",
valueType: "boolean",
defaultValue: defaultProps.stopAutoplayOnInteraction,
},
prevIcon: {
description: "The icon to display for the previous control.",
valueType: "string",
},
nextIcon: {
description: "The icon to display for the next control.",
valueType: "string",
},
},
events: {
displayDidChange: dDidChange(COMP),
},
apis: {
canScrollPrev: {
description: `This method returns \`true\` if the carousel can scroll to the previous slide.`,
signature: "canScrollPrev(): boolean",
},
canScrollNext: {
description: `This method returns \`true\` if the carousel can scroll to the next slide.`,
signature: "canScrollNext(): boolean",
},
scrollTo: {
description: `This method scrolls the carousel to the specified slide index.`,
signature: "scrollTo(index: number): void",
parameters: {
index: "The index of the slide to scroll to.",
},
},
scrollPrev: {
signature: "scrollPrev(): void",
description: "This method scrolls the carousel to the previous slide.",
},
scrollNext: {
signature: "scrollNext(): void",
description: "This method scrolls the carousel to the next slide.",
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-control-${COMP}`]: "$color-primary",
[`textColor-control-${COMP}`]: "$textColor",
[`backgroundColor-control-hover-${COMP}`]: "$color-primary",
[`textColor-control-hover-${COMP}`]: "$textColor",
[`backgroundColor-control-active-${COMP}`]: "$color-primary",
[`backgroundColor-control-disabled-${COMP}`]: "$color-surface-200",
[`textColor-control-disabled-${COMP}`]: "$textColor-disabled",
[`textColor-control-active-${COMP}`]: "$color-primary",
[`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
[`backgroundColor-indicator-active-${COMP}`]: "$color-primary",
[`textColor-indicator-${COMP}`]: "$color-primary",
[`textColor-indicator-active-${COMP}`]: "$color-primary",
[`backgroundColor-indicator-hover-${COMP}`]: "$color-surface-200",
[`textColor-indicator-hover-${COMP}`]: "$color-primary",
[`width-indicator-${COMP}`]: "25px",
[`height-indicator-${COMP}`]: "6px",
[`height-control-${COMP}`]: "36px",
[`width-control-${COMP}`]: "36px",
[`borderRadius-control-${COMP}`]: "50%",
[`height-${COMP}`]: "100%",
[`width-${COMP}`]: "100%",
},
} as const);
export const carouselComponentRenderer = createComponentRenderer(
COMP,
CarouselMd,
({ node, renderChild, className, extractValue, lookupEventHandler, registerComponentApi }) => {
const props = (node.props as typeof CarouselMd.props)!;
return (
<CarouselComponent
className={className}
stopAutoplayOnInteraction={extractValue.asOptionalBoolean(
props.stopAutoplayOnInteraction,
)}
autoplayInterval={extractValue.asOptionalNumber(props.autoplayInterval)}
transitionDuration={extractValue.asOptionalNumber(props.transitionDuration)}
indicators={extractValue.asOptionalBoolean(props.indicators)}
controls={extractValue.asOptionalBoolean(props.controls)}
orientation={extractValue(props.orientation)}
onDisplayDidChange={lookupEventHandler("displayDidChange")}
autoplay={extractValue.asOptionalBoolean(props.autoplay)}
registerComponentApi={registerComponentApi}
loop={extractValue.asOptionalBoolean(props.loop)}
startIndex={extractValue.asOptionalNumber(props.startIndex)}
prevIcon={extractValue(props.prevIcon)}
nextIcon={extractValue(props.nextIcon)}
>
{renderChild(node.children)}
</CarouselComponent>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/FlowLayout/FlowLayoutNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
type CSSProperties,
type Dispatch,
type ForwardedRef,
forwardRef,
type ReactNode,
type SetStateAction,
createContext,
useContext,
useMemo,
useState,
} from "react";
import classnames from "classnames";
import { noop } from "lodash-es";
import styles from "./FlowLayout.module.scss";
import { useTheme } from "../../components-core/theming/ThemeContext";
import { normalizeCssValueForCalc, getSizeString } from "../../components-core/utils/css-utils";
import { useIsomorphicLayoutEffect, useMediaQuery } from "../../components-core/utils/hooks";
import { resolveLayoutProps } from "../../components-core/theming/layout-resolver";
import { useAppContext } from "../../components-core/AppContext";
type FlowItemProps = {
children: ReactNode;
width?: string | number;
minWidth?: string | number;
maxWidth?: string | number;
forceBreak?: boolean;
};
const resolvedCssVars: Record<string, any> = {};
interface IFlowLayoutContext {
rowGap: string | number;
columnGap: string | number;
setNumberOfChildren: Dispatch<SetStateAction<number>>;
}
const FlowLayoutContext = createContext<IFlowLayoutContext>({
rowGap: 0,
columnGap: 0,
setNumberOfChildren: noop,
});
export const FlowItemBreak = ({ force }: { force?: boolean }) => (
<div className={classnames(styles.break, { [styles.forceBreak]: force })} />
);
export const FlowItemWrapper = forwardRef(function FlowItemWrapper(
{ children, forceBreak, ...restProps }: FlowItemProps,
ref: any,
) {
const { rowGap, columnGap, setNumberOfChildren } = useContext(FlowLayoutContext);
const { mediaSize } = useAppContext();
useIsomorphicLayoutEffect(() => {
setNumberOfChildren((prev) => prev + 1);
return () => {
setNumberOfChildren((prev) => prev - 1);
};
}, [setNumberOfChildren]);
const { root } = useTheme();
const _width = restProps.width || "100%";
const _minWidth = restProps.minWidth || undefined;
const _maxWidth = restProps.maxWidth || undefined;
const {
width = _width,
minWidth,
maxWidth,
flex,
} = useMemo(() => {
return (
// --- New layout resolution
resolveLayoutProps(
{ width: _width, maxWidth: _maxWidth, minWidth: _minWidth },
{
type: "Stack",
orientation: "horizontal",
},
).cssProps || {}
// --- Old layout resolution
// compileLayout(
// { width: _width, maxWidth: _maxWidth, minWidth: _minWidth },
// activeTheme.themeVars,
// {
// type: "Stack",
// orientation: "horizontal",
// },
// ).cssProps || {}
);
}, [_maxWidth, _minWidth, _width]);
const resolvedWidth = useMemo(() => {
if (width && typeof width === "string" && width.startsWith("var(")) {
if (!resolvedCssVars[width]) {
const varName = width.substring(4, width.length - 1);
const resolved = getComputedStyle(root || document.body).getPropertyValue(varName);
resolvedCssVars[width] = resolved || _width;
}
return resolvedCssVars[width];
}
return width || _width;
}, [_width, root, width]);
const isWidthPercentage = typeof resolvedWidth === "string" && resolvedWidth.endsWith("%");
const _columnGap = normalizeCssValueForCalc(columnGap);
let responsiveWidth;
if(isWidthPercentage){
const percNumber = parseFloat(resolvedWidth);
if(mediaSize.sizeIndex <= 1){
let percentage = percNumber * 4;
if(percentage > 50){
responsiveWidth = `100%`
} else {
responsiveWidth = `min(${percentage}%, 100%)`
}
} else if(mediaSize.sizeIndex <= 2){
let percentage = percNumber * 3;
if(percentage >= 50 && percentage <= 75){
responsiveWidth = `50%`
} else if(percentage > 75){
responsiveWidth = `100%`
} else {
responsiveWidth = `min(${percentage}%, 100%)`
}
} else {
responsiveWidth = `min(${width}, 100%)`;
}
} else {
responsiveWidth = `min(calc(${width} + ${_columnGap}), 100%)`;
}
const outerWrapperStyle: CSSProperties = {
minWidth,
maxWidth,
width: responsiveWidth,
paddingBottom: rowGap,
flex,
};
const isStarSizing = flex !== undefined;
if (isStarSizing) {
//star sizing
outerWrapperStyle.width = "100%";
outerWrapperStyle.minWidth = minWidth || "1px";
}
return (
<>
<div
style={{ ...outerWrapperStyle, paddingRight: _columnGap }}
className={classnames(styles.flowItem, {
[styles.starSized]: isStarSizing,
})}
ref={ref}
>
{children}
</div>
{isStarSizing && <FlowItemBreak />}
</>
);
});
type FlowLayoutProps = {
style?: CSSProperties;
className?: string;
columnGap: string | number;
rowGap: string | number;
children: ReactNode;
};
export const defaultProps: Pick<FlowLayoutProps, "columnGap" | "rowGap"> = {
columnGap: "$gap-normal",
rowGap: "$gap-normal",
};
export const FlowLayout = forwardRef(function FlowLayout(
{ style, className, columnGap = 0, rowGap = 0, children, ...rest }: FlowLayoutProps,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
const [numberOfChildren, setNumberOfChildren] = useState(0);
const safeColumnGap = numberOfChildren === 1 ? 0 : columnGap;
// --- Be smart about rowGap
const _rowGap = getSizeString(rowGap);
const _columnGap = getSizeString(safeColumnGap);
const innerStyle = useMemo(
() => ({
// We put a negative margin on the container to fill the space for the row's last columnGap
marginRight: `calc(-1 * ${_columnGap})`,
marginBottom: `calc(-1 * ${_rowGap})`,
}),
[_columnGap, _rowGap],
);
const flowLayoutContextValue = useMemo(() => {
return {
rowGap: _rowGap,
columnGap: _columnGap,
setNumberOfChildren,
};
}, [_columnGap, _rowGap]);
return (
<FlowLayoutContext.Provider value={flowLayoutContextValue}>
<div style={style} className={className} ref={forwardedRef} {...rest}>
<div className={styles.outer}>
<div className={classnames(styles.flowContainer, styles.horizontal)} style={innerStyle}>
{children}
</div>
</div>
</div>
</FlowLayoutContext.Provider>
);
});
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/ModalDialog.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
import { composeRefs } from "@radix-ui/react-compose-refs";
import classnames from "classnames";
import * as Dialog from "@radix-ui/react-dialog";
import styles from "./ModalDialog.module.scss";
import { Button, Icon, useTheme } from "xmlui";
import { motion, AnimatePresence } from "framer-motion";
import { Tooltip } from "./Tooltip";
// =====================================================================================================================
// React component definition
type ModalProps = {
style?: CSSProperties;
className?: string;
children?: ReactNode;
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
popupPlayground: () => void;
clickPosition: { x: number; y: number };
};
const overlayVariants = {
visible: { opacity: 1 },
hidden: { opacity: 0 },
};
const contentVariants = {
initial: (custom: { x: number; y: number }) => ({
opacity: 0,
scale: 0.2,
x: custom.x - window.innerWidth / 2,
y: custom.y - window.innerHeight / 2,
}),
animate: {
opacity: 1,
scale: 1,
x: 0,
y: 0,
},
exit: {
opacity: 0,
scale: 0.2,
transition: { duration: 0.2 },
},
};
function durationToSeconds(durationString?: string) {
if (!durationString) {
return undefined;
}
const trimmedString = durationString.trim();
if (trimmedString.endsWith("ms")) {
const milliseconds = parseFloat(trimmedString);
return milliseconds / 1000;
} else if (trimmedString.endsWith("s")) {
return parseFloat(trimmedString);
} else {
return parseFloat(trimmedString);
}
}
export const ModalDialog = React.forwardRef(
({ children, style, isOpen, setIsOpen, popupPlayground, clickPosition }: ModalProps, ref) => {
const { root, getThemeVar } = useTheme();
const modalRef = useRef<HTMLDivElement>(null);
const composedRef = ref ? composeRefs(ref, modalRef) : modalRef;
const [rendered, setRendered] = useState(true);
useEffect(() => {
if (isOpen) {
modalRef.current?.focus();
}
}, [isOpen]);
// https://github.com/radix-ui/primitives/issues/2122#issuecomment-2140827998
useEffect(() => {
if (isOpen) {
// Pushing the change to the end of the call stack
const timer = setTimeout(() => {
document.body.style.pointerEvents = "";
}, 0);
return () => clearTimeout(timer);
} else {
document.body.style.pointerEvents = "auto";
}
}, [isOpen]);
if (!root) {
return null;
}
const onExitComplete = () => {
setIsOpen(false);
};
return (
<Dialog.Root defaultOpen={false} open={isOpen} onOpenChange={setRendered}>
<Dialog.Portal container={root}>
<AnimatePresence onExitComplete={onExitComplete}>
{rendered && (
<Dialog.Overlay className={styles.overlay} forceMount>
<motion.div
key="overlay"
className={styles.overlayBg}
variants={overlayVariants}
initial="hidden"
animate="visible"
exit="hidden"
transition={{
duration: 0.2,
ease: [0.16, 1, 0.3, 1],
}}
/>
<motion.div
className={styles.contentWrapper}
variants={contentVariants}
custom={{ x: clickPosition.x, y: clickPosition.y }}
initial="initial"
animate="animate"
exit="exit"
transition={{
duration:
durationToSeconds(getThemeVar("duration-startAnimation-ModalDialog")) || 0.8,
ease: [0.16, 1, 0.3, 1],
}}
>
<Dialog.Content
className={classnames(styles.content)}
forceMount
onPointerDownOutside={(event) => {
if (
event.target instanceof Element &&
event.target.closest("._debug-inspect-button") !== null
) {
//we prevent the auto modal close on clicking the inspect button
event.preventDefault();
}
}}
ref={composedRef}
style={{ ...style, gap: undefined }}
>
<Dialog.Title style={{ marginTop: 0 }}>
<header id="dialogTitle" className={styles.dialogTitle}>
<div className={styles.header}>
<Button variant={"ghost"} size={"sm"}>
Code
</Button>
<div className={styles.actions}>
<Tooltip label={"View and edit in new full-width window"}>
<Button
onClick={popupPlayground}
size={"xs"}
variant={"ghost"}
icon={<Icon name={"new-window"} />}
/>
</Tooltip>
<Tooltip label={"Close DevTools"}>
<Button
onClick={() => setRendered(false)}
size={"xs"}
variant={"ghost"}
icon={<Icon name={"close"} />}
/>
</Tooltip>
</div>
</div>
</header>
</Dialog.Title>
<div className={styles.innerContent} style={{ gap: style?.gap }}>
{children}
</div>
</Dialog.Content>
</motion.div>
</Dialog.Overlay>
)}
</AnimatePresence>
</Dialog.Portal>
</Dialog.Root>
);
},
);
ModalDialog.displayName = "ModalDialog";
```