This is page 102 of 181. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── curly-llamas-try.md
│ ├── loose-trains-sit.md
│ ├── moody-pans-poke.md
│ ├── rare-cooks-write.md
│ ├── silver-llamas-cough.md
│ └── true-jeans-agree.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.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
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.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.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── 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
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.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.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
1 | # xmlui
2 |
3 | ## 0.10.26
4 |
5 | ### Patch Changes
6 |
7 | - e1b8d58: Heading now accepts "H1"..."H6", "1"..."6", too. Invalid values fall back to "h1".
8 | - 1ad832c: Remove the showNavPanelIf property from AppHeader (fix NavPanel's "when" usage)
9 |
10 | ## 0.10.25
11 |
12 | ### Patch Changes
13 |
14 | - e7c503e: refactor: Select - remove radix select
15 | - 5fe3052: Fix the NavGroup click behavior in responsive view
16 | - 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
17 | - 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
18 |
19 | ## 0.10.24
20 |
21 | ### Patch Changes
22 |
23 | - 3e361c4: The xmlui-pg codefence now accepts emojies
24 | - 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
25 |
26 | ## 0.10.23
27 |
28 | ### Patch Changes
29 |
30 | - bf18444: Experiment with the "variant" behavior
31 | - 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
32 | - 89c69af: Fix the boolean conversion issue with showAnchor in Heading
33 | - 4cfebf0: Fix loading code-behind files in standalone mode
34 | - 145cd68: fix: pointer-events:none when using sibling Dialog
35 |
36 | ## 0.10.22
37 |
38 | ### Patch Changes
39 |
40 | - 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
41 | - 1020f1c: Extend Tab with the tabAlignment and accordionView properties
42 |
43 | ## 0.10.21
44 |
45 | ### Patch Changes
46 |
47 | - 6fd4d62: Add custom Text variant styling
48 |
49 | ## 0.10.20
50 |
51 | ### Patch Changes
52 |
53 | - 26eac90: fix: Autocomplete handles animations correctly
54 | - f53edff: Add margin-related theme variables to ContentSeparator
55 | - 1840916: Add applyIf property to Theme
56 | - c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
57 | - 6aaefaf: Added better error text when rendering FormItem outside of a Form.
58 | - 28d2585: refactor: Select and AutoComplete components
59 | - e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
60 | - 22162c0: AppState now uses a merge operation to set initialValue
61 | - e90232b: fix: itemWithLabel - layout issue
62 |
63 | ## 0.10.19
64 |
65 | ### Patch Changes
66 |
67 | - facb257: Add checkboxTolerance property to Table
68 | - 6084c14: test: review onFocus, onBlur e2e tests
69 | - e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
70 |
71 | ## 0.10.18
72 |
73 | ### Patch Changes
74 |
75 | - 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
76 | - 6650ee8: Add back removed RadioItem
77 | - da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
78 | - 8394663: fix: labelBehavior, input components - styling issue
79 |
80 | ## 0.10.17
81 |
82 | ### Patch Changes
83 |
84 | - 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
85 |
86 | ## 0.10.16
87 |
88 | ### Patch Changes
89 |
90 | - 0ba6612: Undust and improve the Tree component
91 | - 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
92 | - 314b429: improve: remove cmdk from autocomple, add keywords prop to option
93 | - a1dea8f: fix: NumberBox initialValue ignores non-convertible string values, minValue and maxValue now applies to typed-in input as well as to increments / decrements with spinner buttons.
94 | - cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
95 |
96 | ## 0.10.15
97 |
98 | ### Patch Changes
99 |
100 | - 3c8ad14: Add the data property to the Pdf component
101 | - 5502fea: Add the "transform" layout property
102 | - e08f0ba: Add syncWithAppState and initiallySelected properties to Table
103 | - 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
104 | - db618b5: fix: NavGroup componenet's iconVertical{Expanded,Collapsed} properties now apply based on it's 'open' state. Only the Expanded one was present before the fix.
105 | - a795b3d: Allow event handlers to use nested action components recursively
106 | - 5851c02: feat: introducing behaviors - tooltip, animation, label
107 |
108 | ## 0.10.14
109 |
110 | ### Patch Changes
111 |
112 | - 618049b: fix: Modal dialog scrolling issue
113 | - 215a142: Allow image to accept binary data (and use it instead of src)
114 | - 65b52e1: Allow user-defined components in extension packages
115 | - 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
116 | - 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
117 |
118 | ## 0.10.13
119 |
120 | ### Patch Changes
121 |
122 | - 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
123 | - eb62858: fix: assigning new properties to objects in xmlui script
124 | - eb62858: fix: stricter empty body detection in RestApiProxy
125 | - eb62858: fix: TextArea autofocus
126 | - eb62858: fix: dropdownMenu overflow
127 | - eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
128 | - eb62858: select: use focus-visible instead of focus for outline
129 | - 243b7fa: fix: modal dialog/toast issue
130 | - eb62858: form: hideButtonRowUntilDirty
131 |
132 | ## 0.10.12
133 |
134 | ### Patch Changes
135 |
136 | - f12a042: fix: report errors in script tag
137 | - 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
138 | - eb6454f: refactor: change LineChart/BarChart property names
139 | - 1210852: Fix the layout property usage of ModalDialog
140 |
141 | ## 0.10.11
142 |
143 | ### Patch Changes
144 |
145 | - 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
146 | - d56c3e5: RadioGroup now correctly handles different types of initialValue property values, applies readOnly property, and places necessary ARIA tags if the required property is set. Clarified component reference description on how RadioGroup and Option handles value types.
147 | - e42d367: Add FancyButton to xmlui-website-blocks
148 | - f539526: feat: BarChart - add tooltip position tracking
149 | - 19ce234: Review Option handling in Select and RadioGroup
150 | - 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
151 | - e90dc73: feat: add support for 'uses' property
152 | - 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
153 | - b57dfa2: Add the autoDetectTone property to App
154 | - 9dd0f97: Update Checkbox and Switch with click event metadata
155 | - 19ce234: Select accepts null as an option value; it converts a value to a string no longer
156 | - 898346d: Extend Text and Heading APIs with hasOverflow
157 | - 705dd04: Fix RestApiProxy to deliver response status when no error body specified
158 |
159 | ## 0.10.10
160 |
161 | ### Patch Changes
162 |
163 | - fff80c5: Bump package version
164 |
165 | ## 0.10.9
166 |
167 | ### Patch Changes
168 |
169 | - 879c09d: Component part handling and testing refactored
170 | - 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
171 | - 0c69245: fix: virtualized list/table in ModalDialog
172 | - 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
173 | - c99f184: Fix ExpandableItem focus issue
174 | - 5032e4a: Experimenting with HeroSection
175 | - 2394f36: Enhance DateInput and TimeInput
176 |
177 | ## 0.10.8
178 |
179 | ### Patch Changes
180 |
181 | - a4d62c4: Add experimental Timer component
182 | - 7ed2918: Add the appendBlob function to the ApiInterceptor backend
183 |
184 | ## 0.10.7
185 |
186 | ### Patch Changes
187 |
188 | - 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
189 | - a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
190 | - bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
191 | - 81724c6: Fixed BarChart tick labels not appearing.
192 |
193 | ## 0.10.6
194 |
195 | ### Patch Changes
196 |
197 | - 6464ec8: fix ssr
198 |
199 | ## 0.10.5
200 |
201 | ### Patch Changes
202 |
203 | - d38351d: fix missing dependency
204 |
205 | ## 0.10.4
206 |
207 | ### Patch Changes
208 |
209 | - 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
210 | - 1df8e5d: Autocomplete: initiallyOpen prop
211 | - 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
212 | - 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
213 | - 428ebea: include themes.scss file in lib dist
214 | - a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
215 |
216 | ## 0.10.3
217 |
218 | ### Patch Changes
219 |
220 | - 2e512bb: Add solid overflow handling modes to Text
221 | - 46d1d18: Remove the "codefence" Text variant
222 | - 6bc9ed1: feat: support aligning cells in a Table row vertically
223 | - 0b1f983: Add new, compound layout property name parsing
224 | - a2637f3: Text is displayed as inline (you can nest Text into Text)
225 | - eb4d592: Adding the "part" concept to native components
226 |
227 | ## 0.10.2
228 |
229 | ### Patch Changes
230 |
231 | - ff14e15: fix: LineChart - sizing issue
232 | - 1451a94: feat: make input padding configurable via theme variables
233 |
234 | ## 0.10.1
235 |
236 | ### Patch Changes
237 |
238 | - 442416b: Refactor visual components to allow tooltip
239 | - a018431: feat: add custom tooltip template support for Bar and Line charts
240 | - 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
241 | - b5d7537: Enhance the disabledDates property of DatePicker
242 |
243 | ## 0.10.0
244 |
245 | ### Minor Changes
246 |
247 | - 000a311: Add tooltip behavior to visible components
248 | - eb8b958: Rework inline styling system, prepare for responsive styling
249 |
250 | ### Patch Changes
251 |
252 | - 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
253 | - 8c98f33: feat: add theme variable support for LineChart stroke width
254 | - ef86593: feat: add didChange event handler to Tabs component
255 | - da5f4e7: test: create e2e tests for chart components
256 | - 47c7a2d: Integrated the new Pagination component with Table.
257 | - 740f904: Add "activated" event to TabItem
258 | - 5009c52: Add "parts" to component metadata
259 | - 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
260 |
261 | ## 0.9.101
262 |
263 | ### Patch Changes
264 |
265 | - 791b0be: Experimenting with issuing release on larger GitHub machines
266 |
267 | ## 0.9.100
268 |
269 | ### Patch Changes
270 |
271 | - 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
272 |
273 | ## 0.9.99
274 |
275 | ### Patch Changes
276 |
277 | - e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
278 | - 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
279 |
280 | ## 0.9.98
281 |
282 | ### Patch Changes
283 |
284 | - ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
285 | - 377f0f2: Fix image animation issue in Carousel
286 | - ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
287 | - 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
288 |
289 | ## 0.9.97
290 |
291 | ### Patch Changes
292 |
293 | - f7e8019: Implement simple IFrame APIs
294 |
295 | ## 0.9.96
296 |
297 | ### Patch Changes
298 |
299 | - 3196156: Add IFrame component (first prototype)
300 | - cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
301 | - f51002a: fix: Tabs - descendant button warning
302 | - 3fa52d9: fix: Table sortBy now works as expected
303 |
304 | ## 0.9.95
305 |
306 | ### Patch Changes
307 |
308 | - af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
309 | - 69a2a8f: Fix the useEventHaddler hook
310 | - 29c68fe: fix: H1 ... H6 now ignores the level property
311 |
312 | ## 0.9.94
313 |
314 | ### Patch Changes
315 |
316 | - 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
317 |
318 | ## 0.9.93
319 |
320 | ### Patch Changes
321 |
322 | - af17117: feat:add labelTemplate prop to TabItem component
323 | - 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
324 | - b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
325 | - bc95844: improve: Select and AutoComplete components
326 | - 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
327 | - 6629ce5: New end-to-end tests reviewed
328 | - 0254471: Fixed the initialValue issue with TextArea
329 | - 3318cfb: feat: provide context in browser error reports
330 |
331 | ## 0.9.92
332 |
333 | ### Patch Changes
334 |
335 | - 347cda1: Review component e2e tests
336 |
337 | ## 0.9.91
338 |
339 | ### Patch Changes
340 |
341 | - 6a7d779: Review Slot implementation
342 |
343 | ## 0.9.90
344 |
345 | ### Patch Changes
346 |
347 | - 4b57f7e: Remove Spinner tests
348 |
349 | ## 0.9.89
350 |
351 | ### Patch Changes
352 |
353 | - 2968eb9: fix initialValue handling in selects in forms
354 | - 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
355 | - 8364c03: add new TextBox and TextArea test cases
356 |
357 | ## 0.9.88
358 |
359 | ### Patch Changes
360 |
361 | - b79d7d8: Fix flaky Checkbox e2e tests
362 |
363 | ## 0.9.87
364 |
365 | ### Patch Changes
366 |
367 | - 33846c2: Fix ios regex failure
368 |
369 | ## 0.9.86
370 |
371 | ### Patch Changes
372 |
373 | - 48af60d: Temporarily suspend new checkbox e2e tests
374 |
375 | ## 0.9.85
376 |
377 | ### Patch Changes
378 |
379 | - ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
380 | - 9ca7572: Extend the component API metadata with method signature and parameter descriptions
381 | - 6944d2f: Add a scrollIntoView method to Heading
382 | - c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
383 | - cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
384 |
385 | ## 0.9.84
386 |
387 | ### Patch Changes
388 |
389 | - c54abf3: update deps
390 |
391 | ## 0.9.83
392 |
393 | ### Patch Changes
394 |
395 | - 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
396 | - 8644010: Add a scrollIntoView api to Bookmark
397 |
398 | ## 0.9.82
399 |
400 | ### Patch Changes
401 |
402 | - 3bc29ae: fix: account for events with components inside them (like APICall) in a way that more syntax highlighters understand. VSCode worked fine, Shiki did not.
403 | - 1101bf5: Fix a React warning in MarkdownNative (headingRef)
404 | - cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
405 | - 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
406 | - 79c1d8a: fix: allow the playground to use the same tone as its source
407 |
408 | ## 0.9.81
409 |
410 | ### Patch Changes
411 |
412 | - 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
413 |
414 | ## 0.9.80
415 |
416 | ### Patch Changes
417 |
418 | - 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
419 | - 14e6a7d: feat: add splitView to code inspection
420 | - cf05bd2: Fix non-fatal StandaloneApp.tsx issue
421 |
422 | ## 0.9.79
423 |
424 | ### Patch Changes
425 |
426 | - ad21a31: enhance treeshaking
427 |
428 | ## 0.9.78
429 |
430 | ### Patch Changes
431 |
432 | - 94a68f0: Toggle password visibility in PasswordInput
433 | - 94a68f0: Extend markdown to render compound headings with code spans and anchors
434 | - 163a45c: Add ToneSwitch with icon customization
435 | - 7ce528b: fix: BarChart - size management
436 | - c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
437 |
438 | ## 0.9.77
439 |
440 | ### Patch Changes
441 |
442 | - c867f38: Change split view startup animation
443 |
444 | ## 0.9.76
445 |
446 | ### Patch Changes
447 |
448 | - aa08a8c: introducing ApiInterceptor->useWorker: true/false
449 | - 15bf622: fix: add escaped \{ to textmate syntax, eliminate double extraction of props in FormItem causing bugs with escaped open curly brace being parsed as start of binding expression.
450 | - 5761868: improve: BarChart - add tick formatter for X and Y axes
451 |
452 | ## 0.9.75
453 |
454 | ### Patch Changes
455 |
456 | - c876be8: Turn docs deploy to standard routing
457 |
458 | ## 0.9.74
459 |
460 | ### Patch Changes
461 |
462 | - 0043c5d: NestedApp new prop: withSplashScreen
463 |
464 | ## 0.9.73
465 |
466 | ### Patch Changes
467 |
468 | - 88bf4f6: extend formatHumanElapsedTime with a short format flag
469 | - fef53db: Allow specifying href targets with the markdown link tag
470 | - 6167648: Fix the useMouseEventHandlers hook
471 | - b2f4483: Fix missing code fence display
472 | - e9040c6: Make the nested app's header smaller
473 |
474 | ## 0.9.72
475 |
476 | ### Patch Changes
477 |
478 | - 4ab3b8a: add omitH1 to TableOfContents
479 | - ac4a283: remove the AppWithCodeView component
480 | - 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
481 |
482 | ## 0.9.71
483 |
484 | ### Patch Changes
485 |
486 | - 5774c53: fix ssr issues with Theme components
487 |
488 | ## 0.9.70
489 |
490 | ### Patch Changes
491 |
492 | - 1da7847: Adjust CodeBlock theme variables for dark tone
493 |
494 | ## 0.9.69
495 |
496 | ### Patch Changes
497 |
498 | - 9b36621: fix flaky Checkbox tests
499 |
500 | ## 0.9.68
501 |
502 | ### Patch Changes
503 |
504 | - 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
505 | - c79ced7: fix ssr hydration warn in AppWithCodeView
506 | - d030ac2: A few theme variable defaults updated
507 | - 21c4fd6: fix: mocked apis should work with multiple NestedApps
508 |
509 | ## 0.9.67
510 |
511 | ### Patch Changes
512 |
513 | - 51a5b05: Small changes in a few component's metadata representation
514 | - 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
515 | - 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
516 | - 3f0e6b0: fix memoization for tabs, pageInfo
517 |
518 | ## 0.9.66
519 |
520 | ### Patch Changes
521 |
522 | - eae8145: Fixed Switch indicator positioning
523 | - b6c64de: improve: charts - improved tick rendering
524 | - 459bd3c: improve: Logo - add inline, alt props
525 | - 96be435: feat: CodeBlock - add new themeVariables
526 |
527 | ## 0.9.65
528 |
529 | ### Patch Changes
530 |
531 | - c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
532 |
533 | ## 0.9.64
534 |
535 | ### Patch Changes
536 |
537 | - 5ad3ffc: Refactored the usage of theme variables in RadioGroup
538 | - da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
539 | - 301cb39: Allow YAML (.yml) theme files in standalone apps
540 | - d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
541 |
542 | ## 0.9.63
543 |
544 | ### Patch Changes
545 |
546 | - b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
547 |
548 | ## 0.9.62
549 |
550 | ### Patch Changes
551 |
552 | - 832f31d: fix: nestedApp fills the available space in AppWithCode component
553 | - 4f9ff06: Fix the build issue with FormSection
554 |
555 | ## 0.9.61
556 |
557 | ### Patch Changes
558 |
559 | - 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
560 |
561 | ## 0.9.60
562 |
563 | ### Patch Changes
564 |
565 | - f37ed8c: Fine tune AppWithCodeView header
566 | - 736dbc8: improve: AppWithCode - center the XML/UI buttons
567 | - e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
568 |
569 | ## 0.9.59
570 |
571 | ### Patch Changes
572 |
573 | - 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
574 | - 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
575 | - c4abb20: Fixed RadioGroup disabled and validation indicator states. Also fixed an issue where the checked indicator was not aligned to center if the RadioGroup Option was resized in some way.
576 | - f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
577 | - 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
578 | - 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
579 |
580 | ## 0.9.58
581 |
582 | ### Patch Changes
583 |
584 | - dc43275: Fixed Pie- & DonutChart height property.
585 | - f9562b5: make flowLayout auto-responsive behavior a bit smarter
586 | - 1af11af: fix: eliminating the duplication of toast messages
587 | - de570c2: Fixed number of small issues: Colorpicker now gets correct initial value, Options in Select now get correct keys, removed Tabs tabTemplate prop because of a bigger bug.
588 | - 7d255a9: Changed open in new window button tooltip label for all occurrences.
589 | - 69a7a1f: Fixed NavLink label break if overflowing available space.
590 | - 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
591 | - 46bfe72: default style tweaks
592 |
593 | ## 0.9.57
594 |
595 | ### Patch Changes
596 |
597 | - 93a1e70: fix: NavPanel - use layoutCss
598 |
599 | ## 0.9.56
600 |
601 | ### Patch Changes
602 |
603 | - 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
604 |
605 | ## 0.9.55
606 |
607 | ### Patch Changes
608 |
609 | - d507ea8: Add AppWithCodeView component to display code and running app side-by-side
610 |
611 | ## 0.9.54
612 |
613 | ### Patch Changes
614 |
615 | - 2688a95: Change TreeDisplay theme variable defaults
616 |
617 | ## 0.9.53
618 |
619 | ### Patch Changes
620 |
621 | - c64fa25: Allow turning on/off heading anchors in appGlobals
622 | - 73c2c21: wip: code inspector buttons - label change, devtools - animation update
623 |
624 | ## 0.9.52
625 |
626 | ### Patch Changes
627 |
628 | - d079208: The Footer component no provides a themeable gap between its children.
629 | - 2a461d8: feat: NestedApp works with ApiInterceptor
630 | - ad6d81e: fix NestedApp apiUrl overwrite
631 | - f5b9f15: feat: xmlui-devtools - use it in a modal dialog
632 | - 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
633 | - 7af4b4e: change default borderColor
634 | - 851ae21: fix table styling
635 | - 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
636 | - bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
637 | - 38180ce: merge xmlui-charts into core
638 |
639 | ## 0.9.51
640 |
641 | ### Patch Changes
642 |
643 | - ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
644 | - ba2b5cd: Moved Drawer logo position to left.
645 | - 96273bf: fix: Slider - min/max value validation
646 | - 1a81bcf: fix: Markdown renders inline/block images correclty
647 |
648 | ## 0.9.50
649 |
650 | ### Patch Changes
651 |
652 | - e6c3b39: standalone usage: explicit codeBehind reference
653 | - 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
654 | - d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
655 |
656 | ## 0.9.49
657 |
658 | ### Patch Changes
659 |
660 | - 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
661 | - Updated dependencies [3b5e820]
662 | - [email protected]
663 |
664 | ## 0.9.48
665 |
666 | ### Patch Changes
667 |
668 | - b5104b0: feat: Icon component now handles the click event
669 | - 30d5c58: feat: Badge supports theme variable names in colormap
670 | - 2e7f51f: change: the canSort property of Column defaults to true
671 | - 4dd6d7f: feat: chart extension included by default
672 | - f7f0571: fix theme component
673 |
674 | ## 0.9.47
675 |
676 | ### Patch Changes
677 |
678 | - a5bef5d: feat: add "inherit" variant to Text
679 | - ecc52d1: XMLUIExtensions namespace is optional
680 | - 4322e1b: fix: search context scope
681 | - 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
682 |
683 | ## 0.9.46
684 |
685 | ### Patch Changes
686 |
687 | - e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
688 | - 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
689 | - c433512: Removed close button from TextBox if type="search". Move the Search package from internal, add arrow key selection in search results and add use it in navigation drawer on small screens.
690 | - bc68330: tweak search indexer
691 | - ef3d208: improve: DatePicker - update chevrons
692 |
693 | ## 0.9.45
694 |
695 | ### Patch Changes
696 |
697 | - de8d63c: Fixed small issues in CodeBlocks: adjusted row highlight length, substring highlight now works with '=' signs, corrected minor vertical positioning of code without syntax highlight, temporarily removed row numbering.
698 | - bd6d1b4: experimental: runtime search indexing
699 | - db5a5f4: fix: Allow APICall as an event handler
700 | - 69b4402: improve: docs - footer logo, FormItem - labelBreak
701 |
702 | ## 0.9.44
703 |
704 | ### Patch Changes
705 |
706 | - 3eab4a3: improve: design updates - devtools, playground, docs
707 | - 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
708 | - cdf96bb: fix: table inside flowlayout, horizontal scrollbar
709 | - 121c55c: Changed the background color of the `marked` Text variant.
710 | - f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
711 |
712 | ## 0.9.43
713 |
714 | ### Patch Changes
715 |
716 | - e2324bb: fix prefetchedContent handling
717 | - cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
718 | - 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
719 | - 42571db: test: create tests for the AutoComplete component, fix bugs
720 | - 05205c7: Add diagnostics to language server
721 | - 0a3d059: fix initial offset calculation for virtualized table/list
722 |
723 | ## 0.9.42
724 |
725 | ### Patch Changes
726 |
727 | - 1ab3881: ssr fixes, experimental prefetchedContent
728 | - 3d9729d: test: add tests for the DatePicker component
729 |
730 | ## 0.9.41
731 |
732 | ### Patch Changes
733 |
734 | - 42416ba: test change for CI #2
735 |
736 | ## 0.9.40
737 |
738 | ### Patch Changes
739 |
740 | - 34282f0: chage to test CI
741 |
742 | ## 0.9.39
743 |
744 | ### Patch Changes
745 |
746 | - b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
747 | - bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
748 | - e67762b: Replaced Admonition emojis with icons
749 |
750 | ## 0.9.38
751 |
752 | ### Patch Changes
753 |
754 | - d314bad: msw update
755 |
756 | ## 0.9.37
757 |
758 | ### Patch Changes
759 |
760 | - 1c33896: ssr fixes
761 | - 8d662f3: Added anchor links for headings in markdown. Showing anchors is disabled by default, use the showHeadingAnchors prop on a Markdown component to use it.
762 |
763 | ## 0.9.36
764 |
765 | ### Patch Changes
766 |
767 | - 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
768 |
769 | ## 0.9.35
770 |
771 | ### Patch Changes
772 |
773 | - ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
774 |
775 | ## 0.9.34
776 |
777 | ### Patch Changes
778 |
779 | - bae8280: export NestedApp component
780 | - 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
781 |
782 | ## 0.9.33
783 |
784 | ### Patch Changes
785 |
786 | - dabeb53: Fixed NavPanel background color
787 |
788 | ## 0.9.32
789 |
790 | ### Patch Changes
791 |
792 | - 4019d82: xmlui-playground, new exports from xmlui
793 | - 450e1ee: feat: add aria-placeholder to Select component
794 |
795 | ## 0.9.31
796 |
797 | ### Patch Changes
798 |
799 | - ed53215: test release
800 | - ed53215: another testing
801 |
802 | ## 0.9.30
803 |
804 | ### Patch Changes
805 |
806 | - b0ae113: testing
807 |
808 | ## 0.9.29
809 |
810 | ### Patch Changes
811 |
812 | - f15c018: another testing
813 | - f15c018: testing
814 |
815 | ## 0.9.28
816 |
817 | ### Patch Changes
818 |
819 | - 421968b: testing
820 |
821 | ## 0.9.27
822 |
823 | ### Patch Changes
824 |
825 | - 99bba69: testing
826 |
827 | ## 0.9.26
828 |
829 | ### Patch Changes
830 |
831 | - bcf162c: testing changesets
832 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/App.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./App.module.scss";
2 | import drawerStyles from "./Sheet.module.scss";
3 |
4 | import { type ComponentDef } from "../../abstractions/ComponentDefs";
5 | import { createComponentRenderer } from "../../components-core/renderers";
6 | import { parseScssVar } from "../../components-core/theming/themeVars";
7 |
8 | import { createMetadata, dComponent } from "../../components/metadata-helpers";
9 | import { appLayoutMd } from "./AppLayoutContext";
10 | import { App, defaultProps } from "./AppNative";
11 | import type { CSSProperties } from "react";
12 | import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
13 | import type { PageMd } from "../Pages/Pages";
14 | import type { RenderChildFn } from "../../abstractions/RendererDefs";
15 | import { IndexerContext } from "./IndexerContext";
16 | import { createPortal } from "react-dom";
17 | import { useAppContext } from "../../components-core/AppContext";
18 | import { useSearchContextSetIndexing, useSearchContextUpdater } from "./SearchContext";
19 |
20 | // --- Define a structure to represent navigation hierarchy
21 | interface NavHierarchyNode {
22 | type: string;
23 | label: string;
24 | path?: string;
25 | children?: NavHierarchyNode[];
26 | }
27 |
28 | const COMP = "App";
29 |
30 | export const AppMd = createMetadata({
31 | status: "stable",
32 | description:
33 | "The `App` component is the root container that defines your application's overall " +
34 | "structure and layout. It provides a complete UI framework with built-in navigation, " +
35 | "header, footer, and content areas that work together seamlessly.",
36 | props: {
37 | layout: {
38 | description:
39 | `This property sets the layout template of the app. This setting determines the position ` +
40 | `and size of the app parts (such as header, navigation bar, footer, etc.) and the app's ` +
41 | `scroll behavior.`,
42 | availableValues: appLayoutMd,
43 | },
44 | loggedInUser: {
45 | description:
46 | "Stores information about the currently logged-in user. By not defining this property, " +
47 | "you can indicate that no user is logged in.",
48 | valueType: "string",
49 | },
50 | logoTemplate: dComponent("Optional template of the app logo"),
51 | logo: {
52 | description: "Optional logo path",
53 | valueType: "string",
54 | },
55 | "logo-dark": {
56 | description: "Optional logo path in dark tone",
57 | valueType: "string",
58 | },
59 | "logo-light": {
60 | description: "Optional logo path in light tone",
61 | valueType: "string",
62 | },
63 | name: {
64 | description:
65 | "Optional application name (visible in the browser tab). When you do not define " +
66 | "this property, the tab name falls back to the one defined in the app\'s configuration. " +
67 | 'If the name is not configured, "XMLUI App" is displayed in the tab.',
68 | valueType: "string",
69 | },
70 | scrollWholePage: {
71 | description:
72 | `This boolean property specifies whether the whole page should scroll (\`true\`) or just ` +
73 | `the content area (\`false\`). The default value is \`true\`.`,
74 | valueType: "boolean",
75 | defaultValue: defaultProps.scrollWholePage,
76 | },
77 | noScrollbarGutters: {
78 | description:
79 | "This boolean property specifies whether the scrollbar gutters should be hidden.",
80 | valueType: "boolean",
81 | defaultValue: defaultProps.noScrollbarGutters,
82 | },
83 | defaultTone: {
84 | description: 'This property sets the app\'s default tone ("light" or "dark").',
85 | valueType: "string",
86 | defaultValue: defaultProps.defaultTone,
87 | availableValues: ["light", "dark"],
88 | },
89 | defaultTheme: {
90 | description: "This property sets the app's default theme.",
91 | valueType: "string",
92 | defaultValue: defaultProps.defaultTheme,
93 | },
94 | autoDetectTone: {
95 | description:
96 | 'This boolean property enables automatic detection of the system theme preference. ' +
97 | 'When set to true and no defaultTone is specified, the app will automatically use ' +
98 | '"light" or "dark" tone based on the user\'s system theme setting. The app will ' +
99 | 'also respond to changes in the system theme preference.',
100 | valueType: "boolean",
101 | defaultValue: defaultProps.autoDetectTone,
102 | },
103 | },
104 | events: {
105 | ready: {
106 | description: `This event fires when the \`${COMP}\` component finishes rendering on the page.`,
107 | },
108 | messageReceived: {
109 | description: `This event fires when the \`${COMP}\` component receives a message from another window or iframe via the window.postMessage API.`,
110 | },
111 | },
112 | themeVars: { ...parseScssVar(styles.themeVars), ...parseScssVar(drawerStyles.themeVars) },
113 | limitThemeVarsToComponent: true,
114 | themeVarDescriptions: {
115 | "maxWidth-content-App":
116 | "This theme variable defines the maximum width of the main content. If the main " +
117 | "content is broader, the engine adds margins to keep the expected maximum size.",
118 | "boxShadow‑header‑App": "This theme variable sets the shadow of the app's header section.",
119 | "boxShadow‑navPanel‑App":
120 | "This theme variable sets the shadow of the app's navigation panel section " +
121 | "(visible only in vertical layouts).",
122 | "width‑navPanel‑App":
123 | "This theme variable sets the width of the navigation panel when the app is displayed " +
124 | "with one of the vertical layouts.",
125 | },
126 | defaultThemeVars: {
127 | "maxWidth-Drawer": "100%",
128 | [`width-navPanel-${COMP}`]: "$space-64",
129 | [`backgroundColor-navPanel-${COMP}`]: "$backgroundColor",
130 | [`maxWidth-content-${COMP}`]: "$maxWidth-content",
131 | [`boxShadow-header-${COMP}`]: "none",
132 | [`boxShadow-navPanel-${COMP}`]: "$boxShadow-spread",
133 | [`scroll-padding-block-Pages`]: "$space-4",
134 | [`backgroundColor-content-App`]: "$backgroundColor",
135 | light: {
136 | // --- No light-specific theme vars
137 | },
138 | dark: {
139 | // --- No dark-specific theme vars
140 | },
141 | },
142 | });
143 |
144 |
145 | function AppNode({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) {
146 | // --- Use ref to track if we've already processed the navigation to avoid duplicates in strict mode
147 | const processedNavRef = useRef(false);
148 |
149 | // --- Memoize the layout type to avoid unnecessary re-extraction
150 | const layoutType = useMemo(
151 | () => extractValue(node.props.layout),
152 | [node.props.layout, extractValue],
153 | );
154 |
155 | // --- Memoize helper functions that are used in multiple places
156 |
157 | // --- Parse a string into hierarchy labels, handling escaped pipe characters
158 | const parseHierarchyLabels = useMemo(() => {
159 | // Cache to hold previously computed results
160 | const cache = new Map<string, string[]>();
161 |
162 | return (labelText: string): string[] => {
163 | // Return cached result if we've seen this input before
164 | if (cache.has(labelText)) {
165 | return cache.get(labelText)!;
166 | }
167 |
168 | const result: string[] = [];
169 | let currentLabel = "";
170 | let escaped = false;
171 |
172 | for (let i = 0; i < labelText.length; i++) {
173 | const char = labelText[i];
174 |
175 | if (escaped) {
176 | // --- If this character was escaped, just add it literally
177 | currentLabel += char;
178 | escaped = false;
179 | } else if (char === "\\") {
180 | // --- Start of an escape sequence
181 | escaped = true;
182 | } else if (char === "|") {
183 | // --- Unescaped pipe indicates hierarchy separator
184 | result.push(currentLabel.trim());
185 | currentLabel = "";
186 | } else {
187 | // --- Regular character
188 | currentLabel += char;
189 | }
190 | }
191 |
192 | // --- Don't forget to add the last segment
193 | if (currentLabel.length > 0) {
194 | result.push(currentLabel.trim());
195 | }
196 |
197 | // Cache the result
198 | cache.set(labelText, result);
199 |
200 | return result;
201 | };
202 | }, []);
203 |
204 | // --- Helper function to check if a label exists in the navigation hierarchy
205 | const labelExistsInHierarchy = useMemo(() => {
206 | // Cache for previously checked labels within a hierarchy
207 | const cache = new Map<string, boolean>();
208 |
209 | return (searchLabel: string, hierarchy: any[]): boolean => {
210 | // Create a cache key (could be improved with a better serialization of hierarchy)
211 | const cacheKey = searchLabel + "_" + hierarchy.length;
212 |
213 | if (cache.has(cacheKey)) {
214 | return cache.get(cacheKey)!;
215 | }
216 |
217 | const result = hierarchy.some((node) => {
218 | if (node.label === searchLabel) {
219 | return true;
220 | }
221 |
222 | if (node.children && node.children.length > 0) {
223 | return labelExistsInHierarchy(searchLabel, node.children);
224 | }
225 |
226 | return false;
227 | });
228 |
229 | cache.set(cacheKey, result);
230 | return result;
231 | };
232 | }, []);
233 |
234 | // --- Helper function to find or create NavGroups in the hierarchy
235 | const findOrCreateNavGroup = useMemo(() => {
236 | return (navItems: any[], groupLabel: string): any => {
237 | // --- Check if a NavGroup with this label already exists
238 | const existingGroup = navItems.find(
239 | (item) => item.type === "NavGroup" && item.props?.label === groupLabel,
240 | );
241 |
242 | if (existingGroup) {
243 | return existingGroup;
244 | }
245 |
246 | // --- Create a new NavGroup and add it to the array
247 | const newGroup = {
248 | type: "NavGroup",
249 | props: {
250 | label: groupLabel,
251 | },
252 | children: [],
253 | };
254 |
255 | navItems.push(newGroup);
256 | return newGroup;
257 | };
258 | }, []);
259 |
260 | const { AppHeader, Footer, NavPanel, Pages, restChildren } = useMemo(() => {
261 | let AppHeader: ComponentDef;
262 | let Footer: ComponentDef;
263 | let NavPanel: ComponentDef;
264 | let Pages: ComponentDef;
265 | const restChildren: any[] = [];
266 | node.children?.forEach((rootChild) => {
267 | let transformedChild = { ...rootChild };
268 | if (rootChild.type === "Theme") {
269 | transformedChild.children = rootChild.children?.filter((child) => {
270 | if (child.type === "AppHeader") {
271 | AppHeader = {
272 | ...rootChild,
273 | children: [child],
274 | };
275 | return false;
276 | } else if (child.type === "Footer") {
277 | Footer = {
278 | ...rootChild,
279 | children: [child],
280 | };
281 | return false;
282 | } else if (child.type === "NavPanel") {
283 | NavPanel = {
284 | ...rootChild,
285 | children: [child],
286 | };
287 | return false;
288 | }
289 | return true;
290 | });
291 | if (!transformedChild.children.length) {
292 | transformedChild = null;
293 | }
294 | }
295 | if (rootChild.type === "AppHeader") {
296 | AppHeader = rootChild;
297 | } else if (rootChild.type === "Footer") {
298 | Footer = rootChild;
299 | } else if (rootChild.type === "NavPanel") {
300 | NavPanel = rootChild;
301 | } else if (rootChild.type === "Pages") {
302 | Pages = rootChild;
303 | restChildren.push(transformedChild);
304 | } else if (transformedChild !== null) {
305 | restChildren.push(transformedChild);
306 | }
307 | });
308 |
309 | // --- Check if there is any extra NavPanel in Pages
310 | const extraNavs = extractNavPanelFromPages(
311 | Pages,
312 | NavPanel,
313 | processedNavRef,
314 | extractValue,
315 | parseHierarchyLabels,
316 | labelExistsInHierarchy,
317 | findOrCreateNavGroup,
318 | );
319 |
320 | // --- If we found extra navigation items
321 | if (extraNavs?.length) {
322 | if (NavPanel) {
323 | // --- Create a new NavPanel with combined children instead of mutating the existing one
324 | NavPanel = {
325 | ...NavPanel,
326 | children: NavPanel.children ? [...NavPanel.children, ...extraNavs] : extraNavs,
327 | };
328 | } else {
329 | // --- Create a new NavPanel component definition if none exists
330 | NavPanel = {
331 | type: "NavPanel",
332 | props: {},
333 | children: extraNavs,
334 | };
335 | }
336 | }
337 |
338 | return {
339 | AppHeader,
340 | Footer,
341 | NavPanel,
342 | Pages,
343 | restChildren,
344 | };
345 | }, [
346 | node.children,
347 | extractValue,
348 | parseHierarchyLabels,
349 | labelExistsInHierarchy,
350 | findOrCreateNavGroup,
351 | ]);
352 |
353 | const applyDefaultContentPadding= !Pages;
354 |
355 | // --- Memoize all app props to prevent unnecessary re-renders
356 | const appProps = useMemo(
357 | () => ({
358 | scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage, true),
359 | noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false),
360 | className,
361 | layout: layoutType,
362 | loggedInUser: extractValue(node.props.loggedInUser),
363 | onReady: lookupEventHandler("ready"),
364 | onMessageReceived: lookupEventHandler("messageReceived"),
365 | name: extractValue(node.props.name),
366 | logo: extractValue(node.props.logo),
367 | logoDark: extractValue(node.props["logo-dark"]),
368 | logoLight: extractValue(node.props["logo-light"]),
369 | defaultTone: extractValue(node.props.defaultTone),
370 | defaultTheme: extractValue(node.props.defaultTheme),
371 | autoDetectTone: extractValue.asOptionalBoolean(node.props.autoDetectTone, false),
372 | applyDefaultContentPadding
373 | }),
374 | [
375 | extractValue,
376 | layoutType,
377 | lookupEventHandler,
378 | node.props.loggedInUser,
379 | node.props.noScrollbarGutters,
380 | node.props.scrollWholePage,
381 | node.props.name,
382 | node.props.logo,
383 | node.props["logo-dark"],
384 | node.props["logo-light"],
385 | node.props.defaultTone,
386 | node.props.defaultTheme,
387 | node.props.autoDetectTone,
388 | className,
389 | applyDefaultContentPadding
390 | ],
391 | );
392 |
393 | // Memoize the rendered children to prevent unnecessary re-renders
394 | const renderedHeader = useMemo(() => renderChild(AppHeader), [AppHeader, renderChild]);
395 | const renderedFooter = useMemo(() => renderChild(Footer), [Footer, renderChild]);
396 | const renderedNavPanel = useMemo(() => renderChild(NavPanel), [NavPanel, renderChild]);
397 | const renderedContent = useMemo(() => renderChild(restChildren), [restChildren, renderChild]);
398 |
399 | return (
400 | <App
401 | {...appProps}
402 | header={renderedHeader}
403 | footer={renderedFooter}
404 | navPanel={renderedNavPanel}
405 | navPanelDef={NavPanel}
406 | logoContentDef={node.props.logoTemplate}
407 | renderChild={renderChild}
408 | registerComponentApi={registerComponentApi}
409 | >
410 | {renderedContent}
411 | <SearchIndexCollector Pages={Pages} renderChild={renderChild} />
412 | </App>
413 | );
414 | }
415 |
416 | const HIDDEN_STYLE: CSSProperties = {
417 | position: "absolute",
418 | top: "-9999px",
419 | display: "none",
420 | };
421 |
422 | const indexerContextValue = {
423 | indexing: true,
424 | };
425 |
426 | function SearchIndexCollector({ Pages, renderChild }) {
427 | const appContext = useAppContext();
428 | const setIndexing = useSearchContextSetIndexing();
429 |
430 | const [isClient, setIsClient] = useState(false);
431 | useEffect(() => {
432 | setIsClient(true); // Ensure document.body is available
433 |
434 | return () => {
435 | setIndexing(false);
436 | };
437 | }, [setIndexing]);
438 |
439 | // 1. Memoize the list of pages to be indexed
440 | const pagesToIndex = useMemo(() => {
441 | return (
442 | Pages?.children?.filter(
443 | (child) =>
444 | child.type === "Page" && // Ensure 'Page' matches your actual component type name
445 | child.props?.url && // Ensure URL exists
446 | !child.props.url.includes("*") &&
447 | !child.props.url.includes(":"),
448 | ) || []
449 | );
450 | }, [Pages?.children]);
451 |
452 | const [currentIndex, setCurrentIndex] = useState(0);
453 | const [isDoneIndexing, setIsDoneIndexing] = useState(false);
454 | const [, startTransitionParent] = useTransition(); // Transition for parent updates
455 |
456 | const handlePageIndexed = useCallback(() => {
457 | startTransitionParent(() => {
458 | // Transition the update to the next page
459 | setCurrentIndex((prevIndex) => {
460 | const nextIndex = prevIndex + 1;
461 | if (nextIndex >= pagesToIndex.length) {
462 | // console.log("All pages indexed.");
463 | setIsDoneIndexing(true); // All pages processed
464 | }
465 | return nextIndex;
466 | });
467 | });
468 | }, [pagesToIndex.length]); // Recreate if the total number of pages changes
469 |
470 | if (!appContext.appGlobals?.searchIndexEnabled || isDoneIndexing || !isClient) {
471 | return null;
472 | }
473 |
474 | const currentPageToProcess = pagesToIndex[currentIndex];
475 |
476 | if (!currentPageToProcess) {
477 | // This can happen if pagesToIndex is empty or currentIndex went out of bounds unexpectedly.
478 | // Setting isDoneIndexing if pagesToIndex is empty initially.
479 | if (pagesToIndex.length === 0 && currentIndex === 0 && !isDoneIndexing) {
480 | setIsDoneIndexing(true);
481 | }
482 | return null;
483 | }
484 |
485 | return (
486 | <IndexerContext.Provider value={indexerContextValue}>
487 | {createPortal(
488 | <div style={HIDDEN_STYLE} aria-hidden="true">
489 | {/* Render only one PageIndexer at a time */}
490 | <PageIndexer
491 | Page={currentPageToProcess}
492 | renderChild={renderChild}
493 | onIndexed={handlePageIndexed}
494 | key={currentPageToProcess.props?.url || currentIndex} // Key ensures re-mount
495 | />
496 | </div>,
497 | document.body,
498 | )}
499 | </IndexerContext.Provider>
500 | );
501 | }
502 |
503 | function PageIndexer({
504 | Page,
505 | renderChild,
506 | onIndexed,
507 | }: {
508 | Page: ComponentDef<typeof PageMd>; // Use the defined PageMdProps
509 | renderChild: RenderChildFn;
510 | onIndexed: () => void;
511 | }) {
512 | const contentRef = useRef<HTMLDivElement>(null);
513 | const pageUrl = Page.props?.url || "";
514 | const navLabel = Page.props?.navLabel || "";
515 | const searchContextUpdater = useSearchContextUpdater();
516 |
517 | const [isContentRendered, setIsContentRendered] = useState(false);
518 | const [isCollected, setIsCollected] = useState(false);
519 | const [isProcessing, startTransition] = useTransition();
520 |
521 | // Effect 1: Schedule the rendering of the Page's children (low priority)
522 | useEffect(() => {
523 | // console.log(`PageIndexer (${pageUrl}): Scheduling content render.`);
524 | startTransition(() => {
525 | setIsContentRendered(true); // This will trigger rendering of Page.children
526 | });
527 | }, [pageUrl]); // Re-run if the Page prop itself changes identity (due to key in parent)
528 |
529 | // Effect 2: Extract content once Page.children is rendered and ref is available (low priority)
530 | useEffect(() => {
531 | if (isContentRendered && contentRef.current && !isCollected && !isProcessing) {
532 | // console.log(`PageIndexer (${pageUrl}): Content rendered, scheduling extraction.`);
533 | startTransition(() => {
534 | // console.log(`PageIndexer (${pageUrl}): Starting extraction...`);
535 | const currentContent = contentRef.current; // Capture ref value
536 | if (!currentContent) return;
537 |
538 | const clone = currentContent.cloneNode(true) as HTMLDivElement;
539 | const elementsToRemove = clone.querySelectorAll("style, script");
540 | elementsToRemove.forEach((el) => el.remove());
541 | const titleElement = clone.querySelector("h1");
542 | const title = titleElement
543 | ? titleElement.innerText
544 | : navLabel || pageUrl.split("/").pop() || pageUrl;
545 | titleElement?.remove(); // Remove title element from clone to avoid duplication
546 | const textContent = (clone.textContent || "").trim().replace(/\s+/g, " ");
547 |
548 | const entry = {
549 | title: title,
550 | content: textContent,
551 | path: pageUrl,
552 | };
553 |
554 | searchContextUpdater(entry);
555 | // console.log(`PageIndexer (${pageUrl}): Extraction complete, signaling parent.`);
556 | onIndexed(); // Signal completion to parent
557 | setIsCollected(true); // Mark as collected
558 | });
559 | }
560 | }, [
561 | isContentRendered,
562 | pageUrl,
563 | searchContextUpdater,
564 | onIndexed,
565 | isCollected,
566 | isProcessing,
567 | navLabel,
568 | ]); // Ensure all dependencies are listed
569 |
570 | // If this PageIndexer instance's work is done, or content not yet rendered, render nothing.
571 | // The parent (SearchIndexCollector) will unmount this and mount the next one.
572 | if (isCollected || !isContentRendered) {
573 | // console.log(`PageIndexer (${pageUrl}): Null render (isCollected: ${isCollected}, isContentRendered: ${isContentRendered})`);
574 | return null;
575 | }
576 |
577 | // This part renders when isContentRendered is true and isCollected is false.
578 | // The content needs to be in the DOM for contentRef.current to be populated.
579 | // console.log(`PageIndexer (${pageUrl}): Rendering content for ref population.`);
580 | return <div ref={contentRef}>{renderChild(Page.children)}</div>;
581 | }
582 |
583 | export const appRenderer = createComponentRenderer(
584 | COMP,
585 | AppMd,
586 | ({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) => {
587 | return (
588 | <AppNode
589 | node={node}
590 | renderChild={renderChild}
591 | extractValue={extractValue}
592 | className={className}
593 | lookupEventHandler={lookupEventHandler}
594 | registerComponentApi={registerComponentApi}
595 | />
596 | );
597 | },
598 | );
599 |
600 | // --- Process the entire navigation tree recursively and build hierarchy
601 | function processNavItems(
602 | items: ComponentDef[],
603 | parentHierarchy: NavHierarchyNode[],
604 | extractValue: (value: any) => any,
605 | ) {
606 | items.forEach((navItem) => {
607 | // --- Process NavLink items
608 | if (navItem.type === "NavLink") {
609 | let itemLabel = navItem.props?.label;
610 | let itemPath = navItem.props?.to;
611 |
612 | if (!itemLabel) {
613 | if (navItem.children?.length === 1 && navItem.children[0].type === "TextNode") {
614 | itemLabel = navItem.children[0].props.value;
615 | }
616 | }
617 |
618 | if (itemLabel) {
619 | const labelValue = extractValue(itemLabel);
620 |
621 | // --- Add to hierarchy
622 | parentHierarchy.push({
623 | type: "NavLink",
624 | label: labelValue,
625 | path: itemPath ? extractValue(itemPath) : undefined,
626 | });
627 | }
628 | }
629 | // --- Process NavGroup items (which may contain nested NavLink or NavGroup items)
630 | else if (navItem.type === "NavGroup") {
631 | let groupLabel = navItem.props?.label;
632 |
633 | if (groupLabel) {
634 | const labelValue = extractValue(groupLabel);
635 |
636 | // --- Create group node
637 | const groupNode: NavHierarchyNode = {
638 | type: "NavGroup",
639 | label: labelValue,
640 | children: [],
641 | };
642 |
643 | // --- Add to parent hierarchy
644 | parentHierarchy.push(groupNode);
645 |
646 | // --- Recursively process children of the NavGroup
647 | if (navItem.children && navItem.children.length > 0) {
648 | processNavItems(navItem.children, groupNode.children, extractValue);
649 | }
650 | } else if (navItem.children && navItem.children.length > 0) {
651 | // --- If no label but has children, still process them under parent
652 | processNavItems(navItem.children, parentHierarchy, extractValue);
653 | }
654 | }
655 | });
656 | }
657 |
658 | // --- Extract navigation panel items from Pages component
659 | function extractNavPanelFromPages(
660 | Pages: ComponentDef,
661 | NavPanel: ComponentDef | undefined,
662 | processedNavRef: React.MutableRefObject<boolean>,
663 | extractValue: (value: any) => any,
664 | parseHierarchyLabels: (labelText: string) => string[],
665 | labelExistsInHierarchy: (searchLabel: string, hierarchy: NavHierarchyNode[]) => boolean,
666 | findOrCreateNavGroup: (navItems: ComponentDef[], groupLabel: string) => ComponentDef,
667 | ): ComponentDef[] | null {
668 | // --- Skip extraction if we've already processed this navigation structure
669 | // --- This prevents duplicate items when React renders twice in strict mode
670 | if (!Pages || processedNavRef.current) return null;
671 |
672 | // --- Mark as processed
673 | processedNavRef.current = true;
674 |
675 | const extraNavs: ComponentDef[] = [];
676 |
677 | // --- Root of navigation hierarchy
678 | const navigationHierarchy: NavHierarchyNode[] = [];
679 |
680 | // --- Start processing the navigation tree if NavPanel exists
681 | if (NavPanel?.children) {
682 | processNavItems(NavPanel.children, navigationHierarchy, extractValue);
683 | }
684 |
685 | // --- Process Pages to create hierarchical navigation structure
686 | Pages.children?.forEach((page) => {
687 | if (page.type === "Page" && page.props.navLabel) {
688 | const label = extractValue(page.props.navLabel);
689 | const url = extractValue(page.props.url);
690 |
691 | // --- Parse hierarchy labels separated by unescaped pipe characters
692 | const hierarchyLabels = parseHierarchyLabels(label);
693 |
694 | // --- Skip if we have no labels
695 | if (hierarchyLabels.length === 0) {
696 | return;
697 | }
698 |
699 | // --- For a single level, just add a NavLink directly
700 | if (hierarchyLabels.length === 1) {
701 | // --- Check if this exact NavLink already exists in the navigation hierarchy
702 | if (!labelExistsInHierarchy(hierarchyLabels[0], navigationHierarchy)) {
703 | extraNavs.push({
704 | type: "NavLink",
705 | props: {
706 | label: hierarchyLabels[0],
707 | to: url,
708 | },
709 | });
710 | }
711 | return;
712 | }
713 |
714 | // --- For multi-level hierarchies, create NavGroups and a final NavLink
715 | let currentLevel = extraNavs;
716 |
717 | // --- Create NavGroups for all levels except the last one
718 | for (let i = 0; i < hierarchyLabels.length - 1; i++) {
719 | const groupLabel = hierarchyLabels[i];
720 | const navGroup = findOrCreateNavGroup(currentLevel, groupLabel);
721 |
722 | // --- Initialize children array if it doesn't exist
723 | if (!navGroup.children) {
724 | navGroup.children = [];
725 | }
726 |
727 | // --- Move to the next level
728 | currentLevel = navGroup.children;
729 | }
730 |
731 | // --- Add the leaf NavLink to the deepest NavGroup
732 | const leafLabel = hierarchyLabels[hierarchyLabels.length - 1];
733 |
734 | // --- Check if this NavLink already exists at this level
735 | const existingNavLink = currentLevel.find(
736 | (item) => item.type === "NavLink" && item.props?.label === leafLabel,
737 | );
738 |
739 | if (!existingNavLink) {
740 | currentLevel.push({
741 | type: "NavLink",
742 | props: {
743 | label: leafLabel,
744 | to: url,
745 | },
746 | });
747 | }
748 | }
749 | });
750 |
751 | return extraNavs;
752 | }
753 |
```