@popsure/dirty-swan 0.65.1 → 0.66.1

package/dist/esm/components/searchableDropdown/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/searchableDropdown/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { SearchableDropdown, SearchableDropdownProps } from '.';\n\nconst story = {\n  title: 'JSX/SearchableDropdown',\n  component: SearchableDropdown,\n  argTypes: {\n    options: {\n      description: 'Array of options to display',\n      table: {\n        type: {\n          summary: '{ id: string; label: string; icon?: ReactNode }[]',\n        },\n      },\n    },\n    value: {\n      description: 'The currently selected option id',\n    },\n    onChange: {\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    searchable: {\n      description: 'Whether the dropdown includes a search input',\n      control: 'boolean',\n    },\n    placeholder: {\n      description: 'Placeholder text for the search input',\n      control: 'text',\n    },\n    triggerPlaceholder: {\n      description: 'Placeholder text shown on the trigger when no value is selected',\n      control: 'text',\n    },\n    noResultsText: {\n      description: 'Text shown when no options match the search',\n      control: 'text',\n    },\n    groupName: {\n      description: 'Name attribute for the radio group',\n      control: 'text',\n    },\n    dropUp: {\n      description: 'Whether the dropdown opens upward',\n      control: 'boolean',\n    },\n    condensed: {\n      description: 'Whether to use a compact trigger (icon only)',\n      control: 'boolean',\n    },\n    bordered: {\n      description: 'Whether to show a border on the trigger',\n      control: 'boolean',\n    },\n    showChevron: {\n      description: 'Whether to show a chevron icon on the trigger',\n      control: 'boolean',\n    },\n  },\n  args: {\n    options: [\n      { id: 'de', label: 'Germany' },\n      { id: 'fr', label: 'France' },\n      { id: 'es', label: 'Spain' },\n      { id: 'it', label: 'Italy' },\n      { id: 'pt', label: 'Portugal' },\n    ],\n    value: 'de',\n    searchable: false,\n    placeholder: 'Search',\n    triggerPlaceholder: 'Select a country',\n    noResultsText: 'No results found',\n    groupName: 'country',\n    dropUp: false,\n    condensed: false,\n    bordered: false,\n    showChevron: false,\n  },\n  parameters: {\n    componentSubtitle:\n      'A dropdown component that supports searchable options with keyboard navigation.',\n  },\n};\n\nexport const Default = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState(args.value);\n\n    return (\n      <div style={{ width: 300 }}>\n        <SearchableDropdown\n          {...args}\n          value={selected}\n          onChange={(val) => {\n            args.onChange(val);\n            setSelected(val);\n          }}\n        />\n      </div>\n    );\n  },\n\n  name: 'Default',\n};\n\nexport const Searchable = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState(args.value);\n\n    const options = [\n      { id: 'de', label: 'Germany' },\n      { id: 'fr', label: 'France' },\n      { id: 'es', label: 'Spain' },\n      { id: 'it', label: 'Italy' },\n      { id: 'pt', label: 'Portugal' },\n      { id: 'nl', label: 'Netherlands' },\n      { id: 'be', label: 'Belgium' },\n      { id: 'at', label: 'Austria' },\n      { id: 'ch', label: 'Switzerland' },\n      { id: 'pl', label: 'Poland' },\n    ];\n\n    return (\n      <div style={{ width: 300 }}>\n        <SearchableDropdown\n          {...args}\n          options={options}\n          searchable\n          value={selected}\n          onChange={(val) => {\n            args.onChange(val);\n            setSelected(val);\n          }}\n        />\n      </div>\n    );\n  },\n\n  name: 'Searchable',\n};\n\nexport const WithIcons = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState('de');\n\n    const options = [\n      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },\n      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },\n      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },\n      { id: 'it', label: 'Italy', icon: <span>🇮🇹</span> },\n      { id: 'pt', label: 'Portugal', icon: <span>🇵🇹</span> },\n    ];\n\n    return (\n      <div style={{ width: 300 }}>\n        <SearchableDropdown\n          {...args}\n          options={options}\n          value={selected}\n          onChange={(val) => {\n            args.onChange(val);\n            setSelected(val);\n          }}\n        />\n      </div>\n    );\n  },\n\n  name: 'With Icons',\n};\n\nexport const Condensed = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState('de');\n\n    const options = [\n      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },\n      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },\n      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },\n    ];\n\n    return (\n      <SearchableDropdown\n        {...args}\n        options={options}\n        condensed\n        bordered\n        value={selected}\n        onChange={(val) => {\n          args.onChange(val);\n          setSelected(val);\n        }}\n      />\n    );\n  },\n\n  name: 'Condensed',\n};\n\nexport const WithChevron = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState('de');\n\n    const options = [\n      { id: 'de', label: 'Germany' },\n      { id: 'fr', label: 'France' },\n      { id: 'es', label: 'Spain' },\n    ];\n\n    return (\n      <div style={{ width: 300 }}>\n        <SearchableDropdown\n          {...args}\n          options={options}\n          showChevron\n          bordered\n          value={selected}\n          onChange={(val) => {\n            args.onChange(val);\n            setSelected(val);\n          }}\n        />\n      </div>\n    );\n  },\n\n  name: 'With Chevron',\n};\n\nexport const Disabled = {\n  render: (args: SearchableDropdownProps) => {\n    return (\n      <div style={{ width: 300 }}>\n        <SearchableDropdown\n          {...args}\n          options={[\n            { id: 'de', label: 'Germany' },\n            { id: 'fr', label: 'France' },\n            { id: 'es', label: 'Spain' },\n          ]}\n          disabled\n          bordered\n          showChevron\n          value=\"de\"\n          onChange={args.onChange}\n        />\n      </div>\n    );\n  },\n\n  name: 'Disabled',\n};\n\nexport const DropUp = {\n  render: (args: SearchableDropdownProps) => {\n    const [selected, setSelected] = useState('de');\n\n    const options = [\n      { id: 'de', label: 'Germany' },\n      { id: 'fr', label: 'France' },\n      { id: 'es', label: 'Spain' },\n    ];\n\n    return (\n      <div style={{ width: 300, marginTop: 300 }}>\n        <SearchableDropdown\n          {...args}\n          options={options}\n          dropUp\n          searchable\n          value={selected}\n          onChange={(val) => {\n            args.onChange(val);\n            setSelected(val);\n          }}\n        />\n      </div>\n    );\n  },\n\n  name: 'Drop Up',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/searchableDropdown/index.test.js

@@ -0,0 +1,607 @@
+import { _ as __awaiter, a as __generator, b as __assign } from '../../tslib.es6-CVlKGIvp.js';
+import { jsx } from 'react/jsx-runtime';
+import { s as screen, c as customRender } from '../../customRender-DzdqZxUd.js';
+import { S as SearchableDropdown } from '../../index-QeP_xz9v.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+import 'react';
+import 'react-dom';
+import 'util';
+import 'react-dom/test-utils';
+import '../../index-DLQEsiym.js';
+import '../input/index.js';
+import '../../index-CNcEE5dn.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../icon/icons/ChevronDown.js';
+import '../icon/IconWrapper/IconWrapper.js';
+import '../../useOnClickOutside-B5hujnpp.js';
+
+var options = [
+    { id: 'de', label: 'Germany' },
+    { id: 'fr', label: 'France' },
+    { id: 'es', label: 'Spain' },
+    { id: 'it', label: 'Italy' },
+    { id: 'pt', label: 'Portugal' },
+];
+var defaultProps = {
+    options: options,
+    value: 'de',
+    onChange: jest.fn(),
+    groupName: 'country',
+};
+var setup = function (props) {
+    if (props === void 0) { props = {}; }
+    var onChange = jest.fn();
+    var utils = customRender(jsx(SearchableDropdown, __assign({}, defaultProps, { onChange: onChange }, props)));
+    return __assign(__assign({}, utils), { onChange: onChange });
+};
+describe('SearchableDropdown', function () {
+    describe('rendering', function () {
+        it('should render the selected option label in the trigger', function () {
+            setup();
+            expect(screen.getByRole('button')).toHaveTextContent('Germany');
+        });
+        it('should render triggerPlaceholder when value is null', function () {
+            setup({ value: null, triggerPlaceholder: 'Select a country' });
+            expect(screen.getByRole('button')).toHaveTextContent('Select a country');
+        });
+        it('should not render the dropdown when closed', function () {
+            setup();
+            expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+        });
+        it('should render all options when opened', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        options.forEach(function (option) {
+                            expect(screen.getByLabelText(option.label)).toBeInTheDocument();
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render icons in options', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({
+                            options: [
+                                { id: 'de', label: 'Germany', icon: jsx("span", { "data-testid": "icon-de", children: "flag" }) },
+                            ],
+                        }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getAllByTestId('icon-de')).toHaveLength(2); // trigger + option
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render the selected option icon in the trigger', function () {
+            setup({
+                options: [
+                    { id: 'de', label: 'Germany', icon: jsx("span", { "data-testid": "trigger-icon", children: "flag" }) },
+                ],
+                value: 'de',
+            });
+            expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        });
+        it('should show no results text when search has no matches', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true, noResultsText: 'Nothing here' }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByPlaceholderText('Search'), 'zzzzz')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByText('Nothing here')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('open / close', function () {
+        it('should open the dropdown on trigger click', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should close the dropdown on second trigger click', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, trigger;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        trigger = screen.getByRole('button');
+                        return [4 /*yield*/, user.click(trigger)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(trigger)];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should close the dropdown on Escape', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should close the dropdown when clicking outside', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(document.body)];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('selection', function () {
+        it('should call onChange when an option is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, user, onChange;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup(), user = _a.user, onChange = _a.onChange;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('France'))];
+                    case 2:
+                        _b.sent();
+                        expect(onChange).toHaveBeenCalledWith('fr');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should close the dropdown after selecting an option', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('France'))];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should mark the current value as checked', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ value: 'fr' }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'France' })).toBeChecked();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('search', function () {
+        it('should filter options based on search term', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByPlaceholderText('Search'), 'ger')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByLabelText('Germany')).toBeInTheDocument();
+                        expect(screen.queryByLabelText('France')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should prioritize options that start with the search term', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, radios;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({
+                            searchable: true,
+                            options: [
+                                { id: 'al', label: 'Algeria' },
+                                { id: 'po', label: 'Portugal' },
+                                { id: 'pl', label: 'Poland' },
+                            ],
+                        }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByPlaceholderText('Search'), 'po')];
+                    case 2:
+                        _a.sent();
+                        radios = screen.getAllByRole('radio');
+                        expect(radios[0]).toHaveAttribute('value', 'po');
+                        expect(radios[1]).toHaveAttribute('value', 'pl');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should clear the search term when dropdown closes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByPlaceholderText('Search'), 'ger')];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 4:
+                        _a.sent();
+                        expect(screen.getByPlaceholderText('Search')).toHaveValue('');
+                        expect(screen.getAllByRole('radio')).toHaveLength(options.length);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should select the first filtered option on Enter in search input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, user, onChange;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ searchable: true }), user = _a.user, onChange = _a.onChange;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, user.type(screen.getByPlaceholderText('Search'), 'fra')];
+                    case 2:
+                        _b.sent();
+                        return [4 /*yield*/, user.keyboard('{Enter}')];
+                    case 3:
+                        _b.sent();
+                        expect(onChange).toHaveBeenCalledWith('fr');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should use custom placeholder text', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true, placeholder: 'Find a country' }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByPlaceholderText('Find a country')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('keyboard navigation', function () {
+        it('should move focus to the first option on ArrowDown from search input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should move focus to the last option on ArrowUp from search input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowUp}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Portugal' })).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should navigate between options with ArrowDown and ArrowUp', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ searchable: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}')];
+                    case 3:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'France' })).toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowUp}')];
+                    case 4:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not go past the last option on ArrowDown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({
+                            searchable: true,
+                            options: [
+                                { id: 'a', label: 'Alpha' },
+                                { id: 'b', label: 'Beta' },
+                            ],
+                        }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}{ArrowDown}{ArrowDown}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Beta' })).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not go past the first option on ArrowUp', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({
+                            searchable: true,
+                            options: [
+                                { id: 'a', label: 'Alpha' },
+                                { id: 'b', label: 'Beta' },
+                            ],
+                        }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}{ArrowUp}{ArrowUp}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('radio', { name: 'Alpha' })).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should select option and close on Enter key', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, user, onChange;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ searchable: true }), user = _a.user, onChange = _a.onChange;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}{ArrowDown}{Enter}')];
+                    case 2:
+                        _b.sent();
+                        expect(onChange).toHaveBeenCalledWith('fr');
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should select option and close on Space key', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, user, onChange;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ searchable: true }), user = _a.user, onChange = _a.onChange;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}{ArrowDown} ')];
+                    case 2:
+                        _b.sent();
+                        expect(onChange).toHaveBeenCalledWith('fr');
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('disabled', function () {
+        it('should not open the dropdown when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ disabled: true }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should have the disabled attribute on the trigger', function () {
+            setup({ disabled: true });
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+    });
+    describe('accessibility', function () {
+        it('should have aria-expanded false when closed', function () {
+            setup();
+            expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        });
+        it('should have aria-expanded true when open', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should have aria-haspopup on the trigger', function () {
+            setup();
+            expect(screen.getByRole('button')).toHaveAttribute('aria-haspopup', 'listbox');
+        });
+        it('should have aria-controls linking to the dropdown when open', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, trigger, controlsId;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        trigger = screen.getByRole('button');
+                        controlsId = trigger.getAttribute('aria-controls');
+                        expect(controlsId).toBeTruthy();
+                        expect(document.getElementById(controlsId)).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should have a radiogroup with aria-label', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ groupName: 'test-group' }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'test-group');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should return focus to the trigger after selection', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('France'))];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('button')).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should return focus to the trigger after pressing Escape', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup().user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('button')).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('groupName', function () {
+        it('should auto-generate a groupName when not provided', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, radios;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setup({ groupName: undefined }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label');
+                        radios = screen.getAllByRole('radio');
+                        expect(radios[0]).toHaveAttribute('name');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=index.test.js.map