@elliemae/ds-form-layout-autocomplete 3.16.0-next.2 → 3.16.0-next.21

package/dist/cjs/parts/A11yFocusedOption.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -33,8 +37,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
-var import_AutocompleteCTX = __toESM(require("../AutocompleteCTX"));
-var import_listHelper = require("../utils/listHelper");
+var import_AutocompleteCTX = __toESM(require("../AutocompleteCTX.js"));
+var import_listHelper = require("../utils/listHelper.js");
 const isSeparator = (el) => el?.type === "separator";
 const StyledA11ySelectedValues = import_ds_system.styled.span`
   width: 1px;
@@ -46,14 +50,14 @@ const A11yFocusedOption = () => {
   const {
     props: { options },
     focusOptionIdx,
-    showPopover
+    isShowingPopover
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   return (0, import_react.useMemo)(() => {
     const selectabledOptions = (0, import_listHelper.getSelectableOptions)(options);
     const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);
     const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledA11ySelectedValues, { "aria-live": "polite", children: !isSeparator(focusOption) && showPopover && focusOption && `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledA11ySelectedValues, { "aria-live": "polite", children: !isSeparator(focusOption) && isShowingPopover && focusOption && `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}
            ` });
-  }, [options, showPopover, focusOptionIdx]);
+  }, [options, isShowingPopover, focusOptionIdx]);
 };
 //# sourceMappingURL=A11yFocusedOption.js.map

package/dist/cjs/parts/A11yFocusedOption.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/A11yFocusedOption.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport AutocompleteContext from '../AutocompleteCTX';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nexport const isSeparator = (el: DSAutocompleteT.OptionTypes | undefined): el is DSAutocompleteT.ItemSeparatorOptions =>\n  el?.type === 'separator';\n\nexport const StyledA11ySelectedValues = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { options },\n    focusOptionIdx,\n    showPopover,\n  } = useContext(AutocompleteContext);\n\n  return useMemo(() => {\n    const selectabledOptions = getSelectableOptions(options);\n    const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n    const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n    return (\n      <StyledA11ySelectedValues aria-live=\"polite\">\n        {!isSeparator(focusOption) &&\n          showPopover &&\n          focusOption &&\n          `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}\n           `}\n      </StyledA11ySelectedValues>\n    );\n  }, [options, showPopover, focusOptionIdx]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA2C;AAC3C,uBAAuB;AACvB,6BAAgC;AAChC,wBAAqC;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,aAAO,sBAAQ,MAAM;AACnB,UAAM,yBAAqB,wCAAqB,OAAO;AACvD,UAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,YAAY,MAAM,KAAK,OAAO,SAAS,cAAc;AACnG,UAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,WACE,4CAAC,4BAAyB,aAAU,UACjC,WAAC,YAAY,WAAW,KACvB,eACA,eACA,UAAU,YAAY,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAAA,cAEjG;AAAA,EAEJ,GAAG,CAAC,SAAS,aAAa,cAAc,CAAC;AAC3C;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport AutocompleteContext from '../AutocompleteCTX.js';\nimport { getSelectableOptions } from '../utils/listHelper.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nexport const isSeparator = (el: DSAutocompleteT.OptionTypes | undefined): el is DSAutocompleteT.ItemSeparatorOptions =>\n  el?.type === 'separator';\n\nexport const StyledA11ySelectedValues = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { options },\n    focusOptionIdx,\n    isShowingPopover,\n  } = useContext(AutocompleteContext);\n\n  return useMemo(() => {\n    const selectabledOptions = getSelectableOptions(options);\n    const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n    const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n    return (\n      <StyledA11ySelectedValues aria-live=\"polite\">\n        {!isSeparator(focusOption) &&\n          isShowingPopover &&\n          focusOption &&\n          `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}\n           `}\n      </StyledA11ySelectedValues>\n    );\n  }, [options, isShowingPopover, focusOptionIdx]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA2C;AAC3C,uBAAuB;AACvB,6BAAgC;AAChC,wBAAqC;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,aAAO,sBAAQ,MAAM;AACnB,UAAM,yBAAqB,wCAAqB,OAAO;AACvD,UAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,YAAY,MAAM,KAAK,OAAO,SAAS,cAAc;AACnG,UAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,WACE,4CAAC,4BAAyB,aAAU,UACjC,WAAC,YAAY,WAAW,KACvB,oBACA,eACA,UAAU,YAAY,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAAA,cAEjG;AAAA,EAEJ,GAAG,CAAC,SAAS,kBAAkB,cAAc,CAAC;AAChD;",
   "names": ["AutocompleteContext"]
 }

package/dist/cjs/parts/container/Container.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,37 +35,36 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
-var import_styled = require("./styled");
-var import_menu_list = require("../menu-list");
-var import_useKeyboardNavigation = require("./useKeyboardNavigation");
-var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
-var import_A11yFocusedOption = require("../A11yFocusedOption");
+var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
+var import_styled = require("./styled.js");
+var import_menu_list = require("../menu-list/index.js");
+var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
+var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
+var import_A11yFocusedOption = require("../A11yFocusedOption.js");
 const Container = () => {
   const {
     props: { id, startPlacementPreference, children, filter, placementOrderPreference },
-    showPopover,
+    isShowingPopover,
     setReferenceElement,
-    setShowPopover,
-    focusOptionIdx,
+    setUserJustSelectedAnOption,
+    setUserTypedSomething,
+    setUserIsNavigatingWithArrows,
+    setForceClosePopover,
+    autoCompleteId,
     referenceElement
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
-  (0, import_react.useEffect)(() => {
-    const closePopper = () => {
-      setShowPopover(false);
-    };
-    window.addEventListener("blur", closePopper);
-    return () => {
-      window.removeEventListener("blur", closePopper);
-    };
-  }, [setShowPopover]);
   const handleCloseMenu = (0, import_react.useCallback)(() => {
-    setShowPopover(false);
-  }, [setShowPopover]);
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
   const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const input = import_react.default.Children.only(children);
-  const childrenWithProps = import_react.default.isValidElement(input) ? import_react.default.cloneElement(input, { "aria-activedescendant": focusOptionIdx }) : input;
   const idList = (0, import_react.useMemo)(() => `${id ? `${id}-` : ""}listbox`, [id]);
+  const onFocusPopoverStatusSync = (0, import_react.useCallback)(() => {
+    setForceClosePopover(false);
+    setUserJustSelectedAnOption(false);
+    setUserTypedSomething(false);
+    setUserIsNavigatingWithArrows(false);
+  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yFocusedOption.A11yFocusedOption, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -71,21 +74,22 @@ const Container = () => {
         ref: setReferenceElement,
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-controls": "autocomplete-listbox",
-        "aria-expanded": showPopover,
+        "aria-controls": `menu-list-${autoCompleteId}`,
+        "aria-expanded": isShowingPopover,
         "aria-haspopup": "listbox",
         "aria-owns": idList,
         onKeyDown: onInputKeyDown,
+        onFocus: onFocusPopoverStatusSync,
         "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
         children: [
-          childrenWithProps,
+          input,
           filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ds_popperjs.DSPopperJS,
             {
               customOffset: [0, 5],
               closeContextMenu: handleCloseMenu,
               referenceElement,
-              showPopover,
+              showPopover: isShowingPopover,
               startPlacementPreference,
               placementOrderPreference,
               withoutPortal: true,

package/dist/cjs/parts/container/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { MenuList } from '../menu-list';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nexport const Container = (): JSX.Element => {\n  const {\n    props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n    showPopover,\n    setReferenceElement,\n    setShowPopover,\n    focusOptionIdx,\n    referenceElement,\n  } = useContext(AutocompleteContext);\n\n  useEffect(() => {\n    const closePopper = () => {\n      setShowPopover(false);\n    };\n    window.addEventListener('blur', closePopper);\n\n    return () => {\n      window.removeEventListener('blur', closePopper);\n    };\n  }, [setShowPopover]);\n\n  const handleCloseMenu = useCallback(() => {\n    setShowPopover(false);\n  }, [setShowPopover]);\n\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = React.Children.only(children);\n\n  const childrenWithProps = React.isValidElement(input)\n    ? React.cloneElement(input, { 'aria-activedescendant': focusOptionIdx })\n    : input;\n\n  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n\n  return (\n    <>\n      <A11yFocusedOption />\n\n      <StyledContainer\n        id={id}\n        ref={setReferenceElement}\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-controls=\"autocomplete-listbox\"\n        aria-expanded={showPopover}\n        aria-haspopup=\"listbox\"\n        aria-owns={idList}\n        onKeyDown={onInputKeyDown}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n      >\n        {childrenWithProps}\n        {filter && (\n          <DSPopperJS\n            customOffset={[0, 5]}\n            closeContextMenu={handleCloseMenu}\n            referenceElement={referenceElement}\n            showPopover={showPopover}\n            startPlacementPreference={startPlacementPreference}\n            placementOrderPreference={placementOrderPreference}\n            withoutPortal\n            withoutArrow\n            withoutAnimation\n            zIndex={10}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </DSPopperJS>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CnB;AA5CJ,mBAAmE;AACnE,yBAA2B;AAC3B,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AACvC,+BAAkC;AAC3B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO,EAAE,IAAI,0BAA0B,UAAU,QAAQ,yBAAyB;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,8BAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,qBAAe,KAAK;AAAA,IACtB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,0BAAY,MAAM;AACxC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,aAAAC,QAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,oBAAoB,aAAAA,QAAM,eAAe,KAAK,IAChD,aAAAA,QAAM,aAAa,OAAO,EAAE,yBAAyB,eAAe,CAAC,IACrE;AAEJ,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,SACE,4EACE;AAAA,gDAAC,8CAAkB;AAAA,IAEnB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,qBAAkB;AAAA,QAClB,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAa,sDAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { A11yFocusedOption } from '../A11yFocusedOption.js';\nexport const Container = (): JSX.Element => {\n  const {\n    props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n    isShowingPopover,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    referenceElement,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = React.Children.only(children);\n\n  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n  return (\n    <>\n      <A11yFocusedOption />\n\n      <StyledContainer\n        id={id}\n        ref={setReferenceElement}\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-controls={`menu-list-${autoCompleteId}`}\n        aria-expanded={isShowingPopover}\n        aria-haspopup=\"listbox\"\n        aria-owns={idList}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n      >\n        {input}\n        {filter && (\n          <DSPopperJS\n            customOffset={[0, 5]}\n            closeContextMenu={handleCloseMenu}\n            referenceElement={referenceElement}\n            showPopover={isShowingPopover}\n            startPlacementPreference={startPlacementPreference}\n            placementOrderPreference={placementOrderPreference}\n            withoutPortal\n            withoutArrow\n            withoutAnimation\n            zIndex={10}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </DSPopperJS>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAvCJ,mBAAwD;AACxD,yBAA2B;AAC3B,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AACvC,+BAAkC;AAC3B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO,EAAE,IAAI,0BAA0B,UAAU,QAAQ,yBAAyB;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,aAAAC,QAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,4EACE;AAAA,gDAAC,8CAAkB;AAAA,IAEnB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,qBAAkB;AAAA,QAClB,iBAAe,aAAa;AAAA,QAC5B,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
   "names": ["AutocompleteContext", "React"]
 }

package/dist/cjs/parts/container/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,5 +32,5 @@ __export(container_exports, {
 });
 module.exports = __toCommonJS(container_exports);
 var React = __toESM(require("react"));
-var import_Container = require("./Container");
+var import_Container = require("./Container.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/parts/container/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { Container } from './Container';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;",
+  "sourcesContent": ["export { Container } from './Container.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;",
   "names": []
 }

package/dist/cjs/parts/container/styled.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/parts/container/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n  width: 100%;\n  height: 28px;\n  position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n  background: #fff;\n  overflow: auto;\n  position: relative;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/container/useKeyboardNavigation.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,14 +33,15 @@ __export(useKeyboardNavigation_exports, {
 module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
-var import_listHelper = require("../../utils/listHelper");
+var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
+var import_listHelper = require("../../utils/listHelper.js");
 const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
 const useKeyboardNavigation = () => {
   const {
     props: { onSelect, options },
-    setShowPopover,
-    showPopover,
+    trackUserInteractingViaKeyboard,
+    setForceClosePopover,
+    isShowingPopover,
     focusOptionIdx,
     setCurrentOption,
     scrollOptionIntoView
@@ -47,18 +52,16 @@ const useKeyboardNavigation = () => {
   );
   const onInputKeyDown = (0, import_react.useCallback)(
     (e) => {
-      if ((e.keyCode >= 48 && e.keyCode <= 90 || e.key === "Backspace") && !showPopover) {
-        setShowPopover(true);
-      } else if (e.key === "Tab")
-        setShowPopover(false);
-      if (e.key === "Enter" && showPopover) {
+      trackUserInteractingViaKeyboard(e);
+      if (e.key === "Tab" || e.key === "Escape")
+        setForceClosePopover(true);
+      if (e.key === "Enter" && isShowingPopover) {
         e.preventDefault();
         onSelect(currentItem?.label, e);
-        setShowPopover(false);
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (showPopover) {
+        if (isShowingPopover) {
           const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
@@ -66,25 +69,23 @@ const useKeyboardNavigation = () => {
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (showPopover) {
+        if (isShowingPopover) {
           const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
         }
       }
-      if (e.key === "Escape") {
-        setShowPopover(false);
-      }
     },
     [
-      currentItem?.label,
-      currentItemIndex,
+      trackUserInteractingViaKeyboard,
+      setForceClosePopover,
+      isShowingPopover,
       onSelect,
+      currentItem?.label,
       options,
-      scrollOptionIntoView,
+      currentItemIndex,
       setCurrentOption,
-      setShowPopover,
-      showPopover
+      scrollOptionIntoView
     ]
   );
   return { onInputKeyDown };

package/dist/cjs/parts/container/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { findInCircularList } from '../../utils/listHelper';\n\nconst isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { onSelect, options },\n    setShowPopover,\n    showPopover,\n    focusOptionIdx,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(AutocompleteContext);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find(\n    (item) => item.type === 'option' && item.dsId === focusOptionIdx,\n  ) as DSAutocompleteT.ItemOption;\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (((e.keyCode >= 48 && e.keyCode <= 90) || e.key === 'Backspace') && !showPopover) {\n        setShowPopover(true);\n      } else if (e.key === 'Tab') setShowPopover(false);\n\n      // =============================================================================\n      // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n      // =============================================================================\n      if (e.key === 'Enter' && showPopover) {\n        e.preventDefault();\n        onSelect(currentItem?.label, e);\n        setShowPopover(false);\n      }\n\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (showPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (showPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        setShowPopover(false);\n      }\n    },\n    [\n      currentItem?.label,\n      currentItemIndex,\n      onSelect,\n      options,\n      scrollOptionIntoView,\n      setCurrentOption,\n      setShowPopover,\n      showPopover,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AAExC,6BAAgC;AAChC,wBAAmC;AAEnC,MAAM,qBAAqB,CAAC,QAA8C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAE9G,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AAC/E,QAAM,cAAc,QAAQ;AAAA,IAC1B,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS;AAAA,EACpD;AAEA,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WAAM,EAAE,WAAW,MAAM,EAAE,WAAW,MAAO,EAAE,QAAQ,gBAAgB,CAAC,aAAa;AACnF,uBAAe,IAAI;AAAA,MACrB,WAAW,EAAE,QAAQ;AAAO,uBAAe,KAAK;AAKhD,UAAI,EAAE,QAAQ,WAAW,aAAa;AACpC,UAAE,eAAe;AACjB,iBAAS,aAAa,OAAO,CAAC;AAC9B,uBAAe,KAAK;AAAA,MACtB;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,aAAa;AACf,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,kBAAkB;AACtF,2BAAiB,QAAQ,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,eAAe,IAAI;AAAA,QAClD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,YAAI,aAAa;AACf,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,2BAAiB,QAAQ,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,eAAe,IAAI;AAAA,QAClD;AAAA,MACF;AAIA,UAAI,EAAE,QAAQ,UAAU;AACtB,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA;AAAA,MACE,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { findInCircularList } from '../../utils/listHelper.js';\n\nconst isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { onSelect, options },\n    trackUserInteractingViaKeyboard,\n    setForceClosePopover,\n    isShowingPopover,\n    focusOptionIdx,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(AutocompleteContext);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find(\n    (item) => item.type === 'option' && item.dsId === focusOptionIdx,\n  ) as DSAutocompleteT.ItemOption;\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // TRACK STATE OF POPOVER SHOWING OR NOT\n      // =============================================================================\n      trackUserInteractingViaKeyboard(e);\n\n      if (e.key === 'Tab' || e.key === 'Escape') setForceClosePopover(true);\n\n      // =============================================================================\n      // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n      // =============================================================================\n      if (e.key === 'Enter' && isShowingPopover) {\n        e.preventDefault();\n        onSelect(currentItem?.label, e);\n      }\n\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n    },\n    [\n      trackUserInteractingViaKeyboard,\n      setForceClosePopover,\n      isShowingPopover,\n      onSelect,\n      currentItem?.label,\n      options,\n      currentItemIndex,\n      setCurrentOption,\n      scrollOptionIntoView,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AAExC,6BAAgC;AAChC,wBAAmC;AAEnC,MAAM,qBAAqB,CAAC,QAA8C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAE9G,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AAC/E,QAAM,cAAc,QAAQ;AAAA,IAC1B,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS;AAAA,EACpD;AAEA,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AAIL,sCAAgC,CAAC;AAEjC,UAAI,EAAE,QAAQ,SAAS,EAAE,QAAQ;AAAU,6BAAqB,IAAI;AAKpE,UAAI,EAAE,QAAQ,WAAW,kBAAkB;AACzC,UAAE,eAAe;AACjB,iBAAS,aAAa,OAAO,CAAC;AAAA,MAChC;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,kBAAkB;AACtF,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": ["AutocompleteContext"]
 }

package/dist/cjs/parts/menu-list/MenuList.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -30,17 +34,18 @@ module.exports = __toCommonJS(MenuList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styled = require("./styled");
-var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
-var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
-var import_useItemRenderer = require("./useItemRenderer");
+var import_styled = require("./styled.js");
+var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
+var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
+var import_useItemRenderer = require("./useItemRenderer.js");
 const MenuList = () => {
   const {
     props: { options, id },
     referenceElement,
     inputRef,
     listRef,
-    showPopover,
+    autoCompleteId,
+    isShowingPopover,
     virtualListHelpers: { totalSize }
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
@@ -48,26 +53,21 @@ const MenuList = () => {
     inputRef.current?.focus();
   }, [inputRef]);
   const idList = (0, import_react.useMemo)(() => `${id ? `${id}-` : ""}listbox`, [id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledListWrapper,
+  const preventMouseDown = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, id: idList, children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, ref: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledList,
     {
-      tabIndex: -1,
-      onMouseDown: (e) => e.preventDefault(),
-      minWidth: referenceElement?.offsetWidth,
-      id: idList,
       role: "listbox",
-      children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, ref: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledList,
-        {
-          tabIndex: -1,
-          "aria-expanded": showPopover,
-          onFocus: handleOnFocus,
-          "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
-          style: { height: totalSize, margin: "8px 0px" },
-          children: ItemRenderer
-        }
-      ) })
+      id: `menu-list-${autoCompleteId}`,
+      "aria-label": "autocomplete option lists",
+      "aria-expanded": isShowingPopover,
+      onFocus: handleOnFocus,
+      "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
+      style: { height: totalSize, margin: "8px 0px" },
+      children: ItemRenderer
     }
-  );
+  ) }) });
 };
 //# sourceMappingURL=MenuList.js.map

package/dist/cjs/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { useItemRenderer } from './useItemRenderer';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options, id },\n    referenceElement,\n    inputRef,\n    listRef,\n    showPopover,\n    virtualListHelpers: { totalSize },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n  return (\n    <StyledListWrapper\n      tabIndex={-1}\n      onMouseDown={(e) => e.preventDefault()}\n      minWidth={referenceElement?.offsetWidth}\n      id={idList}\n      role=\"listbox\"\n    >\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} ref={listRef}>\n          <StyledList\n            tabIndex={-1}\n            aria-expanded={showPopover}\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCb;AAlCV,mBAAwD;AACxD,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAGzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AAErC,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC,UAAU,kBAAkB;AAAA,MAC5B,IAAI;AAAA,MACJ,MAAK;AAAA,MAEJ,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,KAAK,SAC3C;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,iBAAe;AAAA,UACf,SAAS;AAAA,UACT,eAAa,sDAAuB;AAAA,UACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,UAE7C;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options, id },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    isShowingPopover,\n    virtualListHelpers: { totalSize },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth} id={idList}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} ref={listRef}>\n          <StyledList\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            aria-expanded={isShowingPopover}\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCb;AAhCV,mBAAwD;AACxD,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AAErC,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAAa,IAAI,QAC5F,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,KAAK,SAC3C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI,aAAa;AAAA,MAGjB,cAAW;AAAA,MACX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,EACH,GACF,GAEJ;AAEJ;",
   "names": ["AutocompleteContext"]
 }

package/dist/cjs/parts/menu-list/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,5 +32,5 @@ __export(menu_list_exports, {
 });
 module.exports = __toCommonJS(menu_list_exports);
 var React = __toESM(require("react"));
-var import_MenuList = require("./MenuList");
+var import_MenuList = require("./MenuList.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/parts/menu-list/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { MenuList } from './MenuList';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAyB;",
+  "sourcesContent": ["export { MenuList } from './MenuList.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAyB;",
   "names": []
 }

package/dist/cjs/parts/menu-list/styled.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/parts/menu-list/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledListWrapper = styled.div<{ minWidth?: number | string }>`\n  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : '100%')};\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  maxHeight: number;\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => `${!maxHeight ? '400' : maxHeight}px`};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,eAAe;AAAA;AAGxD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,eAAe;AAAA;AAGxD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ;AAAA;",
   "names": []
 }

package/dist/cjs/parts/menu-list/useItemRenderer.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,24 +35,26 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
-var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
-var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
+var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
+var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
 const useItemRenderer = () => {
   const {
     props: { options, onSelect },
     inputRef,
-    setShowPopover,
+    setUserTypedSomething,
+    setUserJustSelectedAnOption,
     focusOptionIdx,
     virtualListHelpers
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const handleClick = (0, import_react.useCallback)(
     (option, e) => {
       onSelect(option.label, e);
-      setShowPopover(false);
+      setUserJustSelectedAnOption(true);
+      setUserTypedSomething(false);
       e.stopPropagation();
       e.preventDefault();
     },
-    [onSelect, setShowPopover]
+    [onSelect, setUserTypedSomething, setUserJustSelectedAnOption]
   );
   return (0, import_react.useMemo)(() => {
     if (virtualListHelpers) {

package/dist/cjs/parts/menu-list/useItemRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-menu-items';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { options, onSelect },\n    inputRef,\n    setShowPopover,\n    focusOptionIdx,\n    virtualListHelpers,\n  } = useContext(AutocompleteContext);\n\n  const handleClick = useCallback(\n    (option: DSAutocompleteT.ItemOption, e: React.ChangeEvent<HTMLInputElement>) => {\n      onSelect(option.label, e);\n      setShowPopover(false);\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onSelect, setShowPopover],\n  );\n\n  return useMemo(() => {\n    if (virtualListHelpers) {\n      return virtualListHelpers.virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n        };\n        if (option.type === 'section') {\n          return <Section label={option.label} {...generalProps} />;\n        }\n        if (option.type === 'option') {\n          return (\n            <SingleMenuItem\n              {...generalProps}\n              value={option.value}\n              label={option.label}\n              dataTestid={AutocompleteDataTestid.OPTION}\n              disabled={option.disabled}\n              onClick={(e: React.ChangeEvent<HTMLInputElement>) => handleClick(option, e)}\n              isActive={option.dsId === focusOptionIdx}\n            />\n          );\n        }\n        return <></>;\n      });\n    }\n    return null;\n  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCN;AAnCjB,mBAAwD;AACxD,2BAAwC;AACxC,6BAAgC;AAChC,qCAAuC;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;AAAA,IAClB,CAAC,QAAoC,MAA2C;AAC9E,eAAS,OAAO,OAAO,CAAC;AACxB,qBAAe,KAAK;AACpB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM;AAC7B,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA,QAClB;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,4CAAC,gCAAQ,OAAO,OAAO,OAAQ,GAAG,cAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,sDAAuB;AAAA,cACnC,UAAU,OAAO;AAAA,cACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ,CAAC;AAAA,cAC1E,UAAU,OAAO,SAAS;AAAA;AAAA,UAC5B;AAAA,QAEJ;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
+  "sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-menu-items';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { options, onSelect },\n    inputRef,\n    setUserTypedSomething,\n    setUserJustSelectedAnOption,\n    focusOptionIdx,\n    virtualListHelpers,\n  } = useContext(AutocompleteContext);\n\n  const handleClick = useCallback(\n    (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => {\n      onSelect(option.label, e);\n      setUserJustSelectedAnOption(true);\n      setUserTypedSomething(false);\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onSelect, setUserTypedSomething, setUserJustSelectedAnOption],\n  );\n\n  return useMemo(() => {\n    if (virtualListHelpers) {\n      return virtualListHelpers.virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n        };\n        if (option.type === 'section') {\n          return <Section label={option.label} {...generalProps} />;\n        }\n        if (option.type === 'option') {\n          return (\n            <SingleMenuItem\n              {...generalProps}\n              value={option.value}\n              label={option.label}\n              dataTestid={AutocompleteDataTestid.OPTION}\n              disabled={option.disabled}\n              onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n              isActive={option.dsId === focusOptionIdx}\n            />\n          );\n        }\n        return <></>;\n      });\n    }\n    return null;\n  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCN;AArCjB,mBAAwD;AACxD,2BAAwC;AACxC,6BAAgC;AAChC,qCAAuC;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;AAAA,IAClB,CAAC,QAAoC,MAA0C;AAC7E,eAAS,OAAO,OAAO,CAAC;AACxB,kCAA4B,IAAI;AAChC,4BAAsB,KAAK;AAC3B,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,uBAAuB,2BAA2B;AAAA,EAC/D;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM,KAAK;AAClC,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA,QAClB;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,4CAAC,gCAAQ,OAAO,OAAO,OAAQ,GAAG,cAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,sDAAuB;AAAA,cACnC,UAAU,OAAO;AAAA,cACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,cACzE,UAAU,OAAO,SAAS;AAAA;AAAA,UAC5B;AAAA,QAEJ;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
   "names": ["AutocompleteContext"]
 }