This is page 103 of 182. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── lemon-zoos-prove.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── 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.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── 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
│ │ │ │ ├── debounce-user-input-for-api-calls.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.11.2
4 |
5 | ### Patch Changes
6 |
7 | - c1f306f: update package dependencies for tsx usage
8 |
9 | ## 0.11.1
10 |
11 | ### Patch Changes
12 |
13 | - 7bbbb1d: Add the debounce function to globals
14 |
15 | ## 0.11.0
16 |
17 | ### Minor Changes
18 |
19 | - 19145d2: xmlui builds with ESM
20 | - 5109dce: Migrate from CommonJs to ESM internally. Lays the groundwork for exporting testing capabilities.
21 |
22 | ### Patch Changes
23 |
24 | - fe503eb: Add enableSubmit to Form
25 | - 06bb966: Fix TableOfContents styling
26 | - e6b5810: fix: playground - app reset
27 | - db94656: improve: bar/line chart spacing
28 | - fe503eb: Queue now passes $queuedItems and $completedItems context variables to its event handlers
29 | - 82ddbe7: Fix codefence first line indent style issue
30 | - 75b701b: Extend form with hideButtonRow and FormItem with noSubmit
31 |
32 | ## 0.10.26
33 |
34 | ### Patch Changes
35 |
36 | - e1b8d58: Heading now accepts "H1"..."H6", "1"..."6", too. Invalid values fall back to "h1".
37 | - 1ad832c: Remove the showNavPanelIf property from AppHeader (fix NavPanel's "when" usage)
38 |
39 | ## 0.10.25
40 |
41 | ### Patch Changes
42 |
43 | - e7c503e: refactor: Select - remove radix select
44 | - 5fe3052: Fix the NavGroup click behavior in responsive view
45 | - 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
46 | - 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
47 |
48 | ## 0.10.24
49 |
50 | ### Patch Changes
51 |
52 | - 3e361c4: The xmlui-pg codefence now accepts emojies
53 | - 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
54 |
55 | ## 0.10.23
56 |
57 | ### Patch Changes
58 |
59 | - bf18444: Experiment with the "variant" behavior
60 | - 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
61 | - 89c69af: Fix the boolean conversion issue with showAnchor in Heading
62 | - 4cfebf0: Fix loading code-behind files in standalone mode
63 | - 145cd68: fix: pointer-events:none when using sibling Dialog
64 |
65 | ## 0.10.22
66 |
67 | ### Patch Changes
68 |
69 | - 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
70 | - 1020f1c: Extend Tab with the tabAlignment and accordionView properties
71 |
72 | ## 0.10.21
73 |
74 | ### Patch Changes
75 |
76 | - 6fd4d62: Add custom Text variant styling
77 |
78 | ## 0.10.20
79 |
80 | ### Patch Changes
81 |
82 | - 26eac90: fix: Autocomplete handles animations correctly
83 | - f53edff: Add margin-related theme variables to ContentSeparator
84 | - 1840916: Add applyIf property to Theme
85 | - c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
86 | - 6aaefaf: Added better error text when rendering FormItem outside of a Form.
87 | - 28d2585: refactor: Select and AutoComplete components
88 | - e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
89 | - 22162c0: AppState now uses a merge operation to set initialValue
90 | - e90232b: fix: itemWithLabel - layout issue
91 |
92 | ## 0.10.19
93 |
94 | ### Patch Changes
95 |
96 | - facb257: Add checkboxTolerance property to Table
97 | - 6084c14: test: review onFocus, onBlur e2e tests
98 | - e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
99 |
100 | ## 0.10.18
101 |
102 | ### Patch Changes
103 |
104 | - 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
105 | - 6650ee8: Add back removed RadioItem
106 | - da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
107 | - 8394663: fix: labelBehavior, input components - styling issue
108 |
109 | ## 0.10.17
110 |
111 | ### Patch Changes
112 |
113 | - 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
114 |
115 | ## 0.10.16
116 |
117 | ### Patch Changes
118 |
119 | - 0ba6612: Undust and improve the Tree component
120 | - 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
121 | - 314b429: improve: remove cmdk from autocomple, add keywords prop to option
122 | - 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.
123 | - cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
124 |
125 | ## 0.10.15
126 |
127 | ### Patch Changes
128 |
129 | - 3c8ad14: Add the data property to the Pdf component
130 | - 5502fea: Add the "transform" layout property
131 | - e08f0ba: Add syncWithAppState and initiallySelected properties to Table
132 | - 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
133 | - 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.
134 | - a795b3d: Allow event handlers to use nested action components recursively
135 | - 5851c02: feat: introducing behaviors - tooltip, animation, label
136 |
137 | ## 0.10.14
138 |
139 | ### Patch Changes
140 |
141 | - 618049b: fix: Modal dialog scrolling issue
142 | - 215a142: Allow image to accept binary data (and use it instead of src)
143 | - 65b52e1: Allow user-defined components in extension packages
144 | - 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
145 | - 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
146 |
147 | ## 0.10.13
148 |
149 | ### Patch Changes
150 |
151 | - 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
152 | - eb62858: fix: assigning new properties to objects in xmlui script
153 | - eb62858: fix: stricter empty body detection in RestApiProxy
154 | - eb62858: fix: TextArea autofocus
155 | - eb62858: fix: dropdownMenu overflow
156 | - eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
157 | - eb62858: select: use focus-visible instead of focus for outline
158 | - 243b7fa: fix: modal dialog/toast issue
159 | - eb62858: form: hideButtonRowUntilDirty
160 |
161 | ## 0.10.12
162 |
163 | ### Patch Changes
164 |
165 | - f12a042: fix: report errors in script tag
166 | - 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
167 | - eb6454f: refactor: change LineChart/BarChart property names
168 | - 1210852: Fix the layout property usage of ModalDialog
169 |
170 | ## 0.10.11
171 |
172 | ### Patch Changes
173 |
174 | - 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
175 | - 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.
176 | - e42d367: Add FancyButton to xmlui-website-blocks
177 | - f539526: feat: BarChart - add tooltip position tracking
178 | - 19ce234: Review Option handling in Select and RadioGroup
179 | - 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
180 | - e90dc73: feat: add support for 'uses' property
181 | - 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
182 | - b57dfa2: Add the autoDetectTone property to App
183 | - 9dd0f97: Update Checkbox and Switch with click event metadata
184 | - 19ce234: Select accepts null as an option value; it converts a value to a string no longer
185 | - 898346d: Extend Text and Heading APIs with hasOverflow
186 | - 705dd04: Fix RestApiProxy to deliver response status when no error body specified
187 |
188 | ## 0.10.10
189 |
190 | ### Patch Changes
191 |
192 | - fff80c5: Bump package version
193 |
194 | ## 0.10.9
195 |
196 | ### Patch Changes
197 |
198 | - 879c09d: Component part handling and testing refactored
199 | - 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
200 | - 0c69245: fix: virtualized list/table in ModalDialog
201 | - 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
202 | - c99f184: Fix ExpandableItem focus issue
203 | - 5032e4a: Experimenting with HeroSection
204 | - 2394f36: Enhance DateInput and TimeInput
205 |
206 | ## 0.10.8
207 |
208 | ### Patch Changes
209 |
210 | - a4d62c4: Add experimental Timer component
211 | - 7ed2918: Add the appendBlob function to the ApiInterceptor backend
212 |
213 | ## 0.10.7
214 |
215 | ### Patch Changes
216 |
217 | - 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
218 | - a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
219 | - bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
220 | - 81724c6: Fixed BarChart tick labels not appearing.
221 |
222 | ## 0.10.6
223 |
224 | ### Patch Changes
225 |
226 | - 6464ec8: fix ssr
227 |
228 | ## 0.10.5
229 |
230 | ### Patch Changes
231 |
232 | - d38351d: fix missing dependency
233 |
234 | ## 0.10.4
235 |
236 | ### Patch Changes
237 |
238 | - 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
239 | - 1df8e5d: Autocomplete: initiallyOpen prop
240 | - 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
241 | - 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
242 | - 428ebea: include themes.scss file in lib dist
243 | - a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
244 |
245 | ## 0.10.3
246 |
247 | ### Patch Changes
248 |
249 | - 2e512bb: Add solid overflow handling modes to Text
250 | - 46d1d18: Remove the "codefence" Text variant
251 | - 6bc9ed1: feat: support aligning cells in a Table row vertically
252 | - 0b1f983: Add new, compound layout property name parsing
253 | - a2637f3: Text is displayed as inline (you can nest Text into Text)
254 | - eb4d592: Adding the "part" concept to native components
255 |
256 | ## 0.10.2
257 |
258 | ### Patch Changes
259 |
260 | - ff14e15: fix: LineChart - sizing issue
261 | - 1451a94: feat: make input padding configurable via theme variables
262 |
263 | ## 0.10.1
264 |
265 | ### Patch Changes
266 |
267 | - 442416b: Refactor visual components to allow tooltip
268 | - a018431: feat: add custom tooltip template support for Bar and Line charts
269 | - 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
270 | - b5d7537: Enhance the disabledDates property of DatePicker
271 |
272 | ## 0.10.0
273 |
274 | ### Minor Changes
275 |
276 | - 000a311: Add tooltip behavior to visible components
277 | - eb8b958: Rework inline styling system, prepare for responsive styling
278 |
279 | ### Patch Changes
280 |
281 | - 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
282 | - 8c98f33: feat: add theme variable support for LineChart stroke width
283 | - ef86593: feat: add didChange event handler to Tabs component
284 | - da5f4e7: test: create e2e tests for chart components
285 | - 47c7a2d: Integrated the new Pagination component with Table.
286 | - 740f904: Add "activated" event to TabItem
287 | - 5009c52: Add "parts" to component metadata
288 | - 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
289 |
290 | ## 0.9.101
291 |
292 | ### Patch Changes
293 |
294 | - 791b0be: Experimenting with issuing release on larger GitHub machines
295 |
296 | ## 0.9.100
297 |
298 | ### Patch Changes
299 |
300 | - 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
301 |
302 | ## 0.9.99
303 |
304 | ### Patch Changes
305 |
306 | - e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
307 | - 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
308 |
309 | ## 0.9.98
310 |
311 | ### Patch Changes
312 |
313 | - ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
314 | - 377f0f2: Fix image animation issue in Carousel
315 | - ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
316 | - 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
317 |
318 | ## 0.9.97
319 |
320 | ### Patch Changes
321 |
322 | - f7e8019: Implement simple IFrame APIs
323 |
324 | ## 0.9.96
325 |
326 | ### Patch Changes
327 |
328 | - 3196156: Add IFrame component (first prototype)
329 | - cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
330 | - f51002a: fix: Tabs - descendant button warning
331 | - 3fa52d9: fix: Table sortBy now works as expected
332 |
333 | ## 0.9.95
334 |
335 | ### Patch Changes
336 |
337 | - af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
338 | - 69a2a8f: Fix the useEventHaddler hook
339 | - 29c68fe: fix: H1 ... H6 now ignores the level property
340 |
341 | ## 0.9.94
342 |
343 | ### Patch Changes
344 |
345 | - 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
346 |
347 | ## 0.9.93
348 |
349 | ### Patch Changes
350 |
351 | - af17117: feat:add labelTemplate prop to TabItem component
352 | - 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
353 | - b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
354 | - bc95844: improve: Select and AutoComplete components
355 | - 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
356 | - 6629ce5: New end-to-end tests reviewed
357 | - 0254471: Fixed the initialValue issue with TextArea
358 | - 3318cfb: feat: provide context in browser error reports
359 |
360 | ## 0.9.92
361 |
362 | ### Patch Changes
363 |
364 | - 347cda1: Review component e2e tests
365 |
366 | ## 0.9.91
367 |
368 | ### Patch Changes
369 |
370 | - 6a7d779: Review Slot implementation
371 |
372 | ## 0.9.90
373 |
374 | ### Patch Changes
375 |
376 | - 4b57f7e: Remove Spinner tests
377 |
378 | ## 0.9.89
379 |
380 | ### Patch Changes
381 |
382 | - 2968eb9: fix initialValue handling in selects in forms
383 | - 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
384 | - 8364c03: add new TextBox and TextArea test cases
385 |
386 | ## 0.9.88
387 |
388 | ### Patch Changes
389 |
390 | - b79d7d8: Fix flaky Checkbox e2e tests
391 |
392 | ## 0.9.87
393 |
394 | ### Patch Changes
395 |
396 | - 33846c2: Fix ios regex failure
397 |
398 | ## 0.9.86
399 |
400 | ### Patch Changes
401 |
402 | - 48af60d: Temporarily suspend new checkbox e2e tests
403 |
404 | ## 0.9.85
405 |
406 | ### Patch Changes
407 |
408 | - ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
409 | - 9ca7572: Extend the component API metadata with method signature and parameter descriptions
410 | - 6944d2f: Add a scrollIntoView method to Heading
411 | - c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
412 | - cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
413 |
414 | ## 0.9.84
415 |
416 | ### Patch Changes
417 |
418 | - c54abf3: update deps
419 |
420 | ## 0.9.83
421 |
422 | ### Patch Changes
423 |
424 | - 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
425 | - 8644010: Add a scrollIntoView api to Bookmark
426 |
427 | ## 0.9.82
428 |
429 | ### Patch Changes
430 |
431 | - 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.
432 | - 1101bf5: Fix a React warning in MarkdownNative (headingRef)
433 | - cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
434 | - 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
435 | - 79c1d8a: fix: allow the playground to use the same tone as its source
436 |
437 | ## 0.9.81
438 |
439 | ### Patch Changes
440 |
441 | - 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
442 |
443 | ## 0.9.80
444 |
445 | ### Patch Changes
446 |
447 | - 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
448 | - 14e6a7d: feat: add splitView to code inspection
449 | - cf05bd2: Fix non-fatal StandaloneApp.tsx issue
450 |
451 | ## 0.9.79
452 |
453 | ### Patch Changes
454 |
455 | - ad21a31: enhance treeshaking
456 |
457 | ## 0.9.78
458 |
459 | ### Patch Changes
460 |
461 | - 94a68f0: Toggle password visibility in PasswordInput
462 | - 94a68f0: Extend markdown to render compound headings with code spans and anchors
463 | - 163a45c: Add ToneSwitch with icon customization
464 | - 7ce528b: fix: BarChart - size management
465 | - c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
466 |
467 | ## 0.9.77
468 |
469 | ### Patch Changes
470 |
471 | - c867f38: Change split view startup animation
472 |
473 | ## 0.9.76
474 |
475 | ### Patch Changes
476 |
477 | - aa08a8c: introducing ApiInterceptor->useWorker: true/false
478 | - 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.
479 | - 5761868: improve: BarChart - add tick formatter for X and Y axes
480 |
481 | ## 0.9.75
482 |
483 | ### Patch Changes
484 |
485 | - c876be8: Turn docs deploy to standard routing
486 |
487 | ## 0.9.74
488 |
489 | ### Patch Changes
490 |
491 | - 0043c5d: NestedApp new prop: withSplashScreen
492 |
493 | ## 0.9.73
494 |
495 | ### Patch Changes
496 |
497 | - 88bf4f6: extend formatHumanElapsedTime with a short format flag
498 | - fef53db: Allow specifying href targets with the markdown link tag
499 | - 6167648: Fix the useMouseEventHandlers hook
500 | - b2f4483: Fix missing code fence display
501 | - e9040c6: Make the nested app's header smaller
502 |
503 | ## 0.9.72
504 |
505 | ### Patch Changes
506 |
507 | - 4ab3b8a: add omitH1 to TableOfContents
508 | - ac4a283: remove the AppWithCodeView component
509 | - 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
510 |
511 | ## 0.9.71
512 |
513 | ### Patch Changes
514 |
515 | - 5774c53: fix ssr issues with Theme components
516 |
517 | ## 0.9.70
518 |
519 | ### Patch Changes
520 |
521 | - 1da7847: Adjust CodeBlock theme variables for dark tone
522 |
523 | ## 0.9.69
524 |
525 | ### Patch Changes
526 |
527 | - 9b36621: fix flaky Checkbox tests
528 |
529 | ## 0.9.68
530 |
531 | ### Patch Changes
532 |
533 | - 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
534 | - c79ced7: fix ssr hydration warn in AppWithCodeView
535 | - d030ac2: A few theme variable defaults updated
536 | - 21c4fd6: fix: mocked apis should work with multiple NestedApps
537 |
538 | ## 0.9.67
539 |
540 | ### Patch Changes
541 |
542 | - 51a5b05: Small changes in a few component's metadata representation
543 | - 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
544 | - 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
545 | - 3f0e6b0: fix memoization for tabs, pageInfo
546 |
547 | ## 0.9.66
548 |
549 | ### Patch Changes
550 |
551 | - eae8145: Fixed Switch indicator positioning
552 | - b6c64de: improve: charts - improved tick rendering
553 | - 459bd3c: improve: Logo - add inline, alt props
554 | - 96be435: feat: CodeBlock - add new themeVariables
555 |
556 | ## 0.9.65
557 |
558 | ### Patch Changes
559 |
560 | - c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
561 |
562 | ## 0.9.64
563 |
564 | ### Patch Changes
565 |
566 | - 5ad3ffc: Refactored the usage of theme variables in RadioGroup
567 | - da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
568 | - 301cb39: Allow YAML (.yml) theme files in standalone apps
569 | - d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
570 |
571 | ## 0.9.63
572 |
573 | ### Patch Changes
574 |
575 | - b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
576 |
577 | ## 0.9.62
578 |
579 | ### Patch Changes
580 |
581 | - 832f31d: fix: nestedApp fills the available space in AppWithCode component
582 | - 4f9ff06: Fix the build issue with FormSection
583 |
584 | ## 0.9.61
585 |
586 | ### Patch Changes
587 |
588 | - 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
589 |
590 | ## 0.9.60
591 |
592 | ### Patch Changes
593 |
594 | - f37ed8c: Fine tune AppWithCodeView header
595 | - 736dbc8: improve: AppWithCode - center the XML/UI buttons
596 | - e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
597 |
598 | ## 0.9.59
599 |
600 | ### Patch Changes
601 |
602 | - 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
603 | - 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
604 | - 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.
605 | - f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
606 | - 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
607 | - 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
608 |
609 | ## 0.9.58
610 |
611 | ### Patch Changes
612 |
613 | - dc43275: Fixed Pie- & DonutChart height property.
614 | - f9562b5: make flowLayout auto-responsive behavior a bit smarter
615 | - 1af11af: fix: eliminating the duplication of toast messages
616 | - 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.
617 | - 7d255a9: Changed open in new window button tooltip label for all occurrences.
618 | - 69a7a1f: Fixed NavLink label break if overflowing available space.
619 | - 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
620 | - 46bfe72: default style tweaks
621 |
622 | ## 0.9.57
623 |
624 | ### Patch Changes
625 |
626 | - 93a1e70: fix: NavPanel - use layoutCss
627 |
628 | ## 0.9.56
629 |
630 | ### Patch Changes
631 |
632 | - 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
633 |
634 | ## 0.9.55
635 |
636 | ### Patch Changes
637 |
638 | - d507ea8: Add AppWithCodeView component to display code and running app side-by-side
639 |
640 | ## 0.9.54
641 |
642 | ### Patch Changes
643 |
644 | - 2688a95: Change TreeDisplay theme variable defaults
645 |
646 | ## 0.9.53
647 |
648 | ### Patch Changes
649 |
650 | - c64fa25: Allow turning on/off heading anchors in appGlobals
651 | - 73c2c21: wip: code inspector buttons - label change, devtools - animation update
652 |
653 | ## 0.9.52
654 |
655 | ### Patch Changes
656 |
657 | - d079208: The Footer component no provides a themeable gap between its children.
658 | - 2a461d8: feat: NestedApp works with ApiInterceptor
659 | - ad6d81e: fix NestedApp apiUrl overwrite
660 | - f5b9f15: feat: xmlui-devtools - use it in a modal dialog
661 | - 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
662 | - 7af4b4e: change default borderColor
663 | - 851ae21: fix table styling
664 | - 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
665 | - bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
666 | - 38180ce: merge xmlui-charts into core
667 |
668 | ## 0.9.51
669 |
670 | ### Patch Changes
671 |
672 | - ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
673 | - ba2b5cd: Moved Drawer logo position to left.
674 | - 96273bf: fix: Slider - min/max value validation
675 | - 1a81bcf: fix: Markdown renders inline/block images correclty
676 |
677 | ## 0.9.50
678 |
679 | ### Patch Changes
680 |
681 | - e6c3b39: standalone usage: explicit codeBehind reference
682 | - 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
683 | - d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
684 |
685 | ## 0.9.49
686 |
687 | ### Patch Changes
688 |
689 | - 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
690 | - Updated dependencies [3b5e820]
691 | - [email protected]
692 |
693 | ## 0.9.48
694 |
695 | ### Patch Changes
696 |
697 | - b5104b0: feat: Icon component now handles the click event
698 | - 30d5c58: feat: Badge supports theme variable names in colormap
699 | - 2e7f51f: change: the canSort property of Column defaults to true
700 | - 4dd6d7f: feat: chart extension included by default
701 | - f7f0571: fix theme component
702 |
703 | ## 0.9.47
704 |
705 | ### Patch Changes
706 |
707 | - a5bef5d: feat: add "inherit" variant to Text
708 | - ecc52d1: XMLUIExtensions namespace is optional
709 | - 4322e1b: fix: search context scope
710 | - 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
711 |
712 | ## 0.9.46
713 |
714 | ### Patch Changes
715 |
716 | - e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
717 | - 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
718 | - 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.
719 | - bc68330: tweak search indexer
720 | - ef3d208: improve: DatePicker - update chevrons
721 |
722 | ## 0.9.45
723 |
724 | ### Patch Changes
725 |
726 | - 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.
727 | - bd6d1b4: experimental: runtime search indexing
728 | - db5a5f4: fix: Allow APICall as an event handler
729 | - 69b4402: improve: docs - footer logo, FormItem - labelBreak
730 |
731 | ## 0.9.44
732 |
733 | ### Patch Changes
734 |
735 | - 3eab4a3: improve: design updates - devtools, playground, docs
736 | - 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
737 | - cdf96bb: fix: table inside flowlayout, horizontal scrollbar
738 | - 121c55c: Changed the background color of the `marked` Text variant.
739 | - f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
740 |
741 | ## 0.9.43
742 |
743 | ### Patch Changes
744 |
745 | - e2324bb: fix prefetchedContent handling
746 | - cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
747 | - 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
748 | - 42571db: test: create tests for the AutoComplete component, fix bugs
749 | - 05205c7: Add diagnostics to language server
750 | - 0a3d059: fix initial offset calculation for virtualized table/list
751 |
752 | ## 0.9.42
753 |
754 | ### Patch Changes
755 |
756 | - 1ab3881: ssr fixes, experimental prefetchedContent
757 | - 3d9729d: test: add tests for the DatePicker component
758 |
759 | ## 0.9.41
760 |
761 | ### Patch Changes
762 |
763 | - 42416ba: test change for CI #2
764 |
765 | ## 0.9.40
766 |
767 | ### Patch Changes
768 |
769 | - 34282f0: chage to test CI
770 |
771 | ## 0.9.39
772 |
773 | ### Patch Changes
774 |
775 | - b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
776 | - bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
777 | - e67762b: Replaced Admonition emojis with icons
778 |
779 | ## 0.9.38
780 |
781 | ### Patch Changes
782 |
783 | - d314bad: msw update
784 |
785 | ## 0.9.37
786 |
787 | ### Patch Changes
788 |
789 | - 1c33896: ssr fixes
790 | - 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.
791 |
792 | ## 0.9.36
793 |
794 | ### Patch Changes
795 |
796 | - 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
797 |
798 | ## 0.9.35
799 |
800 | ### Patch Changes
801 |
802 | - ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
803 |
804 | ## 0.9.34
805 |
806 | ### Patch Changes
807 |
808 | - bae8280: export NestedApp component
809 | - 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
810 |
811 | ## 0.9.33
812 |
813 | ### Patch Changes
814 |
815 | - dabeb53: Fixed NavPanel background color
816 |
817 | ## 0.9.32
818 |
819 | ### Patch Changes
820 |
821 | - 4019d82: xmlui-playground, new exports from xmlui
822 | - 450e1ee: feat: add aria-placeholder to Select component
823 |
824 | ## 0.9.31
825 |
826 | ### Patch Changes
827 |
828 | - ed53215: test release
829 | - ed53215: another testing
830 |
831 | ## 0.9.30
832 |
833 | ### Patch Changes
834 |
835 | - b0ae113: testing
836 |
837 | ## 0.9.29
838 |
839 | ### Patch Changes
840 |
841 | - f15c018: another testing
842 | - f15c018: testing
843 |
844 | ## 0.9.28
845 |
846 | ### Patch Changes
847 |
848 | - 421968b: testing
849 |
850 | ## 0.9.27
851 |
852 | ### Patch Changes
853 |
854 | - 99bba69: testing
855 |
856 | ## 0.9.26
857 |
858 | ### Patch Changes
859 |
860 | - bcf162c: testing changesets
861 |
```
--------------------------------------------------------------------------------
/docs/public/pages/build-hello-world-component.md:
--------------------------------------------------------------------------------
```markdown
1 | # Build a Hello World component
2 |
3 | In this tutorial we'll build a HelloWorld component that demonstrates the core patterns for XMLUI component development.
4 |
5 | The XMLUI framework supports two types of components:
6 |
7 | **Core components** are built into the main XMLUI library and available by default. Components like Button, Text, Card, and Stack are always available in any XMLUI app.
8 |
9 | **Extension packages** are standalone components that can be optionally included. They are built, distributed, and imported separately, making them perfect for custom components that aren't needed by every XMLUI application.
10 |
11 | We'll build an extension package so the HelloWorld component can:
12 |
13 | - Live separately from the core XMLUI library
14 | - Be optionally included in standalone apps
15 | - Be distributed and reused across different projects
16 |
17 | Extensions are the recommended approach for custom components. By the end of this guide, you'll have created a HelloWorld component that:
18 |
19 | - Displays a customizable greeting message
20 | - Features an interactive click counter
21 | - Uses XMLUI's standard theming system
22 | - Defines event handlers
23 | - Provides callable methods
24 |
25 | ## XMLUI component architecture
26 |
27 | XMLUI components are made of three main parts:
28 |
29 | 1. Native React component (`HelloWorldNative.tsx`) - The actual React implementation
30 | 2. Component metadata (`HelloWorld.tsx`) - Describes props and integrates with XMLUI
31 | 3. For visual components, a .scss file (`HelloWorld.module.scss`)
32 |
33 | This separation allows XMLUI to understand your component's interface while maintaining clean React code.
34 |
35 | ## Prerequisites
36 |
37 | - Familiarity with React and TypeScript
38 | - Basic understanding of XMLUI markup
39 | - Node.js 18.0.0 or higher
40 | - npm (comes with Node.js)
41 |
42 | ## Step 1: Create your project directory
43 |
44 | Let's start by creating a new directory for your HelloWorld component project.
45 |
46 | **Windows**
47 |
48 | ```xmlui copy
49 | mkdir xmlui-hello-world
50 | cd xmlui-hello-world
51 | ```
52 |
53 | **Mac / WSL / Linux**
54 |
55 | ```xmlui copy
56 | mkdir xmlui-hello-world
57 | cd xmlui-hello-world
58 | ```
59 |
60 | This creates a fresh project directory where you'll build your component from scratch.
61 |
62 | > [!INFO]
63 | > This page includes playground examples that use the HelloWorld component. They are available here because this site loads the final extension package that you will build. That means the live playground examples here reflect the final state, not the interim states described as we go along. But in the standalone app that you'll create you will see the progression exactly as described here.
64 |
65 | ## Step 2: Create the package configuration
66 |
67 | First, let's initialize a new npm project and install the xmlui package:
68 |
69 | ```xmlui copy
70 | npm init -y
71 | npm install --save-dev xmlui
72 | ```
73 |
74 | This creates a basic `package.json` and installs the xmlui package as a development dependency.
75 |
76 | Now let's update the `package.json` with the proper configuration for our extension:
77 |
78 | ```xmlui copy
79 | {
80 | "name": "xmlui-hello-world",
81 | "version": "0.1.0",
82 | "type": "module",
83 | "scripts": {
84 | "build:extension": "xmlui build-lib"
85 | },
86 | "devDependencies": {
87 | "xmlui": "*"
88 | },
89 | "main": "./dist/xmlui-hello-world.js",
90 | "module": "./dist/xmlui-hello-world.mjs",
91 | "exports": {
92 | ".": {
93 | "import": "./dist/xmlui-hello-world.mjs",
94 | "require": "./dist/xmlui-hello-world.js"
95 | }
96 | },
97 | "files": [
98 | "dist"
99 | ]
100 | }
101 | ```
102 |
103 | The build system will generate both:
104 |
105 | - xmlui-hello-world.js (CommonJS/UMD for browser script tags)
106 | - xmlui-hello-world.mjs (ES modules for import statements)
107 |
108 | `xmlui-hello-world.js` is the file you'll pull into a standalone XMLUI app using a `<script>` tag.
109 |
110 | ## Step 3: Create the React component
111 |
112 | First, let's create the `src` directory for our component files:
113 |
114 | ```xmlui copy
115 | mkdir src
116 | ```
117 |
118 | Create `src/HelloWorldNative.tsx` with the core React implementation.
119 |
120 | ```xmlui copy
121 | import React, { useState } from "react";
122 | import styles from "./HelloWorld.module.scss";
123 |
124 | type Props = {
125 | id?: string;
126 | message?: string;
127 | };
128 |
129 | export const defaultProps = {
130 | message: "Hello, World!",
131 | };
132 |
133 | export function HelloWorld({
134 | id,
135 | message = defaultProps.message,
136 | }: Props) {
137 | const [clickCount, setClickCount] = useState(0);
138 |
139 | const handleClick = () => {
140 | setClickCount(clickCount + 1);
141 | };
142 |
143 | return (
144 | <div className={styles.container} id={id}>
145 | <h2 className={styles.message}>{message}</h2>
146 | <button className={styles.button} onClick={handleClick}>
147 | Click me!
148 | </button>
149 | <div className={styles.counter}>Clicks: {clickCount}</div>
150 | </div>
151 | );
152 | }
153 | ```
154 |
155 | This creates the core React component with:
156 |
157 | - Essential props (id, message)
158 | - Internal click counter
159 |
160 | ## Step 4: Create basic styles
161 |
162 | ```xmlui copy
163 | .container {
164 | background-color: #f5f5f5;
165 | color: #333;
166 | padding: 1rem;
167 | border-radius: 8px;
168 | text-align: center;
169 | display: inline-block;
170 | min-width: 200px;
171 | }
172 |
173 | .message {
174 | margin: 0 0 1rem 0;
175 | font-size: 1.5rem;
176 | }
177 |
178 | .button {
179 | background-color: #4a90e2;
180 | color: white;
181 | border: none;
182 | padding: 0.75rem 1.5rem;
183 | border-radius: 4px;
184 | cursor: pointer;
185 | font-size: 1rem;
186 | margin-bottom: 1rem;
187 |
188 | &:hover {
189 | opacity: 0.9;
190 | }
191 | }
192 |
193 | .counter {
194 | font-size: 1.2rem;
195 | font-weight: bold;
196 | }
197 | ```
198 |
199 | This SCSS module defines the basic visual styling for our HelloWorld component:
200 |
201 | - `.container` - Main wrapper with background, padding, and layout
202 | - `.message` - Styling for the greeting text
203 | - `.button` - Interactive button with hover effects
204 | - `.counter` - Display for the click count
205 |
206 | At this stage, we use hardcoded colors. In Step 9, we'll replace these theme variables.
207 |
208 | ## Step 5: Create component metadata and renderer
209 |
210 | Create `HelloWorld.tsx`.
211 |
212 | ```xmlui copy
213 | import styles from "./HelloWorld.module.scss";
214 | import { createComponentRenderer, createMetadata } from "xmlui";
215 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
216 |
217 | const HelloWorldMd = createMetadata({
218 | description: "`HelloWorld` is a demonstration component.",
219 | status: "experimental",
220 | props: {
221 | message: {
222 | description: "The message to display.",
223 | isRequired: false,
224 | type: "string",
225 | defaultValue: defaultProps.message,
226 | },
227 | },
228 | });
229 |
230 | export const helloWorldComponentRenderer = createComponentRenderer(
231 | "HelloWorld",
232 | HelloWorldMd,
233 | ({ node, extractValue }) => {
234 | return (
235 | <HelloWorld
236 | id={extractValue.asOptionalString(node.props?.id)}
237 | message={extractValue.asOptionalString(node.props?.message)}
238 | />
239 | );
240 | }
241 | );
242 | ```
243 |
244 | **What we're creating**
245 |
246 | This file bridges the gap between XMLUI markup and React components.
247 |
248 | - Metadata (`HelloWorldMd`) - Documents the component's props, behavior, and usage
249 | - Renderer (`helloWorldComponentRenderer`) - Converts XMLUI markup to React component calls
250 |
251 | **The renderer pattern**
252 |
253 | The renderer function receives XMLUI context (node, extractValue, etc.) and returns a React component.
254 |
255 | It:
256 |
257 | - Extracts prop values from XMLUI markup using `extractValue.asOptionalString()`
258 | - Passes them to the native React component
259 | - Handles optional props gracefully (undefined becomes default values)
260 |
261 | This pattern enables XMLUI to:
262 |
263 | - Validate markup against metadata
264 | - Provide IntelliSense and documentation
265 | - Handle prop type conversion automatically
266 | - Support XMLUI-specific features like theming (step 9) and event handling (Step 10)
267 |
268 | ## Step 6: Create the extension index
269 |
270 | Create `src/index.tsx` which exports your component as an extension.
271 |
272 | ```xmlui copy
273 | cat > src/index.tsx << 'EOF'
274 | import { helloWorldComponentRenderer } from "./HelloWorld";
275 |
276 | export default {
277 | namespace: "XMLUIExtensions",
278 | components: [helloWorldComponentRenderer],
279 | };
280 | EOF
281 | ```
282 |
283 | This creates the main entry point that exports your HelloWorld component under the XMLUIExtensions namespace.
284 |
285 | ## Step 7: Build the extension
286 |
287 | ```xmlui copy
288 | npm run build:extension
289 | ```
290 |
291 | This creates `xmlui-hello-world.js` in the `dist` folder.
292 |
293 | ```xmlui-pg noHeader
294 | ---app
295 | <TreeDisplay content="
296 | packages/xmlui-hello-world
297 | package.json
298 | src
299 | index.tsx
300 | HelloWorld.tsx
301 | HelloWorldNative.tsx
302 | HelloWorld.module.scss
303 | dist
304 | xmlui-hello-world.js
305 | " />
306 | ```
307 |
308 | ## Step 8: Test the extension
309 |
310 | Since we've integrated it into the docs site, you can see it live right here.
311 |
312 | ```xmlui-pg
313 | ---app display
314 | <App>
315 | <VStack gap="2rem" padding="2rem">
316 | <H1>HelloWorld Component Live Demo</H1>
317 |
318 | <Card>
319 | <HelloWorld message="Hello from the docs site!" />
320 | </Card>
321 |
322 | </VStack>
323 |
324 | <script>
325 | // Event handlers for the HelloWorld component
326 | window.addEventListener('helloWorldClick', (event) => {
327 | console.log('HelloWorld clicked!', event.detail);
328 | });
329 | </script>
330 | </App>
331 | ```
332 |
333 | But you will want to see it in a standalone app. Let's create a simple test app to verify our component works.
334 |
335 | First, create a test directory and an `xmlui` subdirectory within it:
336 |
337 | ```xmlui copy
338 | mkdir test-app
339 | cd test-app
340 | mkdir xmlui
341 | ```
342 |
343 | Now, copy your built component into the `xmlui` subdirectory:
344 |
345 | ```xmlui copy
346 | cp ../dist/xmlui-hello-world.js xmlui/xmlui-hello-world.js
347 | ```
348 |
349 | Create the `Main.xmlui` file with your component's markup:
350 |
351 | ```xmlui copy
352 | <App>
353 | <VStack gap="2rem" padding="2rem">
354 | <Heading>HelloWorld Component Test</Heading>
355 | <HelloWorld message="Hello from standalone app!" />
356 | </VStack>
357 |
358 | <script>
359 | // Event handlers for the HelloWorld component
360 | window.addEventListener('helloWorldClick', (event) => {
361 | console.log('HelloWorld clicked!', event.detail);
362 | });
363 | </script>
364 | </App>
365 | ```
366 |
367 | Finally, create a simple `index.html` file to load the XMLUI engine from CDN and your component:
368 |
369 | ```xmlui copy
370 | <!DOCTYPE html>
371 | <html lang="en">
372 | <head>
373 | <meta charset="UTF-8" />
374 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
375 | <title>HelloWorld Extension Test</title>
376 | <script src="https://unpkg.com/xmlui@latest/dist/standalone/xmlui-standalone.umd.js"></script>
377 | <script src="xmlui/xmlui-hello-world.js"></script>
378 | </head>
379 | <body>
380 | </body>
381 | </html>
382 | ```
383 |
384 | This creates a simple test app that loads your component.
385 |
386 | To run the app with Python:
387 |
388 | ```xmlui copy
389 | python -m http.server # visit 8000
390 | ```
391 |
392 | With Node.js:
393 |
394 | ```xmlui copy
395 | npx server # visit 3000
396 | ```
397 |
398 | ## Step 9: Add theming support
399 |
400 | So far, our HelloWorld component uses hardcoded colors. Let's integrate it with XMLUI's theming system to make it more flexible and consistent with the rest of the UI.
401 |
402 | **Understanding XMLUI's theme system**
403 |
404 | XMLUI provides a sophisticated theming system that:
405 |
406 | - Uses semantic design tokens (like `$color-surface-50`, `$color-content-primary`)
407 | - Automatically supports light and dark modes
408 | - Maintains consistency across all components
409 | - Allows runtime customization via the `<Theme>` component
410 |
411 | **Adding theme variables**
412 |
413 | Let's update our SCSS to use XMLUI's theme system:
414 |
415 | ```xmlui copy
416 | @use "xmlui/themes.scss" as t;
417 |
418 | $themeVars: ();
419 | @function createThemeVar($componentVariable) {
420 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
421 | @return t.getThemeVar($themeVars, $componentVariable);
422 | }
423 |
424 | $component: "HelloWorld";
425 |
426 | // Define theme variables for our component
427 | $backgroundColor: createThemeVar("backgroundColor-#{$component}");
428 | $textColor: createThemeVar("textColor-#{$component}");
429 |
430 | .container {
431 | background-color: $backgroundColor;
432 | color: $textColor;
433 | padding: 1rem;
434 | border-radius: 8px;
435 | text-align: center;
436 | display: inline-block;
437 | min-width: 200px;
438 | }
439 |
440 | .message {
441 | margin: 0 0 1rem 0;
442 | font-size: 1.5rem;
443 | }
444 |
445 | .button {
446 | background-color: #4a90e2;
447 | color: white;
448 | border: none;
449 | padding: 0.75rem 1.5rem;
450 | border-radius: 4px;
451 | cursor: pointer;
452 | font-size: 1rem;
453 | margin-bottom: 1rem;
454 |
455 | &:hover {
456 | opacity: 0.9;
457 | }
458 | }
459 |
460 | .counter {
461 | font-size: 1.2rem;
462 | font-weight: bold;
463 | }
464 |
465 | :export {
466 | themeVars: t.json-stringify($themeVars);
467 | }
468 | ```
469 |
470 | **What changed**
471 |
472 | Instead of hardcoded colors like `#f5f5f5` and `#333`, we now use:
473 |
474 | - `$backgroundColor` - Uses XMLUI's surface color tokens
475 | - `$textColor` - Uses XMLUI's content color tokens
476 |
477 | The `createThemeVar()` function registers these variables with XMLUI, making them available for customization via the `<Theme>` component and automatic light/dark mode adaptation.
478 |
479 | The `:export { themeVars: t.json-stringify($themeVars); }` exports the theme variables so XMLUI can read them.
480 |
481 | **Update component metadata**
482 |
483 | We also need to tell XMLUI about our theme variables. Update the metadata in `HelloWorld.tsx`:
484 |
485 | ```xmlui copy
486 | import styles from "./HelloWorld.module.scss";
487 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
488 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
489 |
490 | const HelloWorldMd = createMetadata({
491 | description: "`HelloWorld` is a demonstration component.",
492 | status: "experimental",
493 | props: {
494 | message: {
495 | description: "The message to display.",
496 | isRequired: false,
497 | type: "string",
498 | defaultValue: defaultProps.message,
499 | },
500 | },
501 | themeVars: parseScssVar(styles.themeVars),
502 | defaultThemeVars: {
503 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
504 | [`textColor-HelloWorld`]: "$color-content-primary",
505 | dark: {
506 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
507 | // No textColor override needed - $color-content-primary should auto-adapt
508 | },
509 | },
510 | });
511 |
512 | export const helloWorldComponentRenderer = createComponentRenderer(
513 | "HelloWorld",
514 | HelloWorldMd,
515 | ({ node, extractValue }) => {
516 | return (
517 | <HelloWorld
518 | id={extractValue.asOptionalString(node.props?.id)}
519 | message={extractValue.asOptionalString(node.props?.message)}
520 | />
521 | );
522 | }
523 | );
524 | ```
525 |
526 | **Rebuild and test**
527 |
528 | ```xmlui copy
529 | npm run build:extension
530 | ```
531 |
532 | Now your component uses XMLUI's theme system! It will automatically adapt to light/dark modes and can be customized using the `<Theme>` component.
533 |
534 | **Test the themed component**
535 |
536 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui`.
537 |
538 | ```xmlui-pg
539 | ---app display copy
540 | <App>
541 | <VStack gap="2rem" padding="2rem">
542 | <H1>HelloWorld with Theme Variables</H1>
543 |
544 | <HelloWorld message="Default styling" />
545 |
546 | <Card>
547 | <H2>Custom Colors</H2>
548 | <Theme
549 | backgroundColor-HelloWorld="$color-warn-300"
550 | textColor-HelloWorld="$textColor-primary"
551 | >
552 | <HelloWorld message="Custom colors!" />
553 | </Theme>
554 | </Card>
555 |
556 | <ToneSwitch />
557 | </VStack>
558 | </App>
559 | ```
560 |
561 | Notice how the component now uses theme variables instead of hardcoded colors. The `<Theme>` component allows you to override any theme variable at runtime, making your components incredibly flexible for different contexts and user preferences.
562 |
563 | ## Step 10: Add event handling
564 |
565 | The HelloWorld component has a click handler that increments a counter, and a reset that sets the count to zero. Let's add event definitions to signal parent components when these events happen.
566 |
567 | **Add event definitions**
568 |
569 | Update the component metadata in `src/HelloWorld.tsx`:
570 |
571 | ```xmlui copy
572 | import styles from "./HelloWorld.module.scss";
573 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
574 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
575 |
576 | const HelloWorldMd = createMetadata({
577 | description: "`HelloWorld` is a demonstration component.",
578 | status: "experimental",
579 | props: {
580 | message: {
581 | description: "The message to display.",
582 | isRequired: false,
583 | type: "string",
584 | defaultValue: defaultProps.message,
585 | },
586 | },
587 | events: {
588 | onClick: {
589 | description:
590 | "Triggered when the click button is pressed. " + "Receives the current click count.",
591 | type: "function",
592 | },
593 | onReset: {
594 | description:
595 | "Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
596 | type: "function",
597 | },
598 | },
599 | themeVars: parseScssVar(styles.themeVars),
600 | defaultThemeVars: {
601 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
602 | [`textColor-HelloWorld`]: "$color-content-primary",
603 | dark: {
604 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
605 | // No textColor override needed - $color-content-primary should auto-adapt
606 | },
607 | },
608 | });
609 |
610 | export const helloWorldComponentRenderer = createComponentRenderer(
611 | "HelloWorld",
612 | HelloWorldMd,
613 |
614 | ({ node, extractValue, lookupEventHandler, className }) => {
615 | return (
616 | <HelloWorld
617 | id={extractValue.asOptionalString(node.props?.id)}
618 | message={extractValue.asOptionalString(node.props?.message)}
619 | onClick={lookupEventHandler("onClick")}
620 | onReset={lookupEventHandler("onReset")}
621 | className={className}
622 | />
623 | );
624 | },
625 | );
626 | ```
627 |
628 | **New props**
629 |
630 | - `onClick?: (event: React.MouseEvent) => void` - Called when the click button is pressed
631 | - `onReset?: (event: React.MouseEvent) => void` - Called when the reset button is pressed
632 |
633 | **Event handler changes:**
634 |
635 | - `handleClick` now calls `onClick?.(event)` after updating internal state
636 | - `handleReset` now calls `onReset?.(event)` after resetting the counter
637 | - Both pass the DOM event object (not custom data) to match XMLUI's event system
638 |
639 | **Update the native component**
640 |
641 | Update `src/HelloWorldNative.tsx` to accept and call the event handler.
642 |
643 | ```xmlui copy
644 | import React, { useState } from "react";
645 | import styles from "./HelloWorld.module.scss";
646 |
647 | type Props = {
648 | id?: string;
649 | message?: string;
650 | className?: string;
651 | onClick?: (event: React.MouseEvent) => void;
652 | onReset?: (event: React.MouseEvent) => void;
653 | };
654 |
655 | export const defaultProps = {
656 | message: "Hello, World!",
657 | };
658 |
659 | export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
660 | function HelloWorld(
661 | {
662 | id,
663 | message = defaultProps.message,
664 | className,
665 | onClick,
666 | onReset
667 | },
668 | ref
669 | ) {
670 | const [clickCount, setClickCount] = useState(0);
671 |
672 | const handleClick = (event: React.MouseEvent) => {
673 | const newCount = clickCount + 1;
674 | setClickCount(newCount);
675 | onClick?.(event);
676 | };
677 |
678 | const handleReset = (event: React.MouseEvent) => {
679 | setClickCount(0);
680 | onReset?.(event);
681 | };
682 |
683 | return (
684 | <div className={`${styles.container} ${className || ''}`} id={id}>
685 | <h2 className={styles.message}>{message}</h2>
686 | <button
687 | className={styles.button}
688 | onClick={handleClick}
689 | >
690 | Click me!
691 | </button>
692 | <div className={styles.counter}>
693 | Clicks: <span className={styles.count}>{clickCount}</span>
694 | </div>
695 |
696 | {clickCount > 0 && (
697 | <button
698 | className={styles.button}
699 | onClick={handleReset}
700 | >
701 | Reset
702 | </button>
703 | )}
704 | </div>
705 | );
706 | }
707 | );
708 | ```
709 |
710 | **Metadata changes:**
711 |
712 | - Added `events` section defining `onClick` and `onReset` event handlers
713 | - Each event includes description and type information for documentation
714 |
715 | **Renderer changes:**
716 |
717 | - Added `lookupEventHandler` to the renderer context
718 | - `lookupEventHandler("onClick")` and `lookupEventHandler("onReset")` convert XMLUI event bindings to function references
719 | - These function references are passed to the native React component
720 |
721 | **The event flow:**
722 |
723 | 1. XMLUI markup: `<HelloWorld onClick="handleHelloClick" />`
724 | 2. Renderer: `lookupEventHandler("onClick")` finds the `handleHelloClick` function
725 | 3. Native component: Receives the function as `onClick` prop
726 | 4. User interaction: Triggers the function with the DOM event
727 |
728 | **Rebuild the extension**
729 |
730 | ```xmlui copy
731 | npm run build:extension
732 | ```
733 |
734 | **Define the handlers**
735 |
736 | This site's `index.html` defines these handler functions. For your standalone app you'll need to add them into its `index.html`.
737 |
738 | ```xmlui copy
739 | <script>
740 | window.handleHelloClick = function(event) {
741 | console.log('Hello World clicked!', event);
742 | alert('Button clicked!');
743 | };
744 |
745 | window.handleHelloReset = function(event) {
746 | console.log('Hello World reset!', event);
747 | alert('Counter was reset!');
748 | };
749 | </script>
750 | ```
751 |
752 | **Test event handling**
753 |
754 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui`.
755 |
756 | Now you can use the component with event handling.
757 |
758 | ```xmlui-pg
759 | ---app display copy
760 | <App>
761 | <HelloWorld
762 | onClick="handleHelloClick"
763 | onReset="handleHelloReset"
764 | />
765 | </App>
766 | ```
767 |
768 | ## Step 11: Add component APIs (external methods)
769 |
770 | Update `src/HelloWorldNative.tsx`.
771 |
772 | ```xmlui copy
773 | import React, { useState, useEffect } from "react";
774 | import styles from "./HelloWorld.module.scss";
775 | import type { RegisterComponentApiFn } from "xmlui";
776 |
777 | type Props = {
778 | id?: string;
779 | message?: string;
780 | className?: string;
781 | onClick?: (event: React.MouseEvent) => void;
782 | onReset?: (event: React.MouseEvent) => void;
783 | registerComponentApi?: RegisterComponentApiFn;
784 | };
785 |
786 | export const defaultProps = {
787 | message: "Hello, World!",
788 | };
789 |
790 | export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
791 | function HelloWorld(
792 | {
793 | id,
794 | message = defaultProps.message,
795 | className,
796 | onClick,
797 | onReset,
798 | registerComponentApi
799 | },
800 | ref
801 | ) {
802 | const [clickCount, setClickCount] = useState(0);
803 |
804 | // Create setValue method for external API access
805 | const setValue = (newCount: number) => {
806 | setClickCount(newCount);
807 | };
808 |
809 | // Register component API
810 | useEffect(() => {
811 | registerComponentApi?.({
812 | setValue,
813 | value: clickCount,
814 | });
815 | }, [registerComponentApi, setValue, clickCount]);
816 |
817 | const handleClick = (event: React.MouseEvent) => {
818 | const newCount = clickCount + 1;
819 | setClickCount(newCount);
820 | onClick?.(event);
821 | };
822 |
823 | const handleReset = (event: React.MouseEvent) => {
824 | setClickCount(0);
825 | onReset?.(event);
826 | };
827 |
828 | return (
829 | <div className={`${styles.container} ${className || ''}`} id={id} ref={ref}>
830 | <h2 className={styles.message}>{message}</h2>
831 | <button
832 | className={styles.button}
833 | onClick={handleClick}
834 | >
835 | Click me!
836 | </button>
837 | <div className={styles.counter}>
838 | Clicks: <span className={styles.count}>{clickCount}</span>
839 | </div>
840 |
841 | {clickCount > 0 && (
842 | <button
843 | className={styles.button}
844 | onClick={handleReset}
845 | >
846 | Reset
847 | </button>
848 | )}
849 | </div>
850 | );
851 | }
852 | );
853 | ```
854 |
855 | **New props**
856 |
857 | - `registerComponentApi?: RegisterComponentApiFn` - Function to register component APIs with XMLUI
858 |
859 | **New imports:**
860 |
861 | - `useEffect` from React - For API registration and state synchronization
862 | - `RegisterComponentApiFn` type from "xmlui" - Type for the API registration function
863 |
864 | **API registration:**
865 |
866 | - `setValue` method - Allows external code to set the click count
867 | - `useEffect` hook registers the API with XMLUI, exposing both `setValue` and `value`
868 | - API updates whenever `clickCount` changes, ensuring `value` is always current
869 |
870 | This enables XMLUI markup to directly call `demo.setValue(5)` and read `demo.value`.
871 |
872 | Update `src/HelloWorldNative.tsx`.
873 |
874 | ```xmlui copy
875 | cat > src/HelloWorld.tsx << 'EOF'
876 | import styles from "./HelloWorld.module.scss";
877 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
878 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
879 |
880 | const HelloWorldMd = createMetadata({
881 | description:
882 | "`HelloWorld` is a demonstration component that shows basic XMLUI patterns.",
883 | status: "experimental",
884 | props: {
885 | message: {
886 | description: "The greeting message to display.",
887 | isRequired: false,
888 | type: "string",
889 | defaultValue: defaultProps.message,
890 | },
891 | },
892 | events: {
893 | onClick: {
894 | description:
895 | "Triggered when the click button is pressed. " + "Receives the current click count.",
896 | type: "function",
897 | },
898 | onReset: {
899 | description:
900 | "Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
901 | type: "function",
902 | },
903 | },
904 | apis: {
905 | value: {
906 | description: "The current click count value.",
907 | type: "number",
908 | },
909 | setValue: {
910 | description: "Set the click count to a specific value.",
911 | type: "function",
912 | },
913 | },
914 | themeVars: parseScssVar(styles.themeVars),
915 | defaultThemeVars: {
916 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
917 | [`textColor-HelloWorld`]: "$color-content-primary",
918 | dark: {
919 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
920 | // No textColor override needed - $color-content-primary should auto-adapt
921 | },
922 | },
923 | });
924 |
925 | export const helloWorldComponentRenderer = createComponentRenderer(
926 | "HelloWorld",
927 | HelloWorldMd,
928 |
929 | ({ node, extractValue, lookupEventHandler, className, registerComponentApi }) => {
930 | return (
931 | <HelloWorld
932 | id={extractValue.asOptionalString(node.props?.id)}
933 | message={extractValue.asOptionalString(node.props?.message)}
934 | onClick={lookupEventHandler("onClick")}
935 | onReset={lookupEventHandler("onReset")}
936 | className={className}
937 | registerComponentApi={registerComponentApi}
938 | />
939 | );
940 | },
941 | );
942 | EOF
943 | ```
944 |
945 | **Metadata**
946 |
947 | - Added `apis` section defining `value` (number) and `setValue` (function) APIs
948 |
949 | **Renderer Changes**
950 |
951 | - Added `registerComponentApi` to the renderer context
952 | - Passes `registerComponentApi` to the native component for API registration
953 |
954 | **The API flow:**
955 |
956 | 1. XMLUI markup: `<HelloWorld id="demo" />` creates component with ID
957 | 2. Renderer: Registers component APIs via `registerComponentApi`
958 | 3. External access: `demo.setValue(5)` calls the component's setValue method
959 | 4. State reading: `demo.value` returns the current click count
960 |
961 | ```xmlui copy
962 | npm run build:extension
963 | ```
964 |
965 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui` to see this final version.
966 |
967 | ```xmlui-pg
968 | ---app display copy
969 | <App xmlns:Extensions="component-ns:XMLUIExtensions">
970 |
971 | <Extensions:HelloWorld id="demo" message="API Demo" />
972 |
973 | <CHStack>
974 | <Button onClick="{ console.log('demo.value', demo.value) }">Get Count</Button>
975 | <Button onClick="{ demo.setValue(5) }">Set to 5</Button>
976 | <Button onClick="{ demo.setValue(0) }">Reset</Button>
977 | </CHStack>
978 |
979 | </App>
980 | ```
981 |
```
