This is page 34 of 181. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&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.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── layout-changes.md
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── 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
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── 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.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Toggle/Toggle.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { type ReactNode } from "react";
2 | import { useMemo } from "react";
3 | import React, {
4 | type CSSProperties,
5 | type ForwardedRef,
6 | forwardRef,
7 | useCallback,
8 | useEffect,
9 | } from "react";
10 | import classnames from "classnames";
11 |
12 | import styles from "./Toggle.module.scss";
13 |
14 | import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
15 | import { noop } from "../../components-core/constants";
16 | import { useEvent } from "../../components-core/utils/misc";
17 | import type { ValidationStatus } from "../abstractions";
18 | import { PART_INPUT } from "../../components-core/parts";
19 | import { composeRefs } from "@radix-ui/react-compose-refs";
20 |
21 |
22 | type ToggleProps = {
23 | id?: string;
24 | initialValue?: boolean;
25 | value?: boolean;
26 | enabled?: boolean;
27 | style?: CSSProperties;
28 | readOnly?: boolean;
29 | validationStatus?: ValidationStatus;
30 | updateState?: UpdateStateFn;
31 | onClick?: (event: React.MouseEvent) => void;
32 | onDidChange?: (newValue: boolean) => void;
33 | onFocus?: () => void;
34 | onBlur?: () => void;
35 | variant?: "checkbox" | "switch";
36 | indeterminate?: boolean;
37 | className?: string;
38 | required?: boolean;
39 | autoFocus?: boolean;
40 | registerComponentApi?: RegisterComponentApiFn;
41 | inputRenderer?: (contextVars: any, input?: ReactNode) => ReactNode;
42 | forceHover?: boolean;
43 | };
44 |
45 | export const defaultProps: Pick<
46 | ToggleProps,
47 | "initialValue" | "value" | "enabled" | "validationStatus" | "indeterminate"
48 | > = {
49 | initialValue: false,
50 | value: false,
51 | enabled: true,
52 | validationStatus: "none",
53 | indeterminate: false,
54 | };
55 |
56 | export const Toggle = forwardRef(function Toggle(
57 | {
58 | id,
59 | initialValue = defaultProps.initialValue,
60 | value = defaultProps.value,
61 | enabled = defaultProps.enabled,
62 | style,
63 | readOnly,
64 | validationStatus = defaultProps.validationStatus,
65 | updateState = noop,
66 | onClick = noop,
67 | onDidChange = noop,
68 | onFocus = noop,
69 | onBlur = noop,
70 | variant = "checkbox",
71 | indeterminate = defaultProps.indeterminate,
72 | className,
73 | required,
74 | autoFocus,
75 | registerComponentApi,
76 | inputRenderer,
77 | forceHover = false,
78 | ...rest
79 | }: ToggleProps,
80 | forwardedRef: ForwardedRef<HTMLInputElement>,
81 | ) {
82 | const innerRef = React.useRef<HTMLInputElement | null>(null);
83 | const ref = innerRef ? composeRefs(forwardedRef, innerRef) : forwardedRef;
84 |
85 | const transformToLegitValue = (inp: any): boolean => {
86 | if (typeof inp === "undefined" || inp === null) {
87 | return false;
88 | }
89 | if (typeof inp === "boolean") {
90 | return inp;
91 | }
92 | if (typeof inp === "number") {
93 | return !isNaN(inp) && !!inp;
94 | }
95 | if (typeof inp === "string") {
96 | return inp.trim() !== "" && inp.toLowerCase() !== "false";
97 | }
98 | if (Array.isArray(inp)) {
99 | return inp.length > 0;
100 | }
101 | if (typeof inp === "object") {
102 | return Object.keys(inp).length > 0;
103 | }
104 | return false;
105 | };
106 |
107 | useEffect(() => {
108 | updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
109 | }, [initialValue, updateState]);
110 |
111 | const updateValue = useCallback(
112 | (value: boolean) => {
113 | if (innerRef.current?.checked === value) return;
114 | updateState({ value });
115 | onDidChange(value);
116 | },
117 | [onDidChange, updateState],
118 | );
119 |
120 | const onInputChange = useCallback(
121 | (event: React.ChangeEvent<HTMLInputElement>) => {
122 | if (readOnly) {
123 | return;
124 | }
125 | updateState({ value: event.target.checked });
126 | onDidChange(event.target.checked);
127 | },
128 | [onDidChange, readOnly, updateState],
129 | );
130 |
131 | const handleOnFocus = useCallback(() => {
132 | onFocus?.();
133 | }, [onFocus]);
134 |
135 | const handleOnBlur = useCallback(() => {
136 | onBlur?.();
137 | }, [onBlur]);
138 |
139 | useEffect(() => {
140 | if (typeof indeterminate === "boolean" && innerRef.current) {
141 | innerRef.current.indeterminate = indeterminate;
142 | }
143 | }, [indeterminate]);
144 |
145 | const focus = useCallback(() => {
146 | innerRef.current?.focus();
147 | }, []);
148 |
149 | useEffect(() => {
150 | if (innerRef.current && autoFocus) {
151 | setTimeout(() => focus(), 0);
152 | }
153 | }, [focus, autoFocus]);
154 |
155 | const setValue = useEvent((newValue) => {
156 | updateValue(transformToLegitValue(newValue));
157 | });
158 |
159 | useEffect(() => {
160 | registerComponentApi?.({
161 | focus,
162 | setValue,
163 | });
164 | }, [focus, registerComponentApi, setValue]);
165 |
166 | const input = useMemo(() => {
167 | const legitValue = transformToLegitValue(value);
168 | return (
169 | <input
170 | {...rest}
171 | id={id}
172 | data-part-id={PART_INPUT}
173 | ref={ref}
174 | type="checkbox"
175 | role={variant}
176 | checked={legitValue}
177 | disabled={!enabled}
178 | required={required}
179 | readOnly={readOnly}
180 | aria-readonly={readOnly}
181 | aria-checked={indeterminate ? "mixed" : legitValue}
182 | aria-required={required}
183 | aria-disabled={!enabled}
184 | onClick={onClick}
185 | onChange={onInputChange}
186 | onFocus={handleOnFocus}
187 | onBlur={handleOnBlur}
188 | autoFocus={autoFocus}
189 | style={style}
190 | className={classnames(className, styles.resetAppearance, {
191 | [styles.checkbox]: variant === "checkbox",
192 | [styles.switch]: variant === "switch",
193 | [styles.error]: validationStatus === "error",
194 | [styles.warning]: validationStatus === "warning",
195 | [styles.valid]: validationStatus === "valid",
196 | [styles.forceHover]: forceHover,
197 | })}
198 | />
199 | );
200 | }, [
201 | rest,
202 | className,
203 | ref,
204 | style,
205 | id,
206 | enabled,
207 | handleOnBlur,
208 | handleOnFocus,
209 | onInputChange,
210 | onClick,
211 | readOnly,
212 | required,
213 | validationStatus,
214 | value,
215 | variant,
216 | indeterminate,
217 | autoFocus,
218 | forceHover,
219 | ]);
220 |
221 | return (
222 | inputRenderer ? (
223 | <label className={styles.label}>
224 | <div className={styles.inputContainer}>{input}</div>
225 | {inputRenderer({
226 | $checked: transformToLegitValue(value),
227 | $setChecked: setValue,
228 | })}
229 | </label>
230 | ) : (
231 | input
232 | )
233 | );
234 | });
235 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Queue/Queue.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { createComponentRenderer } from "../../components-core/renderers";
2 | import { MemoizedItem } from "../container-helpers";
3 | import { createMetadata, d } from "../metadata-helpers";
4 | import { Queue, defaultProps } from "./QueueNative";
5 |
6 | const COMP = "Queue";
7 |
8 | export const QueueMd = createMetadata({
9 | status: "stable",
10 | description:
11 | "`Queue` manages sequential processing of items in FIFO (first-in, first-out) " +
12 | "order. It is a non-visual component but provides UI progress reporting and result display.",
13 | props: {
14 | progressFeedback: d(
15 | "This property defines the component template of the UI that displays " +
16 | "progress information whenever, the queue's \`progressReport\` function " +
17 | "in invoked. If not set, no progress feedback is displayed.",
18 | ),
19 | resultFeedback: d(
20 | "This property defines the component template of the UI that displays result " +
21 | "information when the queue becomes empty after processing all queued items. If not set, " +
22 | "no result feedback is displayed.",
23 | ),
24 | clearAfterFinish: {
25 | description:
26 | `This property indicates the completed items (successful or error) should ` +
27 | `be removed from the queue after completion.`,
28 | defaultValue: defaultProps.clearAfterFinish,
29 | },
30 | },
31 | nonVisual: true,
32 | events: {
33 | willProcess: d(`This event is triggered to process a particular item.`),
34 | process: d(
35 | `This event is fired to process the next item in the queue. If the processing cannot ` +
36 | `proceed because of some error, raise an exception, and the queue will handle that.`,
37 | ),
38 | didProcess: d(
39 | `This event is fired when the processing of a queued item has been successfully processed.`,
40 | ),
41 | processError: d(
42 | `This event is fired when processing an item raises an error. The event handler method ` +
43 | `receives two parameters. The first is the error raised during the processing of the ` +
44 | `item; the second is an object with these properties:`,
45 | ),
46 | complete: d(
47 | `The queue fires this event when the queue gets empty after processing all items. ` +
48 | `The event handler has no arguments.`,
49 | ),
50 | },
51 | apis: {
52 | enqueueItem: {
53 | description: `This method enqueues the item passed in the method parameter. The new item will be ` +
54 | `processed after the current queue items have been handled. The method retrieves the ` +
55 | `unique ID of the newly added item; this ID can be used later in other methods, ` +
56 | `such as \`remove\`.`,
57 | signature: "enqueueItem(item: any): string",
58 | parameters: {
59 | item: "The item to enqueue.",
60 | },
61 | },
62 | enqueueItems: {
63 | description: `This method enqueues the array of items passed in the method parameter. The new items ` +
64 | `will be processed after the current queue items have been handled. The method ` +
65 | `retrieves an array of unique IDs, one for each new item. An item ID can be used later ` +
66 | `in other methods, such as \`remove\`.`,
67 | signature: "enqueueItems(items: any[]): string[]",
68 | parameters: {
69 | items: "The array of items to enqueue.",
70 | },
71 | },
72 | getQueuedItems: {
73 | description: `You can use this method to return the items in the queue. These items contain all ` +
74 | `entries not removed from the queue yet, including pending, in-progress, and ` +
75 | `completed items.`,
76 | signature: "getQueuedItems(): any[]",
77 | },
78 | getQueueLength: {
79 | description: `This method retrieves the current queue length. The queue contains only those items ` +
80 | `that are not fully processed yet.`,
81 | signature: "getQueueLength(): number",
82 | },
83 | remove: {
84 | description: `This method removes an item from the queue using its unique ID.`,
85 | signature: "remove(itemId: string): void",
86 | parameters: {
87 | itemId: "The unique ID of the item to remove.",
88 | },
89 | },
90 | },
91 | contextVars: {
92 | $completedItems: d(
93 | `A list containing the queue items that have been completed (fully processed).`,
94 | ),
95 | $queuedItems: d(
96 | `A list containing the items waiting in the queue, icluding the completed items.`,
97 | ),
98 | },
99 | });
100 |
101 | export const queueComponentRenderer = createComponentRenderer(
102 | COMP,
103 | QueueMd,
104 | ({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {
105 | return (
106 | <Queue
107 | registerComponentApi={registerComponentApi}
108 | renderResultFeedback={
109 | node.props.resultFeedback
110 | ? (completedItems, queuedItems) => {
111 | return (
112 | <MemoizedItem
113 | node={node.props.resultFeedback! as any}
114 | contextVars={{
115 | $completedItems: completedItems,
116 | $queuedItems: queuedItems,
117 | }}
118 | renderChild={renderChild}
119 | />
120 | );
121 | }
122 | : undefined
123 | }
124 | renderProgressFeedback={
125 | node.props.progressFeedback
126 | ? (completedItems, queuedItems) => {
127 | return (
128 | <MemoizedItem
129 | node={node.props.progressFeedback! as any}
130 | contextVars={{
131 | $completedItems: completedItems,
132 | $queuedItems: queuedItems,
133 | }}
134 | renderChild={renderChild}
135 | />
136 | );
137 | }
138 | : undefined
139 | }
140 | willProcessItem={lookupEventHandler("willProcess")}
141 | processItem={lookupEventHandler("process", { signError: false })}
142 | didProcessItem={lookupEventHandler("didProcess")}
143 | processItemError={lookupEventHandler("processError")}
144 | onComplete={lookupEventHandler("complete")}
145 | clearAfterFinish={extractValue.asOptionalBoolean(node.props.clearAfterFinish)}
146 | />
147 | );
148 | },
149 | );
150 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.md:
--------------------------------------------------------------------------------
```markdown
1 | %-DESC-START
2 |
3 | **Key features:**
4 | - **Date format support**: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
5 | - **Direct input**: Keyboard-only date entry with input fields for day, month, and year
6 | - **Input validation**: Real-time validation with visual feedback for invalid dates
7 | - **Range support**: Single date selection (default) or date range selection
8 | - **Accessibility**: Full keyboard navigation and screen reader support
9 |
10 | %-DESC-END
11 |
12 | %-API-START setValue
13 |
14 | ```xmlui-pg copy {3, 9, 12} display name="Example: setValue"
15 | <App>
16 | <HStack>
17 | <Button
18 | label="Set Date to 05/25/2024"
19 | onClick="picker.setValue('05/25/2024')" />
20 | <Button
21 | label="Clear Date"
22 | onClick="picker.setValue('')" />
23 | </HStack>
24 | <DateInput id="picker" />
25 | </App>
26 | ```
27 |
28 | %-API-END
29 |
30 | %-PROP-START initialValue
31 |
32 | ```xmlui-pg copy display name="Example: initialValue" height="120px"
33 | <App>
34 | <DateInput initialValue="05/25/2024" />
35 | </App>
36 | ```
37 |
38 | %-PROP-END
39 |
40 | %-PROP-START enabled
41 |
42 | ```xmlui-pg copy display name="Example: enabled" height="120px"
43 | <App>
44 | <DateInput enabled="false" initialValue="05/25/2024" />
45 | </App>
46 | ```
47 |
48 | %-PROP-END
49 |
50 | %-PROP-START validationStatus
51 |
52 | | Value | Description |
53 | | :-------- | :---------------------------------------------------- |
54 | | `valid` | Visual indicator for an input that is accepted |
55 | | `warning` | Visual indicator for an input that produced a warning |
56 | | `error` | Visual indicator for an input that produced an error |
57 |
58 | ```xmlui-pg copy display name="Example: validationStatus"
59 | <App>
60 | <DateInput validationStatus="valid" initialValue="05/25/2024" />
61 | <DateInput validationStatus="warning" initialValue="05/25/2024" />
62 | <DateInput validationStatus="error" initialValue="05/25/2024" />
63 | </App>
64 | ```
65 |
66 | %-PROP-END
67 |
68 | %-PROP-START dateFormat
69 |
70 | The `dateFormat` prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.
71 |
72 | > [!NOTE] Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.
73 |
74 | | Format | Description | Example |
75 | | :----- | :---------- | :------ |
76 | | `MM/dd/yyyy` | US format with slashes | 05/25/2024 |
77 | | `MM-dd-yyyy` | US format with dashes | 05-25-2024 |
78 | | `yyyy/MM/dd` | ISO-like format with slashes | 2024/05/25 |
79 | | `yyyy-MM-dd` | ISO format with dashes | 2024-05-25 |
80 | | `dd/MM/yyyy` | European format with slashes | 25/05/2024 |
81 | | `dd-MM-yyyy` | European format with dashes | 25-05-2024 |
82 | | `yyyyMMdd` | Compact format without separators | 20240525 |
83 | | `MMddyyyy` | US compact format | 05252024 |
84 |
85 | ```xmlui-pg copy display name="Example: dateFormat"
86 | <App>
87 | <DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
88 | <DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
89 | <DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
90 | <DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
91 | </App>
92 | ```
93 |
94 | %-PROP-END
95 |
96 | %-PROP-START clearable
97 |
98 | When enabled, it displays a clear button that allows users to reset the date input back to its initial value. Enter a date in this app and then click the clear button:
99 |
100 | ```xmlui-pg copy display name="Example: clearable" /clearable/
101 | <App>
102 | <DateInput initialValue="05/25/2024" />
103 | <DateInput clearable="true" initialValue="05/25/2024" />
104 | </App>
105 | ```
106 |
107 | %-PROP-END
108 |
109 | %-PROP-START clearIcon
110 |
111 | ```xmlui-pg copy display name="Example: clearIcon" /clearIcon/
112 | <App>
113 | <DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
114 | </App>
115 | ```
116 |
117 | %-PROP-END
118 |
119 | %-PROP-START clearToInitialValue
120 |
121 | When `true`, the clear button resets the input to its initial value. When `false`, it clears the input completely.
122 |
123 | ```xmlui-pg copy display name="Example: clearToInitialValue"
124 | <App>
125 | <DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
126 | <DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
127 | </App>
128 | ```
129 |
130 | %-PROP-END
131 |
132 | %-PROP-START mode
133 |
134 | Available values:
135 |
136 | | Value | Description |
137 | | --- | --- |
138 | | `single` | Single date selection **(default)** |
139 | | `range` | Date range selection |
140 |
141 | %-PROP-END
142 |
143 | %-PROP-START required
144 |
145 | Marks the date input as required for form validation.
146 |
147 | ```xmlui-pg copy display name="Example: required" height="120px"
148 | <App>
149 | <DateInput required="true" />
150 | </App>
151 | ```
152 |
153 | %-PROP-END
154 |
155 | %-PROP-START readOnly
156 |
157 | Makes the date input read-only. Users can see the value but cannot modify it.
158 |
159 | ```xmlui-pg copy display name="Example: readOnly" height="120px"
160 | <App>
161 | <DateInput readOnly="true" initialValue="05/25/2024" />
162 | </App>
163 | ```
164 |
165 | %-PROP-END
166 |
167 | %-PROP-START emptyCharacter
168 |
169 | Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.
170 |
171 | ```xmlui-pg copy display name="Example: emptyCharacter"
172 | <App>
173 | <DateInput emptyCharacter="." />
174 | <DateInput emptyCharacter="*" />
175 | <DateInput emptyCharacter="abc" />
176 | </App>
177 | ```
178 |
179 | %-PROP-END
180 |
181 | %-EVENT-START didChange
182 |
183 | Fired when the date value changes. Receives the new date value as a parameter.
184 |
185 | > [!INFO] The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.
186 |
187 | ```xmlui-pg copy {2} display name="Example: didChange" height="180px"
188 | <App var.selectedDate="No date selected">
189 | <Text value="{selectedDate}" />
190 | <DateInput
191 | dateFormat="yyyy-MM-dd"
192 | initialValue="2024-05-25"
193 | onDidChange="(date) => selectedDate = date" />
194 | </App>
195 | ```
196 |
197 | %-EVENT-END
198 |
199 | %-EVENT-START gotFocus
200 |
201 | Fired when the date input receives focus.
202 |
203 | ```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
204 | <App var.isFocused="{false}">
205 | <Text value="{isFocused
206 | ? 'DateInput focused' : 'DateInput lost focus'}"
207 | />
208 | <DateInput
209 | dateFormat="MM/dd/yyyy"
210 | onGotFocus="isFocused = true"
211 | onLostFocus="isFocused = false"
212 | initialValue="05/25/2024"
213 | />
214 | </App>
215 | ```
216 |
217 | %-EVENT-END
218 |
```
--------------------------------------------------------------------------------
/docs/public/pages/markup.md:
--------------------------------------------------------------------------------
```markdown
1 | # XML Markup
2 |
3 | When you write XML markup to create an XMLUI app, you use XML tags to name components. And you use XML attributes to set properties that govern their behavior.
4 |
5 | ## Properties
6 |
7 | An attribute may be a literal string that sets the value of a property.
8 |
9 | ```xmlui-pg name="A literal property" copy display
10 | <Text value="This is rendered as text." />
11 | ```
12 |
13 | ## Expressions
14 |
15 | An attribute may also be a JavaScript expression — enclosed in curly braces `{ }` — that dynamically sets the value of a property.
16 |
17 | ```xmlui-pg copy name="A dynamic property" display
18 | <Text value="Life, the universe, and everything: { 6 * 7 }" />
19 | ```
20 |
21 | An expression can hold a JSON list.
22 |
23 | ```xmlui-pg copy name="A JSON list" display /['Bakerloo', 'Central', 'Circle']/
24 | <Items data="{ ['Bakerloo', 'Central', 'Circle'] }" >
25 | <Text>{ $item }</Text>
26 | </Items>
27 | ```
28 |
29 | Or a complex JSON object, in which case you'll write an outer set of curly braces to introduce the expression and an inner set to define an object like this form's `data` property.
30 |
31 | ```xmlui-pg copy name="A complex JSON object" display /{ station: "Brixton", wifi: true, toilets: false }/
32 | <App>
33 | <Form id="searchForm" padding="0.5rem"
34 | data='{ { station: "Brixton", wifi: true, toilets: false } }'
35 | onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
36 | >
37 | <Text>Search for station amenities</Text>
38 | <HStack verticalAlignment="center" >
39 | <FormItem bindTo="station" />
40 | <FormItem
41 | type="checkbox"
42 | label="wifi"
43 | bindTo="wifi"
44 | labelPosition="start"
45 | />
46 | <FormItem
47 | type="checkbox"
48 | label="toilets"
49 | bindTo="toilets"
50 | labelPosition="start"
51 | />
52 | </HStack>
53 | <property name="buttonRowTemplate">
54 | <Button type="submit" icon="search" label="Search"/>
55 | </property>
56 | </Form>
57 |
58 | <TextArea id="preview" />
59 | </App>
60 | ```
61 |
62 | > [!INFO]
63 | > In addition to a literal string or an expression, you will sometimes use the special tag `<property>` to set a value using markup, like the `ButtonRowTemplate` that defines this form's button.
64 |
65 | ## Variables
66 |
67 | A component may declare a variable that's visible to itself and its children. Variable names start with a letter or an underscore (`_`) and continue with these characters or digits.
68 |
69 | You can declare a variable using the `var` prefix.
70 |
71 | ```xmlui-pg copy name="Declaring a variable with var" display
72 | <App var.stations="{ [ 'Bakerloo', 'Central', 'Circle'] }">
73 | <Items data="{stations}">
74 | <Text> {$item} </Text>
75 | </Items>
76 | </App>
77 | ```
78 |
79 | Or using the `<variable>` helper tag.
80 |
81 | ```xmlui-pg copy name="Declaring a variable with <variable>" display
82 | <App>
83 | <variable
84 | name="stations"
85 | value="{ [ 'Bakerloo', 'Central', 'Circle'] }" />
86 | <Items data="{stations}">
87 | <Text>{$item}</Text>
88 | </Items>
89 | </App>
90 | ```
91 |
92 | ### Nested variables
93 |
94 | The same variable name can be declared in nested scopes. The engine resolves the name to the variable in the closest (innermost) scope.
95 |
96 | ```xmlui-pg copy name="Defining and using nested variables" display
97 | <App var.title="var.title is 'Hello, from App!'">
98 | <H1>{title}</H1>
99 | <VStack var.title="var.title is 'Hello, from VStack'!">
100 | <Text>{title}</Text>
101 | </VStack>
102 | </App>
103 | ```
104 |
105 | ### Multiple instances
106 |
107 | <Text>Each counter is a separate instance of `CounterTest` with its own local component variables.</Text>
108 |
109 | ```xmlui-pg name="Isolated component instances"
110 | ---app display
111 | <App>
112 | <HStack horizontalAlignment="center">
113 | <VStack>
114 | <Text variant="caption">Counter Instance 1</Text>
115 | <CounterTest instance="1" />
116 | </VStack>
117 | <Stack width="10rem"/>
118 | <VStack>
119 | <Text variant="caption">Counter Instance 2</Text>
120 | <CounterTest instance="2" />
121 | </VStack>
122 | </HStack>
123 | </App>
124 | ---comp display
125 | <Component name="CounterTest" var.count="{0}">
126 | <Text>Counter ID: {$props.instance}</Text>
127 | <Text>Count: {count}</Text>
128 | <Button onClick="count = count + 1">
129 | Increment {$props.id}
130 | </Button>
131 | </Component>
132 | ```
133 |
134 | ### Reactive variables
135 |
136 | In [Reactive data binding](/reactive-intro) we saw how a `Select` can cause a `Table` to refresh by setting the `url` property of the `DataSource` on which the `Table` depends. Here's a more basic example of how components interact with reactive variables.
137 |
138 | ```xmlui-pg copy name="Defining and using reactive variables" display
139 | <App var.count="{0}" var.countTimes3="{3 * count}" >
140 | <Button
141 | label="Click to increment the count"
142 | onClick="count++" />
143 | <Text>Click count = {count} (changes directly)</Text>
144 | <Text>Click count * 3 = {countTimes3} (changes indirectly)</Text>
145 | </App>
146 | ```
147 |
148 | The `Button`'s click handler increments `count` directly. But because `countTimes3` is define using an expression that refers to `count`, the engine reevalautes that expression each time `count` changes and updates `countTimes3` indirectly.
149 |
150 | We've seen two ways to declare variables: a `var` declaration in an XML attribute, or the `variable` tag. A similar pattern applies to event handlers. The `Button` to increment the count declares its handler in an attribute whose name combines the `on` prefix with the name [click](/components/Button#click). You may also use the `<event>` helper tag with no prefix for the event name.
151 |
152 | ```xmlui-pg copy name="Declare an event handler using the <event> tag" display
153 | <App var.count="{0}" >
154 | <Button label="Click me! Click count = {count}">
155 | <event name="click">
156 | { count++ }
157 | </event>
158 | </Button>
159 | </App>
160 | ```
161 |
162 | > [!INFO]
163 | > Why use the `<event>` tag? In this example there's no reason to prefer it. But as we saw above, you declare a `Form`'s `buttonRowTemplate` property in XMLUI markup using the `<property>` helper tag. The same pattern applies when a button's handler is an XMLUI component like `<APICall>`.
164 | > ```xmlui copy
165 | > <Button label="Click to increment the count on the server">
166 | > <event name="click">
167 | > <APICall url="/count/increment" />
168 | > </event>
169 | > <Text>Click count = {count}</Text>
170 | > </Button>
171 | > ```
172 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/StyleContext.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import type { CSSProperties } from "react";
2 | import type React from "react";
3 | import { createContext, useContext, useEffect, useInsertionEffect, useMemo, useState } from "react";
4 | import type { StyleObjectType } from "./StyleRegistry";
5 | import { StyleRegistry } from "./StyleRegistry";
6 | import { EMPTY_OBJECT } from "../constants";
7 | import { useIndexerContext } from "../../components/App/IndexerContext";
8 |
9 | // The context is typed to hold either a StyleRegistry instance or null.
10 | const StyleContext = createContext<StyleRegistry | null>(null);
11 |
12 | type StyleProviderProps = {
13 | children: React.ReactNode;
14 | styleRegistry?: StyleRegistry;
15 | forceNew?: boolean; // Optional prop to force a new registry
16 | };
17 |
18 | /**
19 | * A "smart" provider that creates a StyleRegistry only if one doesn't
20 | * already exist in the context.
21 | */
22 | export function StyleProvider({
23 | children,
24 | styleRegistry = new StyleRegistry(),
25 | forceNew = false, // Optional prop to force a new registry
26 | }: StyleProviderProps) {
27 | // Check if a provider already exists above this one in the tree.
28 | const parentRegistry = useContext(StyleContext);
29 | // If we are the top-most provider, create a new registry for this tree.
30 | // On the client, this runs once. On the server, it runs once per request
31 | // IF this provider is at the root of the tree being rendered.
32 | // Use useState to create the registry instance.
33 | const [registry] = useState(() => {
34 | const newRegistry = styleRegistry;
35 |
36 | // This logic only runs on the CLIENT, once, when the registry is created.
37 | if (typeof window !== "undefined") {
38 | // 1. Find the style tag injected by the server.
39 | const ssrTag = document.querySelector('style[data-style-registry="true"]');
40 | // 2. Read the hashes from our custom data attribute.
41 | const ssrHashes = ssrTag?.getAttribute("data-ssr-hashes");
42 |
43 | if (ssrHashes) {
44 | // 3. Pre-populate the 'injected' set with all the server-rendered hashes.
45 | let hashes = ssrHashes.split(",");
46 | newRegistry.ssrHashes = new Set(hashes);
47 | newRegistry.injected = new Set(hashes);
48 | }
49 | }
50 |
51 | return newRegistry;
52 | });
53 |
54 | // If we're already inside a provider, don't do anything. Just render the children.
55 | // This makes nesting StyleProviders safe and harmless.
56 | if (parentRegistry && !forceNew) {
57 | return <>{children}</>;
58 | }
59 |
60 | return <StyleContext.Provider value={registry}>{children}</StyleContext.Provider>;
61 | }
62 |
63 | export function useStyleRegistry(): StyleRegistry {
64 | const registry = useContext(StyleContext);
65 | if (registry === null) {
66 | throw new Error("Component must be used within a StyleProvider");
67 | }
68 | return registry;
69 | }
70 |
71 | export function useComponentStyle(styles?: Record<string, CSSProperties[keyof CSSProperties]>) {
72 | const rootStyle = useMemo(() => {
73 | return (!styles || Object.keys(styles).length === 0)
74 | ? EMPTY_OBJECT
75 | : {
76 | "&": styles,
77 | // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
78 | };
79 | }, [styles]);
80 |
81 | return useStyles(rootStyle);
82 | }
83 |
84 | export const StyleInjectionTargetContext = createContext<Document | ShadowRoot | null>(null);
85 |
86 | export function useDomRoot(){
87 | const domRoot = useContext(StyleInjectionTargetContext);
88 | return domRoot;
89 | }
90 |
91 | type InjectOptions = {
92 | prepend?: boolean;
93 | }
94 | export function useStyles(styles: StyleObjectType, {prepend}: InjectOptions = EMPTY_OBJECT ): string {
95 | // we skip this whole thing if we're indexing
96 | const {indexing} = useIndexerContext();
97 | const domRoot = useDomRoot();
98 | const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head
99 | const registry = useStyleRegistry();
100 | const { className, styleHash } = useMemo(() => {
101 | if(indexing || !styles || styles === EMPTY_OBJECT || Object.keys(styles).length === 0) {
102 | return { className: undefined, styleHash: undefined };
103 | }
104 | return registry.register(styles);
105 | }, [indexing, registry, styles]);
106 |
107 | useInsertionEffect(() => {
108 | if (!styleHash || registry.injected.has(styleHash)) {
109 | return;
110 | }
111 |
112 | const { css } = registry.cache.get(styleHash) || {};
113 | if (css) {
114 | const styleElement = document.createElement("style");
115 | styleElement.setAttribute("data-style-hash", styleHash);
116 | styleElement.innerHTML = `@layer dynamic {\n${css}\n}`;
117 | if(prepend){
118 | injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
119 | } else {
120 | injectionTarget.appendChild(styleElement);
121 | }
122 |
123 | registry.injected.add(styleHash);
124 | }
125 | }, [registry, styleHash, injectionTarget]);
126 |
127 | // HOOK 2: For lifecycle management (reference counting and CLEANUP).
128 | useEffect(() => {
129 | if(!styleHash){
130 | return;
131 | }
132 | // On MOUNT, tell the registry that this component is using this style.
133 | registry.incrementRef(styleHash);
134 |
135 | // Return a cleanup function to run on UNMOUNT.
136 | return () => {
137 | registry.decrementRef(styleHash);
138 |
139 | // Schedule the cleanup check to run asynchronously.
140 | // This allows React's Strict Mode double-render to complete before
141 | // we check if the style tag should be removed.
142 | setTimeout(() => {
143 | // Only proceed with cleanup if...
144 | // 1. No other component is using this style (ref count is 0).
145 | // 2. This style was NOT part of the initial server render.
146 | if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
147 | // If it's still zero, it means no component re-mounted to claim this style.
148 | // Now it's safe to perform the cleanup.
149 | registry.injected.delete(styleHash);
150 | injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)?.remove();
151 | }
152 | }, 0); // A timeout of 0ms is sufficient to push this to the end of the event loop.
153 | };
154 | }, [injectionTarget, registry, styleHash]); // Dependency array ensures this runs once per style change.
155 |
156 | return className;
157 | }
158 |
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/lint.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type {
2 | ComponentDef,
3 | CompoundComponentDef,
4 | ComponentMetadata,
5 | } from "../../abstractions/ComponentDefs";
6 | import type { StandaloneAppDescription } from "../../components-core/abstractions/standalone";
7 | import { layoutOptionKeys } from "../../components-core/descriptorHelper";
8 | import { viewportSizeMd } from "../../components/abstractions";
9 | import type {
10 | ComponentMetadataProvider,
11 | MetadataProvider,
12 | } from "../../language-server/services/common/metadata-utils";
13 | import { CORE_NAMESPACE_VALUE } from "./transform";
14 |
15 | export enum LintSeverity {
16 | Skip,
17 | Warning,
18 | Error,
19 | }
20 |
21 | export enum LintDiagKind {
22 | UnrecognisedProp,
23 | }
24 |
25 | type Options = {
26 | severity: LintSeverity;
27 | };
28 |
29 | type LintDiagnostic = {
30 | message: string;
31 | kind: LintDiagKind;
32 | };
33 |
34 | export function getLintSeverity(lintSeverityOption: string | undefined): LintSeverity {
35 | if (!lintSeverityOption) {
36 | return LintSeverity.Warning;
37 | }
38 |
39 | let lintSeverity = LintSeverity.Warning;
40 | switch (lintSeverityOption.toLowerCase()) {
41 | case "warning":
42 | return LintSeverity.Warning;
43 | break;
44 | case "error":
45 | return LintSeverity.Error;
46 | break;
47 | case "skip":
48 | return LintSeverity.Skip;
49 | break;
50 | default:
51 | console.warn(
52 | `Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`,
53 | );
54 | return LintSeverity.Warning;
55 | break;
56 | }
57 | }
58 |
59 | export type ComponentLints = {
60 | lints: {
61 | message: string;
62 | kind: LintDiagKind;
63 | }[];
64 | componentName: string;
65 | };
66 |
67 | export function lintApp({
68 | appDef,
69 | metadataProvider,
70 | }: {
71 | appDef: StandaloneAppDescription;
72 | metadataProvider: MetadataProvider;
73 | }): ComponentLints[] {
74 | const entryPointLints: ComponentLints = {
75 | componentName: "Main",
76 | lints: lint({
77 | component: appDef.entryPoint,
78 | metadataProvider,
79 | }),
80 | };
81 |
82 | const compoundCompLints: ComponentLints[] = (appDef.components ?? []).map((c) => {
83 | const lints = lint({
84 | component: c,
85 | metadataProvider,
86 | });
87 | return { lints, componentName: c.name };
88 | });
89 |
90 | return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
91 | }
92 |
93 | export function printComponentLints(lintDiags: ComponentLints) {
94 | console.group(`Validation on '${lintDiags.componentName}':`);
95 |
96 | lintDiags.lints.forEach(({ message }) => {
97 | console.warn(message);
98 | });
99 | console.groupEnd();
100 | }
101 |
102 | export function lintErrorsComponent(lints: ComponentLints[]) {
103 | function makeComponent() {
104 | const errList = lints.map((lint, idx) => {
105 | return {
106 | type: "VStack",
107 | props: { gap: "0px" },
108 | children: [
109 | {
110 | type: "VStack",
111 | props: { backgroundColor: "lightgrey", padding: "10px" },
112 | children: [
113 | {
114 | type: "H2",
115 | props: {
116 | value: `#${idx + 1}: In component '${lint.componentName}':`,
117 | color: "$color-info",
118 | },
119 | },
120 | {
121 | type: "VStack",
122 | children: lint.lints.map(({ message }, msgIdx) => {
123 | return {
124 | type: "Text",
125 | props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" },
126 | };
127 | }),
128 | },
129 | ],
130 | },
131 | ],
132 | };
133 | });
134 | const comp: ComponentDef = {
135 | type: "VStack",
136 | props: { padding: "$padding-normal", gap: 0 },
137 | children: [
138 | {
139 | type: "H1",
140 | props: {
141 | value: `Errors found while checking Xmlui markup`,
142 | padding: "$padding-normal",
143 | backgroundColor: "$color-error",
144 | color: "white",
145 | },
146 | },
147 | {
148 | type: "VStack",
149 | props: {
150 | gap: "$gap-tight",
151 | padding: "$padding-normal",
152 | },
153 | children: errList,
154 | },
155 | ],
156 | };
157 | return comp;
158 | }
159 | return makeComponent() as ComponentDef;
160 | }
161 |
162 | export function lint({
163 | component,
164 | metadataProvider,
165 | }: {
166 | component: CompoundComponentDef | ComponentDef;
167 | metadataProvider: MetadataProvider;
168 | }): LintDiagnostic[] {
169 | if ("component" in component) {
170 | return lintHelp(component.component, metadataProvider, []);
171 | }
172 | return lintHelp(component, metadataProvider, []);
173 | }
174 |
175 | function lintHelp(
176 | component: ComponentDef,
177 | metadataProvider: MetadataProvider,
178 | acc: LintDiagnostic[],
179 | ) {
180 | const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE)
181 | ? component.type.slice(CORE_NAMESPACE_VALUE.length + 1)
182 | : component.type;
183 | const componentMdProvider = metadataProvider.getComponent(componentName);
184 |
185 | if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
186 | lintAttrs(component, componentMdProvider, acc);
187 | }
188 |
189 | if (!component.children) {
190 | return acc;
191 | }
192 |
193 | for (const child of component.children) {
194 | lintHelp(child, metadataProvider, acc);
195 | }
196 | return acc;
197 | }
198 |
199 | const implicitPropNames = layoutOptionKeys;
200 |
201 | function lintAttrs(
202 | component: ComponentDef,
203 | metadataForCurrentComponent: ComponentMetadataProvider,
204 | diags: LintDiagnostic[],
205 | ) {
206 | const invalidAttrNames = Object.keys(component.props ?? {}).filter(
207 | (name) => !metadataForCurrentComponent.getAttr(name),
208 | );
209 | const invalidEvents = Object.keys(component.events ?? {}).filter(
210 | (event) => !metadataForCurrentComponent.getEvent(event),
211 | );
212 | const invalidApis = Object.keys(component.api ?? {}).filter(
213 | (api) => !metadataForCurrentComponent.getApi(api),
214 | );
215 |
216 | invalidAttrNames.push(...invalidEvents);
217 | invalidAttrNames.push(...invalidApis);
218 |
219 | for (const invalidAttrName of invalidAttrNames) {
220 | diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
221 | }
222 | }
223 |
224 | function toUnrecognisedAttrDiag(component: ComponentDef, attr: string): LintDiagnostic {
225 | return {
226 | message: `Unrecognised property '${attr}' on component '${component.type}'.`,
227 | kind: LintDiagKind.UnrecognisedProp,
228 | };
229 | }
230 |
```
--------------------------------------------------------------------------------
/docs/content/components/Pagination.md:
--------------------------------------------------------------------------------
```markdown
1 | # Pagination [#pagination]
2 |
3 | `Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.
4 |
5 | ## Standalone [#standalone]
6 |
7 | If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:
8 |
9 | ```xmlui-pg copy display
10 | <App>
11 | <Pagination itemCount="100" pageSize="10" />
12 | </App>
13 | ```
14 |
15 | If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:
16 |
17 | ```xmlui-pg copy display
18 | <App>
19 | <Pagination hasPrevPage="true" hasNextPage="true" />
20 | </App>
21 | ```
22 |
23 | ## Integrations [#integrations]
24 |
25 | ### Table [#table]
26 |
27 | `Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.
28 |
29 | ```xmlui
30 | <Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
31 | <Column header="ID" bindTo="elem" width="80px">
32 | <!-- ... -->
33 | </Column>
34 | <!-- ... -->
35 | </Table>
36 | ```
37 |
38 | See the [Table reference](./Table#ispaginated-default-false) for a working example.
39 |
40 | ### List [#list]
41 |
42 | The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:
43 |
44 | ```xmlui
45 | <DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
46 | <Pagination
47 | itemCount="20"
48 | pageSize="{pageSize}"
49 | pageIndex="{currentPage}"
50 | onPageDidChange="(page, size, total) => {
51 | currentPage = page;
52 | before = page * size;
53 | after = before + size - 1;
54 | }"
55 | />
56 | <List data="{ds}" />
57 | ```
58 |
59 | For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).
60 |
61 | ## Properties [#properties]
62 |
63 | ### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
64 |
65 | Determines where to place the pagination button row in the layout.
66 |
67 | Available values: `start`, `center` **(default)**, `end`
68 |
69 | ### `enabled` (default: true) [#enabled-default-true]
70 |
71 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
72 |
73 | ### `hasNextPage` [#hasnextpage]
74 |
75 | Whether to disable the next page button. Only takes effect if itemCount is not provided.
76 |
77 | ### `hasPrevPage` [#hasprevpage]
78 |
79 | Whether to disable the previous page button. Only takes effect if itemCount is not provided.
80 |
81 | ### `itemCount` [#itemcount]
82 |
83 | Total number of items to paginate. If not provided, the component renders simplified pagination controls that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.
84 |
85 | ### `maxVisiblePages` (default: 1) [#maxvisiblepages-default-1]
86 |
87 | Maximum number of page buttons to display. If the value is not among the allowed values, it will fall back to the default.
88 |
89 | Available values: `1` **(default)**, `3`, `5`
90 |
91 | ### `orientation` [#orientation]
92 |
93 | Layout orientation of the pagination component
94 |
95 | Available values:
96 |
97 | | Value | Description |
98 | | --- | --- |
99 | | `horizontal` | The component will fill the available space horizontally |
100 | | `vertical` | The component will fill the available space vertically |
101 |
102 | ### `pageIndex` (default: 0) [#pageindex-default-0]
103 |
104 | Current page index (0-based)
105 |
106 | ### `pageInfoPosition` [#pageinfoposition]
107 |
108 | Determines where to place the page information in the layout.
109 |
110 | ### `pageSize` (default: 10) [#pagesize-default-10]
111 |
112 | Number of items per page
113 |
114 | ### `pageSizeOptions` [#pagesizeoptions]
115 |
116 | Array of page sizes the user can select from. If provided, shows a page size selector dropdown
117 |
118 | ### `pageSizeSelectorPosition` [#pagesizeselectorposition]
119 |
120 | Determines where to place the page size selector in the layout.
121 |
122 | ### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
123 |
124 | Whether to show the current page indicator
125 |
126 | ### `showPageInfo` (default: true) [#showpageinfo-default-true]
127 |
128 | Whether to show page information
129 |
130 | ### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
131 |
132 | Whether to show the page size selector
133 |
134 | ## Events [#events]
135 |
136 | ### `pageDidChange` [#pagedidchange]
137 |
138 | Fired when the current page changes
139 |
140 | ### `pageSizeDidChange` [#pagesizedidchange]
141 |
142 | Fired when the page size changes
143 |
144 | ## Exposed Methods [#exposed-methods]
145 |
146 | ### `currentPage` [#currentpage]
147 |
148 | Gets the current page number (1-based)
149 |
150 | ### `currentPageSize` [#currentpagesize]
151 |
152 | Gets the current page size
153 |
154 | ### `moveFirst` [#movefirst]
155 |
156 | Moves to the first page
157 |
158 | **Signature**: `moveFirst(): void`
159 |
160 | ### `moveLast` [#movelast]
161 |
162 | Moves to the last page
163 |
164 | **Signature**: `moveLast(): void`
165 |
166 | ### `moveNext` [#movenext]
167 |
168 | Moves to the next page
169 |
170 | **Signature**: `moveNext(): void`
171 |
172 | ### `movePrev` [#moveprev]
173 |
174 | Moves to the previous page
175 |
176 | **Signature**: `movePrev(): void`
177 |
178 | ## Styling [#styling]
179 |
180 | ### Theme Variables [#theme-variables]
181 |
182 | | Variable | Default Value (Light) | Default Value (Dark) |
183 | | --- | --- | --- |
184 | | [backgroundColor](../styles-and-themes/common-units/#color)-Pagination | transparent | transparent |
185 | | [backgroundColor](../styles-and-themes/common-units/#color)-selector-Pagination | transparent | transparent |
186 | | [borderColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-300 | $color-gray-300 |
187 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-selector-Pagination | $borderRadius | $borderRadius |
188 | | [gap](../styles-and-themes/common-units/#size)-buttonRow-Pagination | $space-2 | $space-2 |
189 | | [padding](../styles-and-themes/common-units/#size)-Pagination | $space-4 | $space-4 |
190 | | [textColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-600 | $color-gray-600 |
191 | | [textColor](../styles-and-themes/common-units/#color)-selector-Pagination | $color-gray-600 | $color-gray-600 |
192 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 |
3 | import { createEvalContext, parseStatements } from "./test-helpers";
4 | import {
5 | ArrowExpressionStatement,
6 | ExpressionStatement,
7 | T_ARROW_EXPRESSION_STATEMENT,
8 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
9 | import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
10 |
11 | describe("Function proxies", () => {
12 | it("Array.prototype.filter #1", async () => {
13 | // --- Arrange
14 | const source =
15 | "(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
16 | const evalContext = createEvalContext({
17 | localContext: {
18 | items: [
19 | {
20 | name: "item1",
21 | parentId: "",
22 | },
23 | {
24 | name: "item2",
25 | parentId: "my-parent-id",
26 | },
27 | ],
28 | },
29 | eventArgs: [{ pathParams: { nodeId: "" } }],
30 | });
31 | const statements = parseStatements(source);
32 | const arrowStmt = {
33 | type: T_ARROW_EXPRESSION_STATEMENT,
34 | expr: (statements[0] as ExpressionStatement).expr,
35 | } as ArrowExpressionStatement;
36 | await processStatementQueueAsync([arrowStmt], evalContext);
37 | // --- Assert
38 | const thread = evalContext.mainThread!;
39 | expect(thread.blocks!.length).equal(1);
40 | expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
41 | });
42 |
43 | it("Array.prototype.forEach #1", async () => {
44 | // --- Arrange
45 | const source = `()=> {
46 | const result = [];
47 | items.forEach((item) => {
48 | result.push(item * 2)
49 | });
50 | return result;
51 | }`;
52 | const evalContext = createEvalContext({
53 | localContext: {
54 | items: [2, 3],
55 | },
56 | eventArgs: [],
57 | });
58 | const statements = parseStatements(source);
59 | const arrowStmt = {
60 | type: T_ARROW_EXPRESSION_STATEMENT,
61 | expr: (statements[0] as ExpressionStatement).expr,
62 | } as ArrowExpressionStatement;
63 | await processStatementQueueAsync([arrowStmt], evalContext);
64 | // --- Assert
65 | const thread = evalContext.mainThread!;
66 | expect(thread.blocks![0].returnValue).eql([4, 6]);
67 | });
68 |
69 | it("Array.prototype.map #1", async () => {
70 | // --- Arrange
71 | const source = `()=> {
72 | return items.map((item) => {
73 | return item *= 2;
74 | });
75 | }`;
76 | const evalContext = createEvalContext({
77 | localContext: {
78 | items: [2, 3],
79 | },
80 | });
81 | const statements = parseStatements(source);
82 | const arrowStmt = {
83 | type: T_ARROW_EXPRESSION_STATEMENT,
84 | expr: (statements[0] as ExpressionStatement).expr,
85 | } as ArrowExpressionStatement;
86 | await processStatementQueueAsync([arrowStmt], evalContext);
87 | // --- Assert
88 | const thread = evalContext.mainThread!;
89 | expect(thread.blocks![0].returnValue).eql([4, 6]);
90 | });
91 |
92 | it("Array.prototype.every #1", async () => {
93 | // --- Arrange
94 | const source = `(params)=> {
95 | return items.every((item) => { return item.parentId === params.pathParams.nodeId}
96 | );
97 | }`;
98 | const evalContext = createEvalContext({
99 | localContext: {
100 | items: [
101 | {
102 | name: "item1",
103 | parentId: "",
104 | },
105 | {
106 | name: "item2",
107 | parentId: "my-parent-id",
108 | },
109 | ],
110 | },
111 | eventArgs: [{ pathParams: { nodeId: "" } }],
112 | });
113 | const statements = parseStatements(source);
114 | const arrowStmt = {
115 | type: T_ARROW_EXPRESSION_STATEMENT,
116 | expr: (statements[0] as ExpressionStatement).expr,
117 | } as ArrowExpressionStatement;
118 | await processStatementQueueAsync([arrowStmt], evalContext);
119 | // --- Assert
120 | const thread = evalContext.mainThread!;
121 | expect(thread.blocks!.length).equal(1);
122 | expect(thread.blocks![0].returnValue).eql(false);
123 | });
124 |
125 | it("Array.prototype.findIndex #1", async () => {
126 | // --- Arrange
127 | const source = `(params)=> {
128 | return items.findIndex((item) => item > 5)
129 | }`;
130 | const evalContext = createEvalContext({
131 | localContext: {
132 | items: [2, 6, 1],
133 | },
134 | });
135 | const statements = parseStatements(source);
136 | const arrowStmt = {
137 | type: T_ARROW_EXPRESSION_STATEMENT,
138 | expr: (statements[0] as ExpressionStatement).expr,
139 | } as ArrowExpressionStatement;
140 | await processStatementQueueAsync([arrowStmt], evalContext);
141 | // --- Assert
142 | const thread = evalContext.mainThread!;
143 | expect(thread.blocks!.length).equal(1);
144 | expect(thread.blocks![0].returnValue).eql(1);
145 | });
146 |
147 | it("Array.prototype.find #1", async () => {
148 | // --- Arrange
149 | const source = `(params)=> {
150 | return items.find((item) => item > 4);
151 | }`;
152 | const evalContext = createEvalContext({
153 | localContext: {
154 | items: [1, 2, 3, 4, 5, 6],
155 | },
156 | eventArgs: [{ pathParams: { nodeId: "" } }],
157 | });
158 | const statements = parseStatements(source);
159 | const arrowStmt = {
160 | type: T_ARROW_EXPRESSION_STATEMENT,
161 | expr: (statements[0] as ExpressionStatement).expr,
162 | } as ArrowExpressionStatement;
163 | await processStatementQueueAsync([arrowStmt], evalContext);
164 | // --- Assert
165 | const thread = evalContext.mainThread!;
166 | expect(thread.blocks!.length).equal(1);
167 | expect(thread.blocks![0].returnValue).eql(5);
168 | });
169 |
170 | it("Array.prototype.flatMap #1", async () => {
171 | // --- Arrange
172 | const source = `(params)=> {
173 | return items.flatMap((item) => item > 4 ? [4, 4] : 1);
174 | }`;
175 | const evalContext = createEvalContext({
176 | localContext: {
177 | items: [5, 3, 2],
178 | },
179 | eventArgs: [{ pathParams: { nodeId: "" } }],
180 | });
181 | const statements = parseStatements(source);
182 | const arrowStmt = {
183 | type: T_ARROW_EXPRESSION_STATEMENT,
184 | expr: (statements[0] as ExpressionStatement).expr,
185 | } as ArrowExpressionStatement;
186 | await processStatementQueueAsync([arrowStmt], evalContext);
187 | // --- Assert
188 | const thread = evalContext.mainThread!;
189 | expect(thread.blocks!.length).equal(1);
190 | expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
191 | });
192 | });
193 |
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 |
3 | import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
4 | import { createEvalContext, parseStatements } from "./test-helpers";
5 | import {
6 | ArrowExpressionStatement,
7 | ExpressionStatement,
8 | T_ARROW_EXPRESSION_STATEMENT,
9 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
10 |
11 | describe("Function proxies (exp)", () => {
12 | it("Array.prototype.filter #1", async () => {
13 | // --- Arrange
14 | const source =
15 | "(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
16 | const evalContext = createEvalContext({
17 | localContext: {
18 | items: [
19 | {
20 | name: "item1",
21 | parentId: "",
22 | },
23 | {
24 | name: "item2",
25 | parentId: "my-parent-id",
26 | },
27 | ],
28 | },
29 | eventArgs: [{ pathParams: { nodeId: "" } }],
30 | });
31 | const statements = parseStatements(source);
32 | const arrowStmt = {
33 | type: T_ARROW_EXPRESSION_STATEMENT,
34 | expr: (statements[0] as ExpressionStatement).expr,
35 | } as ArrowExpressionStatement;
36 | await processStatementQueueAsync([arrowStmt], evalContext);
37 | // --- Assert
38 | const thread = evalContext.mainThread!;
39 | expect(thread.blocks!.length).equal(1);
40 | expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
41 | });
42 |
43 | it("Array.prototype.forEach #1", async () => {
44 | // --- Arrange
45 | const source = `()=> {
46 | const result = [];
47 | items.forEach((item) => {
48 | result.push(item * 2)
49 | });
50 | return result;
51 | }`;
52 | const evalContext = createEvalContext({
53 | localContext: {
54 | items: [2, 3],
55 | },
56 | eventArgs: [],
57 | });
58 | const statements = parseStatements(source);
59 | const arrowStmt = {
60 | type: T_ARROW_EXPRESSION_STATEMENT,
61 | expr: (statements[0] as ExpressionStatement).expr,
62 | } as ArrowExpressionStatement;
63 | await processStatementQueueAsync([arrowStmt], evalContext);
64 | // --- Assert
65 | const thread = evalContext.mainThread!;
66 | expect(thread.blocks![0].returnValue).eql([4, 6]);
67 | });
68 |
69 | it("Array.prototype.map #1", async () => {
70 | // --- Arrange
71 | const source = `()=> {
72 | return items.map((item) => {
73 | return item *= 2;
74 | });
75 | }`;
76 | const evalContext = createEvalContext({
77 | localContext: {
78 | items: [2, 3],
79 | },
80 | });
81 | const statements = parseStatements(source);
82 | const arrowStmt = {
83 | type: T_ARROW_EXPRESSION_STATEMENT,
84 | expr: (statements[0] as ExpressionStatement).expr,
85 | } as ArrowExpressionStatement;
86 | await processStatementQueueAsync([arrowStmt], evalContext);
87 | // --- Assert
88 | const thread = evalContext.mainThread!;
89 | expect(thread.blocks![0].returnValue).eql([4, 6]);
90 | });
91 |
92 | it("Array.prototype.every #1", async () => {
93 | // --- Arrange
94 | const source = `(params)=> {
95 | return items.every((item) => { return item.parentId === params.pathParams.nodeId}
96 | );
97 | }`;
98 | const evalContext = createEvalContext({
99 | localContext: {
100 | items: [
101 | {
102 | name: "item1",
103 | parentId: "",
104 | },
105 | {
106 | name: "item2",
107 | parentId: "my-parent-id",
108 | },
109 | ],
110 | },
111 | eventArgs: [{ pathParams: { nodeId: "" } }],
112 | });
113 | const statements = parseStatements(source);
114 | const arrowStmt = {
115 | type: T_ARROW_EXPRESSION_STATEMENT,
116 | expr: (statements[0] as ExpressionStatement).expr,
117 | } as ArrowExpressionStatement;
118 | await processStatementQueueAsync([arrowStmt], evalContext);
119 | // --- Assert
120 | const thread = evalContext.mainThread!;
121 | expect(thread.blocks!.length).equal(1);
122 | expect(thread.blocks![0].returnValue).eql(false);
123 | });
124 |
125 | it("Array.prototype.findIndex #1", async () => {
126 | // --- Arrange
127 | const source = `(params)=> {
128 | return items.findIndex((item) => item > 5)
129 | }`;
130 | const evalContext = createEvalContext({
131 | localContext: {
132 | items: [2, 6, 1],
133 | },
134 | });
135 | const statements = parseStatements(source);
136 | const arrowStmt = {
137 | type: T_ARROW_EXPRESSION_STATEMENT,
138 | expr: (statements[0] as ExpressionStatement).expr,
139 | } as ArrowExpressionStatement;
140 | await processStatementQueueAsync([arrowStmt], evalContext);
141 | // --- Assert
142 | const thread = evalContext.mainThread!;
143 | expect(thread.blocks!.length).equal(1);
144 | expect(thread.blocks![0].returnValue).eql(1);
145 | });
146 |
147 | it("Array.prototype.find #1", async () => {
148 | // --- Arrange
149 | const source = `(params)=> {
150 | return items.find((item) => item > 4);
151 | }`;
152 | const evalContext = createEvalContext({
153 | localContext: {
154 | items: [1, 2, 3, 4, 5, 6],
155 | },
156 | eventArgs: [{ pathParams: { nodeId: "" } }],
157 | });
158 | const statements = parseStatements(source);
159 | const arrowStmt = {
160 | type: T_ARROW_EXPRESSION_STATEMENT,
161 | expr: (statements[0] as ExpressionStatement).expr,
162 | } as ArrowExpressionStatement;
163 | await processStatementQueueAsync([arrowStmt], evalContext);
164 | // --- Assert
165 | const thread = evalContext.mainThread!;
166 | expect(thread.blocks!.length).equal(1);
167 | expect(thread.blocks![0].returnValue).eql(5);
168 | });
169 |
170 | it("Array.prototype.flatMap #1", async () => {
171 | // --- Arrange
172 | const source = `(params)=> {
173 | return items.flatMap((item) => item > 4 ? [4, 4] : 1);
174 | }`;
175 | const evalContext = createEvalContext({
176 | localContext: {
177 | items: [5, 3, 2],
178 | },
179 | eventArgs: [{ pathParams: { nodeId: "" } }],
180 | });
181 | const statements = parseStatements(source);
182 | const arrowStmt = {
183 | type: T_ARROW_EXPRESSION_STATEMENT,
184 | expr: (statements[0] as ExpressionStatement).expr,
185 | } as ArrowExpressionStatement;
186 | await processStatementQueueAsync([arrowStmt], evalContext);
187 | // --- Assert
188 | const thread = evalContext.mainThread!;
189 | expect(thread.blocks!.length).equal(1);
190 | expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
191 | });
192 | });
193 |
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/WindowsAppFrame.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./WindowsAppFrame.module.scss";
2 | import type { ReactNode } from "react";
3 | import { forwardRef } from "react";
4 |
5 | export const ToolBar = (props) => {
6 | return (
7 | <div className={styles.toolbar}>
8 | <div className={styles.topInfo}>
9 | <div className={styles.uicon} style={{ margin: "0 10px 0 6px" }}>
10 | <div style={{ width: 14 }}>
11 | <svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
12 | <path
13 | 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"
14 | fill="#3367CC"
15 | />
16 | <path
17 | 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"
18 | fill="#3367CC"
19 | />
20 | <path
21 | fillRule="evenodd"
22 | d="M23.4228 1.14092H1.11508V23.7013H23.4228V1.14092ZM0.730469 0.751953V24.0903H23.8074V0.751953H0.730469Z"
23 | fill="#3367CC"
24 | />
25 | </svg>
26 | </div>
27 | </div>
28 | <div className={styles.appFullName}>XMLUI</div>
29 | </div>
30 | <div className={styles.actbtns}>
31 | <div className={`${styles.uicon} ${styles.prtclk}`}>
32 | <div style={{ width: 12, height: 12 }}>
33 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
34 | <g id="l192sq9Ma1sM2oXLQ331nvD" fill="rgb(0,0,0)">
35 | <g>
36 | <path
37 | id="pf2evWQPs"
38 | 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"
39 | ></path>
40 | </g>
41 | </g>
42 | </svg>
43 | </div>
44 | </div>
45 | <div className={`${styles.uicon} ${styles.prtclk}`}>
46 | <div style={{ width: 12, height: 12 }}>
47 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
48 | <g id="lld67zMMrGguqZbYTM5KDT" fill="rgb(0,0,0)">
49 | <g>
50 | <path
51 | id="pJNFf1TAf"
52 | 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"
53 | ></path>
54 | </g>
55 | </g>
56 | </svg>
57 | </div>
58 | </div>
59 | <div className={`${styles.uicon} ${styles.closeBtn} ${styles.prtclk}`}>
60 | <div style={{ width: 14, height: 14 }}>
61 | <svg
62 | version="1.0"
63 | xmlns="http://www.w3.org/2000/svg"
64 | viewBox="0 0 512 512"
65 | preserveAspectRatio="xMidYMid meet"
66 | >
67 | <g fill="#000000">
68 | <path
69 | 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" />
70 | </g>
71 | </svg>
72 | </div>
73 | </div>
74 | </div>
75 | </div>
76 | );
77 | };
78 |
79 | export const WindowsAppFrame = forwardRef(({ children }: { children: ReactNode }, ref) => {
80 | return (
81 | <div className={styles.notepad} ref={ref as any}>
82 | <ToolBar />
83 | <div className={styles.windowScreen}>
84 | <div className={styles.topBar}>
85 | <div className={styles.topBarItem}>File</div>
86 | <div className={styles.topBarItem}>Edit</div>
87 | <div className={styles.topBarItem}>View</div>
88 | </div>
89 | <div className={styles.restWindow}>
90 | <div className={styles.noteText}>{children}</div>
91 | </div>
92 | </div>
93 | </div>
94 | );
95 | });
96 |
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTopNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { forwardRef, useEffect, useState, useCallback } from "react";
2 | import { Icon } from "xmlui";
3 | import classnames from "classnames";
4 | import styles from "./ScrollToTop.module.scss";
5 |
6 | type Props = {
7 | position?: "start" | "center" | "end";
8 | visible?: boolean;
9 | threshold?: number;
10 | icon?: string;
11 | behavior?: "smooth" | "instant" | "auto";
12 | onClick?: () => void;
13 | className?: string;
14 | style?: React.CSSProperties;
15 | };
16 |
17 | export const defaultProps: Pick<Props, "position" | "visible" | "threshold" | "icon" | "behavior"> = {
18 | position: "end",
19 | visible: true,
20 | threshold: 300,
21 | icon: "chevronup",
22 | behavior: "smooth",
23 | };
24 |
25 | export const ScrollToTop = forwardRef<HTMLButtonElement, Props>(
26 | function ScrollToTop(
27 | {
28 | position = defaultProps.position,
29 | visible = defaultProps.visible,
30 | threshold = defaultProps.threshold,
31 | icon = defaultProps.icon,
32 | behavior = defaultProps.behavior,
33 | onClick,
34 | className,
35 | style,
36 | }: Props,
37 | ref,
38 | ) {
39 | const [isVisible, setIsVisible] = useState(false);
40 |
41 | // Validate position and fall back to "end" if invalid
42 | const validPosition = ["start", "center", "end"].includes(position || "") ? position : "end";
43 |
44 | // Validate behavior and fall back to "smooth" if invalid
45 | const validBehavior = ["smooth", "instant", "auto"].includes(behavior || "") ? behavior : "smooth";
46 |
47 | // Check scroll position to determine visibility
48 | useEffect(() => {
49 | if (!visible) {
50 | setIsVisible(false);
51 | return;
52 | }
53 |
54 | const handleScroll = () => {
55 | // Check multiple possible scroll containers using the same logic as scroll-to-top
56 | const windowScrollTop = window.pageYOffset || document.documentElement.scrollTop;
57 | const bodyScrollTop = document.body.scrollTop;
58 |
59 | let maxScrollTop = Math.max(windowScrollTop, bodyScrollTop);
60 |
61 | // Check all elements that might be scrolled (same as in handleClick)
62 | const allElements = document.querySelectorAll('*');
63 | allElements.forEach((element) => {
64 | if (element instanceof HTMLElement && element.scrollTop > 0) {
65 | maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
66 | }
67 | });
68 |
69 | // Also check common XMLUI containers
70 | const xmluiContainers = document.querySelectorAll(
71 | '.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
72 | );
73 | xmluiContainers.forEach((element) => {
74 | if (element instanceof HTMLElement) {
75 | maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
76 | }
77 | });
78 |
79 | // If threshold is 0, show the button regardless of scroll position
80 | if (threshold === 0) {
81 | setIsVisible(true);
82 | } else {
83 | setIsVisible(maxScrollTop > (threshold || 0));
84 | }
85 | };
86 |
87 | window.addEventListener("scroll", handleScroll);
88 | document.addEventListener("scroll", handleScroll, true); // Capture phase for all scroll events
89 |
90 | // Also listen to scroll events on common container elements
91 | const xmluiContainers = document.querySelectorAll(
92 | '.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
93 | );
94 | xmluiContainers.forEach((element) => {
95 | element.addEventListener("scroll", handleScroll);
96 | });
97 |
98 | handleScroll(); // Check initial position
99 |
100 | return () => {
101 | window.removeEventListener("scroll", handleScroll);
102 | document.removeEventListener("scroll", handleScroll, true);
103 | xmluiContainers.forEach((element) => {
104 | element.removeEventListener("scroll", handleScroll);
105 | });
106 | };
107 | }, [visible, threshold]);
108 |
109 | // Scroll to top functionality
110 | const handleClick = useCallback(() => {
111 | // Force scroll to top using multiple methods
112 | // This will work regardless of which container is scrolled
113 |
114 | // Convert behavior prop to ScrollBehavior type
115 | const scrollBehavior: ScrollBehavior = validBehavior === "instant" ? "instant" : validBehavior === "auto" ? "auto" : "smooth";
116 |
117 | // Method 1: Standard window scroll
118 | window.scrollTo({ top: 0, behavior: scrollBehavior });
119 |
120 | // Method 2: Direct property setting (for instant behavior)
121 | if (validBehavior === "instant") {
122 | document.documentElement.scrollTop = 0;
123 | document.body.scrollTop = 0;
124 | }
125 |
126 | // Method 3: Find and scroll any scrolled containers
127 | const allElements = document.querySelectorAll('*');
128 | allElements.forEach((element) => {
129 | if (element instanceof HTMLElement && element.scrollTop > 0) {
130 | if (validBehavior === "instant") {
131 | element.scrollTop = 0;
132 | } else {
133 | element.scrollTo({ top: 0, behavior: scrollBehavior });
134 | }
135 | }
136 | });
137 |
138 | // Method 4: Scroll specific XMLUI containers (common patterns)
139 | const xmluiContainers = document.querySelectorAll(
140 | '.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
141 | );
142 | xmluiContainers.forEach((element) => {
143 | if (element instanceof HTMLElement) {
144 | if (validBehavior === "instant") {
145 | element.scrollTop = 0;
146 | } else {
147 | element.scrollTo({ top: 0, behavior: scrollBehavior });
148 | }
149 | }
150 | });
151 |
152 | onClick?.();
153 | }, [validBehavior, onClick]);
154 |
155 | if (!isVisible) {
156 | return null;
157 | }
158 |
159 | return (
160 | <button
161 | ref={ref}
162 | className={classnames(
163 | styles.scrollToTop,
164 | {
165 | [styles.positionStart]: validPosition === "start",
166 | [styles.positionCenter]: validPosition === "center",
167 | [styles.positionEnd]: validPosition === "end",
168 | },
169 | className,
170 | )}
171 | onClick={handleClick}
172 | style={style}
173 | aria-label="Scroll to top"
174 | type="button"
175 | >
176 | <Icon name={icon} fallback="chevronup" aria-hidden />
177 | </button>
178 | );
179 | },
180 | );
181 |
```