import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../vitest/render';

import * as stories from './Tree.stories';

const composedStories = composeStories(stories);

describe('Tree Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Basic',
      'DeeplyNested',
      'SelectionUncontrolled',
      'SelectionControlled',
      'SelectionScopeChildren',
      'SelectionScopeParents',
      'ExpansionUncontrolled',
      'ExpansionControlled',
      'CustomActions',
      'CustomActionsLargeDataset',
      'LazyLoadingUncontrolled',
      'LazyLoadingSubtree',
      'LazyLoadingControlled',
      'LazyLoadingWithSelection',
      'DragAndDropUncontrolled',
      'DragAndDropControlled',
      'DragAndDropFlatData',
      'DragAndDropFlatDataControlled',
      'DragAndDropWithLazyLoading',
      'DragAndDropWithLazyLoadingControlled',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders Basic story', () => {
    const Story = composedStories.Basic;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders DeeplyNested story', () => {
    const Story = composedStories.DeeplyNested;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Level 1 - Directory"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="1"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Level 1 - Directory
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-edit-icon"
                />
              </button>
              <button
                class="iconButton iconButton--sm iconButton--destructive iconButton--ghost"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-delete"
                />
              </button>
              <button
                class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-plus"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders SelectionUncontrolled story', () => {
    const Story = composedStories.SelectionUncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        aria-multiselectable="true"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        data-selection-mode="multiple"
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Documents"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Photos"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Downloads"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders SelectionControlled story', () => {
    const Story = composedStories.SelectionControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 1rem;"
    >
      <strong>
        Selected items:
      </strong>
       
      1, 3, 13
    </div>
    <div
      class="v2Tree"
    >
      <div
        class="v2Tree__header"
      >
        <button
          class="btn btn-secondary btn-md btn--iconRight"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Expand all
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus"
            />
          </span>
        </button>
      </div>
      <div
        class="v2Tree__listContainer"
      >
        <template
          data-react-aria-hidden="true"
        />
        <span
          data-focus-scope-start="true"
          hidden=""
        />
        <div
          aria-label="File System"
          aria-multiselectable="true"
          class="v2Tree__list"
          data-collection="react-aria-_r_0_"
          data-rac=""
          data-selection-mode="multiple"
          id="react-aria-_r_1_"
          role="treegrid"
          tabindex="0"
        >
          <div
            aria-expanded="false"
            aria-label="Documents"
            aria-level="1"
            aria-posinset="1"
            aria-selected="true"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="1"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            data-selected="true"
            data-selection-mode="multiple"
            id="react-aria-_r_1_-1"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_2_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <input
                aria-disabled="false"
                aria-label="Documents"
                checked=""
                class="checkboxField checkboxField--checked"
                data-checked="true"
                data-disabled="false"
                type="checkbox"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Documents
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                All your important documents
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Photos"
            aria-level="1"
            aria-posinset="2"
            aria-selected="true"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="13"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            data-selected="true"
            data-selection-mode="multiple"
            id="react-aria-_r_1_-13"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_3_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <input
                aria-disabled="false"
                aria-label="Photos"
                checked=""
                class="checkboxField checkboxField--checked"
                data-checked="true"
                data-disabled="false"
                type="checkbox"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Photos
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Downloads"
            aria-level="1"
            aria-posinset="3"
            aria-selected="false"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="24"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            data-selection-mode="multiple"
            id="react-aria-_r_1_-24"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_4_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <input
                aria-disabled="false"
                aria-label="Downloads"
                class="checkboxField"
                data-checked="false"
                data-disabled="false"
                type="checkbox"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Downloads
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Recently downloaded files
                )
              </span>
            </div>
          </div>
        </div>
        <span
          data-focus-scope-end="true"
          hidden=""
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders SelectionScopeChildren story', () => {
    const Story = composedStories.SelectionScopeChildren;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        aria-multiselectable="true"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        data-selection-mode="multiple"
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Documents"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Photos"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Downloads"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders SelectionScopeParents story', () => {
    const Story = composedStories.SelectionScopeParents;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        aria-multiselectable="true"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        data-selection-mode="multiple"
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Documents"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Photos"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Downloads"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders ExpansionUncontrolled story', () => {
    const Story = composedStories.ExpansionUncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Collapse all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-minus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="true"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-expanded="true"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Collapse"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-descending"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Project"
          aria-level="2"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="2"
          data-level="2"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-2"
          role="row"
          style="--tree-item-level: 2;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-2"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
            >
              Project
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Personal"
          aria-level="2"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="9"
          data-level="2"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-9"
          role="row"
          style="--tree-item-level: 2;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-9"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
            >
              Personal
            </span>
          </div>
        </div>
        <div
          aria-label="README.md"
          aria-level="2"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-key="12"
          data-level="2"
          data-rac=""
          id="react-aria-_r_1_-12"
          role="row"
          style="--tree-item-level: 2;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
            >
              README.md
            </span>
          </div>
        </div>
        <div
          aria-expanded="true"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-expanded="true"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Collapse"
              aria-labelledby="react-aria-_r_5_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_5_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-descending"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="2025"
          aria-level="2"
          aria-posinset="1"
          aria-setsize="2"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="14"
          data-level="2"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-14"
          role="row"
          style="--tree-item-level: 2;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_6_ react-aria-_r_1_-14"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_6_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
            >
              2025
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Photos from last year
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="2026"
          aria-level="2"
          aria-posinset="2"
          aria-setsize="2"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="22"
          data-level="2"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-22"
          role="row"
          style="--tree-item-level: 2;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_7_ react-aria-_r_1_-22"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_7_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
            >
              2026
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_8_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_8_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders ExpansionControlled story', () => {
    const Story = composedStories.ExpansionControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center;"
    >
      <strong>
        Expanded items:
      </strong>
       
      1, 2, 13, 14
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand All Directories
        </span>
      </button>
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Collapse All
        </span>
      </button>
    </div>
    <div
      class="v2Tree"
    >
      <div
        class="v2Tree__header"
      >
        <button
          class="btn btn-secondary btn-md btn--iconRight"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Collapse all
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-minus"
            />
          </span>
        </button>
      </div>
      <div
        class="v2Tree__listContainer"
      >
        <template
          data-react-aria-hidden="true"
        />
        <span
          data-focus-scope-start="true"
          hidden=""
        />
        <div
          aria-label="File System"
          class="v2Tree__list"
          data-collection="react-aria-_r_0_"
          data-rac=""
          id="react-aria-_r_1_"
          role="treegrid"
          tabindex="0"
        >
          <div
            aria-expanded="true"
            aria-label="Documents"
            aria-level="1"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-expanded="true"
            data-has-child-items="true"
            data-key="1"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-1"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Collapse"
                aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_2_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-descending"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Documents
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                All your important documents
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="true"
            aria-label="Project"
            aria-level="2"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-expanded="true"
            data-has-child-items="true"
            data-key="2"
            data-level="2"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-2"
            role="row"
            style="--tree-item-level: 2;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Collapse"
                aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-2"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_3_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-descending"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Project
              </span>
            </div>
          </div>
          <div
            aria-label="Weekly Report"
            aria-level="3"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-key="3"
            data-level="3"
            data-rac=""
            id="react-aria-_r_1_-3"
            role="row"
            style="--tree-item-level: 3;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <div
                class="v2Tree__listItemSpacer"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Weekly Report
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Summary of weekly activities and progress
                )
              </span>
            </div>
          </div>
          <div
            aria-label="Budget"
            aria-level="3"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-key="4"
            data-level="3"
            data-rac=""
            id="react-aria-_r_1_-4"
            role="row"
            style="--tree-item-level: 3;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <div
                class="v2Tree__listItemSpacer"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Budget
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Presentations"
            aria-level="3"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="5"
            data-level="3"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-5"
            role="row"
            style="--tree-item-level: 3;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-5"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_4_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Presentations
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Quarterly and annual presentations
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Personal"
            aria-level="2"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="9"
            data-level="2"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-9"
            role="row"
            style="--tree-item-level: 2;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_5_ react-aria-_r_1_-9"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_5_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Personal
              </span>
            </div>
          </div>
          <div
            aria-label="README.md"
            aria-level="2"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-key="12"
            data-level="2"
            data-rac=""
            id="react-aria-_r_1_-12"
            role="row"
            style="--tree-item-level: 2;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <div
                class="v2Tree__listItemSpacer"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                README.md
              </span>
            </div>
          </div>
          <div
            aria-expanded="true"
            aria-label="Photos"
            aria-level="1"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-expanded="true"
            data-has-child-items="true"
            data-key="13"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-13"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Collapse"
                aria-labelledby="react-aria-_r_6_ react-aria-_r_1_-13"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_6_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-descending"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Photos
              </span>
            </div>
          </div>
          <div
            aria-expanded="true"
            aria-label="2025"
            aria-level="2"
            aria-posinset="1"
            aria-setsize="2"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-expanded="true"
            data-has-child-items="true"
            data-key="14"
            data-level="2"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-14"
            role="row"
            style="--tree-item-level: 2;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Collapse"
                aria-labelledby="react-aria-_r_7_ react-aria-_r_1_-14"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_7_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-descending"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                2025
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Photos from last year
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Vacation"
            aria-level="3"
            aria-posinset="1"
            aria-setsize="2"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="15"
            data-level="3"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-15"
            role="row"
            style="--tree-item-level: 3;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_8_ react-aria-_r_1_-15"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_8_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Vacation
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Work Events"
            aria-level="3"
            aria-posinset="2"
            aria-setsize="2"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="19"
            data-level="3"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-19"
            role="row"
            style="--tree-item-level: 3;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_9_ react-aria-_r_1_-19"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_9_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                Work Events
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Company events and gatherings
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="2026"
            aria-level="2"
            aria-posinset="2"
            aria-setsize="2"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="22"
            data-level="2"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-22"
            role="row"
            style="--tree-item-level: 2;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_10_ react-aria-_r_1_-22"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_10_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyM typography--left"
              >
                2026
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Downloads"
            aria-level="1"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="24"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            id="react-aria-_r_1_-24"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_11_ react-aria-_r_1_-24"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_11_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Downloads
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Recently downloaded files
                )
              </span>
            </div>
          </div>
        </div>
        <span
          data-focus-scope-end="true"
          hidden=""
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders CustomActions story', () => {
    const Story = composedStories.CustomActions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_3_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_5_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_6_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_6_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_7_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders CustomActionsLargeDataset story', () => {
    const Story = composedStories.CustomActionsLargeDataset;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_3_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_5_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_6_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_6_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_7_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 1"
          aria-level="1"
          aria-posinset="4"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="30"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-30"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_8_ react-aria-_r_1_-30"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_8_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 1
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Description for Folder 1
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_9_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 2"
          aria-level="1"
          aria-posinset="5"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="279"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-279"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_10_ react-aria-_r_1_-279"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_10_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 2
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_11_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 3"
          aria-level="1"
          aria-posinset="6"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="528"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-528"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_12_ react-aria-_r_1_-528"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_12_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 3
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_13_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 4"
          aria-level="1"
          aria-posinset="7"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="777"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-777"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_14_ react-aria-_r_1_-777"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_14_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 4
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Description for Folder 4
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_15_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 5"
          aria-level="1"
          aria-posinset="8"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1026"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1026"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_16_ react-aria-_r_1_-1026"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_16_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 5
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_17_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 6"
          aria-level="1"
          aria-posinset="9"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1275"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1275"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_18_ react-aria-_r_1_-1275"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_18_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 6
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_19_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 7"
          aria-level="1"
          aria-posinset="10"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1524"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1524"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_20_ react-aria-_r_1_-1524"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_20_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 7
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Description for Folder 7
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_21_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 8"
          aria-level="1"
          aria-posinset="11"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1773"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1773"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_22_ react-aria-_r_1_-1773"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_22_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 8
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_23_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 9"
          aria-level="1"
          aria-posinset="12"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="2022"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-2022"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_24_ react-aria-_r_1_-2022"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_24_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 9
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_25_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Folder 10"
          aria-level="1"
          aria-posinset="13"
          aria-setsize="13"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="2271"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-2271"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_26_ react-aria-_r_1_-2271"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_26_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Folder 10
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Description for Folder 10
              )
            </span>
            <div
              class="v2Tree__listItemActions v2Tree__listItemActions--alwaysVisible"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                id="react-aria-_r_27_"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-more"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders LazyLoadingUncontrolled story', () => {
    const Story = composedStories.LazyLoadingUncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-key="24"
          data-level="1"
          data-rac=""
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders LazyLoadingSubtree story', () => {
    const Story = composedStories.LazyLoadingSubtree;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-key="24"
          data-level="1"
          data-rac=""
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders LazyLoadingControlled story', () => {
    const Story = composedStories.LazyLoadingControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-key="24"
          data-level="1"
          data-rac=""
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders LazyLoadingWithSelection story', () => {
    const Story = composedStories.LazyLoadingWithSelection;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        aria-multiselectable="true"
        class="v2Tree__list"
        data-collection="react-aria-_r_0_"
        data-rac=""
        data-selection-mode="multiple"
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Documents"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <input
              aria-disabled="false"
              aria-label="Photos"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-selected="false"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-collection="react-aria-_r_0_"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          data-selection-mode="multiple"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <input
              aria-disabled="false"
              aria-label="Downloads"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              type="checkbox"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropUncontrolled story', () => {
    const Story = composedStories.DragAndDropUncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-allows-dragging="true"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Documents"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Photos"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Downloads"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropControlled story', () => {
    const Story = composedStories.DragAndDropControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center;"
    >
      <strong>
        Drag operations:
      </strong>
       
      0
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Reset Order
        </span>
      </button>
    </div>
    <div
      class="v2Tree"
    >
      <div
        class="v2Tree__header"
      >
        <button
          class="btn btn-secondary btn-md btn--iconRight"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Expand all
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus"
            />
          </span>
        </button>
      </div>
      <div
        class="v2Tree__listContainer"
      >
        <template
          data-react-aria-hidden="true"
        />
        <span
          data-focus-scope-start="true"
          hidden=""
        />
        <div
          aria-label="File System"
          class="v2Tree__list"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-rac=""
          id="react-aria-_r_1_"
          role="treegrid"
          tabindex="0"
        >
          <div
            aria-expanded="false"
            aria-label="Documents"
            aria-level="1"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="1"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-1"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Documents"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_2_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Documents
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                All your important documents
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Photos"
            aria-level="1"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="13"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-13"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Photos"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_3_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Photos
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Downloads"
            aria-level="1"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="24"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-24"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Downloads"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_4_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Downloads
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Recently downloaded files
                )
              </span>
            </div>
          </div>
        </div>
        <span
          data-focus-scope-end="true"
          hidden=""
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropFlatData story', () => {
    const Story = composedStories.DragAndDropFlatData;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__header"
    >
      <button
        class="btn btn-secondary btn-md btn--iconRight"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Expand all
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-plus"
          />
        </span>
      </button>
    </div>
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="Flat File System"
        class="v2Tree__list"
        data-allows-dragging="true"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Documents"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Photos"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="24"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Downloads"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_4_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropFlatDataControlled story', () => {
    const Story = composedStories.DragAndDropFlatDataControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center;"
    >
      <strong>
        Drag operations:
      </strong>
       
      0
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Reset Order
        </span>
      </button>
    </div>
    <div
      class="v2Tree"
    >
      <div
        class="v2Tree__header"
      >
        <button
          class="btn btn-secondary btn-md btn--iconRight"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Expand all
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus"
            />
          </span>
        </button>
      </div>
      <div
        class="v2Tree__listContainer"
      >
        <template
          data-react-aria-hidden="true"
        />
        <span
          data-focus-scope-start="true"
          hidden=""
        />
        <div
          aria-label="File System"
          class="v2Tree__list"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-rac=""
          id="react-aria-_r_1_"
          role="treegrid"
          tabindex="0"
        >
          <div
            aria-expanded="false"
            aria-label="Documents"
            aria-level="1"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="1"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-1"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Documents"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_2_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Documents
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                All your important documents
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Photos"
            aria-level="1"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="13"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-13"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Photos"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_3_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Photos
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Downloads"
            aria-level="1"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="24"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-24"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Downloads"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_4_ react-aria-_r_1_-24"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_4_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Downloads
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Recently downloaded files
                )
              </span>
            </div>
          </div>
        </div>
        <span
          data-focus-scope-end="true"
          hidden=""
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropWithLazyLoading story', () => {
    const Story = composedStories.DragAndDropWithLazyLoading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2Tree"
  >
    <div
      class="v2Tree__listContainer"
    >
      <template
        data-react-aria-hidden="true"
      />
      <span
        data-focus-scope-start="true"
        hidden=""
      />
      <div
        aria-label="File System"
        class="v2Tree__list"
        data-allows-dragging="true"
        data-collection="react-aria-_r_0_"
        data-rac=""
        id="react-aria-_r_1_"
        role="treegrid"
        tabindex="0"
      >
        <div
          aria-expanded="false"
          aria-label="Documents"
          aria-level="1"
          aria-posinset="1"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="1"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-1"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Documents"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_2_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Documents
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              All your important documents
              )
            </span>
          </div>
        </div>
        <div
          aria-expanded="false"
          aria-label="Photos"
          aria-level="1"
          aria-posinset="2"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-has-child-items="true"
          data-key="13"
          data-level="1"
          data-rac=""
          data-react-aria-pressable="true"
          draggable="true"
          id="react-aria-_r_1_-13"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Photos"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <button
              aria-label="Expand"
              aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              data-react-aria-prevent-focus="true"
              id="react-aria-_r_3_"
              tabindex="-1"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-arrow-right"
              />
            </button>
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Photos
            </span>
          </div>
        </div>
        <div
          aria-label="Downloads"
          aria-level="1"
          aria-posinset="3"
          aria-setsize="3"
          class="v2Tree__listItem"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-key="24"
          data-level="1"
          data-rac=""
          draggable="true"
          id="react-aria-_r_1_-24"
          role="row"
          style="--tree-item-level: 1;"
          tabindex="-1"
        >
          <div
            aria-colindex="1"
            role="gridcell"
            style="display: contents;"
          >
            <button
              aria-describedby="react-aria-description-0"
              aria-label="Drag Downloads"
              class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-drag"
              />
            </button>
            <div
              class="v2Tree__listItemIndent"
            />
            <div
              class="v2Tree__listItemSpacer"
            />
            <span
              class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
            >
              Downloads
            </span>
            <span
              class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
            >
              (
              Recently downloaded files
              )
            </span>
          </div>
        </div>
      </div>
      <span
        data-focus-scope-end="true"
        hidden=""
      />
    </div>
  </div>
</div>
`);
  });

  it('renders DragAndDropWithLazyLoadingControlled story', () => {
    const Story = composedStories.DragAndDropWithLazyLoadingControlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center;"
    >
      <strong>
        Drag operations:
      </strong>
       
      0
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Reset Order
        </span>
      </button>
    </div>
    <div
      class="v2Tree"
    >
      <div
        class="v2Tree__listContainer"
      >
        <template
          data-react-aria-hidden="true"
        />
        <span
          data-focus-scope-start="true"
          hidden=""
        />
        <div
          aria-label="File System"
          class="v2Tree__list"
          data-allows-dragging="true"
          data-collection="react-aria-_r_0_"
          data-rac=""
          id="react-aria-_r_1_"
          role="treegrid"
          tabindex="0"
        >
          <div
            aria-expanded="false"
            aria-label="Documents"
            aria-level="1"
            aria-posinset="1"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="1"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-1"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Documents"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_2_ react-aria-_r_1_-1"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_2_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Documents
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                All your important documents
                )
              </span>
            </div>
          </div>
          <div
            aria-expanded="false"
            aria-label="Photos"
            aria-level="1"
            aria-posinset="2"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-has-child-items="true"
            data-key="13"
            data-level="1"
            data-rac=""
            data-react-aria-pressable="true"
            draggable="true"
            id="react-aria-_r_1_-13"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Photos"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <button
                aria-label="Expand"
                aria-labelledby="react-aria-_r_3_ react-aria-_r_1_-13"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                data-react-aria-prevent-focus="true"
                id="react-aria-_r_3_"
                tabindex="-1"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-arrow-right"
                />
              </button>
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Photos
              </span>
            </div>
          </div>
          <div
            aria-label="Downloads"
            aria-level="1"
            aria-posinset="3"
            aria-setsize="3"
            class="v2Tree__listItem"
            data-allows-dragging="true"
            data-collection="react-aria-_r_0_"
            data-key="24"
            data-level="1"
            data-rac=""
            draggable="true"
            id="react-aria-_r_1_-24"
            role="row"
            style="--tree-item-level: 1;"
            tabindex="-1"
          >
            <div
              aria-colindex="1"
              role="gridcell"
              style="display: contents;"
            >
              <button
                aria-describedby="react-aria-description-0"
                aria-label="Drag Downloads"
                class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
                data-react-aria-pressable="true"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-drag"
                />
              </button>
              <div
                class="v2Tree__listItemIndent"
              />
              <div
                class="v2Tree__listItemSpacer"
              />
              <span
                class="v2Tree__listItemLabel typography typography__bodyCopyMB typography--left"
              >
                Downloads
              </span>
              <span
                class="v2Tree__listItemDescription typography typography__bodyCopyM typography--left typography--secondary"
              >
                (
                Recently downloaded files
                )
              </span>
            </div>
          </div>
        </div>
        <span
          data-focus-scope-end="true"
          hidden=""
        />
      </div>
    </div>
  </div>
</div>
`);
  });
});