@oracle/oraclejet-preact 14.0.6 → 14.1.0

package/cjs/UNSAFE_SelectSingle/__tests__/SelectSingle.spec.js

@@ -0,0 +1,528 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var preact = require('@testing-library/preact');
+var chai = require('chai');
+var PRIVATE_SelectCommon = require('../../PRIVATE_SelectCommon.js');
+var SelectSingle = require('../../SelectSingle-5ba193e7.js');
+var UNSAFE_Environment = require('../../UNSAFE_Environment.js');
+var utils_UNSAFE_matchTranslationBundle = require('../../utils/UNSAFE_matchTranslationBundle.js');
+
+require('../../UNSAFE_HighlightText.js');
+require('../../HighlightText-5bdc12cb.js');
+require('preact');
+require('../../PRIVATE_List.js');
+require('../../List-63716a22.js');
+require('../../utils/UNSAFE_classNames.js');
+require('../../classNames-55bceee6.js');
+require('../../utils/UNSAFE_mergeProps.js');
+require('../../utils/UNSAFE_keys.js');
+require('../../LoadMoreCollection-eaa4ed6f.js');
+require('../../PRIVATE_Collection.js');
+require('../../Collection-2647e7ee.js');
+require('../../hooks/UNSAFE_useViewportIntersect.js');
+require('../../PRIVATE_VirtualizedCollection.js');
+require('../../VirtualizedCollection-19e514e1.js');
+require('../../utils/UNSAFE_arrayUtils.js');
+require('../../hooks/UNSAFE_useTabbableMode.js');
+require('../../UNSAFE_FocusTrap.js');
+require('../../FocusTrap-8af50913.js');
+require('preact/compat');
+require('../../utils/PRIVATE_tabbableUtils.js');
+require('../../_curry1-f1ebd742.js');
+require('../../_curry2-588f7ddc.js');
+require('../../_curry3-bc6e6a86.js');
+require('../../hooks/UNSAFE_useId.js');
+require('../../hooks/PRIVATE_useSelection.js');
+require('../../hooks/PRIVATE_useCurrentKey.js');
+require('../../hooks/PRIVATE_useCollectionFocusRing.js');
+require('../../hooks/PRIVATE_useTabbableModeSet.js');
+require('../../hooks/PRIVATE_useItemAction.js');
+require('../../utils/PRIVATE_collectionUtils.js');
+require('../../UNSAFE_Skeleton.js');
+require('../../Skeleton-02ffb696.js');
+require('../../tslib.es6-6f60dd09.js');
+require('../../utils/UNSAFE_interpolations/dimensions.js');
+require('../../utils/UNSAFE_size.js');
+require('../../utils/UNSAFE_mergeInterpolations.js');
+require('../../_has-2eedb7e0.js');
+require('../../utils/UNSAFE_interpolations/borders.js');
+require('../../UNSAFE_Flex.js');
+require('../../Flex-b113edd5.js');
+require('../../utils/UNSAFE_interpolations/boxalignment.js');
+require('../../keys-326d80d5.js');
+require('../../utils/UNSAFE_interpolations/flexbox.js');
+require('../../flexbox-6deddb70.js');
+require('../../utils/UNSAFE_interpolations/flexitem.js');
+require('../../flexitem-0c1e9a72.js');
+require('../../UNSAFE_Selector.js');
+require('../../index-3651c0e7.js');
+require('../../index-d5067e50.js');
+require('../../UNSAFE_Icon.js');
+require('../../Icon-c44e10c9.js');
+require('../../hooks/UNSAFE_useTooltip.js');
+require('../../UNSAFE_Floating.js');
+require('../../Floating-48167355.js');
+require('../../index-55dfe40c.js');
+require('../../hooks/UNSAFE_useUser.js');
+require('../../UNSAFE_Layer.js');
+require('../../utils/PRIVATE_floatingUtils.js');
+require('../../utils/PRIVATE_refUtils.js');
+require('../../hooks/UNSAFE_useOutsideClick.js');
+require('../../hooks/UNSAFE_useHover.js');
+require('../../hooks/UNSAFE_useToggle.js');
+require('../../hooks/UNSAFE_useFocus.js');
+require('../../hooks/UNSAFE_useTouch.js');
+require('../../hooks/UNSAFE_useAnimation.js');
+require('../../useAnimation-576ef8bc.js');
+require('../../hooks/UNSAFE_useTheme.js');
+require('../../hooks/UNSAFE_useTranslationBundle.js');
+require('../../utils/UNSAFE_logger.js');
+require('../../hooks/UNSAFE_usePress.js');
+require('../../hooks/UNSAFE_useFormFieldContext.js');
+require('../../UNSAFE_UserAssistance.js');
+require('../../InlineHelpSource-c498a09a.js');
+require('../../UNSAFE_ComponentMessage.js');
+require('../../ComponentMessage-eea92e6b.js');
+require('../../PRIVATE_Message.js');
+require('../../utils/PRIVATE_timer.js');
+require('../../MessageCloseButton-66757186.js');
+require('../../UNSAFE_Button.js');
+require('../../Button-07d97191.js');
+require('../../UNSAFE_BaseButton.js');
+require('../../BaseButton-9bfe304e.js');
+require('../../hooks/UNSAFE_useActive.js');
+require('../../utils/PRIVATE_clientHints.js');
+require('../../clientHints-e821b5ee.js');
+require('../../MessageDetail-9ab2fec2.js');
+require('../../MessageFormattingUtils-fac29bd4.js');
+require('../../utils/UNSAFE_getLocale.js');
+require('../../utils/UNSAFE_stringUtils.js');
+require('../../stringUtils-dad38408.js');
+require('../../Message.types-d5b1820f.js');
+require('../../MessageStartIcon-5cdb8fbe.js');
+require('../../MessageSummary-ea4ba9b8.js');
+require('../../MessageTimestamp-cb7998db.js');
+require('../../MessageUtils-c82ad817.js');
+require('../../utils/UNSAFE_soundUtils.js');
+require('../../MessagesManager-88e137d7.js');
+require('../../PRIVATE_TransitionGroup.js');
+require('../../hooks/UNSAFE_useMessagesContext.js');
+require('../../UNSAFE_HiddenAccessible.js');
+require('../../HiddenAccessible-42dab376.js');
+require('../../ComponentMessageContainer-7880a1b9.js');
+require('../../hooks/UNSAFE_useFormContext.js');
+require('../../hooks/UNSAFE_useFocusableTextField.js');
+require('../../hooks/UNSAFE_useFocusWithin.js');
+require('../../useFocusWithin-145e8682.js');
+require('../../hooks/UNSAFE_useLoadingIndicatorTimer.js');
+require('../../hooks/UNSAFE_useTimer.js');
+require('../../hooks/UNSAFE_useTextField.js');
+require('../../UNSAFE_Label.js');
+require('../../UNSAFE_LiveRegion.js');
+require('../../UNSAFE_TextField.js');
+require('../../ReadonlyTextFieldInput-ec13a273.js');
+require('../../utils/UNSAFE_interpolations/text.js');
+require('../../FormControlUtils-c960c51d.js');
+require('../../UNSAFE_LabelValueLayout.js');
+require('../../TextFieldInput-c5f861ba.js');
+require('../../hooks/UNSAFE_useTextFieldInputHandlers.js');
+require('../../hooks/UNSAFE_useDebounce.js');
+
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+afterEach(preact.cleanup);
+const valueItem = { key: 'CH', data: { value: 'CH', label: 'Chrome' }, metadata: { key: 'CH' } };
+const valueItem2 = { key: 'OP', data: { value: 'OP', label: 'Opera' }, metadata: { key: 'OP' } };
+const noOp = () => { };
+const items = [
+    { value: 'IE', label: 'Internet Explorer' },
+    { value: 'FF', label: 'Firefox' },
+    { value: 'CH', label: 'Chrome' },
+    { value: 'OP', label: 'Opera' },
+    { value: 'SA', label: 'Safari' }
+];
+const keyAttr = 'value';
+function DemoSelectSingle({ assistiveText, data = items, helpSourceLink, helpSourceText, isDisabled, isReadonly, isRequired, label, labelEdge, messages, placeholder, textAlign, userAssistanceDensity, valueItem }) {
+    var _a, _b;
+    const [myValue, setMyValue] = hooks.useState(valueItem === null || valueItem === void 0 ? void 0 : valueItem.key);
+    const [myValueItem, setMyValueItem] = hooks.useState(valueItem);
+    const handleCommit = hooks.useCallback((detail) => {
+        if (myValue != detail.value) {
+            setMyValue(detail.value);
+            const item = data === null || data === void 0 ? void 0 : data.find((element) => element[keyAttr] === detail.value);
+            const newValueItem = item === undefined
+                ? undefined
+                : {
+                    key: item[keyAttr],
+                    data: item,
+                    metadata: { key: item[keyAttr] }
+                };
+            setMyValueItem(newValueItem);
+        }
+    }, [myValue]);
+    const dataMapFunc = (value) => {
+        return { data: value, metadata: { key: value[keyAttr] } };
+    };
+    const dataMetadataRef = hooks.useRef(data === null || data === void 0 ? void 0 : data.map(dataMapFunc));
+    const [dataState, setDataState] = hooks.useState({
+        offset: 0,
+        totalSize: (_b = (_a = dataMetadataRef.current) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+        sizePrecision: 'exact',
+        data: dataMetadataRef.current.slice(0, dataMetadataRef.current.length)
+    });
+    const [filter, setFilter] = hooks.useState('');
+    const handleFilter = hooks.useCallback(({ searchText }) => {
+        setFilter(searchText !== null && searchText !== void 0 ? searchText : '');
+    }, []);
+    const delay = 0;
+    // this effect should only be run when filter has changed
+    const firstRender = hooks.useRef(true);
+    hooks.useEffect(() => {
+        if (firstRender.current) {
+            firstRender.current = false;
+            return;
+        }
+        // put ListView into loading state
+        setDataState(null);
+        setTimeout(() => {
+            const dataToShow = filter != null && filter.trim().length > 0
+                ? data === null || data === void 0 ? void 0 : data.filter((value) => {
+                    return value.label.toLowerCase().indexOf(filter.toLowerCase()) > -1;
+                })
+                : data;
+            dataMetadataRef.current = dataToShow === null || dataToShow === void 0 ? void 0 : dataToShow.map(dataMapFunc);
+            // update DataState to show the first 25 results
+            loadRange({ offset: 0, count: 25 });
+        }, delay);
+    }, [filter]);
+    const loadRange = (range) => {
+        var _a, _b;
+        const startIndex = range.offset;
+        const endIndex = startIndex + range.count;
+        const newDataState = {
+            offset: startIndex,
+            totalSize: (_b = (_a = dataMetadataRef.current) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+            sizePrecision: 'exact',
+            data: dataMetadataRef.current.slice(startIndex, endIndex)
+        };
+        setDataState(newDataState);
+    };
+    return (
+    // <SelectSingle<Key, Data>
+    jsxRuntime.jsx(SelectSingle.SelectSingle, { assistiveText: assistiveText, data: dataState, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, itemText: "label", label: label, labelEdge: labelEdge, messages: messages, onCommit: handleCommit, onFilter: handleFilter, onLoadRange: loadRange, placeholder: placeholder, textAlign: textAlign, userAssistanceDensity: userAssistanceDensity, valueItem: myValueItem }));
+}
+async function getEnvironmentContext() {
+    const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+    const { default: translations } = await __variableDynamicImportRuntime0__(`../../resources/nls/${locale}/bundle.ts`);
+    return {
+        translations: { '@oracle/oraclejet-preact': translations }
+    };
+}
+// function TestSelectSingleComp(props: any) {
+//   const [commitDetail, setCommitDetail] = useState<any>();
+//   const handleCommit = (detail: any) => {
+//     setCommitDetail(detail);
+//   };
+//   const commitDetailValue = commitDetail?.value !== undefined ? commitDetail.value : '';
+//   return (
+//     <div>
+//       <SelectSingle {...props} onCommit={handleCommit} />
+//       <div>{commitDetailValue}</div>
+//     </div>
+//   );
+// }
+describe('Test SelectSingle component:', () => {
+    let env;
+    beforeEach(async function () {
+        env = env !== null && env !== void 0 ? env : (await getEnvironmentContext());
+        // this was copied from ListView.spec.tsx, and appears to be needed for ListView
+        if (!window.IntersectionObserver) {
+            // IntersectionObserver isn't available in test environment
+            const MockIntersectionObserver = jest.fn();
+            MockIntersectionObserver.mockReturnValue({
+                observe: () => null,
+                unobserve: () => null,
+                disconnect: () => null
+            });
+            Object.defineProperty(global, 'IntersectionObserver', {
+                writable: true,
+                configurable: true,
+                value: MockIntersectionObserver
+            });
+        }
+    });
+    it('initialize with valueItem', async function () {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(SelectSingle.SelectSingle, { itemText: "label", label: "Enabled", labelEdge: "inside", valueItem: valueItem, onCommit: noOp }) })));
+        const input = await content.findByDisplayValue('Chrome');
+        chai.expect(input, 'initial selected valueItem text shown').not.null;
+    });
+    it('programmatically change valueItem', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(SelectSingle.SelectSingle, { itemText: "label", label: "Enabled", labelEdge: "inside", valueItem: valItem, onCommit: noOp }) })));
+        const content = preact.render(getComp(valueItem));
+        let input = await content.findByDisplayValue('Chrome');
+        chai.expect(input, 'initial selected valueItem text shown').not.null;
+        content.rerender(getComp(valueItem2));
+        input = await content.findByDisplayValue('Opera');
+        chai.expect(input, 'changed selected valueItem text shown').not.null;
+    });
+    it('shows moves UserAssistance correctly on focus', async () => {
+        const { container, queryByText } = preact.render(jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(SelectSingle.SelectSingle, { itemText: "label", label: "Enabled", labelEdge: "inside", assistiveText: "help instruction", onCommit: noOp }) })), jsxRuntime.jsx("button", {})] }));
+        const inputElement = container.querySelector('input');
+        const buttonElement = container.querySelector('button');
+        // check for no help.instruction initially
+        chai.expect(queryByText('help instruction'), 'help instruction is not shown initially').be.null;
+        // focus input
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+        preact.waitFor(() => chai.expect(queryByText('help instruction'), 'help instruction is shown on focus').be.not.null);
+        // focus outside
+        buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+        preact.waitFor(() => chai.expect(queryByText('help instruction'), 'help instruction is not shown on blur').be.null);
+    });
+    it('open dropdown on dropdown arrow click', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const container = content.container;
+        const dropdownArrow = container.querySelector('span[aria-hidden="true"][tabindex="-1"]');
+        chai.expect(dropdownArrow, 'dropdown arrow element found').not.null;
+        if (dropdownArrow) {
+            preact.fireEvent.click(dropdownArrow);
+        }
+        const dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+    });
+    it('close dropdown on dropdown arrow click', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const container = content.container;
+        const dropdownArrow = container.querySelector('span[aria-hidden="true"][tabindex="-1"]');
+        chai.expect(dropdownArrow, 'dropdown arrow element found').not.null;
+        if (dropdownArrow) {
+            preact.fireEvent.click(dropdownArrow);
+        }
+        let dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+        if (dropdownArrow) {
+            preact.fireEvent.click(dropdownArrow);
+        }
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        dropdown = content.queryByText('Firefox');
+        chai.expect(dropdown, 'dropdown closed').null;
+    });
+    it('open dropdown on input mousedown', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        const dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+    });
+    it('open dropdown on down arrow keyup', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.type(input, '{ArrowDown}', { skipClick: true });
+        preact.fireEvent.keyUp(input, { code: PRIVATE_SelectCommon.KEYS.DOWN });
+        const dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+    });
+    it('open dropdown on up arrow keyup', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.keyboard('[ArrowUp]');
+        preact.fireEvent.keyUp(input, { code: PRIVATE_SelectCommon.KEYS.UP });
+        const dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+    });
+    it('close dropdown on Esc keydown', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        let dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.ESC });
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        dropdown = content.queryByText('Firefox');
+        chai.expect(dropdown, 'dropdown closed').null;
+    });
+    it('close dropdown on Tab keydown in input', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        let dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.TAB });
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        dropdown = content.queryByText('Firefox');
+        chai.expect(dropdown, 'dropdown closed').null;
+    });
+    it('close dropdown on Esc keydown in dropdown', async function () {
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        let dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+        preact.fireEvent.keyDown(dropdown, { code: PRIVATE_SelectCommon.KEYS.ESC });
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        dropdown = content.queryByText('Firefox');
+        chai.expect(dropdown, 'dropdown closed').null;
+    });
+    it('select item by clicking in dropdown', async function () {
+        const getComp = () => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside" }) })));
+        const content = preact.render(getComp());
+        let input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        let listItem = await content.findByText('Firefox');
+        chai.expect(listItem, 'dropdown open').not.null;
+        preact.fireEvent.click(listItem);
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        listItem = content.queryByText('Firefox');
+        chai.expect(listItem, 'dropdown closed').null;
+        input = await content.findByDisplayValue('Firefox');
+        chai.expect(input, 'display value updated').not.null;
+    });
+    // The below tests are for:
+    // JET-53183 - core pack compat: stop propagation of handled events
+    // SelectSingle stops keydown events from propagating when it has handled them so that a parent
+    // collection component won't also handle them.
+    it('JET-53183 - propagation not stopped for Enter keydown in input', async function () {
+        let keyDownReceived = false;
+        const handleKeyDown = () => {
+            keyDownReceived = true;
+        };
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx("div", Object.assign({ onKeyDown: handleKeyDown }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.ENTER });
+        chai.expect(keyDownReceived, 'propagation not stopped').to.be.true;
+    });
+    it('JET-53183 - propagation not stopped for Esc keydown in input when dropdown closed', async function () {
+        let keyDownReceived = false;
+        const handleKeyDown = () => {
+            keyDownReceived = true;
+        };
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx("div", Object.assign({ onKeyDown: handleKeyDown }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.ESC });
+        chai.expect(keyDownReceived, 'propagation not stopped').to.be.true;
+    });
+    it('JET-53183 - propagation stopped for Esc keydown in input when dropdown open', async function () {
+        let keyDownReceived = false;
+        const handleKeyDown = () => {
+            keyDownReceived = true;
+        };
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx("div", Object.assign({ onKeyDown: handleKeyDown }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        // userEvent.click(input);
+        preact.fireEvent.mouseDown(input);
+        let dropdown = await content.findByText('Firefox');
+        chai.expect(dropdown, 'dropdown open').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.ESC });
+        // await waitForElementToBeRemoved(() => content.queryByText('Firefox'));
+        dropdown = content.queryByText('Firefox');
+        chai.expect(dropdown, 'dropdown closed').null;
+        chai.expect(keyDownReceived, 'propagation stopped').to.be.false;
+    });
+    it('JET-53183 - propagation not stopped for Shift+Tab keydown in input', async function () {
+        let keyDownReceived = false;
+        const handleKeyDown = () => {
+            keyDownReceived = true;
+        };
+        const getComp = (valItem) => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx("div", Object.assign({ onKeyDown: handleKeyDown }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside", valueItem: valItem }) })) })));
+        const content = preact.render(getComp(valueItem));
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.TAB, shiftKey: true });
+        chai.expect(keyDownReceived, 'propagation not stopped').to.be.true;
+    });
+    it('JET-53183 - propagation not stopped for Tab keydown in input', async function () {
+        let keyDownReceived = false;
+        const handleKeyDown = () => {
+            keyDownReceived = true;
+        };
+        const getComp = () => (jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx("div", Object.assign({ onKeyDown: handleKeyDown }, { children: jsxRuntime.jsx(DemoSelectSingle, { data: items, label: "Enabled", labelEdge: "inside" }) })) })));
+        const content = preact.render(getComp());
+        const input = await content.findByRole('combobox');
+        chai.expect(input, 'input element found').not.null;
+        preact.fireEvent.keyDown(input, { code: PRIVATE_SelectCommon.KEYS.TAB });
+        chai.expect(keyDownReceived, 'propagation not stopped').to.be.true;
+    });
+    afterEach(preact.cleanup);
+});
+/*  */
+//# sourceMappingURL=SelectSingle.spec.js.map