@elliemae/ds-form-layout-autocomplete 3.70.0-next.6 → 3.70.0-next.60

package/dist/cjs/AutocompleteDataTestids.js

@@ -36,6 +36,8 @@ const AutocompleteDataTestid = {
   LIST: "autocomplete-menu-list",
   OPTION: "autocomplete-option",
   CONTAINER: "autocomplete-container",
-  INPUT: "ds-autocomplete-input"
+  INPUT: "ds-autocomplete-input",
+  LOADING: "autocomplete-loading",
+  SKELETON: "autocomplete-skeleton"
 };
 //# sourceMappingURL=AutocompleteDataTestids.js.map

package/dist/cjs/AutocompleteDataTestids.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AutocompleteDataTestids.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const AutocompleteDataTestid = {\n  LIST: 'autocomplete-menu-list',\n  OPTION: 'autocomplete-option',\n  CONTAINER: 'autocomplete-container',\n  INPUT: 'ds-autocomplete-input',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT;",
+  "sourcesContent": ["export const AutocompleteDataTestid = {\n  LIST: 'autocomplete-menu-list',\n  OPTION: 'autocomplete-option',\n  CONTAINER: 'autocomplete-container',\n  INPUT: 'ds-autocomplete-input',\n  LOADING: 'autocomplete-loading',\n  SKELETON: 'autocomplete-skeleton',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AACZ;",
   "names": []
 }

package/dist/cjs/config/usePopoverLogic.js

@@ -35,13 +35,13 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useHandleFocusOnPopoverOpenLogic = require("./useHandleFocusOnPopoverOpenLogic.js");
 const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
-  const { options, filter, forceFocusFirstOptionOnType } = propsWithDefault;
+  const { options, filter, forceFocusFirstOptionOnType, isLoading, isSkeleton } = propsWithDefault;
   const [forceClosePopover, setForceClosePopover] = (0, import_react.useState)(false);
   const [userTypedSomething, setUserTypedSomething] = (0, import_react.useState)(false);
   const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = (0, import_react.useState)(false);
   const [userJustSelectedAnOption, setUserJustSelectedAnOption] = (0, import_react.useState)(false);
   const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;
-  const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;
+  const popoverHasAnythingToShow = (options.length > 0 || !!isLoading || !!isSkeleton) && filter.length > 0;
   const isShowingPopover = !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover
   popoverHasAnythingToShow && // nothing to show --> hide popover
   !userSelectedAndDidNotType && // user just selected an option --> hide popover

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/usePopoverLogic.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { useHandleFocusOnPopoverOpenLogic } from './useHandleFocusOnPopoverOpenLogic.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (\n  propsWithDefault: DSAutocompleteT.InternalProps,\n  setCurrentOption: React.Dispatch<React.SetStateAction<string>>,\n) => {\n  const { options, filter, forceFocusFirstOptionOnType } = propsWithDefault;\n\n  const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n  const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n  const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n  const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n  const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n  const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n  const isShowingPopover =\n    !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n    popoverHasAnythingToShow && // nothing to show --> hide popover\n    !userSelectedAndDidNotType && // user just selected an option --> hide popover\n    (userTypedSomething || // user typed something --> show popover\n      userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n  // we don't want to redeclar all the functions when the flag changes, the flag is relevant on invocation only\n  // so we use a ref to store the value of the flag and use it in the functions\n  const isShowingRef = React.useRef(isShowingPopover);\n  isShowingRef.current = isShowingPopover;\n\n  const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n    if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n      setUserTypedSomething(true);\n      setForceClosePopover(false);\n      setUserJustSelectedAnOption(false);\n    } else {\n      setUserTypedSomething(false);\n    }\n  }, []);\n  const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    if (isShowingRef.current && (key === 'ArrowUp' || key === 'ArrowDown')) {\n      setUserIsNavigatingWithArrows(true);\n    } else {\n      setUserIsNavigatingWithArrows(false);\n    }\n  }, []);\n  const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    if (key === 'Enter' && isShowingRef.current) {\n      setUserJustSelectedAnOption(true);\n    }\n  }, []);\n\n  const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      trackUserTyping(e);\n      trackUserNavigatingWithArrows(e);\n      trackUserSelectingAnOption(e);\n    },\n    [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n  );\n  const closePopover = React.useCallback(() => {\n    setForceClosePopover(true);\n    setCurrentOption('');\n  }, [setCurrentOption]);\n\n  // when the webpage is blurred, we want to close the popover\n  // should be fixing iframes interactions?\n  useEffect(() => {\n    window.addEventListener('blur', closePopover);\n    return () => {\n      window.removeEventListener('blur', closePopover);\n    };\n  }, [closePopover]);\n\n  useHandleFocusOnPopoverOpenLogic({\n    options,\n    forceFocusFirstOptionOnType,\n    isShowingPopover,\n    setCurrentOption,\n  });\n\n  return React.useMemo(\n    () => ({\n      isShowingPopover,\n      forceClosePopover,\n      setForceClosePopover,\n      userTypedSomething,\n      setUserTypedSomething,\n      setUserJustSelectedAnOption,\n      userIsNavigatingWithArrows,\n      setUserIsNavigatingWithArrows,\n      trackUserInteractingViaKeyboard,\n    }),\n    [\n      isShowingPopover,\n      forceClosePopover,\n      userTypedSomething,\n      userIsNavigatingWithArrows,\n      trackUserInteractingViaKeyboard,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAE3C,8CAAiD;AAe1C,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,QAAQ,4BAA4B,IAAI;AAEzD,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,QAAI,uBAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,QAAI,uBAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAC/D,QAAM,2BAA2B,QAAQ,SAAS,KAAK,OAAO,SAAS;AAEvE,QAAM,mBACJ,CAAC;AAAA,EACD;AAAA,EACA,CAAC;AAAA,GACA;AAAA,EACC;AAIJ,QAAM,eAAe,aAAAA,QAAM,OAAO,gBAAgB;AAClD,eAAa,UAAU;AAEvB,QAAM,kBAAgE,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC7F,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,QAAQ,eAAe,QAAQ,UAAU;AACtE,4BAAsB,IAAI;AAC1B,2BAAqB,KAAK;AAC1B,kCAA4B,KAAK;AAAA,IACnC,OAAO;AACL,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,gCAA8E,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC3G,UAAM,EAAE,IAAI,IAAI;AAChB,QAAI,aAAa,YAAY,QAAQ,aAAa,QAAQ,cAAc;AACtE,oCAA8B,IAAI;AAAA,IACpC,OAAO;AACL,oCAA8B,KAAK;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,6BAA2E,aAAAA,QAAM,YAAY,CAAC,MAAM;AACxG,UAAM,EAAE,IAAI,IAAI;AAChB,QAAI,QAAQ,WAAW,aAAa,SAAS;AAC3C,kCAA4B,IAAI;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,kCAAgF,aAAAA,QAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AACA,QAAM,eAAe,aAAAA,QAAM,YAAY,MAAM;AAC3C,yBAAqB,IAAI;AACzB,qBAAiB,EAAE;AAAA,EACrB,GAAG,CAAC,gBAAgB,CAAC;AAIrB,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,gFAAiC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { useHandleFocusOnPopoverOpenLogic } from './useHandleFocusOnPopoverOpenLogic.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (\n  propsWithDefault: DSAutocompleteT.InternalProps,\n  setCurrentOption: React.Dispatch<React.SetStateAction<string>>,\n) => {\n  const { options, filter, forceFocusFirstOptionOnType, isLoading, isSkeleton } = propsWithDefault;\n\n  const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n  const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n  const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n  const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n  const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n  // during async fetches options is still empty, so loading/skeleton must keep the popover\n  // open on their own \u2014 otherwise the spinner/skeleton would never get a chance to render\n  const popoverHasAnythingToShow = (options.length > 0 || !!isLoading || !!isSkeleton) && filter.length > 0;\n\n  const isShowingPopover =\n    !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n    popoverHasAnythingToShow && // nothing to show --> hide popover\n    !userSelectedAndDidNotType && // user just selected an option --> hide popover\n    (userTypedSomething || // user typed something --> show popover\n      userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n  // we don't want to redeclar all the functions when the flag changes, the flag is relevant on invocation only\n  // so we use a ref to store the value of the flag and use it in the functions\n  const isShowingRef = React.useRef(isShowingPopover);\n  isShowingRef.current = isShowingPopover;\n\n  const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n    if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n      setUserTypedSomething(true);\n      setForceClosePopover(false);\n      setUserJustSelectedAnOption(false);\n    } else {\n      setUserTypedSomething(false);\n    }\n  }, []);\n  const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    if (isShowingRef.current && (key === 'ArrowUp' || key === 'ArrowDown')) {\n      setUserIsNavigatingWithArrows(true);\n    } else {\n      setUserIsNavigatingWithArrows(false);\n    }\n  }, []);\n  const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback((e) => {\n    const { key } = e;\n    if (key === 'Enter' && isShowingRef.current) {\n      setUserJustSelectedAnOption(true);\n    }\n  }, []);\n\n  const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      trackUserTyping(e);\n      trackUserNavigatingWithArrows(e);\n      trackUserSelectingAnOption(e);\n    },\n    [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n  );\n  const closePopover = React.useCallback(() => {\n    setForceClosePopover(true);\n    setCurrentOption('');\n  }, [setCurrentOption]);\n\n  // when the webpage is blurred, we want to close the popover\n  // should be fixing iframes interactions?\n  useEffect(() => {\n    window.addEventListener('blur', closePopover);\n    return () => {\n      window.removeEventListener('blur', closePopover);\n    };\n  }, [closePopover]);\n\n  useHandleFocusOnPopoverOpenLogic({\n    options,\n    forceFocusFirstOptionOnType,\n    isShowingPopover,\n    setCurrentOption,\n  });\n\n  return React.useMemo(\n    () => ({\n      isShowingPopover,\n      forceClosePopover,\n      setForceClosePopover,\n      userTypedSomething,\n      setUserTypedSomething,\n      setUserJustSelectedAnOption,\n      userIsNavigatingWithArrows,\n      setUserIsNavigatingWithArrows,\n      trackUserInteractingViaKeyboard,\n    }),\n    [\n      isShowingPopover,\n      forceClosePopover,\n      userTypedSomething,\n      userIsNavigatingWithArrows,\n      trackUserInteractingViaKeyboard,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAE3C,8CAAiD;AAe1C,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,QAAQ,6BAA6B,WAAW,WAAW,IAAI;AAEhF,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,QAAI,uBAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,QAAI,uBAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAG/D,QAAM,4BAA4B,QAAQ,SAAS,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,eAAe,OAAO,SAAS;AAExG,QAAM,mBACJ,CAAC;AAAA,EACD;AAAA,EACA,CAAC;AAAA,GACA;AAAA,EACC;AAIJ,QAAM,eAAe,aAAAA,QAAM,OAAO,gBAAgB;AAClD,eAAa,UAAU;AAEvB,QAAM,kBAAgE,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC7F,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,QAAQ,eAAe,QAAQ,UAAU;AACtE,4BAAsB,IAAI;AAC1B,2BAAqB,KAAK;AAC1B,kCAA4B,KAAK;AAAA,IACnC,OAAO;AACL,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,gCAA8E,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC3G,UAAM,EAAE,IAAI,IAAI;AAChB,QAAI,aAAa,YAAY,QAAQ,aAAa,QAAQ,cAAc;AACtE,oCAA8B,IAAI;AAAA,IACpC,OAAO;AACL,oCAA8B,KAAK;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,6BAA2E,aAAAA,QAAM,YAAY,CAAC,MAAM;AACxG,UAAM,EAAE,IAAI,IAAI;AAChB,QAAI,QAAQ,WAAW,aAAa,SAAS;AAC3C,kCAA4B,IAAI;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,kCAAgF,aAAAA,QAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AACA,QAAM,eAAe,aAAAA,QAAM,YAAY,MAAM;AAC3C,yBAAqB,IAAI;AACzB,qBAAiB,EAAE;AAAA,EACrB,GAAG,CAAC,gBAAgB,CAAC;AAIrB,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,gFAAiC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -38,6 +38,9 @@ const DSAutocompleteSlots = {
   CONTAINER: "container",
   INPUT: "input",
   MENU_LIST: "menu-list",
-  OPTION: "option"
+  OPTION: "option",
+  LOADING_WRAPPER: "loading-wrapper",
+  LOADING_INDICATOR: "loading-indicator",
+  SKELETON_MENU_ITEM: "skeleton-menu-item"
 };
 //# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSAutocompleteName = 'DSAutocomplete';\n\nexport const DSAutocompleteSlots = {\n  CONTAINER: 'container',\n  INPUT: 'input',\n  MENU_LIST: 'menu-list',\n  OPTION: 'option',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV;",
+  "sourcesContent": ["export const DSAutocompleteName = 'DSAutocomplete';\n\nexport const DSAutocompleteSlots = {\n  CONTAINER: 'container',\n  INPUT: 'input',\n  MENU_LIST: 'menu-list',\n  OPTION: 'option',\n  LOADING_WRAPPER: 'loading-wrapper',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;",
   "names": []
 }

package/dist/cjs/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

package/dist/cjs/parts/Section.js

@@ -35,27 +35,25 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
 var import_AutocompleteDataTestids = require("../AutocompleteDataTestids.js");
 const StyledSectionWrapper = (0, import_ds_system.styled)("section")`
   list-style: none;
-  min-height: 24px;
+  min-height: 32px;
   display: grid;
   align-items: center;
 `;
-const StyledSectionLabel = (0, import_ds_system.styled)("header")`
+const StyledSectionLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
   display: flex;
   align-items: center;
-  padding: 0px 16px;
-  min-height: 24px;
-  font-size: 1rem;
-  color: neutral-500;
+  padding: 8px 16px;
 `;
 const Section = import_react.default.memo((props) => {
   const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;
   const id = `${label.replace(/ /g, "")}-section`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSectionLabel, { id, role: "presentation", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSectionLabel, { variant: "b3-strong", component: "header", id, role: "presentation", children: label }),
     options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ds_menu_items.DSMenuItemsAction,
       {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSAutocompleteT.ItemOption[];\n  handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header')`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  return (\n    <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n      <StyledSectionLabel id={id} role=\"presentation\">\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => (\n        <DSMenuItemsAction\n          as=\"div\"\n          key={option.dsId}\n          dsId={option.dsId}\n          id={option.dsId}\n          label={option.label}\n          data-testid={AutocompleteDataTestid.OPTION}\n          disabled={option.disabled}\n          onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n          isActive={option.dsId === focusOptionIdx}\n          aria-selected=\"false\"\n        />\n      ))}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAAkB;AAClB,uBAAuB;AACvB,2BAAkC;AAClC,qCAAuC;AAYvC,MAAM,2BAAuB,yBAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,yBAAqB,yBAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,MAAM,UAAU,aAAAA,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,6CAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,gDAAC,sBAAmB,IAAQ,MAAK,gBAC9B,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WACb;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QAEH,MAAM,OAAO;AAAA,QACb,IAAI,OAAO;AAAA,QACX,OAAO,OAAO;AAAA,QACd,eAAa,sDAAuB;AAAA,QACpC,UAAU,OAAO;AAAA,QACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,QACzE,UAAU,OAAO,SAAS;AAAA,QAC1B,iBAAc;AAAA;AAAA,MART,OAAO;AAAA,IASd,CACD;AAAA,KACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSAutocompleteT.ItemOption[];\n  handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n  list-style: none;\n  min-height: 32px;\n  display: grid;\n  align-items: center;\n`;\n\n/**\n * Group-label styling aligned with its siblings (PUI-18609 / PUI-15487): b3-strong typography,\n * 32px row (8px+8px padding + b3-strong line-height, mirrored by the wrapper min-height above).\n *\n * This is one of four independent reimplementations of the section/group-label row\n * (ds-menu-items-commons, ds-form-combobox, ds-menu-button being the others). The duplication \u2014\n * and the fact that these styled calls remain slot-less here \u2014 is tracked in\n * KNOWN_INTENTIONAL_DEVIATIONS.md.\n */\nconst StyledSectionLabel = styled(DSTypography)`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  return (\n    <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n      <StyledSectionLabel variant=\"b3-strong\" component=\"header\" id={id} role=\"presentation\">\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => (\n        <DSMenuItemsAction\n          as=\"div\"\n          key={option.dsId}\n          dsId={option.dsId}\n          id={option.dsId}\n          label={option.label}\n          data-testid={AutocompleteDataTestid.OPTION}\n          disabled={option.disabled}\n          onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n          isActive={option.dsId === focusOptionIdx}\n          aria-selected=\"false\"\n        />\n      ))}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAAkB;AAClB,uBAAuB;AACvB,2BAA6B;AAC7B,2BAAkC;AAClC,qCAAuC;AAYvC,MAAM,2BAAuB,yBAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB7C,MAAM,yBAAqB,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,UAAU,aAAAA,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,6CAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,gDAAC,sBAAmB,SAAQ,aAAY,WAAU,UAAS,IAAQ,MAAK,gBACrE,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WACb;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QAEH,MAAM,OAAO;AAAA,QACb,IAAI,OAAO;AAAA,QACX,OAAO,OAAO;AAAA,QACd,eAAa,sDAAuB;AAAA,QACpC,UAAU,OAAO;AAAA,QACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,QACzE,UAAU,OAAO,SAAS;AAAA,QAC1B,iBAAc;AAAA;AAAA,MART,OAAO;AAAA,IASd,CACD;AAAA,KACH;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -43,7 +43,6 @@ 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");
 var import_constants = require("../../constants/index.js");
 const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
   name: import_constants.DSAutocompleteName,
@@ -73,13 +72,13 @@ const Container = () => {
     autoCompleteId,
     focusOptionIdx
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
-  const handleCloseMenu = (0, import_react.useCallback)(() => {
-    setForceClosePopover(true);
-  }, [setForceClosePopover]);
   const { onSelect, id, ...globalsAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(restProps);
   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 hideTooltip = (0, import_react.useCallback)(() => {
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
   const config = (0, import_react.useMemo)(
     () => ({
       placement: "bottom",
@@ -88,17 +87,15 @@ const Container = () => {
       placementOrderPreference,
       zIndex,
       customOffset: [0, 5],
-      handleCloseMenu,
-      externallyControlledIsOpen: isShowingPopover
+      externallyControlledIsOpen: isShowingPopover,
+      // referenceElement comes from context as state — pass it directly so position can be
+      // computed on the first render (no useEffect round-trip, no visibility:hidden race).
+      externalReferenceElement: referenceElement,
+      onClickOutside: hideTooltip
     }),
-    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
+    [startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip]
   );
   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);
@@ -109,7 +106,7 @@ const Container = () => {
     import_styled.StyledContainer,
     {
       id,
-      innerRef: autoCompleteRef,
+      innerRef: setReferenceElement,
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,

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, useMemo, useContext } from 'react';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\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';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nconst StyledInputText = styled(DSInputText, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.INPUT,\n})``;\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    getOwnerProps,\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      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        getOwnerProps={getOwnerProps}\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            <StyledInputText\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              getOwnerProps={getOwnerProps}\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFnB;AApFJ,mBAAwD;AACxD,uBAAkC;AAClC,gCAA4B;AAC5B,iCAAiF;AACjF,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AACvC,6BAAkC;AAClC,uBAAwD;AAExD,MAAM,sBAAkB,yBAAO,uCAAa;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAEM,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;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,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,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,QAAQ,iBAAiB,gBAAgB;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,sBAAkB,4BAAU,qBAAqB,KAAK,YAAY;AAExE,QAAM,kBAAc,0BAAY,MAAM;AACpC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,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;AAC5G,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACpC;AAAA,MACC,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,YACJ;AAAA;AAAA,QACF;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YAEA,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';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\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 { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nconst StyledInputText = styled(DSInputText, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.INPUT,\n})``;\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    getOwnerProps,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\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 hideTooltip = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as const,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex,\n      customOffset: [0, 5] as [number, number],\n      externallyControlledIsOpen: isShowingPopover,\n      // referenceElement comes from context as state \u2014 pass it directly so position can be\n      // computed on the first render (no useEffect round-trip, no visibility:hidden race).\n      externalReferenceElement: referenceElement,\n      onClickOutside: hideTooltip,\n    }),\n    [startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\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={setReferenceElement}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        getOwnerProps={getOwnerProps}\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            <StyledInputText\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              getOwnerProps={getOwnerProps}\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/LoadingContainer.js

@@ -0,0 +1,76 @@
+"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 LoadingContainer_exports = {};
+__export(LoadingContainer_exports, {
+  LoadingContainer: () => LoadingContainer,
+  default: () => LoadingContainer_default
+});
+module.exports = __toCommonJS(LoadingContainer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_constants = require("../../constants/index.js");
+var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
+const Wrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.LOADING_WRAPPER
+})`
+  display: flex;
+  justify-content: center;
+  height: 56px;
+`;
+const StyledDSCircularIndeterminateIndicator = (0, import_ds_system.styled)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.LOADING_INDICATOR
+})``;
+const LoadingContainer = ({
+  autoCompleteId,
+  getOwnerProps
+}) => (
+  /**
+   * Carries the listbox id + role + aria-busy so the input's aria-controls always resolves to a
+   * busy listbox while options are being fetched. Only one of LoadingContainer / SkeletonContainer /
+   * StyledList ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+   */
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Wrapper,
+    {
+      id: `menu-list-${autoCompleteId}`,
+      "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LOADING,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      getOwnerProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", "aria-hidden": "true", getOwnerProps })
+    }
+  )
+);
+var LoadingContainer_default = LoadingContainer;
+//# sourceMappingURL=LoadingContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nconst Wrapper = styled('div', {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\n\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.LOADING_INDICATOR,\n})``;\n\nexport const LoadingContainer = ({\n  autoCompleteId,\n  getOwnerProps,\n}: {\n  autoCompleteId: string;\n  getOwnerProps: () => object;\n}): JSX.Element => (\n  /**\n   * Carries the listbox id + role + aria-busy so the input's aria-controls always resolves to a\n   * busy listbox while options are being fetched. Only one of LoadingContainer / SkeletonContainer /\n   * StyledList ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`menu-list-${autoCompleteId}`}\n    data-testid={AutocompleteDataTestid.LOADING}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    getOwnerProps={getOwnerProps}\n  >\n    {/**\n     * The spinner exposes role=\"status\", which is a forbidden child of role=\"listbox\"\n     * (aria-allowed-children, axe Critical). aria-hidden removes it from the accessibility tree so\n     * it no longer counts as a listbox child; the listbox's own aria-busy + aria-label remains the\n     * single loading announcement. The spinner stays purely visual.\n     */}\n    <StyledDSCircularIndeterminateIndicator size=\"m\" aria-hidden=\"true\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CnB;AA7CJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AACxD,qCAAuC;AAEvC,MAAM,cAAU,yBAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAEM,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,aAAa,cAAc;AAAA,MAC/B,eAAa,sDAAuB;AAAA,MACpC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX;AAAA,MAQA,sDAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAGF,IAAO,2BAAQ;",
+  "names": []
+}

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

@@ -39,9 +39,11 @@ var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js")
 var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
 var import_useItemRenderer = require("./useItemRenderer.js");
 var import_useOnElementResize = require("../../utils/useOnElementResize.js");
+var import_LoadingContainer = require("./LoadingContainer.js");
+var import_SkeletonContainer = require("./SkeletonContainer.js");
 const MenuList = () => {
   const {
-    props: { options },
+    props: { options, isLoading, isSkeleton },
     referenceElement,
     inputRef,
     listRef,
@@ -58,21 +60,29 @@ const MenuList = () => {
     e.preventDefault();
   }, []);
   (0, import_react.useEffect)(() => {
-    if (measure) measure();
+    if (!measure) return void 0;
+    const rafId = requestAnimationFrame(() => measure());
+    return () => cancelAnimationFrame(rafId);
   }, [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)(
-    import_styled.StyledList,
-    {
-      role: "listbox",
-      id: `menu-list-${autoCompleteId}`,
-      "aria-label": "autocomplete option lists",
-      onFocus: handleOnFocus,
-      "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
-      style: { height: totalSize, margin: "8px 0px" },
-      getOwnerProps,
-      children: ItemRenderer
-    },
-    options.length
-  ) }) });
+  const renderMenuContent = () => {
+    if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { autoCompleteId, getOwnerProps });
+    if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { autoCompleteId, getOwnerProps });
+    if (options.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledList,
+      {
+        role: "listbox",
+        id: `menu-list-${autoCompleteId}`,
+        "aria-label": "autocomplete option lists",
+        onFocus: handleOnFocus,
+        "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
+        style: { height: totalSize, margin: "8px 0px" },
+        getOwnerProps,
+        children: ItemRenderer
+      },
+      options.length
+    ) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: renderMenuContent() });
 };
 //# sourceMappingURL=MenuList.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, 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    getOwnerProps,\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            getOwnerProps={getOwnerProps}\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;ADsCb;AAtCV,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;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,MAC9C;AAAA,MAEC;AAAA;AAAA,IAXI,QAAQ;AAAA,EAYf,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';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options, isLoading, isSkeleton },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    getOwnerProps,\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) return undefined;\n    // Defer measure() to the next animation frame so it never runs inside an active\n    // React sync flush (React 17 / legacy mode). Without the deferral, the call chain\n    // outputsize \u2192 setWidth \u2192 [flushSyncCallbackQueue] \u2192 commit \u2192 measureRef \u2192\n    // setMeasuredCache \u2192 [new syncQueue entry] \u2192 commit \u2192 measureRef \u2192 \u2026\n    // keeps adding entries to the live syncQueue array that flushSyncCallbackQueue\n    // is iterating over, producing 25+ nested commits and the\n    // \"Maximum update depth exceeded\" crash. requestAnimationFrame breaks that chain\n    // by scheduling measure() for after the current flush completes.\n    const rafId = requestAnimationFrame(() => measure());\n    return () => cancelAnimationFrame(rafId);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  const renderMenuContent = () => {\n    // Loading/skeleton own the listbox id + role + aria-busy while options are being fetched;\n    // only one of skeleton / loading / list is ever mounted at a time (see the containers).\n    if (isSkeleton) return <SkeletonContainer autoCompleteId={autoCompleteId} getOwnerProps={getOwnerProps} />;\n    if (isLoading) return <LoadingContainer autoCompleteId={autoCompleteId} getOwnerProps={getOwnerProps} />;\n    if (options.length === 0) return null;\n    return (\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          getOwnerProps={getOwnerProps}\n        >\n          {ItemRenderer}\n        </StyledList>\n      </StyledVirtualListWrapper>\n    );\n  };\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {renderMenuContent()}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDI;AAjD3B,mBAA0D;AAC1D,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AACnC,8BAAiC;AACjC,+BAAkC;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,WAAW,WAAW;AAAA,IACxC;AAAA,IACA;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,CAAC,QAAS,QAAO;AASrB,UAAM,QAAQ,sBAAsB,MAAM,QAAQ,CAAC;AACnD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EAEzC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,MAAM;AAG9B,QAAI,WAAY,QAAO,4CAAC,8CAAkB,gBAAgC,eAA8B;AACxG,QAAI,UAAW,QAAO,4CAAC,4CAAiB,gBAAgC,eAA8B;AACtG,QAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,WACE,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,MAAC;AAAA;AAAA,QAGC,MAAK;AAAA,QACL,IAAI,aAAa,cAAc;AAAA,QAG/B,cAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAC9C;AAAA,QAEC;AAAA;AAAA,MAXI,QAAQ;AAAA,IAYf,GACF;AAAA,EAEJ;AAEA,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,4BAAkB,GACrB;AAEJ;",
   "names": ["AutocompleteContext"]
 }

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

@@ -0,0 +1,69 @@
+"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 SkeletonContainer_exports = {};
+__export(SkeletonContainer_exports, {
+  SkeletonContainer: () => SkeletonContainer,
+  default: () => SkeletonContainer_default
+});
+module.exports = __toCommonJS(SkeletonContainer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_menu_items = require("@elliemae/ds-menu-items");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
+const StyledSkeletonMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SkeletonMenuItem, {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.SKELETON_MENU_ITEM
+})``;
+const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
+const SkeletonContainer = ({
+  autoCompleteId,
+  getOwnerProps
+}) => (
+  /**
+   * Carries the listbox id + role + aria-busy so the input's aria-controls always resolves to a
+   * busy listbox while options are being fetched. Only one of LoadingContainer / SkeletonContainer /
+   * StyledList ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+   */
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_grid.Grid,
+    {
+      id: `menu-list-${autoCompleteId}`,
+      "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.SKELETON,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n))
+    }
+  )
+);
+var SkeletonContainer_default = SkeletonContainer;
+//# sourceMappingURL=SkeletonContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/menu-list/SkeletonContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.SKELETON_MENU_ITEM,\n})``;\n\nconst SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\nexport const SkeletonContainer = ({\n  autoCompleteId,\n  getOwnerProps,\n}: {\n  autoCompleteId: string;\n  getOwnerProps: () => object;\n}): JSX.Element => (\n  /**\n   * Carries the listbox id + role + aria-busy so the input's aria-controls always resolves to a\n   * busy listbox while options are being fetched. Only one of LoadingContainer / SkeletonContainer /\n   * StyledList ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Grid\n    id={`menu-list-${autoCompleteId}`}\n    data-testid={AutocompleteDataTestid.SKELETON}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n  >\n    {SKELETON_AMOUNT.map((n, index) => (\n      <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n    ))}\n  </Grid>\n);\n\nexport default SkeletonContainer;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCjB;AAjCN,2BAAiC;AACjC,qBAAqB;AACrB,uBAAuB;AACvB,uBAAwD;AACxD,qCAAuC;AAEvC,MAAM,6BAAyB,yBAAO,uCAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/B,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,aAAa,cAAc;AAAA,MAC/B,eAAa,sDAAuB;AAAA,MACpC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MAEV,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G;AAAA;AAAA,EACH;AAAA;AAGF,IAAO,4BAAQ;",
+  "names": []
+}

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

@@ -52,6 +52,8 @@ const DSAutocompletePropTypes = {
   inputProps: import_ds_props_helpers.PropTypes.object.description("Props to pass to the input component").defaultValue({}),
   onValueChange: import_ds_props_helpers.PropTypes.func.description("Function triggered when the value of the input changes").defaultValue(""),
   renderInput: import_ds_props_helpers.PropTypes.func.description("Function to render the input").defaultValue(""),
+  isLoading: import_ds_props_helpers.PropTypes.bool.description("Shows a loading spinner in the menu while options are being fetched.").defaultValue("false"),
+  isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Displays the menu in skeleton loading mode.").defaultValue("false"),
   startPlacementPreference: import_ds_props_helpers.PropTypes.string.description("Ideal preference for context placement").defaultValue("bottom-start"),
   placementOrderPreference: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("Placement preferences for the context menu in order of most preferred to least preferred").defaultValue("['bottom-start', 'bottom-end']"),
   withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether to render the context menu in a react portal or next to the input DOM element").defaultValue("false (next to the input)"),

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 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;",
+  "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    isLoading?: boolean;\n    isSkeleton?: boolean;\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  isLoading: PropTypes.bool\n    .description('Shows a loading spinner in the menu while options are being fetched.')\n    .defaultValue('false'),\n  isSkeleton: PropTypes.bool.description('Displays the menu in skeleton loading mode.').defaultValue('false'),\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;AA4EhE,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,WAAW,kCAAU,KAClB,YAAY,sEAAsE,EAClF,aAAa,OAAO;AAAA,EACvB,YAAY,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,OAAO;AAAA,EAC1G,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/typescript-testing/typescript-autocomplete-valid.js

@@ -93,6 +93,8 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
       placementOrderPreference: ["bottom", "top"],
       withoutPortal: false,
       zIndex: 1e3,
+      isLoading: false,
+      isSkeleton: false,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {})
     }
   )