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

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

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

const composedStories = composeStories(stories);

describe('MultiSelect Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'DropdownMode',
      'ContentMode',
      'WithDefaultValue',
      'Error',
      'Warning',
      'Disabled',
      'DisabledValues',
      'HideSelectAll',
      'EmptyOptions',
      'ContentModeWithSections',
    ]);

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

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

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      Choose fruits...
    </span>
  </button>
</div>
`);
  });

  it('renders DropdownMode story', () => {
    const Story = composedStories.DropdownMode;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      Choose fruits...
    </span>
  </button>
</div>
`);
  });

  it('renders ContentMode story', () => {
    const Story = composedStories.ContentMode;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Select fruits"
    class="multiSelectField__content md"
    data-rac=""
    role="group"
  >
    <div
      class="dataList dataList--dense dataList--inset dataList--noGap"
    >
      <button
        aria-pressed="false"
        class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-react-aria-pressable="true"
        tabindex="0"
        type="button"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            class="checkboxField"
            data-checked="false"
            label="Select all"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Select all
          </span>
        </div>
      </button>
    </div>
    <div
      class="multiSelectField__divider"
    />
    <div
      aria-label="Select fruits"
      aria-multiselectable="true"
      class="dataList dataList--dense dataList--inset dataList--noGap"
      data-collection="react-aria-_r_0_"
      id="react-aria-_r_1_"
      role="listbox"
      tabindex="0"
    >
      <div
        aria-selected="false"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="apple"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-apple"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField"
            data-checked="false"
            data-disabled="false"
            label="Apple"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Apple
          </span>
        </div>
      </div>
      <div
        aria-selected="false"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="banana"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-banana"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField"
            data-checked="false"
            data-disabled="false"
            label="Banana"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Banana
          </span>
        </div>
      </div>
      <div
        aria-selected="false"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="cherry"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-cherry"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField"
            data-checked="false"
            data-disabled="false"
            label="Cherry"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Cherry
          </span>
        </div>
      </div>
      <section
        aria-labelledby="react-aria-_r_2_"
        class="dataList__section"
        role="group"
      >
        <header
          class="dataList__sectionHeader dataList__sectionHeader--gap"
          id="react-aria-_r_2_"
          role="presentation"
        >
          <span
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
            id="react-aria-_r_2_"
            role="presentation"
          >
            Citrus Fruits
          </span>
        </header>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="orange"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-orange"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Orange"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Orange
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="lemon"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-lemon"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Lemon"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Lemon
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="lime"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-lime"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Lime"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Lime
            </span>
          </div>
        </div>
      </section>
      <section
        aria-labelledby="react-aria-_r_3_"
        class="dataList__section"
        role="group"
      >
        <header
          class="dataList__sectionHeader dataList__sectionHeader--gap"
          id="react-aria-_r_3_"
          role="presentation"
        >
          <span
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
            id="react-aria-_r_3_"
            role="presentation"
          >
            Berries
          </span>
        </header>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="strawberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-strawberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Strawberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Strawberry
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="blueberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-blueberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Blueberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Blueberry
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="raspberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-raspberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Raspberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Raspberry
            </span>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
`);
  });

  it('renders WithDefaultValue story', () => {
    const Story = composedStories.WithDefaultValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value"
    >
      Selected 2 options
    </span>
  </button>
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md error-field"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      Choose fruits...
    </span>
  </button>
</div>
`);
  });

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md warning-field"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      Choose fruits...
    </span>
  </button>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    disabled=""
    id="react-aria-_r_0_"
    role="combobox"
    type="button"
  >
    <span
      class="multiSelectField__value"
    >
      Selected 2 options
    </span>
  </button>
</div>
`);
  });

  it('renders DisabledValues story', () => {
    const Story = composedStories.DisabledValues;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value"
    >
      Selected 2 options
    </span>
  </button>
</div>
`);
  });

  it('renders HideSelectAll story', () => {
    const Story = composedStories.HideSelectAll;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      Choose fruits...
    </span>
  </button>
</div>
`);
  });

  it('renders EmptyOptions story', () => {
    const Story = composedStories.EmptyOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-autocomplete="none"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="Select fruits"
    class="multiSelectField md"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    role="combobox"
    tabindex="0"
    type="button"
  >
    <span
      class="multiSelectField__value multiSelectField__value--muted"
    >
      No options available...
    </span>
  </button>
</div>
`);
  });

  it('renders ContentModeWithSections story', () => {
    const Story = composedStories.ContentModeWithSections;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Select fruits"
    class="multiSelectField__content md"
    data-rac=""
    role="group"
  >
    <div
      class="dataList dataList--dense dataList--inset dataList--noGap"
    >
      <button
        aria-pressed="false"
        class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-react-aria-pressable="true"
        tabindex="0"
        type="button"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            class="checkboxField"
            data-checked="false"
            label="Select all"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Select all
          </span>
        </div>
      </button>
    </div>
    <div
      class="multiSelectField__divider"
    />
    <div
      aria-label="Select fruits"
      aria-multiselectable="true"
      class="dataList dataList--dense dataList--inset dataList--noGap"
      data-collection="react-aria-_r_0_"
      id="react-aria-_r_1_"
      role="listbox"
      tabindex="0"
    >
      <div
        aria-selected="true"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="apple"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-apple"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField checkboxField--checked"
            data-checked="true"
            data-disabled="false"
            label="Apple"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Apple
          </span>
        </div>
      </div>
      <div
        aria-selected="false"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="banana"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-banana"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField"
            data-checked="false"
            data-disabled="false"
            label="Banana"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Banana
          </span>
        </div>
      </div>
      <div
        aria-selected="false"
        class="dataList__item dataList__item--gap"
        data-collection="react-aria-_r_0_"
        data-disabled="false"
        data-focus-visible="false"
        data-focused="false"
        data-hovered="false"
        data-key="cherry"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_-option-cherry"
        role="option"
        tabindex="-1"
      >
        <div
          aria-hidden="true"
          class="dataList__itemCell"
        >
          <span
            aria-disabled="false"
            class="checkboxField"
            data-checked="false"
            data-disabled="false"
            label="Cherry"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Cherry
          </span>
        </div>
      </div>
      <section
        aria-labelledby="react-aria-_r_2_"
        class="dataList__section"
        role="group"
      >
        <header
          class="dataList__sectionHeader dataList__sectionHeader--gap"
          id="react-aria-_r_2_"
          role="presentation"
        >
          <span
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
            id="react-aria-_r_2_"
            role="presentation"
          >
            Citrus Fruits
          </span>
        </header>
        <div
          aria-selected="true"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="orange"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-orange"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField checkboxField--checked"
              data-checked="true"
              data-disabled="false"
              label="Orange"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Orange
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="lemon"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-lemon"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Lemon"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Lemon
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="lime"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-lime"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Lime"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Lime
            </span>
          </div>
        </div>
      </section>
      <section
        aria-labelledby="react-aria-_r_3_"
        class="dataList__section"
        role="group"
      >
        <header
          class="dataList__sectionHeader dataList__sectionHeader--gap"
          id="react-aria-_r_3_"
          role="presentation"
        >
          <span
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
            id="react-aria-_r_3_"
            role="presentation"
          >
            Berries
          </span>
        </header>
        <div
          aria-selected="true"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="strawberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-strawberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField checkboxField--checked"
              data-checked="true"
              data-disabled="false"
              label="Strawberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Strawberry
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="blueberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-blueberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Blueberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Blueberry
            </span>
          </div>
        </div>
        <div
          aria-selected="false"
          class="dataList__item dataList__item--gap"
          data-collection="react-aria-_r_0_"
          data-disabled="false"
          data-focus-visible="false"
          data-focused="false"
          data-hovered="false"
          data-key="raspberry"
          data-react-aria-pressable="true"
          id="react-aria-_r_1_-option-raspberry"
          role="option"
          tabindex="-1"
        >
          <div
            aria-hidden="true"
            class="dataList__itemCell"
          >
            <span
              aria-disabled="false"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              label="Raspberry"
            />
          </div>
          <div
            class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
          >
            <span
              class="typography typography__bodyCopyM typography--left"
            >
              Raspberry
            </span>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
`);
  });
});