This is page 149 of 186. Use http://codebase.md/xmlui-org/xmlui/%7BlogoUrl%7D?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs-swa.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   ├── staticwebapp.config.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── FancyButton.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── tsconfig.json
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── Animation.tsx
│   │       ├── AnimationNative.tsx
│   │       ├── FadeAnimation.tsx
│   │       ├── FadeInAnimation.tsx
│   │       ├── FadeOutAnimation.tsx
│   │       ├── index.tsx
│   │       ├── ScaleAnimation.tsx
│   │       └── SlideInAnimation.tsx
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── HelloWorld.module.scss
│   │       ├── HelloWorld.tsx
│   │       ├── HelloWorldNative.tsx
│   │       └── index.tsx
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── IPhoneFrame.module.scss
│   │       ├── IPhoneFrame.tsx
│   │       ├── MacOSAppFrame.module.scss
│   │       ├── MacOSAppFrame.tsx
│   │       ├── WindowsAppFrame.module.scss
│   │       └── WindowsAppFrame.tsx
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── LazyPdfNative.tsx
│   │       ├── Pdf.module.scss
│   │       └── Pdf.tsx
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── hooks
│   │       │   ├── usePlayground.ts
│   │       │   └── useToast.ts
│   │       ├── index.tsx
│   │       ├── playground
│   │       │   ├── Box.module.scss
│   │       │   ├── Box.tsx
│   │       │   ├── CodeSelector.module.scss
│   │       │   ├── CodeSelector.tsx
│   │       │   ├── ConfirmationDialog.module.scss
│   │       │   ├── ConfirmationDialog.tsx
│   │       │   ├── Editor.tsx
│   │       │   ├── Header.module.scss
│   │       │   ├── Header.tsx
│   │       │   ├── Playground.tsx
│   │       │   ├── PlaygroundContent.module.scss
│   │       │   ├── PlaygroundContent.tsx
│   │       │   ├── PlaygroundNative.module.scss
│   │       │   ├── PlaygroundNative.tsx
│   │       │   ├── Preview.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Search.module.scss
│   │       └── Search.tsx
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       └── src
│           ├── Carousel
│           │   ├── Carousel.module.scss
│           │   ├── Carousel.tsx
│           │   ├── CarouselContext.tsx
│           │   └── CarouselNative.tsx
│           ├── FancyButton
│           │   ├── FancyButton.module.scss
│           │   ├── FancyButton.tsx
│           │   └── FancyButton.xmlui
│           ├── Hello
│           │   ├── Hello.tsx
│           │   ├── Hello.xmlui
│           │   └── Hello.xmlui.xs
│           ├── HeroSection
│           │   ├── HeroSection.module.scss
│           │   ├── HeroSection.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.cjs
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── component-metadata.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.js
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/Table/TableNative.tsx:
--------------------------------------------------------------------------------

```typescript
   1 | import type { CSSProperties, ReactNode } from "react";
   2 | import {
   3 |   forwardRef,
   4 |   useCallback,
   5 |   useEffect,
   6 |   useLayoutEffect,
   7 |   useMemo,
   8 |   useRef,
   9 |   useState,
  10 | } from "react";
  11 | import { flushSync } from "react-dom";
  12 | import type {
  13 |   CellContext,
  14 |   Column,
  15 |   ColumnDef,
  16 |   HeaderContext,
  17 |   PaginationState,
  18 |   RowData,
  19 | } from "@tanstack/react-table";
  20 | import {
  21 |   flexRender,
  22 |   getCoreRowModel,
  23 |   getPaginationRowModel,
  24 |   useReactTable,
  25 | } from "@tanstack/react-table";
  26 | import { composeRefs } from "@radix-ui/react-compose-refs";
  27 | import { useVirtualizer } from "@tanstack/react-virtual";
  28 | import { orderBy } from "lodash-es";
  29 | import classnames from "classnames";
  30 | 
  31 | import styles from "./Table.module.scss";
  32 | 
  33 | import "./react-table-config.d.ts";
  34 | import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
  35 | import type { AsyncFunction } from "../../abstractions/FunctionDefs";
  36 | import { EMPTY_ARRAY } from "../../components-core/constants";
  37 | import { useEvent } from "../../components-core/utils/misc";
  38 | import {
  39 |   useHasExplicitHeight,
  40 |   useIsomorphicLayoutEffect,
  41 |   usePrevious,
  42 |   useResizeObserver,
  43 |   useScrollParent,
  44 |   useStartMargin,
  45 | } from "../../components-core/utils/hooks";
  46 | import { useTheme } from "../../components-core/theming/ThemeContext";
  47 | import { isThemeVarName } from "../../components-core/theming/transformThemeVars";
  48 | import { Spinner } from "../Spinner/SpinnerNative";
  49 | import { Toggle } from "../Toggle/Toggle";
  50 | import { Icon } from "../Icon/IconNative";
  51 | import { type OurColumnMetadata } from "../Column/TableContext";
  52 | import useRowSelection from "./useRowSelection";
  53 | import { PaginationNative, type Position } from "../Pagination/PaginationNative";
  54 | 
  55 | // =====================================================================================================================
  56 | // Helper types
  57 | 
  58 | // --- Declaration merging, see here: https://tanstack.com/table/v8/docs/api/core/table#meta
  59 | declare module "@tanstack/table-core" {
  60 |   // eslint-disable-next-line @typescript-eslint/no-unused-vars
  61 |   interface TableMeta<TData extends RowData> {
  62 |     cellRenderer: (...args: any[]) => any;
  63 |   }
  64 | 
  65 |   // eslint-disable-next-line @typescript-eslint/no-unused-vars
  66 |   interface ColumnMeta<TData extends RowData, TValue> {
  67 |     style?: CSSProperties;
  68 |     starSizedWidth?: string;
  69 |     accessorKey?: string;
  70 |     pinTo?: string;
  71 |     cellRenderer?: (row: any, rowIdx: number, colIdx: number, value?: any) => ReactNode;
  72 |   }
  73 | }
  74 | 
  75 | /**
  76 |  * This type describes an arbitraty table row that has an integer identifier and an order index.
  77 |  */
  78 | type RowWithOrder = {
  79 |   /**
  80 |    * Order index; we use it with paging.
  81 |    */
  82 |   order: number;
  83 | 
  84 |   [x: string | number | symbol]: unknown;
  85 | };
  86 | 
  87 | type SortingDirection = "ascending" | "descending";
  88 | export const TablePaginationControlsLocationValues = ["top", "bottom", "both"] as const;
  89 | export type TablePaginationControlsLocation =
  90 |   (typeof TablePaginationControlsLocationValues)[number];
  91 | 
  92 | export const CheckboxToleranceValues = ["none", "compact", "comfortable", "spacious"] as const;
  93 | export type CheckboxTolerance = (typeof CheckboxToleranceValues)[number];
  94 | 
  95 | // =====================================================================================================================
  96 | // React Table component implementation
  97 | 
  98 | type CellVerticalAlign = "top" | "center" | "bottom";
  99 | 
 100 | type TableProps = {
 101 |   dataIdProperty?: string;
 102 |   data: any[];
 103 |   columns?: OurColumnMetadata[];
 104 |   isPaginated?: boolean;
 105 |   loading?: boolean;
 106 |   headerHeight?: string | number;
 107 |   rowsSelectable?: boolean;
 108 |   enableMultiRowSelection?: boolean;
 109 |   initiallySelected?: string[];
 110 |   syncWithAppState?: any;
 111 |   pageSizeOptions?: number[];
 112 |   currentPageIndex?: number;
 113 |   pageSize?: number;
 114 |   paginationControlsLocation?: TablePaginationControlsLocation;
 115 |   rowDisabledPredicate?: (item: any) => boolean;
 116 |   sortBy?: string;
 117 |   sortingDirection?: SortingDirection;
 118 |   iconSortAsc?: string;
 119 |   iconSortDesc?: string;
 120 |   iconNoSort?: string;
 121 |   sortingDidChange?: AsyncFunction;
 122 |   onSelectionDidChange?: AsyncFunction;
 123 |   willSort?: AsyncFunction;
 124 |   style?: CSSProperties;
 125 |   className?: string;
 126 |   uid?: string;
 127 |   noDataRenderer?: () => ReactNode;
 128 |   autoFocus?: boolean;
 129 |   hideHeader?: boolean;
 130 |   hideNoDataView?: boolean;
 131 |   alwaysShowSelectionHeader?: boolean;
 132 |   registerComponentApi: RegisterComponentApiFn;
 133 |   noBottomBorder?: boolean;
 134 |   cellVerticalAlign?: CellVerticalAlign;
 135 |   showPageInfo?: boolean;
 136 |   showPageSizeSelector?: boolean;
 137 |   showCurrentPage?: boolean;
 138 |   buttonRowPosition?: Position;
 139 |   pageSizeSelectorPosition?: Position;
 140 |   pageInfoPosition?: Position;
 141 |   checkboxTolerance?: CheckboxTolerance;
 142 | };
 143 | 
 144 | function defaultIsRowDisabled(_: any) {
 145 |   return false;
 146 | }
 147 | 
 148 | const SELECT_COLUMN_WIDTH = 42;
 149 | 
 150 | const DEFAULT_PAGE_SIZES = [10];
 151 | 
 152 | /**
 153 |  * Maps checkbox tolerance values to pixel values
 154 |  * @param tolerance - The tolerance level
 155 |  * @returns The number of pixels for the tolerance
 156 |  */
 157 | const getCheckboxTolerancePixels = (tolerance: CheckboxTolerance): number => {
 158 |   switch (tolerance) {
 159 |     case "none":
 160 |       return 0;
 161 |     case "compact":
 162 |       return 8;
 163 |     case "comfortable":
 164 |       return 12;
 165 |     case "spacious":
 166 |       return 16;
 167 |     default:
 168 |       return 8; // fallback to compact
 169 |   }
 170 | };
 171 | 
 172 | /**
 173 |  * Helper function to check if a point is within the checkbox boundary
 174 |  * @param pointX - X coordinate of the point to check
 175 |  * @param pointY - Y coordinate of the point to check
 176 |  * @param checkboxRect - Bounding rectangle of the checkbox
 177 |  * @param tolerancePixels - Number of pixels to extend the boundary
 178 |  * @returns true if the point is within the checkbox or within tolerancePixels of its boundary
 179 |  */
 180 | const isWithinCheckboxBoundary = (
 181 |   pointX: number,
 182 |   pointY: number,
 183 |   checkboxRect: DOMRect,
 184 |   tolerancePixels: number,
 185 | ): boolean => {
 186 |   // Calculate distance from point to checkbox boundaries
 187 |   const distanceToLeft = Math.abs(pointX - checkboxRect.left);
 188 |   const distanceToRight = Math.abs(pointX - checkboxRect.right);
 189 |   const distanceToTop = Math.abs(pointY - checkboxRect.top);
 190 |   const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);
 191 | 
 192 |   // Check if point is within the checkbox bounds or within boundary pixels of any edge
 193 |   const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
 194 |   const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
 195 |   const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;
 196 | 
 197 |   const nearHorizontalBoundary =
 198 |     withinVerticalBounds &&
 199 |     (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels);
 200 |   const nearVerticalBoundary =
 201 |     withinHorizontalBounds &&
 202 |     (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels);
 203 | 
 204 |   return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
 205 | };
 206 | 
 207 | //These are the important styles to make sticky column pinning work!
 208 | //Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
 209 | //View the index.css file for more needed styles such as border-collapse: separate
 210 | const getCommonPinningStyles = (column: Column<RowWithOrder>): CSSProperties => {
 211 |   const isPinned = column.getIsPinned();
 212 |   // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
 213 |   // const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
 214 | 
 215 |   return {
 216 |     // boxShadow: isLastLeftPinnedColumn
 217 |     //   ? "-4px 0 4px -4px gray inset"
 218 |     //   : isFirstRightPinnedColumn
 219 |     //   ? "4px 0 4px -4px gray inset"
 220 |     //   : undefined,
 221 |     left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
 222 |     right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
 223 |     opacity: isPinned ? 0.95 : undefined,
 224 |     position: isPinned ? "sticky" : "relative",
 225 |     backgroundColor: isPinned ? "inherit" : undefined,
 226 |     zIndex: isPinned ? 1 : undefined,
 227 |   };
 228 | };
 229 | 
 230 | // eslint-disable-next-line react/display-name
 231 | export const Table = forwardRef(
 232 |   (
 233 |     {
 234 |       // TEMP: will be removed in favor of idKey
 235 |       dataIdProperty,
 236 |       data = defaultProps.data,
 237 |       columns = defaultProps.columns,
 238 |       isPaginated = defaultProps.isPaginated,
 239 |       loading = defaultProps.loading,
 240 |       headerHeight,
 241 |       rowsSelectable = defaultProps.rowsSelectable,
 242 |       enableMultiRowSelection = defaultProps.enableMultiRowSelection,
 243 |       initiallySelected = defaultProps.initiallySelected,
 244 |       syncWithAppState,
 245 |       pageSizeOptions = defaultProps.pageSizeOptions,
 246 |       pageSize = pageSizeOptions?.[0] || DEFAULT_PAGE_SIZES[0],
 247 |       currentPageIndex = 0,
 248 |       rowDisabledPredicate = defaultIsRowDisabled,
 249 |       sortBy,
 250 |       sortingDirection = defaultProps.sortingDirection,
 251 |       iconSortAsc,
 252 |       iconSortDesc,
 253 |       iconNoSort,
 254 |       sortingDidChange,
 255 |       willSort,
 256 |       style,
 257 |       className,
 258 |       noDataRenderer,
 259 |       autoFocus = defaultProps.autoFocus,
 260 |       hideHeader = defaultProps.hideHeader,
 261 |       hideNoDataView = defaultProps.hideNoDataView,
 262 |       alwaysShowSelectionHeader = defaultProps.alwaysShowSelectionHeader,
 263 |       registerComponentApi,
 264 |       onSelectionDidChange,
 265 |       noBottomBorder = defaultProps.noBottomBorder,
 266 |       paginationControlsLocation = defaultProps.paginationControlsLocation,
 267 |       cellVerticalAlign = defaultProps.cellVerticalAlign,
 268 |       buttonRowPosition = defaultProps.buttonRowPosition,
 269 |       pageSizeSelectorPosition = defaultProps.pageSizeSelectorPosition,
 270 |       pageInfoPosition = defaultProps.pageInfoPosition,
 271 |       showCurrentPage = defaultProps.showCurrentPage,
 272 |       showPageInfo = defaultProps.showPageInfo,
 273 |       showPageSizeSelector = defaultProps.showPageSizeSelector,
 274 |       checkboxTolerance = defaultProps.checkboxTolerance,
 275 |       ...rest
 276 |       // cols
 277 |     }: TableProps,
 278 |     forwardedRef,
 279 |   ) => {
 280 |     const { getThemeVar } = useTheme();
 281 |     const arrayData = Array.isArray(data) ? data : EMPTY_ARRAY;
 282 |     const wrapperRef = useRef<HTMLDivElement>(null);
 283 |     const ref = forwardedRef ? composeRefs(wrapperRef, forwardedRef) : wrapperRef;
 284 |     const tableRef = useRef<HTMLTableElement>(null);
 285 |     const estimatedHeightRef = useRef<number | null>(null);
 286 | 
 287 |     const safeData = useMemo(() => {
 288 |       if (arrayData.length === 0) {
 289 |         return arrayData;
 290 |       }
 291 |       if (dataIdProperty) {
 292 |         return arrayData.map((item) => ({ ...item, id: item[dataIdProperty] }));
 293 |       }
 294 |       // --- Check the first 3 items for an 'id' property
 295 |       const sampleSize = Math.min(3, arrayData.length);
 296 |       const hasIdProperty = arrayData
 297 |         .slice(0, sampleSize)
 298 |         .every((item) => item && item.hasOwnProperty("id"));
 299 |       if (!hasIdProperty) {
 300 |         return arrayData.map((item, index) => ({ ...item, id: index }));
 301 |       }
 302 | 
 303 |       return arrayData;
 304 |     }, [dataIdProperty, arrayData]);
 305 | 
 306 |     const safeColumns: OurColumnMetadata[] = useMemo(() => {
 307 |       if (columns) {
 308 |         return columns;
 309 |       }
 310 |       if (!safeData.length) {
 311 |         return EMPTY_ARRAY;
 312 |       }
 313 |       return Object.keys(safeData[0]).map((key: string) => ({ header: key, accessorKey: key }));
 314 |     }, [columns, safeData]);
 315 | 
 316 |     useEffect(() => {
 317 |       if (autoFocus) {
 318 |         wrapperRef.current!.focus();
 319 |       }
 320 |     }, [autoFocus]);
 321 | 
 322 |     // --- Keep track of visible table rows
 323 |     const [visibleItems, setVisibleItems] = useState<any[]>(EMPTY_ARRAY);
 324 | 
 325 |     // --- Track which row should show forced hover for checkbox
 326 |     const [hoveredRowId, setHoveredRowId] = useState<string | null>(null);
 327 | 
 328 |     // --- Track if the header checkbox should show forced hover
 329 |     const [headerCheckboxHovered, setHeaderCheckboxHovered] = useState<boolean>(false);
 330 | 
 331 |     // --- Calculate tolerance pixels from the prop
 332 |     const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);
 333 | 
 334 |     // --- Get the operations to manage selected rows in a table
 335 |     const {
 336 |       toggleRow,
 337 |       checkAllRows,
 338 |       focusedIndex,
 339 |       onKeyDown,
 340 |       selectedRowIdMap,
 341 |       idKey,
 342 |       selectionApi,
 343 |     } = useRowSelection({
 344 |       items: safeData,
 345 |       visibleItems,
 346 |       rowsSelectable,
 347 |       enableMultiRowSelection,
 348 |       rowDisabledPredicate,
 349 |       onSelectionDidChange,
 350 |       initiallySelected,
 351 |       syncWithAppState,
 352 |     });
 353 | 
 354 |     // --- Create data with order information whenever the items in the table change
 355 |     const dataWithOrder = useMemo(() => {
 356 |       return safeData.map((item, index) => {
 357 |         return {
 358 |           ...item,
 359 |           order: index + 1,
 360 |         };
 361 |       });
 362 |     }, [safeData]);
 363 | 
 364 |     // --- Local or external sorting of data
 365 |     const [_sortBy, _setSortBy] = useState(sortBy);
 366 |     const [_sortingDirection, _setSortingDirection] = useState(sortingDirection);
 367 | 
 368 |     useLayoutEffect(() => {
 369 |       _setSortBy(sortBy);
 370 |     }, [sortBy]);
 371 | 
 372 |     useLayoutEffect(() => {
 373 |       _setSortingDirection(sortingDirection);
 374 |     }, [sortingDirection]);
 375 | 
 376 |     const sortedData = useMemo(() => {
 377 |       if (!_sortBy) {
 378 |         return dataWithOrder;
 379 |       }
 380 |       return orderBy(dataWithOrder, _sortBy, _sortingDirection === "ascending" ? "asc" : "desc");
 381 |     }, [_sortBy, _sortingDirection, dataWithOrder]);
 382 | 
 383 |     const _updateSorting = useCallback(
 384 |       async (accessorKey: string) => {
 385 |         let newDirection: SortingDirection = "ascending";
 386 |         let newSortBy = accessorKey;
 387 |         // The current key is the same as the last -> the user clicked on the same header twice
 388 |         if (_sortBy === accessorKey) {
 389 |           // The last sorting direction was ascending -> make it descending
 390 |           if (_sortingDirection === "ascending") {
 391 |             newDirection = "descending";
 392 |             // The last sorting direction was descending -> remove the sorting from the current key
 393 |           } else {
 394 |             newSortBy = undefined;
 395 |           }
 396 |         }
 397 | 
 398 |         // --- Check if sorting is allowed
 399 |         const result = await willSort?.(newSortBy, newDirection);
 400 |         if (result === false) {
 401 |           return;
 402 |         }
 403 | 
 404 |         _setSortingDirection(newDirection);
 405 |         _setSortBy(newSortBy);
 406 | 
 407 |         // External callback function is always called.
 408 |         // Even if sorting is internal, we can notify other components through this callback
 409 |         sortingDidChange?.(newSortBy, newDirection);
 410 |       },
 411 |       [_sortBy, willSort, sortingDidChange, _sortingDirection],
 412 |     );
 413 | 
 414 |     // --- Prepare column renderers according to columns defined in the table
 415 |     const columnsWithCustomCell: ColumnDef<any>[] = useMemo(() => {
 416 |       return safeColumns.map((col, idx) => {
 417 |         // --- Obtain column width information
 418 |         const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
 419 |         const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
 420 |         const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");
 421 | 
 422 |         const customColumn = {
 423 |           ...col,
 424 |           header: col.header ?? col.accessorKey ?? " ",
 425 |           id: "col_" + idx,
 426 |           size: width,
 427 |           minSize: minWidth,
 428 |           maxSize: maxWidth,
 429 |           enableResizing: col.canResize,
 430 |           enableSorting: col.canSort && !!col.accessorKey,
 431 |           enablePinning: col.pinTo !== undefined,
 432 |           meta: {
 433 |             starSizedWidth,
 434 |             pinTo: col.pinTo,
 435 |             style: col.style,
 436 |             className: col.className,
 437 |             accessorKey: col.accessorKey,
 438 |             cellRenderer: col.cellRenderer,
 439 |           },
 440 |         };
 441 |         return customColumn;
 442 | 
 443 |         function getColumnWidth(
 444 |           colWidth: any,
 445 |           allowStarSize: boolean,
 446 |           propName: string,
 447 |         ): { width?: number; starSizedWidth?: string } {
 448 |           let starSizedWidth: string;
 449 |           let width: number;
 450 |           const resolvedWidth = isThemeVarName(colWidth) ? getThemeVar(colWidth) : colWidth;
 451 |           if (typeof resolvedWidth === "number") {
 452 |             width = resolvedWidth;
 453 |           } else if (typeof resolvedWidth === "string") {
 454 |             const oneStarSizedWidthMatch = resolvedWidth.match(/^\s*\*\s*$/);
 455 |             if (allowStarSize && oneStarSizedWidthMatch) {
 456 |               starSizedWidth = "1*";
 457 |             } else {
 458 |               const starSizedWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*\*\s*$/);
 459 |               if (allowStarSize && starSizedWidthMatch) {
 460 |                 starSizedWidth = starSizedWidthMatch[1] + "*";
 461 |               } else {
 462 |                 const pixelWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*(px)?\s*$/);
 463 |                 if (pixelWidthMatch) {
 464 |                   width = Number(pixelWidthMatch[1]);
 465 |                 } else {
 466 |                   throw new Error(`Invalid TableColumnDef '${propName}' value: ${resolvedWidth}`);
 467 |                 }
 468 |               }
 469 |             }
 470 |           }
 471 |           if (width === undefined && starSizedWidth === undefined && allowStarSize) {
 472 |             starSizedWidth = "1*";
 473 |           }
 474 |           return { width, starSizedWidth };
 475 |         }
 476 |       });
 477 |     }, [getThemeVar, safeColumns]);
 478 | 
 479 |     // --- Prepare column renderers according to columns defined in the table supporting optional row selection
 480 |     const columnsWithSelectColumn: ColumnDef<any>[] = useMemo(() => {
 481 |       // --- Extend the columns with a selection checkbox (indeterminate)
 482 |       const selectColumn = {
 483 |         id: "select",
 484 |         size: SELECT_COLUMN_WIDTH,
 485 |         enableResizing: false,
 486 |         enablePinning: true,
 487 |         meta: {
 488 |           pinTo: "left",
 489 |         },
 490 |         header: ({ table }: HeaderContext<any, unknown>) =>
 491 |           enableMultiRowSelection ? (
 492 |             <Toggle
 493 |               {...{
 494 |                 className: classnames(styles.checkBoxWrapper, {
 495 |                   [styles.showInHeader]: alwaysShowSelectionHeader,
 496 |                   [styles.forceHoverWrapper]: headerCheckboxHovered,
 497 |                 }),
 498 |                 value: table.getIsAllRowsSelected(),
 499 |                 indeterminate: table.getIsSomeRowsSelected(),
 500 |                 forceHover: headerCheckboxHovered,
 501 |                 onDidChange: () => {
 502 |                   const allSelected = table
 503 |                     .getRowModel()
 504 |                     .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
 505 |                   checkAllRows(!allSelected);
 506 |                 },
 507 |               }}
 508 |             />
 509 |           ) : null,
 510 |         cell: ({ row }: CellContext<any, unknown>) => {
 511 |           //console.log(row)
 512 |           return (
 513 |             <Toggle
 514 |               {...{
 515 |                 className: classnames(styles.checkBoxWrapper, {
 516 |                   [styles.forceHoverWrapper]: hoveredRowId === row.id,
 517 |                 }),
 518 |                 value: row.getIsSelected(),
 519 |                 indeterminate: row.getIsSomeSelected(),
 520 |                 forceHover: hoveredRowId === row.id,
 521 |                 onDidChange: () => {
 522 |                   toggleRow(row.original, { metaKey: true });
 523 |                 },
 524 |               }}
 525 |             />
 526 |           );
 527 |         },
 528 |       };
 529 |       return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
 530 |     }, [
 531 |       rowsSelectable,
 532 |       columnsWithCustomCell,
 533 |       enableMultiRowSelection,
 534 |       alwaysShowSelectionHeader,
 535 |       checkAllRows,
 536 |       toggleRow,
 537 |       rowDisabledPredicate,
 538 |       hoveredRowId,
 539 |       headerCheckboxHovered,
 540 |     ]);
 541 | 
 542 |     // --- Set up page information (using the first page size option)
 543 |     // const [pagination, setPagination] = useState<PaginationState>();
 544 |     const [pagination, setPagination] = useState<PaginationState>({
 545 |       pageSize: isPaginated ? pageSize : Number.MAX_VALUE,
 546 |       pageIndex: currentPageIndex,
 547 |     });
 548 | 
 549 |     const prevIsPaginated = usePrevious(isPaginated);
 550 | 
 551 |     useEffect(() => {
 552 |       if (!prevIsPaginated && isPaginated) {
 553 |         setPagination((prev) => {
 554 |           return {
 555 |             ...prev,
 556 |             pageSize: pageSize,
 557 |             pageIndex: 0,
 558 |           };
 559 |         });
 560 |       }
 561 |       if (prevIsPaginated && !isPaginated) {
 562 |         setPagination(() => {
 563 |           return {
 564 |             pageIndex: 0,
 565 |             pageSize: Number.MAX_VALUE,
 566 |           };
 567 |         });
 568 |       }
 569 |     }, [isPaginated, pageSizeOptions, prevIsPaginated, pageSize]);
 570 | 
 571 |     const [columnSizing, setColumnSizing] = useState<Record<string, number>>({});
 572 | 
 573 |     const columnPinning = useMemo(() => {
 574 |       const left: Array<string> = [];
 575 |       const right: Array<string> = [];
 576 |       columnsWithSelectColumn.forEach((col) => {
 577 |         if (col.meta?.pinTo === "right") {
 578 |           right.push(col.id!);
 579 |         }
 580 |         if (col.meta?.pinTo === "left") {
 581 |           left.push(col.id!);
 582 |         }
 583 |       });
 584 |       return {
 585 |         left,
 586 |         right,
 587 |       };
 588 |     }, [columnsWithSelectColumn]);
 589 | 
 590 |     // --- Use the @tanstack/core-table component that manages a table
 591 |     const table = useReactTable<RowWithOrder>({
 592 |       columns: columnsWithSelectColumn,
 593 |       data: sortedData,
 594 |       getCoreRowModel: getCoreRowModel(),
 595 |       getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,
 596 |       enableRowSelection: rowsSelectable,
 597 |       enableMultiRowSelection,
 598 |       columnResizeMode: "onChange",
 599 |       getRowId: useCallback(
 600 |         (originalRow: any) => {
 601 |           return originalRow[idKey] + "";
 602 |         },
 603 |         [idKey],
 604 |       ),
 605 |       state: useMemo(
 606 |         () => ({
 607 |           pagination,
 608 |           rowSelection: selectedRowIdMap,
 609 |           columnSizing,
 610 |           columnPinning,
 611 |         }),
 612 |         [columnPinning, columnSizing, pagination, selectedRowIdMap],
 613 |       ),
 614 |       onColumnSizingChange: setColumnSizing,
 615 |       onPaginationChange: setPagination,
 616 |     });
 617 | 
 618 |     // --- Select the set of visible rows whenever the table rows change
 619 |     const rows = table.getRowModel().rows;
 620 |     useEffect(() => {
 621 |       setVisibleItems(rows.map((row) => row.original));
 622 |     }, [rows]);
 623 | 
 624 |     const scrollParent = useScrollParent(wrapperRef.current?.parentElement);
 625 |     const scrollRef = useRef(scrollParent);
 626 |     scrollRef.current = scrollParent;
 627 | 
 628 |     const hasHeight = useHasExplicitHeight(wrapperRef);
 629 | 
 630 |     const hasOutsideScroll = scrollRef.current && !hasHeight;
 631 | 
 632 |     const startMargin = useStartMargin(hasOutsideScroll, wrapperRef, scrollRef);
 633 | 
 634 |     const rowVirtualizer = useVirtualizer({
 635 |       count: rows.length,
 636 |       getScrollElement: useCallback(() => {
 637 |         return hasOutsideScroll && scrollRef?.current ? scrollRef?.current : wrapperRef.current;
 638 |       }, [scrollRef, hasOutsideScroll]),
 639 |       scrollMargin: startMargin,
 640 |       estimateSize: useCallback(() => {
 641 |         return estimatedHeightRef.current || 30;
 642 |       }, []),
 643 |       overscan: 5,
 644 |     });
 645 | 
 646 |     const paddingTop =
 647 |       rowVirtualizer.getVirtualItems().length > 0
 648 |         ? rowVirtualizer.getVirtualItems()?.[0]?.start - startMargin || 0
 649 |         : 0;
 650 |     const paddingBottom =
 651 |       rowVirtualizer.getVirtualItems().length > 0
 652 |         ? rowVirtualizer.getTotalSize() -
 653 |           (rowVirtualizer.getVirtualItems()?.[rowVirtualizer.getVirtualItems().length - 1]?.end -
 654 |             startMargin || 0)
 655 |         : 0;
 656 | 
 657 |     const hasData = safeData.length !== 0;
 658 | 
 659 |     const touchedSizesRef = useRef<Record<string, boolean>>({});
 660 |     const columnSizeTouched = useCallback((id: string) => {
 661 |       touchedSizesRef.current[id] = true;
 662 |     }, []);
 663 | 
 664 |     const recalculateStarSizes = useEvent(() => {
 665 |       if (!tableRef.current) {
 666 |         return;
 667 |       }
 668 |       let availableWidth = tableRef.current.clientWidth - 1;
 669 |       // -1 to prevent horizontal scroll in scaled browsers (when you zoom in)
 670 |       const widths: Record<string, number> = {};
 671 |       const columnsWithoutSize: Array<Column<RowWithOrder>> = [];
 672 |       const numberOfUnitsById: Record<string, number> = {};
 673 | 
 674 |       table.getAllColumns().forEach((column) => {
 675 |         if (column.columnDef.size !== undefined || touchedSizesRef.current[column.id]) {
 676 |           availableWidth -= columnSizing[column.id] || column.columnDef.size || 0;
 677 |         } else {
 678 |           columnsWithoutSize.push(column);
 679 |           let units: number;
 680 |           if (column.columnDef.meta?.starSizedWidth) {
 681 |             units = Number(column.columnDef.meta?.starSizedWidth.replace("*", "").trim()) || 1;
 682 |           } else {
 683 |             units = 1;
 684 |           }
 685 |           numberOfUnitsById[column.id] = units;
 686 |         }
 687 |       });
 688 |       const numberOfAllUnits = Object.values(numberOfUnitsById).reduce((acc, val) => acc + val, 0);
 689 |       columnsWithoutSize.forEach((column) => {
 690 |         widths[column.id] = Math.floor(
 691 |           availableWidth * (numberOfUnitsById[column.id] / numberOfAllUnits),
 692 |         );
 693 |       });
 694 |       flushSync(() => {
 695 |         setColumnSizing((prev) => {
 696 |           return {
 697 |             ...prev,
 698 |             ...widths,
 699 |           };
 700 |         });
 701 |       });
 702 |     });
 703 | 
 704 |     useResizeObserver(tableRef, recalculateStarSizes);
 705 | 
 706 |     useIsomorphicLayoutEffect(() => {
 707 |       queueMicrotask(() => {
 708 |         recalculateStarSizes();
 709 |       });
 710 |     }, [recalculateStarSizes, safeColumns]);
 711 | 
 712 |     useIsomorphicLayoutEffect(() => {
 713 |       registerComponentApi(selectionApi);
 714 |     }, [registerComponentApi, selectionApi]);
 715 | 
 716 |     const paginationControls = (
 717 |       <PaginationNative
 718 |         pageIndex={pagination.pageIndex}
 719 |         pageSize={pagination.pageSize}
 720 |         itemCount={safeData.length}
 721 |         pageSizeOptions={pageSizeOptions}
 722 |         onPageDidChange={(page) => table.setPageIndex(page)}
 723 |         onPageSizeDidChange={(size) => table.setPageSize(size)}
 724 |         showCurrentPage={showCurrentPage}
 725 |         showPageInfo={showPageInfo}
 726 |         showPageSizeSelector={showPageSizeSelector}
 727 |         buttonRowPosition={buttonRowPosition}
 728 |         pageInfoPosition={pageInfoPosition}
 729 |         pageSizeSelectorPosition={pageSizeSelectorPosition}
 730 |       />
 731 |     );
 732 | 
 733 |     return (
 734 |       <div
 735 |         {...rest}
 736 |         className={classnames(styles.wrapper, className, { [styles.noScroll]: hasOutsideScroll })}
 737 |         tabIndex={-1}
 738 |         onKeyDown={onKeyDown}
 739 |         ref={ref}
 740 |         style={style}
 741 |       >
 742 |         {isPaginated &&
 743 |           hasData &&
 744 |           rows.length > 0 &&
 745 |           pagination &&
 746 |           (paginationControlsLocation === "top" || paginationControlsLocation === "both") &&
 747 |           paginationControls}
 748 | 
 749 |         <table className={styles.table} ref={tableRef}>
 750 |           {!hideHeader && (
 751 |             <thead style={{ height: headerHeight }} className={styles.headerWrapper}>
 752 |               {table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
 753 |                 <tr
 754 |                   key={`${headerGroup.id}-${headerGroupIndex}`}
 755 |                   className={classnames(styles.headerRow, {
 756 |                     [styles.allSelected]: table.getIsAllRowsSelected(),
 757 |                   })}
 758 |                   onClick={(event) => {
 759 |                     const target = event.target as HTMLElement;
 760 |                     const headerCell = target.closest("th");
 761 | 
 762 |                     // Only handle clicks for the select column header
 763 |                     if (headerCell && rowsSelectable && enableMultiRowSelection) {
 764 |                       const header = headerGroup.headers.find((h) => {
 765 |                         const headerElement = headerCell;
 766 |                         return (
 767 |                           headerElement?.getAttribute("data-column-id") === h.id ||
 768 |                           h.id === "select"
 769 |                         );
 770 |                       });
 771 | 
 772 |                       if (header && header.id === "select") {
 773 |                         const clickX = event.clientX;
 774 |                         const clickY = event.clientY;
 775 |                         const checkbox = headerCell.querySelector(
 776 |                           'input[type=\"checkbox\"]',
 777 |                         ) as HTMLInputElement;
 778 | 
 779 |                         if (checkbox) {
 780 |                           const checkboxRect = checkbox.getBoundingClientRect();
 781 | 
 782 |                           if (
 783 |                             isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)
 784 |                           ) {
 785 |                             // Prevent the default click and manually trigger the checkbox
 786 |                             event.preventDefault();
 787 |                             event.stopPropagation();
 788 | 
 789 |                             const allSelected = table
 790 |                               .getRowModel()
 791 |                               .rows.every(
 792 |                                 (row) => rowDisabledPredicate(row.original) || row.getIsSelected(),
 793 |                               );
 794 |                             checkAllRows(!allSelected);
 795 |                           }
 796 |                         }
 797 |                       }
 798 |                     }
 799 |                   }}
 800 |                   onMouseMove={(event) => {
 801 |                     if (rowsSelectable && enableMultiRowSelection) {
 802 |                       const target = event.target as HTMLElement;
 803 |                       const headerCell = target.closest("th");
 804 | 
 805 |                       if (headerCell) {
 806 |                         const header = headerGroup.headers.find((h) => {
 807 |                           const headerElement = headerCell;
 808 |                           return (
 809 |                             headerElement?.getAttribute("data-column-id") === h.id ||
 810 |                             h.id === "select"
 811 |                           );
 812 |                         });
 813 | 
 814 |                         if (header && header.id === "select") {
 815 |                           const mouseX = event.clientX;
 816 |                           const mouseY = event.clientY;
 817 |                           const checkbox = headerCell.querySelector(
 818 |                             'input[type=\"checkbox\"]',
 819 |                           ) as HTMLInputElement;
 820 | 
 821 |                           if (checkbox) {
 822 |                             const checkboxRect = checkbox.getBoundingClientRect();
 823 |                             const shouldShowHover = isWithinCheckboxBoundary(
 824 |                               mouseX,
 825 |                               mouseY,
 826 |                               checkboxRect,
 827 |                               tolerancePixels,
 828 |                             );
 829 | 
 830 |                             if (shouldShowHover && !headerCheckboxHovered) {
 831 |                               setHeaderCheckboxHovered(true);
 832 |                               event.currentTarget.style.cursor = "pointer";
 833 |                             } else if (!shouldShowHover && headerCheckboxHovered) {
 834 |                               setHeaderCheckboxHovered(false);
 835 |                               event.currentTarget.style.cursor = "";
 836 |                             }
 837 |                           }
 838 |                         } else if (headerCheckboxHovered) {
 839 |                           setHeaderCheckboxHovered(false);
 840 |                           event.currentTarget.style.cursor = "";
 841 |                         }
 842 |                       }
 843 |                     }
 844 |                   }}
 845 |                   onMouseLeave={(event) => {
 846 |                     if (headerCheckboxHovered) {
 847 |                       setHeaderCheckboxHovered(false);
 848 |                       event.currentTarget.style.cursor = "";
 849 |                     }
 850 |                   }}
 851 |                 >
 852 |                   {headerGroup.headers.map((header, headerIndex) => {
 853 |                     const { width, ...style } = header.column.columnDef.meta?.style || {};
 854 |                     const size = header.getSize();
 855 |                     const alignmentClass =
 856 |                       cellVerticalAlign === "top"
 857 |                         ? styles.alignTop
 858 |                         : cellVerticalAlign === "bottom"
 859 |                           ? styles.alignBottom
 860 |                           : styles.alignCenter;
 861 |                     return (
 862 |                       <th
 863 |                         key={`${header.id}-${headerIndex}`}
 864 |                         data-column-id={header.id}
 865 |                         className={classnames(styles.columnCell, alignmentClass)}
 866 |                         colSpan={header.colSpan}
 867 |                         style={{
 868 |                           position: "relative",
 869 |                           width: size,
 870 |                           ...getCommonPinningStyles(header.column),
 871 |                         }}
 872 |                       >
 873 |                         <ClickableHeader
 874 |                           hasSorting={
 875 |                             header.column.columnDef.enableSorting &&
 876 |                             !!header.column.columnDef.meta?.accessorKey
 877 |                           }
 878 |                           updateSorting={() =>
 879 |                             _updateSorting(header.column.columnDef.meta?.accessorKey)
 880 |                           }
 881 |                         >
 882 |                           <div className={styles.headerContent} style={style}>
 883 |                             {
 884 |                               flexRender(
 885 |                                 header.column.columnDef.header,
 886 |                                 header.getContext(),
 887 |                               ) as ReactNode
 888 |                             }
 889 |                             {header.column.columnDef.enableSorting && (
 890 |                               <span style={{ display: "inline-flex", maxWidth: 16 }}>
 891 |                                 <ColumnOrderingIndicator
 892 |                                   iconSortAsc={iconSortAsc}
 893 |                                   iconSortDesc={iconSortDesc}
 894 |                                   iconNoSort={iconNoSort}
 895 |                                   direction={
 896 |                                     header.column.columnDef.meta?.accessorKey === _sortBy
 897 |                                       ? _sortingDirection
 898 |                                       : undefined
 899 |                                   }
 900 |                                 />
 901 |                               </span>
 902 |                             )}
 903 |                           </div>
 904 |                         </ClickableHeader>
 905 |                         {header.column.getCanResize() && (
 906 |                           <div
 907 |                             {...{
 908 |                               onDoubleClick: () => {
 909 |                                 touchedSizesRef.current[header.column.id] = false;
 910 |                                 if (header.column.columnDef.size !== undefined) {
 911 |                                   header.column.resetSize();
 912 |                                 } else {
 913 |                                   recalculateStarSizes();
 914 |                                 }
 915 |                               },
 916 |                               onMouseDown: (event) => {
 917 |                                 columnSizeTouched(header.column.id);
 918 |                                 header.getResizeHandler()(event);
 919 |                               },
 920 |                               onTouchStart: (event) => {
 921 |                                 columnSizeTouched(header.column.id);
 922 |                                 header.getResizeHandler()(event);
 923 |                               },
 924 |                               className: classnames(styles.resizer, {
 925 |                                 [styles.isResizing]: header.column.getIsResizing(),
 926 |                               }),
 927 |                             }}
 928 |                           />
 929 |                         )}
 930 |                       </th>
 931 |                     );
 932 |                   })}
 933 |                 </tr>
 934 |               ))}
 935 |             </thead>
 936 |           )}
 937 |           {hasData && (
 938 |             <tbody className={styles.tableBody}>
 939 |               {paddingTop > 0 && (
 940 |                 <tr>
 941 |                   <td style={{ height: `${paddingTop}px` }} />
 942 |                 </tr>
 943 |               )}
 944 |               {rowVirtualizer.getVirtualItems().map((virtualRow) => {
 945 |                 const rowIndex = virtualRow.index;
 946 |                 const row = rows[rowIndex];
 947 |                 return (
 948 |                   <tr
 949 |                     data-index={rowIndex}
 950 |                     key={`${row.id}-${rowIndex}`}
 951 |                     className={classnames(styles.row, {
 952 |                       [styles.selected]: row.getIsSelected(),
 953 |                       [styles.focused]: focusedIndex === rowIndex,
 954 |                       [styles.disabled]: rowDisabledPredicate(row.original),
 955 |                       [styles.noBottomBorder]: noBottomBorder,
 956 |                     })}
 957 |                     ref={(el) => {
 958 |                       if (el && estimatedHeightRef.current === null) {
 959 |                         estimatedHeightRef.current = Math.round(el.getBoundingClientRect().height);
 960 |                       }
 961 |                       rowVirtualizer.measureElement(el);
 962 |                     }}
 963 |                     onClick={(event) => {
 964 |                       if (event?.defaultPrevented) {
 965 |                         return;
 966 |                       }
 967 |                       const target = event.target as HTMLElement;
 968 |                       if (target.tagName.toLowerCase() === "input") {
 969 |                         return;
 970 |                       }
 971 | 
 972 |                       // Check if click is within checkbox boundary
 973 |                       const currentRow = event.currentTarget as HTMLElement;
 974 |                       const checkbox = currentRow.querySelector(
 975 |                         'input[type="checkbox"]',
 976 |                       ) as HTMLInputElement;
 977 | 
 978 |                       if (checkbox) {
 979 |                         const checkboxRect = checkbox.getBoundingClientRect();
 980 |                         const clickX = event.clientX;
 981 |                         const clickY = event.clientY;
 982 | 
 983 |                         if (
 984 |                           isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)
 985 |                         ) {
 986 |                           // Toggle the checkbox when clicking within the boundary
 987 |                           toggleRow(row.original, { metaKey: true });
 988 |                           return;
 989 |                         }
 990 |                       }
 991 | 
 992 |                       toggleRow(row.original, event);
 993 |                     }}
 994 |                     onMouseMove={(event) => {
 995 |                       // Change cursor and hover state when within checkbox boundary
 996 |                       const currentRow = event.currentTarget as HTMLElement;
 997 |                       const checkbox = currentRow.querySelector(
 998 |                         'input[type="checkbox"]',
 999 |                       ) as HTMLInputElement;
1000 | 
1001 |                       if (checkbox) {
1002 |                         const checkboxRect = checkbox.getBoundingClientRect();
1003 |                         const mouseX = event.clientX;
1004 |                         const mouseY = event.clientY;
1005 | 
1006 |                         const shouldShowHover = isWithinCheckboxBoundary(
1007 |                           mouseX,
1008 |                           mouseY,
1009 |                           checkboxRect,
1010 |                           tolerancePixels,
1011 |                         );
1012 | 
1013 |                         // Update hover state and cursor based on proximity to checkbox
1014 |                         if (shouldShowHover) {
1015 |                           setHoveredRowId(row.id);
1016 |                           currentRow.style.cursor = "pointer";
1017 |                         } else {
1018 |                           setHoveredRowId(null);
1019 |                           currentRow.style.cursor = "";
1020 |                         }
1021 |                       }
1022 |                     }}
1023 |                     onMouseLeave={(event) => {
1024 |                       // Reset cursor and hover state when leaving the row
1025 |                       const currentRow = event.currentTarget as HTMLElement;
1026 |                       currentRow.style.cursor = "";
1027 |                       setHoveredRowId(null);
1028 |                     }}
1029 |                   >
1030 |                     {row.getVisibleCells().map((cell, i) => {
1031 |                       const cellRenderer = cell.column.columnDef?.meta?.cellRenderer;
1032 |                       const size = cell.column.getSize();
1033 |                       const alignmentClass =
1034 |                         cellVerticalAlign === "top"
1035 |                           ? styles.alignTop
1036 |                           : cellVerticalAlign === "bottom"
1037 |                             ? styles.alignBottom
1038 |                             : styles.alignCenter;
1039 |                       return (
1040 |                         <td
1041 |                           className={classnames(styles.cell, alignmentClass)}
1042 |                           key={`${cell.id}-${i}`}
1043 |                           style={{
1044 |                             // width: size,
1045 |                             width: size,
1046 |                             ...getCommonPinningStyles(cell.column),
1047 |                           }}
1048 |                         >
1049 |                           {/*we have to wrap it in a div, because tables...
1050 | 
1051 |                           The "Last Cell" Problem: Why This Happens
1052 |                           Even with box-sizing: border-box, the browser gives special treatment to the last column of a table.
1053 | 
1054 |                           With table-layout: fixed, the browser calculates the widths for all columns.
1055 |                           It strictly enforces the widths for columns 1, 2, 3, etc.
1056 |                           The last column is often used as a "catch-all" to ensure the total width of all columns exactly matches the width of the <table> element itself (e.g., 100%).
1057 |                           When you add padding-right to this very last cell, you create a conflict. The browser tries to simultaneously:
1058 |                           Keep the cell's right edge perfectly aligned with the table's right edge.
1059 |                           Render the padding inside that right edge.
1060 | 
1061 |                           Solution: The Inner Wrapper <div>
1062 |                           The most robust and common solution is to decouple the cell's width from its content's padding. You do this by adding a wrapper <div> inside the cell.
1063 |                           The <td> will be responsible only for setting the rigid width.
1064 |                           The inner <div> will be responsible only for handling the padding and content.
1065 |                            */}
1066 |                           <div className={styles.cellContent}>
1067 |                             {cellRenderer
1068 |                               ? cellRenderer(cell.row.original, rowIndex, i, cell?.getValue())
1069 |                               : (flexRender(
1070 |                                   cell.column.columnDef.cell,
1071 |                                   cell.getContext(),
1072 |                                 ) as ReactNode)}
1073 |                           </div>
1074 |                         </td>
1075 |                       );
1076 |                     })}
1077 |                   </tr>
1078 |                 );
1079 |               })}
1080 |               {paddingBottom > 0 && (
1081 |                 <tr>
1082 |                   <td style={{ height: `${paddingBottom}px` }} />
1083 |                 </tr>
1084 |               )}
1085 |             </tbody>
1086 |           )}
1087 |         </table>
1088 |         {loading && !hasData && (
1089 |           <div className={styles.loadingWrapper}>
1090 |             <Spinner />
1091 |           </div>
1092 |         )}
1093 |         {!hideNoDataView &&
1094 |           !loading &&
1095 |           !hasData &&
1096 |           (noDataRenderer ? (
1097 |             noDataRenderer()
1098 |           ) : (
1099 |             <div className={styles.noRows}>No data available</div>
1100 |           ))}
1101 | 
1102 |         {isPaginated &&
1103 |           hasData &&
1104 |           rows.length > 0 &&
1105 |           pagination &&
1106 |           (paginationControlsLocation === "bottom" || paginationControlsLocation === "both") &&
1107 |           paginationControls}
1108 |       </div>
1109 |     );
1110 |   },
1111 | );
1112 | 
1113 | type ClickableHeaderProps = {
1114 |   hasSorting?: boolean;
1115 |   updateSorting?: () => void;
1116 |   children?: ReactNode;
1117 | };
1118 | 
1119 | function ClickableHeader({ hasSorting, updateSorting, children }: ClickableHeaderProps) {
1120 |   return hasSorting ? (
1121 |     <button type="button" className={styles.clickableHeader} onClick={updateSorting}>
1122 |       {children}
1123 |     </button>
1124 |   ) : (
1125 |     <>{children}</>
1126 |   );
1127 | }
1128 | 
1129 | type ColumnOrderingIndicatorProps = {
1130 |   direction?: SortingDirection;
1131 |   iconSortAsc?: string;
1132 |   iconSortDesc?: string;
1133 |   iconNoSort?: string;
1134 | };
1135 | 
1136 | function ColumnOrderingIndicator({
1137 |   direction,
1138 |   iconSortAsc = "sortasc:Table",
1139 |   iconSortDesc = "sortdesc:Table",
1140 |   iconNoSort = "nosort:Table",
1141 | }: ColumnOrderingIndicatorProps) {
1142 |   if (direction === "ascending") {
1143 |     return <Icon name={iconSortAsc} fallback="sortasc" size="12" />; //sortasc
1144 |   } else if (direction === "descending") {
1145 |     return <Icon name={iconSortDesc} fallback="sortdesc" size="12" />; //sortdesc
1146 |   }
1147 |   return iconNoSort !== "-" ? (
1148 |     <Icon name={iconNoSort} fallback="nosort" size="12" />
1149 |   ) : (
1150 |     <Icon name={iconNoSort} size="12" />
1151 |   ); //nosort
1152 | }
1153 | 
1154 | export const defaultProps = {
1155 |   data: EMPTY_ARRAY,
1156 |   dataIdProperty: "id",
1157 |   columns: EMPTY_ARRAY,
1158 |   isPaginated: false,
1159 |   loading: false,
1160 |   rowsSelectable: false,
1161 |   enableMultiRowSelection: true,
1162 |   initiallySelected: EMPTY_ARRAY,
1163 |   pageSizeOptions: [5, 10, 15],
1164 |   sortingDirection: "ascending" as SortingDirection,
1165 |   autoFocus: false,
1166 |   hideHeader: false,
1167 |   hideNoDataView: false,
1168 |   alwaysShowSelectionHeader: false,
1169 |   noBottomBorder: false,
1170 |   paginationControlsLocation: "bottom" as TablePaginationControlsLocation,
1171 |   cellVerticalAlign: "center" as CellVerticalAlign,
1172 |   showPageInfo: true,
1173 |   showPageSizeSelector: true,
1174 |   showCurrentPage: true,
1175 |   buttonRowPosition: "center" as Position,
1176 |   pageSizeSelectorPosition: "start" as Position,
1177 |   pageInfoPosition: "end" as Position,
1178 |   checkboxTolerance: "compact" as CheckboxTolerance,
1179 | };
1180 | 
```

