This is page 15 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
│ └── cool-queens-look.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── netlify.toml
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Debug.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ ├── Main.xmlui.xs
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── containers.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── state-management.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/ExpandableItem/ExpandableItem.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | // --- This code snippet is required to collect the theme variables used in this module
4 | $themeVars: ();
5 | @function createThemeVar($componentVariable) {
6 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
7 | @return t.getThemeVar($themeVars, $componentVariable);
8 | }
9 |
10 | $component: "ExpandableItem";
11 | $themeVars: t.composeBorderVars($themeVars, $component);
12 | $themeVars: t.composePaddingVars($themeVars, $component);
13 | $themeVars: t.composePaddingVars($themeVars, "content-#{$component}");
14 | $backgroundColor-ExpandableItem: createThemeVar("backgroundColor-#{$component}");
15 | $color-ExpandableItem: createThemeVar("color-#{$component}");
16 | $color-ExpandableItem--disabled: createThemeVar("color-#{$component}--disabled");
17 | $fontFamily-ExpandableItem: createThemeVar("fontFamily-#{$component}");
18 | $fontSize-ExpandableItem: createThemeVar("fontSize-#{$component}");
19 | $fontWeight-ExpandableItem: createThemeVar("fontWeight-#{$component}");
20 | $paddingVertical-ExpandableItem-summary: createThemeVar("paddingVertical-ExpandableItem-summary");
21 | $paddingHorizontal-ExpandableItem-summary: createThemeVar("paddingHorizontal-ExpandableItem-summary");
22 | $gap-ExpandableItem: createThemeVar("gap-ExpandableItem");
23 | $transition-ExpandableItem: createThemeVar("transition-ExpandableItem");
24 |
25 | @layer components {
26 | .expandableItem {
27 | width: fit-content;
28 | @include t.borderVars($themeVars, $component);
29 | @include t.paddingVars($themeVars, $component);
30 | background-color: $backgroundColor-ExpandableItem;
31 | color: $color-ExpandableItem;
32 | font-family: $fontFamily-ExpandableItem;
33 | font-size: $fontSize-ExpandableItem;
34 | font-weight: $fontWeight-ExpandableItem;
35 | transition: $transition-ExpandableItem;
36 |
37 | &.disabled {
38 | color: $color-ExpandableItem--disabled;
39 | cursor: not-allowed;
40 | }
41 |
42 | .summary {
43 | display: inline-flex;
44 | align-items: center;
45 | gap: $gap-ExpandableItem;
46 | cursor: pointer;
47 |
48 | &.iconStart {
49 | flex-direction: row;
50 | }
51 |
52 | &.iconEnd {
53 | flex-direction: row-reverse;
54 | justify-content: space-between;
55 | }
56 |
57 | .icon {
58 | display: flex;
59 | align-items: center;
60 | justify-content: center;
61 | }
62 |
63 | .switch {
64 | display: flex;
65 | align-items: center;
66 | }
67 |
68 | .summaryContent {
69 | flex: 1;
70 | }
71 | }
72 |
73 | &.withSwitch {
74 | .summary {
75 | cursor: pointer;
76 | }
77 | }
78 |
79 | .content {
80 | width: 100%;
81 | @include t.paddingVars($themeVars, "content-#{$component}");
82 | }
83 |
84 | &.disabled .summary {
85 | cursor: not-allowed;
86 | }
87 | }
88 | }
89 |
90 | // --- We export the theme variables to add them to the component renderer
91 | :export {
92 | themeVars: t.json-stringify($themeVars);
93 | }
94 |
95 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Form/formActions.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { SingleValidationResult, ValidationResult } from "../Form/FormContext";
2 |
3 | export const UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
4 |
5 | export enum FormActionKind {
6 | FIELD_LOST_FOCUS = "FormActionKind:FIELD_LOST_FOCUS",
7 | FIELD_VALUE_CHANGED = "FormActionKind:FIELD_VALUE_CHANGED",
8 | FIELD_FOCUSED = "FormActionKind:FIELD_FOCUSED",
9 | FIELD_VALIDATED = "FormActionKind:FIELD_VALIDATED",
10 | FIELD_INITIALIZED = "FormActionKind:FIELD_INITIALIZED",
11 | FIELD_REMOVED = "FormActionKind:FIELD_REMOVED",
12 | TRIED_TO_SUBMIT = "FormActionKind:TRIED_TO_SUBMIT",
13 | BACKEND_VALIDATION_ARRIVED = "FormActionKind:BACKEND_VALIDATION_ARRIVED",
14 | SUBMITTING = "FormActionKind:SUBMITTING",
15 | SUBMITTED = "FormActionKind:SUBMITTED",
16 | RESET = "FormActionKind:RESET",
17 | }
18 |
19 | export type FormAction = {
20 | type: FormActionKind;
21 | // Potential improvement: Try to specify the type with more details
22 | payload:
23 | | {
24 | uid?: any;
25 | data?: any;
26 | error?: any;
27 | value?: any;
28 | }
29 | | any;
30 | };
31 |
32 | export function fieldInitialized(uid: string, value: any, force = false) {
33 | return {
34 | type: FormActionKind.FIELD_INITIALIZED,
35 | payload: {
36 | uid,
37 | value,
38 | force
39 | },
40 | };
41 | }
42 |
43 | export function fieldChanged(uid: string, value: any) {
44 | return {
45 | type: FormActionKind.FIELD_VALUE_CHANGED,
46 | payload: {
47 | uid,
48 | value
49 | },
50 | };
51 | }
52 |
53 | export function fieldFocused(uid: string) {
54 | return {
55 | type: FormActionKind.FIELD_FOCUSED,
56 | payload: {
57 | uid,
58 | },
59 | };
60 | }
61 |
62 | export function fieldLostFocus(uid: string) {
63 | return {
64 | type: FormActionKind.FIELD_LOST_FOCUS,
65 | payload: {
66 | uid,
67 | },
68 | };
69 | }
70 |
71 | export function fieldValidated(uid: string, validationResult: ValidationResult) {
72 | return {
73 | type: FormActionKind.FIELD_VALIDATED,
74 | payload: {
75 | uid,
76 | validationResult,
77 | },
78 | };
79 | }
80 |
81 | export function fieldRemoved(uid: string) {
82 | return {
83 | type: FormActionKind.FIELD_REMOVED,
84 | payload: {
85 | uid,
86 | },
87 | };
88 | }
89 |
90 | export function triedToSubmit() {
91 | return {
92 | type: FormActionKind.TRIED_TO_SUBMIT,
93 | payload: {},
94 | };
95 | }
96 | export function formSubmitting() {
97 | return {
98 | type: FormActionKind.SUBMITTING,
99 | payload: {},
100 | };
101 | }
102 |
103 | export function formSubmitted() {
104 | return {
105 | type: FormActionKind.SUBMITTED,
106 | payload: {},
107 | };
108 | }
109 |
110 | export function formReset() {
111 | return {
112 | type: FormActionKind.RESET,
113 | payload: {},
114 | };
115 | }
116 |
117 | export function backendValidationArrived({
118 | generalValidationResults = [],
119 | fieldValidationResults = {},
120 | }: {
121 | generalValidationResults: Array<SingleValidationResult>;
122 | fieldValidationResults: Record<string, Array<SingleValidationResult>>;
123 | }) {
124 | return {
125 | type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
126 | payload: {
127 | generalValidationResults,
128 | fieldValidationResults,
129 | },
130 | };
131 | }
132 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/lint.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { LintDiagKind, lint } from "../../../src/parsers/xmlui-parser/lint";
2 | import { describe, expect, it, assert } from "vitest";
3 | import type { ComponentDef, ComponentMetadata } from "../../../src";
4 | import { transformSource } from "./xmlui";
5 | import { MetadataProvider } from "../../../src/language-server/services/common/metadata-utils";
6 |
7 | describe("lint", ()=>{
8 | describe("props", ()=>{
9 | const buttonWithPropX = new MetadataProvider({
10 | Button: {
11 | props: {
12 | x: null
13 | },
14 | events: {
15 | click: {
16 | description: "event on click"
17 | }
18 | }
19 | }
20 | });
21 |
22 | it("detects unrecognised prop", ()=>{
23 | const component = transformSource(
24 | `<Button something="non-existant" />`
25 | ) as ComponentDef;
26 |
27 | const diags = lint({ component, metadataProvider: buttonWithPropX });
28 | expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
29 | })
30 |
31 | it("detects unrecognised prop deeply nested", ()=>{
32 | const component = transformSource(
33 | `<A><Button something="non-existant" /></A>`
34 | ) as ComponentDef;
35 |
36 | const diags = lint({ component, metadataProvider: buttonWithPropX });
37 | expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
38 | })
39 |
40 | it("detects unrecognised prop in My namespace", ()=>{
41 | const component = transformSource(
42 | `<A xmlns:My="app-ns"><Button something="non-existant" /></A>`
43 | ) as ComponentDef;
44 |
45 | const diags = lint({ component, metadataProvider: buttonWithPropX });
46 | expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
47 | })
48 |
49 | it("detects unrecognised prop in Xmlui namespace", () => {
50 | const component = transformSource(
51 | `<A xmlns:Xmlui="core-ns"><Xmlui:Button something="non-existant" /></A>`
52 | ) as ComponentDef;
53 | const diags = lint({ component, metadataProvider: buttonWithPropX });
54 | expect(diags[0].kind).toEqual(LintDiagKind.UnrecognisedProp);
55 | });
56 |
57 | it("recognises layout prop", () => {
58 | const component = transformSource(
59 | `<Button width="anything" />`
60 | ) as ComponentDef;
61 | const diags = lint({ component, metadataProvider: buttonWithPropX });
62 | expect(diags).toHaveLength(0);
63 | });
64 |
65 | it("recognises layout prop with sm viewport size", () => {
66 | const component = transformSource(
67 | `<Button width-sm="anything" />`
68 | ) as ComponentDef;
69 | const diags = lint({ component, metadataProvider: buttonWithPropX });
70 | expect(diags).toHaveLength(0);
71 | });
72 |
73 | it("recognises click event", () => {
74 | const component = transformSource(
75 | `<Button onClick="anything" />`
76 | ) as ComponentDef;
77 | const diags = lint({ component, metadataProvider: buttonWithPropX });
78 | expect(diags).toHaveLength(0);
79 | });
80 | })
81 | })
82 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Image/ImageNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | type CSSProperties,
3 | type HTMLAttributes,
4 | forwardRef,
5 | useEffect,
6 | useMemo,
7 | useState,
8 | } from "react";
9 | import classnames from "classnames";
10 |
11 | import styles from "./Image.module.scss";
12 |
13 | // =====================================================================================================================
14 | // React Image component implementation
15 |
16 | type Props = {
17 | src?: string;
18 | alt?: string;
19 | imageData?: Blob | any;
20 | fit?: "cover" | "contain";
21 | style?: CSSProperties;
22 | className?: string;
23 | lazyLoad?: boolean;
24 | aspectRatio?: string;
25 | animation?: object;
26 | inline?: boolean;
27 | } & Pick<HTMLAttributes<HTMLImageElement>, "onClick">;
28 |
29 | export const defaultProps: Pick<Props, "fit" | "lazyLoad" | "inline"> = {
30 | fit: "contain",
31 | lazyLoad: false,
32 | inline: false,
33 | };
34 |
35 | export const Image = forwardRef(function Img(
36 | {
37 | src,
38 | alt,
39 | imageData,
40 | fit = defaultProps.fit,
41 | style,
42 | className,
43 | onClick,
44 | aspectRatio,
45 | lazyLoad = defaultProps.lazyLoad,
46 | inline = defaultProps.inline,
47 | ...rest
48 | }: Props,
49 | ref,
50 | ) {
51 | const [blobUrl, setBlobUrl] = useState<string | null>(null);
52 |
53 | const blobToRender = useMemo(() => {
54 | if (!imageData || !(imageData instanceof Blob)) {
55 | return undefined;
56 | }
57 | return imageData;
58 | }, [imageData]);
59 |
60 | // Handle Blob data when src is empty
61 | useEffect(() => {
62 | if (!src && blobToRender) {
63 | const url = URL.createObjectURL(blobToRender);
64 | setBlobUrl(url);
65 |
66 | // Cleanup function to revoke the blob URL
67 | return () => {
68 | URL.revokeObjectURL(url);
69 | setBlobUrl(null);
70 | };
71 | } else {
72 | // Clean up any existing blob URL if src is provided or imageData is not a Blob
73 | if (blobUrl) {
74 | URL.revokeObjectURL(blobUrl);
75 | setBlobUrl(null);
76 | }
77 | }
78 | }, [src, blobToRender]);
79 |
80 | src = safeConvertPropToString(src);
81 | alt = safeConvertPropToString(alt);
82 |
83 | // Use blob URL if src is empty and we have a blob URL
84 | const imageSrc = src || blobUrl;
85 | return (
86 | <img
87 | {...rest}
88 | src={imageSrc}
89 | ref={ref as any}
90 | alt={alt}
91 | loading={lazyLoad ? "lazy" : "eager"}
92 | className={classnames(
93 | styles.img,
94 | {
95 | [styles.clickable]: !!onClick,
96 | },
97 | className,
98 | )}
99 | style={{
100 | objectFit: fit,
101 | boxShadow: "none",
102 | ...style,
103 | flexShrink: 1,
104 | aspectRatio: aspectRatio,
105 | ...(inline ? { display: "inline" } : {}),
106 | }}
107 | onClick={onClick}
108 | />
109 | );
110 | });
111 |
112 | function safeConvertPropToString(prop: unknown): string | undefined {
113 | if (typeof prop === "string") return prop;
114 | if (
115 | prop != null &&
116 | typeof prop !== "object" &&
117 | typeof prop !== "function" &&
118 | !Number.isNaN(prop)
119 | ) {
120 | return String(prop);
121 | }
122 | return undefined;
123 | }
124 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/StickyBox/StickyBoxNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import type { CSSProperties, ReactNode } from "react";
2 | import { useEffect, useRef, useState } from "react";
3 | import classnames from "classnames";
4 | import { RenderPropSticky } from "react-sticky-el";
5 | import styles from "./StickyBox.module.scss";
6 | import { useRealBackground, useScrollParent } from "../../components-core/utils/hooks";
7 |
8 | // --- NOTE: React.StrictMode produces error logs using this component. Deployed apps are okay.
9 | // See here: https://github.com/gm0t/react-sticky-el/issues/82
10 |
11 | // =====================================================================================================================
12 | // React StickyBox component implementation
13 |
14 | export const defaultProps = {
15 | to: "top" as const,
16 | };
17 |
18 | type Props = {
19 | children: ReactNode;
20 | uid?: string;
21 | style?: CSSProperties;
22 | className?: string;
23 | to: "top" | "bottom";
24 | };
25 |
26 | export function StickyBox({ children, uid, style, to = defaultProps.to, className }: Props) {
27 | const sentinelRef = useRef(null);
28 | const [wrapper, setWrapper] = useState(null);
29 | const [stuck, setStuck] = useState(false);
30 | const scrollParent = useScrollParent(sentinelRef.current);
31 | const realBackground = useRealBackground(scrollParent);
32 | useEffect(() => {
33 | if (wrapper) {
34 | document.documentElement.style.setProperty(
35 | "--xmlui-scroll-margin-top",
36 | wrapper.clientHeight + "px",
37 | );
38 | // scrollParent.setAttribute("data-xmlui-scroll-padding", true);
39 | }
40 | }, [scrollParent, wrapper]);
41 | const wrapperClassName = classnames(styles.wrapper, className);
42 | const stickyStyles = {
43 | backgroundColor: realBackground,
44 | ...style,
45 | };
46 | const stickyClassName = "";
47 | return (
48 | <>
49 | {!!scrollParent && (
50 | <RenderPropSticky
51 | mode={to}
52 | onFixedToggle={setStuck}
53 | // hideOnBoundaryHit={hideOnBoundaryHit}
54 | // offsetTransforms={offsetTransforms}
55 | // disabled={disabled}
56 | // boundaryElement={boundaryElement}
57 | scrollElement={scrollParent}
58 | // bottomOffset={bottomOffset}
59 | // topOffset={topOffset}
60 | // positionRecheckInterval={positionRecheckInterval}
61 | >
62 | {({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => (
63 | <div ref={holderRef} style={holderStyles}>
64 | <div
65 | className={`${wrapperClassName} ${isFixed ? stickyClassName : ""}`}
66 | style={isFixed ? { ...wrapperStyles, ...stickyStyles } : wrapperStyles}
67 | ref={wrapperRef}
68 | >
69 | <div ref={setWrapper}>{children}</div>
70 | </div>
71 | </div>
72 | )}
73 | </RenderPropSticky>
74 | )}
75 | <div
76 | style={{ display: "none" }}
77 | ref={sentinelRef}
78 | className={to === "top" ? styles.sentinel : ""}
79 | />
80 | </>
81 | );
82 | }
83 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.attr.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it, assert } from "vitest";
2 | import type { ComponentDef } from "../../../src/abstractions/ComponentDefs";
3 | import type { ButtonMd } from "../../../src/components/Button/Button";
4 | import { transformSource } from "./xmlui";
5 | import type { StackMd } from "../../../src/components/Stack/Stack";
6 |
7 | describe("Xmlui transform - attributes", () => {
8 | it("Invalid attribute name fails #1", () => {
9 | try {
10 | transformSource("<Stack prop.sub.sub='a' />");
11 | assert.fail("Exception expected");
12 | } catch (err) {
13 | expect(err.toString().includes("T007")).equal(true);
14 | }
15 | });
16 |
17 | it("Invalid attribute name fails #2", () => {
18 | try {
19 | transformSource("<Stack prop.='a' />");
20 | assert.fail("Exception expected");
21 | } catch (err) {
22 | expect(err.toString().includes("T007")).equal(true);
23 | }
24 | });
25 |
26 | it("Invalid attribute name fails #3", () => {
27 | try {
28 | transformSource("<Component name='MyStack' invaAttr='a'><Stack /></Component>");
29 | assert.fail("Exception expected");
30 | } catch (err) {
31 | expect(err.toString().includes("T021")).equal(true);
32 | }
33 | });
34 |
35 | it("Invalid attribute name fails #4", () => {
36 | try {
37 | transformSource("<Component invaAttr='a' name='MyStack'><Stack /></Component>");
38 | assert.fail("Exception expected");
39 | } catch (err) {
40 | expect(err.toString().includes("T021")).equal(true);
41 | }
42 | });
43 |
44 | it("key-only attr is true", () => {
45 | const cd = transformSource("<Button enabled />") as ComponentDef<typeof ButtonMd>;
46 | expect(cd.props.enabled).equal("true");
47 | });
48 |
49 | it("uid works", () => {
50 | const cd = transformSource("<Stack id='myStack' />") as ComponentDef<typeof StackMd>;
51 | expect(cd.type).equal("Stack");
52 | expect(cd.uid).equal("myStack");
53 | });
54 |
55 | it("testId works", () => {
56 | const cd = transformSource("<Stack testId='myStack' />") as ComponentDef<typeof StackMd>;
57 | expect(cd.type).equal("Stack");
58 | expect(cd.testId).equal("myStack");
59 | });
60 |
61 | it("when works", () => {
62 | const cd = transformSource("<Stack when='isOpen' />") as ComponentDef<typeof StackMd>;
63 | expect(cd.type).equal("Stack");
64 | expect(cd.props ?? {}).not.toHaveProperty("when");
65 | expect(cd.when).equal("isOpen");
66 | });
67 |
68 | it("uses works with 1 value", () => {
69 | const cd = transformSource("<Stack uses='isOpen' />") as ComponentDef<typeof StackMd>;
70 | expect(cd.type).equal("Stack");
71 | expect(cd.props ?? {}).not.toHaveProperty("uses");
72 | expect(cd.uses).deep.equal(["isOpen"]);
73 | });
74 |
75 | it("uses works with multiple values", () => {
76 | const cd = transformSource("<Stack uses='isOpen, isClosed' />") as ComponentDef<typeof StackMd>;
77 | expect(cd.type).equal("Stack");
78 | expect(cd.props ?? {}).not.toHaveProperty("uses");
79 | expect(cd.uses).deep.equal(["isOpen", "isClosed"]);
80 | });
81 | });
82 |
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTop.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./ScrollToTop.module.scss";
2 |
3 | import { createComponentRenderer, createMetadata, d, parseScssVar } from "xmlui";
4 | import * as ScrollToTopNative from "./ScrollToTopNative";
5 |
6 | const COMP = "ScrollToTop";
7 | const { ScrollToTop, defaultProps } = ScrollToTopNative;
8 |
9 | export const ScrollToTopMd = createMetadata({
10 | status: "experimental",
11 | description: "A floating button that scrolls the page to the top when clicked",
12 | parts: {
13 | icon: {
14 | description: "The icon displayed inside the scroll to top button",
15 | }
16 | },
17 | props: {
18 | position: {
19 | description: "Horizontal position of the button at the bottom of the screen",
20 | type: "string",
21 | defaultValue: defaultProps.position,
22 | options: ["start", "center", "end"],
23 | },
24 | visible: {
25 | description: "Whether the button is visible",
26 | type: "boolean",
27 | defaultValue: defaultProps.visible,
28 | },
29 | threshold: {
30 | description: "Scroll position threshold (in pixels) after which the button becomes visible",
31 | type: "number",
32 | defaultValue: defaultProps.threshold,
33 | },
34 | icon: {
35 | description: "Name of the icon to display in the button",
36 | type: "string",
37 | defaultValue: defaultProps.icon,
38 | },
39 | behavior: {
40 | description: "Scroll behavior when scrolling to top",
41 | type: "string",
42 | defaultValue: defaultProps.behavior,
43 | options: ["smooth", "instant", "auto"],
44 | },
45 | },
46 | events: {
47 | click: d("Triggered when the scroll to top button is clicked"),
48 | },
49 | themeVars: parseScssVar(styles.themeVars),
50 | defaultThemeVars: {
51 | [`backgroundColor-${COMP}`]: "$color-primary",
52 | [`borderColor-${COMP}`]: "$color-primary-dark",
53 | [`color-${COMP}`]: "$color-surface-0",
54 | [`size-${COMP}`]: "48px",
55 | [`borderRadius-${COMP}`]: "$space-24",
56 | [`shadow-${COMP}`]: "$shadow-lg",
57 | [`bottom-${COMP}`]: "$space-16",
58 | [`horizontalSpacing-${COMP}`]: "$space-16",
59 | [`zIndex-${COMP}`]: "1000",
60 | },
61 | });
62 |
63 | export const scrollToTopComponentRenderer = createComponentRenderer(
64 | COMP,
65 | ScrollToTopMd,
66 | ({ node, extractValue, className, lookupEventHandler }) => {
67 | const props = (node.props as typeof ScrollToTopMd.props)!;
68 |
69 | return (
70 | <ScrollToTop
71 | className={className}
72 | position={extractValue.asOptionalString(props.position, defaultProps.position)}
73 | visible={extractValue.asOptionalBoolean(props.visible, defaultProps.visible)}
74 | threshold={extractValue.asOptionalNumber(props.threshold, defaultProps.threshold)}
75 | icon={extractValue.asOptionalString(props.icon, defaultProps.icon)}
76 | behavior={extractValue.asOptionalString(props.behavior, defaultProps.behavior) as "smooth" | "instant" | "auto"}
77 | onClick={lookupEventHandler("click")} // This is not an error.
78 | />
79 | );
80 | },
81 | );
82 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-primary.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 |
3 | import { Parser } from "../../../src/parsers/scripting/Parser";
4 | import {
5 | Identifier,
6 | T_BINARY_EXPRESSION,
7 | T_CALCULATED_MEMBER_ACCESS_EXPRESSION,
8 | T_CONDITIONAL_EXPRESSION,
9 | T_FUNCTION_INVOCATION_EXPRESSION,
10 | T_IDENTIFIER,
11 | T_LITERAL,
12 | T_MEMBER_ACCESS_EXPRESSION,
13 | T_SEQUENCE_EXPRESSION,
14 | T_UNARY_EXPRESSION,
15 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
16 |
17 | describe("Parser - primary expressions", () => {
18 | it("null", () => {
19 | // --- Arrange
20 | const wParser = new Parser("null");
21 |
22 | // --- Act
23 | const expr = wParser.parseExpr();
24 |
25 | // --- Assert
26 | expect(expr).not.equal(null);
27 | if (!expr) return;
28 | expect(expr.type).equal(T_LITERAL);
29 | });
30 |
31 | it("undefined", () => {
32 | // --- Arrange
33 | const wParser = new Parser("undefined");
34 |
35 | // --- Act
36 | const expr = wParser.parseExpr();
37 |
38 | // --- Assert
39 | expect(expr).not.equal(null);
40 | if (!expr) return;
41 | expect(expr.type).equal(T_LITERAL);
42 | });
43 |
44 | const identifierCases = [
45 | { src: "$id", exp: "$id" },
46 | { src: "ident", exp: "ident" },
47 | { src: "_alma$123", exp: "_alma$123" },
48 | ];
49 |
50 | identifierCases.forEach((c) => {
51 | it(`Identifier: ${c.src}`, () => {
52 | // --- Arrange
53 | const wParser = new Parser(c.src);
54 |
55 | // --- Act
56 | const expr = wParser.parseExpr();
57 |
58 | // --- Assert
59 | expect(expr).not.equal(null);
60 | if (!expr) return;
61 | expect(expr.type).equal(T_IDENTIFIER);
62 | const literal = expr as Identifier;
63 | expect(literal.name).equal(c.exp);
64 | });
65 | });
66 |
67 | const parenthesizedCases = [
68 | { src: "(123)", exp: T_LITERAL },
69 | { src: "(a+b)", exp: T_BINARY_EXPRESSION },
70 | { src: "(a ? b : c)", exp: T_CONDITIONAL_EXPRESSION },
71 | { src: "(!a)", exp: T_UNARY_EXPRESSION },
72 | { src: "(a)", exp: T_IDENTIFIER },
73 | { src: "(a, b)", exp: T_SEQUENCE_EXPRESSION },
74 | { src: "(c(a, b))", exp: T_FUNCTION_INVOCATION_EXPRESSION },
75 | { src: "(a.b)", exp: T_MEMBER_ACCESS_EXPRESSION },
76 | { src: "(a[b])", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
77 | ];
78 | parenthesizedCases.forEach((c) => {
79 | it(`Parenthesized expression: ${c.src}`, () => {
80 | // --- Arrange
81 | const wParser = new Parser(c.src);
82 |
83 | // --- Act
84 | const expr = wParser.parseExpr();
85 |
86 | // --- Assert
87 | expect(expr).not.equal(null);
88 | if (!expr) return;
89 | expect(expr.type).equal(c.exp);
90 | expect(expr.parenthesized).equal(1);
91 | });
92 | });
93 |
94 | it(`Parenthesized expression`, () => {
95 | // --- Arrange
96 | const wParser = new Parser("(c(a, b))");
97 |
98 | // --- Act
99 | const expr = wParser.parseExpr();
100 |
101 | // --- Assert
102 | expect(expr).not.equal(null);
103 | if (!expr) return;
104 | expect(expr.type).equal(T_FUNCTION_INVOCATION_EXPRESSION);
105 | expect(expr.parenthesized).equal(1);
106 | });
107 | });
108 |
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-11.md:
--------------------------------------------------------------------------------
```markdown
1 | # Import
2 |
3 | The `ImportProducts` component uses [FileInput](/components/FileInput) to acquire a CSV file, [Table](/components/Table) to display records as selectable rows, and [Queue](/components/Queue) to import selected rows.
4 |
5 | ## Using FileInput
6 |
7 | To exercise XMLUI Invoice's import feature when running the demo app, you'll use `FileInput` to navigate to `products.csv` in the app's root folder.
8 |
9 | ```xmlui
10 | <FileInput
11 | id="fileInput"
12 | acceptsFileType="{['.csv']}"
13 | onDidChange="{ (val) => {
14 | parsedCsv = window.parseCsv(val[0]).map((item, idx) => {
15 | return {...item, id: idx};
16 | });
17 | }}"
18 | />
19 | ```
20 |
21 | ## Avoiding duplication
22 |
23 | The table that displays imported products makes rows selectable, so you can import only a subset of what's in the CSV file.
24 |
25 | It uses `rowDisabledPredicate` to disable a row if the name of any existing product matches the name of the product in the current row. The function `isDuplicate` also enables highlighting duplicate rows.
26 |
27 | ```xmlui /isDuplicate/
28 | <Table
29 | id="productsFromCsv"
30 | data="{ parsedCsv }"
31 | rowsSelectable="true"
32 | rowDisabledPredicate="{(row) => isDuplicate(row.name)}"
33 | >
34 | <Column header="Name">
35 | <Text color="{isDuplicate($item.name)
36 | ? '$color-danger-500' : '$textColor-primary'}"
37 | >
38 | {$item.name} {isDuplicate($item.name) ? '(duplicate)' : ''}
39 | </Text>
40 | </Column>
41 | <Column bindTo="description"/>
42 | <Column bindTo="price"/>
43 | </Table>
44 | ```
45 |
46 | We define `isDuplicate()` using a `<script>` [helper tag](/helper-tags).
47 |
48 | ```xmlui
49 | <Component name="ImportProducts">
50 | <script>
51 | function isDuplicate(name) {
52 | return existingProducts.value.some(p => p.name === name);
53 | }
54 | </script>
55 | <!-- ... -->
56 | </Component>
57 | ```
58 |
59 | ## Using Queue
60 |
61 | The API doesn't support batch update so we use `Queue` to iterate over the selected rows and make an [APICall](/components/APICall) for each.
62 |
63 | ```xmlui /pluralize/
64 | <Queue id="importQueue" clearAfterFinish="true">
65 | <property name="progressFeedback">
66 | <Text value="Importing {
67 | pluralize(importQueue.getQueuedItems().length, 'product', 'products')
68 | }"/>
69 | </property>
70 | <property name="resultFeedback">
71 | <Text value="Imported {pluralize($completedItems.length,
72 | 'product', 'products')}"
73 | />
74 | </property>
75 | <event name="process">
76 | <APICall
77 | url="/api/products"
78 | method="post"
79 | body="{$param.item}"
80 | />
81 | </event>
82 | <event name="complete" value="productsFromCsv.clearSelection()"/>
83 | </Queue>
84 | ```
85 |
86 | > [!INFO] `pluralize` is a [global helper function](/globals#pluralize).
87 |
88 | The import button uses the queue's `enqueueItems` method to populate the queue with the result of the table's `getSelectedItems` method.
89 |
90 | ```xmlui
91 | <Button
92 | label="Import"
93 | onClick="{ importQueue.enqueueItems(productsFromCsv.getSelectedItems())}"
94 | enabled="{productsFromCsv.getSelectedItems().length}"
95 | />
96 | ```
97 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Image/Image.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./Image.module.scss";
2 |
3 | import { parseScssVar } from "../../components-core/theming/themeVars";
4 | import { createComponentRenderer } from "../../components-core/renderers";
5 | import { createMetadata, d, dClick, dInternal } from "../metadata-helpers";
6 | import { Image, defaultProps } from "./ImageNative";
7 |
8 | const COMP = "Image";
9 |
10 | export const ImageMd = createMetadata({
11 | status: "stable",
12 | description:
13 | "`Image` displays pictures from URLs or local sources with built-in responsive " +
14 | "sizing, aspect ratio control, and accessibility features. It handles different " +
15 | "image formats and provides options for lazy loading and click interactions.",
16 | props: {
17 | src: d(
18 | "This property is used to indicate the source (path) of the image to display. " +
19 | "When not defined, no image is displayed.",
20 | ),
21 | data: d(
22 | `This property contains the binary data that represents the image.`,
23 | ),
24 | alt: d(`This optional property specifies an alternate text for the image.`),
25 | fit: {
26 | description:
27 | "This property sets how the image content should be resized to fit its container.",
28 | type: "string",
29 | defaultValue: defaultProps.fit,
30 | },
31 | lazyLoad: {
32 | description:
33 | `Lazy loading instructs the browser to load the image only when it is imminently needed ` +
34 | `(e.g. user scrolls to it).`,
35 | type: "boolean",
36 | defaultValue: defaultProps.lazyLoad,
37 | },
38 | aspectRatio: d(
39 | "This property sets a preferred aspect ratio for the image, which will be used in " +
40 | "calculating auto sizes and other layout functions. If this value is not used, the " +
41 | 'original aspect ratio is kept. The value can be a number of a string (such as "16/9").',
42 | ),
43 | inline: {
44 | description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
45 | type: "boolean",
46 | defaultValue: defaultProps.inline,
47 | },
48 | animation: dInternal(`The optional animation object to be applied to the component`),
49 | },
50 | events: {
51 | click: dClick(COMP),
52 | },
53 | themeVars: parseScssVar(styles.themeVars),
54 | });
55 |
56 | export const imageComponentRenderer = createComponentRenderer(
57 | COMP,
58 | ImageMd,
59 | ({ node, extractValue, className, extractResourceUrl }) => {
60 | return (
61 | <Image
62 | src={node.props.src ? extractResourceUrl(node.props.src) : undefined}
63 | imageData={extractValue(node.props.data)}
64 | alt={extractValue(node.props.alt)}
65 | fit={extractValue(node.props.fit)}
66 | lazyLoad={extractValue.asOptionalBoolean(node.props.lazyLoad)}
67 | inline={extractValue.asOptionalBoolean(node.props.inline)}
68 | aspectRatio={extractValue(node.props.aspectRatio)}
69 | className={className}
70 | animation={extractValue(node.props.animation)}
71 | />
72 | );
73 | },
74 | );
75 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/buildProxy.ts:
--------------------------------------------------------------------------------
```typescript
1 | // The type of action we can use with a proxy
2 | export type ProxyAction = "set" | "unset";
3 |
4 | // Proxy operation callback parameters
5 | export type ProxyCallbackArgs = {
6 | action: ProxyAction;
7 | path: string;
8 | pathArray: (string | symbol)[];
9 | target: string;
10 | newValue?: any;
11 | previousValue?: any;
12 | };
13 |
14 | /**
15 | * Use this function to build a JavaScript proxy for localContext objects. The
16 | * responsibility of the proxy is to collect the changes within the localContext
17 | * so that we can refresh the UI according to them.
18 | */
19 | export function buildProxy(
20 | proxyTarget: any,
21 | callback: (changeInfo: ProxyCallbackArgs) => void,
22 | tree: Array<string | symbol> = [],
23 | ): any {
24 | // --- We identify a particular (deep) localContext property by its full path;
25 | // --- this function creates the path
26 | const getPath = (prop: string | symbol) => tree.concat(prop).join(".");
27 |
28 | const proxiedValues = new WeakMap();
29 | // --- Create the proxy object for `proxyTarget`
30 | return new Proxy(proxyTarget, {
31 | get: function (target, prop, receiver) {
32 | const value = Reflect.get(target, prop, receiver);
33 |
34 | // --- Create proxies only for writable objects and arrays, except arrow
35 | // --- function expressions.
36 | if (
37 | value &&
38 | !value._ARROW_EXPR_ &&
39 | !Object.isFrozen(value) &&
40 | typeof value === "object" &&
41 | ["Array", "Object"].includes(value.constructor.name)
42 | ) {
43 | // --- Just to make sure that accessing the proxied objects' field gets
44 | // --- the same reference every time. e.g. this wouldn't be true otherwise:
45 | // --- proxiedObject['field'] === proxiedObject['field']
46 | if (!proxiedValues.has(value)) {
47 | proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
48 | }
49 | return proxiedValues.get(value);
50 | }
51 |
52 | // --- Do not create a proxy for other objects
53 | return value;
54 | },
55 |
56 | set: function (target, prop, value, receiver) {
57 | // --- Invoke the callback function to sign any change in the proxied object
58 | callback({
59 | action: "set",
60 | path: getPath(prop),
61 | pathArray: tree.concat(prop),
62 | target,
63 | newValue: value,
64 | previousValue: Reflect.get(target, prop, receiver),
65 | });
66 |
67 | // --- Execute the change.
68 | // --- Note, any error raised in the callback will prevent from changing the property value
69 | return Reflect.set(target, prop, value, receiver);
70 | },
71 |
72 | deleteProperty: function (target, prop) {
73 | // --- Invoke the callback function to delete a property
74 | callback({ action: "unset", path: getPath(prop), pathArray: tree.concat(prop), target });
75 |
76 | // --- Execute the change
77 | // --- Note, any error raised in the callback will prevent from deleting the property value
78 | return Reflect.deleteProperty(target, prop);
79 | },
80 | });
81 | }
82 |
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/src/ScaleAnimation.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { createComponentRenderer, createMetadata } from "xmlui";
2 | import { Animation, defaultProps } from "./AnimationNative";
3 |
4 | const COMP = "ScaleAnimation";
5 |
6 | const defaultAnimationValues = {
7 | from: 0,
8 | to: 1,
9 | };
10 |
11 | export const ScaleAnimationMd = createMetadata({
12 | status: "experimental",
13 | description: `The \`${COMP}\` component represents an animation that scales the content.`,
14 | docFolder: "src",
15 | props: {
16 | from: {
17 | description: "The initial scale of the content.",
18 | valueType: "number",
19 | defaultValue: defaultAnimationValues.from,
20 | },
21 | to: {
22 | description: "The final scale of the content.",
23 | valueType: "number",
24 | defaultValue: defaultAnimationValues.to,
25 | },
26 | duration: {
27 | description: "The duration of the animation in milliseconds.",
28 | valueType: "number",
29 | },
30 | animateWhenInView: {
31 | description: "Indicates whether the animation should start when the component is in view.",
32 | valueType: "boolean",
33 | },
34 | reverse: {
35 | description: `Indicates whether the animation should run in reverse`,
36 | defaultValue: defaultProps.reverse,
37 | valueType: "boolean",
38 | },
39 | loop: {
40 | description: `Indicates whether the animation should loop`,
41 | defaultValue: defaultProps.loop,
42 | valueType: "boolean",
43 | },
44 | delay: {
45 | description: `The delay before the animation starts in milliseconds`,
46 | defaultValue: defaultProps.delay,
47 | valueType: "number",
48 | },
49 | },
50 | events: {
51 | started: { description: `Event fired when the animation starts` },
52 | stopped: { description: `Event fired when the animation stops` },
53 | },
54 | apis: {
55 | start: { description: `Starts the animation` },
56 | stop: { description: `Stops the animation` },
57 | },
58 | });
59 |
60 | export const scaleAnimationRenderer = createComponentRenderer(
61 | COMP,
62 | ScaleAnimationMd,
63 | ({ node, renderChild, extractValue, registerComponentApi, lookupEventHandler }) => {
64 | return (
65 | <Animation
66 | registerComponentApi={registerComponentApi}
67 | animation={{
68 | from: {
69 | transform: `scale(${extractValue.asOptionalNumber(node.props?.from, defaultAnimationValues.from)})`,
70 | },
71 | to: {
72 | transform: `scale(${extractValue.asOptionalNumber(node.props?.to, defaultAnimationValues.to)})`,
73 | },
74 | }}
75 | duration={extractValue.asOptionalNumber(node.props.duration)}
76 | onStop={lookupEventHandler("stopped")}
77 | onStart={lookupEventHandler("started")}
78 | animateWhenInView={extractValue.asOptionalBoolean(node.props.animateWhenInView)}
79 | reverse={extractValue.asOptionalBoolean(node.props.reverse)}
80 | loop={extractValue.asOptionalBoolean(node.props.loop)}
81 | delay={extractValue.asOptionalNumber(node.props.delay)}
82 | >
83 | {renderChild(node.children)}
84 | </Animation>
85 | );
86 | },
87 | );
88 |
```
--------------------------------------------------------------------------------
/.github/workflows/deploy-docs-optimized.yml:
--------------------------------------------------------------------------------
```yaml
1 | name: Deploy docs (optimized)
2 |
3 | on:
4 | workflow_dispatch:
5 | inputs:
6 | max_releases:
7 | description: "Maximum number of releases to include in docs"
8 | type: number
9 | required: false
10 | default: 10
11 |
12 | permissions:
13 | contents: write
14 | pull-requests: write
15 |
16 | jobs:
17 | build-and-deploy:
18 | runs-on: ubuntu-latest
19 | env:
20 | NODE_OPTIONS: "--max-old-space-size=8192"
21 | TURBO_UI: "false"
22 |
23 | steps:
24 | - name: 1. Generate a token from the GitHub App 🤖
25 | id: generate_token
26 | uses: tibdex/github-app-token@v2
27 | with:
28 | app_id: ${{ secrets.APP_ID }}
29 | private_key: ${{ secrets.APP_PRIVATE_KEY }}
30 | - uses: actions/checkout@v4
31 | - uses: actions/setup-node@v4
32 | with:
33 | node-version: 22
34 | cache: "npm"
35 | registry-url: https://registry.npmjs.org/
36 |
37 | - name: Cache for Turbo
38 | uses: rharkor/[email protected]
39 |
40 | - run: npm ci --prefer-offline
41 |
42 | - name: 4. Configure Git to use the App's token 🔑
43 | # The token generated in the first step is used here for authentication.
44 | run: git config --global url."https://x-access-token:${{ steps.generate_token.outputs.token }}@github.com/".insteadOf "https://github.com/"
45 | - name: 5. DEBUG - Attempt to clone the private repo
46 | # This step will give a clear error if authentication is the problem
47 | run: git clone https://github.com/xmlui-org/xmlui-optimizer.git
48 | - name: 5. Install optimizer's dependencies
49 | run: npm install
50 | working-directory: ./xmlui-optimizer
51 | - name: DEBUG - install xmlui-optimizer
52 | # This step will give a clear error if authentication is the problem
53 | run: npm install ./xmlui-optimizer
54 |
55 | - run: cd docs && npm run release-ci-optimized
56 | env:
57 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
58 | DOCS_XMLUI_MAX_RELEASES_LENGTH: ${{ github.event.inputs.max_releases }}
59 |
60 | - name: "Run Azure webapp deploy action using publish profile credentials"
61 | uses: azure/webapps-deploy@v2
62 | with:
63 | package: "docs/ui-optimized.zip"
64 | app-name: xmlui-docs
65 | publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_XMLUI_DOCS }}
66 | - name: Create Pull Request for generated releases.json
67 | uses: peter-evans/create-pull-request@v7
68 | with:
69 | add-paths: "docs/public/resources/files/releases.json"
70 | commit-message: "chore: update generated releases.json"
71 | title: "docs: Update generated releases.json"
72 | body: "This PR was automatically opened by the **Deploy docs (optimized)** workflow, which generates the `releases.json` file with data about the latest releases."
73 | branch: "automated/update-releases"
74 | delete-branch: true # Clean up the temp branch after merge
75 | labels: automated
76 |
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/make-a-table-responsive.md:
--------------------------------------------------------------------------------
```markdown
1 | # Make a Table responsive
2 |
3 | ```xmlui-pg noHeader
4 | ---app
5 | <App>
6 | <ResponsiveTable />
7 | </App>
8 | ---comp display
9 | <Component name="ResponsiveTable" var.people="{[
10 | { name: 'Alice Johnson', email: '[email protected]', department: 'Engineering', status: 'active', salary: '95k' },
11 | { name: 'Bob Smith', email: '[email protected]', department: 'Marketing', status: 'active', salary: '88k' },
12 | { name: 'Carol Davis', email: '[email protected]', department: 'Sales', status: 'inactive', salary: '110k' },
13 | { name: 'David Wilson', email: '[email protected]', department: 'Engineering', status: 'active', salary: '105k' },
14 | { name: 'Eva Brown', email: '[email protected]', department: 'HR', status: 'active', salary: '75k' }
15 | ]}">
16 | <VStack>
17 | <HStack>
18 | <Text size="lg">Responsive People Table</Text>
19 | <Badge value="Current: {mediaSize.size}" color="blue" />
20 | </HStack>
21 | <Text size="sm" color="gray">Resize your browser window to see columns progressively hide</Text>
22 |
23 | <Table data="{people}">
24 | <!-- Essential: Avatar - always show -->
25 | <Column header="" width="50px">
26 | <Avatar
27 | name="{$item.name}"
28 | size="xs"
29 | color="blue"
30 | />
31 | </Column>
32 |
33 | <!-- Essential: Name - always show -->
34 | <Column header="Name" bindTo="name" width="150px">
35 | <Text>{$item.name}</Text>
36 | </Column>
37 |
38 | <!-- Priority: Email - hide on xs screens -->
39 | <Column header="Email" bindTo="email" when="{mediaSize.size !== 'xs'}" width="200px">
40 | <Text size="sm" color="gray">{$item.email}</Text>
41 | </Column>
42 |
43 | <!-- Secondary: Department - hide on xs/sm screens -->
44 | <Column header="Department" bindTo="department" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm'}" width="120px" />
45 |
46 | <!-- Tertiary: Status - only show on md+ screens -->
47 | <Column header="Status" bindTo="status" when="{mediaSize.size === 'md' || mediaSize.size === 'lg' || mediaSize.size === 'xl' || mediaSize.size === 'xxl'}" width="80px">
48 | <Badge
49 | value="{$item.status}"
50 | color="{status === 'active' ? 'green' : 'gray'}"
51 | variant="pill"
52 | />
53 | </Column>
54 |
55 | <!-- Low Priority: Salary - only show on lg+ screens -->
56 | <Column header="Salary" bindTo="salary" when="{mediaSize.size === 'lg' || mediaSize.size === 'xl' || mediaSize.size === 'xxl'}" width="100px">
57 | <Text size="sm" weight="medium">${$item.salary}</Text>
58 | </Column>
59 | </Table>
60 |
61 | <VStack gap="sm" margin="md">
62 | <Text size="sm" weight="bold">Column Visibility by Screen Size:</Text>
63 | <Text size="xs" color="gray">xs: Avatar + Name only</Text>
64 | <Text size="xs" color="gray">sm: + Email</Text>
65 | <Text size="xs" color="gray">md: + Department + Status</Text>
66 | <Text size="xs" color="gray">lg+: + Salary</Text>
67 | </VStack>
68 | </VStack>
69 | </Component>
70 | ```
71 |
72 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/pdf.svg:
--------------------------------------------------------------------------------
```
1 | <svg viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g clip-path="url(#clip0_1813_15242)">
3 | <path
4 | d="M21.788 7.38281L16.3739 5.74219L14.827 0H3.22546C2.37112 0 1.67859 0.734508 1.67859 1.64062V26.3594C1.67859 27.2655 2.37112 28 3.22546 28H20.2411C21.0954 28 21.788 27.2655 21.788 26.3594V7.38281Z"
5 | fill="#EDEDED"/>
6 | <path
7 | d="M21.7879 7.38281V26.3594C21.7879 27.2655 21.0954 28 20.2411 28H11.8571V0H14.827L16.3739 5.74219L21.7879 7.38281Z"
8 | fill="#EDEDED"/>
9 | <path
10 | d="M21.788 7.38281H16.3739C15.5231 7.38281 14.827 6.64453 14.827 5.74219V0C15.0281 0 15.2292 0.0820312 15.3684 0.246148L21.5559 6.80865C21.7106 6.95625 21.788 7.16953 21.788 7.38281Z"
11 | fill="#BDBDBD"/>
12 | <path
13 | d="M20.5333 22.4259C20.5333 22.925 20.1483 23.3333 19.6778 23.3333H0.855556C0.385 23.3333 0 22.925 0 22.4259V13.3519C0 12.8528 0.385 12.4445 0.855556 12.4445H19.6778C20.1483 12.4445 20.5333 12.8528 20.5333 13.3519V22.4259Z"
14 | fill="#FF3E3E"/>
15 | <path
16 | d="M4.25304 17.732V16.448H4.98504C5.09304 16.448 5.19704 16.456 5.29704 16.472C5.39704 16.488 5.48504 16.52 5.56104 16.568C5.63704 16.612 5.69704 16.676 5.74104 16.76C5.78904 16.844 5.81304 16.954 5.81304 17.09C5.81304 17.226 5.78904 17.336 5.74104 17.42C5.69704 17.504 5.63704 17.57 5.56104 17.618C5.48504 17.662 5.39704 17.692 5.29704 17.708C5.19704 17.724 5.09304 17.732 4.98504 17.732H4.25304ZM3.31104 15.716V20H4.25304V18.464H5.24304C5.51104 18.464 5.73904 18.426 5.92704 18.35C6.11504 18.27 6.26704 18.166 6.38304 18.038C6.50304 17.91 6.58904 17.764 6.64104 17.6C6.69704 17.432 6.72504 17.262 6.72504 17.09C6.72504 16.914 6.69704 16.744 6.64104 16.58C6.58904 16.416 6.50304 16.27 6.38304 16.142C6.26704 16.014 6.11504 15.912 5.92704 15.836C5.73904 15.756 5.51104 15.716 5.24304 15.716H3.31104Z"
17 | fill="white"/>
18 | <path
19 | d="M8.85499 19.208V16.508H9.52699C9.75899 16.508 9.95299 16.542 10.109 16.61C10.269 16.674 10.397 16.768 10.493 16.892C10.589 17.016 10.657 17.166 10.697 17.342C10.741 17.514 10.763 17.708 10.763 17.924C10.763 18.16 10.733 18.36 10.673 18.524C10.613 18.688 10.533 18.822 10.433 18.926C10.333 19.026 10.219 19.098 10.091 19.142C9.96299 19.186 9.83099 19.208 9.69499 19.208H8.85499ZM7.91299 15.716V20H9.76099C10.089 20 10.373 19.946 10.613 19.838C10.857 19.726 11.059 19.574 11.219 19.382C11.383 19.19 11.505 18.962 11.585 18.698C11.665 18.434 11.705 18.146 11.705 17.834C11.705 17.478 11.655 17.168 11.555 16.904C11.459 16.64 11.323 16.42 11.147 16.244C10.975 16.068 10.769 15.936 10.529 15.848C10.293 15.76 10.037 15.716 9.76099 15.716H7.91299Z"
20 | fill="white"/>
21 | <path d="M12.9603 15.716V20H13.9023V18.23H15.6963V17.498H13.9023V16.508H15.9723V15.716H12.9603Z" fill="white"/>
22 | </g>
23 | <defs>
24 | <clipPath id="clip0_1813_15242">
25 | <rect width="22" height="28" fill="white"/>
26 | </clipPath>
27 | </defs>
28 | </svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/AppLayoutContext.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { createContext, useContext } from "react";
2 |
3 | import type { ComponentDef, PropertyValueDescription } from "../../abstractions/ComponentDefs";
4 |
5 | const appLayoutNames = [
6 | "vertical",
7 | "vertical-sticky",
8 | "vertical-full-header",
9 | "condensed",
10 | "condensed-sticky",
11 | "horizontal",
12 | "horizontal-sticky",
13 | ] as const;
14 | export const appLayoutMd: readonly PropertyValueDescription[] = [
15 | {
16 | value: "vertical",
17 | description:
18 | "This layout puts the navigation bar on the left side and displays its items vertically. The main content is aligned to the right (including the header and the footer), and its content is a single scroll container; every part of it moves as you scroll the page. This layout does not display the logo in the app header.",
19 | },
20 | {
21 | value: "vertical-sticky",
22 | description:
23 | "Similar to `vertical`, the header and the navigation bar dock to the top of the main content's viewport, while the footer sticks to the bottom. This layout does not display the logo in the app header.",
24 | },
25 | {
26 | value: "vertical-full-header",
27 | description:
28 | "Similar to `vertical-sticky`. However, the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom.",
29 | },
30 | {
31 | value: "condensed",
32 | description:
33 | "Similar to `horizontal`. However, the header and the navigation bar are in a single header block. (default)",
34 | },
35 | {
36 | value: "condensed-sticky",
37 | description: "However, the header and the navigation bar are in a single header block.",
38 | },
39 | {
40 | value: "horizontal",
41 | description:
42 | "This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page.",
43 | },
44 | {
45 | value: "horizontal-sticky",
46 | description:
47 | "Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom.",
48 | },
49 | ] as const;
50 |
51 | export const appLayouts: string[] = [...appLayoutNames];
52 | export type AppLayoutType = (typeof appLayoutNames)[number];
53 |
54 | export interface IAppLayoutContext {
55 | layout: AppLayoutType;
56 | navPanelVisible: boolean;
57 | drawerVisible: boolean;
58 | showDrawer: () => void;
59 | hideDrawer: () => void;
60 | toggleDrawer: () => void;
61 | hasRegisteredNavPanel: boolean;
62 | hasRegisteredHeader: boolean;
63 | navPanelDef?: ComponentDef;
64 | logoContentDef?: ComponentDef;
65 | logo?: string;
66 | logoDark?: string;
67 | logoLight?: string;
68 | registerSubNavPanelSlot?: (slot: HTMLElement) => void;
69 | subNavPanelSlot?: HTMLElement;
70 | scrollWholePage?: boolean;
71 | isFullVerticalWidth?: boolean;
72 | isNested?: boolean;
73 | }
74 |
75 | export const AppLayoutContext = createContext<IAppLayoutContext | null>(null);
76 |
77 | export function useAppLayoutContext() {
78 | return useContext(AppLayoutContext);
79 | }
80 |
```
--------------------------------------------------------------------------------
/.github/workflows/run-all-tests.yml:
--------------------------------------------------------------------------------
```yaml
1 | name: All Tests (nightly run)
2 |
3 | concurrency: # Concurrency ensures that only a single job or workflow using the same concurrency group will run at a time.
4 | group: component-e2e-testing-nightly
5 | cancel-in-progress: true
6 |
7 | on:
8 | workflow_dispatch:
9 | schedule:
10 | - cron: "39 1 * * *"
11 | jobs:
12 | check-commit:
13 | runs-on: ubuntu-latest
14 | env:
15 | NODE_OPTIONS: "--max-old-space-size=8192"
16 | outputs:
17 | should_test: ${{ steps.check.outputs.should_test }}
18 | steps:
19 | - uses: actions/checkout@v4
20 | - id: check
21 | name: Determine if the commit has been tested already
22 | run: |
23 | # Always run tests if triggered by workflow_dispatch
24 | if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
25 | echo "Workflow dispatch triggered, always run tests"
26 | echo "should_test=true" >> $GITHUB_OUTPUT
27 | exit 0
28 | fi
29 |
30 | current_time_epoch=$(date +%s)
31 | last_commit_time_epoch=$(git log -1 --format=%ct)
32 | one_day_epoch=$((60 * 60 * 24))
33 | threshold_time=$((last_commit_time_epoch + one_day_epoch))
34 |
35 | if [ $current_time_epoch -gt $threshold_time ]; then
36 | echo "Last commit is older than 24 hours, skipping tests"
37 | echo "should_test=false" >> $GITHUB_OUTPUT
38 | else
39 | echo "Last commit is within the last 24 hours, will not skip tests"
40 | echo "should_test=true" >> $GITHUB_OUTPUT
41 | fi
42 | test:
43 | needs: check-commit
44 | if: needs.check-commit.outputs.should_test == 'true'
45 | timeout-minutes: 60
46 | runs-on: ubuntu-latest
47 | env:
48 | NODE_OPTIONS: "--max-old-space-size=8192"
49 | steps:
50 | - uses: actions/checkout@v4
51 | - uses: actions/setup-node@v4
52 | with:
53 | node-version: 22
54 | cache: "npm"
55 | - name: Install node dependencies
56 | run: npm ci --prefer-offline
57 | - name: Cache for Turbo
58 | uses: rharkor/[email protected]
59 | - name: Store Playwright's Version
60 | run: |
61 | PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | sort | head -n 1)
62 | echo "Playwright's Version: $PLAYWRIGHT_VERSION"
63 | echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
64 | - name: Cache Playwright Browsers for Playwright's Version
65 | id: cache-playwright-browsers
66 | uses: actions/cache@v4
67 | with:
68 | path: ~/.cache/ms-playwright
69 | key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
70 | - name: Install Playwright Browsers
71 | if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
72 | run: npx playwright install --with-deps
73 | - name: run some tests
74 | run: npm run test-xmlui
75 | - uses: actions/upload-artifact@v4
76 | with:
77 | name: playwright-report
78 | path: xmlui/playwright-report/
79 | retention-days: 30
80 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/common/input-stream.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 | import { InputStream } from "../../../src/parsers/common/InputStream";
3 |
4 | describe("InputStream", () => {
5 | it("Builds from string", () => {
6 | // --- Act
7 | const is = new InputStream("hello");
8 |
9 | // --- Assert
10 | expect(is.position).equal(0);
11 | expect(is.line).equal(1);
12 | expect(is.column).equal(0);
13 | expect(is.source).equal("hello");
14 | });
15 |
16 | it("Peek #1", () => {
17 | // --- Arrange
18 | const is = new InputStream("hello");
19 |
20 | // --- Act
21 | const ch = is.peek();
22 |
23 | // --- Assert
24 | expect(ch).equal("h");
25 | expect(is.position).equal(0);
26 | expect(is.line).equal(1);
27 | expect(is.column).equal(0);
28 | });
29 |
30 | it("Peek #3", () => {
31 | // --- Arrange
32 | const is = new InputStream("hello");
33 | is.get();
34 | is.get();
35 |
36 | // --- Act
37 | const ch = is.peek();
38 |
39 | // --- Assert
40 | expect(ch).equal("l");
41 | expect(is.position).equal(2);
42 | expect(is.line).equal(1);
43 | expect(is.column).equal(2);
44 | });
45 |
46 | it("Peek #5", () => {
47 | // --- Arrange
48 | const is = new InputStream("hello");
49 | is.get();
50 | is.get();
51 | is.get();
52 | is.get();
53 | is.get();
54 |
55 | // --- Act
56 | const ch = is.peek();
57 |
58 | // --- Assert
59 | expect(ch).equal(null);
60 | expect(is.position).equal(5);
61 | expect(is.line).equal(1);
62 | expect(is.column).equal(5);
63 | });
64 |
65 | it("Peek with new line #1", () => {
66 | // --- Arrange
67 | const is = new InputStream("he\nllo");
68 | is.get();
69 | is.get();
70 |
71 | // --- Act
72 | const ch = is.peek();
73 |
74 | // --- Assert
75 | expect(ch).equal("\n");
76 | expect(is.position).equal(2);
77 | expect(is.line).equal(1);
78 | expect(is.column).equal(2);
79 | });
80 |
81 | it("Get #1", () => {
82 | // --- Arrange
83 | const is = new InputStream("hello");
84 |
85 | // --- Act
86 | const ch = is.get();
87 |
88 | // --- Assert
89 | expect(ch).equal("h");
90 | expect(is.position).equal(1);
91 | expect(is.line).equal(1);
92 | expect(is.column).equal(1);
93 | });
94 |
95 | it("Get #3", () => {
96 | // --- Arrange
97 | const is = new InputStream("hello");
98 | is.get();
99 | is.get();
100 |
101 | // --- Act
102 | const ch = is.get();
103 |
104 | // --- Assert
105 | expect(ch).equal("l");
106 | expect(is.position).equal(3);
107 | expect(is.line).equal(1);
108 | expect(is.column).equal(3);
109 | });
110 |
111 | it("Get #5", () => {
112 | // --- Arrange
113 | const is = new InputStream("hello");
114 | is.get();
115 | is.get();
116 | is.get();
117 | is.get();
118 | is.get();
119 |
120 | // --- Act
121 | const ch = is.get();
122 |
123 | // --- Assert
124 | expect(ch).equal(null);
125 | expect(is.position).equal(5);
126 | expect(is.line).equal(1);
127 | expect(is.column).equal(5);
128 | });
129 |
130 | it("Get with new line #1", () => {
131 | // --- Arrange
132 | const is = new InputStream("he\nllo");
133 | is.get();
134 | is.get();
135 |
136 | // --- Act
137 | const ch = is.get();
138 |
139 | // --- Assert
140 | expect(ch).equal("\n");
141 | expect(is.position).equal(3);
142 | expect(is.line).equal(2);
143 | expect(is.column).equal(0);
144 | });
145 | });
146 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H1.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h1 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H1 testId="h1">Test Heading</H1>`);
10 |
11 | const driver = await createHeadingDriver("h1");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h1 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h1");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H1 testId="h1" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h1");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h1 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h1");
34 | });
35 |
36 | test("is equivalent to Heading with level='h1'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h1">Heading Content</Heading>
40 | <H1 testId="h1">H1 Content</H1>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h1Driver = await createHeadingDriver("h1");
46 |
47 | // Both should render as h1 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h1TagName = await h1Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h1");
52 | expect(h1TagName.toLowerCase()).toBe("h1");
53 | expect(headingTagName).toEqual(h1TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h1Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H1 testId="h1" level="h3">Should be H1</H1>`);
62 |
63 | const driver = await createHeadingDriver("h1");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H1");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h1 despite level="h3" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h1");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H2.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h2 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H2 testId="h2">Test Heading</H2>`);
10 |
11 | const driver = await createHeadingDriver("h2");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h2 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h2");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H2 testId="h2" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h2");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h2 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h2");
34 | });
35 |
36 | test("is equivalent to Heading with level='h2'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h2">Heading Content</Heading>
40 | <H2 testId="h2">H2 Content</H2>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h2Driver = await createHeadingDriver("h2");
46 |
47 | // Both should render as h2 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h2TagName = await h2Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h2");
52 | expect(h2TagName.toLowerCase()).toBe("h2");
53 | expect(headingTagName).toEqual(h2TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h2Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H2 testId="h2" level="h4">Should be H2</H2>`);
62 |
63 | const driver = await createHeadingDriver("h2");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H2");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h2 despite level="h4" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h2");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H3.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h3 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H3 testId="h3">Test Heading</H3>`);
10 |
11 | const driver = await createHeadingDriver("h3");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h3 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h3");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H3 testId="h3" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h3");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h3 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h3");
34 | });
35 |
36 | test("is equivalent to Heading with level='h3'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h3">Heading Content</Heading>
40 | <H3 testId="h3">H3 Content</H3>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h3Driver = await createHeadingDriver("h3");
46 |
47 | // Both should render as h3 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h3TagName = await h3Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h3");
52 | expect(h3TagName.toLowerCase()).toBe("h3");
53 | expect(headingTagName).toEqual(h3TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h3Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H3 testId="h3" level="h1">Should be H3</H3>`);
62 |
63 | const driver = await createHeadingDriver("h3");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H3");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h3 despite level="h1" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h3");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H4.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h4 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H4 testId="h4">Test Heading</H4>`);
10 |
11 | const driver = await createHeadingDriver("h4");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h4 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h4");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H4 testId="h4" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h4");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h4 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h4");
34 | });
35 |
36 | test("is equivalent to Heading with level='h4'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h4">Heading Content</Heading>
40 | <H4 testId="h4">H4 Content</H4>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h4Driver = await createHeadingDriver("h4");
46 |
47 | // Both should render as h4 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h4TagName = await h4Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h4");
52 | expect(h4TagName.toLowerCase()).toBe("h4");
53 | expect(headingTagName).toEqual(h4TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h4Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H4 testId="h4" level="h1">Should be H4</H4>`);
62 |
63 | const driver = await createHeadingDriver("h4");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H4");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h4 despite level="h1" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h4");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H5.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h5 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H5 testId="h5">Test Heading</H5>`);
10 |
11 | const driver = await createHeadingDriver("h5");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h5 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h5");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H5 testId="h5" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h5");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h5 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h5");
34 | });
35 |
36 | test("is equivalent to Heading with level='h5'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h5">Heading Content</Heading>
40 | <H5 testId="h5">H5 Content</H5>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h5Driver = await createHeadingDriver("h5");
46 |
47 | // Both should render as h5 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h5TagName = await h5Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h5");
52 | expect(h5TagName.toLowerCase()).toBe("h5");
53 | expect(headingTagName).toEqual(h5TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h5Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H5 testId="h5" level="h1">Should be H5</H5>`);
62 |
63 | const driver = await createHeadingDriver("h5");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H5");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h5 despite level="h1" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h5");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H6.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders as h6 level heading", async ({ initTestBed, createHeadingDriver }) => {
9 | await initTestBed(`<H6 testId="h6">Test Heading</H6>`);
10 |
11 | const driver = await createHeadingDriver("h6");
12 |
13 | await expect(driver.component).toBeVisible();
14 | await expect(driver.component).toContainText("Test Heading");
15 | await expect(driver.component).toHaveRole("heading");
16 |
17 | // Verify it renders as h6 HTML element
18 | const tagName = await driver.getComponentTagName();
19 | expect(tagName.toLowerCase()).toBe("h6");
20 | });
21 |
22 | test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 | await initTestBed(`<H6 testId="h6" value="Value Property Text" />`);
24 |
25 | const driver = await createHeadingDriver("h6");
26 |
27 | await expect(driver.component).toBeVisible();
28 | await expect(driver.component).toContainText("Value Property Text");
29 | await expect(driver.component).toHaveRole("heading");
30 |
31 | // Verify it renders as h6 HTML element
32 | const tagName = await driver.getComponentTagName();
33 | expect(tagName.toLowerCase()).toBe("h6");
34 | });
35 |
36 | test("is equivalent to Heading with level='h6'", async ({ initTestBed, createHeadingDriver }) => {
37 | await initTestBed(`
38 | <Fragment>
39 | <Heading testId="heading" level="h6">Heading Content</Heading>
40 | <H6 testId="h6">H6 Content</H6>
41 | </Fragment>
42 | `);
43 |
44 | const headingDriver = await createHeadingDriver("heading");
45 | const h6Driver = await createHeadingDriver("h6");
46 |
47 | // Both should render as h6 elements
48 | const headingTagName = await headingDriver.getComponentTagName();
49 | const h6TagName = await h6Driver.getComponentTagName();
50 |
51 | expect(headingTagName.toLowerCase()).toBe("h6");
52 | expect(h6TagName.toLowerCase()).toBe("h6");
53 | expect(headingTagName).toEqual(h6TagName);
54 |
55 | // Both should have heading role
56 | await expect(headingDriver.component).toHaveRole("heading");
57 | await expect(h6Driver.component).toHaveRole("heading");
58 | });
59 |
60 | test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 | await initTestBed(`<H6 testId="h6" level="h1">Should be H6</H6>`);
62 |
63 | const driver = await createHeadingDriver("h6");
64 |
65 | await expect(driver.component).toBeVisible();
66 | await expect(driver.component).toContainText("Should be H6");
67 | await expect(driver.component).toHaveRole("heading");
68 |
69 | // Should always be h6 despite level="h1" prop (this is the expected behavior)
70 | const tagName = await driver.getComponentTagName();
71 | expect(tagName.toLowerCase()).toBe("h6");
72 | });
73 | });
74 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/ComponentViewer.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { InspectorDialog } from "./devtools/InspectorDialog";
2 | import AppWithCodeViewNative from "../components/NestedApp/AppWithCodeViewNative";
3 | import React, { useMemo } from "react";
4 | import { useDevTools } from "./InspectorContext";
5 | import { Tooltip } from "../components/NestedApp/Tooltip";
6 | import styles from "../components/NestedApp/NestedApp.module.scss";
7 | import { AiOutlineClose } from "react-icons/ai";
8 | import { useAppContext } from "./AppContext";
9 |
10 | export const ComponentViewer = () => {
11 | const { mockApi, setIsOpen, isOpen, inspectedNode, clickPosition, projectCompilation, sources } =
12 | useDevTools();
13 |
14 | const { appGlobals } = useAppContext();
15 |
16 | const components = useMemo<string[]>(() => {
17 | if (!projectCompilation) {
18 | return [];
19 | }
20 | return projectCompilation.components.map((component) => {
21 | return component.markupSource;
22 | });
23 | }, [projectCompilation]);
24 |
25 | const value = useMemo(() => {
26 | const compSrc = inspectedNode?.debug?.source;
27 |
28 | if (!compSrc) {
29 | return "";
30 | }
31 | if (!sources) {
32 | return "";
33 | }
34 | const { start, end, fileId } = compSrc;
35 | const slicedSrc = sources[fileId].slice(start, end);
36 |
37 | let dropEmptyLines = true;
38 | const prunedLines: Array<string> = [];
39 | let trimBeginCount: number | undefined = undefined;
40 | slicedSrc.split("\n").forEach((line) => {
41 | if (line.trim() === "" && dropEmptyLines) {
42 | //drop empty lines from the beginning
43 | return;
44 | } else {
45 | dropEmptyLines = false;
46 | prunedLines.push(line);
47 | const startingWhiteSpaces = line.search(/\S|$/);
48 | if (
49 | line.trim() !== "" &&
50 | (trimBeginCount === undefined || startingWhiteSpaces < trimBeginCount)
51 | ) {
52 | trimBeginCount = startingWhiteSpaces;
53 | }
54 | }
55 | });
56 | return prunedLines
57 | .map((line) => line.slice(trimBeginCount).replace(/inspect="true"/g, ""))
58 | .join("\n");
59 | }, [inspectedNode, sources]);
60 |
61 | return process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
62 | isOpen &&
63 | inspectedNode !== null ? (
64 | <InspectorDialog isOpen={isOpen} setIsOpen={setIsOpen} clickPosition={clickPosition}>
65 | <AppWithCodeViewNative
66 | height={"500px"}
67 | allowPlaygroundPopup
68 | initiallyShowCode={appGlobals?.initiallyShowCode ?? true}
69 | splitView={true}
70 | controlsWidth={"120px"}
71 | closeButton={
72 | <Tooltip
73 | trigger={
74 | <button
75 | className={styles.headerButton}
76 | onClick={() => {
77 | setIsOpen(false);
78 | }}
79 | >
80 | <AiOutlineClose />
81 | </button>
82 | }
83 | label="Close"
84 | />
85 | }
86 | markdown={`\`\`\`xmlui
87 | ${value}
88 | \`\`\``}
89 | api={mockApi}
90 | app={value}
91 | components={components}
92 | />
93 | </InspectorDialog>
94 | ) : null;
95 | };
96 |
```