@elliemae/ds-form-layout-autocomplete 3.52.0-rc.15 → 3.52.0-rc.16

package/dist/cjs/Autocomplete.js

@@ -46,5 +46,5 @@ const DSAutocomplete = (props) => {
 };
 DSAutocomplete.displayName = import_DSAutocompleteDefinitions.DSAutocompleteName;
 const DSAutocompleteWithSchema = (0, import_ds_props_helpers.describe)(DSAutocomplete);
-DSAutocompleteWithSchema.propTypes = import_react_desc_prop_types.propTypes;
+DSAutocompleteWithSchema.propTypes = import_react_desc_prop_types.DSAutocompletePropTypesSchema;
 //# sourceMappingURL=Autocomplete.js.map

package/dist/cjs/Autocomplete.js.map

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

package/dist/cjs/config/useAutocomplete.js

@@ -32,22 +32,18 @@ __export(useAutocomplete_exports, {
 });
 module.exports = __toCommonJS(useAutocomplete_exports);
 var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_lodash = require("lodash");
 var import_react = require("react");
 var import_uid = require("uid");
-var import_lodash = require("lodash");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_DSAutocompleteDefinitions = require("../DSAutocompleteDefinitions.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_usePopoverLogic = require("./usePopoverLogic.js");
 var import_useRefs = require("./useRefs.js");
 var import_useVirtualization = require("./useVirtualization.js");
-var import_usePopoverLogic = require("./usePopoverLogic.js");
-const useAutocomplete = (props) => {
-  const defaultPropsWithInnerRef = {
-    ...import_react_desc_prop_types.defaultProps,
-    innerRef: (0, import_react.useRef)(null)
-  };
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, defaultPropsWithInnerRef);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.propTypes, import_DSAutocompleteDefinitions.DSAutocompleteName);
+const useAutocomplete = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAutocompletePropTypes, import_DSAutocompleteDefinitions.DSAutocompleteName);
   const { options } = propsWithDefault;
   const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const [focusOptionIdx, setCurrentOption] = (0, import_react.useState)("");
@@ -81,7 +77,7 @@ const useAutocomplete = (props) => {
   const popoverManager = (0, import_usePopoverLogic.usePopoverLogic)(propsWithDefault, setCurrentOption);
   const ctx = (0, import_react.useMemo)(
     () => ({
-      props: { ...propsWithDefault },
+      props: propsWithDefault,
       referenceElement,
       focusOptionIdx,
       setCurrentOption,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useAutocomplete.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef } from 'react';\nimport { uid } from 'uid';\nimport { cloneDeep } from 'lodash';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\nimport { usePopoverLogic } from './usePopoverLogic.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 = (props: DSAutocompleteT.Props): AutocompleteContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes, 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 clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n  // we need to group the options by sections to render them in the correct HTML sementic order\n  const optionsPerSection = useMemo(() => {\n    const result: DSAutocompleteT.OptionTypes[] = [];\n    let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n    clonedOptions.forEach((item) => {\n      if (item.type === 'section') {\n        // Start a new section\n        currentSection = {\n          dsId: item.dsId,\n          type: item.type,\n          label: item.label,\n          options: [],\n        };\n        result.push(currentSection);\n      } else if (item.type === 'option' && currentSection) {\n        // Add option to the current section's options array\n        currentSection.options.push(item);\n      } else if (item.type === 'option') {\n        // If we encounter an option without a section, push it to the result array\n        result.push(item);\n      }\n    });\n    return result;\n  }, [clonedOptions]);\n\n  const virtualizationManager = useVirtualization({\n    references,\n    options: optionsPerSection,\n  });\n\n  const autoCompleteId = useMemo(() => uid(4), []);\n  const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefault },\n      referenceElement,\n      focusOptionIdx,\n      setCurrentOption,\n      setReferenceElement,\n      autoCompleteId,\n      optionsPerSection,\n      ...references,\n      ...popoverManager,\n      ...virtualizationManager,\n    }),\n    [\n      propsWithDefault,\n      autoCompleteId,\n      referenceElement,\n      focusOptionIdx,\n      popoverManager,\n      references,\n      virtualizationManager,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA0C;AAC1C,iBAAoB;AACpB,oBAA0B;AAC1B,8BAA6E;AAE7E,mCAAwC;AACxC,uCAAmC;AACnC,qBAAwB;AACxB,+BAAkC;AAClC,6BAAgC;AAczB,MAAM,kBAAkB,CAAC,UAAuD;AACrF,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,cAAU,qBAAO,IAAI;AAAA,EACvB;AACA,QAAM,uBAAmB,sDAA6B,OAAO,wBAAwB;AACrF,8DAA+B,kBAAkB,wCAAW,mDAAkB;AAE9E,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,sBAAQ,UAAM,yBAAU,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,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { cloneDeep } from 'lodash';\nimport { useMemo, useState } from 'react';\nimport { uid } from 'uid';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { DSAutocompletePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { usePopoverLogic } from './usePopoverLogic.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n  ReturnType<typeof useVirtualization> &\n  ReturnType<typeof usePopoverLogic> & {\n    props: DSAutocompleteT.InternalProps;\n    referenceElement: HTMLElement | null;\n    focusOptionIdx: string;\n    autoCompleteId: string;\n    optionsPerSection: DSAutocompleteT.InternalProps['options'];\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n  };\n\nexport const useAutocomplete = (propsFromUser: DSAutocompleteT.Props): AutocompleteContextT => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAutocompleteT.InternalProps>(propsFromUser, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSAutocompletePropTypes, DSAutocompleteName);\n\n  const { options } = propsWithDefault;\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n  const references = useRefs();\n\n  // Why are we cloning the options?\n  //  TODO - confirm, is this to solve the \"redux\" frozen object issue?\n  //   if yes, why do we need to mutate the options in the first place?\n  const clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n  // we need to group the options by sections to render them in the correct HTML sementic order\n  const optionsPerSection = useMemo(() => {\n    const result: DSAutocompleteT.OptionTypes[] = [];\n    let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n    clonedOptions.forEach((item) => {\n      if (item.type === 'section') {\n        // Start a new section\n        currentSection = {\n          dsId: item.dsId,\n          type: item.type,\n          label: item.label,\n          options: [],\n        };\n        result.push(currentSection);\n      } else if (item.type === 'option' && currentSection) {\n        // Add option to the current section's options array\n        currentSection.options.push(item);\n      } else if (item.type === 'option') {\n        // If we encounter an option without a section, push it to the result array\n        result.push(item);\n      }\n    });\n    return result;\n  }, [clonedOptions]);\n\n  const virtualizationManager = useVirtualization({\n    references,\n    options: optionsPerSection,\n  });\n\n  const autoCompleteId = useMemo(() => uid(4), []);\n  const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      referenceElement,\n      focusOptionIdx,\n      setCurrentOption,\n      setReferenceElement,\n      autoCompleteId,\n      optionsPerSection,\n      ...references,\n      ...popoverManager,\n      ...virtualizationManager,\n    }),\n    [\n      propsWithDefault,\n      autoCompleteId,\n      referenceElement,\n      focusOptionIdx,\n      popoverManager,\n      references,\n      virtualizationManager,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA6E;AAC7E,oBAA0B;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,yBAAU,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;",
   "names": []
 }

package/dist/cjs/config/useHandleFocusOnPopoverOpenLogic.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useHandleFocusOnPopoverOpenLogic_exports = {};
+__export(useHandleFocusOnPopoverOpenLogic_exports, {
+  useHandleFocusOnPopoverOpenLogic: () => useHandleFocusOnPopoverOpenLogic
+});
+module.exports = __toCommonJS(useHandleFocusOnPopoverOpenLogic_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_listHelper = require("../utils/listHelper.js");
+const useHandleFocusOnPopoverOpenLogic = ({
+  options,
+  forceFocusFirstOptionOnType,
+  isShowingPopover,
+  setCurrentOption
+}) => {
+  const firstOptionId = (0, import_listHelper.getFirstOption)(options);
+  const firstOptionIdRef = import_react.default.useRef(firstOptionId);
+  firstOptionIdRef.current = firstOptionId ?? "";
+  (0, import_react.useEffect)(() => {
+    if (isShowingPopover) {
+      if (forceFocusFirstOptionOnType) setCurrentOption(firstOptionIdRef.current);
+      else setCurrentOption("");
+    }
+  }, [forceFocusFirstOptionOnType, isShowingPopover, setCurrentOption]);
+};
+//# sourceMappingURL=useHandleFocusOnPopoverOpenLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useHandleFocusOnPopoverOpenLogic.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { getFirstOption } from '../utils/listHelper.js';\n\nexport const useHandleFocusOnPopoverOpenLogic = ({\n  options,\n  forceFocusFirstOptionOnType,\n  isShowingPopover,\n  setCurrentOption,\n}: {\n  options: DSAutocompleteT.OptionTypes[];\n  forceFocusFirstOptionOnType: boolean;\n  isShowingPopover: boolean;\n  setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n}) => {\n  // on opening the popover, we have a flag to force focus on the first option\n  //   to handle the scenario since we are completely state-agnostic(we read the state from the props)\n  // we need to sync with an external source of truth, in this scenario the useEffect is \"okay\"\n  //   (even if useEffect should be avoided in general)\n  const firstOptionId = getFirstOption(options);\n  // the useEffect is to be executed strictly when the popover is about to open\n  //   the first option Id is to be readed only at time of execution of the side-effect to \"opening\"\n  // to achieve this, we use a ref to store the value of the first option Id\n  // this is to avoid re-executing the useEffect when the first option Id changes if the popover is not about to open\n  const firstOptionIdRef = React.useRef(firstOptionId);\n  firstOptionIdRef.current = firstOptionId ?? '';\n  useEffect(() => {\n    if (isShowingPopover) {\n      if (forceFocusFirstOptionOnType) setCurrentOption(firstOptionIdRef.current);\n      else setCurrentOption('');\n    }\n  }, [forceFocusFirstOptionOnType, isShowingPopover, setCurrentOption]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAEjC,wBAA+B;AAExB,MAAM,mCAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AAKJ,QAAM,oBAAgB,kCAAe,OAAO;AAK5C,QAAM,mBAAmB,aAAAA,QAAM,OAAO,aAAa;AACnD,mBAAiB,UAAU,iBAAiB;AAC5C,8BAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,UAAI,4BAA6B,kBAAiB,iBAAiB,OAAO;AAAA,UACrE,kBAAiB,EAAE;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,6BAA6B,kBAAkB,gBAAgB,CAAC;AACtE;",
+  "names": ["React"]
+}

package/dist/cjs/config/usePopoverLogic.js

@@ -33,8 +33,9 @@ __export(usePopoverLogic_exports, {
 module.exports = __toCommonJS(usePopoverLogic_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_useHandleFocusOnPopoverOpenLogic = require("./useHandleFocusOnPopoverOpenLogic.js");
 const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
-  const { options, filter } = propsWithDefault;
+  const { options, filter, forceFocusFirstOptionOnType } = propsWithDefault;
   const [forceClosePopover, setForceClosePopover] = (0, import_react.useState)(false);
   const [userTypedSomething, setUserTypedSomething] = (0, import_react.useState)(false);
   const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = (0, import_react.useState)(false);
@@ -46,39 +47,32 @@ const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
   !userSelectedAndDidNotType && // user just selected an option --> hide popover
   (userTypedSomething || // user typed something --> show popover
   userIsNavigatingWithArrows);
-  const trackUserTyping = import_react.default.useCallback(
-    (e) => {
-      const { key } = e;
-      if ([...e.key].length === 1 || key === "Backspace" || key === "Delete") {
-        setUserTypedSomething(true);
-        setForceClosePopover(false);
-        setUserJustSelectedAnOption(false);
-      } else {
-        setUserTypedSomething(false);
-      }
-    },
-    [setUserTypedSomething]
-  );
-  const trackUserNavigatingWithArrows = import_react.default.useCallback(
-    (e) => {
-      const { key } = e;
-      if (isShowingPopover && (key === "ArrowUp" || key === "ArrowDown")) {
-        setUserIsNavigatingWithArrows(true);
-      } else {
-        setUserIsNavigatingWithArrows(false);
-      }
-    },
-    [isShowingPopover]
-  );
-  const trackUserSelectingAnOption = import_react.default.useCallback(
-    (e) => {
-      const { key } = e;
-      if (key === "Enter" && isShowingPopover) {
-        setUserJustSelectedAnOption(true);
-      }
-    },
-    [isShowingPopover]
-  );
+  const isShowingRef = import_react.default.useRef(isShowingPopover);
+  isShowingRef.current = isShowingPopover;
+  const trackUserTyping = import_react.default.useCallback((e) => {
+    const { key } = e;
+    if ([...e.key].length === 1 || key === "Backspace" || key === "Delete") {
+      setUserTypedSomething(true);
+      setForceClosePopover(false);
+      setUserJustSelectedAnOption(false);
+    } else {
+      setUserTypedSomething(false);
+    }
+  }, []);
+  const trackUserNavigatingWithArrows = import_react.default.useCallback((e) => {
+    const { key } = e;
+    if (isShowingRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+      setUserIsNavigatingWithArrows(true);
+    } else {
+      setUserIsNavigatingWithArrows(false);
+    }
+  }, []);
+  const trackUserSelectingAnOption = import_react.default.useCallback((e) => {
+    const { key } = e;
+    if (key === "Enter" && isShowingRef.current) {
+      setUserJustSelectedAnOption(true);
+    }
+  }, []);
   const trackUserInteractingViaKeyboard = import_react.default.useCallback(
     (e) => {
       trackUserTyping(e);
@@ -87,21 +81,22 @@ const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
     },
     [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption]
   );
+  const closePopover = import_react.default.useCallback(() => {
+    setForceClosePopover(true);
+    setCurrentOption("");
+  }, [setCurrentOption]);
   (0, import_react.useEffect)(() => {
-    const closePopper = () => {
-      setForceClosePopover(true);
-      setCurrentOption("");
-    };
-    window.addEventListener("blur", closePopper);
+    window.addEventListener("blur", closePopover);
     return () => {
-      window.removeEventListener("blur", closePopper);
+      window.removeEventListener("blur", closePopover);
     };
-  }, [setCurrentOption]);
-  (0, import_react.useEffect)(() => {
-    if (!isShowingPopover) {
-      setCurrentOption("");
-    }
-  }, [isShowingPopover, setCurrentOption]);
+  }, [closePopover]);
+  (0, import_useHandleFocusOnPopoverOpenLogic.useHandleFocusOnPopoverOpenLogic)({
+    options,
+    forceFocusFirstOptionOnType,
+    isShowingPopover,
+    setCurrentOption
+  });
   return import_react.default.useMemo(
     () => ({
       isShowingPopover,

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

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

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

@@ -35,7 +35,6 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
 var import_listHelper = require("../../utils/listHelper.js");
-const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
 const useKeyboardNavigation = () => {
   const {
     props: { onSelect, options },
@@ -61,7 +60,7 @@ const useKeyboardNavigation = () => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         if (isShowingPopover) {
-          const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable);
+          const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, import_listHelper.isOptionFocuseable);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
         }
@@ -69,7 +68,7 @@ const useKeyboardNavigation = () => {
       if (e.key === "ArrowUp") {
         e.preventDefault();
         if (isShowingPopover) {
-          const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable, -1);
+          const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, import_listHelper.isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { findInCircularList } from '../../utils/listHelper.js';\n\nconst isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { onSelect, options },\n    trackUserInteractingViaKeyboard,\n    setForceClosePopover,\n    isShowingPopover,\n    focusOptionIdx,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(AutocompleteContext);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find(\n    (item) => item.type === 'option' && item.dsId === focusOptionIdx,\n  ) as DSAutocompleteT.ItemOption;\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // TRACK STATE OF POPOVER SHOWING OR NOT\n      // =============================================================================\n      trackUserInteractingViaKeyboard(e);\n\n      if (e.key === 'Tab' || e.key === 'Escape') setForceClosePopover(true);\n\n      // =============================================================================\n      // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n      //  AFTER https://jira.elliemae.io/browse/PUI-14625\n      //    AUTOFOCUS ON FIRST OPTION WAS REMOVED\n      //      pressing Enter now is not necessarily selecting the first option (if popover is open)\n      //      now to ensure the first option is selected, the user has to press ArrowDown\n      //      so, if no focus (so no currentItem) is set, this is not a \"onSelect\" event\n      // =============================================================================\n      if (e.key === 'Enter' && isShowingPopover && currentItem?.label !== undefined) {\n        e.preventDefault();\n        onSelect(currentItem?.label, e);\n      }\n\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n    },\n    [\n      trackUserInteractingViaKeyboard,\n      setForceClosePopover,\n      isShowingPopover,\n      onSelect,\n      currentItem?.label,\n      options,\n      currentItemIndex,\n      setCurrentOption,\n      scrollOptionIntoView,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AAExC,6BAAgC;AAChC,wBAAmC;AAEnC,MAAM,qBAAqB,CAAC,QAA8C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAE9G,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AAC/E,QAAM,cAAc,QAAQ;AAAA,IAC1B,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS;AAAA,EACpD;AAEA,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AAIL,sCAAgC,CAAC;AAEjC,UAAI,EAAE,QAAQ,SAAS,EAAE,QAAQ,SAAU,sBAAqB,IAAI;AAUpE,UAAI,EAAE,QAAQ,WAAW,oBAAoB,aAAa,UAAU,QAAW;AAC7E,UAAE,eAAe;AACjB,iBAAS,aAAa,OAAO,CAAC;AAAA,MAChC;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,kBAAkB;AACtF,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport type { DSAutocompleteT } from '../../react-desc-prop-types.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { findInCircularList, isOptionFocuseable } from '../../utils/listHelper.js';\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { onSelect, options },\n    trackUserInteractingViaKeyboard,\n    setForceClosePopover,\n    isShowingPopover,\n    focusOptionIdx,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(AutocompleteContext);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find(\n    (item) => item.type === 'option' && item.dsId === focusOptionIdx,\n  ) as DSAutocompleteT.ItemOption;\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // TRACK STATE OF POPOVER SHOWING OR NOT\n      // =============================================================================\n      trackUserInteractingViaKeyboard(e);\n\n      if (e.key === 'Tab' || e.key === 'Escape') setForceClosePopover(true);\n\n      // =============================================================================\n      // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n      //  AFTER https://jira.elliemae.io/browse/PUI-14625\n      //    AUTOFOCUS ON FIRST OPTION WAS REMOVED\n      //      pressing Enter now is not necessarily selecting the first option (if popover is open)\n      //      now to ensure the first option is selected, the user has to press ArrowDown\n      //      so, if no focus (so no currentItem) is set, this is not a \"onSelect\" event\n      // =============================================================================\n      if (e.key === 'Enter' && isShowingPopover && currentItem?.label !== undefined) {\n        e.preventDefault();\n        onSelect(currentItem?.label, e);\n      }\n\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (isShowingPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n    },\n    [\n      trackUserInteractingViaKeyboard,\n      setForceClosePopover,\n      isShowingPopover,\n      onSelect,\n      currentItem?.label,\n      options,\n      currentItemIndex,\n      setCurrentOption,\n      scrollOptionIntoView,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AAExC,6BAAgC;AAChC,wBAAuD;AAEhD,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AAC/E,QAAM,cAAc,QAAQ;AAAA,IAC1B,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS;AAAA,EACpD;AAEA,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AAIL,sCAAgC,CAAC;AAEjC,UAAI,EAAE,QAAQ,SAAS,EAAE,QAAQ,SAAU,sBAAqB,IAAI;AAUpE,UAAI,EAAE,QAAQ,WAAW,oBAAoB,aAAa,UAAU,QAAW;AAC7E,UAAE,eAAe;AACjB,iBAAS,aAAa,OAAO,CAAC;AAAA,MAChC;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,oCAAkB;AACtF,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,YAAI,kBAAkB;AACpB,gBAAM,oBAAgB,sCAAmB,SAAS,kBAAkB,sCAAoB,EAAE;AAC1F,2BAAiB,QAAQ,aAAa,EAAE,IAAI;AAC5C,+BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": ["AutocompleteContext"]
 }

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

@@ -28,8 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  defaultProps: () => defaultProps,
-  propTypes: () => propTypes
+  DSAutocompletePropTypes: () => DSAutocompletePropTypes,
+  DSAutocompletePropTypesSchema: () => DSAutocompletePropTypesSchema,
+  defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
@@ -37,17 +38,26 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const defaultProps = {
   zIndex: 10,
   withoutPortal: false,
+  forceFocusFirstOptionOnType: false,
   startPlacementPreference: "bottom-start",
   placementOrderPreference: ["bottom-start", "bottom-end"]
 };
-const propTypes = {
+const DSAutocompletePropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
   options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of options").defaultValue([]),
   filter: import_ds_props_helpers.PropTypes.string.isRequired.description("String value to filter the options").defaultValue(""),
   onSelect: import_ds_props_helpers.PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue(""),
   children: import_ds_props_helpers.PropTypes.node.description("React component to apply autocomplete functionality").defaultValue("").deprecated({ version: "3.x" }),
   inputProps: import_ds_props_helpers.PropTypes.object.description("Props to pass to the input component").defaultValue({}),
   onValueChange: import_ds_props_helpers.PropTypes.func.description("Function triggered when the value of the input changes").defaultValue(""),
-  renderInput: import_ds_props_helpers.PropTypes.func.description("Function to render the input").defaultValue("")
+  renderInput: import_ds_props_helpers.PropTypes.func.description("Function to render the input").defaultValue(""),
+  startPlacementPreference: import_ds_props_helpers.PropTypes.string.description("Ideal preference for context placement").defaultValue("bottom-start"),
+  placementOrderPreference: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("Placement preferences for the context menu in order of most preferred to least preferred").defaultValue("['bottom-start', 'bottom-end']"),
+  withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether to render the context menu in a react portal or next to the input DOM element").defaultValue("false (next to the input)"),
+  forceFocusFirstOptionOnType: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)"
+  ).defaultValue("false")
 };
+const DSAutocompletePropTypesSchema = DSAutocompletePropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\nimport { render } from '@testing-library/react';\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\n      e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    withoutPortal: boolean;\n    zIndex: number;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of options')\n    .defaultValue([]),\n  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n  onSelect: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n  children: PropTypes.node\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAyE9C,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,kCAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AACzF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  // this was never implemented?\n  // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n  // only have code for ItemOption and ItemSectionOptions...\n  // export interface ItemSeparatorOptions extends CommonItemOptions {\n  //   type: 'separator';\n  // }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: ItemOption[];\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    filter: string;\n    onSelect: (\n      suggestedValue: string,\n      e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    withoutPortal: boolean;\n    zIndex: number;\n    forceFocusFirstOptionOnType: boolean;\n  }\n\n  export interface OptionalProps {\n    children?: React.ReactNode;\n    inputProps?: DSInputTextT.Props;\n    onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n    renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  forceFocusFirstOptionOnType: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of options')\n    .defaultValue([]),\n  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n  onSelect: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n  children: PropTypes.node\n    .description('React component to apply autocomplete functionality')\n    .defaultValue('')\n    .deprecated({ version: '3.x' }),\n  inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n  onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n  renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n  startPlacementPreference: PropTypes.string\n    .description('Ideal preference for context placement')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement preferences for the context menu in order of most preferred to least preferred')\n    .defaultValue(\"['bottom-start', 'bottom-end']\"),\n  withoutPortal: PropTypes.bool\n    .description('Whether to render the context menu in a react portal or next to the input DOM element')\n    .defaultValue('false (next to the input)'),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description(\n      'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,kCAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,kCAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,kCAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,kCAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
   "names": []
 }

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

@@ -46,7 +46,8 @@ const testCompleteDefaults = {
   startPlacementPreference: "bottom",
   placementOrderPreference: ["bottom", "top"],
   withoutPortal: false,
-  zIndex: 1e3
+  zIndex: 1e3,
+  forceFocusFirstOptionOnType: false
 };
 const testInternalProps = {
   ...testRequiredProps,

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

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

package/dist/cjs/utils/listHelper.js

@@ -32,6 +32,7 @@ __export(listHelper_exports, {
   getFirstOption: () => getFirstOption,
   getOptions: () => getOptions,
   getSelectableOptions: () => getSelectableOptions,
+  isOptionFocuseable: () => isOptionFocuseable,
   isSelectedValueEmpty: () => isSelectedValueEmpty,
   isSelectedValueMultiple: () => isSelectedValueMultiple
 });
@@ -54,4 +55,5 @@ const getFirstOption = (options) => {
     }
   return "";
 };
+const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
 //# sourceMappingURL=listHelper.js.map

package/dist/cjs/utils/listHelper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from >= -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;",
+  "sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n  options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n  value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n  list: DSAutocompleteT.OptionTypes[],\n  from: number,\n  criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from >= -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type)) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
   "names": []
 }

package/dist/esm/Autocomplete.js

@@ -4,7 +4,7 @@ import { describe } from "@elliemae/ds-props-helpers";
 import { useAutocomplete } from "./config/useAutocomplete.js";
 import { Container } from "./parts/container/index.js";
 import { AutocompleteContext } from "./AutocompleteCTX.js";
-import { propTypes } from "./react-desc-prop-types.js";
+import { DSAutocompletePropTypesSchema } from "./react-desc-prop-types.js";
 import { DSAutocompleteName } from "./DSAutocompleteDefinitions.js";
 const DSAutocomplete = (props) => {
   const ctx = useAutocomplete(props);
@@ -12,7 +12,7 @@ const DSAutocomplete = (props) => {
 };
 DSAutocomplete.displayName = DSAutocompleteName;
 const DSAutocompleteWithSchema = describe(DSAutocomplete);
-DSAutocompleteWithSchema.propTypes = propTypes;
+DSAutocompleteWithSchema.propTypes = DSAutocompletePropTypesSchema;
 export {
   DSAutocomplete,
   DSAutocompleteWithSchema

package/dist/esm/Autocomplete.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/Autocomplete.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport 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 { propTypes } 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 = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcjB;AAZN,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAEpC,SAAS,iBAAiB;AAC1B,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;",
+  "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"],
+  "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;",
   "names": []
 }