@elliemae/ds-form-layout-autocomplete 3.16.0-next.7 → 3.16.0-next.8

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';\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    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,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,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,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,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

@@ -40,7 +40,7 @@ const MenuList = () => {
     referenceElement,
     inputRef,
     listRef,
-    showPopover,
+    isShowingPopover,
     virtualListHelpers: { totalSize }
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
@@ -48,11 +48,14 @@ const MenuList = () => {
     inputRef.current?.focus();
   }, [inputRef]);
   const idList = (0, import_react.useMemo)(() => `${id ? `${id}-` : ""}listbox`, [id]);
+  const preventMouseDown = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledListWrapper,
     {
       tabIndex: -1,
-      onMouseDown: (e) => e.preventDefault(),
+      onMouseDown: preventMouseDown,
       minWidth: referenceElement?.offsetWidth,
       id: idList,
       role: "listbox",
@@ -60,7 +63,7 @@ const MenuList = () => {
         import_styled.StyledList,
         {
           tabIndex: -1,
-          "aria-expanded": showPopover,
+          "aria-expanded": isShowingPopover,
           onFocus: handleOnFocus,
           "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
           style: { height: totalSize, margin: "8px 0px" },

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';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { useItemRenderer } from './useItemRenderer';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options, id },\n    referenceElement,\n    inputRef,\n    listRef,\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\n      tabIndex={-1}\n      onMouseDown={preventMouseDown}\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={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;ADqCb;AArCV,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,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;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,aAAa;AAAA,MACb,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;",
   "names": ["AutocompleteContext"]
 }

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

@@ -37,18 +37,20 @@ 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';\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    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;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,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"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -24,11 +24,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
+  defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const defaultProps = {
+  zIndex: 10,
+  withoutPortal: false,
+  startPlacementPreference: "bottom-start",
+  placementOrderPreference: ["bottom-start", "bottom-end"]
+};
 const propTypes = {
   options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of options").defaultValue([]),
   filter: import_ds_props_helpers.PropTypes.string.isRequired.description("String value to filter the options").defaultValue(""),

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    children: React.ReactChild;\n    filter: string;\n    onSelect: (suggestedValue: string | number, e: React.KeyboardEvent<HTMLInputElement>) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    withoutPortal: boolean;\n    zIndex: number;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const propTypes = {\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of options')\n    .defaultValue([]),\n  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n  onSelect: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n  children: PropTypes.node.isRequired\n    .description('React component to apply autocomplete functionality')\n    .defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    children: React.ReactChild;\n    filter: string;\n    onSelect: (\n      suggestedValue: string | number,\n      e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    withoutPortal: boolean;\n    zIndex: number;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const propTypes = {\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of options')\n    .defaultValue([]),\n  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n  onSelect: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n  children: PropTypes.node.isRequired\n    .description('React component to apply autocomplete functionality')\n    .defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAgDnB,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,YAAY;AAAA,EACvB,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
   "names": []
 }

package/dist/esm/AutocompleteCTX.js

@@ -1,30 +1,10 @@
 import * as React from "react";
-import { createContext, createRef } from "react";
-const noop = () => {
-};
-const defaultProps = {
-  zIndex: 10,
-  withoutPortal: false,
-  startPlacementPreference: "bottom-start",
-  placementOrderPreference: ["bottom-start", "bottom-end"]
-};
-const defaultContext = {
-  props: defaultProps,
-  showPopover: false,
-  setShowPopover: noop,
-  scrollOptionIntoView: noop,
-  referenceElement: null,
-  setReferenceElement: noop,
-  inputRef: createRef(),
-  listRef: createRef(),
-  focusOptionIdx: "",
-  setCurrentOption: noop
-};
+import { createContext } from "react";
+const defaultContext = {};
 const AutocompleteContext = createContext(defaultContext);
 var AutocompleteCTX_default = AutocompleteContext;
 export {
   AutocompleteContext,
-  AutocompleteCTX_default as default,
-  defaultProps
+  AutocompleteCTX_default as default
 };
 //# sourceMappingURL=AutocompleteCTX.js.map

package/dist/esm/AutocompleteCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AutocompleteCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSAutocompleteT } from './react-desc-prop-types';\nimport type { DSAutoCompleteInternalsT } from './sharedTypes';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\nconst defaultContext = {\n  props: defaultProps as DSAutocompleteT.InternalProps,\n  showPopover: false,\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  referenceElement: null,\n  setReferenceElement: noop,\n  inputRef: createRef<HTMLInputElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  focusOptionIdx: '',\n  setCurrentOption: noop,\n};\n/** Context for cross component communication */\nexport const AutocompleteContext = createContext<DSAutoCompleteInternalsT.AutocompleteContext>(defaultContext);\n\nexport default AutocompleteContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAIzC,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AACA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,UAAU,UAA4B;AAAA,EACtC,SAAS,UAA0B;AAAA,EACnC,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAEO,MAAM,sBAAsB,cAA4D,cAAc;AAE7G,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { AutocompleteContextT } from './config/useAutocomplete';\n\nconst defaultContext = {} as AutocompleteContextT;\n/** Context for cross component communication */\nexport const AutocompleteContext = createContext<AutocompleteContextT>(defaultContext);\n\nexport default AutocompleteContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAEjB,MAAM,sBAAsB,cAAoC,cAAc;AAErF,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/config/useAutocomplete.js

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { useMemo, useState, useEffect, useRef, useCallback } from "react";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { useVirtual } from "react-virtual";
-import { propTypes } from "../react-desc-prop-types";
-import { defaultProps } from "../AutocompleteCTX";
+import React2, { useMemo, useState, useRef } from "react";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
+import { propTypes, defaultProps } from "../react-desc-prop-types";
 import { getFirstOption } from "../utils/listHelper";
 import { DSAutocompleteName } from "../DSAutocompleteDefinitions";
+import { useRefs } from "./useRefs";
+import { useVirtualization } from "./useVirtualization";
+import { usePopoverLogic } from "./usePopoverLogic";
 const useAutocomplete = (props) => {
   const defaultPropsWithInnerRef = {
     ...defaultProps,
@@ -13,59 +14,30 @@ const useAutocomplete = (props) => {
   };
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
   useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);
-  const [showPopover, setShowPopover] = useState(false);
+  const { options } = propsWithDefault;
   const [referenceElement, setReferenceElement] = useState(null);
   const [focusOptionIdx, setCurrentOption] = useState("");
-  const inputRef = useRef(null);
-  const listRef = useRef(null);
-  const { options, filter } = propsWithDefault;
-  const virtualListHelpers = useVirtual({
-    size: options.length,
-    parentRef: listRef,
-    overscan: 15,
-    paddingStart: 0
+  const references = useRefs();
+  const virtualizationManager = useVirtualization({
+    references,
+    propsWithDefault
   });
-  const scrollOptionIntoView = useCallback(
-    (dsId, opts = { align: "center" }) => {
-      virtualListHelpers.scrollToIndex(
-        options.findIndex((opt) => opt.dsId === dsId),
-        opts
-      );
-    },
-    [options, virtualListHelpers]
-  );
-  useEffect(() => {
-    if (filter.length === 0 || options.length === 0) {
-      setShowPopover(false);
-    }
-  }, [filter, options.length, setShowPopover]);
-  useEffect(() => {
+  const popoverManager = usePopoverLogic(propsWithDefault);
+  React2.useEffect(() => {
     setCurrentOption(getFirstOption(options));
-  }, [options, showPopover]);
+  }, [options]);
   const ctx = useMemo(
     () => ({
       props: { ...propsWithDefault },
-      virtualListHelpers,
-      showPopover,
       referenceElement,
-      inputRef,
-      listRef,
       focusOptionIdx,
       setCurrentOption,
-      scrollOptionIntoView,
       setReferenceElement,
-      setShowPopover
+      ...references,
+      ...popoverManager,
+      ...virtualizationManager
     }),
-    [
-      scrollOptionIntoView,
-      propsWithDefault,
-      virtualListHelpers,
-      focusOptionIdx,
-      showPopover,
-      referenceElement,
-      inputRef,
-      listRef
-    ]
+    [propsWithDefault, referenceElement, focusOptionIdx, popoverManager, references, virtualizationManager]
   );
   return ctx;
 };

package/dist/esm/config/useAutocomplete.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nimport { propTypes } from '../react-desc-prop-types';\nimport type { DSAutoCompleteInternalsT } from '../sharedTypes';\nimport { defaultProps } from '../AutocompleteCTX';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions';\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): DSAutoCompleteInternalsT.AutocompleteContext => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const { options, filter } = propsWithDefault;\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: options.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        options.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [options, virtualListHelpers],\n  );\n\n  useEffect(() => {\n    if (filter.length === 0 || options.length === 0) {\n      setShowPopover(false);\n    }\n  }, [filter, options.length, setShowPopover]);\n\n  useEffect(() => {\n    setCurrentOption(getFirstOption(options));\n  }, [options, showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefault },\n      virtualListHelpers,\n      showPopover,\n      referenceElement,\n      inputRef,\n      listRef,\n      focusOptionIdx,\n      setCurrentOption,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      propsWithDefault,\n      virtualListHelpers,\n      focusOptionIdx,\n      showPopover,\n      referenceElement,\n      inputRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,QAAQ,mBAAmB;AAClE,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAE5B,MAAM,kBAAkB,CAAC,UAA+E;AAC7G,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AACA,QAAM,mBAAmB,6BAA6B,OAAO,wBAAwB;AACrF,iCAA+B,kBAAkB,WAAW,kBAAkB;AAC9E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AAEjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,SAAS,OAAO,IAAI;AAM5B,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,QAAQ;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,kBAAkB;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,KAAK,QAAQ,WAAW,GAAG;AAC/C,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,QAAQ,cAAc,CAAC;AAE3C,YAAU,MAAM;AACd,qBAAiB,eAAe,OAAO,CAAC;AAAA,EAC1C,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useMemo, useState, useRef } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nimport { propTypes, defaultProps } from '../react-desc-prop-types';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions';\nimport { useRefs } from './useRefs';\nimport { useVirtualization } from './useVirtualization';\nimport { usePopoverLogic } from './usePopoverLogic';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n  ReturnType<typeof useVirtualization> &\n  ReturnType<typeof usePopoverLogic> & {\n    props: DSAutocompleteT.InternalProps;\n    referenceElement: HTMLElement | null;\n    focusOptionIdx: string;\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n  };\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): AutocompleteContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n\n  const { options } = propsWithDefault;\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n  const references = useRefs();\n\n  const virtualizationManager = useVirtualization({\n    references,\n    propsWithDefault,\n  });\n\n  const popoverManager = usePopoverLogic(propsWithDefault);\n\n  React.useEffect(() => {\n    setCurrentOption(getFirstOption(options));\n  }, [options]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefault },\n      referenceElement,\n      focusOptionIdx,\n      setCurrentOption,\n      setReferenceElement,\n      ...references,\n      ...popoverManager,\n      ...virtualizationManager,\n    }),\n    [propsWithDefault, referenceElement, focusOptionIdx, popoverManager, references, virtualizationManager],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,OAAOA,UAAS,SAAS,UAAU,cAAc;AACjD,SAAS,8BAA8B,sCAAsC;AAE7E,SAAS,WAAW,oBAAoB;AACxC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAYzB,MAAM,kBAAkB,CAAC,UAAuD;AACrF,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AACA,QAAM,mBAAmB,6BAA6B,OAAO,wBAAwB;AACrF,iCAA+B,kBAAkB,WAAW,kBAAkB;AAE9E,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,aAAa,QAAQ;AAE3B,QAAM,wBAAwB,kBAAkB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,gBAAgB,gBAAgB;AAEvD,EAAAA,OAAM,UAAU,MAAM;AACpB,qBAAiB,eAAe,OAAO,CAAC;AAAA,EAC1C,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,kBAAkB,gBAAgB,gBAAgB,YAAY,qBAAqB;AAAA,EACxG;AAEA,SAAO;AACT;",
+  "names": ["React"]
 }

package/dist/esm/config/usePopoverLogic.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import React2, { useState, useEffect } from "react";
+const usePopoverLogic = (propsWithDefault) => {
+  const { options, filter } = propsWithDefault;
+  const [forceClosePopover, setForceClosePopover] = useState(false);
+  const [userTypedSomething, setUserTypedSomething] = useState(false);
+  const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState(false);
+  const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState(false);
+  const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;
+  const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;
+  const isShowingPopover = !forceClosePopover && popoverHasAnythingToShow && !userSelectedAndDidNotType && (userTypedSomething || userIsNavigatingWithArrows);
+  const trackUserTyping = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if ([...e.key].length === 1 || key === "Backspace" || key === "Delete") {
+        setUserTypedSomething(true);
+        setForceClosePopover(false);
+        setUserJustSelectedAnOption(false);
+      } else {
+        setUserTypedSomething(false);
+      }
+    },
+    [setUserTypedSomething]
+  );
+  const trackUserNavigatingWithArrows = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if (isShowingPopover && (key === "ArrowUp" || key === "ArrowDown")) {
+        setUserIsNavigatingWithArrows(true);
+      } else {
+        setUserIsNavigatingWithArrows(false);
+      }
+    },
+    [isShowingPopover]
+  );
+  const trackUserSelectingAnOption = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if (key === "Enter" && isShowingPopover) {
+        setUserJustSelectedAnOption(true);
+      }
+    },
+    [isShowingPopover]
+  );
+  const trackUserInteractingViaKeyboard = React2.useCallback(
+    (e) => {
+      trackUserTyping(e);
+      trackUserNavigatingWithArrows(e);
+      trackUserSelectingAnOption(e);
+    },
+    [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption]
+  );
+  useEffect(() => {
+    const closePopper = () => {
+      setForceClosePopover(true);
+    };
+    window.addEventListener("blur", closePopper);
+    return () => {
+      window.removeEventListener("blur", closePopper);
+    };
+  }, []);
+  return React2.useMemo(
+    () => ({
+      isShowingPopover,
+      forceClosePopover,
+      setForceClosePopover,
+      userTypedSomething,
+      setUserTypedSomething,
+      setUserJustSelectedAnOption,
+      setUserIsNavigatingWithArrows,
+      trackUserInteractingViaKeyboard
+    }),
+    [isShowingPopover, forceClosePopover, userTypedSomething, trackUserInteractingViaKeyboard]
+  );
+};
+export {
+  usePopoverLogic
+};
+//# sourceMappingURL=usePopoverLogic.js.map

package/dist/esm/config/usePopoverLogic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePopoverLogic.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (propsWithDefault: DSAutocompleteT.InternalProps) => {\n  const { options, filter } = propsWithDefault;\n\n  const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n  const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n  const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n  const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n  const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n  const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n  const isShowingPopover =\n    !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n    popoverHasAnythingToShow && // nothing to show --> hide popover\n    !userSelectedAndDidNotType && // user just selected an option --> hide popover\n    (userTypedSomething || // user typed something --> show popover\n      userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n  const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      const { key } = e;\n      // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n      if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n        setUserTypedSomething(true);\n        setForceClosePopover(false);\n        setUserJustSelectedAnOption(false);\n      } else {\n        setUserTypedSomething(false);\n      }\n    },\n    [setUserTypedSomething],\n  );\n  const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      const { key } = e;\n      if (isShowingPopover && (key === 'ArrowUp' || key === 'ArrowDown')) {\n        setUserIsNavigatingWithArrows(true);\n      } else {\n        setUserIsNavigatingWithArrows(false);\n      }\n    },\n    [isShowingPopover],\n  );\n\n  const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      const { key } = e;\n      if (key === 'Enter' && isShowingPopover) {\n        setUserJustSelectedAnOption(true);\n      }\n    },\n    [isShowingPopover],\n  );\n\n  const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      trackUserTyping(e);\n      trackUserNavigatingWithArrows(e);\n      trackUserSelectingAnOption(e);\n    },\n    [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n  );\n\n  // when the webpage is blurred, we want to close the popover\n  // should be fixing iframes interactions?\n  useEffect(() => {\n    const closePopper = () => {\n      setForceClosePopover(true);\n    };\n    window.addEventListener('blur', closePopper);\n\n    return () => {\n      window.removeEventListener('blur', closePopper);\n    };\n  }, []);\n\n  return React.useMemo(\n    () => ({\n      isShowingPopover,\n      forceClosePopover,\n      setForceClosePopover,\n      userTypedSomething,\n      setUserTypedSomething,\n      setUserJustSelectedAnOption,\n      setUserIsNavigatingWithArrows,\n      trackUserInteractingViaKeyboard,\n    }),\n    [isShowingPopover, forceClosePopover, userTypedSomething, trackUserInteractingViaKeyboard],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,iBAAiB;AAgBpC,MAAM,kBAAkB,CAAC,qBAAoD;AAClF,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,IAAI,SAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAC/D,QAAM,2BAA2B,QAAQ,SAAS,KAAK,OAAO,SAAS;AAEvE,QAAM,mBACJ,CAAC,qBACD,4BACA,CAAC,8BACA,sBACC;AAEJ,QAAM,kBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,QAAQ,eAAe,QAAQ,UAAU;AACtE,8BAAsB,IAAI;AAC1B,6BAAqB,KAAK;AAC1B,oCAA4B,KAAK;AAAA,MACnC,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AACA,QAAM,gCAA8EA,OAAM;AAAA,IACxF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,qBAAqB,QAAQ,aAAa,QAAQ,cAAc;AAClE,sCAA8B,IAAI;AAAA,MACpC,OAAO;AACL,sCAA8B,KAAK;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,6BAA2EA,OAAM;AAAA,IACrF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,WAAW,kBAAkB;AACvC,oCAA4B,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,kCAAgFA,OAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AAIA,YAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,2BAAqB,IAAI;AAAA,IAC3B;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB,oBAAoB,+BAA+B;AAAA,EAC3F;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useRefs.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import React2, { useRef } from "react";
+const useRefs = () => {
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  return React2.useMemo(() => ({ inputRef, listRef }), [inputRef, listRef]);
+};
+export {
+  useRefs
+};
+//# sourceMappingURL=useRefs.js.map

package/dist/esm/config/useRefs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useRefs.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\n\nexport const useRefs = () => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  return React.useMemo(() => ({ inputRef, listRef }), [inputRef, listRef]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,cAAc;AAEvB,MAAM,UAAU,MAAM;AAC3B,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,OAAuB,IAAI;AAC3C,SAAOA,OAAM,QAAQ,OAAO,EAAE,UAAU,QAAQ,IAAI,CAAC,UAAU,OAAO,CAAC;AACzE;",
+  "names": ["React"]
+}

package/dist/esm/config/useVirtualization.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import React2, { useCallback } from "react";
+import { useVirtual } from "react-virtual";
+const useVirtualization = ({
+  references,
+  propsWithDefault
+}) => {
+  const { options } = propsWithDefault;
+  const { listRef } = references;
+  const virtualListHelpers = useVirtual({
+    size: options.length,
+    parentRef: listRef,
+    overscan: 15,
+    paddingStart: 0
+  });
+  const scrollOptionIntoView = useCallback(
+    (dsId, opts = { align: "center" }) => {
+      virtualListHelpers.scrollToIndex(
+        options.findIndex((opt) => opt.dsId === dsId),
+        opts
+      );
+    },
+    [options, virtualListHelpers]
+  );
+  return React2.useMemo(
+    () => ({
+      virtualListHelpers,
+      scrollOptionIntoView
+    }),
+    [virtualListHelpers, scrollOptionIntoView]
+  );
+};
+export {
+  useVirtualization
+};
+//# sourceMappingURL=useVirtualization.js.map

package/dist/esm/config/useVirtualization.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useVirtualization.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport type {} from 'react-virtual';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nimport type { useRefs } from './useRefs';\n\nexport const useVirtualization = ({\n  references,\n  propsWithDefault,\n}: {\n  references: ReturnType<typeof useRefs>;\n  propsWithDefault: DSAutocompleteT.InternalProps;\n}) => {\n  const { options } = propsWithDefault;\n  const { listRef } = references;\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: options.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        options.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [options, virtualListHelpers],\n  );\n\n  return React.useMemo(\n    () => ({\n      virtualListHelpers,\n      scrollOptionIntoView,\n    }),\n    [virtualListHelpers, scrollOptionIntoView],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,kBAAkB;AAKpB,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,QAAQ;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,kBAAkB;AAAA,EAC9B;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,oBAAoB;AAAA,EAC3C;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/A11yFocusedOption.js

@@ -15,15 +15,15 @@ const A11yFocusedOption = () => {
   const {
     props: { options },
     focusOptionIdx,
-    showPopover
+    isShowingPopover
   } = useContext(AutocompleteContext);
   return useMemo(() => {
     const selectabledOptions = getSelectableOptions(options);
     const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);
     const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
-    return /* @__PURE__ */ jsx(StyledA11ySelectedValues, { "aria-live": "polite", children: !isSeparator(focusOption) && showPopover && focusOption && `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}
+    return /* @__PURE__ */ 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]);
 };
 export {
   A11yFocusedOption,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11yFocusedOption.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,eAAe;AAC3C,SAAS,cAAc;AACvB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,SAAO,QAAQ,MAAM;AACnB,UAAM,qBAAqB,qBAAqB,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,oBAAC,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 * as React from 'react';\nexport { React };\n", "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    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"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,eAAe;AAC3C,SAAS,cAAc;AACvB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,SAAO,QAAQ,MAAM;AACnB,UAAM,qBAAqB,qBAAqB,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,oBAAC,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": []
 }