@elliemae/ds-form-layout-autocomplete 3.56.0-rc.2 → 3.57.0-next.10

package/dist/cjs/config/useClickOutside.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useClickOutside_exports = {};
+__export(useClickOutside_exports, {
+  useOnClickOutside: () => useOnClickOutside
+});
+module.exports = __toCommonJS(useClickOutside_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+function useOnClickOutside(ref, cb, excludeNode) {
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
+        return;
+      }
+      cb(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, cb, excludeNode]);
+}
+//# sourceMappingURL=useClickOutside.js.map

package/dist/cjs/config/useClickOutside.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useClickOutside.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(\n  ref: T | null,\n  cb: CbT,\n  excludeNode: Z | null,\n): void {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (\n        !ref ||\n        ref?.contains?.(event.target as Node) ||\n        (excludeNode && excludeNode.contains(event.target as Node))\n      ) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb, excludeNode]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAEnB,SAAS,kBACd,KACA,IACA,aACM;AACN,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UACE,CAAC,OACD,KAAK,WAAW,MAAM,MAAc,KACnC,eAAe,YAAY,SAAS,MAAM,MAAc,GACzD;AACA;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,IAAI,WAAW,CAAC;AAC3B;",
+  "names": []
+}

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

@@ -34,14 +34,16 @@ module.exports = __toCommonJS(Container_exports);
 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_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 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_useClickOutside = require("../../config/useClickOutside.js");
 const Container = () => {
   const {
     props: {
@@ -52,16 +54,17 @@ const Container = () => {
       filter,
       placementOrderPreference,
       renderInput,
+      zIndex,
       ...restProps
     },
     isShowingPopover,
+    referenceElement,
     setReferenceElement,
     setUserJustSelectedAnOption,
     setUserTypedSomething,
     setUserIsNavigatingWithArrows,
     setForceClosePopover,
     autoCompleteId,
-    referenceElement,
     focusOptionIdx
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const handleCloseMenu = (0, import_react.useCallback)(() => {
@@ -71,6 +74,26 @@ const Container = () => {
   const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(restProps);
   const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const input = !onValueChange && !renderInput ? import_react.default.Children.only(children) : null;
+  const config = (0, import_react.useMemo)(
+    () => ({
+      placement: "bottom",
+      withoutAnimation: true,
+      startPlacementPreference,
+      placementOrderPreference,
+      zIndex,
+      customOffset: [0, 5],
+      handleCloseMenu,
+      portalDOMContainer: document.body,
+      externallyControlledIsOpen: isShowingPopover
+    }),
+    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
+  );
+  const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
+  const autoCompleteRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
+  const hideTooltip = (0, import_react.useCallback)(() => {
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
+  (0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
   const onFocusPopoverStatusSync = (0, import_react.useCallback)(() => {
     setForceClosePopover(false);
     setUserJustSelectedAnOption(false);
@@ -81,7 +104,7 @@ const Container = () => {
     import_styled.StyledContainer,
     {
       id,
-      innerRef: setReferenceElement,
+      innerRef: autoCompleteRef,
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
@@ -116,18 +139,12 @@ const Container = () => {
           }
         ),
         filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_popperjs.DSPopperJS,
+          import_ds_floating_context.FloatingWrapper,
           {
-            customOffset: [0, 5],
-            closeContextMenu: handleCloseMenu,
-            referenceElement,
-            showPopover: isShowingPopover,
-            startPlacementPreference,
-            placementOrderPreference,
-            withoutPortal: true,
-            withoutArrow: true,
-            withoutAnimation: true,
-            zIndex: 10,
+            innerRef: refs.setFloating,
+            floatingStyles,
+            isOpen: isShowingPopover,
+            context,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
           }
         )

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 no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\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';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      ...restProps\n    },\n    isShowingPopover,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    referenceElement,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\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      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={setReferenceElement}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <DSPopperJS\n            customOffset={[0, 5]}\n            closeContextMenu={handleCloseMenu}\n            referenceElement={referenceElement as HTMLElement}\n            showPopover={isShowingPopover}\n            startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n            placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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;ADsDnB;AApDJ,mBAA+C;AAC/C,yBAA2B;AAE3B,gCAA4B;AAC5B,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;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,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,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,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\n\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\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 { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      zIndex,\n      ...restProps\n    },\n    isShowingPopover,\n    referenceElement,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: isShowingPopover,\n    }),\n    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n  return (\n    <>\n      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={autoCompleteRef}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={isShowingPopover}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["AutocompleteContext", "React"]
 }

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

@@ -56,7 +56,7 @@ const MenuList = () => {
   const preventMouseDown = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (measure) measure();
   }, [width]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\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            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,mBAAgE;AAChE,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\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            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,mBAA0D;AAC1D,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
   "names": ["AutocompleteContext"]
 }

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

@@ -40,7 +40,7 @@ const defaultProps = {
   withoutPortal: false,
   forceFocusFirstOptionOnType: false,
   startPlacementPreference: "bottom-start",
-  placementOrderPreference: ["bottom-start", "bottom-end"]
+  placementOrderPreference: ["bottom-start", "top-start"]
 };
 const DSAutocompletePropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,

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 type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\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;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\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    forceFocusFirstOptionOnType: boolean;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  forceFocusFirstOptionOnType: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n  startPlacementPreference: PropTypes.string\n    .description('Ideal preference for context placement')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement preferences for the context menu in order of most preferred to least preferred')\n    .defaultValue(\"['bottom-start', 'bottom-end']\"),\n  withoutPortal: PropTypes.bool\n    .description('Whether to render the context menu in a react portal or next to the input DOM element')\n    .defaultValue('false (next to the input)'),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description(\n      'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,kCAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,kCAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,kCAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,kCAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSHookFloatingContextT } from '@elliemae/ds-floating-context';\n\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\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;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\n      e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n    withoutPortal: boolean;\n    zIndex: number;\n    forceFocusFirstOptionOnType: boolean;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  forceFocusFirstOptionOnType: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n  startPlacementPreference: PropTypes.string\n    .description('Ideal preference for context placement')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement preferences for the context menu in order of most preferred to least preferred')\n    .defaultValue(\"['bottom-start', 'bottom-end']\"),\n  withoutPortal: PropTypes.bool\n    .description('Whether to render the context menu in a react portal or next to the input DOM element')\n    .defaultValue('false (next to the input)'),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description(\n      'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMvB,8BAAuE;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AACxD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,kCAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,kCAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,kCAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,kCAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
   "names": []
 }

package/dist/cjs/utils/listHelper.js

@@ -43,8 +43,10 @@ const getOptions = (options) => options ? options.filter((option) => option.type
 const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = (value) => Array.isArray(value);
 const findInCircularList = (list, from, criteria, step = 1) => {
-  for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
+  let i = from === -1 ? step > 0 ? 0 : list.length - 1 : (from + step + list.length) % list.length;
+  while (i !== from) {
     if (criteria(list[i])) return i;
+    i = (i + step + list.length) % list.length;
   }
   return from;
 };

package/dist/cjs/utils/listHelper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from >= -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable no-nested-ternary */\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n): number => {\n  let i = from === -1 ? (step > 0 ? 0 : list.length - 1) : (from + step + list.length) % list.length;\n\n  while (i !== from) {\n    if (criteria(list[i])) return i;\n    i = (i + step + list.length) % list.length;\n  }\n  return from;\n};\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MACI;AACX,MAAI,IAAI,SAAS,KAAM,OAAO,IAAI,IAAI,KAAK,SAAS,KAAM,OAAO,OAAO,KAAK,UAAU,KAAK;AAE5F,SAAO,MAAM,MAAM;AACjB,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAC9B,SAAK,IAAI,OAAO,KAAK,UAAU,KAAK;AAAA,EACtC;AACA,SAAO;AACT;AACO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
   "names": []
 }

package/dist/esm/config/useClickOutside.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { useEffect } from "react";
+function useOnClickOutside(ref, cb, excludeNode) {
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
+        return;
+      }
+      cb(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, cb, excludeNode]);
+}
+export {
+  useOnClickOutside
+};
+//# sourceMappingURL=useClickOutside.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useClickOutside.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(\n  ref: T | null,\n  cb: CbT,\n  excludeNode: Z | null,\n): void {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (\n        !ref ||\n        ref?.contains?.(event.target as Node) ||\n        (excludeNode && excludeNode.contains(event.target as Node))\n      ) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb, excludeNode]);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,SAAS,kBACd,KACA,IACA,aACM;AACN,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UACE,CAAC,OACD,KAAK,WAAW,MAAM,MAAc,KACnC,eAAe,YAAY,SAAS,MAAM,MAAc,GACzD;AACA;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,IAAI,WAAW,CAAC;AAC3B;",
+  "names": []
+}

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

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React2, { useCallback, useContext } from "react";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
+import React2, { useCallback, useMemo, useContext } from "react";
 import { DSInputText } from "@elliemae/ds-form-input-text";
+import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
+import { mergeRefs } from "@elliemae/ds-system";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import AutocompleteContext from "../../AutocompleteCTX.js";
 import { StyledContainer, StyledPopperWrapper } from "./styled.js";
 import { MenuList } from "../menu-list/index.js";
 import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
 import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
+import { useOnClickOutside } from "../../config/useClickOutside.js";
 const Container = () => {
   const {
     props: {
@@ -19,16 +21,17 @@ const Container = () => {
       filter,
       placementOrderPreference,
       renderInput,
+      zIndex,
       ...restProps
     },
     isShowingPopover,
+    referenceElement,
     setReferenceElement,
     setUserJustSelectedAnOption,
     setUserTypedSomething,
     setUserIsNavigatingWithArrows,
     setForceClosePopover,
     autoCompleteId,
-    referenceElement,
     focusOptionIdx
   } = useContext(AutocompleteContext);
   const handleCloseMenu = useCallback(() => {
@@ -38,6 +41,26 @@ const Container = () => {
   const xStyledProps = useGetXstyledProps(restProps);
   const { onInputKeyDown } = useKeyboardNavigation();
   const input = !onValueChange && !renderInput ? React2.Children.only(children) : null;
+  const config = useMemo(
+    () => ({
+      placement: "bottom",
+      withoutAnimation: true,
+      startPlacementPreference,
+      placementOrderPreference,
+      zIndex,
+      customOffset: [0, 5],
+      handleCloseMenu,
+      portalDOMContainer: document.body,
+      externallyControlledIsOpen: isShowingPopover
+    }),
+    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
+  );
+  const { refs, floatingStyles, context } = useFloatingContext(config);
+  const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);
+  const hideTooltip = useCallback(() => {
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
+  useOnClickOutside(referenceElement, hideTooltip, refs.floating);
   const onFocusPopoverStatusSync = useCallback(() => {
     setForceClosePopover(false);
     setUserJustSelectedAnOption(false);
@@ -48,7 +71,7 @@ const Container = () => {
     StyledContainer,
     {
       id,
-      innerRef: setReferenceElement,
+      innerRef: autoCompleteRef,
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": AutocompleteDataTestid.CONTAINER,
@@ -83,18 +106,12 @@ const Container = () => {
           }
         ),
         filter && /* @__PURE__ */ jsx(
-          DSPopperJS,
+          FloatingWrapper,
           {
-            customOffset: [0, 5],
-            closeContextMenu: handleCloseMenu,
-            referenceElement,
-            showPopover: isShowingPopover,
-            startPlacementPreference,
-            placementOrderPreference,
-            withoutPortal: true,
-            withoutArrow: true,
-            withoutAnimation: true,
-            zIndex: 10,
+            innerRef: refs.setFloating,
+            floatingStyles,
+            isOpen: isShowingPopover,
+            context,
             children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, children: /* @__PURE__ */ jsx(MenuList, {}) })
           }
         )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\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';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      ...restProps\n    },\n    isShowingPopover,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    referenceElement,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\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      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={setReferenceElement}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <DSPopperJS\n            customOffset={[0, 5]}\n            closeContextMenu={handleCloseMenu}\n            referenceElement={referenceElement as HTMLElement}\n            showPopover={isShowingPopover}\n            startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n            placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACsDnB,mBA6BQ,KAxBN,YALF;AApDJ,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,0BAA0B;AAC3D,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,kBAAkB,YAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,IAAI,uBAAuB,SAAS;AAC1E,QAAM,eAAe,mBAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAcA,OAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,2BAA2B,YAAY,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,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\n\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\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 { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      zIndex,\n      ...restProps\n    },\n    isShowingPopover,\n    referenceElement,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: isShowingPopover,\n    }),\n    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n  return (\n    <>\n      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={autoCompleteRef}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={isShowingPopover}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useCallback, useLayoutEffect } from "react";
+import { useContext, useCallback, useEffect } from "react";
 import { StyledListWrapper, StyledList, StyledVirtualListWrapper } from "./styled.js";
 import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
 import AutocompleteContext from "../../AutocompleteCTX.js";
@@ -23,7 +23,7 @@ const MenuList = () => {
   const preventMouseDown = useCallback((e) => {
     e.preventDefault();
   }, []);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (measure) measure();
   }, [width]);
   return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\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            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"],
-  "mappings": "AAAA,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,uBAAuB;AAChE,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,gBAAgB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\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            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"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,iBAAiB;AAC1D,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,gBAAgB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ const defaultProps = {
   withoutPortal: false,
   forceFocusFirstOptionOnType: false,
   startPlacementPreference: "bottom-start",
-  placementOrderPreference: ["bottom-start", "bottom-end"]
+  placementOrderPreference: ["bottom-start", "top-start"]
 };
 const DSAutocompletePropTypes = {
   ...globalAttributesPropTypes,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\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;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\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    forceFocusFirstOptionOnType: boolean;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  forceFocusFirstOptionOnType: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n  startPlacementPreference: PropTypes.string\n    .description('Ideal preference for context placement')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement preferences for the context menu in order of most preferred to least preferred')\n    .defaultValue(\"['bottom-start', 'bottom-end']\"),\n  withoutPortal: PropTypes.bool\n    .description('Whether to render the context menu in a react portal or next to the input DOM element')\n    .defaultValue('false (next to the input)'),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description(\n      'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,WAAW,wBAAwB;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,UAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,UAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,UAAU,QAAQ,UAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,UAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,UAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSHookFloatingContextT } from '@elliemae/ds-floating-context';\n\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\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;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\n      e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n    withoutPortal: boolean;\n    zIndex: number;\n    forceFocusFirstOptionOnType: boolean;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  forceFocusFirstOptionOnType: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n  startPlacementPreference: PropTypes.string\n    .description('Ideal preference for context placement')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement preferences for the context menu in order of most preferred to least preferred')\n    .defaultValue(\"['bottom-start', 'bottom-end']\"),\n  withoutPortal: PropTypes.bool\n    .description('Whether to render the context menu in a react portal or next to the input DOM element')\n    .defaultValue('false (next to the input)'),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description(\n      'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,SAAS,2BAA2B,WAAW,wBAAwB;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AACxD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,UAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,UAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,UAAU,QAAQ,UAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,UAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,UAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
   "names": []
 }

package/dist/esm/utils/listHelper.js

@@ -4,8 +4,10 @@ const getOptions = (options) => options ? options.filter((option) => option.type
 const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = (value) => Array.isArray(value);
 const findInCircularList = (list, from, criteria, step = 1) => {
-  for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
+  let i = from === -1 ? step > 0 ? 0 : list.length - 1 : (from + step + list.length) % list.length;
+  while (i !== from) {
     if (criteria(list[i])) return i;
+    i = (i + step + list.length) % list.length;
   }
   return from;
 };

package/dist/esm/utils/listHelper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from >= -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable no-nested-ternary */\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n): number => {\n  let i = from === -1 ? (step > 0 ? 0 : list.length - 1) : (from + step + list.length) % list.length;\n\n  while (i !== from) {\n    if (criteria(list[i])) return i;\n    i = (i + step + list.length) % list.length;\n  }\n  return from;\n};\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MACI;AACX,MAAI,IAAI,SAAS,KAAM,OAAO,IAAI,IAAI,KAAK,SAAS,KAAM,OAAO,OAAO,KAAK,UAAU,KAAK;AAE5F,SAAO,MAAM,MAAM;AACjB,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAC9B,SAAK,IAAI,OAAO,KAAK,UAAU,KAAK;AAAA,EACtC;AACA,SAAO;AACT;AACO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
   "names": []
 }

package/dist/types/config/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(ref: T | null, cb: CbT, excludeNode: Z | null): void;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
+import type { DSHookFloatingContextT } from '@elliemae/ds-floating-context';
 import type { DSInputTextT } from '@elliemae/ds-form-input-text';
 export declare namespace DSAutocompleteT {
     interface CommonItemOptions {
@@ -29,7 +30,7 @@ export declare namespace DSAutocompleteT {
     }
     interface DefaultProps {
         startPlacementPreference: string;
-        placementOrderPreference: string[];
+        placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];
         withoutPortal: boolean;
         zIndex: number;
         forceFocusFirstOptionOnType: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-autocomplete",
-  "version": "3.56.0-rc.2",
+  "version": "3.57.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout - Autocomplete",
   "files": [
@@ -38,13 +38,13 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "styled-components": "~5.3.9",
-    "uid": "~2.0.1",
-    "@elliemae/ds-form-input-text": "3.56.0-rc.2",
-    "@elliemae/ds-grid": "3.56.0-rc.2",
-    "@elliemae/ds-menu-items": "3.56.0-rc.2",
-    "@elliemae/ds-popperjs": "3.56.0-rc.2",
-    "@elliemae/ds-props-helpers": "3.56.0-rc.2",
-    "@elliemae/ds-system": "3.56.0-rc.2"
+    "uid": "^2.0.2",
+    "@elliemae/ds-floating-context": "3.57.0-next.10",
+    "@elliemae/ds-grid": "3.57.0-next.10",
+    "@elliemae/ds-form-input-text": "3.57.0-next.10",
+    "@elliemae/ds-menu-items": "3.57.0-next.10",
+    "@elliemae/ds-props-helpers": "3.57.0-next.10",
+    "@elliemae/ds-system": "3.57.0-next.10"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
@@ -52,9 +52,9 @@
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-form-input-text": "3.56.0-rc.2",
-    "@elliemae/ds-monorepo-devops": "3.56.0-rc.2",
-    "@elliemae/ds-test-utils": "3.56.0-rc.2"
+    "@elliemae/ds-form-input-text": "3.57.0-next.10",
+    "@elliemae/ds-monorepo-devops": "3.57.0-next.10",
+    "@elliemae/ds-test-utils": "3.57.0-next.10"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",