This is page 134 of 137. Use http://codebase.md/xmlui-org/xmlui/xmlui-standalone.umd.js?lines=false&page={x} to view the full context. # Directory Structure ``` ├── .changeset │ ├── cold-items-taste.md │ ├── config.json │ ├── empty-spiders-dress.md │ ├── shy-windows-allow.md │ ├── sour-coins-read.md │ ├── tame-zebras-invite.md │ ├── three-ideas-invent.md │ ├── twenty-jeans-watch.md │ ├── warm-spies-melt.md │ └── whole-ways-cry.md ├── .eslintrc.cjs ├── .github │ ├── build-checklist.png │ ├── ISSUE_TEMPLATE │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows │ ├── deploy-docs-optimized.yml │ ├── deploy-docs.yml │ ├── prepare-versions.yml │ ├── release-packages.yml │ ├── run-all-tests.yml │ └── run-smoke-tests.yml ├── .gitignore ├── .prettierrc.js ├── .vscode │ ├── launch.json │ └── settings.json ├── blog │ ├── .gitignore │ ├── .gitkeep │ ├── CHANGELOG.md │ ├── extensions.ts │ ├── index.html │ ├── index.ts │ ├── package.json │ ├── public │ │ ├── blog │ │ │ ├── images │ │ │ │ ├── blog-page-component.png │ │ │ │ ├── blog-scrabble.png │ │ │ │ ├── integrated-blog-search.png │ │ │ │ └── lorem-ipsum.png │ │ │ ├── lorem-ipsum.md │ │ │ ├── newest-post.md │ │ │ ├── older-post.md │ │ │ └── welcome-to-the-xmlui-blog.md │ │ ├── mockServiceWorker.js │ │ ├── resources │ │ │ ├── favicon.ico │ │ │ ├── files │ │ │ │ └── for-download │ │ │ │ └── xmlui │ │ │ │ └── xmlui-standalone.umd.js │ │ │ ├── github.svg │ │ │ ├── llms.txt │ │ │ ├── logo-dark.svg │ │ │ ├── logo.svg │ │ │ ├── pg-popout.svg │ │ │ └── xmlui-logo.svg │ │ ├── serve.json │ │ └── web.config │ ├── scripts │ │ ├── download-latest-xmlui.js │ │ ├── generate-rss.js │ │ ├── get-releases.js │ │ └── utils.js │ ├── src │ │ ├── components │ │ │ ├── BlogOverview.xmlui │ │ │ ├── BlogPage.xmlui │ │ │ └── PageNotFound.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 ├── CONTRIBUTING.md ├── docs │ ├── .gitignore │ ├── CHANGELOG.md │ ├── ComponentRefLinks.txt │ ├── content │ │ ├── _meta.json │ │ ├── components │ │ │ ├── _meta.json │ │ │ ├── _overview.md │ │ │ ├── APICall.md │ │ │ ├── App.md │ │ │ ├── AppHeader.md │ │ │ ├── AppState.md │ │ │ ├── AutoComplete.md │ │ │ ├── Avatar.md │ │ │ ├── Backdrop.md │ │ │ ├── Badge.md │ │ │ ├── BarChart.md │ │ │ ├── Bookmark.md │ │ │ ├── Breakout.md │ │ │ ├── Button.md │ │ │ ├── Card.md │ │ │ ├── Carousel.md │ │ │ ├── ChangeListener.md │ │ │ ├── Checkbox.md │ │ │ ├── CHStack.md │ │ │ ├── ColorPicker.md │ │ │ ├── Column.md │ │ │ ├── ContentSeparator.md │ │ │ ├── CVStack.md │ │ │ ├── DataSource.md │ │ │ ├── DateInput.md │ │ │ ├── DatePicker.md │ │ │ ├── DonutChart.md │ │ │ ├── DropdownMenu.md │ │ │ ├── EmojiSelector.md │ │ │ ├── ExpandableItem.md │ │ │ ├── FileInput.md │ │ │ ├── FileUploadDropZone.md │ │ │ ├── FlowLayout.md │ │ │ ├── Footer.md │ │ │ ├── Form.md │ │ │ ├── FormItem.md │ │ │ ├── FormSection.md │ │ │ ├── Fragment.md │ │ │ ├── H1.md │ │ │ ├── H2.md │ │ │ ├── H3.md │ │ │ ├── H4.md │ │ │ ├── H5.md │ │ │ ├── H6.md │ │ │ ├── Heading.md │ │ │ ├── HSplitter.md │ │ │ ├── HStack.md │ │ │ ├── Icon.md │ │ │ ├── IFrame.md │ │ │ ├── Image.md │ │ │ ├── Items.md │ │ │ ├── LabelList.md │ │ │ ├── Legend.md │ │ │ ├── LineChart.md │ │ │ ├── Link.md │ │ │ ├── List.md │ │ │ ├── Logo.md │ │ │ ├── Markdown.md │ │ │ ├── MenuItem.md │ │ │ ├── MenuSeparator.md │ │ │ ├── ModalDialog.md │ │ │ ├── NavGroup.md │ │ │ ├── NavLink.md │ │ │ ├── NavPanel.md │ │ │ ├── NoResult.md │ │ │ ├── NumberBox.md │ │ │ ├── Option.md │ │ │ ├── Page.md │ │ │ ├── PageMetaTitle.md │ │ │ ├── Pages.md │ │ │ ├── Pagination.md │ │ │ ├── PasswordInput.md │ │ │ ├── PieChart.md │ │ │ ├── ProgressBar.md │ │ │ ├── Queue.md │ │ │ ├── RadioGroup.md │ │ │ ├── RealTimeAdapter.md │ │ │ ├── Redirect.md │ │ │ ├── Select.md │ │ │ ├── Slider.md │ │ │ ├── Slot.md │ │ │ ├── SpaceFiller.md │ │ │ ├── Spinner.md │ │ │ ├── Splitter.md │ │ │ ├── Stack.md │ │ │ ├── StickyBox.md │ │ │ ├── SubMenuItem.md │ │ │ ├── Switch.md │ │ │ ├── TabItem.md │ │ │ ├── Table.md │ │ │ ├── TableOfContents.md │ │ │ ├── Tabs.md │ │ │ ├── Text.md │ │ │ ├── TextArea.md │ │ │ ├── TextBox.md │ │ │ ├── Theme.md │ │ │ ├── TimeInput.md │ │ │ ├── Timer.md │ │ │ ├── ToneChangerButton.md │ │ │ ├── ToneSwitch.md │ │ │ ├── Tooltip.md │ │ │ ├── Tree.md │ │ │ ├── VSplitter.md │ │ │ ├── VStack.md │ │ │ ├── xmlui-animations │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ ├── Animation.md │ │ │ │ ├── FadeAnimation.md │ │ │ │ ├── FadeInAnimation.md │ │ │ │ ├── FadeOutAnimation.md │ │ │ │ ├── ScaleAnimation.md │ │ │ │ └── SlideInAnimation.md │ │ │ ├── xmlui-pdf │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ └── Pdf.md │ │ │ ├── xmlui-spreadsheet │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ └── Spreadsheet.md │ │ │ └── xmlui-website-blocks │ │ │ ├── _meta.json │ │ │ ├── _overview.md │ │ │ ├── Carousel.md │ │ │ ├── HelloMd.md │ │ │ ├── HeroSection.md │ │ │ └── ScrollToTop.md │ │ └── extensions │ │ ├── _meta.json │ │ ├── xmlui-animations │ │ │ ├── _meta.json │ │ │ ├── _overview.md │ │ │ ├── Animation.md │ │ │ ├── FadeAnimation.md │ │ │ ├── FadeInAnimation.md │ │ │ ├── FadeOutAnimation.md │ │ │ ├── ScaleAnimation.md │ │ │ └── SlideInAnimation.md │ │ └── xmlui-website-blocks │ │ ├── _meta.json │ │ ├── _overview.md │ │ ├── Carousel.md │ │ ├── HelloMd.md │ │ ├── HeroSection.md │ │ └── ScrollToTop.md │ ├── extensions.ts │ ├── index.html │ ├── index.ts │ ├── package.json │ ├── public │ │ ├── feed.rss │ │ ├── mockServiceWorker.js │ │ ├── pages │ │ │ ├── _meta.json │ │ │ ├── app-structure.md │ │ │ ├── build-editor-component.md │ │ │ ├── build-hello-world-component.md │ │ │ ├── components-intro.md │ │ │ ├── context-variables.md │ │ │ ├── forms.md │ │ │ ├── globals.md │ │ │ ├── glossary.md │ │ │ ├── helper-tags.md │ │ │ ├── hosted-deployment.md │ │ │ ├── howto │ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md │ │ │ │ ├── chain-a-refetch.md │ │ │ │ ├── debug-a-component.md │ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md │ │ │ │ ├── delegate-a-method.md │ │ │ │ ├── do-custom-form-validation.md │ │ │ │ ├── expose-a-method-from-a-component.md │ │ │ │ ├── filter-and-transform-data-from-an-api.md │ │ │ │ ├── group-items-in-list-by-a-property.md │ │ │ │ ├── handle-background-operations.md │ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md │ │ │ │ ├── make-a-set-of-equal-width-cards.md │ │ │ │ ├── make-a-table-responsive.md │ │ │ │ ├── modify-a-value-reported-in-a-column.md │ │ │ │ ├── paginate-a-list.md │ │ │ │ ├── pass-data-to-a-modal-dialog.md │ │ │ │ ├── react-to-button-click-not-keystrokes.md │ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md │ │ │ │ ├── share-a-modaldialog-across-components.md │ │ │ │ ├── sync-selections-between-table-and-list-views.md │ │ │ │ ├── update-ui-optimistically.md │ │ │ │ ├── use-built-in-form-validation.md │ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md │ │ │ ├── howto.md │ │ │ ├── intro.md │ │ │ ├── layout.md │ │ │ ├── markup.md │ │ │ ├── mcp.md │ │ │ ├── modal-dialogs.md │ │ │ ├── news-and-reviews.md │ │ │ ├── reactive-intro.md │ │ │ ├── refactoring.md │ │ │ ├── routing-and-links.md │ │ │ ├── samples │ │ │ │ ├── color-palette.xmlui │ │ │ │ ├── color-values.xmlui │ │ │ │ ├── shadow-sizes.xmlui │ │ │ │ ├── spacing-sizes.xmlui │ │ │ │ ├── swatch.xmlui │ │ │ │ ├── theme-gallery-brief.xmlui │ │ │ │ └── theme-gallery.xmlui │ │ │ ├── scoping.md │ │ │ ├── scripting.md │ │ │ ├── styles-and-themes │ │ │ │ ├── common-units.md │ │ │ │ ├── layout-props.md │ │ │ │ ├── theme-variable-defaults.md │ │ │ │ ├── theme-variables.md │ │ │ │ └── themes.md │ │ │ ├── template-properties.md │ │ │ ├── test.md │ │ │ ├── tutorial-01.md │ │ │ ├── tutorial-02.md │ │ │ ├── tutorial-03.md │ │ │ ├── tutorial-04.md │ │ │ ├── tutorial-05.md │ │ │ ├── tutorial-06.md │ │ │ ├── tutorial-07.md │ │ │ ├── tutorial-08.md │ │ │ ├── tutorial-09.md │ │ │ ├── tutorial-10.md │ │ │ ├── tutorial-11.md │ │ │ ├── tutorial-12.md │ │ │ ├── universal-properties.md │ │ │ ├── user-defined-components.md │ │ │ ├── vscode.md │ │ │ ├── working-with-markdown.md │ │ │ ├── working-with-text.md │ │ │ ├── xmlui-animations │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ ├── Animation.md │ │ │ │ ├── FadeAnimation.md │ │ │ │ ├── FadeInAnimation.md │ │ │ │ ├── FadeOutAnimation.md │ │ │ │ ├── ScaleAnimation.md │ │ │ │ └── SlideInAnimation.md │ │ │ ├── xmlui-charts │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ ├── BarChart.md │ │ │ │ ├── DonutChart.md │ │ │ │ ├── LabelList.md │ │ │ │ ├── Legend.md │ │ │ │ ├── LineChart.md │ │ │ │ └── PieChart.md │ │ │ ├── xmlui-pdf │ │ │ │ ├── _meta.json │ │ │ │ ├── _overview.md │ │ │ │ └── Pdf.md │ │ │ └── xmlui-spreadsheet │ │ │ ├── _meta.json │ │ │ ├── _overview.md │ │ │ └── Spreadsheet.md │ │ ├── resources │ │ │ ├── devdocs │ │ │ │ ├── debug-proxy-object-2.png │ │ │ │ ├── debug-proxy-object.png │ │ │ │ ├── table_editor_01.png │ │ │ │ ├── table_editor_02.png │ │ │ │ ├── table_editor_03.png │ │ │ │ ├── table_editor_04.png │ │ │ │ ├── table_editor_05.png │ │ │ │ ├── table_editor_06.png │ │ │ │ ├── table_editor_07.png │ │ │ │ ├── table_editor_08.png │ │ │ │ ├── table_editor_09.png │ │ │ │ ├── table_editor_10.png │ │ │ │ ├── table_editor_11.png │ │ │ │ ├── table-editor-01.png │ │ │ │ ├── table-editor-02.png │ │ │ │ ├── table-editor-03.png │ │ │ │ ├── table-editor-04.png │ │ │ │ ├── table-editor-06.png │ │ │ │ ├── table-editor-07.png │ │ │ │ ├── table-editor-08.png │ │ │ │ ├── table-editor-09.png │ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png │ │ │ ├── favicon.ico │ │ │ ├── files │ │ │ │ ├── clients.json │ │ │ │ ├── daily-revenue.json │ │ │ │ ├── dashboard-stats.json │ │ │ │ ├── demo.xmlui │ │ │ │ ├── demo.xmlui.xs │ │ │ │ ├── downloads │ │ │ │ │ └── downloads.json │ │ │ │ ├── for-download │ │ │ │ │ ├── index-with-api.html │ │ │ │ │ ├── index.html │ │ │ │ │ ├── mockApi.js │ │ │ │ │ ├── start-darwin.sh │ │ │ │ │ ├── start-linux.sh │ │ │ │ │ ├── start.bat │ │ │ │ │ └── xmlui │ │ │ │ │ └── xmlui-standalone.umd.js │ │ │ │ ├── getting-started │ │ │ │ │ ├── cl-tutorial-final.zip │ │ │ │ │ ├── cl-tutorial.zip │ │ │ │ │ ├── cl-tutorial2.zip │ │ │ │ │ ├── cl-tutorial3.zip │ │ │ │ │ ├── cl-tutorial4.zip │ │ │ │ │ ├── cl-tutorial5.zip │ │ │ │ │ ├── cl-tutorial6.zip │ │ │ │ │ ├── getting-started.zip │ │ │ │ │ ├── hello-xmlui.zip │ │ │ │ │ ├── xmlui-empty.zip │ │ │ │ │ └── xmlui-starter.zip │ │ │ │ ├── howto │ │ │ │ │ └── component-icons │ │ │ │ │ └── up-arrow.svg │ │ │ │ ├── invoices.json │ │ │ │ ├── monthly-status.json │ │ │ │ ├── news-and-reviews.json │ │ │ │ ├── products.json │ │ │ │ ├── releases.json │ │ │ │ ├── tutorials │ │ │ │ │ ├── datasource │ │ │ │ │ │ └── api.ts │ │ │ │ │ └── p2do │ │ │ │ │ ├── api.ts │ │ │ │ │ └── todo-logo.svg │ │ │ │ └── xmlui.json │ │ │ ├── github.svg │ │ │ ├── images │ │ │ │ ├── apiaction-tutorial │ │ │ │ │ ├── add-success.png │ │ │ │ │ ├── apiaction-param.png │ │ │ │ │ ├── change-completed.png │ │ │ │ │ ├── change-in-progress.png │ │ │ │ │ ├── confirm-delete.png │ │ │ │ │ ├── data-error.png │ │ │ │ │ ├── data-progress.png │ │ │ │ │ ├── data-success.png │ │ │ │ │ ├── display-1.png │ │ │ │ │ ├── item-deleted.png │ │ │ │ │ ├── item-updated.png │ │ │ │ │ ├── missing-api-key.png │ │ │ │ │ ├── new-item-added.png │ │ │ │ │ └── test-message.png │ │ │ │ ├── chat-api │ │ │ │ │ └── domain-model.svg │ │ │ │ ├── components │ │ │ │ │ ├── image │ │ │ │ │ │ └── breakfast.jpg │ │ │ │ │ ├── markdown │ │ │ │ │ │ └── colors.png │ │ │ │ │ └── modal │ │ │ │ │ ├── deep_link_dialog_1.jpg │ │ │ │ │ └── deep_link_dialog_2.jpg │ │ │ │ ├── create-apps │ │ │ │ │ ├── collapsed-vertical.png │ │ │ │ │ ├── using-forms-warning-dialog.png │ │ │ │ │ └── using-forms.png │ │ │ │ ├── datasource-tutorial │ │ │ │ │ ├── data-with-header.png │ │ │ │ │ ├── filtered-data.png │ │ │ │ │ ├── filtered-items.png │ │ │ │ │ ├── initial-page-items.png │ │ │ │ │ ├── list-items.png │ │ │ │ │ ├── next-page-items.png │ │ │ │ │ ├── no-data.png │ │ │ │ │ ├── pagination-1.jpg │ │ │ │ │ ├── pagination-1.png │ │ │ │ │ ├── polling-1.png │ │ │ │ │ ├── refetch-data.png │ │ │ │ │ ├── slow-loading.png │ │ │ │ │ ├── test-message.png │ │ │ │ │ ├── Thumbs.db │ │ │ │ │ ├── unconventional-data.png │ │ │ │ │ └── unfiltered-items.png │ │ │ │ ├── flower.jpg │ │ │ │ ├── get-started │ │ │ │ │ ├── add-new-contact.png │ │ │ │ │ ├── app-modified.png │ │ │ │ │ ├── app-start.png │ │ │ │ │ ├── app-with-boxes.png │ │ │ │ │ ├── app-with-toast.png │ │ │ │ │ ├── boilerplate-structure.png │ │ │ │ │ ├── cl-initial.png │ │ │ │ │ ├── cl-start.png │ │ │ │ │ ├── contact-counts.png │ │ │ │ │ ├── contact-dialog-title.png │ │ │ │ │ ├── contact-dialog.png │ │ │ │ │ ├── contact-menus.png │ │ │ │ │ ├── contact-predicates.png │ │ │ │ │ ├── context-menu.png │ │ │ │ │ ├── dashboard-numbers.png │ │ │ │ │ ├── default-contact-list.png │ │ │ │ │ ├── delete-contact.png │ │ │ │ │ ├── delete-task.png │ │ │ │ │ ├── detailed-template.png │ │ │ │ │ ├── edit-contact-details.png │ │ │ │ │ ├── edited-contact-saved.png │ │ │ │ │ ├── empty-sections.png │ │ │ │ │ ├── filter-completed.png │ │ │ │ │ ├── fullwidth-desktop.png │ │ │ │ │ ├── fullwidth-mobile.png │ │ │ │ │ ├── initial-table.png │ │ │ │ │ ├── items-and-badges.png │ │ │ │ │ ├── loading-message.png │ │ │ │ │ ├── new-contact-button.png │ │ │ │ │ ├── new-contact-saved.png │ │ │ │ │ ├── no-empty-sections.png │ │ │ │ │ ├── personal-todo-initial.png │ │ │ │ │ ├── piechart.png │ │ │ │ │ ├── review-today.png │ │ │ │ │ ├── rudimentary-dashboard.png │ │ │ │ │ ├── section-collapsed.png │ │ │ │ │ ├── sectioned-items.png │ │ │ │ │ ├── sections-ordered.png │ │ │ │ │ ├── spacex-list-with-links.png │ │ │ │ │ ├── spacex-list.png │ │ │ │ │ ├── start-personal-todo-1.png │ │ │ │ │ ├── submit-new-contact.png │ │ │ │ │ ├── submit-new-task.png │ │ │ │ │ ├── syntax-highlighting.png │ │ │ │ │ ├── table-with-badge.png │ │ │ │ │ ├── template-with-card.png │ │ │ │ │ ├── test-emulated-api.png │ │ │ │ │ ├── Thumbs.db │ │ │ │ │ ├── todo-logo.png │ │ │ │ │ └── xmlui-tools.png │ │ │ │ ├── HelloApp.png │ │ │ │ ├── HelloApp2.png │ │ │ │ ├── logos │ │ │ │ │ ├── xmlui1.svg │ │ │ │ │ ├── xmlui2.svg │ │ │ │ │ ├── xmlui3.svg │ │ │ │ │ ├── xmlui4.svg │ │ │ │ │ ├── xmlui5.svg │ │ │ │ │ ├── xmlui6.svg │ │ │ │ │ └── xmlui7.svg │ │ │ │ ├── pdf │ │ │ │ │ └── dummy-pdf.jpg │ │ │ │ ├── rendering-engine │ │ │ │ │ ├── AppEngine-flow.svg │ │ │ │ │ ├── Component.svg │ │ │ │ │ ├── CompoundComponent.svg │ │ │ │ │ ├── RootComponent.svg │ │ │ │ │ └── tree-with-containers.svg │ │ │ │ ├── reviewers-guide │ │ │ │ │ ├── AppEngine-flow.svg │ │ │ │ │ └── incbutton-in-action.png │ │ │ │ ├── tools │ │ │ │ │ └── boilerplate-structure.png │ │ │ │ ├── try.svg │ │ │ │ ├── tutorial │ │ │ │ │ ├── app-chat-history.png │ │ │ │ │ ├── app-content-placeholder.png │ │ │ │ │ ├── app-header-and-content.png │ │ │ │ │ ├── app-links-channel-selected.png │ │ │ │ │ ├── app-links-click.png │ │ │ │ │ ├── app-navigation.png │ │ │ │ │ ├── finished-ex01.png │ │ │ │ │ ├── finished-ex02.png │ │ │ │ │ ├── hello.png │ │ │ │ │ ├── splash-screen-advanced.png │ │ │ │ │ ├── splash-screen-after-click.png │ │ │ │ │ ├── splash-screen-centered.png │ │ │ │ │ ├── splash-screen-events.png │ │ │ │ │ ├── splash-screen-expression.png │ │ │ │ │ ├── splash-screen-reuse-after.png │ │ │ │ │ ├── splash-screen-reuse-before.png │ │ │ │ │ └── splash-screen.png │ │ │ │ └── tutorial-01.png │ │ │ ├── llms.txt │ │ │ ├── logo-dark.svg │ │ │ ├── logo.svg │ │ │ ├── pg-popout.svg │ │ │ └── xmlui-logo.svg │ │ ├── serve.json │ │ └── web.config │ ├── scripts │ │ ├── download-latest-xmlui.js │ │ ├── generate-rss.js │ │ ├── get-releases.js │ │ └── utils.js │ ├── src │ │ ├── components │ │ │ ├── BlogOverview.xmlui │ │ │ ├── BlogPage.xmlui │ │ │ ├── Boxes.xmlui │ │ │ ├── Breadcrumb.xmlui │ │ │ ├── ChangeLog.xmlui │ │ │ ├── ColorPalette.xmlui │ │ │ ├── DocumentLinks.xmlui │ │ │ ├── DocumentPage.xmlui │ │ │ ├── DocumentPageNoTOC.xmlui │ │ │ ├── Icons.xmlui │ │ │ ├── IncButton.xmlui │ │ │ ├── IncButton2.xmlui │ │ │ ├── NameValue.xmlui │ │ │ ├── PageNotFound.xmlui │ │ │ ├── PaletteItem.xmlui │ │ │ ├── Palettes.xmlui │ │ │ ├── SectionHeader.xmlui │ │ │ ├── TBD.xmlui │ │ │ ├── Test.xmlui │ │ │ ├── ThemesIntro.xmlui │ │ │ ├── ThousandThemes.xmlui │ │ │ ├── TubeStops.xmlui │ │ │ ├── TubeStops.xmlui.xs │ │ │ └── TwoColumnCode.xmlui │ │ ├── config.ts │ │ ├── Main.xmlui │ │ └── themes │ │ ├── docs-theme.ts │ │ ├── earthtone.ts │ │ ├── xmlui-gray-on-default.ts │ │ ├── xmlui-green-on-default.ts │ │ └── xmlui-orange-on-default.ts │ └── tsconfig.json ├── LICENSE ├── package-lock.json ├── package.json ├── packages │ ├── xmlui-animations │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── Animation.tsx │ │ │ ├── AnimationNative.tsx │ │ │ ├── FadeAnimation.tsx │ │ │ ├── FadeInAnimation.tsx │ │ │ ├── FadeOutAnimation.tsx │ │ │ ├── index.tsx │ │ │ ├── ScaleAnimation.tsx │ │ │ └── SlideInAnimation.tsx │ │ └── tsconfig.json │ ├── xmlui-devtools │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── devtools │ │ │ │ ├── DevTools.tsx │ │ │ │ ├── DevToolsNative.module.scss │ │ │ │ ├── DevToolsNative.tsx │ │ │ │ ├── ModalDialog.module.scss │ │ │ │ ├── ModalDialog.tsx │ │ │ │ ├── ModalVisibilityContext.tsx │ │ │ │ ├── Tooltip.module.scss │ │ │ │ ├── Tooltip.tsx │ │ │ │ └── utils.ts │ │ │ ├── editor │ │ │ │ └── Editor.tsx │ │ │ └── index.tsx │ │ ├── tsconfig.json │ │ └── vite.config-overrides.ts │ ├── xmlui-hello-world │ │ ├── .gitignore │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── HelloWorld.module.scss │ │ │ ├── HelloWorld.tsx │ │ │ ├── HelloWorldNative.tsx │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── xmlui-os-frames │ │ ├── .gitignore │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── IPhoneFrame.module.scss │ │ │ ├── IPhoneFrame.tsx │ │ │ ├── MacOSAppFrame.module.scss │ │ │ ├── MacOSAppFrame.tsx │ │ │ ├── WindowsAppFrame.module.scss │ │ │ └── WindowsAppFrame.tsx │ │ └── tsconfig.json │ ├── xmlui-pdf │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── demo │ │ │ ├── components │ │ │ │ └── Pdf.xmlui │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── LazyPdfNative.tsx │ │ │ ├── Pdf.module.scss │ │ │ └── Pdf.tsx │ │ └── tsconfig.json │ ├── xmlui-playground │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── hooks │ │ │ │ ├── usePlayground.ts │ │ │ │ └── useToast.ts │ │ │ ├── index.tsx │ │ │ ├── playground │ │ │ │ ├── Box.module.scss │ │ │ │ ├── Box.tsx │ │ │ │ ├── CodeSelector.tsx │ │ │ │ ├── ConfirmationDialog.module.scss │ │ │ │ ├── ConfirmationDialog.tsx │ │ │ │ ├── Editor.tsx │ │ │ │ ├── Header.module.scss │ │ │ │ ├── Header.tsx │ │ │ │ ├── Playground.tsx │ │ │ │ ├── PlaygroundContent.module.scss │ │ │ │ ├── PlaygroundContent.tsx │ │ │ │ ├── PlaygroundNative.module.scss │ │ │ │ ├── PlaygroundNative.tsx │ │ │ │ ├── Preview.module.scss │ │ │ │ ├── Preview.tsx │ │ │ │ ├── Select.module.scss │ │ │ │ ├── StandalonePlayground.tsx │ │ │ │ ├── StandalonePlaygroundNative.module.scss │ │ │ │ ├── StandalonePlaygroundNative.tsx │ │ │ │ ├── ThemeSwitcher.module.scss │ │ │ │ ├── ThemeSwitcher.tsx │ │ │ │ ├── ToneSwitcher.tsx │ │ │ │ ├── Tooltip.module.scss │ │ │ │ ├── Tooltip.tsx │ │ │ │ └── utils.ts │ │ │ ├── providers │ │ │ │ ├── Toast.module.scss │ │ │ │ └── ToastProvider.tsx │ │ │ ├── state │ │ │ │ └── store.ts │ │ │ ├── themes │ │ │ │ └── theme.ts │ │ │ └── utils │ │ │ └── helpers.ts │ │ └── tsconfig.json │ ├── xmlui-search │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── Search.module.scss │ │ │ └── Search.tsx │ │ └── tsconfig.json │ ├── xmlui-spreadsheet │ │ ├── .gitignore │ │ ├── demo │ │ │ └── Main.xmlui │ │ ├── index.html │ │ ├── index.ts │ │ ├── meta │ │ │ └── componentsMetadata.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── Spreadsheet.tsx │ │ │ └── SpreadsheetNative.tsx │ │ └── tsconfig.json │ └── xmlui-website-blocks │ ├── .gitignore │ ├── CHANGELOG.md │ ├── demo │ │ ├── components │ │ │ ├── HeroBackgroundBreakoutPage.xmlui │ │ │ ├── HeroBackgroundsPage.xmlui │ │ │ ├── HeroContentsPage.xmlui │ │ │ ├── HeroTextAlignPage.xmlui │ │ │ ├── HeroTextPage.xmlui │ │ │ └── HeroTonesPage.xmlui │ │ ├── Main.xmlui │ │ └── themes │ │ └── default.ts │ ├── index.html │ ├── index.ts │ ├── meta │ │ └── componentsMetadata.ts │ ├── package.json │ ├── public │ │ └── resources │ │ ├── building.jpg │ │ └── xmlui-logo.svg │ ├── src │ │ ├── Carousel │ │ │ ├── Carousel.module.scss │ │ │ ├── Carousel.tsx │ │ │ ├── CarouselContext.tsx │ │ │ └── CarouselNative.tsx │ │ ├── FancyButton │ │ │ ├── FancyButton.module.scss │ │ │ ├── FancyButton.tsx │ │ │ └── FancyButton.xmlui │ │ ├── Hello │ │ │ ├── Hello.tsx │ │ │ ├── Hello.xmlui │ │ │ └── Hello.xmlui.xs │ │ ├── HeroSection │ │ │ ├── HeroSection.module.scss │ │ │ ├── HeroSection.tsx │ │ │ └── HeroSectionNative.tsx │ │ ├── index.tsx │ │ ├── ScrollToTop │ │ │ ├── ScrollToTop.module.scss │ │ │ ├── ScrollToTop.tsx │ │ │ └── ScrollToTopNative.tsx │ │ └── vite-env.d.ts │ └── tsconfig.json ├── README.md ├── tools │ ├── codefence │ │ └── xmlui-code-fence-docs.md │ ├── create-app │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── create-app.ts │ │ ├── helpers │ │ │ ├── copy.ts │ │ │ ├── get-pkg-manager.ts │ │ │ ├── git.ts │ │ │ ├── install.ts │ │ │ ├── is-folder-empty.ts │ │ │ ├── is-writeable.ts │ │ │ ├── make-dir.ts │ │ │ └── validate-pkg.ts │ │ ├── index.ts │ │ ├── package.json │ │ ├── templates │ │ │ ├── default │ │ │ │ └── ts │ │ │ │ ├── gitignore │ │ │ │ ├── index.html │ │ │ │ ├── index.ts │ │ │ │ ├── public │ │ │ │ │ ├── mockServiceWorker.js │ │ │ │ │ ├── resources │ │ │ │ │ │ ├── favicon.ico │ │ │ │ │ │ └── xmlui-logo.svg │ │ │ │ │ └── serve.json │ │ │ │ └── src │ │ │ │ ├── components │ │ │ │ │ ├── ApiAware.xmlui │ │ │ │ │ ├── Home.xmlui │ │ │ │ │ ├── IncButton.xmlui │ │ │ │ │ └── PagePanel.xmlui │ │ │ │ ├── config.ts │ │ │ │ └── Main.xmlui │ │ │ ├── index.ts │ │ │ └── types.ts │ │ └── tsconfig.json │ ├── create-xmlui-hello-world │ │ ├── index.js │ │ └── package.json │ └── vscode │ ├── .gitignore │ ├── .vscode │ │ ├── launch.json │ │ └── tasks.json │ ├── .vscodeignore │ ├── build.sh │ ├── CHANGELOG.md │ ├── esbuild.js │ ├── eslint.config.mjs │ ├── formatter-docs.md │ ├── generate-test-sample.sh │ ├── LICENSE.md │ ├── package-lock.json │ ├── package.json │ ├── README.md │ ├── resources │ │ ├── xmlui-logo.png │ │ └── xmlui-markup-syntax-highlighting.png │ ├── src │ │ ├── extension.ts │ │ └── server.ts │ ├── syntaxes │ │ └── xmlui.tmLanguage.json │ ├── test-samples │ │ └── sample.xmlui │ ├── tsconfig.json │ └── tsconfig.tsbuildinfo ├── turbo.json └── xmlui ├── .gitignore ├── bin │ ├── bootstrap.js │ ├── build-lib.ts │ ├── build.ts │ ├── index.ts │ ├── preview.ts │ ├── start.ts │ ├── vite-xmlui-plugin.ts │ └── viteConfig.ts ├── CHANGELOG.md ├── conventions │ ├── component-qa-checklist.md │ ├── copilot-conventions.md │ ├── create-xmlui-components.md │ ├── mermaid.md │ ├── testing-conventions.md │ └── xmlui-in-a-nutshell.md ├── dev-docs │ ├── accessibility.md │ ├── actions.md │ ├── AppRoot.md │ ├── component-apis.md │ ├── component-rendering.md │ ├── component-review-checklist.md │ ├── containers.md │ ├── data-sources.md │ ├── e2e-summary.md │ ├── expression-evaluation.md │ ├── glossary.md │ ├── helper-components.md │ ├── index.md │ ├── loaders.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 │ ├── rendering-fundamentals.md │ ├── reusable-components.md │ ├── standalone-apps.md │ ├── state-management.md │ └── xmlui-extensibility.xlsx ├── package.json ├── playwright.config.ts ├── scripts │ ├── coverage-only.js │ ├── e2e-test-summary.js │ ├── generate-docs │ │ ├── build-downloads-map.mjs │ │ ├── build-pages-map.mjs │ │ ├── components-config.json │ │ ├── configuration-management.mjs │ │ ├── constants.mjs │ │ ├── create-theme-files.mjs │ │ ├── DocsGenerator.mjs │ │ ├── error-handling.mjs │ │ ├── extensions-config.json │ │ ├── folders.mjs │ │ ├── generate-summary-files.mjs │ │ ├── get-docs.mjs │ │ ├── input-handler.mjs │ │ ├── logger.mjs │ │ ├── logging-standards.mjs │ │ ├── MetadataProcessor.mjs │ │ ├── pattern-utilities.mjs │ │ └── utils.mjs │ ├── get-langserver-metadata.mjs │ ├── inline-links.mjs │ └── README-e2e-summary.md ├── src │ ├── abstractions │ │ ├── _conventions.md │ │ ├── ActionDefs.ts │ │ ├── AppContextDefs.ts │ │ ├── ComponentDefs.ts │ │ ├── ContainerDefs.ts │ │ ├── ExtensionDefs.ts │ │ ├── FunctionDefs.ts │ │ ├── RendererDefs.ts │ │ ├── scripting │ │ │ ├── BlockScope.ts │ │ │ ├── Compilation.ts │ │ │ ├── LogicalThread.ts │ │ │ ├── LoopScope.ts │ │ │ ├── modules.ts │ │ │ ├── ScriptParserError.ts │ │ │ ├── Token.ts │ │ │ ├── TryScope.ts │ │ │ └── TryScopeExp.ts │ │ └── ThemingDefs.ts │ ├── components │ │ ├── _conventions.md │ │ ├── abstractions.ts │ │ ├── Accordion │ │ │ ├── Accordion.md │ │ │ ├── Accordion.module.scss │ │ │ ├── Accordion.spec.ts │ │ │ ├── Accordion.tsx │ │ │ ├── AccordionContext.tsx │ │ │ ├── AccordionItem.tsx │ │ │ ├── AccordionItemNative.tsx │ │ │ └── AccordionNative.tsx │ │ ├── Animation │ │ │ └── AnimationNative.tsx │ │ ├── APICall │ │ │ ├── APICall.md │ │ │ ├── APICall.spec.ts │ │ │ ├── APICall.tsx │ │ │ └── APICallNative.tsx │ │ ├── App │ │ │ ├── App.md │ │ │ ├── App.module.scss │ │ │ ├── App.spec.ts │ │ │ ├── App.tsx │ │ │ ├── AppLayoutContext.ts │ │ │ ├── AppNative.tsx │ │ │ ├── AppStateContext.ts │ │ │ ├── doc-resources │ │ │ │ ├── condensed-sticky.xmlui │ │ │ │ ├── condensed.xmlui │ │ │ │ ├── horizontal-sticky.xmlui │ │ │ │ ├── horizontal.xmlui │ │ │ │ ├── vertical-full-header.xmlui │ │ │ │ ├── vertical-sticky.xmlui │ │ │ │ └── vertical.xmlui │ │ │ ├── IndexerContext.ts │ │ │ ├── LinkInfoContext.ts │ │ │ ├── SearchContext.tsx │ │ │ ├── Sheet.module.scss │ │ │ └── Sheet.tsx │ │ ├── AppHeader │ │ │ ├── AppHeader.md │ │ │ ├── AppHeader.module.scss │ │ │ ├── AppHeader.spec.ts │ │ │ ├── AppHeader.tsx │ │ │ └── AppHeaderNative.tsx │ │ ├── AppState │ │ │ ├── AppState.md │ │ │ ├── AppState.spec.ts │ │ │ ├── AppState.tsx │ │ │ └── AppStateNative.tsx │ │ ├── AutoComplete │ │ │ ├── AutoComplete.md │ │ │ ├── AutoComplete.module.scss │ │ │ ├── AutoComplete.spec.ts │ │ │ ├── AutoComplete.tsx │ │ │ ├── AutoCompleteContext.tsx │ │ │ └── AutoCompleteNative.tsx │ │ ├── Avatar │ │ │ ├── Avatar.md │ │ │ ├── Avatar.module.scss │ │ │ ├── Avatar.spec.ts │ │ │ ├── Avatar.tsx │ │ │ └── AvatarNative.tsx │ │ ├── Backdrop │ │ │ ├── Backdrop.md │ │ │ ├── Backdrop.module.scss │ │ │ ├── Backdrop.spec.ts │ │ │ ├── Backdrop.tsx │ │ │ └── BackdropNative.tsx │ │ ├── Badge │ │ │ ├── Badge.md │ │ │ ├── Badge.module.scss │ │ │ ├── Badge.spec.ts │ │ │ ├── Badge.tsx │ │ │ └── BadgeNative.tsx │ │ ├── Bookmark │ │ │ ├── Bookmark.md │ │ │ ├── Bookmark.module.scss │ │ │ ├── Bookmark.spec.ts │ │ │ ├── Bookmark.tsx │ │ │ └── BookmarkNative.tsx │ │ ├── Breakout │ │ │ ├── Breakout.module.scss │ │ │ ├── Breakout.spec.ts │ │ │ ├── Breakout.tsx │ │ │ └── BreakoutNative.tsx │ │ ├── Button │ │ │ ├── Button-style.spec.ts │ │ │ ├── Button.md │ │ │ ├── Button.module.scss │ │ │ ├── Button.spec.ts │ │ │ ├── Button.tsx │ │ │ └── ButtonNative.tsx │ │ ├── Card │ │ │ ├── Card.md │ │ │ ├── Card.module.scss │ │ │ ├── Card.spec.ts │ │ │ ├── Card.tsx │ │ │ └── CardNative.tsx │ │ ├── Carousel │ │ │ ├── Carousel.md │ │ │ ├── Carousel.module.scss │ │ │ ├── Carousel.spec.ts │ │ │ ├── Carousel.tsx │ │ │ ├── CarouselContext.tsx │ │ │ ├── CarouselItem.tsx │ │ │ ├── CarouselItemNative.tsx │ │ │ └── CarouselNative.tsx │ │ ├── ChangeListener │ │ │ ├── ChangeListener.md │ │ │ ├── ChangeListener.spec.ts │ │ │ ├── ChangeListener.tsx │ │ │ └── ChangeListenerNative.tsx │ │ ├── chart-color-schemes.ts │ │ ├── Charts │ │ │ ├── AreaChart │ │ │ │ ├── AreaChart.md │ │ │ │ ├── AreaChart.spec.ts │ │ │ │ ├── AreaChart.tsx │ │ │ │ └── AreaChartNative.tsx │ │ │ ├── BarChart │ │ │ │ ├── BarChart.md │ │ │ │ ├── BarChart.module.scss │ │ │ │ ├── BarChart.spec.ts │ │ │ │ ├── BarChart.tsx │ │ │ │ └── BarChartNative.tsx │ │ │ ├── DonutChart │ │ │ │ ├── DonutChart.spec.ts │ │ │ │ └── DonutChart.tsx │ │ │ ├── LabelList │ │ │ │ ├── LabelList.spec.ts │ │ │ │ ├── LabelList.tsx │ │ │ │ ├── LabelListNative.module.scss │ │ │ │ └── LabelListNative.tsx │ │ │ ├── Legend │ │ │ │ ├── Legend.spec.ts │ │ │ │ ├── Legend.tsx │ │ │ │ └── LegendNative.tsx │ │ │ ├── LineChart │ │ │ │ ├── LineChart.md │ │ │ │ ├── LineChart.module.scss │ │ │ │ ├── LineChart.spec.ts │ │ │ │ ├── LineChart.tsx │ │ │ │ └── LineChartNative.tsx │ │ │ ├── PieChart │ │ │ │ ├── PieChart.md │ │ │ │ ├── PieChart.spec.ts │ │ │ │ ├── PieChart.tsx │ │ │ │ ├── PieChartNative.module.scss │ │ │ │ └── PieChartNative.tsx │ │ │ ├── RadarChart │ │ │ │ ├── RadarChart.md │ │ │ │ ├── RadarChart.spec.ts │ │ │ │ ├── RadarChart.tsx │ │ │ │ └── RadarChartNative.tsx │ │ │ ├── Tooltip │ │ │ │ ├── TooltipContent.module.scss │ │ │ │ ├── TooltipContent.spec.ts │ │ │ │ └── TooltipContent.tsx │ │ │ └── utils │ │ │ ├── abstractions.ts │ │ │ └── ChartProvider.tsx │ │ ├── Checkbox │ │ │ ├── Checkbox.md │ │ │ ├── Checkbox.spec.ts │ │ │ └── Checkbox.tsx │ │ ├── CodeBlock │ │ │ ├── CodeBlock.module.scss │ │ │ ├── CodeBlock.spec.ts │ │ │ ├── CodeBlock.tsx │ │ │ ├── CodeBlockNative.tsx │ │ │ └── highlight-code.ts │ │ ├── collectedComponentMetadata.ts │ │ ├── ColorPicker │ │ │ ├── ColorPicker.md │ │ │ ├── ColorPicker.module.scss │ │ │ ├── ColorPicker.spec.ts │ │ │ ├── ColorPicker.tsx │ │ │ └── ColorPickerNative.tsx │ │ ├── Column │ │ │ ├── Column.md │ │ │ ├── Column.tsx │ │ │ ├── ColumnNative.tsx │ │ │ ├── doc-resources │ │ │ │ └── list-component-data.js │ │ │ └── TableContext.tsx │ │ ├── component-utils.ts │ │ ├── ComponentProvider.tsx │ │ ├── ComponentRegistryContext.tsx │ │ ├── container-helpers.tsx │ │ ├── ContentSeparator │ │ │ ├── ContentSeparator.md │ │ │ ├── ContentSeparator.module.scss │ │ │ ├── ContentSeparator.spec.ts │ │ │ ├── ContentSeparator.tsx │ │ │ └── ContentSeparatorNative.tsx │ │ ├── DataSource │ │ │ ├── DataSource.md │ │ │ └── DataSource.tsx │ │ ├── DateInput │ │ │ ├── DateInput.md │ │ │ ├── DateInput.module.scss │ │ │ ├── DateInput.spec.ts │ │ │ ├── DateInput.tsx │ │ │ └── DateInputNative.tsx │ │ ├── DatePicker │ │ │ ├── DatePicker.md │ │ │ ├── DatePicker.module.scss │ │ │ ├── DatePicker.spec.ts │ │ │ ├── DatePicker.tsx │ │ │ └── DatePickerNative.tsx │ │ ├── DropdownMenu │ │ │ ├── DropdownMenu.md │ │ │ ├── DropdownMenu.module.scss │ │ │ ├── DropdownMenu.spec.ts │ │ │ ├── DropdownMenu.tsx │ │ │ ├── DropdownMenuNative.tsx │ │ │ ├── MenuItem.md │ │ │ └── SubMenuItem.md │ │ ├── EmojiSelector │ │ │ ├── EmojiSelector.md │ │ │ ├── EmojiSelector.spec.ts │ │ │ ├── EmojiSelector.tsx │ │ │ └── EmojiSelectorNative.tsx │ │ ├── ExpandableItem │ │ │ ├── ExpandableItem.module.scss │ │ │ ├── ExpandableItem.spec.ts │ │ │ ├── ExpandableItem.tsx │ │ │ └── ExpandableItemNative.tsx │ │ ├── FileInput │ │ │ ├── FileInput.md │ │ │ ├── FileInput.module.scss │ │ │ ├── FileInput.spec.ts │ │ │ ├── FileInput.tsx │ │ │ └── FileInputNative.tsx │ │ ├── FileUploadDropZone │ │ │ ├── FileUploadDropZone.md │ │ │ ├── FileUploadDropZone.module.scss │ │ │ ├── FileUploadDropZone.spec.ts │ │ │ ├── FileUploadDropZone.tsx │ │ │ └── FileUploadDropZoneNative.tsx │ │ ├── FlowLayout │ │ │ ├── FlowLayout.md │ │ │ ├── FlowLayout.module.scss │ │ │ ├── FlowLayout.spec.ts │ │ │ ├── FlowLayout.spec.ts-snapshots │ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png │ │ │ ├── FlowLayout.tsx │ │ │ └── FlowLayoutNative.tsx │ │ ├── Footer │ │ │ ├── Footer.md │ │ │ ├── Footer.module.scss │ │ │ ├── Footer.spec.ts │ │ │ ├── Footer.tsx │ │ │ └── FooterNative.tsx │ │ ├── Form │ │ │ ├── Form.md │ │ │ ├── Form.module.scss │ │ │ ├── Form.spec.ts │ │ │ ├── Form.tsx │ │ │ ├── formActions.ts │ │ │ ├── FormContext.ts │ │ │ └── FormNative.tsx │ │ ├── FormItem │ │ │ ├── FormItem.md │ │ │ ├── FormItem.module.scss │ │ │ ├── FormItem.spec.ts │ │ │ ├── FormItem.tsx │ │ │ ├── FormItemNative.tsx │ │ │ ├── HelperText.module.scss │ │ │ ├── HelperText.tsx │ │ │ ├── ItemWithLabel.tsx │ │ │ └── Validations.ts │ │ ├── FormSection │ │ │ ├── FormSection.md │ │ │ ├── FormSection.ts │ │ │ └── FormSection.xmlui │ │ ├── Fragment │ │ │ ├── Fragment.spec.ts │ │ │ └── Fragment.tsx │ │ ├── Heading │ │ │ ├── abstractions.ts │ │ │ ├── H1.md │ │ │ ├── H1.spec.ts │ │ │ ├── H2.md │ │ │ ├── H2.spec.ts │ │ │ ├── H3.md │ │ │ ├── H3.spec.ts │ │ │ ├── H4.md │ │ │ ├── H4.spec.ts │ │ │ ├── H5.md │ │ │ ├── H5.spec.ts │ │ │ ├── H6.md │ │ │ ├── H6.spec.ts │ │ │ ├── Heading.md │ │ │ ├── Heading.module.scss │ │ │ ├── Heading.spec.ts │ │ │ ├── Heading.tsx │ │ │ └── HeadingNative.tsx │ │ ├── HoverCard │ │ │ ├── HoverCard.tsx │ │ │ └── HovercardNative.tsx │ │ ├── HtmlTags │ │ │ ├── HtmlTags.module.scss │ │ │ ├── HtmlTags.spec.ts │ │ │ └── HtmlTags.tsx │ │ ├── Icon │ │ │ ├── AdmonitionDanger.tsx │ │ │ ├── AdmonitionInfo.tsx │ │ │ ├── AdmonitionNote.tsx │ │ │ ├── AdmonitionTip.tsx │ │ │ ├── AdmonitionWarning.tsx │ │ │ ├── ApiIcon.tsx │ │ │ ├── ArrowDropDown.module.scss │ │ │ ├── ArrowDropDown.tsx │ │ │ ├── ArrowDropUp.module.scss │ │ │ ├── ArrowDropUp.tsx │ │ │ ├── ArrowLeft.module.scss │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowRight.module.scss │ │ │ ├── ArrowRight.tsx │ │ │ ├── Attach.tsx │ │ │ ├── Binding.module.scss │ │ │ ├── Binding.tsx │ │ │ ├── BoardIcon.tsx │ │ │ ├── BoxIcon.tsx │ │ │ ├── CheckIcon.tsx │ │ │ ├── ChevronDownIcon.tsx │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronRight.tsx │ │ │ ├── ChevronUpIcon.tsx │ │ │ ├── CodeFileIcon.tsx │ │ │ ├── CodeSandbox.tsx │ │ │ ├── CompactListIcon.tsx │ │ │ ├── ContentCopyIcon.tsx │ │ │ ├── DarkToLightIcon.tsx │ │ │ ├── DatabaseIcon.module.scss │ │ │ ├── DatabaseIcon.tsx │ │ │ ├── DocFileIcon.tsx │ │ │ ├── DocIcon.tsx │ │ │ ├── DotMenuHorizontalIcon.tsx │ │ │ ├── DotMenuIcon.tsx │ │ │ ├── EmailIcon.tsx │ │ │ ├── EmptyFolderIcon.tsx │ │ │ ├── ErrorIcon.tsx │ │ │ ├── ExpressionIcon.tsx │ │ │ ├── FillPlusCricleIcon.tsx │ │ │ ├── FilterIcon.tsx │ │ │ ├── FolderIcon.tsx │ │ │ ├── GlobeIcon.tsx │ │ │ ├── HomeIcon.tsx │ │ │ ├── HyperLinkIcon.tsx │ │ │ ├── Icon.md │ │ │ ├── Icon.module.scss │ │ │ ├── Icon.spec.ts │ │ │ ├── Icon.tsx │ │ │ ├── IconNative.tsx │ │ │ ├── ImageFileIcon.tsx │ │ │ ├── Inspect.tsx │ │ │ ├── LightToDark.tsx │ │ │ ├── LinkIcon.tsx │ │ │ ├── ListIcon.tsx │ │ │ ├── LooseListIcon.tsx │ │ │ ├── MoonIcon.tsx │ │ │ ├── MoreOptionsIcon.tsx │ │ │ ├── NoSortIcon.tsx │ │ │ ├── PDFIcon.tsx │ │ │ ├── PenIcon.tsx │ │ │ ├── PhoneIcon.tsx │ │ │ ├── PhotoIcon.tsx │ │ │ ├── PlusIcon.tsx │ │ │ ├── SearchIcon.tsx │ │ │ ├── ShareIcon.tsx │ │ │ ├── SortAscendingIcon.tsx │ │ │ ├── SortDescendingIcon.tsx │ │ │ ├── StarsIcon.tsx │ │ │ ├── SunIcon.tsx │ │ │ ├── svg │ │ │ │ ├── admonition_danger.svg │ │ │ │ ├── admonition_info.svg │ │ │ │ ├── admonition_note.svg │ │ │ │ ├── admonition_tip.svg │ │ │ │ ├── admonition_warning.svg │ │ │ │ ├── api.svg │ │ │ │ ├── arrow-dropdown.svg │ │ │ │ ├── arrow-left.svg │ │ │ │ ├── arrow-right.svg │ │ │ │ ├── arrow-up.svg │ │ │ │ ├── attach.svg │ │ │ │ ├── binding.svg │ │ │ │ ├── box.svg │ │ │ │ ├── bulb.svg │ │ │ │ ├── code-file.svg │ │ │ │ ├── code-sandbox.svg │ │ │ │ ├── dark_to_light.svg │ │ │ │ ├── database.svg │ │ │ │ ├── doc.svg │ │ │ │ ├── empty-folder.svg │ │ │ │ ├── expression.svg │ │ │ │ ├── eye-closed.svg │ │ │ │ ├── eye-dark.svg │ │ │ │ ├── eye.svg │ │ │ │ ├── file-text.svg │ │ │ │ ├── filter.svg │ │ │ │ ├── folder.svg │ │ │ │ ├── img.svg │ │ │ │ ├── inspect.svg │ │ │ │ ├── light_to_dark.svg │ │ │ │ ├── moon.svg │ │ │ │ ├── pdf.svg │ │ │ │ ├── photo.svg │ │ │ │ ├── share.svg │ │ │ │ ├── stars.svg │ │ │ │ ├── sun.svg │ │ │ │ ├── trending-down.svg │ │ │ │ ├── trending-level.svg │ │ │ │ ├── trending-up.svg │ │ │ │ ├── txt.svg │ │ │ │ ├── unknown-file.svg │ │ │ │ ├── unlink.svg │ │ │ │ └── xls.svg │ │ │ ├── TableDeleteColumnIcon.tsx │ │ │ ├── TableDeleteRowIcon.tsx │ │ │ ├── TableInsertColumnIcon.tsx │ │ │ ├── TableInsertRowIcon.tsx │ │ │ ├── TrashIcon.tsx │ │ │ ├── TrendingDownIcon.tsx │ │ │ ├── TrendingLevelIcon.tsx │ │ │ ├── TrendingUpIcon.tsx │ │ │ ├── TxtIcon.tsx │ │ │ ├── UnknownFileIcon.tsx │ │ │ ├── UnlinkIcon.tsx │ │ │ ├── UserIcon.tsx │ │ │ ├── WarningIcon.tsx │ │ │ └── XlsIcon.tsx │ │ ├── IconProvider.tsx │ │ ├── IconRegistryContext.tsx │ │ ├── IFrame │ │ │ ├── IFrame.md │ │ │ ├── IFrame.module.scss │ │ │ ├── IFrame.spec.ts │ │ │ ├── IFrame.tsx │ │ │ └── IFrameNative.tsx │ │ ├── Image │ │ │ ├── Image.md │ │ │ ├── Image.module.scss │ │ │ ├── Image.spec.ts │ │ │ ├── Image.tsx │ │ │ └── ImageNative.tsx │ │ ├── Input │ │ │ ├── index.ts │ │ │ ├── InputAdornment.module.scss │ │ │ ├── InputAdornment.tsx │ │ │ ├── InputDivider.module.scss │ │ │ ├── InputDivider.tsx │ │ │ ├── InputLabel.module.scss │ │ │ ├── InputLabel.tsx │ │ │ ├── PartialInput.module.scss │ │ │ └── PartialInput.tsx │ │ ├── InspectButton │ │ │ ├── InspectButton.module.scss │ │ │ └── InspectButton.tsx │ │ ├── Items │ │ │ ├── Items.md │ │ │ ├── Items.spec.ts │ │ │ ├── Items.tsx │ │ │ └── ItemsNative.tsx │ │ ├── Link │ │ │ ├── Link.md │ │ │ ├── Link.module.scss │ │ │ ├── Link.spec.ts │ │ │ ├── Link.tsx │ │ │ └── LinkNative.tsx │ │ ├── List │ │ │ ├── doc-resources │ │ │ │ └── list-component-data.js │ │ │ ├── List.md │ │ │ ├── List.module.scss │ │ │ ├── List.spec.ts │ │ │ ├── List.tsx │ │ │ └── ListNative.tsx │ │ ├── Logo │ │ │ ├── doc-resources │ │ │ │ └── xmlui-logo.svg │ │ │ ├── Logo.md │ │ │ ├── Logo.tsx │ │ │ └── LogoNative.tsx │ │ ├── Markdown │ │ │ ├── CodeText.module.scss │ │ │ ├── CodeText.tsx │ │ │ ├── Markdown.md │ │ │ ├── Markdown.module.scss │ │ │ ├── Markdown.spec.ts │ │ │ ├── Markdown.tsx │ │ │ ├── MarkdownNative.tsx │ │ │ ├── parse-binding-expr.ts │ │ │ └── utils.ts │ │ ├── metadata-helpers.ts │ │ ├── ModalDialog │ │ │ ├── ConfirmationModalContextProvider.tsx │ │ │ ├── Dialog.module.scss │ │ │ ├── Dialog.tsx │ │ │ ├── ModalDialog.md │ │ │ ├── ModalDialog.module.scss │ │ │ ├── ModalDialog.spec.ts │ │ │ ├── ModalDialog.tsx │ │ │ ├── ModalDialogNative.tsx │ │ │ └── ModalVisibilityContext.tsx │ │ ├── NavGroup │ │ │ ├── NavGroup.md │ │ │ ├── NavGroup.module.scss │ │ │ ├── NavGroup.spec.ts │ │ │ ├── NavGroup.tsx │ │ │ ├── NavGroupContext.ts │ │ │ └── NavGroupNative.tsx │ │ ├── NavLink │ │ │ ├── NavLink.md │ │ │ ├── NavLink.module.scss │ │ │ ├── NavLink.spec.ts │ │ │ ├── NavLink.tsx │ │ │ └── NavLinkNative.tsx │ │ ├── NavPanel │ │ │ ├── NavPanel.md │ │ │ ├── NavPanel.module.scss │ │ │ ├── NavPanel.spec.ts │ │ │ ├── NavPanel.tsx │ │ │ └── NavPanelNative.tsx │ │ ├── NestedApp │ │ │ ├── AppWithCodeView.module.scss │ │ │ ├── AppWithCodeView.tsx │ │ │ ├── AppWithCodeViewNative.tsx │ │ │ ├── defaultProps.tsx │ │ │ ├── logo.svg │ │ │ ├── NestedApp.module.scss │ │ │ ├── NestedApp.tsx │ │ │ ├── NestedAppNative.tsx │ │ │ ├── Tooltip.module.scss │ │ │ ├── Tooltip.tsx │ │ │ └── utils.ts │ │ ├── NoResult │ │ │ ├── NoResult.md │ │ │ ├── NoResult.module.scss │ │ │ ├── NoResult.spec.ts │ │ │ ├── NoResult.tsx │ │ │ └── NoResultNative.tsx │ │ ├── NumberBox │ │ │ ├── numberbox-abstractions.ts │ │ │ ├── NumberBox.md │ │ │ ├── NumberBox.module.scss │ │ │ ├── NumberBox.spec.ts │ │ │ ├── NumberBox.tsx │ │ │ └── NumberBoxNative.tsx │ │ ├── Option │ │ │ ├── Option.md │ │ │ ├── Option.spec.ts │ │ │ ├── Option.tsx │ │ │ ├── OptionNative.tsx │ │ │ └── OptionTypeProvider.tsx │ │ ├── PageMetaTitle │ │ │ ├── PageMetaTilteNative.tsx │ │ │ ├── PageMetaTitle.md │ │ │ ├── PageMetaTitle.spec.ts │ │ │ └── PageMetaTitle.tsx │ │ ├── Pages │ │ │ ├── Page.md │ │ │ ├── Pages.md │ │ │ ├── Pages.module.scss │ │ │ ├── Pages.tsx │ │ │ └── PagesNative.tsx │ │ ├── Pagination │ │ │ ├── Pagination.md │ │ │ ├── Pagination.module.scss │ │ │ ├── Pagination.spec.ts │ │ │ ├── Pagination.tsx │ │ │ └── PaginationNative.tsx │ │ ├── PositionedContainer │ │ │ ├── PositionedContainer.module.scss │ │ │ ├── PositionedContainer.tsx │ │ │ └── PositionedContainerNative.tsx │ │ ├── ProfileMenu │ │ │ ├── ProfileMenu.module.scss │ │ │ └── ProfileMenu.tsx │ │ ├── ProgressBar │ │ │ ├── ProgressBar.md │ │ │ ├── ProgressBar.module.scss │ │ │ ├── ProgressBar.spec.ts │ │ │ ├── ProgressBar.tsx │ │ │ └── ProgressBarNative.tsx │ │ ├── Queue │ │ │ ├── Queue.md │ │ │ ├── Queue.spec.ts │ │ │ ├── Queue.tsx │ │ │ ├── queueActions.ts │ │ │ └── QueueNative.tsx │ │ ├── RadioGroup │ │ │ ├── RadioGroup.md │ │ │ ├── RadioGroup.module.scss │ │ │ ├── RadioGroup.spec.ts │ │ │ ├── RadioGroup.tsx │ │ │ ├── RadioGroupNative.tsx │ │ │ ├── RadioItem.tsx │ │ │ └── RadioItemNative.tsx │ │ ├── RealTimeAdapter │ │ │ ├── RealTimeAdapter.tsx │ │ │ └── RealTimeAdapterNative.tsx │ │ ├── Redirect │ │ │ ├── Redirect.md │ │ │ ├── Redirect.spec.ts │ │ │ └── Redirect.tsx │ │ ├── ResponsiveBar │ │ │ ├── README.md │ │ │ ├── ResponsiveBar.md │ │ │ ├── ResponsiveBar.module.scss │ │ │ ├── ResponsiveBar.spec.ts │ │ │ ├── ResponsiveBar.tsx │ │ │ └── ResponsiveBarNative.tsx │ │ ├── Select │ │ │ ├── HiddenOption.tsx │ │ │ ├── MultiSelectOption.tsx │ │ │ ├── OptionContext.ts │ │ │ ├── Select.md │ │ │ ├── Select.module.scss │ │ │ ├── Select.spec.ts │ │ │ ├── Select.tsx │ │ │ ├── SelectContext.tsx │ │ │ ├── SelectNative.tsx │ │ │ ├── SelectOption.tsx │ │ │ └── SimpleSelect.tsx │ │ ├── SelectionStore │ │ │ ├── SelectionStore.md │ │ │ ├── SelectionStore.tsx │ │ │ └── SelectionStoreNative.tsx │ │ ├── Slider │ │ │ ├── Slider.md │ │ │ ├── Slider.module.scss │ │ │ ├── Slider.spec.ts │ │ │ ├── Slider.tsx │ │ │ └── SliderNative.tsx │ │ ├── Slot │ │ │ ├── Slot.md │ │ │ ├── Slot.spec.ts │ │ │ └── Slot.ts │ │ ├── SlotItem.tsx │ │ ├── SpaceFiller │ │ │ ├── SpaceFiller.md │ │ │ ├── SpaceFiller.module.scss │ │ │ ├── SpaceFiller.spec.ts │ │ │ ├── SpaceFiller.tsx │ │ │ └── SpaceFillerNative.tsx │ │ ├── Spinner │ │ │ ├── Spinner.md │ │ │ ├── Spinner.module.scss │ │ │ ├── Spinner.spec.ts │ │ │ ├── Spinner.tsx │ │ │ └── SpinnerNative.tsx │ │ ├── Splitter │ │ │ ├── HSplitter.md │ │ │ ├── HSplitter.spec.ts │ │ │ ├── Splitter.md │ │ │ ├── Splitter.module.scss │ │ │ ├── Splitter.spec.ts │ │ │ ├── Splitter.tsx │ │ │ ├── SplitterNative.tsx │ │ │ ├── utils.ts │ │ │ ├── VSplitter.md │ │ │ └── VSplitter.spec.ts │ │ ├── Stack │ │ │ ├── CHStack.md │ │ │ ├── CHStack.spec.ts │ │ │ ├── CVStack.md │ │ │ ├── CVStack.spec.ts │ │ │ ├── HStack.md │ │ │ ├── HStack.spec.ts │ │ │ ├── Stack.md │ │ │ ├── Stack.module.scss │ │ │ ├── Stack.spec.ts │ │ │ ├── Stack.tsx │ │ │ ├── StackNative.tsx │ │ │ ├── VStack.md │ │ │ └── VStack.spec.ts │ │ ├── StickyBox │ │ │ ├── StickyBox.md │ │ │ ├── StickyBox.module.scss │ │ │ ├── StickyBox.tsx │ │ │ └── StickyBoxNative.tsx │ │ ├── Switch │ │ │ ├── Switch.md │ │ │ ├── Switch.spec.ts │ │ │ └── Switch.tsx │ │ ├── Table │ │ │ ├── doc-resources │ │ │ │ └── list-component-data.js │ │ │ ├── react-table-config.d.ts │ │ │ ├── Table.md │ │ │ ├── Table.module.scss │ │ │ ├── Table.spec.ts │ │ │ ├── Table.tsx │ │ │ ├── TableNative.tsx │ │ │ └── useRowSelection.tsx │ │ ├── TableOfContents │ │ │ ├── TableOfContents.module.scss │ │ │ ├── TableOfContents.spec.ts │ │ │ ├── TableOfContents.tsx │ │ │ └── TableOfContentsNative.tsx │ │ ├── Tabs │ │ │ ├── TabContext.tsx │ │ │ ├── TabItem.md │ │ │ ├── TabItem.tsx │ │ │ ├── TabItemNative.tsx │ │ │ ├── Tabs.md │ │ │ ├── Tabs.module.scss │ │ │ ├── Tabs.spec.ts │ │ │ ├── Tabs.tsx │ │ │ └── TabsNative.tsx │ │ ├── Text │ │ │ ├── Text.md │ │ │ ├── Text.module.scss │ │ │ ├── Text.spec.ts │ │ │ ├── Text.tsx │ │ │ └── TextNative.tsx │ │ ├── TextArea │ │ │ ├── TextArea.md │ │ │ ├── TextArea.module.scss │ │ │ ├── TextArea.spec.ts │ │ │ ├── TextArea.tsx │ │ │ ├── TextAreaNative.tsx │ │ │ ├── TextAreaResizable.tsx │ │ │ └── useComposedRef.ts │ │ ├── TextBox │ │ │ ├── TextBox.md │ │ │ ├── TextBox.module.scss │ │ │ ├── TextBox.spec.ts │ │ │ ├── TextBox.tsx │ │ │ └── TextBoxNative.tsx │ │ ├── Theme │ │ │ ├── NotificationToast.tsx │ │ │ ├── Theme.md │ │ │ ├── Theme.module.scss │ │ │ ├── Theme.spec.ts │ │ │ ├── Theme.tsx │ │ │ └── ThemeNative.tsx │ │ ├── TimeInput │ │ │ ├── TimeInput.md │ │ │ ├── TimeInput.module.scss │ │ │ ├── TimeInput.spec.ts │ │ │ ├── TimeInput.tsx │ │ │ ├── TimeInputNative.tsx │ │ │ └── utils.ts │ │ ├── Timer │ │ │ ├── Timer.md │ │ │ ├── Timer.spec.ts │ │ │ ├── Timer.tsx │ │ │ └── TimerNative.tsx │ │ ├── Toggle │ │ │ ├── Toggle.module.scss │ │ │ └── Toggle.tsx │ │ ├── ToneChangerButton │ │ │ ├── ToneChangerButton.md │ │ │ ├── ToneChangerButton.spec.ts │ │ │ └── ToneChangerButton.tsx │ │ ├── ToneSwitch │ │ │ ├── ToneSwitch.md │ │ │ ├── ToneSwitch.module.scss │ │ │ ├── ToneSwitch.spec.ts │ │ │ ├── ToneSwitch.tsx │ │ │ └── ToneSwitchNative.tsx │ │ ├── Tooltip │ │ │ ├── Tooltip.md │ │ │ ├── Tooltip.module.scss │ │ │ ├── Tooltip.spec.ts │ │ │ ├── Tooltip.tsx │ │ │ └── TooltipNative.tsx │ │ ├── Tree │ │ │ ├── testData.ts │ │ │ ├── Tree-dynamic.spec.ts │ │ │ ├── Tree-icons.spec.ts │ │ │ ├── Tree.md │ │ │ ├── Tree.spec.ts │ │ │ ├── TreeComponent.module.scss │ │ │ ├── TreeComponent.tsx │ │ │ └── TreeNative.tsx │ │ ├── TreeDisplay │ │ │ ├── TreeDisplay.md │ │ │ ├── TreeDisplay.module.scss │ │ │ ├── TreeDisplay.tsx │ │ │ └── TreeDisplayNative.tsx │ │ ├── ValidationSummary │ │ │ ├── ValidationSummary.module.scss │ │ │ └── ValidationSummary.tsx │ │ └── VisuallyHidden.tsx │ ├── components-core │ │ ├── abstractions │ │ │ ├── ComponentRenderer.ts │ │ │ ├── LoaderRenderer.ts │ │ │ ├── standalone.ts │ │ │ └── treeAbstractions.ts │ │ ├── action │ │ │ ├── actions.ts │ │ │ ├── APICall.tsx │ │ │ ├── FileDownloadAction.tsx │ │ │ ├── FileUploadAction.tsx │ │ │ ├── NavigateAction.tsx │ │ │ └── TimedAction.tsx │ │ ├── ApiBoundComponent.tsx │ │ ├── appContext │ │ │ ├── date-functions.ts │ │ │ ├── math-function.ts │ │ │ └── misc-utils.ts │ │ ├── AppContext.tsx │ │ ├── behaviors │ │ │ ├── Behavior.tsx │ │ │ ├── BehaviorContext.tsx │ │ │ └── CoreBehaviors.tsx │ │ ├── component-hooks.ts │ │ ├── ComponentDecorator.tsx │ │ ├── ComponentViewer.tsx │ │ ├── CompoundComponent.tsx │ │ ├── constants.ts │ │ ├── DebugViewProvider.tsx │ │ ├── descriptorHelper.ts │ │ ├── devtools │ │ │ ├── InspectorDialog.module.scss │ │ │ ├── InspectorDialog.tsx │ │ │ └── InspectorDialogVisibilityContext.tsx │ │ ├── EngineError.ts │ │ ├── event-handlers.ts │ │ ├── InspectorButton.module.scss │ │ ├── InspectorContext.tsx │ │ ├── interception │ │ │ ├── abstractions.ts │ │ │ ├── ApiInterceptor.ts │ │ │ ├── ApiInterceptorProvider.tsx │ │ │ ├── apiInterceptorWorker.ts │ │ │ ├── Backend.ts │ │ │ ├── Errors.ts │ │ │ ├── IndexedDb.ts │ │ │ ├── initMock.ts │ │ │ ├── InMemoryDb.ts │ │ │ ├── ReadonlyCollection.ts │ │ │ └── useApiInterceptorContext.tsx │ │ ├── loader │ │ │ ├── ApiLoader.tsx │ │ │ ├── DataLoader.tsx │ │ │ ├── ExternalDataLoader.tsx │ │ │ ├── Loader.tsx │ │ │ ├── MockLoaderRenderer.tsx │ │ │ └── PageableLoader.tsx │ │ ├── LoaderComponent.tsx │ │ ├── markup-check.ts │ │ ├── parts.ts │ │ ├── renderers.ts │ │ ├── rendering │ │ │ ├── AppContent.tsx │ │ │ ├── AppRoot.tsx │ │ │ ├── AppWrapper.tsx │ │ │ ├── buildProxy.ts │ │ │ ├── collectFnVarDeps.ts │ │ │ ├── ComponentAdapter.tsx │ │ │ ├── ComponentWrapper.tsx │ │ │ ├── Container.tsx │ │ │ ├── containers.ts │ │ │ ├── ContainerWrapper.tsx │ │ │ ├── ErrorBoundary.module.scss │ │ │ ├── ErrorBoundary.tsx │ │ │ ├── InvalidComponent.module.scss │ │ │ ├── InvalidComponent.tsx │ │ │ ├── nodeUtils.ts │ │ │ ├── reducer.ts │ │ │ ├── renderChild.tsx │ │ │ ├── StandaloneComponent.tsx │ │ │ ├── StateContainer.tsx │ │ │ ├── UnknownComponent.module.scss │ │ │ ├── UnknownComponent.tsx │ │ │ └── valueExtractor.ts │ │ ├── reportEngineError.ts │ │ ├── RestApiProxy.ts │ │ ├── script-runner │ │ │ ├── asyncProxy.ts │ │ │ ├── AttributeValueParser.ts │ │ │ ├── bannedFunctions.ts │ │ │ ├── BindingTreeEvaluationContext.ts │ │ │ ├── eval-tree-async.ts │ │ │ ├── eval-tree-common.ts │ │ │ ├── eval-tree-sync.ts │ │ │ ├── ParameterParser.ts │ │ │ ├── process-statement-async.ts │ │ │ ├── process-statement-common.ts │ │ │ ├── process-statement-sync.ts │ │ │ ├── ScriptingSourceTree.ts │ │ │ ├── simplify-expression.ts │ │ │ ├── statement-queue.ts │ │ │ └── visitors.ts │ │ ├── StandaloneApp.tsx │ │ ├── StandaloneExtensionManager.ts │ │ ├── TableOfContentsContext.tsx │ │ ├── theming │ │ │ ├── _themes.scss │ │ │ ├── component-layout-resolver.ts │ │ │ ├── extendThemeUtils.ts │ │ │ ├── hvar.ts │ │ │ ├── layout-resolver.ts │ │ │ ├── parse-layout-props.ts │ │ │ ├── StyleContext.tsx │ │ │ ├── StyleRegistry.ts │ │ │ ├── ThemeContext.tsx │ │ │ ├── ThemeProvider.tsx │ │ │ ├── themes │ │ │ │ ├── base-utils.ts │ │ │ │ ├── palette.ts │ │ │ │ ├── root.ts │ │ │ │ ├── solid.ts │ │ │ │ ├── theme-colors.ts │ │ │ │ └── xmlui.ts │ │ │ ├── themeVars.module.scss │ │ │ ├── themeVars.ts │ │ │ ├── transformThemeVars.ts │ │ │ └── utils.ts │ │ ├── utils │ │ │ ├── actionUtils.ts │ │ │ ├── audio-utils.ts │ │ │ ├── compound-utils.ts │ │ │ ├── css-utils.ts │ │ │ ├── DataLoaderQueryKeyGenerator.ts │ │ │ ├── date-utils.ts │ │ │ ├── extractParam.ts │ │ │ ├── hooks.tsx │ │ │ ├── LruCache.ts │ │ │ ├── mergeProps.ts │ │ │ ├── misc.ts │ │ │ ├── request-params.ts │ │ │ ├── statementUtils.ts │ │ │ └── treeUtils.ts │ │ └── xmlui-parser.ts │ ├── index-standalone.ts │ ├── index.scss │ ├── index.ts │ ├── language-server │ │ ├── server-common.ts │ │ ├── server-web-worker.ts │ │ ├── server.ts │ │ ├── services │ │ │ ├── common │ │ │ │ ├── docs-generation.ts │ │ │ │ ├── lsp-utils.ts │ │ │ │ ├── metadata-utils.ts │ │ │ │ └── syntax-node-utilities.ts │ │ │ ├── completion.ts │ │ │ ├── diagnostic.ts │ │ │ ├── format.ts │ │ │ └── hover.ts │ │ └── xmlui-metadata-generated.mjs │ ├── logging │ │ ├── LoggerContext.tsx │ │ ├── LoggerInitializer.tsx │ │ ├── LoggerService.ts │ │ └── xmlui.ts │ ├── logo.svg │ ├── parsers │ │ ├── common │ │ │ ├── GenericToken.ts │ │ │ ├── InputStream.ts │ │ │ └── utils.ts │ │ ├── scripting │ │ │ ├── code-behind-collect.ts │ │ │ ├── Lexer.ts │ │ │ ├── modules.ts │ │ │ ├── Parser.ts │ │ │ ├── ParserError.ts │ │ │ ├── ScriptingNodeTypes.ts │ │ │ ├── TokenTrait.ts │ │ │ ├── TokenType.ts │ │ │ └── tree-visitor.ts │ │ ├── style-parser │ │ │ ├── errors.ts │ │ │ ├── source-tree.ts │ │ │ ├── StyleInputStream.ts │ │ │ ├── StyleLexer.ts │ │ │ ├── StyleParser.ts │ │ │ └── tokens.ts │ │ └── xmlui-parser │ │ ├── CharacterCodes.ts │ │ ├── diagnostics.ts │ │ ├── fileExtensions.ts │ │ ├── index.ts │ │ ├── lint.ts │ │ ├── parser.ts │ │ ├── ParserError.ts │ │ ├── scanner.ts │ │ ├── syntax-kind.ts │ │ ├── syntax-node.ts │ │ ├── transform.ts │ │ ├── utils.ts │ │ ├── xmlui-serializer.ts │ │ └── xmlui-tree.ts │ ├── react-app-env.d.ts │ ├── syntax │ │ ├── monaco │ │ │ ├── grammar.monacoLanguage.ts │ │ │ ├── index.ts │ │ │ ├── xmlui-dark.ts │ │ │ ├── xmlui-light.ts │ │ │ └── xmluiscript.monacoLanguage.ts │ │ └── textMate │ │ ├── index.ts │ │ ├── xmlui-dark.json │ │ ├── xmlui-light.json │ │ ├── xmlui.json │ │ └── xmlui.tmLanguage.json │ ├── testing │ │ ├── assertions.ts │ │ ├── component-test-helpers.ts │ │ ├── ComponentDrivers.ts │ │ ├── drivers │ │ │ ├── DateInputDriver.ts │ │ │ ├── ModalDialogDriver.ts │ │ │ ├── NumberBoxDriver.ts │ │ │ ├── TextBoxDriver.ts │ │ │ ├── TimeInputDriver.ts │ │ │ ├── TimerDriver.ts │ │ │ └── TreeDriver.ts │ │ ├── fixtures.ts │ │ ├── infrastructure │ │ │ ├── index.html │ │ │ ├── main.tsx │ │ │ ├── public │ │ │ │ ├── mockServiceWorker.js │ │ │ │ ├── resources │ │ │ │ │ ├── bell.svg │ │ │ │ │ ├── box.svg │ │ │ │ │ ├── doc.svg │ │ │ │ │ ├── eye.svg │ │ │ │ │ ├── flower-640x480.jpg │ │ │ │ │ ├── sun.svg │ │ │ │ │ ├── test-image-100x100.jpg │ │ │ │ │ └── txt.svg │ │ │ │ └── serve.json │ │ │ └── TestBed.tsx │ │ └── themed-app-test-helpers.ts │ └── vite-env.d.ts ├── tests │ ├── components │ │ ├── CodeBlock │ │ │ └── hightlight-code.test.ts │ │ ├── playground-pattern.test.ts │ │ └── Tree │ │ └── Tree-states.test.ts │ ├── components-core │ │ ├── abstractions │ │ │ └── treeAbstractions.test.ts │ │ ├── container │ │ │ └── buildProxy.test.ts │ │ ├── interception │ │ │ ├── orderBy.test.ts │ │ │ ├── ReadOnlyCollection.test.ts │ │ │ └── request-param-converter.test.ts │ │ ├── scripts-runner │ │ │ ├── AttributeValueParser.test.ts │ │ │ ├── eval-tree-arrow-async.test.ts │ │ │ ├── eval-tree-arrow.test.ts │ │ │ ├── eval-tree-func-decl-async.test.ts │ │ │ ├── eval-tree-func-decl.test.ts │ │ │ ├── eval-tree-pre-post.test.ts │ │ │ ├── eval-tree-regression.test.ts │ │ │ ├── eval-tree.test.ts │ │ │ ├── function-proxy.test.ts │ │ │ ├── parser-regression.test.ts │ │ │ ├── process-event.test.ts │ │ │ ├── process-function.test.ts │ │ │ ├── process-implicit-context.test.ts │ │ │ ├── process-statement-asgn.test.ts │ │ │ ├── process-statement-destruct.test.ts │ │ │ ├── process-statement-regs.test.ts │ │ │ ├── process-statement-sync.test.ts │ │ │ ├── process-statement.test.ts │ │ │ ├── process-switch-sync.test.ts │ │ │ ├── process-switch.test.ts │ │ │ ├── process-try-sync.test.ts │ │ │ ├── process-try.test.ts │ │ │ └── test-helpers.ts │ │ ├── test-metadata-handler.ts │ │ ├── theming │ │ │ ├── border-segments.test.ts │ │ │ ├── component-layout.resolver.test.ts │ │ │ ├── layout-property-parser.test.ts │ │ │ ├── layout-resolver.test.ts │ │ │ ├── layout-resolver2.test.ts │ │ │ ├── layout-vp-override.test.ts │ │ │ └── padding-segments.test.ts │ │ └── utils │ │ ├── date-utils.test.ts │ │ ├── format-human-elapsed-time.test.ts │ │ └── LruCache.test.ts │ ├── language-server │ │ ├── completion.test.ts │ │ ├── format.test.ts │ │ ├── hover.test.ts │ │ └── mockData.ts │ └── parsers │ ├── common │ │ └── input-stream.test.ts │ ├── markdown │ │ └── parse-binding-expression.test.ts │ ├── parameter-parser.test.ts │ ├── paremeter-parser.test.ts │ ├── scripting │ │ ├── eval-tree-arrow.test.ts │ │ ├── eval-tree-pre-post.test.ts │ │ ├── eval-tree.test.ts │ │ ├── function-proxy.test.ts │ │ ├── lexer-literals.test.ts │ │ ├── lexer-misc.test.ts │ │ ├── module-parse.test.ts │ │ ├── parser-arrow.test.ts │ │ ├── parser-assignments.test.ts │ │ ├── parser-binary.test.ts │ │ ├── parser-destructuring.test.ts │ │ ├── parser-errors.test.ts │ │ ├── parser-expressions.test.ts │ │ ├── parser-function.test.ts │ │ ├── parser-literals.test.ts │ │ ├── parser-primary.test.ts │ │ ├── parser-regex.test.ts │ │ ├── parser-statements.test.ts │ │ ├── parser-unary.test.ts │ │ ├── process-event.test.ts │ │ ├── process-implicit-context.test.ts │ │ ├── process-statement-asgn.test.ts │ │ ├── process-statement-destruct.test.ts │ │ ├── process-statement-regs.test.ts │ │ ├── process-statement-sync.test.ts │ │ ├── process-statement.test.ts │ │ ├── process-switch-sync.test.ts │ │ ├── process-switch.test.ts │ │ ├── process-try-sync.test.ts │ │ ├── process-try.test.ts │ │ ├── simplify-expression.test.ts │ │ ├── statement-hooks.test.ts │ │ └── test-helpers.ts │ ├── style-parser │ │ ├── generateHvarChain.test.ts │ │ ├── parseHVar.test.ts │ │ ├── parser.test.ts │ │ └── tokens.test.ts │ └── xmlui │ ├── lint.test.ts │ ├── parser.test.ts │ ├── scanner.test.ts │ ├── transform.attr.test.ts │ ├── transform.circular.test.ts │ ├── transform.element.test.ts │ ├── transform.errors.test.ts │ ├── transform.escape.test.ts │ ├── transform.regression.test.ts │ ├── transform.script.test.ts │ ├── transform.test.ts │ └── xmlui.ts ├── tests-e2e │ ├── api-bound-component-regression.spec.ts │ ├── api-call-as-extracted-component.spec.ts │ ├── assign-to-object-or-array-regression.spec.ts │ ├── binding-regression.spec.ts │ ├── children-as-template-context-vars.spec.ts │ ├── compound-component.spec.ts │ ├── context-vars-regression.spec.ts │ ├── data-bindings.spec.ts │ ├── datasource-and-api-usage-in-var.spec.ts │ ├── datasource-direct-binding.spec.ts │ ├── datasource-onLoaded-regression.spec.ts │ ├── modify-array-item-regression.spec.ts │ ├── namespaces.spec.ts │ ├── push-to-array-regression.spec.ts │ ├── screen-breakpoints.spec.ts │ ├── scripting.spec.ts │ ├── state-scope-in-pages.spec.ts │ └── state-var-scopes.spec.ts ├── tsconfig.bin.json ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── vitest.config.ts ``` # Files -------------------------------------------------------------------------------- /xmlui/src/components/Tree/Tree.spec.ts: -------------------------------------------------------------------------------- ```typescript import { SKIP_REASON } from "../../testing/component-test-helpers"; import { expect, test } from "../../testing/fixtures"; import { apiStyleData, apiStyleHierarchy, customDynamicTreeData, customFieldsData1, customFieldsData2, customFieldsHierarchy1, customFieldsHierarchy2, customIconFieldData, customIconFieldHierarchy, databaseStyleData, databaseStyleHierarchy, dataWithStateIcons, dynamicFlatData, dynamicTreeData, flatDataWithIcons, flatTreeData, hierarchyDataWithIcons, hierarchyTreeData, hierarchyWithStateIcons, multiBranchTreeData, } from "./testData"; // ============================================================================= // BASIC FUNCTIONALITY TESTS // ============================================================================= test.describe("Basic Functionality", () => { test("component renders with default props", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1")).toBeVisible(); await expect(tree.getByTestId("2")).not.toBeVisible(); await expect(tree.getByTestId("3")).not.toBeVisible(); await expect(tree.getByTestId("4")).not.toBeVisible(); }); test("displays flat data format correctly", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:0")).toBeVisible(); await expect(tree.getByTestId("2:1")).toBeVisible(); await expect(tree.getByTestId("3:1")).toBeVisible(); await expect(tree.getByTestId("4:2")).toBeVisible(); }); test("displays hierarchy data format correctly", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text id="{$item.id}" value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:0")).toBeVisible(); await expect(tree.getByTestId("2:1")).toBeVisible(); await expect(tree.getByTestId("3:1")).toBeVisible(); await expect(tree.getByTestId("4:2")).toBeVisible(); }); test("uses flat as default data format when dataFormat is not specified", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text id="{$item.id}" value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:0")).toBeVisible(); await expect(tree.getByTestId("2:1")).toBeVisible(); await expect(tree.getByTestId("3:1")).toBeVisible(); await expect(tree.getByTestId("4:2")).toBeVisible(); }); test("handles custom idField, nameField, and parentIdField mapping", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" idField="nodeId" nameField="title" parentIdField="parent" data='{${JSON.stringify(customFieldsData1)}}'> <property name="itemTemplate"> <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.title}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("A1:0")).toBeVisible(); await expect(tree.getByTestId("A2:1")).toBeVisible(); await expect(tree.getByTestId("A3:1")).toBeVisible(); await expect(tree.getByTestId("A4:2")).toBeVisible(); }); test("handles alternative field names (id, displayName, parentId)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" idField="id" nameField="displayName" parentIdField="parentId" data='{${JSON.stringify(customFieldsData2)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.displayName}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("100:0")).toBeVisible(); await expect(tree.getByTestId("101:1")).toBeVisible(); await expect(tree.getByTestId("102:1")).toBeVisible(); await expect(tree.getByTestId("103:2")).toBeVisible(); }); test("handles database-style field names (pk, label, parent_id)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" idField="pk" nameField="label" parentIdField="parent_id" data='{${JSON.stringify(databaseStyleData)}}'> <property name="itemTemplate"> <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.label}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("root-1:0")).toBeVisible(); await expect(tree.getByTestId("child-1:1")).toBeVisible(); await expect(tree.getByTestId("child-2:1")).toBeVisible(); await expect(tree.getByTestId("grandchild-1:2")).toBeVisible(); }); test("handles API-style field names (key, text, parentKey)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" idField="key" nameField="text" parentIdField="parentKey" data='{${JSON.stringify(apiStyleData)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.text}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("item1:0")).toBeVisible(); await expect(tree.getByTestId("item2:1")).toBeVisible(); await expect(tree.getByTestId("item3:1")).toBeVisible(); await expect(tree.getByTestId("item4:2")).toBeVisible(); }); test("handles iconField mapping with default icon field name", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatDataWithIcons)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center"> <Text testId="icon:{$item.icon}" value="[{$item.icon}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:icon:folder")).toBeVisible(); await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible(); await expect(tree.getByTestId("3:icon:folder")).toBeVisible(); await expect(tree.getByTestId("4:icon:file-image")).toBeVisible(); // Verify individual icon markers await expect(tree.getByTestId("icon:folder")).toBeVisible(); await expect(tree.getByTestId("icon:file-pdf")).toBeVisible(); await expect(tree.getByTestId("icon:file-image")).toBeVisible(); }); test("handles custom iconField mapping", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" idField="nodeId" nameField="title" iconField="iconType" parentIdField="parent" data='{${JSON.stringify(customIconFieldData)}}'> <property name="itemTemplate"> <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center"> <Text testId="icon-type:{$item.iconType}" value="[{$item.iconType}]" /> <Text value="{$item.title}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("A1:icon:project-folder")).toBeVisible(); await expect(tree.getByTestId("A2:icon:code-folder")).toBeVisible(); await expect(tree.getByTestId("A3:icon:typescript-file")).toBeVisible(); await expect(tree.getByTestId("A4:icon:typescript-file")).toBeVisible(); // Verify individual icon type markers await expect(tree.getByTestId("icon-type:project-folder")).toBeVisible(); await expect(tree.getByTestId("icon-type:code-folder")).toBeVisible(); await expect(tree.getByTestId("icon-type:typescript-file")).toBeVisible(); }); test("handles iconExpandedField and iconCollapsedField mapping", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" iconField="icon" iconExpandedField="iconExpanded" iconCollapsedField="iconCollapsed" data='{${JSON.stringify(dataWithStateIcons)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center"> <Text testId="state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect( tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed"), ).toBeVisible(); await expect( tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed"), ).not.toBeVisible(); // Should be collapsed initially await expect( tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined"), ).not.toBeVisible(); // Should be nested and collapsed // Verify collapsed state icons are shown initially (since defaultExpanded is not set) await expect(tree.getByTestId("state-icon:folder-closed")).toBeVisible(); }); test("handles missing icon fields gracefully", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" iconField="nonExistentIcon" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center"> <Text testId="fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("2:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("3:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("4:icon:no-icon")).toBeVisible(); // Verify fallback icons await expect(tree.getByTestId("fallback-icon:default")).toBeVisible(); }); // Selectable Field Mapping Tests test("handles default selectableField mapping (all nodes selectable by default)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center"> <Text value="{$item.name} (Selectable: {$item.selectable})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // All nodes should be selectable by default (true) await expect(tree.getByTestId("1:selectable:true")).toBeVisible(); await expect(tree.getByTestId("2:selectable:true")).toBeVisible(); await expect(tree.getByTestId("3:selectable:true")).toBeVisible(); await expect(tree.getByTestId("4:selectable:true")).toBeVisible(); }); test("handles custom selectableField mapping with mixed selectable states", async ({ initTestBed, createTreeDriver, }) => { const customSelectableData = [ { id: "1", name: "Root Item 1", parentId: null, isSelectable: true }, { id: "2", name: "Child Item 1.1", parentId: "1", isSelectable: false }, { id: "3", name: "Child Item 1.2", parentId: "1", isSelectable: true }, { id: "4", name: "Grandchild Item 1.1.1", parentId: "2", isSelectable: false }, { id: "5", name: "Another Child", parentId: "1", isSelectable: true }, ]; await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectableField="isSelectable" data='{${JSON.stringify(customSelectableData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center"> <Text value="{$item.name} - Selectable: {$item.selectable}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify mapped selectable states await expect(tree.getByTestId("1:selectable:true")).toBeVisible(); // Root selectable await expect(tree.getByTestId("2:selectable:false")).toBeVisible(); // Child not selectable await expect(tree.getByTestId("3:selectable:true")).toBeVisible(); // Child selectable await expect(tree.getByTestId("4:selectable:false")).toBeVisible(); // Grandchild not selectable await expect(tree.getByTestId("5:selectable:true")).toBeVisible(); // Another child selectable }); test("handles selectableField with fallback to true when field is missing", async ({ initTestBed, createTreeDriver, }) => { const partialSelectableData = [ { id: "1", name: "Root Item 1", parentId: null, canSelect: true }, { id: "2", name: "Child Item 1.1", parentId: "1" }, // Missing canSelect field { id: "3", name: "Child Item 1.2", parentId: "1", canSelect: false }, { id: "4", name: "Grandchild Item 1.1.1", parentId: "2" }, // Missing canSelect field ]; await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectableField="canSelect" data='{${JSON.stringify(partialSelectableData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center"> <Text value="{$item.name} - Selectable: {$item.selectable}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify fallback behavior: missing field defaults to true await expect(tree.getByTestId("1:selectable:true")).toBeVisible(); // Explicitly true await expect(tree.getByTestId("2:selectable:true")).toBeVisible(); // Missing field, defaults to true await expect(tree.getByTestId("3:selectable:false")).toBeVisible(); // Explicitly false await expect(tree.getByTestId("4:selectable:true")).toBeVisible(); // Missing field, defaults to true }); test("handles selectableField in hierarchy data format", async ({ initTestBed, createTreeDriver, }) => { const hierarchySelectableData = [ { id: "A1", title: "Project", allowSelection: true, children: [ { id: "A2", title: "Source", allowSelection: false, children: [{ id: "A3", title: "App.tsx", allowSelection: true }], }, { id: "A4", title: "Tests", allowSelection: true }, ], }, ]; await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="id" nameField="title" selectableField="allowSelection" childrenField="children" data='{${JSON.stringify(hierarchySelectableData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center"> <Text value="{$item.title} - Selectable: {$item.selectable}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify hierarchy with selectableField mapping await expect(tree.getByTestId("A1:selectable:true")).toBeVisible(); // Project selectable await expect(tree.getByTestId("A2:selectable:false")).toBeVisible(); // Source not selectable await expect(tree.getByTestId("A3:selectable:true")).toBeVisible(); // App.tsx selectable await expect(tree.getByTestId("A4:selectable:true")).toBeVisible(); // Tests selectable }); test("validates selectableField affects actual selection behavior", async ({ initTestBed, createTreeDriver, }) => { const selectableBehaviorData = [ { id: "1", name: "Selectable Root", parentId: null, canClick: true }, { id: "2", name: "Non-Selectable Child", parentId: "1", canClick: false }, { id: "3", name: "Selectable Child", parentId: "1", canClick: true }, ]; await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectableField="canClick" data='{${JSON.stringify(selectableBehaviorData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name} ({$item.selectable ? 'Clickable' : 'Not Clickable'})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify all nodes are visible await expect(tree.getByTestId("1")).toBeVisible(); await expect(tree.getByTestId("2")).toBeVisible(); await expect(tree.getByTestId("3")).toBeVisible(); // Test selection behavior: selectable nodes should be clickable for selection // This verifies that the selectable property is correctly mapped and used internally const selectableNode = tree.getByTestId("1"); const nonSelectableNode = tree.getByTestId("2"); const anotherSelectableNode = tree.getByTestId("3"); // Click on selectable nodes - should work await selectableNode.click(); // Note: Detailed selection behavior testing would require checking internal state // which might be tested in other selection-focused test cases await anotherSelectableNode.click(); // The actual selection assertion would depend on visible selection styling // or other indicators that would be tested in selection-specific tests }); // Hierarchical Data Format Field Mapping Tests test("handles custom idField, nameField, and childrenField mapping for hierarchy data", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="nodeId" nameField="title" childrenField="items" data='{${JSON.stringify(customFieldsHierarchy1)}}'> <property name="itemTemplate"> <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.title}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("A1:0")).toBeVisible(); await expect(tree.getByTestId("A2:1")).toBeVisible(); await expect(tree.getByTestId("A3:1")).toBeVisible(); await expect(tree.getByTestId("A4:2")).toBeVisible(); }); test("handles alternative hierarchy field names (id, displayName, subNodes)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="id" nameField="displayName" childrenField="subNodes" data='{${JSON.stringify(customFieldsHierarchy2)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.displayName}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("100:0")).toBeVisible(); await expect(tree.getByTestId("101:1")).toBeVisible(); await expect(tree.getByTestId("102:1")).toBeVisible(); await expect(tree.getByTestId("103:2")).toBeVisible(); }); test("handles database-style hierarchy field names (pk, label, nested_items)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="pk" nameField="label" childrenField="nested_items" data='{${JSON.stringify(databaseStyleHierarchy)}}'> <property name="itemTemplate"> <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.label}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("root-1:0")).toBeVisible(); await expect(tree.getByTestId("child-1:1")).toBeVisible(); await expect(tree.getByTestId("child-2:1")).toBeVisible(); await expect(tree.getByTestId("grandchild-1:2")).toBeVisible(); }); test("handles API-style hierarchy field names (key, text, nodes)", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="key" nameField="text" childrenField="nodes" data='{${JSON.stringify(apiStyleHierarchy)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center"> <Icon name="folder" /> <Text value="{$item.text}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("item1:0")).toBeVisible(); await expect(tree.getByTestId("item2:1")).toBeVisible(); await expect(tree.getByTestId("item3:1")).toBeVisible(); await expect(tree.getByTestId("item4:2")).toBeVisible(); }); test("handles iconField mapping in hierarchy data with default field name", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyDataWithIcons)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center"> <Text testId="hierarchy-icon:{$item.icon}" value="[{$item.icon}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:icon:folder")).toBeVisible(); await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible(); await expect(tree.getByTestId("3:icon:folder")).toBeVisible(); await expect(tree.getByTestId("4:icon:file-image")).toBeVisible(); // Verify individual icon markers await expect(tree.getByTestId("hierarchy-icon:folder")).toBeVisible(); await expect(tree.getByTestId("hierarchy-icon:file-pdf")).toBeVisible(); await expect(tree.getByTestId("hierarchy-icon:file-image")).toBeVisible(); }); test("handles custom iconField mapping in hierarchy data", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="nodeId" nameField="title" iconField="iconType" childrenField="items" data='{${JSON.stringify(customIconFieldHierarchy)}}'> <property name="itemTemplate"> <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center"> <Text testId="hierarchy-icon-type:{$item.iconType}" value="[{$item.iconType}]" /> <Text value="{$item.title}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("A1:icon:project-folder")).toBeVisible(); await expect(tree.getByTestId("A2:icon:code-folder")).toBeVisible(); await expect(tree.getByTestId("A3:icon:typescript-file")).toBeVisible(); await expect(tree.getByTestId("A4:icon:typescript-file")).toBeVisible(); // Verify individual icon type markers await expect(tree.getByTestId("hierarchy-icon-type:project-folder")).toBeVisible(); await expect(tree.getByTestId("hierarchy-icon-type:code-folder")).toBeVisible(); await expect(tree.getByTestId("hierarchy-icon-type:typescript-file")).toBeVisible(); }); test("handles iconExpandedField and iconCollapsedField in hierarchy data", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" iconField="icon" iconExpandedField="iconExpanded" iconCollapsedField="iconCollapsed" data='{${JSON.stringify(hierarchyWithStateIcons)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center"> <Text testId="hierarchy-state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect( tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed"), ).toBeVisible(); await expect( tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed"), ).not.toBeVisible(); // Should be collapsed initially await expect( tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined"), ).not.toBeVisible(); // Should be nested and collapsed // Verify collapsed state icons are shown initially (since defaultExpanded is not set) await expect(tree.getByTestId("hierarchy-state-icon:folder-closed")).toBeVisible(); }); test("handles missing icon fields gracefully in hierarchy data", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" iconField="nonExistentIcon" data='{${JSON.stringify(hierarchyTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center"> <Text testId="hierarchy-fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" /> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("2:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("3:icon:no-icon")).toBeVisible(); await expect(tree.getByTestId("4:icon:no-icon")).toBeVisible(); // Verify fallback icons await expect(tree.getByTestId("hierarchy-fallback-icon:default")).toBeVisible(); }); // ============================================================================= // $ITEM CONTEXT PROPERTIES TESTS // ============================================================================= test("passes all core $item properties correctly to item template", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:props:name:{$item.name}|depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (ID: {$item.id}, Key: {$item.key}, Depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify core properties for different items await expect(tree.getByTestId("1:props:name:Root Item 1|depth:0")).toBeVisible(); await expect(tree.getByTestId("2:props:name:Child Item 1.1|depth:1")).toBeVisible(); await expect(tree.getByTestId("3:props:name:Child Item 1.2|depth:1")).toBeVisible(); await expect(tree.getByTestId("4:props:name:Grandchild Item 1.1.1|depth:2")).toBeVisible(); }); test("passes original source data properties via $item spread", async ({ initTestBed, createTreeDriver, }) => { const dataWithExtraProps = [ { id: 1, name: "Root", category: "folder", size: "large", customField: "value1", parentId: null, }, { id: 2, name: "Child", category: "file", size: "small", customField: "value2", parentId: 1 }, ]; await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(dataWithExtraProps)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:extra:{$item.category}:{$item.size}:{$item.customField}" verticalAlignment="center"> <Text value="{$item.name} - {$item.category} ({$item.size}) [{$item.customField}]" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:extra:folder:large:value1")).toBeVisible(); await expect(tree.getByTestId("2:extra:file:small:value2")).toBeVisible(); }); test("passes icon properties correctly via $item", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatDataWithIcons)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:icon:{$item.icon}" verticalAlignment="center"> <Text value="{$item.name} [{$item.icon}]" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:icon:folder")).toBeVisible(); await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible(); await expect(tree.getByTestId("3:icon:folder")).toBeVisible(); await expect(tree.getByTestId("4:icon:file-image")).toBeVisible(); }); test("passes TreeNode internal properties via $item spread", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:internal:selectable:{$item.selectable}" verticalAlignment="center"> <Text value="{$item.name} (Selectable: {$item.selectable})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:internal:selectable:true")).toBeVisible(); await expect(tree.getByTestId("2:internal:selectable:true")).toBeVisible(); await expect(tree.getByTestId("3:internal:selectable:true")).toBeVisible(); await expect(tree.getByTestId("4:internal:selectable:true")).toBeVisible(); }); test("passes custom field mapped properties correctly in hierarchy format", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" idField="nodeId" nameField="title" iconField="iconType" childrenField="items" data='{${JSON.stringify(customIconFieldHierarchy)}}'> <property name="itemTemplate"> <HStack testId="{$item.nodeId}:mapped:name:{$item.name}|title:{$item.title}|iconType:{$item.iconType}" verticalAlignment="center"> <Text value="Mapped: {$item.name} | Original: {$item.title} | Icon: {$item.iconType}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); await expect( tree.getByTestId("A1:mapped:name:Project|title:Project|iconType:project-folder"), ).toBeVisible(); await expect( tree.getByTestId("A2:mapped:name:Source|title:Source|iconType:code-folder"), ).toBeVisible(); await expect( tree.getByTestId("A3:mapped:name:App.tsx|title:App.tsx|iconType:typescript-file"), ).toBeVisible(); }); test("validates $item properties maintain referential integrity across re-renders", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.key}:integrity:name:{$item.name}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Verify that basic properties are accessible and consistent await expect(tree.getByTestId("1:integrity:name:Root Item 1")).toBeVisible(); await expect(tree.getByTestId("2:integrity:name:Child Item 1.1")).toBeVisible(); await expect(tree.getByTestId("3:integrity:name:Child Item 1.2")).toBeVisible(); await expect(tree.getByTestId("4:integrity:name:Grandchild Item 1.1.1")).toBeVisible(); }); // ============================================================================= // SELECTION MANAGEMENT TESTS // ============================================================================= test.describe("Selection Management", () => { test("handles selectedValue property with visual feedback", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(255, 100, 100)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{2}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const selectedRowWrapper = tree.getNodeWrapperByTestId("2"); const item1RowWrapper = tree.getNodeWrapperByTestId("1"); const item3RowWrapper = tree.getNodeWrapperByTestId("3"); const item4RowWrapper = tree.getNodeWrapperByTestId("4"); await expect(selectedRowWrapper).toBeVisible(); // Test selected item has correct styling await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(selectedRowWrapper).toHaveClass(/selected/); // Test non-selected items don't have selected styling await expect(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item3RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item1RowWrapper).not.toHaveClass(/selected/); await expect(item3RowWrapper).not.toHaveClass(/selected/); await expect(item4RowWrapper).not.toHaveClass(/selected/); }); test("handles selection with different selectedValue types", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(200, 100, 255)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{3}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const item1RowWrapper = tree.getNodeWrapperByTestId("1"); const item2RowWrapper = tree.getNodeWrapperByTestId("2"); const item3RowWrapper = tree.getNodeWrapperByTestId("3"); const item4RowWrapper = tree.getNodeWrapperByTestId("4"); await expect(item1RowWrapper).toBeVisible(); // Item 3 should be selected (with proper string comparison handling) await expect(item3RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item3RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(item3RowWrapper).toHaveClass(/selected/); // Other items should not be selected await expect(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); // Verify class names are correctly applied await expect(item1RowWrapper).not.toHaveClass(/selected/); await expect(item2RowWrapper).not.toHaveClass(/selected/); await expect(item4RowWrapper).not.toHaveClass(/selected/); }); test("handles selection with type mismatch tolerance", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(100, 200, 50)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{2}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrapper directly using getNodeWrapperByMarker const selectedRowWrapper = tree.getNodeWrapperByTestId("2"); await expect(selectedRowWrapper).toBeVisible(); // Verify selection styling is applied correctly despite type mismatch (selectedValue: number vs itemKey: number) await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(selectedRowWrapper).toHaveClass(/selected/); }); test("selection state overrides hover state styling", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(200, 0, 0)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; const HOVER_BG_COLOR = "rgb(0, 0, 200)"; const HOVER_TEXT_COLOR = "rgb(255, 255, 0)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{2}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, "backgroundColor-Tree-row--hover": HOVER_BG_COLOR, "textColor-Tree--hover": HOVER_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const selectedRowWrapper = tree.getNodeWrapperByTestId("2"); const item1RowWrapper = tree.getNodeWrapperByTestId("1"); const item3RowWrapper = tree.getNodeWrapperByTestId("3"); await expect(selectedRowWrapper).toBeVisible(); // Hover over the selected item - selection should override hover await selectedRowWrapper.hover(); await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); // Hover over non-selected items - should show hover state await item1RowWrapper.hover(); await expect(item1RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(item1RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR); await item3RowWrapper.hover(); await expect(item3RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(item3RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR); // Verify selected item maintains selection styling even after hovering other items await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); }); test("supports interactive selection changes", async ({ initTestBed, createTreeDriver }) => { const SELECTED_BG_COLOR = "rgb(200, 100, 255)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; const FOCUS_OUTLINE_COLOR = "rgb(255, 100, 100)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{2}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR, }, }, ); const tree = await createTreeDriver("tree"); await tree.component.focus(); // Get row wrappers directly using getNodeWrapperByMarker const item1RowWrapper = tree.getNodeWrapperByTestId("1"); const item2RowWrapper = tree.getNodeWrapperByTestId("2"); await expect(item1RowWrapper).toBeVisible(); // Item 2 should be initially selected await expect(item2RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item2RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(item2RowWrapper).toHaveClass(/selected/); // Click on item 1 to change selection await tree.getByTestId("1").click(); // Item 1 should now be selected await expect(item1RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item1RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(item1RowWrapper).toHaveClass(/selected/); // Item 2 should no longer be selected await expect(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(item2RowWrapper).not.toHaveClass(/selected/); // Verify the tree container maintains focus await expect(tree.component).toBeFocused(); }); test("handles null/undefined selection gracefully", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(255, 0, 0)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{null}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers to test no selection highlighting const rowWrapper1 = tree.getNodeWrapperByTestId("1"); const rowWrapper2 = tree.getNodeWrapperByTestId("2"); const rowWrapper3 = tree.getNodeWrapperByTestId("3"); const rowWrapper4 = tree.getNodeWrapperByTestId("4"); await expect(rowWrapper1).toBeVisible(); // Verify no items are selected when selectedValue is null await expect(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR); // Verify no items have selected class await expect(rowWrapper1).not.toHaveClass(/selected/); await expect(rowWrapper2).not.toHaveClass(/selected/); await expect(rowWrapper3).not.toHaveClass(/selected/); await expect(rowWrapper4).not.toHaveClass(/selected/); // Verify tree is still functional - can select items by clicking await tree.getByTestId("2").click(); await expect(rowWrapper2).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper2).toHaveClass(/selected/); }); test("handles invalid selection values gracefully", async ({ initTestBed, createTreeDriver, }) => { const SELECTED_BG_COLOR = "rgb(0, 255, 0)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="999" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers to test no selection highlighting const rowWrapper1 = tree.getNodeWrapperByTestId("1"); const rowWrapper2 = tree.getNodeWrapperByTestId("2"); const rowWrapper3 = tree.getNodeWrapperByTestId("3"); const rowWrapper4 = tree.getNodeWrapperByTestId("4"); await expect(rowWrapper1).toBeVisible(); // Verify component doesn't crash with invalid selectedValue and no items are selected await expect(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR); // Verify no items have selected class await expect(rowWrapper1).not.toHaveClass(/selected/); await expect(rowWrapper2).not.toHaveClass(/selected/); await expect(rowWrapper3).not.toHaveClass(/selected/); await expect(rowWrapper4).not.toHaveClass(/selected/); // Verify tree is still functional - can select valid items by clicking await tree.getByTestId("3").click(); await expect(rowWrapper3).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(rowWrapper3).toHaveClass(/selected/); }); // ============================================================================= // FOCUS MANAGEMENT SUB-TESTS // ============================================================================= test("supports keyboard focus navigation with visual feedback", async ({ initTestBed, createTreeDriver, page, }) => { const FOCUS_OUTLINE_COLOR = "rgb(255, 0, 255)"; const FOCUS_OUTLINE_WIDTH = "3px"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR, "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH, }, }, ); const tree = await createTreeDriver("tree"); await expect(tree.getByTestId("1")).toBeVisible(); // Focus the tree to trigger focus styling await tree.component.focus(); // Use keyboard navigation to trigger focus on an item await page.keyboard.press("ArrowDown"); // The second item should be focused now const focusedItem = tree.getNodeWrapperByTestId("2"); await expect(focusedItem).toBeVisible(); // Check that focus outline uses custom theme variables // Focus styling uses inset box-shadow with the outline color await expect(focusedItem).toHaveCSS( "box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`, ); // Also verify the focused item has the correct CSS class await expect(focusedItem).toHaveClass(/focused/); // Verify box-shadow contains the custom focus outline color const boxShadowValue = await focusedItem.evaluate((el) => getComputedStyle(el).boxShadow); expect(boxShadowValue).toContain(FOCUS_OUTLINE_COLOR); // Test that focus can move to different items await page.keyboard.press("ArrowDown"); const nextFocusedItem = tree.getNodeWrapperByTestId("4"); // Should be the grandchild await expect(nextFocusedItem).toHaveClass(/focused/); await expect(nextFocusedItem).toHaveCSS( "box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`, ); // Previous item should no longer be focused await expect(focusedItem).not.toHaveClass(/focused/); // Navigate back up await page.keyboard.press("ArrowUp"); await expect(focusedItem).toHaveClass(/focused/); await expect(nextFocusedItem).not.toHaveClass(/focused/); }); test("focus styling supports comprehensive theme variables", async ({ initTestBed, createTreeDriver, page, }) => { const FOCUS_OUTLINE_COLOR = "rgb(0, 255, 0)"; const FOCUS_OUTLINE_WIDTH = "4px"; const FOCUS_OUTLINE_STYLE = "solid"; const FOCUS_OUTLINE_OFFSET = "2px"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR, "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH, "outlineStyle-Tree--focus": FOCUS_OUTLINE_STYLE, "outlineOffset-Tree--focus": FOCUS_OUTLINE_OFFSET, }, }, ); const tree = await createTreeDriver("tree"); await expect(tree.getNodeWrapperByTestId("1")).toBeVisible(); // Focus the tree and navigate to an item await tree.component.focus(); await page.keyboard.press("ArrowDown", {delay: 100}); // Test focused item has all custom theme variables applied const focusedItem = tree.getNodeWrapperByTestId("2"); await expect(focusedItem).toHaveClass(/focused/); // Verify the focus outline uses all custom theme variables // Note: In the current implementation, focus uses inset box-shadow rather than outline // but the theme variables should still be available for potential outline styling const boxShadowValue = await focusedItem.evaluate((el) => getComputedStyle(el).boxShadow); expect(boxShadowValue).toContain("0, 255, 0"); // Check for green color components }); test("combined selection and focus states work together", async ({ initTestBed, createTreeDriver, page, }) => { const SELECTED_BG_COLOR = "rgb(255, 50, 50)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; const HOVER_BG_COLOR = "rgb(50, 255, 50)"; const HOVER_TEXT_COLOR = "rgb(0, 0, 0)"; const DEFAULT_TEXT_COLOR = "rgb(100, 100, 100)"; const FOCUS_OUTLINE_COLOR = "rgb(50, 50, 255)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{3}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, "backgroundColor-Tree-row--hover": HOVER_BG_COLOR, "textColor-Tree--hover": HOVER_TEXT_COLOR, "textColor-Tree": DEFAULT_TEXT_COLOR, "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Test all theme variables work correctly in isolation and combination const selectedRowWrapper = tree.getNodeWrapperByTestId("3"); const normalRowWrapper = tree.getNodeWrapperByTestId("1"); const hoverRowWrapper = tree.getNodeWrapperByTestId("2"); await expect(selectedRowWrapper).toBeVisible(); // Test selected item styling await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); await expect(selectedRowWrapper).toHaveClass(/selected/); // Test default text color on normal items await expect(normalRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR); await expect(normalRowWrapper).not.toHaveClass(/selected/); // Test hover styling on non-selected item await hoverRowWrapper.hover(); await expect(hoverRowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(hoverRowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR); // Test hover on selected item (selection should override) await selectedRowWrapper.hover(); await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); // Test focus styling - ensure we can detect focus await tree.component.focus(); // Give some time for focus to be applied await page.waitForTimeout(100); // Check if any item has focus, or skip focus-specific checks for this comprehensive test // The focus behavior is already tested in the dedicated focus tests const anyFocusedElement = page.locator('[data-test-id="tree"] .focused'); const hasFocusedElement = (await anyFocusedElement.count()) > 0; if (hasFocusedElement) { // If we have focused elements, verify the color const focusedElement = anyFocusedElement.first(); const finalBoxShadowValue = await focusedElement.evaluate( (el) => getComputedStyle(el).boxShadow, ); expect(finalBoxShadowValue).toContain("50, 50, 255"); } // If no focused element, skip focus-specific validation since focus behavior varies // Verify all theme variables are working simultaneously // Selected item maintains selection while tree has focus await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); }); test("applies selection and focus with multiple theme configurations", async ({ initTestBed, createTreeDriver, page, }) => { const SELECTED_BG_COLOR = "rgb(50, 100, 200)"; const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)"; const FOCUS_OUTLINE_COLOR = "rgb(255, 165, 0)"; const DEFAULT_TEXT_COLOR = "rgb(64, 64, 64)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" selectedValue="{2}" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR, "textColor-Tree--selected": SELECTED_TEXT_COLOR, "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR, "textColor-Tree": DEFAULT_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const selectedRowWrapper = tree.getNodeWrapperByTestId("2"); const nonSelectedRowWrapper = tree.getNodeWrapperByTestId("1"); await expect(selectedRowWrapper).toBeVisible(); // Test selection theme variables await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR); await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR); // Test default text color on non-selected items await expect(nonSelectedRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR); // Focus the tree and navigate to trigger focus styling await tree.component.focus(); await page.keyboard.press("ArrowDown"); // Check if any item received focus (focus behavior can be timing-dependent in tests) const focusedItem = page.locator('[data-test-id="tree"] .focused'); const focusedItemCount = await focusedItem.count(); if (focusedItemCount > 0) { // If we have focused elements, verify the focus styling uses custom theme variables await expect(focusedItem.first()).toBeVisible(); await expect(focusedItem.first()).toHaveCSS( "box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`, ); } // If no focused element found, skip focus-specific validation as focus behavior is tested elsewhere }); }); // ============================================================================= // EXPANSION STATE TESTS // ============================================================================= test.describe("Expansion States", () => { test("handles defaultExpanded none", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="none" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Only root level (depth 0) should be visible with defaultExpanded="none" await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible(); // Child nodes (depth 1+) should NOT be visible initially await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).not.toBeVisible(); await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).not.toBeVisible(); await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible(); }); test("handles defaultExpanded all", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // All nodes at all depths should be visible with defaultExpanded="all" await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible(); await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible(); await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible(); await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).toBeVisible(); }); test("handles defaultExpanded first-level", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="first-level" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Root level (depth 0) and first level (depth 1) should be visible await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible(); await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible(); await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible(); // Second level and deeper (depth 2+) should NOT be visible await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible(); }); test("handles defaultExpanded with array of string IDs - expands specific nodes making all children visible", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" idField="pk" nameField="label" parentIdField="parent_id" defaultExpanded='{["root-1", "child-1"]}' data='{${JSON.stringify(databaseStyleData)}}'> <property name="itemTemplate"> <HStack testId="{$item.pk}:{$item.label}:depth:{$item.depth}:expanded" verticalAlignment="center"> <Text value="{$item.label} (ID: {$item.pk}, Depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // When defaultExpanded=["root-1", "child-1"], these specific nodes should be expanded: // 1. Root node "root-1" is expanded → its direct children become visible await expect(tree.getByTestId("root-1:Root Item 1:depth:0:expanded")).toBeVisible(); await expect(tree.getByTestId("child-1:Child Item 1.1:depth:1:expanded")).toBeVisible(); await expect(tree.getByTestId("child-2:Child Item 1.2:depth:1:expanded")).toBeVisible(); // 2. Child node "child-1" is also expanded → its children become visible await expect( tree.getByTestId("grandchild-1:Grandchild Item 1.1.1:depth:2:expanded"), ).toBeVisible(); // Verify expansion behavior: each ID in the array expands that specific node, // making its direct children visible. If a child is also in the expansion array, // it will also be expanded, showing its children recursively. }); test("handles defaultExpanded array with nodes from different parent branches", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded='{["doc-root", "proj-web", "media-images"]}' data='{${JSON.stringify(multiBranchTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Branch A: "doc-root" is expanded → its direct children are visible await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible(); await expect(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible(); await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible(); // But grandchildren of doc-root should NOT be visible (doc-reports not expanded) await expect(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).not.toBeVisible(); await expect(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible(); // Branch B: "proj-root" is auto-expanded because "proj-web" is in defaultExpanded await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible(); await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Now visible due to auto-expansion await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Also visible due to parent expansion // proj-web is expanded → its children are visible await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible(); await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible(); // proj-mobile is NOT expanded → its children remain hidden await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible(); // Branch C: "media-root" is auto-expanded because "media-images" is in defaultExpanded await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible(); await expect(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Now visible due to auto-expansion await expect(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Also visible due to parent expansion // media-images is expanded → its children are visible await expect(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible(); await expect(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible(); // This test validates that defaultExpanded array automatically expands parent paths: // 1. Each ID in defaultExpanded array is expanded AND its full parent path is auto-expanded // 2. Auto-expansion ensures target nodes are visible by expanding their parents // 3. Multiple independent branches can have different expansion states // 4. Only specifically targeted nodes (plus necessary parents) are expanded }); test("handles defaultExpanded array expanding multiple independent root branches", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded='{["doc-root", "proj-root", "doc-reports", "proj-web"]}' data='{${JSON.stringify(multiBranchTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // Branch A: "doc-root" expanded → children visible, "doc-reports" also expanded → grandchildren visible await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible(); await expect(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible(); await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible(); // doc-reports is expanded → its children are visible await expect(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).toBeVisible(); await expect(tree.getByTestId("doc-q2-report:Q2 Report.pdf:depth:2")).toBeVisible(); // doc-invoices is NOT expanded → its children are hidden await expect(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible(); // Branch B: "proj-root" expanded → children visible, "proj-web" also expanded → grandchildren visible await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible(); await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // proj-web is expanded → its children are visible await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible(); await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible(); // proj-mobile is NOT expanded → its children are hidden await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible(); // Branch C: "media-root" is NOT in defaultExpanded → children remain hidden await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible(); await expect(tree.getByTestId("media-images:Images:depth:1")).not.toBeVisible(); await expect(tree.getByTestId("media-videos:Videos:depth:1")).not.toBeVisible(); // This test validates complete multi-branch expansion: // 1. Multiple root branches can be independently expanded // 2. Sub-nodes within expanded branches can also be selectively expanded // 3. Each expansion is isolated - expanding one branch doesn't affect others // 4. Deep nesting works correctly with selective expansion at each level }); test("auto-expands parent paths for defaultExpanded array to ensure target nodes are visible", async ({ initTestBed, createTreeDriver, }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded='{["proj-web", "media-images"]}' data='{${JSON.stringify(multiBranchTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center"> <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); // The key behavior: even though we only specified "proj-web" and "media-images" in defaultExpanded, // their parent paths should be automatically expanded to make them visible // Branch A: "doc-root" is NOT in defaultExpanded → should remain collapsed await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible(); await expect(tree.getByTestId("doc-reports:Reports:depth:1")).not.toBeVisible(); await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).not.toBeVisible(); // Branch B: "proj-web" is in defaultExpanded → parent "proj-root" should auto-expand to make it visible await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible(); await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Target node should be visible await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Sibling visible due to parent expansion // proj-web is expanded → its children should be visible await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible(); await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible(); // proj-mobile is NOT expanded → its children remain hidden await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible(); // Branch C: "media-images" is in defaultExpanded → parent "media-root" should auto-expand await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible(); await expect(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Target node should be visible await expect(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Sibling visible due to parent expansion // media-images is expanded → its children should be visible await expect(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible(); await expect(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible(); // This test validates the auto-expansion behavior: // 1. When a node ID is in defaultExpanded, all its parent nodes are automatically expanded // 2. This ensures the target node is visible and can display its expanded state // 3. Parent expansion makes sibling nodes visible but doesn't expand them // 4. Only the specifically targeted nodes (plus their parents) are expanded }); test.skip( "handles expandedValues property", SKIP_REASON.TO_BE_IMPLEMENTED(), async ({ initTestBed, page }) => { // TODO: Test controlled expansion state with expandedValues prop // TODO: Verify expansion state synchronization with external control await initTestBed(` <Tree testId="tree" data="{flatTreeData}" dataFormat="flat" expandedValues="{[1]}" /> `); }, ); test.skip( "supports expansion toggle by chevron click", SKIP_REASON.TO_BE_IMPLEMENTED(), async ({ initTestBed, page }) => { // TODO: Test clicking expand/collapse chevron toggles node expansion // TODO: Verify child nodes become visible/hidden appropriately await initTestBed(` <Tree testId="tree" data="{flatTreeData}" dataFormat="flat" /> `); }, ); test.skip( "supports expansion toggle by item click when enabled", SKIP_REASON.TO_BE_IMPLEMENTED(), async ({ initTestBed, page }) => { // TODO: Test itemClickExpands prop enables expansion on full item click // TODO: Verify clicking anywhere on item (not just chevron) toggles expansion await initTestBed(` <Tree testId="tree" data="{flatTreeData}" dataFormat="flat" itemClickExpands="true" /> `); }, ); test.skip( "handles autoExpandToSelection", SKIP_REASON.TO_BE_IMPLEMENTED(), async ({ initTestBed, page }) => { // TODO: Test automatic expansion of path to selected item // TODO: Verify all parent nodes of selected item are expanded await initTestBed(` <Tree testId="tree" data="{flatTreeData}" dataFormat="flat" selectedValue="4" autoExpandToSelection="true" /> `); }, ); }); }); // ============================================================================= // EVENTS TESTS // ============================================================================= test.describe("Events", () => { test.describe("selectionDidChange Event", () => { test("fires when user clicks on a selectable node", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Click on the first item await tree.getByTestId("1").click(); // Verify selectionDidChange event was fired with correct data await expect.poll(() => testStateDriver.testState()).toBeDefined(); const event = await testStateDriver.testState(); expect(event.newNode).toBeDefined(); expect(event.newNode.id).toBe(1); expect(event.newNode.displayName).toBe("Root Item 1"); expect(event.previousNode).toBeNull(); }); test("fires with previous node when selection changes", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // First selection await tree.getByTestId("1").click(); // Second selection await tree.getByTestId("2").click(); // Verify event has both previous and new node await expect.poll(() => testStateDriver.testState()?.then((s) => s?.newNode?.id)).toBe(2); const event = await testStateDriver.testState(); expect(event.previousNode.id).toBe(1); }); }); test.describe("nodeDidExpand Event", () => { test("fires after successful node expansion", async ({ initTestBed, createTreeDriver }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" itemClickExpands="true" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Click to expand first node await tree.getByTestId("1").click(); // Verify nodeDidExpand event fired await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is now visible await expect(tree.getByTestId("2")).toBeVisible(); }); }); test.describe("nodeDidCollapse Event", () => { test("fires after successful node collapse", async ({ initTestBed, createTreeDriver }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" itemClickExpands="true" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidCollapse="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // First, verify child is visible (node starts expanded) await expect(tree.getByTestId("2")).toBeVisible(); // Click to collapse expanded node await tree.getByTestId("1").click(); // Verify nodeDidCollapse fired with correct node await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is no longer visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); // Note: Additional collapse tests can be added when TreeDriver supports programmatic collapse operations }); // ============================================================================= // KEYBOARD EVENT TESTS // ============================================================================= test.describe("Keyboard Events", () => { test.describe("selectionDidChange Event via Keyboard", () => { test("fires when Enter key is pressed on a selectable node", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree and navigate to first item await tree.component.focus(); // Press Enter to select the focused node await tree.component.press("Enter"); // Verify selectionDidChange event was fired with correct data await expect.poll(() => testStateDriver.testState()).toBeDefined(); const event = await testStateDriver.testState(); expect(event.newNode).toBeDefined(); expect(event.newNode.id).toBe(1); expect(event.newNode.displayName).toBe("Root Item 1"); expect(event.previousNode).toBeNull(); }); test("fires when Space key is pressed on a selectable node", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree (this starts focus on first item) await tree.component.focus(); // Press Space to select the currently focused node (should be first node) await tree.component.press("Space"); // Verify selectionDidChange event was fired with correct data await expect.poll(() => testStateDriver.testState()).toBeDefined(); const event = await testStateDriver.testState(); expect(event.newNode).toBeDefined(); expect(event.newNode.id).toBe(1); // Should be first node since we didn't navigate expect(event.newNode.displayName).toBe("Root Item 1"); expect(event.previousNode).toBeNull(); }); test("fires with previous node when selection changes via keyboard", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Click to select first node (using mouse to establish baseline) await tree.getByTestId("1").click(); // Now use keyboard to navigate and select second node await tree.component.focus(); await tree.component.press("ArrowDown"); // Navigate to second node await tree.component.press("Enter"); // Select it // Verify event has both previous and new node await expect.poll(() => testStateDriver.testState()?.then((s) => s?.newNode?.id)).toBe(2); const event = await testStateDriver.testState(); expect(event.previousNode.id).toBe(1); expect(event.newNode.id).toBe(2); }); }); test.describe("nodeDidExpand Event via Keyboard", () => { test("fires when Right arrow key expands a collapsed node", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree (first node should be focused) await tree.component.focus(); // Press Right arrow to expand the first node await tree.component.press("ArrowRight"); // Verify nodeDidExpand event fired await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is now visible await expect(tree.getByTestId("2")).toBeVisible(); }); test("fires when Enter key expands a collapsed node with children", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree and press Enter to expand first node await tree.component.focus(); await tree.component.press("Enter"); // Verify nodeDidExpand event fired await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is now visible await expect(tree.getByTestId("2")).toBeVisible(); }); test("only Enter key expands nodes - Space only selects", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px" var.selectionFired="false"> <Tree testId="tree" dataFormat="hierarchy" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => testState = node" onSelectionDidChange="event => selectionFired = true"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree and press Space - should only trigger selection, not expansion await tree.component.focus(); await tree.component.press("Space"); // Wait a bit to ensure no expansion event fires await tree.component.waitFor({ timeout: 1000 }); // Verify no expansion event fired (testState should remain null) const expandState = await testStateDriver.testState(); expect(expandState).toBeNull(); // Verify children are still not visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); }); test.describe("nodeDidCollapse Event via Keyboard", () => { test("fires when Left arrow key collapses an expanded node", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidCollapse="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Verify child is initially visible (node starts expanded) await expect(tree.getByTestId("2")).toBeVisible(); // Focus the tree and press Left arrow to collapse the first node await tree.component.focus(); await tree.component.press("ArrowLeft"); // Verify nodeDidCollapse fired with correct node await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is no longer visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); test("fires when Left arrow navigates from child to parent and collapses parent", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidCollapse="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Verify child is initially visible (node starts expanded) await expect(tree.getByTestId("2")).toBeVisible(); await tree.component.focus(); await tree.component.press("ArrowDown"); // Move to child node await tree.component.press("ArrowLeft"); // Navigate to parent // Then collapse the parent by pressing Left again await tree.component.press("ArrowLeft"); // Verify nodeDidCollapse fired with correct node await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is no longer visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); }); test.describe("Complex Keyboard Event Scenarios", () => { test("fires multiple events during keyboard navigation session", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px" var.eventCount="0" var.lastEvent=""> <Tree testId="tree" dataFormat="hierarchy" data='{${JSON.stringify(hierarchyTreeData)}}' onSelectionDidChange="event => { eventCount++; lastEvent = 'selection:' + event.newNode?.id; testState = { count: eventCount, last: lastEvent }; }" onNodeDidExpand="node => { eventCount++; lastEvent = 'expand:' + node.id; testState = { count: eventCount, last: lastEvent }; }" onNodeDidCollapse="node => { eventCount++; lastEvent = 'collapse:' + node.id; testState = { count: eventCount, last: lastEvent }; }"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Simple keyboard interaction sequence await tree.component.focus(); // 1. Select and expand first node (Enter does both) await tree.component.press("Enter"); // 2. Navigate to child and select it await tree.component.press("ArrowDown"); await tree.component.press("Space"); // Select child (Space only selects) // Verify we have multiple events (using poll for async events) await expect.poll(() => testStateDriver.testState().then((s) => s?.count)).toBe(2); const result = await testStateDriver.testState(); // Check that we captured events (last event should be selection) expect(result.last).toMatch(/selection:\d+/); }); test("handles rapid keyboard interactions without missing events", async ({ initTestBed, createTreeDriver, }) => { const { testStateDriver } = await initTestBed(` <VStack height="400px" var.expandCount="0"> <Tree testId="tree" dataFormat="hierarchy" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => { expandCount++; testState = expandCount; }"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); await tree.component.focus(); // Rapid expand/collapse sequence await tree.component.press("ArrowRight"); // Expand await tree.component.press("ArrowLeft"); // Collapse await tree.component.press("ArrowRight"); // Expand again await tree.component.press("ArrowLeft"); // Collapse again await tree.component.press("ArrowRight"); // Expand third time // Verify all expansion events were captured await expect.poll(() => testStateDriver.testState()).toBe(3); }); }); }); // ============================================================================= // API EVENT TESTS // ============================================================================= test.describe("API Events", () => { test.describe("nodeDidExpand Event via API", () => { test("fires when expandNode() API method is called", async ({ initTestBed, createTreeDriver, createButtonDriver, }) => { const { testStateDriver } = await initTestBed(` <Fragment> <VStack height="400px"> <Tree id="treeApi" testId="tree" dataFormat="hierarchy" defaultExpanded="none" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="expand-btn" label="Expand Node 1" onClick=" treeApi.expandNode(1); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const expandButton = await createButtonDriver("expand-btn"); // Initially, child should not be visible await expect(tree.getByTestId("2")).not.toBeVisible(); // Trigger API expansion await expandButton.click(); // Verify nodeDidExpand event fired await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is now visible await expect(tree.getByTestId("2")).toBeVisible(); }); test("fires for expandAll() API method", async ({ page, initTestBed, createTreeDriver, createButtonDriver, }) => { await initTestBed(` <Fragment> <VStack height="400px" var.expandEvents="[]"> <Text testId="eventsText">{expandEvents}</Text> <Tree id="treeApi" testId="tree" dataFormat="hierarchy" defaultExpanded="none" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => {expandEvents.push(node.id)}" > <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="expand-all-btn" label="Expand All" onClick=" treeApi.expandAll(); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const expandAllButton = await createButtonDriver("expand-all-btn"); // Trigger API expand all await expandAllButton.click(); const eventsText = page.getByTestId("eventsText"); // expandAll() does not fire individual nodeDidExpand events // This is the correct behavior - mass operations should not fire individual events await expect(eventsText).toHaveText("[]"); // But verify the visual result is correct - all nodes should be visible await expect(tree.getByTestId("2")).toBeVisible(); await expect(tree.getByTestId("4")).toBeVisible(); }); test("fires for expandToLevel() API method", async ({ page, initTestBed, createTreeDriver, createButtonDriver, }) => { await initTestBed(` <Fragment> <VStack height="400px" var.expandEvents="[]"> <Text testId="eventsText">{expandEvents}</Text> <Tree id="treeApi" testId="tree" dataFormat="hierarchy" defaultExpanded="none" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidExpand="node => {expandEvents.push(node.id)}" > <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="expand-level-btn" label="Expand to Level 1" onClick=" treeApi.expandToLevel(1); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const expandLevelButton = await createButtonDriver("expand-level-btn"); // Trigger API expand to level await expandLevelButton.click(); const eventsText = page.getByTestId("eventsText"); // expandToLevel() does not fire individual nodeDidExpand events // This is the correct behavior - mass operations should not fire individual events await expect(eventsText).toHaveText("[]"); // But verify the visual result is correct - level 1 nodes should be visible await expect(tree.getByTestId("2")).toBeVisible(); }); }); test.describe("nodeDidCollapse Event via API", () => { test("fires when collapseNode() API method is called", async ({ initTestBed, createTreeDriver, createButtonDriver, }) => { const { testStateDriver } = await initTestBed(` <Fragment> <VStack height="400px"> <Tree id="treeApi" testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidCollapse="node => testState = node"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="collapse-btn" label="Collapse Node 1" onClick=" treeApi.collapseNode(1); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const collapseButton = await createButtonDriver("collapse-btn"); // Initially, child should be visible (starts expanded) await expect(tree.getByTestId("2")).toBeVisible(); // Trigger API collapse await collapseButton.click(); // Verify nodeDidCollapse event fired await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1); // Verify child is no longer visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); test("fires for collapseAll() API method", async ({ page, initTestBed, createTreeDriver, createButtonDriver, }) => { await initTestBed(` <Fragment> <VStack height="400px" var.collapseEvents="[]"> <Text testId="eventsText">{collapseEvents}</Text> <Tree id="treeApi" testId="tree" dataFormat="hierarchy" defaultExpanded="all" data='{${JSON.stringify(hierarchyTreeData)}}' onNodeDidCollapse="node => {collapseEvents.push(node.id)}" > <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="collapse-all-btn" label="Collapse All" onClick=" treeApi.collapseAll(); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const collapseAllButton = await createButtonDriver("collapse-all-btn"); // Initially, children should be visible (starts expanded) await expect(tree.getByTestId("2")).toBeVisible(); // Trigger API collapse all await collapseAllButton.click(); const eventsText = page.getByTestId("eventsText"); // collapseAll() does not fire individual nodeDidCollapse events // This is the correct behavior - mass operations should not fire individual events await expect(eventsText).toHaveText("[]"); // But verify the visual result is correct - children should no longer be visible await expect(tree.getByTestId("2")).not.toBeVisible(); }); }); test.describe("selectionDidChange Event via API", () => { test("fires when selectNode() API method is called", async ({ initTestBed, createTreeDriver, createButtonDriver, }) => { const { testStateDriver } = await initTestBed(` <Fragment> <VStack height="400px"> <Tree id="treeApi" testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="select-btn" label="Select Node 2" onClick=" treeApi.selectNode(2); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const selectButton = await createButtonDriver("select-btn"); // Trigger API selection await selectButton.click(); // Verify selectionDidChange event fired await expect.poll(() => testStateDriver.testState()).toBeDefined(); const event = await testStateDriver.testState(); expect(event.newNode).toBeDefined(); expect(event.newNode.id).toBe(2); expect(event.newNode.displayName).toBe("Child Item 1.1"); expect(event.previousNode).toBeNull(); }); test("fires with previous node when changing selection via API", async ({ page, initTestBed, createTreeDriver, createButtonDriver, }) => { await initTestBed(` <Fragment> <VStack height="400px" var.selectionEvents="{[]}"> <Text testId="eventsText">{JSON.stringify(selectionEvents)}</Text> <Tree id="treeApi" testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => {selectionEvents.push({prev: event.previousNode?.id || null, new: event.newNode?.id || null});}" > <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="select-first-btn" label="Select First" onClick="treeApi.selectNode(1);" /> <Button testId="select-second-btn" label="Select Second" onClick="treeApi.selectNode(2);" /> </Fragment> `); const tree = await createTreeDriver("tree"); const selectFirstButton = await createButtonDriver("select-first-btn"); const selectSecondButton = await createButtonDriver("select-second-btn"); // First selection await selectFirstButton.click(); // Second selection await selectSecondButton.click(); const eventsText = page.getByTestId("eventsText"); // Verify we have both selection events with correct previous/new node IDs await expect(eventsText).toHaveText('[{"prev":null,"new":1},{"prev":1,"new":2}]'); }); test("fires when clearSelection() API method is called", async ({ initTestBed, createTreeDriver, createButtonDriver, }) => { const { testStateDriver } = await initTestBed(` <Fragment> <VStack height="400px"> <Tree id="treeApi" testId="tree" dataFormat="flat" selectedValue="1" data='{${JSON.stringify(flatTreeData)}}' onSelectionDidChange="event => testState = event"> <property name="itemTemplate"> <HStack testId="{$item.id}"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> <Button testId="clear-btn" label="Clear Selection" onClick=" treeApi.clearSelection(); " /> </Fragment> `); const tree = await createTreeDriver("tree"); const clearButton = await createButtonDriver("clear-btn"); // Trigger API clear selection await clearButton.click(); // Verify selectionDidChange event fired with null newNode await expect.poll(() => testStateDriver.testState()).toBeDefined(); const event = await testStateDriver.testState(); expect(event.newNode).toBeNull(); expect(event.previousNode).toBeDefined(); expect(event.previousNode.id).toBe(1); }); }); }); }); // ============================================================================= // ACCESSIBILITY TESTS // ============================================================================= test.describe("Accessibility", () => { test("has proper ARIA attributes", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:aria" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Test main tree container ARIA attributes await expect(tree.component).toHaveAttribute("role", "tree"); await expect(tree.component).toHaveAttribute("aria-label", "Tree navigation"); await expect(tree.component).toHaveAttribute("aria-multiselectable", "false"); // Test tree items have proper ARIA attributes // Find treeitems by their role attribute const treeItems = tree.component.locator('[role="treeitem"]'); // Test first tree item (should be expanded due to defaultExpanded="all") const firstTreeItem = treeItems.first(); await expect(firstTreeItem).toHaveAttribute("role", "treeitem"); await expect(firstTreeItem).toHaveAttribute("aria-level", "1"); await expect(firstTreeItem).toHaveAttribute("aria-expanded", "true"); await expect(firstTreeItem).toHaveAttribute("aria-selected", "false"); await expect(firstTreeItem).toHaveAttribute("aria-label", "Root Item 1"); // Test that we have the expected number of tree items (4 total in flatTreeData) await expect(treeItems).toHaveCount(4); // Test second tree item (Child Item 1.1) const secondTreeItem = treeItems.nth(1); await expect(secondTreeItem).toHaveAttribute("aria-level", "2"); await expect(secondTreeItem).toHaveAttribute("aria-label", "Child Item 1.1"); // Test third tree item (Grandchild Item 1.1.1) const thirdTreeItem = treeItems.nth(2); await expect(thirdTreeItem).toHaveAttribute("aria-level", "3"); await expect(thirdTreeItem).toHaveAttribute("aria-label", "Grandchild Item 1.1.1"); // Test fourth tree item (Child Item 1.2) const fourthTreeItem = treeItems.nth(3); await expect(fourthTreeItem).toHaveAttribute("aria-level", "2"); await expect(fourthTreeItem).toHaveAttribute("aria-label", "Child Item 1.2"); }); test("supports keyboard navigation", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:keyboard" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Focus the tree await tree.component.focus(); // Test Arrow Down navigation await tree.component.press("ArrowDown"); // First item should be focused after initial focus + ArrowDown // Test Arrow Up navigation await tree.component.press("ArrowUp"); // Should stay at first item (can't go up from first) // Navigate down to second item await tree.component.press("ArrowDown"); // Test Enter for selection/expansion await tree.component.press("Enter"); // Test Arrow Right for expansion (if has children) await tree.component.press("ArrowRight"); // Test Arrow Left for collapse/parent navigation await tree.component.press("ArrowLeft"); // Test Home key await tree.component.press("Home"); // Test End key await tree.component.press("End"); // Test Space for selection await tree.component.press(" "); // Verify tree is still visible and functional after keyboard interactions await expect(tree.getByTestId("1:keyboard")).toBeVisible(); }); test("supports itemClickExpands behavior", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" itemClickExpands="true" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:expand-click" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Initially, only root item should be visible (tree starts collapsed) await expect(tree.getByTestId("1:expand-click")).toBeVisible(); await expect(tree.getByTestId("2:expand-click")).not.toBeVisible(); // Click on the root item (not the expand/collapse icon) to expand it await tree.getByTestId("1:expand-click").click(); // After clicking, children should be visible await expect(tree.getByTestId("2:expand-click")).toBeVisible(); await expect(tree.getByTestId("3:expand-click")).toBeVisible(); // Click on child item that has its own children await tree.getByTestId("2:expand-click").click(); // Grandchild should become visible await expect(tree.getByTestId("4:expand-click")).toBeVisible(); // Click again to collapse await tree.getByTestId("2:expand-click").click(); // Grandchild should be hidden await expect(tree.getByTestId("4:expand-click")).not.toBeVisible(); }); test("works with screen readers", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:screen-reader" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Test semantic structure that screen readers depend on await expect(tree.component).toHaveAttribute("role", "tree"); // Verify all tree items have proper semantic markup const treeItems = tree.component.locator('[role="treeitem"]'); await expect(treeItems).toHaveCount(4); // Test each item has required accessibility information for (let i = 0; i < 4; i++) { const item = treeItems.nth(i); // Each item must have a level for screen reader navigation await expect(item).toHaveAttribute("aria-level"); // Each item must have a label for screen reader announcement await expect(item).toHaveAttribute("aria-label"); // Each item must have selection state await expect(item).toHaveAttribute("aria-selected"); } // Test hierarchical relationships are properly communicated const rootItem = treeItems.first(); await expect(rootItem).toHaveAttribute("aria-level", "1"); await expect(rootItem).toHaveAttribute("aria-expanded", "true"); // Test child items have correct level hierarchy const childItem = treeItems.nth(1); await expect(childItem).toHaveAttribute("aria-level", "2"); // Test grandchild has deeper level const grandchildItem = treeItems.nth(2); await expect(grandchildItem).toHaveAttribute("aria-level", "3"); // Test that all items have selection state (even if not selected) const allItems = tree.component.locator('[aria-selected="false"]'); await expect(allItems).toHaveCount(4); // All items should be unselected initially // Test expansion states are properly communicated const expandedItems = tree.component.locator('[aria-expanded="true"]'); await expect(expandedItems).toHaveCount(2); // Root and Child Item 1.1 (which has a grandchild) // Test that tree is focusable for keyboard navigation await expect(tree.component).toHaveAttribute("tabindex", "0"); // Verify semantic structure is maintained for screen reader navigation await expect(tree.component).toHaveAttribute("role", "tree"); await expect(treeItems.first()).toHaveAttribute("role", "treeitem"); // Test that all required accessibility information is present // This ensures screen readers can properly announce tree structure const firstItem = treeItems.first(); await expect(firstItem).toHaveAttribute("aria-level"); await expect(firstItem).toHaveAttribute("aria-label"); await expect(firstItem).toHaveAttribute("aria-expanded"); await expect(firstItem).toHaveAttribute("aria-selected"); }); }); // ============================================================================= // PERFORMANCE TESTS // ============================================================================= test.describe("Performance", () => { test("handles large datasets efficiently", async ({ initTestBed, createTreeDriver }) => { // Generate a large dataset with 1000+ items in a hierarchical structure const generateLargeDataset = (numItems = 1000) => { const data = []; let id = 1; // Create root items (10% of total) const numRoots = Math.ceil(numItems * 0.1); for (let i = 0; i < numRoots; i++) { data.push({ id: id++, name: `Root Item ${i + 1}`, parentId: null, }); } // Create child items distributed under roots const itemsPerRoot = Math.floor((numItems - numRoots) / numRoots); for (let rootIndex = 0; rootIndex < numRoots; rootIndex++) { const rootId = rootIndex + 1; for (let j = 0; j < itemsPerRoot && id <= numItems; j++) { data.push({ id: id++, name: `Child Item ${rootId}.${j + 1}`, parentId: rootId, }); } } return data; }; const largeDataset = generateLargeDataset(1000); const startTime = performance.now(); await initTestBed(` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(largeDataset)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:perf" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("tree"); // Verify tree renders await expect(tree.component).toBeVisible(); const renderTime = performance.now() - startTime; // Should render large dataset within reasonable time (< 5 seconds) expect(renderTime).toBeLessThan(5000); // Test that only root items are initially visible (virtualization working) await expect(tree.getByTestId("1:perf")).toBeVisible(); await expect(tree.getByTestId("2:perf")).toBeVisible(); // Verify scrolling performance - scroll to end of visible items const scrollStartTime = performance.now(); await tree.component.press("End"); // Scroll to last visible item const scrollTime = performance.now() - scrollStartTime; // Scrolling should be fast (< 1 second) expect(scrollTime).toBeLessThan(1000); // Test expansion performance const expandStartTime = performance.now(); await tree.getByTestId("1:perf").click(); // Expand first root item const expandTime = performance.now() - expandStartTime; // Expansion should be fast (< 500ms) expect(expandTime).toBeLessThan(500); }); test("maintains smooth scrolling with virtualization", async ({ initTestBed, createTreeDriver, }) => { // Create a dataset specifically for scroll testing const scrollTestData = []; for (let i = 1; i <= 500; i++) { scrollTestData.push({ id: i, name: `Scroll Item ${i}`, parentId: null, }); } await initTestBed(` <VStack height="300px"> <Tree testId="scroll-tree" dataFormat="flat" data='{${JSON.stringify(scrollTestData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}:scroll"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `); const tree = await createTreeDriver("scroll-tree"); // Verify tree is visible await expect(tree.component).toBeVisible(); await expect(tree.getByTestId("1:scroll")).toBeVisible(); // Test keyboard scrolling performance await tree.component.focus(); // Scroll down 50 times rapidly const rapidScrollStartTime = performance.now(); for (let i = 0; i < 50; i++) { await tree.component.press("ArrowDown"); } const rapidScrollTime = performance.now() - rapidScrollStartTime; // Rapid keyboard scrolling should remain responsive (< 2 seconds) expect(rapidScrollTime).toBeLessThan(2000); // Verify we can reach different parts of the large list await tree.component.press("Home"); // Go to start await expect(tree.getByTestId("1:scroll")).toBeVisible(); await tree.component.press("End"); // Go to end // Should be able to navigate to end without timeout }); }); // ============================================================================= // THEME VARIABLES TESTS // ============================================================================= test.describe("Theme Variables", () => { test("applies custom tree text color theme variable", async ({ initTestBed, createTreeDriver, }) => { const TEXT_COLOR = "rgb(128, 0, 128)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "textColor-Tree": TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const rowWrapper1 = tree.getNodeWrapperByTestId("1"); const rowWrapper2 = tree.getNodeWrapperByTestId("2"); const rowWrapper3 = tree.getNodeWrapperByTestId("3"); const rowWrapper4 = tree.getNodeWrapperByTestId("4"); await expect(rowWrapper1).toBeVisible(); // Test all items have correct default text color await expect(rowWrapper1).toHaveCSS("color", TEXT_COLOR); await expect(rowWrapper2).toHaveCSS("color", TEXT_COLOR); await expect(rowWrapper3).toHaveCSS("color", TEXT_COLOR); await expect(rowWrapper4).toHaveCSS("color", TEXT_COLOR); }); test("applies custom hover state theme variables", async ({ initTestBed, createTreeDriver, page, }) => { const HOVER_BG_COLOR = "rgb(255, 255, 0)"; const HOVER_TEXT_COLOR = "rgb(0, 0, 255)"; await initTestBed( ` <VStack height="400px"> <Tree testId="tree" dataFormat="flat" defaultExpanded="all" data='{${JSON.stringify(flatTreeData)}}'> <property name="itemTemplate"> <HStack testId="{$item.id}" verticalAlignment="center"> <Text value="{$item.name}" /> </HStack> </property> </Tree> </VStack> `, { testThemeVars: { "backgroundColor-Tree-row--hover": HOVER_BG_COLOR, "textColor-Tree--hover": HOVER_TEXT_COLOR, }, }, ); const tree = await createTreeDriver("tree"); // Get row wrappers directly using getNodeWrapperByMarker const rowWrapper1 = tree.getNodeWrapperByTestId("1"); const rowWrapper2 = tree.getNodeWrapperByTestId("2"); const rowWrapper3 = tree.getNodeWrapperByTestId("3"); await expect(rowWrapper1).toBeVisible(); // Test hover on first item await rowWrapper1.hover(); await expect(rowWrapper1).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(rowWrapper1).toHaveCSS("color", HOVER_TEXT_COLOR); // Test hover on second item await rowWrapper2.hover(); await expect(rowWrapper2).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(rowWrapper2).toHaveCSS("color", HOVER_TEXT_COLOR); // Test hover on third item await rowWrapper3.hover(); await expect(rowWrapper3).toHaveCSS("background-color", HOVER_BG_COLOR); await expect(rowWrapper3).toHaveCSS("color", HOVER_TEXT_COLOR); }); }); // ============================================================================= // EDGE CASES TESTS // ============================================================================= test.describe("Edge Cases", () => { test("handles null/undefined data gracefully", async ({ initTestBed, createTreeDriver }) => { await initTestBed(` <VStack height="200px"> <Tree testId="tree" data="{null}" dataFormat="flat" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles malformed data gracefully", async ({ initTestBed, createTreeDriver }) => { const malformedData = [ { id: 1, name: "Valid Item" }, { /* missing id */ name: "Invalid Item" }, null, undefined, ]; await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(malformedData)}}' dataFormat="flat" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles circular references in hierarchy data", async ({ initTestBed, createTreeDriver, }) => { const circularData = [ { id: 1, name: "Item 1", parentId: 2 }, { id: 2, name: "Item 2", parentId: 1 }, ]; await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(circularData)}}' dataFormat="flat" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles duplicate IDs gracefully", async ({ initTestBed, createTreeDriver }) => { const duplicateIdData = [ { id: 1, name: "Item 1" }, { id: 1, name: "Duplicate Item 1" }, { id: 2, name: "Item 2" }, ]; await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(duplicateIdData)}}' dataFormat="flat" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles orphaned nodes in flat data", async ({ initTestBed, createTreeDriver }) => { const orphanedData = [ { id: 1, name: "Root Item" }, { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent ]; await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(orphanedData)}}' dataFormat="flat" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles deeply nested data structures", async ({ initTestBed, createTreeDriver }) => { const deepData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: `Level ${i + 1}`, parentId: i === 0 ? null : i, })); await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(deepData)}}' dataFormat="flat" selectedValue="{100}" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); test("handles invalid dataFormat values", async ({ initTestBed, createTreeDriver }) => { const orphanedData = [ { id: 1, name: "Root Item" }, { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent ]; await initTestBed(` <VStack height="200px"> <Tree testId="tree" data='{${JSON.stringify(orphanedData)}}' dataFormat="invalid-format" /> </VStack> `); const tree = await createTreeDriver("tree"); await expect(tree.component).toBeVisible(); }); }); ```