@elliemae/ds-form-layout-autocomplete 3.53.0-alpha.1 → 3.53.0-alpha.3

package/dist/cjs/Autocomplete.js

@@ -39,12 +39,12 @@ var import_useAutocomplete = require("./config/useAutocomplete.js");
 var import_container = require("./parts/container/index.js");
 var import_AutocompleteCTX = require("./AutocompleteCTX.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_DSAutocompleteDefinitions = require("./DSAutocompleteDefinitions.js");
+var import_constants = require("./constants/index.js");
 const DSAutocomplete = (props) => {
   const ctx = (0, import_useAutocomplete.useAutocomplete)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AutocompleteCTX.AutocompleteContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_container.Container, {}) });
 };
-DSAutocomplete.displayName = import_DSAutocompleteDefinitions.DSAutocompleteName;
+DSAutocomplete.displayName = import_constants.DSAutocompleteName;
 const DSAutocompleteWithSchema = (0, import_ds_props_helpers.describe)(DSAutocomplete);
 DSAutocompleteWithSchema.propTypes = import_react_desc_prop_types.DSAutocompletePropTypesSchema;
 //# sourceMappingURL=Autocomplete.js.map

package/dist/cjs/Autocomplete.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Autocomplete.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete.js';\nimport { Container } from './parts/container/index.js';\nimport { AutocompleteContext } from './AutocompleteCTX.js';\nimport type { DSAutocompleteT } from './react-desc-prop-types.js';\nimport { DSAutocompletePropTypesSchema } from './react-desc-prop-types.js';\nimport { DSAutocompleteName } from './DSAutocompleteDefinitions.js';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n  const ctx = useAutocomplete(props);\n  return (\n    <AutocompleteContext.Provider value={ctx}>\n      <Container />\n    </AutocompleteContext.Provider>\n  );\n};\n\nDSAutocomplete.displayName = DSAutocompleteName;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = DSAutocompletePropTypesSchema;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,6BAAgC;AAChC,uBAA0B;AAC1B,6BAAoC;AAEpC,mCAA8C;AAC9C,uCAAmC;AAEnC,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,UAAM,wCAAgB,KAAK;AACjC,SACE,4CAAC,2CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,8BAAU,GACb;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete.js';\nimport { Container } from './parts/container/index.js';\nimport { AutocompleteContext } from './AutocompleteCTX.js';\nimport type { DSAutocompleteT } from './react-desc-prop-types.js';\nimport { DSAutocompletePropTypesSchema } from './react-desc-prop-types.js';\nimport { DSAutocompleteName } from './constants/index.js';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n  const ctx = useAutocomplete(props);\n  return (\n    <AutocompleteContext.Provider value={ctx}>\n      <Container />\n    </AutocompleteContext.Provider>\n  );\n};\n\nDSAutocomplete.displayName = DSAutocompleteName;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = DSAutocompletePropTypesSchema;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,6BAAgC;AAChC,uBAA0B;AAC1B,6BAAoC;AAEpC,mCAA8C;AAC9C,uBAAmC;AAEnC,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,UAAM,wCAAgB,KAAK;AACjC,SACE,4CAAC,2CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,8BAAU,GACb;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/AutocompleteDataTestids.js

@@ -35,6 +35,7 @@ var React = __toESM(require("react"));
 const AutocompleteDataTestid = {
   LIST: "autocomplete-menu-list",
   OPTION: "autocomplete-option",
-  CONTAINER: "autocomplete-container"
+  CONTAINER: "autocomplete-container",
+  INPUT: "ds-autocomplete-input"
 };
 //# sourceMappingURL=AutocompleteDataTestids.js.map

package/dist/cjs/AutocompleteDataTestids.js.map

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

package/dist/cjs/config/useAutocomplete.js

@@ -32,22 +32,23 @@ __export(useAutocomplete_exports, {
 });
 module.exports = __toCommonJS(useAutocomplete_exports);
 var React = __toESM(require("react"));
+var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_lodash_es = require("lodash-es");
-var import_react = require("react");
 var import_uid = require("uid");
-var import_DSAutocompleteDefinitions = require("../DSAutocompleteDefinitions.js");
+var import_constants = require("../constants/index.js");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_usePopoverLogic = require("./usePopoverLogic.js");
 var import_useRefs = require("./useRefs.js");
 var import_useVirtualization = require("./useVirtualization.js");
 const useAutocomplete = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAutocompletePropTypes, import_DSAutocompleteDefinitions.DSAutocompleteName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAutocompletePropTypes, import_constants.DSAutocompleteName);
   const { options } = propsWithDefault;
   const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const [focusOptionIdx, setCurrentOption] = (0, import_react.useState)("");
   const references = (0, import_useRefs.useRefs)();
+  const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
   const clonedOptions = (0, import_react.useMemo)(() => (0, import_lodash_es.cloneDeep)(options), [options]);
   const optionsPerSection = (0, import_react.useMemo)(() => {
     const result = [];
@@ -84,6 +85,7 @@ const useAutocomplete = (propsFromUser) => {
       setReferenceElement,
       autoCompleteId,
       optionsPerSection,
+      getOwnerProps,
       ...references,
       ...popoverManager,
       ...virtualizationManager
@@ -95,6 +97,7 @@ const useAutocomplete = (propsFromUser) => {
       focusOptionIdx,
       popoverManager,
       references,
+      getOwnerProps,
       virtualizationManager,
       optionsPerSection
     ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useAutocomplete.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA6E;AAC7E,uBAA0B;AAC1B,mBAAkC;AAClC,iBAAoB;AACpB,uCAAmC;AAEnC,mCAAsD;AACtD,6BAAgC;AAChC,qBAAwB;AACxB,+BAAkC;AAc3B,MAAM,kBAAkB,CAAC,kBAA+D;AAI7F,QAAM,uBAAmB,sDAA4D,eAAe,yCAAY;AAChH,8DAA+B,kBAAkB,sDAAyB,mDAAkB;AAE5F,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,QAAI,uBAAiB,EAAE;AAE9D,QAAM,iBAAa,wBAAQ;AAK3B,QAAM,oBAAgB,sBAAQ,UAAM,4BAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,wBAAoB,sBAAQ,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,4BAAwB,4CAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,qBAAiB,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,qBAAiB,wCAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,UAAM;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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,8BAA6E;AAC7E,uBAA0B;AAC1B,iBAAoB;AACpB,uBAAmC;AAEnC,mCAAsD;AACtD,6BAAgC;AAChC,qBAAwB;AACxB,+BAAkC;AAe3B,MAAM,kBAAkB,CAAC,kBAA+D;AAI7F,QAAM,uBAAmB,sDAA4D,eAAe,yCAAY;AAChH,8DAA+B,kBAAkB,sDAAyB,mCAAkB;AAE5F,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,QAAI,uBAAiB,EAAE;AAE9D,QAAM,iBAAa,wBAAQ;AAE3B,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAK5E,QAAM,oBAAgB,sBAAQ,UAAM,4BAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,wBAAoB,sBAAQ,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,4BAAwB,4CAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,qBAAiB,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,qBAAiB,wCAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,UAAM;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/cjs/{tests/utils.js → config/useClickOutside.js}

@@ -26,55 +26,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var utils_exports = {};
-__export(utils_exports, {
-  basicOptions: () => basicOptions,
-  sectionOptions: () => sectionOptions
+var useClickOutside_exports = {};
+__export(useClickOutside_exports, {
+  useOnClickOutside: () => useOnClickOutside
 });
-module.exports = __toCommonJS(utils_exports);
+module.exports = __toCommonJS(useClickOutside_exports);
 var React = __toESM(require("react"));
-const basicOptions = [
-  {
-    dsId: "1",
-    type: "option",
-    label: "44444-4444"
-  },
-  {
-    dsId: "2",
-    type: "option",
-    label: "44444-5555"
-  },
-  {
-    dsId: "3",
-    type: "option",
-    label: "44444-6666"
-  }
-];
-const sectionOptions = [
-  {
-    dsId: "2-section",
-    type: "section",
-    label: "Some Neat Section Title"
-  },
-  {
-    dsId: "1",
-    type: "option",
-    label: "44444-4444"
-  },
-  {
-    dsId: "2",
-    type: "option",
-    label: "44444-5555"
-  },
-  {
-    dsId: "3-section",
-    type: "section",
-    label: "Another Neat Section Title"
-  },
-  {
-    dsId: "3",
-    type: "option",
-    label: "44444-6666"
-  }
-];
-//# sourceMappingURL=utils.js.map
+var import_react = require("react");
+function useOnClickOutside(ref, cb, excludeNode) {
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
+        return;
+      }
+      cb(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, cb, excludeNode]);
+}
+//# sourceMappingURL=useClickOutside.js.map

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

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

package/dist/cjs/{DSAutocompleteDefinitions.js → constants/index.js}

@@ -26,11 +26,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DSAutocompleteDefinitions_exports = {};
-__export(DSAutocompleteDefinitions_exports, {
-  DSAutocompleteName: () => DSAutocompleteName
+var constants_exports = {};
+__export(constants_exports, {
+  DSAutocompleteName: () => DSAutocompleteName,
+  DSAutocompleteSlots: () => DSAutocompleteSlots
 });
-module.exports = __toCommonJS(DSAutocompleteDefinitions_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 const DSAutocompleteName = "DSAutocomplete";
-//# sourceMappingURL=DSAutocompleteDefinitions.js.map
+const DSAutocompleteSlots = {
+  CONTAINER: "container",
+  INPUT: "input",
+  MENU_LIST: "menu-list",
+  OPTION: "option"
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/index.js

@@ -30,10 +30,13 @@ var index_exports = {};
 __export(index_exports, {
   AutocompleteDataTestid: () => import_AutocompleteDataTestids.AutocompleteDataTestid,
   DSAutocomplete: () => import_Autocomplete.DSAutocomplete,
+  DSAutocompleteName: () => import_constants.DSAutocompleteName,
+  DSAutocompleteSlots: () => import_constants.DSAutocompleteSlots,
   DSAutocompleteWithSchema: () => import_Autocomplete.DSAutocompleteWithSchema
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_Autocomplete = require("./Autocomplete.js");
 var import_AutocompleteDataTestids = require("./AutocompleteDataTestids.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSAutocomplete, DSAutocompleteWithSchema } from './Autocomplete.js';\nexport { AutocompleteDataTestid } from './AutocompleteDataTestids.js';\nexport type { DSAutocompleteT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,qCAAuC;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,qCAAuC;AAEvC,uBAAwD;",
   "names": []
 }

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

@@ -34,14 +34,21 @@ module.exports = __toCommonJS(Container_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
 var import_styled = require("./styled.js");
 var import_menu_list = require("../menu-list/index.js");
 var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
 var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
+var import_useClickOutside = require("../../config/useClickOutside.js");
+var import_constants = require("../../constants/index.js");
+const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.INPUT
+})``;
 const Container = () => {
   const {
     props: {
@@ -52,16 +59,18 @@ const Container = () => {
       filter,
       placementOrderPreference,
       renderInput,
+      zIndex,
       ...restProps
     },
     isShowingPopover,
+    referenceElement,
+    getOwnerProps,
     setReferenceElement,
     setUserJustSelectedAnOption,
     setUserTypedSomething,
     setUserIsNavigatingWithArrows,
     setForceClosePopover,
     autoCompleteId,
-    referenceElement,
     focusOptionIdx
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const handleCloseMenu = (0, import_react.useCallback)(() => {
@@ -71,6 +80,25 @@ const Container = () => {
   const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(restProps);
   const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const input = !onValueChange && !renderInput ? import_react.default.Children.only(children) : null;
+  const config = (0, import_react.useMemo)(
+    () => ({
+      placement: "bottom",
+      withoutAnimation: true,
+      startPlacementPreference,
+      placementOrderPreference,
+      zIndex,
+      customOffset: [0, 5],
+      handleCloseMenu,
+      externallyControlledIsOpen: isShowingPopover
+    }),
+    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
+  );
+  const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
+  const autoCompleteRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
+  const hideTooltip = (0, import_react.useCallback)(() => {
+    setForceClosePopover(true);
+  }, [setForceClosePopover]);
+  (0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
   const onFocusPopoverStatusSync = (0, import_react.useCallback)(() => {
     setForceClosePopover(false);
     setUserJustSelectedAnOption(false);
@@ -81,10 +109,11 @@ const Container = () => {
     import_styled.StyledContainer,
     {
       id,
-      innerRef: setReferenceElement,
+      innerRef: autoCompleteRef,
       onKeyDown: onInputKeyDown,
       onFocus: onFocusPopoverStatusSync,
       "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
+      getOwnerProps,
       ...globalsAttrs,
       ...xStyledProps,
       children: [
@@ -100,7 +129,7 @@ const Container = () => {
           spellCheck: "false",
           ...inputProps
         }) || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_form_input_text.DSInputText,
+          StyledInputText,
           {
             onValueChange,
             value: filter,
@@ -112,22 +141,17 @@ const Container = () => {
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: "false",
-            ...inputProps
+            ...inputProps,
+            getOwnerProps
           }
         ),
         filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_popperjs.DSPopperJS,
+          import_ds_floating_context.FloatingWrapper,
           {
-            customOffset: [0, 5],
-            closeContextMenu: handleCloseMenu,
-            referenceElement,
-            showPopover: isShowingPopover,
-            startPlacementPreference,
-            placementOrderPreference,
-            withoutPortal: true,
-            withoutArrow: true,
-            withoutAnimation: true,
-            zIndex: 10,
+            innerRef: refs.setFloating,
+            floatingStyles,
+            isOpen: isShowingPopover,
+            context,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
           }
         )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      ...restProps\n    },\n    isShowingPopover,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    referenceElement,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n  return (\n    <>\n      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={setReferenceElement}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <DSInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n            />\n          )}\n        {filter && (\n          <DSPopperJS\n            customOffset={[0, 5]}\n            closeContextMenu={handleCloseMenu}\n            referenceElement={referenceElement as HTMLElement}\n            showPopover={isShowingPopover}\n            startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n            placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\n            withoutPortal\n            withoutArrow\n            withoutAnimation\n            zIndex={10}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </DSPopperJS>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDnB;AApDJ,mBAA+C;AAC/C,yBAA2B;AAE3B,gCAA4B;AAC5B,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nconst StyledInputText = styled(DSInputText, {\n  name: DSAutocompleteName,\n  slot: DSAutocompleteSlots.INPUT,\n})``;\n\nexport const Container = (): JSX.Element => {\n  const {\n    props: {\n      startPlacementPreference,\n      onValueChange,\n      inputProps,\n      children,\n      filter,\n      placementOrderPreference,\n      renderInput,\n      zIndex,\n      ...restProps\n    },\n    isShowingPopover,\n    referenceElement,\n    getOwnerProps,\n    setReferenceElement,\n    setUserJustSelectedAnOption,\n    setUserTypedSomething,\n    setUserIsNavigatingWithArrows,\n    setForceClosePopover,\n    autoCompleteId,\n    focusOptionIdx,\n  } = useContext(AutocompleteContext);\n\n  const handleCloseMenu = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n  const xStyledProps = useGetXstyledProps(restProps);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      externallyControlledIsOpen: isShowingPopover,\n    }),\n    [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setForceClosePopover(true);\n  }, [setForceClosePopover]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  const onFocusPopoverStatusSync = useCallback(() => {\n    setForceClosePopover(false);\n    setUserJustSelectedAnOption(false);\n    setUserTypedSomething(false);\n    setUserIsNavigatingWithArrows(false);\n  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n  return (\n    <>\n      {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n      {/* Fix for PUI-11627 */}\n      {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n      <StyledContainer\n        id={id}\n        innerRef={autoCompleteRef}\n        onKeyDown={onInputKeyDown}\n        onFocus={onFocusPopoverStatusSync}\n        // aria-owns={`menu-list-${autoCompleteId}`}\n        data-testid={AutocompleteDataTestid.CONTAINER}\n        getOwnerProps={getOwnerProps}\n        {...globalsAttrs}\n        {...xStyledProps}\n      >\n        {input ||\n          (renderInput &&\n            renderInput({\n              value: filter,\n              role: 'combobox',\n              'aria-expanded': isShowingPopover,\n              'aria-controls': `menu-list-${autoCompleteId}`,\n              'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n              'aria-autocomplete': 'list',\n              autoComplete: 'off',\n              autoCorrect: 'off',\n              spellCheck: 'false',\n              ...inputProps,\n            })) || (\n            <StyledInputText\n              onValueChange={onValueChange}\n              value={filter}\n              role=\"combobox\"\n              aria-expanded={isShowingPopover}\n              aria-controls={`menu-list-${autoCompleteId}`}\n              aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n              aria-autocomplete=\"list\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck=\"false\"\n              {...inputProps}\n              getOwnerProps={getOwnerProps}\n            />\n          )}\n        {filter && (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={isShowingPopover}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFnB;AApFJ,mBAAwD;AACxD,uBAAkC;AAClC,gCAA4B;AAC5B,iCAAiF;AACjF,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AACvC,6BAAkC;AAClC,uBAAwD;AAExD,MAAM,sBAAkB,yBAAO,uCAAa;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAEM,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,QAAQ,iBAAiB,gBAAgB;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,sBAAkB,4BAAU,qBAAqB,KAAK,YAAY;AAExE,QAAM,kBAAc,0BAAY,MAAM;AACpC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAC5G,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YAEA,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
   "names": ["AutocompleteContext", "React"]
 }

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

@@ -35,7 +35,11 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-const StyledContainer = import_ds_system.styled.div`
+var import_constants = require("../../constants/index.js");
+const StyledContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.CONTAINER
+})`
   width: 100%;
   height: 28px;
   position: relative;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAwD;AAEjD,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;",
   "names": []
 }

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

@@ -46,6 +46,7 @@ const MenuList = () => {
     inputRef,
     listRef,
     autoCompleteId,
+    getOwnerProps,
     virtualListHelpers: { totalSize, measure }
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
@@ -56,7 +57,7 @@ const MenuList = () => {
   const preventMouseDown = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (measure) measure();
   }, [width]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -68,6 +69,7 @@ const MenuList = () => {
       onFocus: handleOnFocus,
       "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
       style: { height: totalSize, margin: "8px 0px" },
+      getOwnerProps,
       children: ItemRenderer
     },
     options.length

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCb;AArCV,mBAAgE;AAChE,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    getOwnerProps,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n            getOwnerProps={getOwnerProps}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCb;AAtCV,mBAA0D;AAC1D,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAC9C;AAAA,MAEC;AAAA;AAAA,IAXI,QAAQ;AAAA,EAYf,GACF,GAEJ;AAEJ;",
   "names": ["AutocompleteContext"]
 }

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

@@ -35,10 +35,14 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
 const StyledListWrapper = import_ds_system.styled.div`
   min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : "100%"};
 `;
-const StyledList = import_ds_system.styled.div`
+const StyledList = (0, import_ds_system.styled)("ul", {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.MENU_LIST
+})`
   position: relative;
   padding: 0;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,QAAQ,OAAO,MAAO;AAAA;AAG/D,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ,SAAS,IAAI;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAwD;AAEjD,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,QAAQ,OAAO,MAAO;AAAA;AAG/D,MAAM,iBAAa,yBAAO,MAAM;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ,SAAS,IAAI;AAAA;",
   "names": []
 }

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

@@ -35,9 +35,15 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
 var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
 var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
 var import_Section = require("../Section.js");
+const StyledMenuItemAction = (0, import_ds_system.styled)(import_ds_menu_items.DSMenuItemsAction, {
+  name: import_constants.DSAutocompleteName,
+  slot: import_constants.DSAutocompleteSlots.OPTION
+})``;
 const useItemRenderer = () => {
   const {
     props: { onSelect },
@@ -46,7 +52,8 @@ const useItemRenderer = () => {
     setUserJustSelectedAnOption,
     focusOptionIdx,
     optionsPerSection: options,
-    virtualListHelpers
+    virtualListHelpers,
+    getOwnerProps
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const handleClick = (0, import_react.useCallback)(
     (option, e) => {
@@ -68,6 +75,7 @@ const useItemRenderer = () => {
           innerRef: vItem.measureRef,
           dsId: option.dsId
         };
+        const getOwnerPropsArguments = () => option;
         if (option.type === "section") {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Section.Section,
@@ -82,17 +90,19 @@ const useItemRenderer = () => {
         }
         if (option.type === "option") {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_menu_items.DSMenuItemsAction,
+            StyledMenuItemAction,
             {
-              as: "div",
               id: option.dsId,
               label: option.label,
               "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
               disabled: option.disabled,
+              tabIndex: 0,
               onClick: (e) => handleClick(option, e),
               isActive: option.dsId === focusOptionIdx,
               "aria-selected": "false",
-              ...generalProps
+              ...generalProps,
+              getOwnerProps,
+              getOwnerPropsArguments
             }
           );
         }