This is page 52 of 186. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-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
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── 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.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Table/Table.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 | );
6 |
7 | @function createThemeVar($componentVariable) {
8 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
9 | @return t.getThemeVar($themeVars, $componentVariable);
10 | }
11 |
12 | $component: "Table";
13 | $textColor-pagination-Table: createThemeVar("textColor-pagination-#{$component}");
14 | $backgroundColor-Table: createThemeVar("backgroundColor-#{$component}");
15 | $textColor-Table: createThemeVar("textColor-#{$component}");
16 | $backgroundColor-row-Table: createThemeVar("backgroundColor-row-#{$component}");
17 | $backgroundColor-row-Table--hover: createThemeVar("backgroundColor-row-#{$component}--hover");
18 | $backgroundColor-selected-Table: createThemeVar("backgroundColor-selected-#{$component}");
19 | $backgroundColor-selected-Table--hover: createThemeVar("backgroundColor-selected-#{$component}--hover");
20 | $backgroundColor-heading-Table: createThemeVar("backgroundColor-heading-#{$component}");
21 | $backgroundColor-heading-Table--hover: createThemeVar("backgroundColor-heading-#{$component}--hover");
22 | $backgroundColor-heading-Table--active: createThemeVar("backgroundColor-heading-#{$component}--active");
23 | $themeVars: t.composePaddingVars($themeVars, "heading-#{$component}");
24 | $themeVars: t.composePaddingVars($themeVars, "cell-#{$component}");
25 | $paddingHorizontal-cell-first-Table: createThemeVar("paddingHorizontal-cell-first-#{$component}");
26 | $paddingHorizontal-cell-last-Table: createThemeVar("paddingHorizontal-cell-last-#{$component}");
27 | $themeVars: t.composeBorderVars($themeVars, "cell-#{$component}");
28 | $themeVars: t.composeBorderVars($themeVars, $component);
29 | $backgroundColor-pagination-Table: createThemeVar("backgroundColor-pagination-#{$component}");
30 | $textColor-heading-Table: createThemeVar("textColor-heading-#{$component}");
31 | $fontWeight-row-Table: createThemeVar("fontWeight-row-#{$component}");
32 | $fontSize-row-Table: createThemeVar("fontSize-row-#{$component}");
33 | $fontWeight-heading-Table: createThemeVar("fontWeight-heading-#{$component}");
34 | $fontSize-heading-Table: createThemeVar("fontSize-heading-#{$component}");
35 | $textTransform-heading-Table: createThemeVar("textTransform-heading-#{$component}");
36 | $borderRadius-Table: createThemeVar("borderRadius-#{$component}");
37 |
38 | // Variables for @layer section
39 | $outlineWidth-heading-Table--focus: createThemeVar('outlineWidth-heading-#{$component}--focus');
40 | $outlineColor-heading-Table--focus: createThemeVar('outlineColor-heading-#{$component}--focus');
41 | $outlineStyle-heading-Table--focus: createThemeVar('outlineStyle-heading-#{$component}--focus');
42 | $outlineOffset-heading-Table--focus: createThemeVar('outlineOffset-heading-#{$component}--focus');
43 | $borderBottom-cell-Table: createThemeVar("borderBottom-cell-Table");
44 | $borderBottom-last-row-Table: createThemeVar("borderBottom-last-row-Table");
45 | $borderColor-cell-Table: createThemeVar("borderColor-cell-Table");
46 |
47 | @layer components {
48 | .wrapper {
49 | width: 100%;
50 | outline: none;
51 | overflow: auto;
52 | isolation: isolate;
53 | border-radius: $borderRadius-Table;
54 | @include t.borderVars($themeVars, $component);
55 |
56 | &.noScroll {
57 | overflow-y: initial;
58 | }
59 | }
60 |
61 |
62 | .headerWrapper,
63 | .tableBody {
64 | display: inline-block;
65 | min-width: 100%;
66 | background-color: $backgroundColor-Table;
67 | }
68 |
69 | .clickableHeader {
70 | width: 100%;
71 | height: 100%;
72 | color: $textColor-heading-Table;
73 | background-color: transparent;
74 | border: none;
75 | transition: color 0.2s, background-color 0.2s;
76 | cursor: pointer;
77 | @include t.paddingVars($themeVars, "heading-#{$component}");
78 |
79 | .headerContent {
80 | padding: 0;
81 | }
82 |
83 | &:not([disabled]) {
84 | &:hover {
85 | background-color: $backgroundColor-heading-Table--hover;
86 | }
87 |
88 | &:active {
89 | background-color: $backgroundColor-heading-Table--active;
90 | }
91 |
92 | &:focus-visible {
93 | outline-width: $outlineWidth-heading-Table--focus;
94 | outline-color: $outlineColor-heading-Table--focus;
95 | outline-style: $outlineStyle-heading-Table--focus;
96 | outline-offset: $outlineOffset-heading-Table--focus;
97 |
98 | }
99 | }
100 | }
101 |
102 | .headerContent {
103 | display: flex;
104 | flex-direction: row;
105 | align-items: center;
106 | gap: t.$space-1;
107 | max-width: 100%;
108 | text-transform: $textTransform-heading-Table;
109 | font-size: $fontSize-heading-Table;
110 | color: $textColor-heading-Table;
111 | font-weight: $fontWeight-heading-Table;
112 | user-select: text;
113 | @include t.paddingVars($themeVars, "heading-#{$component}");
114 | }
115 |
116 | .headerRow {
117 | height: 100%;
118 | background-color: $backgroundColor-heading-Table;
119 | }
120 |
121 | .columnCell,
122 | .cell {
123 | display: flex;
124 | align-items: center;
125 | white-space: nowrap;
126 | text-overflow: ellipsis;
127 | user-select: text;
128 | overflow: hidden;
129 |
130 | &.alignTop {
131 | align-items: flex-start;
132 | }
133 |
134 | &.alignCenter {
135 | align-items: center;
136 | }
137 |
138 | &.alignBottom {
139 | align-items: flex-end;
140 | }
141 | }
142 |
143 | .table {
144 | display: block;
145 | color: $textColor-Table;
146 |
147 | .row,
148 | .headerRow {
149 | display: flex;
150 | flex-direction: row;
151 | border-bottom: $borderBottom-cell-Table;
152 | user-select: none;
153 | //background-color: inherit;
154 |
155 | .checkBoxWrapper {
156 | font-size: 1rem;
157 | visibility: hidden;
158 |
159 | &.showInHeader {
160 | visibility: visible;
161 | }
162 | }
163 |
164 | &:hover,
165 | &.selected,
166 | &:focus-within,
167 | &.allSelected {
168 | .checkBoxWrapper {
169 | visibility: visible;
170 | }
171 | }
172 |
173 | .columnCell:first-child {
174 | .headerContent {
175 | padding-left: $paddingHorizontal-cell-first-Table;
176 | }
177 |
178 | >button {
179 | padding-left: $paddingHorizontal-cell-first-Table;
180 |
181 | .headerContent {
182 | padding-left: 0;
183 | }
184 | }
185 | }
186 |
187 | .columnCell:last-child {
188 | .headerContent {
189 | padding-right: $paddingHorizontal-cell-last-Table;
190 | }
191 |
192 | >button {
193 | padding-right: $paddingHorizontal-cell-last-Table;
194 |
195 | .headerContent {
196 | padding-right: 0;
197 | }
198 | }
199 | }
200 |
201 | .cell:first-child {
202 | .cellContent {
203 | padding-left: $paddingHorizontal-cell-first-Table;
204 | border-left: 0;
205 | }
206 |
207 | }
208 |
209 | .cell:last-child {
210 | .cellContent {
211 | padding-right: $paddingHorizontal-cell-last-Table;
212 | border-right: 0;
213 | }
214 | }
215 | }
216 |
217 | .row {
218 | font-size: $fontSize-row-Table;
219 | font-weight: $fontWeight-row-Table;
220 | background-color: $backgroundColor-row-Table;
221 |
222 | &.selected {
223 | background-color: $backgroundColor-selected-Table;
224 |
225 | .cell {
226 | background-color: $backgroundColor-selected-Table;
227 |
228 | }
229 | }
230 |
231 | &:hover {
232 | background-color: $backgroundColor-row-Table--hover;
233 |
234 | .cell {
235 | background-color: $backgroundColor-row-Table--hover;
236 | }
237 | }
238 |
239 | &.selected.focused {
240 | background-color: $backgroundColor-selected-Table;
241 |
242 | .cell {
243 | background-color: $backgroundColor-selected-Table;
244 | }
245 | }
246 |
247 | &.selected:hover {
248 | background-color: $backgroundColor-selected-Table--hover;
249 |
250 | .cell {
251 | background-color: $backgroundColor-selected-Table--hover;
252 | }
253 | }
254 |
255 | &.disabled {
256 | pointer-events: none;
257 | opacity: 0.6;
258 | }
259 |
260 | &:last-child{
261 | border-bottom: $borderBottom-last-row-Table;
262 | }
263 |
264 | &.noBottomBorder:last-child {
265 | border-bottom: none;
266 | }
267 | }
268 | }
269 |
270 | .cellContent {
271 | overflow: hidden;
272 | text-overflow: ellipsis;
273 | max-width: 100%;
274 | @include t.paddingVars($themeVars, "cell-#{$component}");
275 | }
276 |
277 | .headerWrapper {
278 | position: sticky;
279 | top: 0;
280 | z-index: 2;
281 | }
282 |
283 | .columnCell {
284 | background-color: $backgroundColor-heading-Table;
285 | text-align: start;
286 | white-space: nowrap;
287 | text-overflow: ellipsis;
288 | padding: 0;
289 | }
290 |
291 | .noRows {
292 | width: 100%;
293 | text-align: center;
294 | margin-top: t.$space-16;
295 | }
296 |
297 | .pagination {
298 | position: sticky;
299 | left: 0;
300 | padding-top: t.$space-4;
301 | padding-bottom: t.$space-4;
302 | padding-inline: t.$space-4;
303 | display: flex;
304 | flex-direction: row;
305 | align-items: center;
306 | justify-content: flex-end;
307 | gap: t.$space-8;
308 | width: 100%;
309 | margin: 0 auto;
310 | background-color: $backgroundColor-pagination-Table;
311 | }
312 |
313 | .paginationLabel {
314 | color: $textColor-pagination-Table;
315 | font-size: t.$fontSize-sm;
316 | }
317 |
318 | .paginationSelect {
319 | color: inherit;
320 | background-color: transparent;
321 | margin-left: t.$space-4;
322 | }
323 |
324 | .paginationButtons {
325 | display: flex;
326 | flex-direction: row;
327 | }
328 |
329 | .searchIconWrapper {
330 | width: 32px;
331 | display: flex;
332 | align-items: center;
333 | justify-content: center;
334 | }
335 |
336 | .loadingWrapper {
337 | display: flex;
338 | flex-direction: row;
339 | justify-content: center;
340 | padding-top: t.$space-2;
341 | padding-bottom: t.$space-2;
342 | }
343 |
344 | .checkBoxWrapper {
345 | opacity: 0.5;
346 |
347 | &:hover {
348 | opacity: 1;
349 | }
350 |
351 | // Force hover state for extended interaction zone
352 | &.forceHoverWrapper {
353 | opacity: 1;
354 | }
355 | }
356 |
357 | .resizer {
358 | position: absolute;
359 | top: 0;
360 | height: 100%;
361 | width: 6px;
362 | cursor: col-resize;
363 | user-select: none;
364 | touch-action: none;
365 | right: 0;
366 | overflow: visible;
367 | display: flex;
368 | flex-direction: row;
369 | align-items: center;
370 | justify-content: flex-end;
371 |
372 | &:before {
373 | content: '';
374 | width: 1px;
375 | height: 100%;
376 | background: $borderColor-cell-Table;
377 | }
378 | }
379 |
380 | .resizer.isResizing {
381 | opacity: 1;
382 |
383 | &:before {
384 | box-shadow: t.$boxShadow;
385 | }
386 | }
387 |
388 | @media (hover: hover) {
389 | .resizer {
390 | opacity: 0;
391 | }
392 |
393 | *:hover>.resizer {
394 | opacity: 1;
395 | }
396 | }
397 | }
398 |
399 | // --- We export the theme variables to add them to the component renderer
400 | :export {
401 | themeVars: t.json-stringify($themeVars);
402 | }
```
--------------------------------------------------------------------------------
/xmlui/src/components/Markdown/Markdown.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { SKIP_REASON } from "../../testing/component-test-helpers";
2 | import { expect, test } from "../../testing/fixtures";
3 | import type { HeadingLevel } from "../Heading/abstractions";
4 |
5 | // --- Testing
6 |
7 | test.describe("smoke tests", { tag: "@smoke" }, () => {
8 | test("Markdown renders", async ({ initTestBed, createMarkdownDriver }) => {
9 | await initTestBed(`<Markdown />`);
10 | await expect((await createMarkdownDriver()).component).toBeAttached();
11 | });
12 |
13 | test("handles empty binding expression", async ({ initTestBed, createMarkdownDriver }) => {
14 | await initTestBed(`<Markdown><![CDATA[\@{}]]></Markdown>`);
15 | await expect((await createMarkdownDriver()).component).toHaveText("");
16 | });
17 |
18 | test("does not detect escaped empty expression #1", async ({
19 | initTestBed,
20 | createMarkdownDriver,
21 | }) => {
22 | await initTestBed(`<Markdown><![CDATA[\\@{}]]></Markdown>`);
23 | await expect((await createMarkdownDriver()).component).toHaveText("@{}");
24 | });
25 |
26 | test("does not detect escaped empty expression #2", async ({
27 | initTestBed,
28 | createMarkdownDriver,
29 | }) => {
30 | await initTestBed(`<Markdown><![CDATA[\@\\{}]]></Markdown>`);
31 | await expect((await createMarkdownDriver()).component).toHaveText("@{}");
32 | });
33 |
34 | test("does not detect escaped expression #1", async ({ initTestBed, createMarkdownDriver }) => {
35 | await initTestBed(`<Markdown><![CDATA[\\@{1}]]></Markdown>`);
36 | await expect((await createMarkdownDriver()).component).toHaveText("@{1}");
37 | });
38 |
39 | test("does not detect escaped expression #2", async ({ initTestBed, createMarkdownDriver }) => {
40 | await initTestBed(`<Markdown><![CDATA[\@\\{1}]]></Markdown>`);
41 | await expect((await createMarkdownDriver()).component).toHaveText("@{1}");
42 | });
43 |
44 | test("handles only spaces binding expression", async ({ initTestBed, createMarkdownDriver }) => {
45 | await initTestBed(`<Markdown><![CDATA[\@{ }]]></Markdown>`);
46 | await expect((await createMarkdownDriver()).component).toHaveText("");
47 | });
48 |
49 | test("handles binding expression", async ({ initTestBed, createMarkdownDriver }) => {
50 | await initTestBed(`<Markdown><![CDATA[\@{1+1}]]></Markdown>`);
51 | await expect((await createMarkdownDriver()).component).toHaveText("2");
52 | });
53 |
54 | test("handles objects in binding expressions", async ({ initTestBed, createMarkdownDriver }) => {
55 | const expected = "{ a : 1, b: 'c' }";
56 | await initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
57 | await expect((await createMarkdownDriver()).component).toHaveText(`{"a":1,"b":"c"}`);
58 | });
59 |
60 | test("handles arrays in binding expressions", async ({ initTestBed, createMarkdownDriver }) => {
61 | const expected = "[ 1, 2, 3 ]";
62 | await initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
63 | await expect((await createMarkdownDriver()).component).toHaveText(`[1,2,3]`);
64 | });
65 |
66 | test("handles functions in binding expressions", async ({
67 | initTestBed,
68 | createMarkdownDriver,
69 | }) => {
70 | const SOURCE = "() => { const x = 1; console.log(x); return null; }";
71 | const EXPECTED = "[xmlui function]";
72 | await initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
73 | await expect((await createMarkdownDriver()).component).toHaveText(EXPECTED);
74 | });
75 |
76 | test("handles nested objects in binding expressions", async ({
77 | initTestBed,
78 | createMarkdownDriver,
79 | }) => {
80 | const expected = "{ a : 1, b: { c: 1 } }";
81 | await initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
82 | await expect((await createMarkdownDriver()).component).toHaveText(`{"a":1,"b":{"c":1}}`);
83 | });
84 |
85 | test("handles functions nested in objects in binding expressions", async ({
86 | initTestBed,
87 | createMarkdownDriver,
88 | }) => {
89 | const SOURCE = "{ a: () => { const x = 1; console.log(x); return null; } }";
90 | const EXPECTED = '{"a":"[xmlui function]"}';
91 | await initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
92 | await expect((await createMarkdownDriver()).component).toHaveText(EXPECTED);
93 | });
94 |
95 | test("handles arrays nested in objects in binding expressions", async ({
96 | initTestBed,
97 | createMarkdownDriver,
98 | }) => {
99 | const expected = "{ a: [1, 2, 3] }";
100 | await initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
101 | await expect((await createMarkdownDriver()).component).toHaveText(`{"a":[1,2,3]}`);
102 | });
103 |
104 | test("handles arrays nested in functions in binding expressions", async ({
105 | initTestBed,
106 | createMarkdownDriver,
107 | }) => {
108 | const SOURCE = "() => { return [1, 2, 3]; }";
109 | const EXPECTED = "[xmlui function]";
110 | await initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
111 | await expect((await createMarkdownDriver()).component).toHaveText(EXPECTED);
112 | });
113 |
114 | test("handles complex expressions", async ({ initTestBed, createMarkdownDriver }) => {
115 | const SOURCE =
116 | "Hello there @{ {a : () => {}, x: null, b: { c: 3, d: 'asdadsda', e: () => {return null;} } } } How are you @{true || undefined || []}";
117 | const EXPECTED =
118 | 'Hello there {"a":"[xmlui function]","x":null,"b":{"c":3,"d":"asdadsda","e":"[xmlui function]"}} How are you true';
119 | await initTestBed(`<Markdown><![CDATA[${SOURCE}]]></Markdown>`);
120 | await expect((await createMarkdownDriver()).component).toHaveText(EXPECTED);
121 | });
122 |
123 | const headingLevelsWithMarkdown: Array<{ level: HeadingLevel; md: string }> = [
124 | { level: "h1", md: "# Heading" },
125 | { level: "h2", md: "## Heading" },
126 | { level: "h3", md: "### Heading" },
127 | { level: "h4", md: "#### Heading" },
128 | { level: "h5", md: "##### Heading" },
129 | { level: "h6", md: "###### Heading" },
130 | ];
131 | headingLevelsWithMarkdown.forEach(({ level, md }) => {
132 | test(`can render anchor link for '${level}'`, async ({ initTestBed, createMarkdownDriver }) => {
133 | const SOURCE = md;
134 | await initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
135 | const driver = await createMarkdownDriver();
136 | expect(await driver.hasHtmlElement("a")).toBe(true);
137 | });
138 | });
139 |
140 | test("show implicit anchor links", async ({ initTestBed, createMarkdownDriver }) => {
141 | const SOURCE = "## Heading";
142 | await initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
143 | const driver = await createMarkdownDriver();
144 | expect(await driver.hasHtmlElement("a")).toBe(true);
145 | });
146 |
147 | test("show explicit anchor links", async ({ initTestBed, createMarkdownDriver }) => {
148 | const SOURCE = "## Heading [#heading]";
149 | await initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
150 | const driver = await createMarkdownDriver();
151 | expect(await driver.hasHtmlElement("a")).toBe(true);
152 | });
153 |
154 | test("don't render implicit anchor links", async ({ initTestBed, createMarkdownDriver }) => {
155 | const SOURCE = "## Heading";
156 | await initTestBed(`<Markdown showHeadingAnchors="false"><![CDATA[${SOURCE}]]></Markdown>`);
157 | const driver = await createMarkdownDriver();
158 | expect(await driver.hasHtmlElement("a")).toBe(false);
159 | });
160 |
161 | test("don't render explicit anchor links", async ({ initTestBed, createMarkdownDriver }) => {
162 | const SOURCE = "## Heading [#heading]";
163 | await initTestBed(`<Markdown showHeadingAnchors="false"><![CDATA[${SOURCE}]]></Markdown>`);
164 | const driver = await createMarkdownDriver();
165 | expect(await driver.hasHtmlElement("a")).toBe(false);
166 | });
167 | });
168 |
169 | test("only renders if children are strings", async ({ initTestBed, createMarkdownDriver }) => {
170 | await initTestBed(`
171 | <Markdown>
172 | <Button label="Hey!" />
173 | </Markdown>
174 | `);
175 |
176 | // Check if page is empty (no text)
177 | const driver = await createMarkdownDriver();
178 | await expect(driver.component).toHaveText("");
179 | });
180 |
181 | test("renders if children are provided through CDATA", async ({ initTestBed, createMarkdownDriver }) => {
182 | await initTestBed(`
183 | <Markdown>
184 | <![CDATA[Hello World!]]>
185 | </Markdown>
186 | `);
187 |
188 | // Check if page is empty (no text)
189 | const driver = await createMarkdownDriver();
190 | await expect(driver.component).toHaveText("Hello World!");
191 | });
192 |
193 | test("renders code block", async ({ initTestBed, createMarkdownDriver }) => {
194 | const code = "```\n" + "I did not expect this\n" + "```";
195 | await initTestBed(`<Markdown><![CDATA[${code}]]></Markdown>`);
196 | const driver = await createMarkdownDriver();
197 | await expect(driver.component).toHaveText("I did not expect this");
198 | expect(await driver.hasHtmlElement(["pre", "code"])).toBeTruthy();
199 | });
200 |
201 | test("4space/1 tab indent is not code block by default", async ({
202 | initTestBed,
203 | createMarkdownDriver,
204 | }) => {
205 | // Note the formatting here: the line breaks and indentations are intentional
206 | const code = `
207 | _I did not expect this_
208 | `;
209 | await initTestBed(`<Markdown><![CDATA[${code}]]></Markdown>`);
210 | const driver = await createMarkdownDriver();
211 | await expect(driver.component).toHaveText("I did not expect this");
212 | expect(await driver.hasHtmlElement("em")).toBeTruthy();
213 | });
214 |
215 | test("removeIndents=false: 4space/1 tab indent is accounted for", async ({
216 | initTestBed,
217 | createMarkdownDriver,
218 | }) => {
219 | // Note the formatting here: the lack of indentations is intentional
220 | const code = `
221 | _I did not expect this_
222 | `;
223 | await initTestBed(`<Markdown removeIndents="false"><![CDATA[${code}]]></Markdown>`);
224 | const driver = await createMarkdownDriver();
225 | await expect(driver.component).toHaveText("I did not expect this");
226 | expect(await driver.hasHtmlElement("em")).toBeTruthy();
227 | });
228 |
229 | test("removeIndents=false: 4space/1 tab indent maps to a code block", async ({
230 | initTestBed,
231 | createMarkdownDriver,
232 | }) => {
233 | // Note the formatting here: the indentations are intentional
234 | const code = `
235 | _I did not expect this_
236 | `;
237 | await initTestBed(`<Markdown removeIndents="false"><![CDATA[${code}]]></Markdown>`);
238 | const driver = await createMarkdownDriver();
239 | await expect(driver.component).toHaveText("_I did not expect this_");
240 | expect(await driver.hasHtmlElement(["pre", "code"])).toBeTruthy();
241 | });
242 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/Tabs.md:
--------------------------------------------------------------------------------
```markdown
1 | %-DESC-START
2 |
3 | **Key features:**
4 | - **Content organization**: Efficiently displays multiple content sections in a single interface area
5 | - **Flexible orientation**: Supports both horizontal (tabs on top) and vertical (tabs on side) layouts
6 | - **Active tab control**: Programmatically set which tab is initially selected
7 | - **Custom header templates**: Configurable tab appearance via `headerTemplate` property
8 | - **Navigation methods**: Built-in methods for programmatic tab switching (`next()`, `prev()`, `setActiveTabIndex()`, `setActiveTabById()`)
9 | - **External ID support**: Optional `id` prop for TabItems with context exposure
10 | - **Dynamic content**: Works seamlessly with `Items` for data-driven tabs
11 |
12 | ## Using Tabs
13 |
14 | The component accepts only [TabItem](/components/TabItem) components as children. Other child components will not be displayed. Each [TabItem](/components/TabItem) has a `label` property for the tab button text, with content provided by placing child components within the [TabItem](/components/TabItem).
15 |
16 | ```xmlui-pg copy display name="Example: using Tabs" height="200px"
17 | <App>
18 | <Tabs>
19 | <TabItem label="Account">
20 | <Text>Account</Text>
21 | </TabItem>
22 | <TabItem label="Stream">
23 | <Text>Stream</Text>
24 | </TabItem>
25 | <TabItem label="Support">
26 | <Text>Support</Text>
27 | </TabItem>
28 | </Tabs>
29 | </App>
30 | ```
31 |
32 | ## Dynamic Tabs
33 |
34 | You can create `TabItem` children dynamically:
35 |
36 | ```xmlui-pg copy display name="Example: using Tabs with dynamic items" height="200px"
37 | <App>
38 | <Tabs>
39 | <Items data="{[1, 2, 3, 4]}">
40 | <TabItem label="Account {$item}">
41 | <Card title="Tab Content for Account {$item}"/>
42 | </TabItem>
43 | </Items>
44 | </Tabs>
45 | </App>
46 | ```
47 |
48 | %-DESC-END
49 |
50 | %-PROP-START headerTemplate
51 |
52 | ```xmlui-pg copy {3-6} display name="Example: headerTemplate" /headerTemplate/ height="200px"
53 | <App>
54 | <Tabs>
55 | <property name="headerTemplate">
56 | <Icon name="chevronright" />
57 | <Text color="green">Account {$header.index}</Text>
58 | </property>
59 | <Items data="{[
60 | {id: 1, name: 'AcmeCorp'},
61 | {id: 2, name: 'BetaLLC'},
62 | {id: 3, name: 'GammaInc'}]
63 | }">
64 | <TabItem label="Account {$item}">
65 | <Card title="Tab Content for Account {$item.name}"/>
66 | </TabItem>
67 | </Items>
68 | </Tabs>
69 | </App>
70 | ```
71 |
72 | The `headerTemplate` property allows you to customize the appearance of tab headers. The template receives a `$header` context variable with the following properties:
73 | - `id` (optional): External ID if provided to TabItem
74 | - `index`: Zero-based index of the tab
75 | - `label`: The tab's label text
76 | - `isActive`: Boolean indicating if this tab is currently active
77 |
78 | Individual tab items have an optional identifier, which is passed to the header template.
79 |
80 | ```xmlui-pg copy {3-5} display name="Example: headerTemplate" /headerTemplate/ height="200px"
81 | <App>
82 | <Tabs>
83 | <property name="headerTemplate">
84 | {$header.label}{$header.id ? ' | ID: ' + $header.id : ''}
85 | </property>
86 | <TabItem label="Home" id="home-tab">
87 | Home content
88 | </TabItem>
89 | <TabItem label="Accounts" id="accounts-tab">
90 | Accounts content
91 | </TabItem>
92 | <TabItem label="Settings">
93 | Settings content
94 | </TabItem>
95 | </Tabs>
96 | </App>
97 | ```
98 |
99 | > [!INFO] Individual `TabItem` children can customize their [header templates](./TabItem#headertemplate), too.
100 |
101 | %-PROP-END
102 |
103 | %-PROP-START tabAlignment
104 |
105 | The `tabAlignment` property controls how tabs are aligned within the tab header container in horizontal orientation. It accepts four values: `start`, `end`, `center`, and `stretch`.
106 |
107 | > [!NOTE] The `tabAlignment` property is ignored when `orientation` is set to `vertical` or when `accordionView` is enabled.
108 |
109 | **Alignment: start**
110 |
111 | Aligns tabs to the left side of the container:
112 |
113 | ```xmlui-pg copy display name="Example: tabAlignment='start'" /tabAlignment/ height="200px"
114 | <App>
115 | <Tabs tabAlignment="start" style="width: 100%">
116 | <TabItem label="Home">Home content</TabItem>
117 | <TabItem label="Profile">Profile content</TabItem>
118 | <TabItem label="Settings">Settings content</TabItem>
119 | </Tabs>
120 | </App>
121 | ```
122 |
123 | **Alignment: center**
124 |
125 | Centers tabs within the container:
126 |
127 | ```xmlui-pg copy display name="Example: tabAlignment='center'" /tabAlignment/ height="200px"
128 | <App>
129 | <Tabs tabAlignment="center" style="width: 100%">
130 | <TabItem label="Home">Home content</TabItem>
131 | <TabItem label="Profile">Profile content</TabItem>
132 | <TabItem label="Settings">Settings content</TabItem>
133 | </Tabs>
134 | </App>
135 | ```
136 |
137 | **Alignment: end**
138 |
139 | Aligns tabs to the right side of the container:
140 |
141 | ```xmlui-pg copy display name="Example: tabAlignment='end'" /tabAlignment/ height="200px"
142 | <App>
143 | <Tabs tabAlignment="end" style="width: 100%">
144 | <TabItem label="Home">Home content</TabItem>
145 | <TabItem label="Profile">Profile content</TabItem>
146 | <TabItem label="Settings">Settings content</TabItem>
147 | </Tabs>
148 | </App>
149 | ```
150 |
151 | **Alignment: stretch**
152 |
153 | Makes tabs fill the full width of the container, distributing them evenly:
154 |
155 | ```xmlui-pg copy display name="Example: tabAlignment='stretch'" /tabAlignment/ height="200px"
156 | <App>
157 | <Tabs tabAlignment="stretch" style="width: 100%">
158 | <TabItem label="Home">Home content</TabItem>
159 | <TabItem label="Profile">Profile content</TabItem>
160 | <TabItem label="Settings">Settings content</TabItem>
161 | </Tabs>
162 | </App>
163 | ```
164 |
165 | %-PROP-END
166 |
167 | %-PROP-START accordionView
168 |
169 | The `accordionView` property enables an accordion-like layout where tab headers are stacked vertically and only the active tab's content is visible. All tab headers remain visible, and clicking a header opens its content while closing others.
170 |
171 | > [!NOTE] When `accordionView` is enabled, the `orientation` property is ignored.
172 |
173 | ```xmlui-pg copy display name="Example: accordionView" /accordionView/ height="480px"
174 | <App>
175 | <Tabs accordionView="true">
176 | <TabItem label="Account Information">
177 | <Card title="Account Details">
178 | <Text>Your account is active and in good standing.</Text>
179 | <Text>Account ID: 12345</Text>
180 | <Text>Member since: January 2024</Text>
181 | </Card>
182 | </TabItem>
183 | <TabItem label="Billing & Payments">
184 | <Card title="Payment Methods">
185 | <Text>Current Plan: Professional</Text>
186 | <Text>Next billing date: November 1, 2025</Text>
187 | <Text>Payment method: xxxx 4242</Text>
188 | </Card>
189 | </TabItem>
190 | <TabItem label="Security Settings">
191 | <Card title="Security Options">
192 | <Text>Two-factor authentication: Enabled</Text>
193 | <Text>Last password change: September 15, 2025</Text>
194 | <Text>Active sessions: 2</Text>
195 | </Card>
196 | </TabItem>
197 | </Tabs>
198 | </App>
199 | ```
200 |
201 | The accordion view is particularly useful for mobile layouts or when you need to present expandable sections in a vertical format. Each section can be opened independently by clicking its header.
202 |
203 | ```xmlui-pg copy display name="Example: accordionView with dynamic content" /accordionView/ height="450px"
204 | <App>
205 | <Tabs accordionView="true">
206 | <Items data="{[
207 | {title: 'Overview', content: 'Dashboard and quick statistics'},
208 | {title: 'Reports', content: 'Monthly and annual reports'},
209 | {title: 'Analytics', content: 'User behavior and metrics'},
210 | {title: 'Export', content: 'Download data in various formats'}
211 | ]}">
212 | <TabItem label="{$item.title}">
213 | <Card>
214 | <Text>{$item.content}</Text>
215 | </Card>
216 | </TabItem>
217 | </Items>
218 | </Tabs>
219 | </App>
220 | ```
221 |
222 | %-PROP-END
223 |
224 | %-API-START next
225 |
226 | ```xmlui-pg copy display name="Example: next()" /next/ height="250px"
227 | <App>
228 | <Fragment>
229 | <Tabs id="myTabs">
230 | <TabItem label="Tab 1">Content 1</TabItem>
231 | <TabItem label="Tab 2">Content 2</TabItem>
232 | <TabItem label="Tab 3">Content 3</TabItem>
233 | </Tabs>
234 | <Button onClick="myTabs.next()">Next Tab</Button>
235 | </Fragment>
236 | </App>
237 | ```
238 |
239 | %-API-END
240 |
241 | %-EVENT-START didChange
242 |
243 | The event handler gets these parameters, which refer to the active tab after the change:
244 | - `index`: The active tab index
245 | - `id`: The identifier of the active tab (if not defined, the framework provides an auto-generated id)
246 | - `label`: The label of the active tab
247 |
248 | ```xmlui-pg copy display name="Example: didChange" /onDidChange/ height="200px"
249 | <App var.lastTab="(none)">
250 | <Tabs onDidChange="
251 | (newIndex, id, label) =>
252 | lastTab = newIndex + ': ' + label + ' (' + id + ')'
253 | ">
254 | <TabItem id="account" label="Account">
255 | <Text>Account</Text>
256 | </TabItem>
257 | <TabItem label="Stream">
258 | <Text>Stream</Text>
259 | </TabItem>
260 | <TabItem label="Support">
261 | <Text>Support</Text>
262 | </TabItem>
263 | </Tabs>
264 | <Text>Tab index changed to {lastTab}</Text>
265 | </App>
266 | ```
267 |
268 |
269 | %-EVENT-END
270 |
271 | %-API-START prev
272 |
273 | ```xmlui-pg copy display name="Example: prev()" /prev/ height="250px"
274 | <App>
275 | <Fragment>
276 | <Tabs id="myTabs">
277 | <TabItem label="Tab 1">Content 1</TabItem>
278 | <TabItem label="Tab 2">Content 2</TabItem>
279 | <TabItem label="Tab 3">Content 3</TabItem>
280 | </Tabs>
281 | <Button onClick="myTabs.prev()">Previous Tab</Button>
282 | </Fragment>
283 | </App>
284 | ```
285 |
286 | %-API-END
287 |
288 | %-API-START setActiveTabIndex
289 |
290 | ```xmlui-pg copy display name="Example: setActiveTabIndex()" /setActiveTabIndex/ height="250px"
291 | <App>
292 | <Fragment>
293 | <Tabs id="myTabs">
294 | <TabItem label="Tab 1">Content 1</TabItem>
295 | <TabItem label="Tab 2">Content 2</TabItem>
296 | <TabItem label="Tab 3">Content 3</TabItem>
297 | </Tabs>
298 | <Button onClick="myTabs.setActiveTabIndex(2)">Go to Tab 3 (by Index)</Button>
299 | </Fragment>
300 | </App>
301 | ```
302 |
303 | %-API-END
304 |
305 | %-API-START setActiveTabById
306 |
307 | ```xmlui-pg copy display name="Example: setActiveTabById()" /setActiveTabById/ height="250px"
308 | <App>
309 | <Fragment>
310 | <Tabs id="myTabs">
311 | <TabItem label="Home" id="home">Home Content</TabItem>
312 | <TabItem label="Settings" id="settings">Settings Content</TabItem>
313 | <TabItem label="Help" id="help">Help Content</TabItem>
314 | </Tabs>
315 | <Button onClick="myTabs.setActiveTabById('settings')">
316 | Go to Settings (by ID)
317 | </Button>
318 | </Fragment>
319 | </App>
320 | ```
321 |
322 | %-API-END
323 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/DropdownMenu/DropdownMenu.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./DropdownMenu.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import { alignmentOptionMd, buttonThemeMd, buttonVariantMd, iconPositionMd } from "../abstractions";
6 | import { createMetadata, d, dClick, dEnabled, dLabel, dTriggerTemplate } from "../metadata-helpers";
7 | import { Icon } from "../Icon/IconNative";
8 | import {
9 | defaultDropdownMenuProps,
10 | defaultMenuItemProps,
11 | DropdownMenu,
12 | MenuItem,
13 | MenuSeparator,
14 | SubMenuItem,
15 | } from "./DropdownMenuNative";
16 |
17 | const DDMCOMP = "DropdownMenu";
18 |
19 | export const DropdownMenuMd = createMetadata({
20 | status: "stable",
21 | description:
22 | "`DropdownMenu` provides a space-efficient way to present multiple options or " +
23 | "actions through a collapsible interface. When clicked, the trigger button reveals " +
24 | "a menu that can include items, separators, and nested submenus, making it ideal " +
25 | "for navigation, action lists, or any situation requiring many options without " +
26 | "permanent screen space.",
27 | props: {
28 | label: dLabel(),
29 | triggerTemplate: dTriggerTemplate(DDMCOMP),
30 | alignment: {
31 | description:
32 | "This property allows you to determine the alignment of the dropdown panel with " +
33 | "the displayed menu items.",
34 | valueType: "string",
35 | availableValues: alignmentOptionMd,
36 | defaultValue: defaultDropdownMenuProps.alignment,
37 | },
38 | enabled: dEnabled(),
39 | triggerButtonVariant: {
40 | description:
41 | `This property defines the theme variant of the \`Button\` as the dropdown menu's trigger. ` +
42 | `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
43 | valueType: "string",
44 | availableValues: buttonVariantMd,
45 | defaultValue: defaultDropdownMenuProps.triggerButtonVariant,
46 | },
47 | triggerButtonThemeColor: {
48 | description:
49 | `This property defines the theme color of the \`Button\` as the dropdown menu's trigger. ` +
50 | `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
51 | valueType: "string",
52 | availableValues: buttonThemeMd,
53 | defaultValue: defaultDropdownMenuProps.triggerButtonThemeColor,
54 | },
55 | triggerButtonIcon: {
56 | description:
57 | `This property defines the icon to display on the trigger button. You can change the default icon ` +
58 | `for all ${DDMCOMP} instances with the "icon.triggerButton:DropdownMenu" declaration in the app ` +
59 | `configuration file.`,
60 | defaultValue: defaultDropdownMenuProps.triggerButtonIcon,
61 | valueType: "string",
62 | },
63 | triggerButtonIconPosition: {
64 | description: `This property defines the position of the icon on the trigger button.`,
65 | defaultValue: defaultDropdownMenuProps.triggerButtonIconPosition,
66 | valueType: "string",
67 | availableValues: iconPositionMd,
68 | },
69 | },
70 | events: {
71 | willOpen: d(
72 | `This event fires when the \`${DDMCOMP}\` component is about to be opened. ` +
73 | `You can prevent opening the menu by returning \`false\` from the event handler. ` +
74 | `Otherwise, the menu will open at the end of the event handler like normal.`,
75 | ),
76 | },
77 | apis: {
78 | close: {
79 | description: `This method command closes the dropdown.`,
80 | signature: "close(): void",
81 | },
82 | open: {
83 | description: `This method command opens the dropdown.`,
84 | signature: "open(): void",
85 | },
86 | },
87 | themeVars: parseScssVar(styles.themeVars),
88 | limitThemeVarsToComponent: true,
89 | defaultThemeVars: {
90 | [`backgroundColor-${DDMCOMP}`]: "$color-surface-raised",
91 | [`minWidth-${DDMCOMP}`]: "160px",
92 | [`boxShadow-${DDMCOMP}`]: "$boxShadow-xl",
93 | [`borderStyle-${DDMCOMP}-content`]: "solid",
94 | [`borderRadius-${DDMCOMP}`]: "$borderRadius",
95 | },
96 | });
97 |
98 | export const dropdownMenuComponentRenderer = createComponentRenderer(
99 | DDMCOMP,
100 | DropdownMenuMd,
101 | ({ node, extractValue, renderChild, registerComponentApi, className, lookupEventHandler }) => {
102 | return (
103 | <DropdownMenu
104 | triggerTemplate={renderChild(node.props?.triggerTemplate)}
105 | label={extractValue(node.props?.label)}
106 | registerComponentApi={registerComponentApi}
107 | onWillOpen={lookupEventHandler("willOpen")}
108 | className={className}
109 | alignment={extractValue(node.props?.alignment)}
110 | disabled={!extractValue.asOptionalBoolean(node.props.enabled, true)}
111 | triggerButtonThemeColor={extractValue(node.props.triggerButtonThemeColor)}
112 | triggerButtonVariant={extractValue(node.props.triggerButtonVariant)}
113 | triggerButtonIcon={extractValue(node.props.triggerButtonIcon)}
114 | triggerButtonIconPosition={extractValue(node.props.triggerButtonIconPosition)}
115 | >
116 | {renderChild(node.children)}
117 | </DropdownMenu>
118 | );
119 | },
120 | );
121 |
122 | const MICOMP = "MenuItem";
123 |
124 | export const MenuItemMd = createMetadata({
125 | status: "stable",
126 | description:
127 | "`MenuItem` represents individual clickable items within dropdown menus and other " +
128 | "menu components. Each menu item can display text, icons, and respond to clicks " +
129 | "with either navigation or custom actions, making it the building block for " +
130 | "interactive menu systems.",
131 | docFolder: DDMCOMP,
132 | props: {
133 | iconPosition: {
134 | description: `This property allows you to determine the position of the icon displayed in the menu item.`,
135 | valueType: "string",
136 | availableValues: iconPositionMd,
137 | defaultValue: defaultMenuItemProps.iconPosition,
138 | },
139 | icon: {
140 | description: `This property names an optional icon to display with the menu item. You can use component-specific icons in the format "iconName:MenuItem".`,
141 | valueType: "string",
142 | },
143 | label: dLabel(),
144 | to: {
145 | description:
146 | `This property defines the URL of the menu item. If this property is defined (and the \`click\` ` +
147 | `event does not have an event handler), clicking the menu item navigates to this link.`,
148 | valueType: "string",
149 | },
150 | active: {
151 | description: `This property indicates if the specified menu item is active.`,
152 | valueType: "boolean",
153 | defaultValue: defaultMenuItemProps.active,
154 | },
155 | enabled: dEnabled(),
156 | },
157 | events: {
158 | click: dClick(MICOMP),
159 | },
160 | themeVars: parseScssVar(styles.themeVars),
161 | limitThemeVarsToComponent: true,
162 | defaultThemeVars: {
163 | [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
164 | [`color-${MICOMP}`]: "$textColor-primary",
165 | [`color-${MICOMP}--disabled`]: "$textColor--disabled",
166 | [`fontFamily-${MICOMP}`]: "$fontFamily",
167 | [`fontSize-${MICOMP}`]: "$fontSize-sm",
168 | [`paddingVertical-${MICOMP}`]: "$space-2",
169 | [`paddingHorizontal-${MICOMP}`]: "$space-3",
170 | [`backgroundColor-${MICOMP}--hover`]: "$backgroundColor-dropdown-item--hover",
171 | [`color-${MICOMP}--hover`]: "inherit",
172 | [`gap-${MICOMP}`]: "$space-2",
173 | [`color-${MICOMP}--active`]: "$color-primary",
174 | [`backgroundColor-${MICOMP}--active`]: "$backgroundColor-dropdown-item--active",
175 | light: {},
176 | dark: {},
177 | },
178 | });
179 |
180 | export const menuItemRenderer = createComponentRenderer(
181 | MICOMP,
182 | MenuItemMd,
183 | ({ node, renderChild, lookupEventHandler, lookupAction, extractValue, className }) => {
184 | const clickEventHandler = lookupEventHandler("click");
185 |
186 | let clickHandler;
187 | const to = extractValue(node.props.to);
188 | if (!clickEventHandler && to?.trim()) {
189 | const navigateAction = lookupAction("navigate", { signError: false });
190 | clickHandler = () => {
191 | navigateAction?.({ pathname: to });
192 | };
193 | }
194 | return (
195 | <MenuItem
196 | onClick={clickHandler}
197 | label={extractValue(node.props?.label)}
198 | className={className}
199 | iconPosition={extractValue(node.props.iconPosition)}
200 | icon={
201 | node.props?.icon && (
202 | <Icon name={extractValue(node.props.icon)} fallback={extractValue(node.props.icon)} />
203 | )
204 | }
205 | active={extractValue.asOptionalBoolean(node.props.active, false)}
206 | enabled={extractValue.asOptionalBoolean(node.props.enabled, true)}
207 | >
208 | {renderChild(node.children)}
209 | </MenuItem>
210 | );
211 | },
212 | );
213 |
214 | const SMCOMP = "SubMenuItem";
215 |
216 | export const SubMenuItemMd = createMetadata({
217 | status: "stable",
218 | description:
219 | "`SubMenuItem` creates hierarchical menu structures by acting as both a menu " +
220 | "item and a container for nested menu items. When clicked or hovered, it reveals " +
221 | "a submenu containing additional [MenuItem](/components/MenuItem), " +
222 | "[MenuSeparator](/components/MenuSeparator), or other " +
223 | "[SubMenuItem](/components/SubMenuItems) components, enabling complex multi-level " +
224 | "navigation and action organization.",
225 | docFolder: DDMCOMP,
226 | props: {
227 | label: dLabel(),
228 | triggerTemplate: dTriggerTemplate(SMCOMP),
229 | },
230 | });
231 |
232 | export const subMenuItemRenderer = createComponentRenderer(
233 | SMCOMP,
234 | SubMenuItemMd,
235 | ({ node, renderChild, extractValue }) => {
236 | return (
237 | <SubMenuItem
238 | label={extractValue(node.props?.label)}
239 | triggerTemplate={renderChild(node.props?.triggerTemplate)}
240 | >
241 | {renderChild(node.children)}
242 | </SubMenuItem>
243 | );
244 | },
245 | );
246 |
247 | const MSEP = "MenuSeparator";
248 |
249 | export const MenuSeparatorMd = createMetadata({
250 | status: "stable",
251 | description:
252 | "`MenuSeparator` displays a separator line between menu items to group related " +
253 | "menu options within `DropdownMenu`.",
254 | docFolder: DDMCOMP,
255 | themeVars: parseScssVar(styles.themeVars),
256 | limitThemeVarsToComponent: true,
257 | defaultThemeVars: {
258 | [`marginTop-${MSEP}`]: "$space-1",
259 | [`marginBottom-${MSEP}`]: "$space-1",
260 | [`width-${MSEP}`]: "100%",
261 | [`height-${MSEP}`]: "1px",
262 | [`color-${MSEP}`]: "$borderColor-dropdown-item",
263 | [`marginHorizontal-${MSEP}`]: "12px",
264 | },
265 | });
266 |
267 | export const menuSeparatorRenderer = createComponentRenderer(MSEP, MenuSeparatorMd, () => {
268 | return <MenuSeparator />;
269 | });
270 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LineChart/LineChartNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | Line,
3 | LineChart as RLineChart,
4 | XAxis,
5 | ResponsiveContainer,
6 | Tooltip,
7 | Legend as RLegend,
8 | YAxis,
9 | } from "recharts";
10 | import type { ForwardedRef, ReactNode } from "react";
11 | import type React from "react";
12 | import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
13 | import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
14 | import { TooltipContent } from "../Tooltip/TooltipContent";
15 | import { useTheme } from "../../../components-core/theming/ThemeContext";
16 | import classnames from "classnames";
17 | import styles from "./LineChart.module.scss";
18 |
19 | export type LineChartProps = {
20 | data: any[];
21 | dataKeys: string[];
22 | nameKey: string;
23 | style?: React.CSSProperties;
24 | hideTickX?: boolean;
25 | hideTickY?: boolean;
26 | className?: string;
27 | hideX?: boolean;
28 | hideY?: boolean;
29 | hideTooltip?: boolean;
30 | tickFormatterX?: (value: any) => any;
31 | tickFormatterY?: (value: any) => any;
32 | children?: ReactNode;
33 | showLegend?: boolean;
34 | marginTop?: number;
35 | marginRight?: number;
36 | marginBottom?: number;
37 | marginLeft?: number;
38 | tooltipRenderer?: (tooltipData: any) => ReactNode;
39 | };
40 |
41 | export const defaultProps: Pick<
42 | LineChartProps,
43 | | "hideX"
44 | | "hideY"
45 | | "hideTooltip"
46 | | "showLegend"
47 | | "tickFormatterX"
48 | | "tickFormatterY"
49 | | "hideTickX"
50 | | "hideTickY"
51 | > = {
52 | hideTickX: false,
53 | hideTickY: false,
54 | hideX: false,
55 | hideY: false,
56 | hideTooltip: false,
57 | showLegend: false,
58 | tickFormatterX: (value) => value,
59 | tickFormatterY: (value) => value,
60 | };
61 |
62 | const defaultChartParams = {
63 | chartWidth: 800,
64 | };
65 |
66 | export const LineChart = forwardRef(function LineChart(
67 | {
68 | data,
69 | dataKeys = [],
70 | nameKey,
71 | style,
72 | className,
73 | hideX = defaultProps.hideX,
74 | hideY = defaultProps.hideY,
75 | hideTickX = defaultProps.hideTickX,
76 | hideTickY = defaultProps.hideTickY,
77 | hideTooltip = defaultProps.hideTooltip,
78 | tickFormatterX = defaultProps.tickFormatterX,
79 | tickFormatterY = defaultProps.tickFormatterY,
80 | children,
81 | showLegend = defaultProps.showLegend,
82 | tooltipRenderer,
83 | }: LineChartProps,
84 | forwardedRef: ForwardedRef<HTMLDivElement>,
85 | ) {
86 | const { getThemeVar } = useTheme();
87 |
88 | const colorValues = useMemo(() => {
89 | return [
90 | getThemeVar("color-primary-500"),
91 | getThemeVar("color-primary-300"),
92 | getThemeVar("color-success-500"),
93 | getThemeVar("color-success-300"),
94 | getThemeVar("color-warn-500"),
95 | getThemeVar("color-warn-300"),
96 | getThemeVar("color-danger-500"),
97 | getThemeVar("color-danger-300"),
98 | getThemeVar("color-info-500"),
99 | getThemeVar("color-info-300"),
100 | getThemeVar("color-secondary-500"),
101 | getThemeVar("color-secondary-300"),
102 | getThemeVar("color-primary-600"),
103 | getThemeVar("color-primary-400"),
104 | getThemeVar("color-success-600"),
105 | getThemeVar("color-success-400"),
106 | getThemeVar("color-warn-600"),
107 | getThemeVar("color-warn-400"),
108 | getThemeVar("color-danger-600"),
109 | getThemeVar("color-danger-400"),
110 | getThemeVar("color-info-600"),
111 | getThemeVar("color-info-400"),
112 | getThemeVar("color-secondary-600"),
113 | getThemeVar("color-secondary-400"),
114 | getThemeVar("color-primary-900"),
115 | getThemeVar("color-primary-700"),
116 | getThemeVar("color-success-900"),
117 | getThemeVar("color-success-700"),
118 | getThemeVar("color-warn-900"),
119 | getThemeVar("color-warn-700"),
120 | getThemeVar("color-danger-900"),
121 | getThemeVar("color-danger-700"),
122 | getThemeVar("color-info-900"),
123 | getThemeVar("color-info-700"),
124 | getThemeVar("color-secondary-900"),
125 | getThemeVar("color-secondary-700"),
126 | ];
127 | }, [getThemeVar]);
128 |
129 | const chartContextValue = useChartContextValue({ nameKey, dataKeys });
130 |
131 | const containerRef = useRef<HTMLDivElement>(null);
132 | const labelsRef = useRef<HTMLDivElement>(null);
133 | const [interval, setIntervalState] = useState(0);
134 | const [tickAngle, setTickAngle] = useState(0);
135 | const [tickAnchor, setTickAnchor] = useState<"end" | "middle">("middle");
136 | const [chartMargin, setChartMargin] = useState({ left: 30, right: 30, top: 10, bottom: 60 });
137 | const [xAxisHeight, setXAxisHeight] = useState(50);
138 | const [miniMode, setMiniMode] = useState(false);
139 | const fontSize = 12;
140 |
141 | const safeData = Array.isArray(data) ? data : [];
142 |
143 | const safeTooltipRenderer = useCallback(
144 | (props: any) => {
145 | if (!tooltipRenderer) return <TooltipContent {...props} />;
146 |
147 | const payloadArray: Array<{ label: string; value: any; color: string }> = [];
148 |
149 | if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
150 | const originalPayload = props.payload[0].payload;
151 | // Transform dataKeys into array of objects with label, value, and color
152 | dataKeys.forEach((dataKey, index) => {
153 | if (dataKey in originalPayload) {
154 | payloadArray.push({
155 | label: dataKey,
156 | value: originalPayload[dataKey],
157 | color: colorValues[index] || colorValues[0],
158 | });
159 | }
160 | });
161 | }
162 |
163 | // Extract tooltip data from Recharts props
164 | const tooltipData = {
165 | label: props.label,
166 | payload: payloadArray,
167 | active: props.active,
168 | };
169 |
170 | return tooltipRenderer(tooltipData);
171 | },
172 | [tooltipRenderer, dataKeys, colorValues],
173 | );
174 |
175 | useEffect(() => {
176 | const calc = () => {
177 | const width = containerRef.current?.offsetWidth || defaultChartParams.chartWidth;
178 | const spans = labelsRef.current?.querySelectorAll("span") || [];
179 | const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
180 | let angle = 0;
181 | let anchor: "end" | "middle" = "middle";
182 | let rad = 0;
183 | let minTickSpacing = maxWidth + 8;
184 | let leftMargin = Math.max(8, Math.ceil(maxWidth / 3));
185 | let rightMargin = Math.max(8, Math.ceil(maxWidth / 3));
186 | let xAxisH = Math.ceil(fontSize * 1.2);
187 | let maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
188 | let skip = Math.max(0, Math.ceil(safeData.length / maxTicks) - 1);
189 | if (skip > 0) {
190 | angle = -60;
191 | anchor = "end";
192 | rad = (Math.abs(angle) * Math.PI) / 180;
193 | minTickSpacing = Math.ceil(maxWidth * Math.cos(rad)) + 2;
194 | maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
195 | skip = Math.max(0, Math.ceil(safeData.length / maxTicks) - 1);
196 | leftMargin = Math.max(8, Math.ceil((maxWidth * Math.cos(rad)) / 1.8));
197 | rightMargin = Math.max(8, Math.ceil((maxWidth * Math.cos(rad)) / 1.8));
198 | xAxisH = Math.ceil(Math.abs(maxWidth * Math.sin(rad)) + Math.abs(fontSize * Math.cos(rad)));
199 | }
200 | setIntervalState(skip);
201 | setTickAngle(angle);
202 | setTickAnchor(anchor);
203 | setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: xAxisH });
204 | setXAxisHeight(Math.ceil(fontSize));
205 | const containerHeight = containerRef.current?.offsetHeight || 0;
206 | const neededHeight = 10 + xAxisHeight + 10 + 32;
207 | setMiniMode(neededHeight > containerHeight);
208 | };
209 | calc();
210 | window.addEventListener("resize", calc);
211 | return () => window.removeEventListener("resize", calc);
212 | }, [data, nameKey, xAxisHeight, safeData.length, fontSize]);
213 |
214 | // The stroke width of the lines
215 | const strokeWidth = getThemeVar("width-line-LineChart");
216 |
217 | return (
218 | <ChartProvider value={chartContextValue}>
219 | {children}
220 | <div
221 | ref={labelsRef}
222 | style={{ position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }}
223 | >
224 | {safeData.length > 0 && nameKey
225 | ? safeData
226 | .map((d) => d?.[nameKey])
227 | .map((label, idx) => (
228 | <span key={idx} style={{ fontSize: 12, whiteSpace: "nowrap" }}>
229 | {label}
230 | </span>
231 | ))
232 | : null}
233 | </div>
234 | <div
235 | ref={forwardedRef}
236 | className={classnames(className, styles.wrapper)}
237 | style={{ flexGrow: 1, ...style }}
238 | >
239 | <ResponsiveContainer
240 | ref={containerRef}
241 | width="100%"
242 | height="100%"
243 | minWidth={60}
244 | minHeight={30}
245 | debounce={100}
246 | >
247 | <RLineChart
248 | accessibilityLayer
249 | data={data}
250 | margin={miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin}
251 | >
252 | <XAxis
253 | interval={interval}
254 | tickLine={false}
255 | dataKey={nameKey}
256 | angle={tickAngle}
257 | textAnchor={tickAnchor}
258 | tick={miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }}
259 | tickFormatter={miniMode ? undefined : tickFormatterX}
260 | height={miniMode || hideX ? 0 : xAxisHeight}
261 | hide={miniMode || hideX}
262 | />
263 | <YAxis
264 | hide={miniMode || hideY}
265 | tickLine={false}
266 | tickFormatter={miniMode ? undefined : tickFormatterY}
267 | tick={miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }}
268 | domain={[0, (dataMax: number) => Math.ceil((dataMax * 1.05) / 10) * 10]}
269 | />
270 | {!miniMode && !hideTooltip && <Tooltip content={safeTooltipRenderer} />}
271 | {dataKeys.map((dataKey, i) => (
272 | <Line
273 | key={dataKey}
274 | type="monotone"
275 | dataKey={dataKey}
276 | name={dataKey}
277 | stroke={colorValues[i]}
278 | strokeWidth={strokeWidth}
279 | dot={false}
280 | />
281 | ))}
282 | {showLegend && (
283 | <RLegend
284 | wrapperStyle={{
285 | bottom: 0,
286 | left: 0,
287 | right: 0,
288 | margin: "0 auto",
289 | width: "100%",
290 | textAlign: "center",
291 | }}
292 | />
293 | )}
294 | </RLineChart>
295 | </ResponsiveContainer>
296 | </div>
297 | </ChartProvider>
298 | );
299 | });
300 |
```
--------------------------------------------------------------------------------
/docs/content/components/RadioGroup.md:
--------------------------------------------------------------------------------
```markdown
1 | # RadioGroup [#radiogroup]
2 |
3 | `RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.
4 |
5 | Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions.
6 |
7 | **Key features:**
8 | - **Exclusive selection**: Only one option can be selected at a time within the group
9 | - **Form integration**: Built-in validation states and seamless form compatibility
10 | - **Flexible layout**: Contains [Option](/components/Option) that can be arranged in any layout structure
11 | - **State management**: Automatically handles selection state and change events
12 | - **Accessibility support**: Proper keyboard navigation and screen reader compatibility
13 | - **Validation indicators**: Visual feedback for error, warning, and valid states
14 |
15 | `RadioGroup` is often used in forms. See [this guide](/forms) for details.
16 |
17 | ## Properties [#properties]
18 |
19 | ### `autoFocus` (default: false) [#autofocus-default-false]
20 |
21 | If this property is set to `true`, the component gets the focus automatically when displayed.
22 |
23 | ### `enabled` (default: true) [#enabled-default-true]
24 |
25 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
26 |
27 | This property indicates whether the input accepts user actions (`true`) or not (`false`). The default value is `true`.
28 |
29 | ```xmlui-pg copy display name="Example: enabled"
30 | <App>
31 | <RadioGroup initialValue="first" enabled="false">
32 | <HStack padding="$space-normal">
33 | <Option label="First Item" value="first"/>
34 | <Option label="Second Item" value="second"/>
35 | <Option label="Third Item" value="third"/>
36 | </HStack>
37 | </RadioGroup>
38 | </App>
39 | ```
40 |
41 | ### `initialValue` (default: "") [#initialvalue-default-]
42 |
43 | This property sets the component's initial value.
44 |
45 | This property defines the initial value of the selected option within the group.
46 |
47 | ```xmlui-pg copy display name="Example: initialValue"
48 | <App>
49 | <RadioGroup initialValue="first">
50 | <HStack padding="$space-normal">
51 | <Option label="First Item" value="first"/>
52 | <Option label="Second Item" value="second"/>
53 | <Option label="Third Item" value="third"/>
54 | </HStack>
55 | </RadioGroup>
56 | </App>
57 | ```
58 |
59 | ### `readOnly` (default: false) [#readonly-default-false]
60 |
61 | Set this property to `true` to disallow changing the component value.
62 |
63 | ### `required` (default: false) [#required-default-false]
64 |
65 | Set this property to `true` to indicate it must have a value before submitting the containing form.
66 |
67 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
68 |
69 | This property allows you to set the validation status of the input component.
70 |
71 | Available values:
72 |
73 | | Value | Description |
74 | | --- | --- |
75 | | `valid` | Visual indicator for an input that is accepted |
76 | | `warning` | Visual indicator for an input that produced a warning |
77 | | `error` | Visual indicator for an input that produced an error |
78 |
79 | This prop is used to visually indicate status changes reacting to form field validation.
80 |
81 | | Value | Description |
82 | | :-------- | :---------------------------------------------------- |
83 | | `valid` | Visual indicator for an input that is accepted |
84 | | `warning` | Visual indicator for an input that produced a warning |
85 | | `error` | Visual indicator for an input that produced an error |
86 |
87 | ```xmlui-pg copy display name="Example: validationStatus"
88 | <App>
89 | <HStack>
90 | <RadioGroup initialValue="first" validationStatus="error">
91 | <Option label="First Item" value="first"/>
92 | <Option label="Second Item" value="second"/>
93 | </RadioGroup>
94 | <RadioGroup initialValue="first" validationStatus="warning">
95 | <Option label="First Item" value="first"/>
96 | <Option label="Second Item" value="second"/>
97 | </RadioGroup>
98 | <RadioGroup initialValue="first" validationStatus="valid">
99 | <Option label="First Item" value="first"/>
100 | <Option label="Second Item" value="second"/>
101 | </RadioGroup>
102 | </HStack>
103 | </App>
104 | ```
105 |
106 | ## Events [#events]
107 |
108 | ### `didChange` [#didchange]
109 |
110 | This event is triggered when value of RadioGroup has changed.
111 |
112 | This event is triggered after the user has changed the field value. The following example uses this event to display the selected option's value:
113 |
114 | ```xmlui-pg
115 | ---app copy display name="Example: didChange"
116 | <App var.field="">
117 | <RadioGroup initialValue="{field}" onDidChange="(val) => field = val">
118 | <Option label="First Item" value="first"/>
119 | <Option label="Second Item" value="second"/>
120 | </RadioGroup>
121 | <Text value="{field}" />
122 | </App>
123 | ---desc
124 | Select one of the available options and see how the `Text` underneath it is updated in parallel:
125 | ```
126 |
127 | ### `gotFocus` [#gotfocus]
128 |
129 | This event is triggered when the RadioGroup has received the focus.
130 |
131 | ### `lostFocus` [#lostfocus]
132 |
133 | This event is triggered when the RadioGroup has lost the focus.
134 |
135 | ## Exposed Methods [#exposed-methods]
136 |
137 | This component does not expose any methods.
138 |
139 | ## Styling [#styling]
140 |
141 | `RadioGroup` is a component that governs its children and stores the selected value. It does not support styling; however, you can style the options within the group. When you set the theme variables for the group's options, use the `RadioGroupOption` name.
142 |
143 | ### Theme Variables [#theme-variables]
144 |
145 | | Variable | Default Value (Light) | Default Value (Dark) |
146 | | --- | --- | --- |
147 | | [backgroundColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption | $color-primary-500 | $color-primary-500 |
148 | | [backgroundColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption | $color-primary-500 | $color-primary-500 |
149 | | [backgroundColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption--disabled | $textColor--disabled | $textColor--disabled |
150 | | [backgroundColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption--disabled | $textColor--disabled | $textColor--disabled |
151 | | [backgroundColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default | *none* | *none* |
152 | | [backgroundColor](../styles-and-themes/common-units/#color)-RadioGroupOption--disabled | $backgroundColor--disabled | $backgroundColor--disabled |
153 | | [borderColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption | $color-primary-500 | $color-primary-500 |
154 | | [borderColor](../styles-and-themes/common-units/#color)-checked-RadioGroupOption | $color-primary-500 | $color-primary-500 |
155 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default | $color-surface-500 | $color-surface-500 |
156 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default | $color-surface-500 | $color-surface-500 |
157 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default--active | $color-primary-500 | $color-primary-500 |
158 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default--active | $color-primary-500 | $color-primary-500 |
159 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default--hover | $color-surface-700 | $color-surface-700 |
160 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default--hover | $color-surface-700 | $color-surface-700 |
161 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--disabled | *none* | *none* |
162 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--error | $borderColor-Input--error | $borderColor-Input--error |
163 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--error | $borderColor-Input--error | $borderColor-Input--error |
164 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--success | $borderColor-Input--success | $borderColor-Input--success |
165 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--success | $borderColor-Input--success | $borderColor-Input--success |
166 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--warning | $borderColor-Input--warning | $borderColor-Input--warning |
167 | | [borderColor](../styles-and-themes/common-units/#color)-RadioGroupOption--warning | $borderColor-Input--warning | $borderColor-Input--warning |
168 | | [borderWidth](../styles-and-themes/common-units/#size)-RadioGroupOption | 1px | 1px |
169 | | [borderWidth](../styles-and-themes/common-units/#size)-RadioGroupOption-validation | 2px | 2px |
170 | | [color](../styles-and-themes/common-units/#color)-RadioGroupOption--disabled | *none* | *none* |
171 | | [fontSize](../styles-and-themes/common-units/#size)-RadioGroupOption | $fontSize-sm | $fontSize-sm |
172 | | [fontSize](../styles-and-themes/common-units/#size)-RadioGroupOption | $fontSize-sm | $fontSize-sm |
173 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-RadioGroupOption | $fontWeight-bold | $fontWeight-bold |
174 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-RadioGroupOption | $fontWeight-bold | $fontWeight-bold |
175 | | [gap](../styles-and-themes/common-units/#size)-RadioGroupOption | $space-1_5 | $space-1_5 |
176 | | [outlineColor](../styles-and-themes/common-units/#color)-RadioGroupOption--focus | *none* | *none* |
177 | | [outlineOffset](../styles-and-themes/common-units/#size)-RadioGroupOption--focus | *none* | *none* |
178 | | [outlineStyle](../styles-and-themes/common-units/#border)-RadioGroupOption--focus | *none* | *none* |
179 | | [outlineWidth](../styles-and-themes/common-units/#size)-RadioGroupOption--focus | *none* | *none* |
180 | | [textColor](../styles-and-themes/common-units/#color)-RadioGroupOption--default | *none* | *none* |
181 | | [textColor](../styles-and-themes/common-units/#color)-RadioGroupOption--error | *none* | *none* |
182 | | [textColor](../styles-and-themes/common-units/#color)-RadioGroupOption--success | *none* | *none* |
183 | | [textColor](../styles-and-themes/common-units/#color)-RadioGroupOption--warning | *none* | *none* |
184 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/InspectorContext.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | createContext,
3 | type ReactNode,
4 | useCallback,
5 | useContext,
6 | useEffect,
7 | useId,
8 | useMemo,
9 | useRef,
10 | useState,
11 | } from "react";
12 | import type { ComponentDef } from "../abstractions/ComponentDefs";
13 | import { usePopper } from "react-popper";
14 | import { createPortal } from "react-dom";
15 | import { useTheme } from "./theming/ThemeContext";
16 | import classnames from "classnames";
17 | import { Button } from "../components/Button/ButtonNative";
18 | import styles from "./InspectorButton.module.scss";
19 | import type { ProjectCompilation } from "../abstractions/scripting/Compilation";
20 | import { InspectorDialog } from "./devtools/InspectorDialog";
21 | import AppWithCodeViewNative from "../components/NestedApp/AppWithCodeViewNative";
22 | import { XmlUiHelper } from "../parsers/xmlui-parser";
23 | import { useAppContext } from "./AppContext";
24 |
25 | // --- The context object that is used to store the inspector information.
26 | interface IInspectorContext {
27 | // --- The list of source files for the components.
28 | sources?: Record<string, string>;
29 | attach: (node: ComponentDef, uid: symbol, inspectId: string) => void;
30 | detach: (uid: symbol, inspectId: string) => void;
31 | refresh: (inspectId: string) => void;
32 | devToolsEnabled?: boolean;
33 | setIsOpen: (isOpen: boolean) => void;
34 | isOpen: boolean;
35 | inspectedNode: any;
36 | projectCompilation: ProjectCompilation | undefined;
37 | setInspectMode: (inspectMode: (prev: any) => boolean) => void;
38 | inspectMode: boolean;
39 | mockApi: any;
40 | clickPosition: { x: number; y: number };
41 | }
42 |
43 | // --- The context object that is used to store the inspector information.
44 | export const InspectorContext = createContext<IInspectorContext | null>(null);
45 |
46 | export function InspectorProvider({
47 | children,
48 | sources,
49 | projectCompilation,
50 | mockApi,
51 | }: {
52 | children: ReactNode;
53 | sources?: Record<string, string>;
54 | projectCompilation?: ProjectCompilation;
55 | mockApi?: any;
56 | }) {
57 | const [inspectable, setInspectable] = useState<Record<string, any>>({});
58 | const [inspectedNode, setInspectedNode] = useState<ComponentDef | null>(null);
59 | const [showCode, setShowCode] = useState(false);
60 | const [inspectMode, setInspectMode] = useState(false);
61 | const [clickPosition, setClickPosition] = useState<{ x: number; y: number }>({
62 | x: 0,
63 | y: 0,
64 | });
65 | const contextValue: IInspectorContext = useMemo(() => {
66 | return {
67 | sources,
68 | attach: (node, uid, inspectId) => {
69 | setInspectable((prev) => {
70 | return {
71 | ...prev,
72 | [inspectId]: {
73 | node,
74 | uid,
75 | inspectId,
76 | key: 0,
77 | },
78 | };
79 | });
80 | },
81 | refresh: (inspectId) => {
82 | setInspectable((prev) => {
83 | return {
84 | ...prev,
85 | [inspectId]: {
86 | ...prev[inspectId],
87 | key: prev[inspectId].key + 1,
88 | },
89 | };
90 | });
91 | },
92 | detach: (uid, inspectId) => {
93 | setInspectable((prev) => {
94 | const ret = { ...prev };
95 | delete ret[inspectId];
96 | return ret;
97 | });
98 | },
99 | inspectedNode,
100 | setIsOpen: setShowCode,
101 | isOpen: showCode,
102 | devToolsEnabled: showCode,
103 | projectCompilation: projectCompilation,
104 | setInspectMode,
105 | inspectMode,
106 | mockApi,
107 | clickPosition,
108 | };
109 | }, [
110 | sources,
111 | inspectedNode,
112 | showCode,
113 | clickPosition,
114 | setShowCode,
115 | projectCompilation,
116 | inspectMode,
117 | mockApi,
118 | ]);
119 |
120 | return (
121 | <InspectorContext.Provider value={contextValue}>
122 | {children}
123 | {process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
124 | inspectable &&
125 | Object.values(inspectable).map((item: any) => {
126 | return (
127 | <InspectButton
128 | inspectedNode={inspectedNode}
129 | setShowCode={setShowCode}
130 | setClickPosition={setClickPosition}
131 | key={item.inspectId + +"-" + item.key}
132 | inspectId={item.inspectId}
133 | node={item.node}
134 | setInspectedNode={setInspectedNode}
135 | inspectMode={inspectMode}
136 | />
137 | );
138 | })}
139 | </InspectorContext.Provider>
140 | );
141 | }
142 |
143 | function InspectButton({
144 | inspectId,
145 | node,
146 | inspectedNode,
147 | setInspectedNode,
148 | setShowCode,
149 | inspectMode,
150 | setClickPosition,
151 | }: {
152 | inspectId: string;
153 | node: ComponentDef;
154 | inspectedNode: any;
155 | setInspectedNode: (node: any) => void;
156 | setShowCode: (show: any) => void;
157 | inspectMode: boolean;
158 | setClickPosition?: (position: { x: number; y: number }) => void;
159 | }) {
160 | const { root } = useTheme();
161 | const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
162 | const [popperElement, setPopperElement] = useState<HTMLButtonElement | null>(null);
163 | const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, {
164 | placement: "top-end",
165 | modifiers: [
166 | {
167 | name: "offset",
168 | options: {
169 | offset: [-4, -18],
170 | },
171 | },
172 | {
173 | name: "flip",
174 | enabled: false,
175 | // options: {
176 | // fallbackPlacements: ['top', 'right'],
177 | // },
178 | },
179 | ],
180 | });
181 | const [visible, setVisible] = useState(false);
182 | const timeoutRef = useRef<number | null>(null);
183 | const hoverRef = useRef<boolean>(false);
184 |
185 | useEffect(() => {
186 | if (!referenceElement) {
187 | return;
188 | }
189 | if (inspectedNode?.inspectId === inspectId) {
190 | referenceElement.classList.add(styles.inspectedNode);
191 | } else {
192 | referenceElement.classList.remove(styles.inspectedNode);
193 | }
194 | }, [inspectId, inspectedNode, referenceElement]);
195 |
196 | useEffect(() => {
197 | if (inspectedNode) {
198 | setShowCode(true);
199 | } else {
200 | setShowCode(false);
201 | }
202 | }, [inspectedNode]);
203 |
204 | useEffect(() => {
205 | const htmlElement = document.querySelector(`[data-inspectId="${inspectId}"]`) as HTMLElement;
206 | if (!htmlElement) {
207 | return;
208 | }
209 |
210 | setReferenceElement(htmlElement);
211 |
212 | if (inspectMode) {
213 | htmlElement.classList.add(styles.inspectableNode);
214 |
215 | const overlay = document.createElement("div");
216 | overlay.classList.add(styles.inspectOverlay);
217 | htmlElement.appendChild(overlay);
218 |
219 | overlay.addEventListener("click", () => {
220 | setInspectedNode((prev) => {
221 | if (prev?.inspectId === inspectId) {
222 | return null;
223 | }
224 | return { ...node, inspectId };
225 | });
226 | });
227 | }
228 |
229 | if (!inspectMode) {
230 | htmlElement.classList.remove(styles.inspectableNode);
231 |
232 | setInspectedNode(null);
233 | setShowCode(false);
234 | const overlay = htmlElement.querySelector(`.${styles.inspectOverlay}`);
235 |
236 | if (overlay) {
237 | overlay.remove();
238 | }
239 |
240 | htmlElement.classList.remove(styles.inspectedNode);
241 | }
242 |
243 | function mouseenter() {
244 | if (timeoutRef.current) {
245 | clearTimeout(timeoutRef.current);
246 | }
247 | setVisible(true);
248 | }
249 |
250 | function mouseleave() {
251 | if (timeoutRef.current) {
252 | clearTimeout(timeoutRef.current);
253 | }
254 | if (hoverRef.current) {
255 | return;
256 | }
257 | timeoutRef.current = window.setTimeout(() => {
258 | setVisible(false);
259 | }, 100);
260 | }
261 |
262 | htmlElement.addEventListener("mouseenter", mouseenter);
263 | htmlElement.addEventListener("mouseleave", mouseleave);
264 | return () => {
265 | htmlElement.removeEventListener("mouseenter", mouseenter);
266 | htmlElement.removeEventListener("mouseleave", mouseleave);
267 | };
268 | }, [inspectId, node, inspectMode, setShowCode, setInspectedNode]);
269 |
270 | return (
271 | <>
272 | {inspectMode
273 | ? null
274 | : visible &&
275 | !!root &&
276 | createPortal(
277 | <Button
278 | variant={"outlined"}
279 | className={classnames(styles.wrapper, "_debug-inspect-button")}
280 | ref={(el) => setPopperElement(el)}
281 | style={{ ...popperStyles.popper, padding: 0 }}
282 | {...attributes.popper}
283 | onMouseEnter={() => {
284 | hoverRef.current = true;
285 | if (timeoutRef.current) {
286 | clearTimeout(timeoutRef.current);
287 | timeoutRef.current = null;
288 | }
289 | }}
290 | onMouseLeave={() => {
291 | hoverRef.current = false;
292 | setVisible(false);
293 | }}
294 | onClick={() => {
295 | setInspectedNode(node);
296 | setShowCode(true);
297 | setClickPosition({
298 | x: popperElement?.getBoundingClientRect().left || 0,
299 | y: popperElement?.getBoundingClientRect().top || 0,
300 | });
301 | }}
302 | >
303 | Show code
304 | </Button>,
305 | root,
306 | )}
307 | </>
308 | );
309 | }
310 |
311 | export function useDevTools() {
312 | const context = useContext(InspectorContext);
313 |
314 | if (!context) {
315 | throw new Error("useDevTools must be used within an InspectorProvider");
316 | }
317 |
318 | return {
319 | projectCompilation: context.projectCompilation,
320 | inspectedNode: context.inspectedNode,
321 | sources: context.sources,
322 | isOpen: context.isOpen,
323 | setIsOpen: context.setIsOpen,
324 | devToolsEnabled: context.devToolsEnabled,
325 | mockApi: context.mockApi,
326 | clickPosition: context.clickPosition,
327 | };
328 | }
329 |
330 | export function useInspectMode() {
331 | const context = useContext(InspectorContext);
332 | return {
333 | setInspectMode: context?.setInspectMode,
334 | inspectMode: context?.inspectMode,
335 | };
336 | }
337 |
338 | export function useInspector(node: ComponentDef, uid: symbol) {
339 | const context = useContext(InspectorContext);
340 | const inspectValue = (node.props as any)?.inspect;
341 | const shouldInspect = inspectValue === true || inspectValue === "true";
342 | const inspectId = useId();
343 | const refreshInspection = useCallback(() => {
344 | context?.refresh(inspectId);
345 | }, [context, inspectId]);
346 |
347 | useEffect(() => {
348 | if (shouldInspect) {
349 | context?.attach(node, uid, inspectId);
350 | }
351 | return () => {
352 | context?.detach(uid, inspectId);
353 | };
354 | }, [context, inspectId, node, shouldInspect, uid]);
355 |
356 | if (shouldInspect && context) {
357 | return {
358 | refreshInspection,
359 | inspectId,
360 | };
361 | }
362 | return {};
363 | }
364 |
```