@elliemae/ds-form-layout-autocomplete 3.57.0-next.42 → 3.57.0-next.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/cjs/Autocomplete.js +2 -2
  2. package/dist/cjs/Autocomplete.js.map +2 -2
  3. package/dist/cjs/AutocompleteDataTestids.js +2 -1
  4. package/dist/cjs/AutocompleteDataTestids.js.map +2 -2
  5. package/dist/cjs/config/useAutocomplete.js +6 -3
  6. package/dist/cjs/config/useAutocomplete.js.map +2 -2
  7. package/dist/cjs/{DSAutocompleteDefinitions.js → constants/index.js} +12 -5
  8. package/dist/cjs/constants/index.js.map +7 -0
  9. package/dist/cjs/index.js +3 -0
  10. package/dist/cjs/index.js.map +2 -2
  11. package/dist/cjs/parts/container/Container.js +11 -3
  12. package/dist/cjs/parts/container/Container.js.map +2 -2
  13. package/dist/cjs/parts/container/styled.js +5 -1
  14. package/dist/cjs/parts/container/styled.js.map +2 -2
  15. package/dist/cjs/parts/menu-list/MenuList.js +2 -0
  16. package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
  17. package/dist/cjs/parts/menu-list/styled.js +5 -1
  18. package/dist/cjs/parts/menu-list/styled.js.map +2 -2
  19. package/dist/cjs/parts/menu-list/useItemRenderer.js +13 -4
  20. package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
  21. package/dist/esm/Autocomplete.js +1 -1
  22. package/dist/esm/Autocomplete.js.map +1 -1
  23. package/dist/esm/AutocompleteDataTestids.js +2 -1
  24. package/dist/esm/AutocompleteDataTestids.js.map +2 -2
  25. package/dist/esm/config/useAutocomplete.js +5 -2
  26. package/dist/esm/config/useAutocomplete.js.map +2 -2
  27. package/dist/esm/constants/index.js +13 -0
  28. package/dist/esm/constants/index.js.map +7 -0
  29. package/dist/esm/index.js +3 -0
  30. package/dist/esm/index.js.map +2 -2
  31. package/dist/esm/parts/container/Container.js +11 -3
  32. package/dist/esm/parts/container/Container.js.map +2 -2
  33. package/dist/esm/parts/container/styled.js +5 -1
  34. package/dist/esm/parts/container/styled.js.map +2 -2
  35. package/dist/esm/parts/menu-list/MenuList.js +2 -0
  36. package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
  37. package/dist/esm/parts/menu-list/styled.js +5 -1
  38. package/dist/esm/parts/menu-list/styled.js.map +2 -2
  39. package/dist/esm/parts/menu-list/useItemRenderer.js +13 -4
  40. package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
  41. package/dist/types/AutocompleteDataTestids.d.ts +1 -0
  42. package/dist/types/config/useAutocomplete.d.ts +1 -0
  43. package/dist/types/constants/index.d.ts +7 -0
  44. package/dist/types/index.d.ts +1 -0
  45. package/dist/types/parts/menu-list/styled.d.ts +1 -1
  46. package/dist/types/tests/autocomplete.keyboard.test.d.ts +1 -0
  47. package/dist/types/tests/autocomplete.renderInput.test.d.ts +1 -0
  48. package/dist/types/tests/autocomplete.withSections.test.d.ts +1 -0
  49. package/package.json +10 -10
  50. package/dist/cjs/DSAutocompleteDefinitions.js.map +0 -7
  51. package/dist/esm/DSAutocompleteDefinitions.js +0 -6
  52. package/dist/esm/DSAutocompleteDefinitions.js.map +0 -7
  53. package/dist/types/DSAutocompleteDefinitions.d.ts +0 -1
  54. /package/dist/types/tests/{a11y/axe.test.d.ts → autocomplete.a11y.test.d.ts} +0 -0
  55. /package/dist/types/tests/{general.test.d.ts → autocomplete.data-testid.test.d.ts} +0 -0
  56. /package/dist/types/tests/{keyboard-interactions/composition-keyboard-interactions.test.d.ts → autocomplete.events.test.d.ts} +0 -0
  57. /package/dist/types/tests/{renderInput.test.d.ts → autocomplete.exports.test.d.ts} +0 -0
  58. /package/dist/types/tests/{withSections.test.d.ts → autocomplete.get-owner-props.test.d.ts} +0 -0
@@ -39,12 +39,12 @@ var import_useAutocomplete = require("./config/useAutocomplete.js");
39
39
  var import_container = require("./parts/container/index.js");
40
40
  var import_AutocompleteCTX = require("./AutocompleteCTX.js");
41
41
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
42
- var import_DSAutocompleteDefinitions = require("./DSAutocompleteDefinitions.js");
42
+ var import_constants = require("./constants/index.js");
43
43
  const DSAutocomplete = (props) => {
44
44
  const ctx = (0, import_useAutocomplete.useAutocomplete)(props);
45
45
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AutocompleteCTX.AutocompleteContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_container.Container, {}) });
46
46
  };
47
- DSAutocomplete.displayName = import_DSAutocompleteDefinitions.DSAutocompleteName;
47
+ DSAutocomplete.displayName = import_constants.DSAutocompleteName;
48
48
  const DSAutocompleteWithSchema = (0, import_ds_props_helpers.describe)(DSAutocomplete);
49
49
  DSAutocompleteWithSchema.propTypes = import_react_desc_prop_types.DSAutocompletePropTypesSchema;
50
50
  //# sourceMappingURL=Autocomplete.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Autocomplete.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -35,6 +35,7 @@ var React = __toESM(require("react"));
35
35
  const AutocompleteDataTestid = {
36
36
  LIST: "autocomplete-menu-list",
37
37
  OPTION: "autocomplete-option",
38
- CONTAINER: "autocomplete-container"
38
+ CONTAINER: "autocomplete-container",
39
+ INPUT: "ds-autocomplete-input"
39
40
  };
40
41
  //# sourceMappingURL=AutocompleteDataTestids.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/AutocompleteDataTestids.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AACb;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -32,22 +32,23 @@ __export(useAutocomplete_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(useAutocomplete_exports);
34
34
  var React = __toESM(require("react"));
35
+ var import_react = require("react");
35
36
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
36
37
  var import_lodash_es = require("lodash-es");
37
- var import_react = require("react");
38
38
  var import_uid = require("uid");
39
- var import_DSAutocompleteDefinitions = require("../DSAutocompleteDefinitions.js");
39
+ var import_constants = require("../constants/index.js");
40
40
  var import_react_desc_prop_types = require("../react-desc-prop-types.js");
41
41
  var import_usePopoverLogic = require("./usePopoverLogic.js");
42
42
  var import_useRefs = require("./useRefs.js");
43
43
  var import_useVirtualization = require("./useVirtualization.js");
44
44
  const useAutocomplete = (propsFromUser) => {
45
45
  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
46
- (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAutocompletePropTypes, import_DSAutocompleteDefinitions.DSAutocompleteName);
46
+ (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAutocompletePropTypes, import_constants.DSAutocompleteName);
47
47
  const { options } = propsWithDefault;
48
48
  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
49
49
  const [focusOptionIdx, setCurrentOption] = (0, import_react.useState)("");
50
50
  const references = (0, import_useRefs.useRefs)();
51
+ const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
51
52
  const clonedOptions = (0, import_react.useMemo)(() => (0, import_lodash_es.cloneDeep)(options), [options]);
52
53
  const optionsPerSection = (0, import_react.useMemo)(() => {
53
54
  const result = [];
@@ -84,6 +85,7 @@ const useAutocomplete = (propsFromUser) => {
84
85
  setReferenceElement,
85
86
  autoCompleteId,
86
87
  optionsPerSection,
88
+ getOwnerProps,
87
89
  ...references,
88
90
  ...popoverManager,
89
91
  ...virtualizationManager
@@ -95,6 +97,7 @@ const useAutocomplete = (propsFromUser) => {
95
97
  focusOptionIdx,
96
98
  popoverManager,
97
99
  references,
100
+ getOwnerProps,
98
101
  virtualizationManager,
99
102
  optionsPerSection
100
103
  ]
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useAutocomplete.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -26,11 +26,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
26
26
  mod
27
27
  ));
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var DSAutocompleteDefinitions_exports = {};
30
- __export(DSAutocompleteDefinitions_exports, {
31
- DSAutocompleteName: () => DSAutocompleteName
29
+ var constants_exports = {};
30
+ __export(constants_exports, {
31
+ DSAutocompleteName: () => DSAutocompleteName,
32
+ DSAutocompleteSlots: () => DSAutocompleteSlots
32
33
  });
33
- module.exports = __toCommonJS(DSAutocompleteDefinitions_exports);
34
+ module.exports = __toCommonJS(constants_exports);
34
35
  var React = __toESM(require("react"));
35
36
  const DSAutocompleteName = "DSAutocomplete";
36
- //# sourceMappingURL=DSAutocompleteDefinitions.js.map
37
+ const DSAutocompleteSlots = {
38
+ CONTAINER: "container",
39
+ INPUT: "input",
40
+ MENU_LIST: "menu-list",
41
+ OPTION: "option"
42
+ };
43
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "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"],
5
+ "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;",
6
+ "names": []
7
+ }
package/dist/cjs/index.js CHANGED
@@ -30,10 +30,13 @@ var index_exports = {};
30
30
  __export(index_exports, {
31
31
  AutocompleteDataTestid: () => import_AutocompleteDataTestids.AutocompleteDataTestid,
32
32
  DSAutocomplete: () => import_Autocomplete.DSAutocomplete,
33
+ DSAutocompleteName: () => import_constants.DSAutocompleteName,
34
+ DSAutocompleteSlots: () => import_constants.DSAutocompleteSlots,
33
35
  DSAutocompleteWithSchema: () => import_Autocomplete.DSAutocompleteWithSchema
34
36
  });
35
37
  module.exports = __toCommonJS(index_exports);
36
38
  var React = __toESM(require("react"));
37
39
  var import_Autocomplete = require("./Autocomplete.js");
38
40
  var import_AutocompleteDataTestids = require("./AutocompleteDataTestids.js");
41
+ var import_constants = require("./constants/index.js");
39
42
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,qCAAuC;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,qCAAuC;AAEvC,uBAAwD;",
6
6
  "names": []
7
7
  }
@@ -34,9 +34,9 @@ module.exports = __toCommonJS(Container_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
+ var import_ds_system = require("@elliemae/ds-system");
37
38
  var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
38
39
  var import_ds_floating_context = require("@elliemae/ds-floating-context");
39
- var import_ds_system = require("@elliemae/ds-system");
40
40
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
41
41
  var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
42
42
  var import_styled = require("./styled.js");
@@ -44,6 +44,11 @@ var import_menu_list = require("../menu-list/index.js");
44
44
  var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
45
45
  var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
46
46
  var import_useClickOutside = require("../../config/useClickOutside.js");
47
+ var import_constants = require("../../constants/index.js");
48
+ const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
49
+ name: import_constants.DSAutocompleteName,
50
+ slot: import_constants.DSAutocompleteSlots.INPUT
51
+ })``;
47
52
  const Container = () => {
48
53
  const {
49
54
  props: {
@@ -59,6 +64,7 @@ const Container = () => {
59
64
  },
60
65
  isShowingPopover,
61
66
  referenceElement,
67
+ getOwnerProps,
62
68
  setReferenceElement,
63
69
  setUserJustSelectedAnOption,
64
70
  setUserTypedSomething,
@@ -107,6 +113,7 @@ const Container = () => {
107
113
  onKeyDown: onInputKeyDown,
108
114
  onFocus: onFocusPopoverStatusSync,
109
115
  "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
116
+ getOwnerProps,
110
117
  ...globalsAttrs,
111
118
  ...xStyledProps,
112
119
  children: [
@@ -122,7 +129,7 @@ const Container = () => {
122
129
  spellCheck: "false",
123
130
  ...inputProps
124
131
  }) || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
125
- import_ds_form_input_text.DSInputText,
132
+ StyledInputText,
126
133
  {
127
134
  onValueChange,
128
135
  value: filter,
@@ -134,7 +141,8 @@ const Container = () => {
134
141
  autoComplete: "off",
135
142
  autoCorrect: "off",
136
143
  spellCheck: "false",
137
- ...inputProps
144
+ ...inputProps,
145
+ getOwnerProps
138
146
  }
139
147
  ),
140
148
  filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\n\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n zIndex,\n ...restProps\n },\n isShowingPopover,\n referenceElement,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n externallyControlledIsOpen: isShowingPopover,\n }),\n [startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n return (\n <>\n {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n {/* Fix for PUI-11627 */}\n {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n <StyledContainer\n id={id}\n innerRef={autoCompleteRef}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n // aria-owns={`menu-list-${autoCompleteId}`}\n data-testid={AutocompleteDataTestid.CONTAINER}\n {...globalsAttrs}\n {...xStyledProps}\n >\n {input ||\n (renderInput &&\n renderInput({\n value: filter,\n role: 'combobox',\n 'aria-expanded': isShowingPopover,\n 'aria-controls': `menu-list-${autoCompleteId}`,\n 'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n 'aria-autocomplete': 'list',\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n ...inputProps,\n })) || (\n <DSInputText\n onValueChange={onValueChange}\n value={filter}\n role=\"combobox\"\n aria-expanded={isShowingPopover}\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n aria-autocomplete=\"list\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...inputProps}\n />\n )}\n {filter && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={isShowingPopover}\n context={context}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n )}\n </StyledContainer>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["AutocompleteContext", "React"]
7
7
  }
@@ -35,7 +35,11 @@ __export(styled_exports, {
35
35
  module.exports = __toCommonJS(styled_exports);
36
36
  var React = __toESM(require("react"));
37
37
  var import_ds_system = require("@elliemae/ds-system");
38
- const StyledContainer = import_ds_system.styled.div`
38
+ var import_constants = require("../../constants/index.js");
39
+ const StyledContainer = (0, import_ds_system.styled)("div", {
40
+ name: import_constants.DSAutocompleteName,
41
+ slot: import_constants.DSAutocompleteSlots.CONTAINER
42
+ })`
39
43
  width: 100%;
40
44
  height: 28px;
41
45
  position: relative;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -46,6 +46,7 @@ const MenuList = () => {
46
46
  inputRef,
47
47
  listRef,
48
48
  autoCompleteId,
49
+ getOwnerProps,
49
50
  virtualListHelpers: { totalSize, measure }
50
51
  } = (0, import_react.useContext)(import_AutocompleteCTX.default);
51
52
  const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
@@ -68,6 +69,7 @@ const MenuList = () => {
68
69
  onFocus: handleOnFocus,
69
70
  "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
70
71
  style: { height: totalSize, margin: "8px 0px" },
72
+ getOwnerProps,
71
73
  children: ItemRenderer
72
74
  },
73
75
  options.length
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext, useCallback, useEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options },\n referenceElement,\n inputRef,\n listRef,\n autoCompleteId,\n virtualListHelpers: { totalSize, measure },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(referenceElement);\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n useEffect(() => {\n if (measure) measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n <StyledList\n // recalculate the key to force the re-render of the list and update virtualization\n key={options.length}\n role=\"listbox\"\n id={`menu-list-${autoCompleteId}`}\n // default aria label until we integrate the aria props on autocomplete\n // this is for the axe core to pass\n aria-label=\"autocomplete option lists\"\n onFocus={handleOnFocus}\n data-testid={AutocompleteDataTestid.LIST}\n style={{ height: totalSize, margin: '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCb;AArCV,mBAA0D;AAC1D,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
4
+ "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"],
5
+ "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;",
6
6
  "names": ["AutocompleteContext"]
7
7
  }
@@ -35,10 +35,14 @@ __export(styled_exports, {
35
35
  module.exports = __toCommonJS(styled_exports);
36
36
  var React = __toESM(require("react"));
37
37
  var import_ds_system = require("@elliemae/ds-system");
38
+ var import_constants = require("../../constants/index.js");
38
39
  const StyledListWrapper = import_ds_system.styled.div`
39
40
  min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : "100%"};
40
41
  `;
41
- const StyledList = import_ds_system.styled.div`
42
+ const StyledList = (0, import_ds_system.styled)("ul", {
43
+ name: import_constants.DSAutocompleteName,
44
+ slot: import_constants.DSAutocompleteSlots.MENU_LIST
45
+ })`
42
46
  position: relative;
43
47
  padding: 0;
44
48
  `;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -35,9 +35,15 @@ var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = require("react");
37
37
  var import_ds_menu_items = require("@elliemae/ds-menu-items");
38
+ var import_ds_system = require("@elliemae/ds-system");
39
+ var import_constants = require("../../constants/index.js");
38
40
  var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
39
41
  var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
40
42
  var import_Section = require("../Section.js");
43
+ const StyledMenuItemAction = (0, import_ds_system.styled)(import_ds_menu_items.DSMenuItemsAction, {
44
+ name: import_constants.DSAutocompleteName,
45
+ slot: import_constants.DSAutocompleteSlots.OPTION
46
+ })``;
41
47
  const useItemRenderer = () => {
42
48
  const {
43
49
  props: { onSelect },
@@ -46,7 +52,8 @@ const useItemRenderer = () => {
46
52
  setUserJustSelectedAnOption,
47
53
  focusOptionIdx,
48
54
  optionsPerSection: options,
49
- virtualListHelpers
55
+ virtualListHelpers,
56
+ getOwnerProps
50
57
  } = (0, import_react.useContext)(import_AutocompleteCTX.default);
51
58
  const handleClick = (0, import_react.useCallback)(
52
59
  (option, e) => {
@@ -68,6 +75,7 @@ const useItemRenderer = () => {
68
75
  innerRef: vItem.measureRef,
69
76
  dsId: option.dsId
70
77
  };
78
+ const getOwnerPropsArguments = () => option;
71
79
  if (option.type === "section") {
72
80
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
81
  import_Section.Section,
@@ -82,9 +90,8 @@ const useItemRenderer = () => {
82
90
  }
83
91
  if (option.type === "option") {
84
92
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
- import_ds_menu_items.DSMenuItemsAction,
93
+ StyledMenuItemAction,
86
94
  {
87
- as: "div",
88
95
  id: option.dsId,
89
96
  label: option.label,
90
97
  "data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
@@ -93,7 +100,9 @@ const useItemRenderer = () => {
93
100
  onClick: (e) => handleClick(option, e),
94
101
  isActive: option.dsId === focusOptionIdx,
95
102
  "aria-selected": "false",
96
- ...generalProps
103
+ ...generalProps,
104
+ getOwnerProps,
105
+ getOwnerPropsArguments
97
106
  }
98
107
  );
99
108
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 tabIndex={0}\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CX;AAxCZ,mBAAwD;AACxD,2BAAkC;AAClC,6BAAgC;AAChC,qCAAuC;AAEvC,qBAAwB;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,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;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,aAAO,sBAAQ,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,sDAAuB;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;AAAA,UACN;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
4
+ "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDX;AAnDZ,mBAAwD;AACxD,2BAAkC;AAClC,uBAAuB;AACvB,uBAAwD;AACxD,6BAAgC;AAChC,qCAAuC;AAEvC,qBAAwB;AAExB,MAAM,2BAAuB,yBAAO,wCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qCAAoB;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,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;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,aAAO,sBAAQ,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,sDAAuB;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;",
6
6
  "names": ["AutocompleteContext"]
7
7
  }
@@ -5,7 +5,7 @@ import { useAutocomplete } from "./config/useAutocomplete.js";
5
5
  import { Container } from "./parts/container/index.js";
6
6
  import { AutocompleteContext } from "./AutocompleteCTX.js";
7
7
  import { DSAutocompletePropTypesSchema } from "./react-desc-prop-types.js";
8
- import { DSAutocompleteName } from "./DSAutocompleteDefinitions.js";
8
+ import { DSAutocompleteName } from "./constants/index.js";
9
9
  const DSAutocomplete = (props) => {
10
10
  const ctx = useAutocomplete(props);
11
11
  return /* @__PURE__ */ jsx(AutocompleteContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Container, {}) });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/Autocomplete.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAEpC,SAAS,qCAAqC;AAC9C,SAAS,0BAA0B;AAEnC,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,MAAM,gBAAgB,KAAK;AACjC,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAU,GACb;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -2,7 +2,8 @@ import * as React from "react";
2
2
  const AutocompleteDataTestid = {
3
3
  LIST: "autocomplete-menu-list",
4
4
  OPTION: "autocomplete-option",
5
- CONTAINER: "autocomplete-container"
5
+ CONTAINER: "autocomplete-container",
6
+ INPUT: "ds-autocomplete-input"
6
7
  };
7
8
  export {
8
9
  AutocompleteDataTestid
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/AutocompleteDataTestids.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const AutocompleteDataTestid = {\n LIST: 'autocomplete-menu-list',\n OPTION: 'autocomplete-option',\n CONTAINER: 'autocomplete-container',\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AACb;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const AutocompleteDataTestid = {\n LIST: 'autocomplete-menu-list',\n OPTION: 'autocomplete-option',\n CONTAINER: 'autocomplete-container',\n INPUT: 'ds-autocomplete-input',\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,9 @@
1
1
  import * as React from "react";
2
+ import { useCallback, useMemo, useState } from "react";
2
3
  import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
3
4
  import { cloneDeep } from "lodash-es";
4
- import { useMemo, useState } from "react";
5
5
  import { uid } from "uid";
6
- import { DSAutocompleteName } from "../DSAutocompleteDefinitions.js";
6
+ import { DSAutocompleteName } from "../constants/index.js";
7
7
  import { DSAutocompletePropTypes, defaultProps } from "../react-desc-prop-types.js";
8
8
  import { usePopoverLogic } from "./usePopoverLogic.js";
9
9
  import { useRefs } from "./useRefs.js";
@@ -15,6 +15,7 @@ const useAutocomplete = (propsFromUser) => {
15
15
  const [referenceElement, setReferenceElement] = useState(null);
16
16
  const [focusOptionIdx, setCurrentOption] = useState("");
17
17
  const references = useRefs();
18
+ const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
18
19
  const clonedOptions = useMemo(() => cloneDeep(options), [options]);
19
20
  const optionsPerSection = useMemo(() => {
20
21
  const result = [];
@@ -51,6 +52,7 @@ const useAutocomplete = (propsFromUser) => {
51
52
  setReferenceElement,
52
53
  autoCompleteId,
53
54
  optionsPerSection,
55
+ getOwnerProps,
54
56
  ...references,
55
57
  ...popoverManager,
56
58
  ...virtualizationManager
@@ -62,6 +64,7 @@ const useAutocomplete = (propsFromUser) => {
62
64
  focusOptionIdx,
63
65
  popoverManager,
64
66
  references,
67
+ getOwnerProps,
65
68
  virtualizationManager,
66
69
  optionsPerSection
67
70
  ]
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,13 @@
1
+ import * as React from "react";
2
+ const DSAutocompleteName = "DSAutocomplete";
3
+ const DSAutocompleteSlots = {
4
+ CONTAINER: "container",
5
+ INPUT: "input",
6
+ MENU_LIST: "menu-list",
7
+ OPTION: "option"
8
+ };
9
+ export {
10
+ DSAutocompleteName,
11
+ DSAutocompleteSlots
12
+ };
13
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
+ "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV;",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import * as React from "react";
2
2
  import { DSAutocomplete, DSAutocompleteWithSchema } from "./Autocomplete.js";
3
3
  import { AutocompleteDataTestid } from "./AutocompleteDataTestids.js";
4
+ import { DSAutocompleteName, DSAutocompleteSlots } from "./constants/index.js";
4
5
  export {
5
6
  AutocompleteDataTestid,
6
7
  DSAutocomplete,
8
+ DSAutocompleteName,
9
+ DSAutocompleteSlots,
7
10
  DSAutocompleteWithSchema
8
11
  };
9
12
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,8BAA8B;",
4
+ "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,gCAAgC;AACzD,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB,2BAA2B;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,9 @@
1
1
  import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2, { useCallback, useMemo, useContext } from "react";
4
+ import { styled, mergeRefs } from "@elliemae/ds-system";
4
5
  import { DSInputText } from "@elliemae/ds-form-input-text";
5
6
  import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
6
- import { mergeRefs } from "@elliemae/ds-system";
7
7
  import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
8
8
  import AutocompleteContext from "../../AutocompleteCTX.js";
9
9
  import { StyledContainer, StyledPopperWrapper } from "./styled.js";
@@ -11,6 +11,11 @@ import { MenuList } from "../menu-list/index.js";
11
11
  import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
12
12
  import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
13
13
  import { useOnClickOutside } from "../../config/useClickOutside.js";
14
+ import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
15
+ const StyledInputText = styled(DSInputText, {
16
+ name: DSAutocompleteName,
17
+ slot: DSAutocompleteSlots.INPUT
18
+ })``;
14
19
  const Container = () => {
15
20
  const {
16
21
  props: {
@@ -26,6 +31,7 @@ const Container = () => {
26
31
  },
27
32
  isShowingPopover,
28
33
  referenceElement,
34
+ getOwnerProps,
29
35
  setReferenceElement,
30
36
  setUserJustSelectedAnOption,
31
37
  setUserTypedSomething,
@@ -74,6 +80,7 @@ const Container = () => {
74
80
  onKeyDown: onInputKeyDown,
75
81
  onFocus: onFocusPopoverStatusSync,
76
82
  "data-testid": AutocompleteDataTestid.CONTAINER,
83
+ getOwnerProps,
77
84
  ...globalsAttrs,
78
85
  ...xStyledProps,
79
86
  children: [
@@ -89,7 +96,7 @@ const Container = () => {
89
96
  spellCheck: "false",
90
97
  ...inputProps
91
98
  }) || /* @__PURE__ */ jsx(
92
- DSInputText,
99
+ StyledInputText,
93
100
  {
94
101
  onValueChange,
95
102
  value: filter,
@@ -101,7 +108,8 @@ const Container = () => {
101
108
  autoComplete: "off",
102
109
  autoCorrect: "off",
103
110
  spellCheck: "false",
104
- ...inputProps
111
+ ...inputProps,
112
+ getOwnerProps
105
113
  }
106
114
  ),
107
115
  filter && /* @__PURE__ */ jsx(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
4
- "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 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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -1,6 +1,10 @@
1
1
  import * as React from "react";
2
2
  import { styled } from "@elliemae/ds-system";
3
- const StyledContainer = styled.div`
3
+ import { DSAutocompleteSlots, DSAutocompleteName } from "../../constants/index.js";
4
+ const StyledContainer = styled("div", {
5
+ name: DSAutocompleteName,
6
+ slot: DSAutocompleteSlots.CONTAINER
7
+ })`
4
8
  width: 100%;
5
9
  height: 28px;
6
10
  position: relative;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -13,6 +13,7 @@ const MenuList = () => {
13
13
  inputRef,
14
14
  listRef,
15
15
  autoCompleteId,
16
+ getOwnerProps,
16
17
  virtualListHelpers: { totalSize, measure }
17
18
  } = useContext(AutocompleteContext);
18
19
  const ItemRenderer = useItemRenderer();
@@ -35,6 +36,7 @@ const MenuList = () => {
35
36
  onFocus: handleOnFocus,
36
37
  "data-testid": AutocompleteDataTestid.LIST,
37
38
  style: { height: totalSize, margin: "8px 0px" },
39
+ getOwnerProps,
38
40
  children: ItemRenderer
39
41
  },
40
42
  options.length
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,13 @@
1
1
  import * as React from "react";
2
2
  import { styled } from "@elliemae/ds-system";
3
+ import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
3
4
  const StyledListWrapper = styled.div`
4
5
  min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : "100%"};
5
6
  `;
6
- const StyledList = styled.div`
7
+ const StyledList = styled("ul", {
8
+ name: DSAutocompleteName,
9
+ slot: DSAutocompleteSlots.MENU_LIST
10
+ })`
7
11
  position: relative;
8
12
  padding: 0;
9
13
  `;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -2,9 +2,15 @@ import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useMemo, useContext, useCallback } from "react";
4
4
  import { DSMenuItemsAction } from "@elliemae/ds-menu-items";
5
+ import { styled } from "@elliemae/ds-system";
6
+ import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
5
7
  import AutocompleteContext from "../../AutocompleteCTX.js";
6
8
  import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
7
9
  import { Section } from "../Section.js";
10
+ const StyledMenuItemAction = styled(DSMenuItemsAction, {
11
+ name: DSAutocompleteName,
12
+ slot: DSAutocompleteSlots.OPTION
13
+ })``;
8
14
  const useItemRenderer = () => {
9
15
  const {
10
16
  props: { onSelect },
@@ -13,7 +19,8 @@ const useItemRenderer = () => {
13
19
  setUserJustSelectedAnOption,
14
20
  focusOptionIdx,
15
21
  optionsPerSection: options,
16
- virtualListHelpers
22
+ virtualListHelpers,
23
+ getOwnerProps
17
24
  } = useContext(AutocompleteContext);
18
25
  const handleClick = useCallback(
19
26
  (option, e) => {
@@ -35,6 +42,7 @@ const useItemRenderer = () => {
35
42
  innerRef: vItem.measureRef,
36
43
  dsId: option.dsId
37
44
  };
45
+ const getOwnerPropsArguments = () => option;
38
46
  if (option.type === "section") {
39
47
  return /* @__PURE__ */ jsx(
40
48
  Section,
@@ -49,9 +57,8 @@ const useItemRenderer = () => {
49
57
  }
50
58
  if (option.type === "option") {
51
59
  return /* @__PURE__ */ jsx(
52
- DSMenuItemsAction,
60
+ StyledMenuItemAction,
53
61
  {
54
- as: "div",
55
62
  id: option.dsId,
56
63
  label: option.label,
57
64
  "data-testid": AutocompleteDataTestid.OPTION,
@@ -60,7 +67,9 @@ const useItemRenderer = () => {
60
67
  onClick: (e) => handleClick(option, e),
61
68
  isActive: option.dsId === focusOptionIdx,
62
69
  "aria-selected": "false",
63
- ...generalProps
70
+ ...generalProps,
71
+ getOwnerProps,
72
+ getOwnerPropsArguments
64
73
  }
65
74
  );
66
75
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
4
- "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 tabIndex={0}\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"],
5
- "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,UAAU;AAAA,cACV,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -2,4 +2,5 @@ export declare const AutocompleteDataTestid: {
2
2
  LIST: string;
3
3
  OPTION: string;
4
4
  CONTAINER: string;
5
+ INPUT: string;
5
6
  };
@@ -10,5 +10,6 @@ export type AutocompleteContextT = ReturnType<typeof useRefs> & ReturnType<typeo
10
10
  optionsPerSection: DSAutocompleteT.InternalProps['options'];
11
11
  setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
12
12
  setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
13
+ getOwnerProps: () => DSAutocompleteT.InternalProps;
13
14
  };
14
15
  export declare const useAutocomplete: (propsFromUser: DSAutocompleteT.Props) => AutocompleteContextT;
@@ -0,0 +1,7 @@
1
+ export declare const DSAutocompleteName = "DSAutocomplete";
2
+ export declare const DSAutocompleteSlots: {
3
+ CONTAINER: string;
4
+ INPUT: string;
5
+ MENU_LIST: string;
6
+ OPTION: string;
7
+ };
@@ -1,3 +1,4 @@
1
1
  export { DSAutocomplete, DSAutocompleteWithSchema } from './Autocomplete.js';
2
2
  export { AutocompleteDataTestid } from './AutocompleteDataTestids.js';
3
3
  export type { DSAutocompleteT } from './react-desc-prop-types.js';
4
+ export { DSAutocompleteName, DSAutocompleteSlots } from './constants/index.js';
@@ -1,7 +1,7 @@
1
1
  export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
2
2
  minWidth?: number | string;
3
3
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
4
- 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>;
4
+ 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>;
5
5
  export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
6
6
  maxHeight?: number;
7
7
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-layout-autocomplete",
3
- "version": "3.57.0-next.42",
3
+ "version": "3.57.0-next.45",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Form Layout - Autocomplete",
6
6
  "files": [
@@ -45,20 +45,20 @@
45
45
  "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
46
46
  },
47
47
  "dependencies": {
48
- "@elliemae/ds-floating-context": "3.57.0-next.42",
49
- "@elliemae/ds-form-input-text": "3.57.0-next.42",
50
- "@elliemae/ds-grid": "3.57.0-next.42",
51
- "@elliemae/ds-menu-items": "3.57.0-next.42",
52
- "@elliemae/ds-props-helpers": "3.57.0-next.42",
53
- "@elliemae/ds-system": "3.57.0-next.42",
48
+ "@elliemae/ds-floating-context": "3.57.0-next.45",
49
+ "@elliemae/ds-form-input-text": "3.57.0-next.45",
50
+ "@elliemae/ds-grid": "3.57.0-next.45",
51
+ "@elliemae/ds-menu-items": "3.57.0-next.45",
52
+ "@elliemae/ds-props-helpers": "3.57.0-next.45",
53
+ "@elliemae/ds-system": "3.57.0-next.45",
54
54
  "react-virtual": "catalog:",
55
55
  "styled-components": "catalog:",
56
56
  "uid": "catalog:"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@elliemae/ds-form-input-text": "workspace:*",
60
- "@elliemae/ds-monorepo-devops": "3.57.0-next.42",
61
- "@elliemae/ds-test-utils": "3.57.0-next.42",
60
+ "@elliemae/ds-monorepo-devops": "3.57.0-next.45",
61
+ "@elliemae/ds-test-utils": "3.57.0-next.45",
62
62
  "@elliemae/pui-cli": "catalog:",
63
63
  "@elliemae/pui-theme": "catalog:",
64
64
  "jest": "catalog:",
@@ -76,5 +76,5 @@
76
76
  "access": "public",
77
77
  "typeSafety": true
78
78
  },
79
- "gitHead": "9137b3564bc7399c85ae12674d2e794f78e71e78"
79
+ "gitHead": "d4c28c2bdf9206e85aa787a76333ef2e59c02a25"
80
80
  }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/DSAutocompleteDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSAutocompleteName = 'DSAutocomplete';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;",
6
- "names": []
7
- }
@@ -1,6 +0,0 @@
1
- import * as React from "react";
2
- const DSAutocompleteName = "DSAutocomplete";
3
- export {
4
- DSAutocompleteName
5
- };
6
- //# sourceMappingURL=DSAutocompleteDefinitions.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAutocompleteDefinitions.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAutocompleteName = 'DSAutocomplete';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;",
6
- "names": []
7
- }
@@ -1 +0,0 @@
1
- export declare const DSAutocompleteName = "DSAutocomplete";