@elliemae/ds-form-layout-autocomplete 3.57.0-next.8 → 3.57.0-rc.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { cloneDeep } from 'lodash-es';\nimport { useMemo, useState } from 'react';\nimport { uid } from 'uid';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { DSAutocompletePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { usePopoverLogic } from './usePopoverLogic.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n  ReturnType<typeof useVirtualization> &\n  ReturnType<typeof usePopoverLogic> & {\n    props: DSAutocompleteT.InternalProps;\n    referenceElement: HTMLElement | null;\n    focusOptionIdx: string;\n    autoCompleteId: string;\n    optionsPerSection: DSAutocompleteT.InternalProps['options'];\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n  };\n\nexport const useAutocomplete = (propsFromUser: DSAutocompleteT.Props): AutocompleteContextT => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAutocompleteT.InternalProps>(propsFromUser, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSAutocompletePropTypes, DSAutocompleteName);\n\n  const { options } = propsWithDefault;\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n  const references = useRefs();\n\n  // Why are we cloning the options?\n  //  TODO - confirm, is this to solve the \"redux\" frozen object issue?\n  //   if yes, why do we need to mutate the options in the first place?\n  const clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n  // we need to group the options by sections to render them in the correct HTML sementic order\n  const optionsPerSection = useMemo(() => {\n    const result: DSAutocompleteT.OptionTypes[] = [];\n    let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n    clonedOptions.forEach((item) => {\n      if (item.type === 'section') {\n        // Start a new section\n        currentSection = {\n          dsId: item.dsId,\n          type: item.type,\n          label: item.label,\n          options: [],\n        };\n        result.push(currentSection);\n      } else if (item.type === 'option' && currentSection) {\n        // Add option to the current section's options array\n        currentSection.options.push(item);\n      } else if (item.type === 'option') {\n        // If we encounter an option without a section, push it to the result array\n        result.push(item);\n      }\n    });\n    return result;\n  }, [clonedOptions]);\n\n  const virtualizationManager = useVirtualization({\n    references,\n    options: optionsPerSection,\n  });\n\n  const autoCompleteId = useMemo(() => uid(4), []);\n  const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      referenceElement,\n      focusOptionIdx,\n      setCurrentOption,\n      setReferenceElement,\n      autoCompleteId,\n      optionsPerSection,\n      ...references,\n      ...popoverManager,\n      ...virtualizationManager,\n    }),\n    [\n      propsWithDefault,\n      autoCompleteId,\n      referenceElement,\n      focusOptionIdx,\n      popoverManager,\n      references,\n      virtualizationManager,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB;AAClC,SAAS,WAAW;AACpB,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB,oBAAoB;AACtD,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAc3B,MAAM,kBAAkB,CAAC,kBAA+D;AAI7F,QAAM,mBAAmB,6BAA4D,eAAe,YAAY;AAChH,iCAA+B,kBAAkB,yBAAyB,kBAAkB;AAE5F,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,aAAa,QAAQ;AAK3B,QAAM,gBAAgB,QAAQ,MAAM,UAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,SAAwC,CAAC;AAC/C,QAAI,iBAA4D;AAEhE,kBAAc,QAAQ,CAAC,SAAS;AAC9B,UAAI,KAAK,SAAS,WAAW;AAE3B,yBAAiB;AAAA,UACf,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,SAAS,CAAC;AAAA,QACZ;AACA,eAAO,KAAK,cAAc;AAAA,MAC5B,WAAW,KAAK,SAAS,YAAY,gBAAgB;AAEnD,uBAAe,QAAQ,KAAK,IAAI;AAAA,MAClC,WAAW,KAAK,SAAS,UAAU;AAEjC,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,wBAAwB,kBAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,iBAAiB,gBAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { cloneDeep } from 'lodash-es';\nimport { uid } from 'uid';\nimport { DSAutocompleteName } from '../constants/index.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { DSAutocompletePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { usePopoverLogic } from './usePopoverLogic.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n  ReturnType<typeof useVirtualization> &\n  ReturnType<typeof usePopoverLogic> & {\n    props: DSAutocompleteT.InternalProps;\n    referenceElement: HTMLElement | null;\n    focusOptionIdx: string;\n    autoCompleteId: string;\n    optionsPerSection: DSAutocompleteT.InternalProps['options'];\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    getOwnerProps: () => DSAutocompleteT.InternalProps;\n  };\n\nexport const useAutocomplete = (propsFromUser: DSAutocompleteT.Props): AutocompleteContextT => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAutocompleteT.InternalProps>(propsFromUser, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSAutocompletePropTypes, DSAutocompleteName);\n\n  const { options } = propsWithDefault;\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n  const references = useRefs();\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n  // Why are we cloning the options?\n  //  TODO - confirm, is this to solve the \"redux\" frozen object issue?\n  //   if yes, why do we need to mutate the options in the first place?\n  const clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n  // we need to group the options by sections to render them in the correct HTML sementic order\n  const optionsPerSection = useMemo(() => {\n    const result: DSAutocompleteT.OptionTypes[] = [];\n    let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n    clonedOptions.forEach((item) => {\n      if (item.type === 'section') {\n        // Start a new section\n        currentSection = {\n          dsId: item.dsId,\n          type: item.type,\n          label: item.label,\n          options: [],\n        };\n        result.push(currentSection);\n      } else if (item.type === 'option' && currentSection) {\n        // Add option to the current section's options array\n        currentSection.options.push(item);\n      } else if (item.type === 'option') {\n        // If we encounter an option without a section, push it to the result array\n        result.push(item);\n      }\n    });\n    return result;\n  }, [clonedOptions]);\n\n  const virtualizationManager = useVirtualization({\n    references,\n    options: optionsPerSection,\n  });\n\n  const autoCompleteId = useMemo(() => uid(4), []);\n  const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      referenceElement,\n      focusOptionIdx,\n      setCurrentOption,\n      setReferenceElement,\n      autoCompleteId,\n      optionsPerSection,\n      getOwnerProps,\n      ...references,\n      ...popoverManager,\n      ...virtualizationManager,\n    }),\n    [\n      propsWithDefault,\n      autoCompleteId,\n      referenceElement,\n      focusOptionIdx,\n      popoverManager,\n      references,\n      getOwnerProps,\n      virtualizationManager,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAC/C,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB,oBAAoB;AACtD,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAe3B,MAAM,kBAAkB,CAAC,kBAA+D;AAI7F,QAAM,mBAAmB,6BAA4D,eAAe,YAAY;AAChH,iCAA+B,kBAAkB,yBAAyB,kBAAkB;AAE5F,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,aAAa,QAAQ;AAE3B,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAK5E,QAAM,gBAAgB,QAAQ,MAAM,UAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,SAAwC,CAAC;AAC/C,QAAI,iBAA4D;AAEhE,kBAAc,QAAQ,CAAC,SAAS;AAC9B,UAAI,KAAK,SAAS,WAAW;AAE3B,yBAAiB;AAAA,UACf,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,SAAS,CAAC;AAAA,QACZ;AACA,eAAO,KAAK,cAAc;AAAA,MAC5B,WAAW,KAAK,SAAS,YAAY,gBAAgB;AAEnD,uBAAe,QAAQ,KAAK,IAAI;AAAA,MAClC,WAAW,KAAK,SAAS,UAAU;AAEjC,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,wBAAwB,kBAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,iBAAiB,gBAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const DSAutocompleteName = "DSAutocomplete";
+const DSAutocompleteSlots = {
+  CONTAINER: "container",
+  INPUT: "input",
+  MENU_LIST: "menu-list",
+  OPTION: "option"
+};
+export {
+  DSAutocompleteName,
+  DSAutocompleteSlots
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,9 +1,12 @@
 import * as React from "react";
 import { DSAutocomplete, DSAutocompleteWithSchema } from "./Autocomplete.js";
 import { AutocompleteDataTestid } from "./AutocompleteDataTestids.js";
+import { DSAutocompleteName, DSAutocompleteSlots } from "./constants/index.js";
 export {
   AutocompleteDataTestid,
   DSAutocomplete,
+  DSAutocompleteName,
+  DSAutocompleteSlots,
   DSAutocompleteWithSchema
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAutocomplete, DSAutocompleteWithSchema } from './Autocomplete.js';\nexport { AutocompleteDataTestid } from './AutocompleteDataTestids.js';\nexport type { DSAutocompleteT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAutocomplete, DSAutocompleteWithSchema } from './Autocomplete.js';\nexport { AutocompleteDataTestid } from './AutocompleteDataTestids.js';\nexport type { DSAutocompleteT } from './react-desc-prop-types.js';\nexport { DSAutocompleteName, DSAutocompleteSlots } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB,2BAA2B;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 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 { DSInputText } from "@elliemae/ds-form-input-text";
 import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
-import { mergeRefs } from "@elliemae/ds-system";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import AutocompleteContext from "../../AutocompleteCTX.js";
 import { StyledContainer, StyledPopperWrapper } from "./styled.js";
@@ -11,6 +11,11 @@ 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,
+  slot: DSAutocompleteSlots.INPUT
+})``;
 const Container = () => {
   const {
     props: {
@@ -26,6 +31,7 @@ const Container = () => {
     },
     isShowingPopover,
     referenceElement,
+    getOwnerProps,
     setReferenceElement,
     setUserJustSelectedAnOption,
     setUserTypedSomething,
@@ -50,7 +56,6 @@ const Container = () => {
       zIndex,
       customOffset: [0, 5],
       handleCloseMenu,
-      portalDOMContainer: document.body,
       externallyControlledIsOpen: isShowingPopover
     }),
     [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
@@ -75,6 +80,7 @@ const Container = () => {
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": AutocompleteDataTestid.CONTAINER,
+      getOwnerProps,
       ...globalsAttrs,
       ...xStyledProps,
       children: [
@@ -90,7 +96,7 @@ const Container = () => {
           spellCheck: "false",
           ...inputProps
         }) || /* @__PURE__ */ jsx(
-          DSInputText,
+          StyledInputText,
           {
             onValueChange,
             value: filter,
@@ -102,7 +108,8 @@ const Container = () => {
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: "false",
-            ...inputProps
+            ...inputProps,
+            getOwnerProps
           }
         ),
         filter && /* @__PURE__ */ jsx(

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';\n\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      zIndex,\n      ...restProps\n    },\n    isShowingPopover,\n    referenceElement,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: isShowingPopover,\n    }),\n    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n  return (\n    <>\n      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={autoCompleteRef}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={isShowingPopover}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "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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",
   "names": ["React"]
 }

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

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
-const StyledContainer = styled.div`
+import { DSAutocompleteSlots, DSAutocompleteName } from "../../constants/index.js";
+const StyledContainer = styled("div", {
+  name: DSAutocompleteName,
+  slot: DSAutocompleteSlots.CONTAINER
+})`
   width: 100%;
   height: 28px;
   position: relative;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n  width: 100%;\n  height: 28px;\n  position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n  background: #fff;\n  overflow: auto;\n  position: relative;\n`;\n\nexport const StyledHiddenDiv = styled.div`\n  display: none;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,OAAO;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSAutocompleteSlots, DSAutocompleteName } from '../../constants/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.CONTAINER,\n})`\n  width: 100%;\n  height: 28px;\n  position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n  background: #fff;\n  overflow: auto;\n  position: relative;\n`;\n\nexport const StyledHiddenDiv = styled.div`\n  display: none;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,qBAAqB,0BAA0B;AAEjD,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,OAAO;AAAA;AAAA;",
   "names": []
 }

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

@@ -13,6 +13,7 @@ const MenuList = () => {
     inputRef,
     listRef,
     autoCompleteId,
+    getOwnerProps,
     virtualListHelpers: { totalSize, measure }
   } = useContext(AutocompleteContext);
   const ItemRenderer = useItemRenderer();
@@ -35,6 +36,7 @@ const MenuList = () => {
       onFocus: handleOnFocus,
       "data-testid": AutocompleteDataTestid.LIST,
       style: { height: totalSize, margin: "8px 0px" },
+      getOwnerProps,
       children: ItemRenderer
     },
     options.length

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    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,iBAAiB;AAC1D,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,gBAAgB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "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;",
   "names": []
 }

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

@@ -1,9 +1,13 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
+import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
 const StyledListWrapper = styled.div`
   min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : "100%"};
 `;
-const StyledList = styled.div`
+const StyledList = styled("ul", {
+  name: DSAutocompleteName,
+  slot: DSAutocompleteSlots.MENU_LIST
+})`
   position: relative;
   padding: 0;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledListWrapper = styled.div<{ minWidth?: number | string }>`\n  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : '100%')};\n`;\n\nexport const StyledList = styled.div`\n  position: relative;\n  padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  maxHeight?: number;\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => `${!maxHeight ? '400' : maxHeight}px`};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,QAAQ,OAAO,MAAO;AAAA;AAG/D,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ,SAAS,IAAI;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nexport const StyledListWrapper = styled.div<{ minWidth?: number | string }>`\n  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : '100%')};\n`;\n\nexport const StyledList = styled('ul', {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.MENU_LIST,\n})`\n  position: relative;\n  padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  maxHeight?: number;\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => `${!maxHeight ? '400' : maxHeight}px`};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,QAAQ,OAAO,MAAO;AAAA;AAG/D,MAAM,aAAa,OAAO,MAAM;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ,SAAS,IAAI;AAAA;",
   "names": []
 }

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

@@ -2,9 +2,15 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useContext, useCallback } from "react";
 import { DSMenuItemsAction } from "@elliemae/ds-menu-items";
+import { styled } from "@elliemae/ds-system";
+import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
 import AutocompleteContext from "../../AutocompleteCTX.js";
 import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
 import { Section } from "../Section.js";
+const StyledMenuItemAction = styled(DSMenuItemsAction, {
+  name: DSAutocompleteName,
+  slot: DSAutocompleteSlots.OPTION
+})``;
 const useItemRenderer = () => {
   const {
     props: { onSelect },
@@ -13,7 +19,8 @@ const useItemRenderer = () => {
     setUserJustSelectedAnOption,
     focusOptionIdx,
     optionsPerSection: options,
-    virtualListHelpers
+    virtualListHelpers,
+    getOwnerProps
   } = useContext(AutocompleteContext);
   const handleClick = useCallback(
     (option, e) => {
@@ -35,6 +42,7 @@ const useItemRenderer = () => {
           innerRef: vItem.measureRef,
           dsId: option.dsId
         };
+        const getOwnerPropsArguments = () => option;
         if (option.type === "section") {
           return /* @__PURE__ */ jsx(
             Section,
@@ -49,17 +57,19 @@ const useItemRenderer = () => {
         }
         if (option.type === "option") {
           return /* @__PURE__ */ jsx(
-            DSMenuItemsAction,
+            StyledMenuItemAction,
             {
-              as: "div",
               id: option.dsId,
               label: option.label,
               "data-testid": AutocompleteDataTestid.OPTION,
               disabled: option.disabled,
+              tabIndex: 0,
               onClick: (e) => handleClick(option, e),
               isActive: option.dsId === focusOptionIdx,
               "aria-selected": "false",
-              ...generalProps
+              ...generalProps,
+              getOwnerProps,
+              getOwnerPropsArguments
             }
           );
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\nimport { Section } from '../Section.js';\nexport const useItemRenderer = () => {\n  const {\n    props: { onSelect },\n    inputRef,\n    setUserTypedSomething,\n    setUserJustSelectedAnOption,\n    focusOptionIdx,\n    optionsPerSection: options,\n    virtualListHelpers,\n  } = useContext(AutocompleteContext);\n\n  const handleClick = useCallback(\n    (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => {\n      onSelect(option.label, e);\n      setUserJustSelectedAnOption(true);\n      setUserTypedSomething(false);\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onSelect, setUserTypedSomething, setUserJustSelectedAnOption],\n  );\n\n  return useMemo(() => {\n    if (virtualListHelpers) {\n      return virtualListHelpers.virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' } as React.CSSProperties,\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n          dsId: option.dsId,\n        };\n        if (option.type === 'section') {\n          return (\n            <Section\n              label={option.label}\n              {...generalProps}\n              options={option.options}\n              handleClick={handleClick}\n              focusOptionIdx={focusOptionIdx}\n            />\n          );\n        }\n        if (option.type === 'option') {\n          return (\n            <DSMenuItemsAction\n              as=\"div\"\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              {...generalProps}\n            />\n          );\n        }\n        return null;\n      });\n    }\n    return null;\n  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0CX;AAxCZ,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,OAAO,yBAAyB;AAChC,SAAS,8BAA8B;AAEvC,SAAS,eAAe;AACjB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,cAAc;AAAA,IAClB,CAAC,QAAoC,MAA0C;AAC7E,eAAS,OAAO,OAAO,CAAC;AACxB,kCAA4B,IAAI;AAChC,4BAAsB,KAAK;AAC3B,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,uBAAuB,2BAA2B;AAAA,EAC/D;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM,KAAK;AAClC,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO,IAAI;AAAA,UACnB,UAAU,MAAM;AAAA,UAChB,MAAM,OAAO;AAAA,QACf;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACb,GAAG;AAAA,cACJ,SAAS,OAAO;AAAA,cAChB;AAAA,cACA;AAAA;AAAA,UACF;AAAA,QAEJ;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAI,OAAO;AAAA,cACX,OAAO,OAAO;AAAA,cACd,eAAa,uBAAuB;AAAA,cACpC,UAAU,OAAO;AAAA,cACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,cACzE,UAAU,OAAO,SAAS;AAAA,cAC1B,iBAAc;AAAA,cACb,GAAG;AAAA;AAAA,UACN;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\nimport { Section } from '../Section.js';\n\nconst StyledMenuItemAction = styled(DSMenuItemsAction, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.OPTION,\n})``;\n\nexport const useItemRenderer = () => {\n  const {\n    props: { onSelect },\n    inputRef,\n    setUserTypedSomething,\n    setUserJustSelectedAnOption,\n    focusOptionIdx,\n    optionsPerSection: options,\n    virtualListHelpers,\n    getOwnerProps,\n  } = useContext(AutocompleteContext);\n\n  const handleClick = useCallback(\n    (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => {\n      onSelect(option.label, e);\n      setUserJustSelectedAnOption(true);\n      setUserTypedSomething(false);\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onSelect, setUserTypedSomething, setUserJustSelectedAnOption],\n  );\n\n  return useMemo(() => {\n    if (virtualListHelpers) {\n      return virtualListHelpers.virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' } as React.CSSProperties,\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n          dsId: option.dsId,\n        };\n        const getOwnerPropsArguments = () => option;\n\n        if (option.type === 'section') {\n          return (\n            <Section\n              label={option.label}\n              {...generalProps}\n              options={option.options}\n              handleClick={handleClick}\n              focusOptionIdx={focusOptionIdx}\n            />\n          );\n        }\n        if (option.type === 'option') {\n          return (\n            <StyledMenuItemAction\n              id={option.dsId}\n              label={option.label}\n              data-testid={AutocompleteDataTestid.OPTION}\n              disabled={option.disabled}\n              tabIndex={0}\n              onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n              isActive={option.dsId === focusOptionIdx}\n              aria-selected=\"false\"\n              {...generalProps}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          );\n        }\n        return null;\n      });\n    }\n    return null;\n  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqDX;AAnDZ,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACxD,OAAO,yBAAyB;AAChC,SAAS,8BAA8B;AAEvC,SAAS,eAAe;AAExB,MAAM,uBAAuB,OAAO,mBAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAEM,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,cAAc;AAAA,IAClB,CAAC,QAAoC,MAA0C;AAC7E,eAAS,OAAO,OAAO,CAAC;AACxB,kCAA4B,IAAI;AAChC,4BAAsB,KAAK;AAC3B,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,uBAAuB,2BAA2B;AAAA,EAC/D;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM,KAAK;AAClC,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO,IAAI;AAAA,UACnB,UAAU,MAAM;AAAA,UAChB,MAAM,OAAO;AAAA,QACf;AACA,cAAM,yBAAyB,MAAM;AAErC,YAAI,OAAO,SAAS,WAAW;AAC7B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACb,GAAG;AAAA,cACJ,SAAS,OAAO;AAAA,cAChB;AAAA,cACA;AAAA;AAAA,UACF;AAAA,QAEJ;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,OAAO,OAAO;AAAA,cACd,eAAa,uBAAuB;AAAA,cACpC,UAAU,OAAO;AAAA,cACjB,UAAU;AAAA,cACV,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,cACzE,UAAU,OAAO,SAAS;AAAA,cAC1B,iBAAc;AAAA,cACb,GAAG;AAAA,cACJ;AAAA,cACA;AAAA;AAAA,UACF;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
   "names": []
 }

package/dist/types/AutocompleteDataTestids.d.ts

@@ -2,4 +2,5 @@ export declare const AutocompleteDataTestid: {
     LIST: string;
     OPTION: string;
     CONTAINER: string;
+    INPUT: string;
 };

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

@@ -10,5 +10,6 @@ export type AutocompleteContextT = ReturnType<typeof useRefs> & ReturnType<typeo
     optionsPerSection: DSAutocompleteT.InternalProps['options'];
     setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
     setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    getOwnerProps: () => DSAutocompleteT.InternalProps;
 };
 export declare const useAutocomplete: (propsFromUser: DSAutocompleteT.Props) => AutocompleteContextT;

package/dist/types/constants/index.d.ts

@@ -0,0 +1,7 @@
+export declare const DSAutocompleteName = "DSAutocomplete";
+export declare const DSAutocompleteSlots: {
+    CONTAINER: string;
+    INPUT: string;
+    MENU_LIST: string;
+    OPTION: string;
+};

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { DSAutocomplete, DSAutocompleteWithSchema } from './Autocomplete.js';
 export { AutocompleteDataTestid } from './AutocompleteDataTestids.js';
 export type { DSAutocompleteT } from './react-desc-prop-types.js';
+export { DSAutocompleteName, DSAutocompleteSlots } from './constants/index.js';

package/dist/types/parts/menu-list/styled.d.ts

@@ -1,7 +1,7 @@
 export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     minWidth?: number | string;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
 export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     maxHeight?: number;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/tests/autocomplete.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/autocomplete.renderInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/autocomplete.withSections.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-autocomplete",
-  "version": "3.57.0-next.8",
+  "version": "3.57.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout - Autocomplete",
   "files": [
@@ -35,45 +35,46 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  },
   "dependencies": {
-    "react-virtual": "~2.10.4",
-    "styled-components": "~5.3.9",
-    "uid": "^2.0.2",
-    "@elliemae/ds-floating-context": "3.57.0-next.8",
-    "@elliemae/ds-form-input-text": "3.57.0-next.8",
-    "@elliemae/ds-grid": "3.57.0-next.8",
-    "@elliemae/ds-menu-items": "3.57.0-next.8",
-    "@elliemae/ds-system": "3.57.0-next.8",
-    "@elliemae/ds-props-helpers": "3.57.0-next.8"
+    "@elliemae/ds-floating-context": "3.57.0-rc.0",
+    "@elliemae/ds-form-input-text": "3.57.0-rc.0",
+    "@elliemae/ds-grid": "3.57.0-rc.0",
+    "@elliemae/ds-menu-items": "3.57.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.57.0-rc.0",
+    "@elliemae/ds-system": "3.57.0-rc.0",
+    "react-virtual": "catalog:",
+    "styled-components": "catalog:",
+    "uid": "catalog:"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.65",
-    "@elliemae/pui-theme": "~2.13.0",
-    "jest": "~29.7.0",
-    "styled-components": "~5.3.9",
-    "styled-system": "^5.1.5",
-    "@elliemae/ds-form-input-text": "3.57.0-next.8",
-    "@elliemae/ds-monorepo-devops": "3.57.0-next.8",
-    "@elliemae/ds-test-utils": "3.57.0-next.8"
+    "@elliemae/ds-form-input-text": "workspace:*",
+    "@elliemae/ds-monorepo-devops": "3.57.0-rc.0",
+    "@elliemae/ds-test-utils": "3.57.0-rc.0",
+    "@elliemae/pui-cli": "catalog:",
+    "@elliemae/pui-theme": "catalog:",
+    "jest": "catalog:",
+    "styled-components": "catalog:",
+    "styled-system": "catalog:"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.13.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "styled-components": "~5.3.9",
-    "styled-system": "^5.1.5"
+    "@elliemae/pui-theme": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "styled-components": "catalog:",
+    "styled-system": "catalog:"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": true
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "node ../../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
-  }
-}
+  "gitHead": "7e95aacd3d36427e4659f360714c3e0bbc4378bc"
+}

package/dist/cjs/DSAutocompleteDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSAutocompleteDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSAutocompleteName = 'DSAutocomplete';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;",
-  "names": []
-}

package/dist/esm/DSAutocompleteDefinitions.js

@@ -1,6 +0,0 @@
-import * as React from "react";
-const DSAutocompleteName = "DSAutocomplete";
-export {
-  DSAutocompleteName
-};
-//# sourceMappingURL=DSAutocompleteDefinitions.js.map

package/dist/esm/DSAutocompleteDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAutocompleteDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAutocompleteName = 'DSAutocomplete';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;",
-  "names": []
-}

package/dist/types/DSAutocompleteDefinitions.d.ts

@@ -1 +0,0 @@
-export declare const DSAutocompleteName = "DSAutocomplete";