@elliemae/ds-form-layout-autocomplete 3.70.0-next.7 → 3.70.0-next.71

package/dist/cjs/typescript-testing/typescript-autocomplete-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-autocomplete-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSAutocomplete } from '../index.js';\nimport type { DSAutocompleteT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSAutocompleteT.Props;\ntype ComponentPropsInternals = DSAutocompleteT.InternalProps;\ntype ComponentPropsDefaultProps = DSAutocompleteT.DefaultProps;\ntype ComponentPropsRequiredProps = DSAutocompleteT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  options: [],\n  onSelect: () => {},\n  filter: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n  forceFocusFirstOptionOnType: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: <div />,\n  options: [],\n  onSelect: () => {},\n  filter: '',\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: <div />,\n  options: [],\n  onSelect: () => {},\n  filter: '',\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSAutocomplete {...testExplicitDefinition} />\n    <DSAutocomplete {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSAutocomplete\n      options={[]}\n      onSelect={() => {}}\n      filter=\"\"\n      startPlacementPreference=\"bottom\"\n      placementOrderPreference={['bottom', 'top']}\n      withoutPortal={false}\n      zIndex={1000}\n    >\n      <input />\n    </DSAutocomplete>\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkDX;AAjDZ,eAA+B;AAS/B,MAAM,oBAAiD;AAAA,EACrD,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAC5C;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,6BAA6B;AAC/B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,4CAAC,SAAI;AAAA,EACf,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AAAA,EACR,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AACV;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,4CAAC,SAAI;AAAA,EACf,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AAAA,EACR,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AACV;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,2BAAgB,GAAG,wBAAwB;AAAA,EAC5C,4CAAC,2BAAgB,GAAG,8BAA8B;AAAA,EAElD;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,QAAO;AAAA,MACP,0BAAyB;AAAA,MACzB,0BAA0B,CAAC,UAAU,KAAK;AAAA,MAC1C,eAAe;AAAA,MACf,QAAQ;AAAA,MAER,sDAAC,WAAM;AAAA;AAAA,EACT;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSAutocomplete } from '../index.js';\nimport type { DSAutocompleteT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSAutocompleteT.Props;\ntype ComponentPropsInternals = DSAutocompleteT.InternalProps;\ntype ComponentPropsDefaultProps = DSAutocompleteT.DefaultProps;\ntype ComponentPropsRequiredProps = DSAutocompleteT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  options: [],\n  onSelect: () => {},\n  filter: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n  forceFocusFirstOptionOnType: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: <div />,\n  options: [],\n  onSelect: () => {},\n  filter: '',\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: <div />,\n  options: [],\n  onSelect: () => {},\n  filter: '',\n  startPlacementPreference: 'bottom',\n  placementOrderPreference: ['bottom', 'top'],\n  withoutPortal: false,\n  zIndex: 1000,\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSAutocomplete {...testExplicitDefinition} />\n    <DSAutocomplete {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSAutocomplete\n      options={[]}\n      onSelect={() => {}}\n      filter=\"\"\n      startPlacementPreference=\"bottom\"\n      placementOrderPreference={['bottom', 'top']}\n      withoutPortal={false}\n      zIndex={1000}\n      isLoading={false}\n      isSkeleton={false}\n    >\n      <input />\n    </DSAutocomplete>\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkDX;AAjDZ,eAA+B;AAS/B,MAAM,oBAAiD;AAAA,EACrD,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAC5C;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,6BAA6B;AAC/B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,4CAAC,SAAI;AAAA,EACf,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AAAA,EACR,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AACV;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,4CAAC,SAAI;AAAA,EACf,SAAS,CAAC;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ;AAAA,EACR,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,UAAU,KAAK;AAAA,EAC1C,eAAe;AAAA,EACf,QAAQ;AACV;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,2BAAgB,GAAG,wBAAwB;AAAA,EAC5C,4CAAC,2BAAgB,GAAG,8BAA8B;AAAA,EAElD;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,QAAO;AAAA,MACP,0BAAyB;AAAA,MACzB,0BAA0B,CAAC,UAAU,KAAK;AAAA,MAC1C,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ,sDAAC,WAAM;AAAA;AAAA,EACT;AAAA,GACF;",
   "names": []
 }

package/dist/esm/AutocompleteDataTestids.js

@@ -3,7 +3,9 @@ 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"
 };
 export {
   AutocompleteDataTestid

package/dist/esm/AutocompleteDataTestids.js.map

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

package/dist/esm/config/usePopoverLogic.js

@@ -2,13 +2,13 @@ import * as React from "react";
 import React2, { useState, useEffect } from "react";
 import { useHandleFocusOnPopoverOpenLogic } from "./useHandleFocusOnPopoverOpenLogic.js";
 const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
-  const { options, filter, forceFocusFirstOptionOnType } = propsWithDefault;
+  const { options, filter, forceFocusFirstOptionOnType, isLoading, isSkeleton } = propsWithDefault;
   const [forceClosePopover, setForceClosePopover] = useState(false);
   const [userTypedSomething, setUserTypedSomething] = useState(false);
   const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState(false);
   const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState(false);
   const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;
-  const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;
+  const 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/esm/config/usePopoverLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePopoverLogic.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,iBAAiB;AAE3C,SAAS,wCAAwC;AAe1C,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,QAAQ,4BAA4B,IAAI;AAEzD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,IAAI,SAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAC/D,QAAM,2BAA2B,QAAQ,SAAS,KAAK,OAAO,SAAS;AAEvE,QAAM,mBACJ,CAAC;AAAA,EACD;AAAA,EACA,CAAC;AAAA,GACA;AAAA,EACC;AAIJ,QAAM,eAAeA,OAAM,OAAO,gBAAgB;AAClD,eAAa,UAAU;AAEvB,QAAM,kBAAgEA,OAAM,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,gCAA8EA,OAAM,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,6BAA2EA,OAAM,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,kCAAgFA,OAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AACA,QAAM,eAAeA,OAAM,YAAY,MAAM;AAC3C,yBAAqB,IAAI;AACzB,qBAAiB,EAAE;AAAA,EACrB,GAAG,CAAC,gBAAgB,CAAC;AAIrB,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,mCAAiC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,iBAAiB;AAE3C,SAAS,wCAAwC;AAe1C,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,QAAQ,6BAA6B,WAAW,WAAW,IAAI;AAEhF,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,IAAI,SAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;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,eAAeA,OAAM,OAAO,gBAAgB;AAClD,eAAa,UAAU;AAEvB,QAAM,kBAAgEA,OAAM,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,gCAA8EA,OAAM,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,6BAA2EA,OAAM,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,kCAAgFA,OAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AACA,QAAM,eAAeA,OAAM,YAAY,MAAM;AAC3C,yBAAqB,IAAI;AACzB,qBAAiB,EAAE;AAAA,EACrB,GAAG,CAAC,gBAAgB,CAAC;AAIrB,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,mCAAiC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;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/esm/constants/index.js

@@ -4,7 +4,10 @@ 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"
 };
 export {
   DSAutocompleteName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAutocompleteName = 'DSAutocomplete';\n\nexport const DSAutocompleteSlots = {\n  CONTAINER: 'container',\n  INPUT: 'input',\n  MENU_LIST: 'menu-list',\n  OPTION: 'option',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,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/esm/package.json

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

package/dist/esm/parts/Section.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SACE,KADF;AAnCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AAYvC,MAAM,uBAAuB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,qBAAqB,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,qBAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,wBAAC,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,uBAAuB;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SACE,KADF;AA1CJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AAYvC,MAAM,uBAAuB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB7C,MAAM,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,qBAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,wBAAC,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,uBAAuB;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/esm/parts/container/Container.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useMemo, useContext } from "react";
-import { styled, mergeRefs } from "@elliemae/ds-system";
+import { styled } from "@elliemae/ds-system";
 import { DSInputText } from "@elliemae/ds-form-input-text";
 import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
@@ -10,7 +10,6 @@ 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";
 import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
 const StyledInputText = styled(DSInputText, {
   name: DSAutocompleteName,
@@ -40,13 +39,13 @@ const Container = () => {
     autoCompleteId,
     focusOptionIdx
   } = useContext(AutocompleteContext);
-  const handleCloseMenu = useCallback(() => {
-    setForceClosePopover(true);
-  }, [setForceClosePopover]);
   const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);
   const xStyledProps = useGetXstyledProps(restProps);
   const { onInputKeyDown } = useKeyboardNavigation();
   const input = !onValueChange && !renderInput ? React2.Children.only(children) : null;
+  const hideTooltip = useCallback(() => {
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
   const config = useMemo(
     () => ({
       placement: "bottom",
@@ -55,17 +54,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 } = 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);
@@ -76,7 +73,7 @@ const Container = () => {
     StyledContainer,
     {
       id,
-      innerRef: autoCompleteRef,
+      innerRef: setReferenceElement,
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": AutocompleteDataTestid.CONTAINER,

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, 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"],
-  "mappings": "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",
+  "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';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFnB,mBA8BQ,KAzBN,YALF;AA9EJ,OAAOA,UAAS,aAAa,SAAS,kBAAkB;AACxD,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,wBAAwB,0BAA0B;AAC3D,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,kBAAkB,OAAO,aAAa;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,oBAAoB;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,IAAI,WAAW,mBAAmB;AAElC,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,cAAc,YAAY,MAAM;AACpC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB,4BAA4B;AAAA;AAAA;AAAA,MAG5B,0BAA0B;AAAA,MAC1B,gBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,0BAA0B,0BAA0B,QAAQ,kBAAkB,kBAAkB,WAAW;AAAA,EAC9G;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,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;AAC5G,SACE,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,uBAAuB;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,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@elliemae/ds-system";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
+import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
+const Wrapper = styled("div", {
+  name: DSAutocompleteName,
+  slot: DSAutocompleteSlots.LOADING_WRAPPER
+})`
+  display: flex;
+  justify-content: center;
+  height: 56px;
+`;
+const StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {
+  name: DSAutocompleteName,
+  slot: 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__ */ jsx(
+    Wrapper,
+    {
+      id: `menu-list-${autoCompleteId}`,
+      "data-testid": AutocompleteDataTestid.LOADING,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      getOwnerProps,
+      children: /* @__PURE__ */ jsx(StyledDSCircularIndeterminateIndicator, { size: "m", "aria-hidden": "true", getOwnerProps })
+    }
+  )
+);
+var LoadingContainer_default = LoadingContainer;
+export {
+  LoadingContainer,
+  LoadingContainer_default as default
+};
+//# sourceMappingURL=LoadingContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/LoadingContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;AC8CnB;AA7CJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AACjD,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,8BAA8B;AAEvC,MAAM,UAAU,OAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,yCAAyC,OAAO,kCAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,oBAAoB;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,uBAAuB;AAAA,MACpC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX;AAAA,MAQA,8BAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAGF,IAAO,2BAAQ;",
+  "names": []
+}

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

@@ -6,9 +6,11 @@ import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
 import AutocompleteContext from "../../AutocompleteCTX.js";
 import { useItemRenderer } from "./useItemRenderer.js";
 import { useOnElementResize } from "../../utils/useOnElementResize.js";
+import { LoadingContainer } from "./LoadingContainer.js";
+import { SkeletonContainer } from "./SkeletonContainer.js";
 const MenuList = () => {
   const {
-    props: { options },
+    props: { options, isLoading, isSkeleton },
     referenceElement,
     inputRef,
     listRef,
@@ -25,22 +27,30 @@ const MenuList = () => {
     e.preventDefault();
   }, []);
   useEffect(() => {
-    if (measure) measure();
+    if (!measure) return void 0;
+    const rafId = requestAnimationFrame(() => measure());
+    return () => cancelAnimationFrame(rafId);
   }, [width]);
-  return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(
-    StyledList,
-    {
-      role: "listbox",
-      id: `menu-list-${autoCompleteId}`,
-      "aria-label": "autocomplete option lists",
-      onFocus: handleOnFocus,
-      "data-testid": AutocompleteDataTestid.LIST,
-      style: { height: totalSize, margin: "8px 0px" },
-      getOwnerProps,
-      children: ItemRenderer
-    },
-    options.length
-  ) }) });
+  const renderMenuContent = () => {
+    if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { autoCompleteId, getOwnerProps });
+    if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { autoCompleteId, getOwnerProps });
+    if (options.length === 0) return null;
+    return /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(
+      StyledList,
+      {
+        role: "listbox",
+        id: `menu-list-${autoCompleteId}`,
+        "aria-label": "autocomplete option lists",
+        onFocus: handleOnFocus,
+        "data-testid": AutocompleteDataTestid.LIST,
+        style: { height: totalSize, margin: "8px 0px" },
+        getOwnerProps,
+        children: ItemRenderer
+      },
+      options.length
+    ) });
+  };
+  return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: renderMenuContent() });
 };
 export {
   MenuList

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, 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCb;AAtCV,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;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,MAC9C;AAAA,MAEC;AAAA;AAAA,IAXI,QAAQ;AAAA,EAYf,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';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDI;AAjD3B,SAAgB,YAAY,aAAa,iBAAiB;AAC1D,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;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,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,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,oBAAC,qBAAkB,gBAAgC,eAA8B;AACxG,QAAI,UAAW,QAAO,oBAAC,oBAAiB,gBAAgC,eAA8B;AACtG,QAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,WACE,oBAAC,4BAAyB,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,uBAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAC9C;AAAA,QAEC;AAAA;AAAA,MAXI,QAAQ;AAAA,IAYf,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,4BAAkB,GACrB;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { SkeletonMenuItem } from "@elliemae/ds-menu-items";
+import { Grid } from "@elliemae/ds-grid";
+import { styled } from "@elliemae/ds-system";
+import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
+import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
+const StyledSkeletonMenuItem = styled(SkeletonMenuItem, {
+  name: DSAutocompleteName,
+  slot: 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__ */ jsx(
+    Grid,
+    {
+      id: `menu-list-${autoCompleteId}`,
+      "data-testid": AutocompleteDataTestid.SKELETON,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n))
+    }
+  )
+);
+var SkeletonContainer_default = SkeletonContainer;
+export {
+  SkeletonContainer,
+  SkeletonContainer_default as default
+};
+//# sourceMappingURL=SkeletonContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/SkeletonContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAjCN,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,8BAA8B;AAEvC,MAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,oBAAoB;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,uBAAuB;AAAA,MACpC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MAEV,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G;AAAA;AAAA,EACH;AAAA;AAGF,IAAO,4BAAQ;",
+  "names": []
+}

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

@@ -17,6 +17,8 @@ const DSAutocompletePropTypes = {
   inputProps: PropTypes.object.description("Props to pass to the input component").defaultValue({}),
   onValueChange: PropTypes.func.description("Function triggered when the value of the input changes").defaultValue(""),
   renderInput: PropTypes.func.description("Function to render the input").defaultValue(""),
+  isLoading: PropTypes.bool.description("Shows a loading spinner in the menu while options are being fetched.").defaultValue("false"),
+  isSkeleton: PropTypes.bool.description("Displays the menu in skeleton loading mode.").defaultValue("false"),
   startPlacementPreference: PropTypes.string.description("Ideal preference for context placement").defaultValue("bottom-start"),
   placementOrderPreference: PropTypes.arrayOf(PropTypes.string).description("Placement preferences for the context menu in order of most preferred to least preferred").defaultValue("['bottom-start', 'bottom-end']"),
   withoutPortal: 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/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 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;",
+  "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    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"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,SAAS,2BAA2B,WAAW,wBAAwB;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,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,WAAW,UAAU,KAClB,YAAY,sEAAsE,EAClF,aAAa,OAAO;AAAA,EACvB,YAAY,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,OAAO;AAAA,EAC1G,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/typescript-testing/typescript-autocomplete-valid.js

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