@instructure/ui-options 10.12.1-snapshot-7 → 10.12.1-snapshot-9

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.12.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-7) (2025-03-06)
+## [10.12.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-9) (2025-03-06)
 
 **Note:** Version bump only for package @instructure/ui-options
 

package/es/Options/Item/__new-tests__/Item.test.js

@@ -0,0 +1,177 @@
+var _Item, _Item2, _Item3, _Item4, _Item5, _Item6, _Item7, _Item8, _Item9, _Item10, _Item11, _Item12;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IconCheckSolid } from '@instructure/ui-icons';
+import { Options } from '../../index';
+import { Item } from '../index';
+describe('<Item />', () => {
+  it('should render', async () => {
+    const _render = render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, null))),
+      container = _render.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    expect(optionItem).toBeInTheDocument();
+    const optionItemContainer = optionItem.querySelector('[class$="-optionItem__container"]');
+    expect(optionItemContainer).toBeInTheDocument();
+  });
+  it('should not render as a list item by default', async () => {
+    const _render2 = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null, "Hello World"))),
+      container = _render2.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    expect(item).toBeInTheDocument();
+    expect(item.tagName).not.toBe('LI');
+  });
+  it('should render designated tag if `as` prop is specified', async () => {
+    const _render3 = render(_Item3 || (_Item3 = /*#__PURE__*/React.createElement(Item, {
+        as: "li"
+      }, "Hello World"))),
+      container = _render3.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    expect(item).toBeInTheDocument();
+    expect(item.tagName).toBe('LI');
+  });
+  it('should render children properly', async () => {
+    const _render4 = render(_Item4 || (_Item4 = /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement("span", {
+        id: "customContent"
+      }, "Hello World")))),
+      container = _render4.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const customContent = item.querySelector('#customContent');
+    expect(customContent).toHaveTextContent('Hello World');
+  });
+  it('should render role attributes appropriately when given a role', async () => {
+    const _render5 = render(_Item5 || (_Item5 = /*#__PURE__*/React.createElement(Item, {
+        role: "option"
+      }, "Hello World"))),
+      container = _render5.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const child = screen.getByRole('option');
+    expect(item).toHaveAttribute('role', 'none');
+    expect(child).toBeInTheDocument();
+  });
+  it('should render description properly', async () => {
+    const _render6 = render(_Item6 || (_Item6 = /*#__PURE__*/React.createElement(Item, {
+        description: "Some text as description"
+      }, /*#__PURE__*/React.createElement("span", {
+        id: "customContent"
+      }, "Hello World")))),
+      container = _render6.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const customContent = item.querySelector('#customContent');
+    const description = item.querySelector('[class$="__description"]');
+    expect(customContent).toHaveTextContent('Hello World');
+    expect(description).toHaveTextContent('Some text as description');
+  });
+  it('should render role attributes for description', async () => {
+    render(_Item7 || (_Item7 = /*#__PURE__*/React.createElement(Item, {
+      description: "Some text as description",
+      descriptionRole: "comment"
+    }, "Hello World")));
+    const description = screen.getByRole('comment');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent('Some text as description');
+  });
+  it('should pass props through to label', async () => {
+    const _render7 = render(_Item8 || (_Item8 = /*#__PURE__*/React.createElement(Item, {
+        role: "option",
+        tabIndex: -1,
+        "data-custom-attr": "true"
+      }, "Hello World"))),
+      container = _render7.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    const optionItemContainer = optionItem.querySelector('[class$="-optionItem__container"]');
+    expect(optionItem).toHaveRole('none');
+    expect(optionItemContainer).toHaveRole('option');
+    expect(optionItemContainer).toHaveAttribute('tabindex', '-1');
+    expect(optionItemContainer).toHaveAttribute('data-custom-attr', 'true');
+  });
+  it('should pass event handlers through to label', async () => {
+    const onClick = vi.fn();
+    const _render8 = render(/*#__PURE__*/React.createElement(Item, {
+        onClick: onClick
+      }, "Hello World")),
+      container = _render8.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    const optionItemContainer = container.querySelector('[class$="-optionItem__container"]');
+    userEvent.click(optionItem);
+    await waitFor(() => {
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    userEvent.click(optionItemContainer);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should render content before label', async () => {
+    const _render9 = render(_Item9 || (_Item9 = /*#__PURE__*/React.createElement(Item, {
+        renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+      }, "Hello World"))),
+      container = _render9.container;
+    const content = container.querySelector('[class$=-optionItem__content--before]');
+    expect(content).toBeInTheDocument();
+    const icon = content.querySelector('svg[name="IconCheck"]');
+    expect(icon).toBeInTheDocument();
+  });
+  it('should render content after label', async () => {
+    const _render10 = render(_Item10 || (_Item10 = /*#__PURE__*/React.createElement(Item, {
+        renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+      }, "Hello World"))),
+      container = _render10.container;
+    const content = container.querySelector('[class$=-optionItem__content--after]');
+    expect(content).toBeInTheDocument();
+    const icon = content.querySelector('svg[name="IconCheck"]');
+    expect(icon).toBeInTheDocument();
+  });
+  it('should render nested lists', async () => {
+    const _render11 = render(_Item11 || (_Item11 = /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Options, {
+        as: "ul",
+        renderLabel: 'Nested list'
+      }, /*#__PURE__*/React.createElement(Item, null, "Sub item"))))),
+      container = _render11.container;
+    const item = container.querySelector('span[class$="-optionItem"]');
+    expect(item).toBeInTheDocument();
+    const options = item.querySelector('div[class$="-options"]');
+    expect(options).toBeInTheDocument();
+    const nestedList = options.querySelector('ul');
+    const nestedItem = options.querySelector('li[class$="-optionItem"]');
+    expect(nestedList).toBeInTheDocument();
+    expect(nestedItem).toBeInTheDocument();
+    expect(nestedItem).toHaveTextContent('Sub item');
+  });
+  it('should render as link with href prop', async () => {
+    const _render12 = render(_Item12 || (_Item12 = /*#__PURE__*/React.createElement(Item, {
+        href: "/helloWorld"
+      }, "Hello World"))),
+      container = _render12.container;
+    const link = container.querySelector('[class$="-optionItem__container"]');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/helloWorld');
+    expect(link === null || link === void 0 ? void 0 : link.tagName).toBe('A');
+  });
+});

package/es/Options/__new-tests__/Options.test.js

@@ -0,0 +1,155 @@
+var _Options, _Options2, _Options$Item, _Options$Item2, _Options3, _Options4, _Options5, _Options6, _Options7, _Options8, _Options9;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import '@testing-library/jest-dom';
+import { Options } from '../index';
+import OptionsExamples from '../__examples__/Options.examples';
+describe('<Options />', () => {
+  it('should render', async () => {
+    const _render = render(_Options || (_Options = /*#__PURE__*/React.createElement(Options, null))),
+      container = _render.container;
+    const options = container.querySelector('div[class$="-options"]');
+    expect(options).toBeInTheDocument();
+  });
+  it('should render items', async () => {
+    render(_Options2 || (_Options2 = /*#__PURE__*/React.createElement(Options, null, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toBe(2);
+  });
+  it('should provide elementRef', async () => {
+    const elementRef = vi.fn();
+    render(/*#__PURE__*/React.createElement(Options, {
+      elementRef: elementRef,
+      as: "ul"
+    }, _Options$Item || (_Options$Item = /*#__PURE__*/React.createElement(Options.Item, null, "Option one")), _Options$Item2 || (_Options$Item2 = /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+    const optionList = screen.getByRole('list');
+    expect(elementRef).toHaveBeenCalledWith(optionList);
+  });
+  it('should render designated tag if `as` prop is specified', async () => {
+    render(_Options3 || (_Options3 = /*#__PURE__*/React.createElement(Options, {
+      as: "ol"
+    }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+    const optionList = screen.getByRole('list');
+    expect(optionList.tagName).toBe('OL');
+  });
+  it('should render children as listitems when appropriate', async () => {
+    const _render2 = render(_Options4 || (_Options4 = /*#__PURE__*/React.createElement(Options, {
+        as: "ul"
+      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+      container = _render2.container;
+    const list = container.querySelector('ul');
+    const items = container.querySelectorAll('li');
+    expect(list).toBeInTheDocument();
+    expect(items.length).toBe(2);
+  });
+  it('should pass props through to list', async () => {
+    const _render3 = render(_Options5 || (_Options5 = /*#__PURE__*/React.createElement(Options, {
+        as: "ul",
+        role: "listbox",
+        "data-custom-attr": "true"
+      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+      container = _render3.container;
+    const options = container.querySelector('[class$="-options__list"]');
+    expect(options).toHaveRole('listbox');
+    expect(options).toHaveAttribute('data-custom-attr', 'true');
+  });
+  it('should render root with appropriate role', async () => {
+    const _render4 = render(_Options6 || (_Options6 = /*#__PURE__*/React.createElement(Options, {
+        role: "listbox"
+      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+      container = _render4.container;
+    const options = container.querySelector('div[class$="-options"]');
+    expect(options).toHaveAttribute('role', 'presentation');
+  });
+  it('should allow null children', async () => {
+    render(_Options7 || (_Options7 = /*#__PURE__*/React.createElement(Options, null)));
+    const options = screen.getByRole('list');
+    expect(options).toBeInTheDocument();
+  });
+  it('should render nested options properly', async () => {
+    const _render5 = render(_Options8 || (_Options8 = /*#__PURE__*/React.createElement(Options, {
+        "data-testId": "outer-list"
+      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one "), /*#__PURE__*/React.createElement(Options.Item, null, "Option two "), /*#__PURE__*/React.createElement(Options, {
+        renderLabel: 'Nested list',
+        "data-testId": "nested-list"
+      }, /*#__PURE__*/React.createElement(Options.Item, null, "Nested option one "), /*#__PURE__*/React.createElement(Options.Item, null, "Nested option two "))))),
+      container = _render5.container;
+    const allLists = container.querySelectorAll('[class$="-options__list"]');
+    const allItems = container.querySelectorAll('[class$="-optionItem"]');
+    expect(allLists.length).toBe(2);
+    expect(allItems.length).toBe(5);
+    const outerList = screen.getByTestId('outer-list');
+    expect(outerList).toHaveTextContent('Option one Option two');
+    const nestedLabel = outerList.querySelector('[class$=-options__label]');
+    expect(nestedLabel).toBeInTheDocument();
+    expect(nestedLabel).toHaveTextContent('Nested list');
+    const nestedList = screen.getByTestId('nested-list');
+    expect(nestedList).toHaveTextContent('Nested option one Nested option two');
+    const nestedListItems = nestedList.querySelectorAll('[class$=-optionItem]');
+    expect(nestedListItems.length).toBe(2);
+    expect(outerList).toContainElement(nestedLabel);
+    expect(outerList).toContainElement(nestedList);
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Options, OptionsExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render6 = render(component.content),
+          container = _render6.container;
+
+        // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
+        // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
+        // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
+        const axeCheck = await runAxeCheck(container, {
+          ignores: ['aria-required-children']
+        });
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+  describe('for a11y', () => {
+    it('should be accessible with links', async () => {
+      const _render7 = render(_Options9 || (_Options9 = /*#__PURE__*/React.createElement(Options, null, /*#__PURE__*/React.createElement(Options.Item, null, "Option"), /*#__PURE__*/React.createElement(Options.Item, {
+          href: "/"
+        }, "Option link")))),
+        container = _render7.container;
+
+      // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
+      // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
+      // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
+      const axeCheck = await runAxeCheck(container, {
+        ignores: ['aria-required-children']
+      });
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

package/lib/Options/Item/__new-tests__/Item.test.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _uiIcons = require("@instructure/ui-icons");
+var _index = require("../../index");
+var _index2 = require("../index");
+var _Item, _Item2, _Item3, _Item4, _Item5, _Item6, _Item7, _Item8, _Item9, _Item10, _Item11, _Item12;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Item />', () => {
+  it('should render', async () => {
+    const _render = (0, _react2.render)(_Item || (_Item = /*#__PURE__*/_react.default.createElement(_index2.Item, null))),
+      container = _render.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    (0, _vitest.expect)(optionItem).toBeInTheDocument();
+    const optionItemContainer = optionItem.querySelector('[class$="-optionItem__container"]');
+    (0, _vitest.expect)(optionItemContainer).toBeInTheDocument();
+  });
+  it('should not render as a list item by default', async () => {
+    const _render2 = (0, _react2.render)(_Item2 || (_Item2 = /*#__PURE__*/_react.default.createElement(_index2.Item, null, "Hello World"))),
+      container = _render2.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    (0, _vitest.expect)(item).toBeInTheDocument();
+    (0, _vitest.expect)(item.tagName).not.toBe('LI');
+  });
+  it('should render designated tag if `as` prop is specified', async () => {
+    const _render3 = (0, _react2.render)(_Item3 || (_Item3 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        as: "li"
+      }, "Hello World"))),
+      container = _render3.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    (0, _vitest.expect)(item).toBeInTheDocument();
+    (0, _vitest.expect)(item.tagName).toBe('LI');
+  });
+  it('should render children properly', async () => {
+    const _render4 = (0, _react2.render)(_Item4 || (_Item4 = /*#__PURE__*/_react.default.createElement(_index2.Item, null, /*#__PURE__*/_react.default.createElement("span", {
+        id: "customContent"
+      }, "Hello World")))),
+      container = _render4.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const customContent = item.querySelector('#customContent');
+    (0, _vitest.expect)(customContent).toHaveTextContent('Hello World');
+  });
+  it('should render role attributes appropriately when given a role', async () => {
+    const _render5 = (0, _react2.render)(_Item5 || (_Item5 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        role: "option"
+      }, "Hello World"))),
+      container = _render5.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const child = _react2.screen.getByRole('option');
+    (0, _vitest.expect)(item).toHaveAttribute('role', 'none');
+    (0, _vitest.expect)(child).toBeInTheDocument();
+  });
+  it('should render description properly', async () => {
+    const _render6 = (0, _react2.render)(_Item6 || (_Item6 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        description: "Some text as description"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        id: "customContent"
+      }, "Hello World")))),
+      container = _render6.container;
+    const item = container.querySelector('[class$="-optionItem"]');
+    const customContent = item.querySelector('#customContent');
+    const description = item.querySelector('[class$="__description"]');
+    (0, _vitest.expect)(customContent).toHaveTextContent('Hello World');
+    (0, _vitest.expect)(description).toHaveTextContent('Some text as description');
+  });
+  it('should render role attributes for description', async () => {
+    (0, _react2.render)(_Item7 || (_Item7 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+      description: "Some text as description",
+      descriptionRole: "comment"
+    }, "Hello World")));
+    const description = _react2.screen.getByRole('comment');
+    (0, _vitest.expect)(description).toBeInTheDocument();
+    (0, _vitest.expect)(description).toHaveTextContent('Some text as description');
+  });
+  it('should pass props through to label', async () => {
+    const _render7 = (0, _react2.render)(_Item8 || (_Item8 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        role: "option",
+        tabIndex: -1,
+        "data-custom-attr": "true"
+      }, "Hello World"))),
+      container = _render7.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    const optionItemContainer = optionItem.querySelector('[class$="-optionItem__container"]');
+    (0, _vitest.expect)(optionItem).toHaveRole('none');
+    (0, _vitest.expect)(optionItemContainer).toHaveRole('option');
+    (0, _vitest.expect)(optionItemContainer).toHaveAttribute('tabindex', '-1');
+    (0, _vitest.expect)(optionItemContainer).toHaveAttribute('data-custom-attr', 'true');
+  });
+  it('should pass event handlers through to label', async () => {
+    const onClick = _vitest.vi.fn();
+    const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index2.Item, {
+        onClick: onClick
+      }, "Hello World")),
+      container = _render8.container;
+    const optionItem = container.querySelector('[class$="-optionItem"]');
+    const optionItemContainer = container.querySelector('[class$="-optionItem__container"]');
+    _userEvent.default.click(optionItem);
+    await (0, _react2.waitFor)(() => {
+      (0, _vitest.expect)(onClick).not.toHaveBeenCalled();
+    });
+    _userEvent.default.click(optionItemContainer);
+    await (0, _react2.waitFor)(() => {
+      (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should render content before label', async () => {
+    const _render9 = (0, _react2.render)(_Item9 || (_Item9 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null)
+      }, "Hello World"))),
+      container = _render9.container;
+    const content = container.querySelector('[class$=-optionItem__content--before]');
+    (0, _vitest.expect)(content).toBeInTheDocument();
+    const icon = content.querySelector('svg[name="IconCheck"]');
+    (0, _vitest.expect)(icon).toBeInTheDocument();
+  });
+  it('should render content after label', async () => {
+    const _render10 = (0, _react2.render)(_Item10 || (_Item10 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        renderAfterLabel: /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null)
+      }, "Hello World"))),
+      container = _render10.container;
+    const content = container.querySelector('[class$=-optionItem__content--after]');
+    (0, _vitest.expect)(content).toBeInTheDocument();
+    const icon = content.querySelector('svg[name="IconCheck"]');
+    (0, _vitest.expect)(icon).toBeInTheDocument();
+  });
+  it('should render nested lists', async () => {
+    const _render11 = (0, _react2.render)(_Item11 || (_Item11 = /*#__PURE__*/_react.default.createElement(_index2.Item, null, /*#__PURE__*/_react.default.createElement(_index.Options, {
+        as: "ul",
+        renderLabel: 'Nested list'
+      }, /*#__PURE__*/_react.default.createElement(_index2.Item, null, "Sub item"))))),
+      container = _render11.container;
+    const item = container.querySelector('span[class$="-optionItem"]');
+    (0, _vitest.expect)(item).toBeInTheDocument();
+    const options = item.querySelector('div[class$="-options"]');
+    (0, _vitest.expect)(options).toBeInTheDocument();
+    const nestedList = options.querySelector('ul');
+    const nestedItem = options.querySelector('li[class$="-optionItem"]');
+    (0, _vitest.expect)(nestedList).toBeInTheDocument();
+    (0, _vitest.expect)(nestedItem).toBeInTheDocument();
+    (0, _vitest.expect)(nestedItem).toHaveTextContent('Sub item');
+  });
+  it('should render as link with href prop', async () => {
+    const _render12 = (0, _react2.render)(_Item12 || (_Item12 = /*#__PURE__*/_react.default.createElement(_index2.Item, {
+        href: "/helloWorld"
+      }, "Hello World"))),
+      container = _render12.container;
+    const link = container.querySelector('[class$="-optionItem__container"]');
+    (0, _vitest.expect)(link).toBeInTheDocument();
+    (0, _vitest.expect)(link).toHaveAttribute('href', '/helloWorld');
+    (0, _vitest.expect)(link === null || link === void 0 ? void 0 : link.tagName).toBe('A');
+  });
+});