@elliemae/ds-form-layout-autocomplete 3.52.0-rc.9 → 3.52.1

package/dist/esm/config/useAutocomplete.js

@@ -1,20 +1,16 @@
 import * as React from "react";
-import { useMemo, useState, useRef } from "react";
-import { uid } from "uid";
-import { cloneDeep } from "lodash";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { propTypes, defaultProps } from "../react-desc-prop-types.js";
+import { cloneDeep } from "lodash-es";
+import { useMemo, useState } from "react";
+import { uid } from "uid";
 import { DSAutocompleteName } from "../DSAutocompleteDefinitions.js";
+import { DSAutocompletePropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { usePopoverLogic } from "./usePopoverLogic.js";
 import { useRefs } from "./useRefs.js";
 import { useVirtualization } from "./useVirtualization.js";
-import { usePopoverLogic } from "./usePopoverLogic.js";
-const useAutocomplete = (props) => {
-  const defaultPropsWithInnerRef = {
-    ...defaultProps,
-    innerRef: useRef(null)
-  };
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
-  useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);
+const useAutocomplete = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSAutocompletePropTypes, DSAutocompleteName);
   const { options } = propsWithDefault;
   const [referenceElement, setReferenceElement] = useState(null);
   const [focusOptionIdx, setCurrentOption] = useState("");
@@ -48,7 +44,7 @@ const useAutocomplete = (props) => {
   const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);
   const ctx = useMemo(
     () => ({
-      props: { ...propsWithDefault },
+      props: propsWithDefault,
       referenceElement,
       focusOptionIdx,
       setCurrentOption,

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

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

package/dist/esm/config/useHandleFocusOnPopoverOpenLogic.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2, { useEffect } from "react";
+import { getFirstOption } from "../utils/listHelper.js";
+const useHandleFocusOnPopoverOpenLogic = ({
+  options,
+  forceFocusFirstOptionOnType,
+  isShowingPopover,
+  setCurrentOption
+}) => {
+  const firstOptionId = getFirstOption(options);
+  const firstOptionIdRef = React2.useRef(firstOptionId);
+  firstOptionIdRef.current = firstOptionId ?? "";
+  useEffect(() => {
+    if (isShowingPopover) {
+      if (forceFocusFirstOptionOnType) setCurrentOption(firstOptionIdRef.current);
+      else setCurrentOption("");
+    }
+  }, [forceFocusFirstOptionOnType, isShowingPopover, setCurrentOption]);
+};
+export {
+  useHandleFocusOnPopoverOpenLogic
+};
+//# sourceMappingURL=useHandleFocusOnPopoverOpenLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useHandleFocusOnPopoverOpenLogic.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,iBAAiB;AAEjC,SAAS,sBAAsB;AAExB,MAAM,mCAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AAKJ,QAAM,gBAAgB,eAAe,OAAO;AAK5C,QAAM,mBAAmBA,OAAM,OAAO,aAAa;AACnD,mBAAiB,UAAU,iBAAiB;AAC5C,YAAU,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/esm/config/usePopoverLogic.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import React2, { useState, useEffect } from "react";
+import { useHandleFocusOnPopoverOpenLogic } from "./useHandleFocusOnPopoverOpenLogic.js";
 const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
-  const { options, filter } = propsWithDefault;
+  const { options, filter, forceFocusFirstOptionOnType } = propsWithDefault;
   const [forceClosePopover, setForceClosePopover] = useState(false);
   const [userTypedSomething, setUserTypedSomething] = useState(false);
   const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState(false);
@@ -13,39 +14,32 @@ const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
   !userSelectedAndDidNotType && // user just selected an option --> hide popover
   (userTypedSomething || // user typed something --> show popover
   userIsNavigatingWithArrows);
-  const trackUserTyping = React2.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 = React2.useCallback(
-    (e) => {
-      const { key } = e;
-      if (isShowingPopover && (key === "ArrowUp" || key === "ArrowDown")) {
-        setUserIsNavigatingWithArrows(true);
-      } else {
-        setUserIsNavigatingWithArrows(false);
-      }
-    },
-    [isShowingPopover]
-  );
-  const trackUserSelectingAnOption = React2.useCallback(
-    (e) => {
-      const { key } = e;
-      if (key === "Enter" && isShowingPopover) {
-        setUserJustSelectedAnOption(true);
-      }
-    },
-    [isShowingPopover]
-  );
+  const isShowingRef = React2.useRef(isShowingPopover);
+  isShowingRef.current = isShowingPopover;
+  const trackUserTyping = React2.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 = React2.useCallback((e) => {
+    const { key } = e;
+    if (isShowingRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+      setUserIsNavigatingWithArrows(true);
+    } else {
+      setUserIsNavigatingWithArrows(false);
+    }
+  }, []);
+  const trackUserSelectingAnOption = React2.useCallback((e) => {
+    const { key } = e;
+    if (key === "Enter" && isShowingRef.current) {
+      setUserJustSelectedAnOption(true);
+    }
+  }, []);
   const trackUserInteractingViaKeyboard = React2.useCallback(
     (e) => {
       trackUserTyping(e);
@@ -54,21 +48,22 @@ const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
     },
     [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption]
   );
+  const closePopover = React2.useCallback(() => {
+    setForceClosePopover(true);
+    setCurrentOption("");
+  }, [setCurrentOption]);
   useEffect(() => {
-    const closePopper = () => {
-      setForceClosePopover(true);
-      setCurrentOption("");
-    };
-    window.addEventListener("blur", closePopper);
+    window.addEventListener("blur", closePopover);
     return () => {
-      window.removeEventListener("blur", closePopper);
+      window.removeEventListener("blur", closePopover);
     };
-  }, [setCurrentOption]);
-  useEffect(() => {
-    if (!isShowingPopover) {
-      setCurrentOption("");
-    }
-  }, [isShowingPopover, setCurrentOption]);
+  }, [closePopover]);
+  useHandleFocusOnPopoverOpenLogic({
+    options,
+    forceFocusFirstOptionOnType,
+    isShowingPopover,
+    setCurrentOption
+  });
   return React2.useMemo(
     () => ({
       isShowingPopover,

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

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

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

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useCallback, useContext } from "react";
 import AutocompleteContext from "../../AutocompleteCTX.js";
-import { findInCircularList } from "../../utils/listHelper.js";
-const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
+import { findInCircularList, isOptionFocuseable } from "../../utils/listHelper.js";
 const useKeyboardNavigation = () => {
   const {
     props: { onSelect, options },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,kBAAkB;AAExC,OAAO,yBAAyB;AAChC,SAAS,0BAA0B;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,IAAI,WAAW,mBAAmB;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,iBAA+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,gBAAgB,mBAAmB,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,gBAAgB,mBAAmB,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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,kBAAkB;AAExC,OAAO,yBAAyB;AAChC,SAAS,oBAAoB,0BAA0B;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,IAAI,WAAW,mBAAmB;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,iBAA+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,gBAAgB,mBAAmB,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,gBAAgB,mBAAmB,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;",
   "names": []
 }

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

@@ -1,23 +1,33 @@
 import * as React from "react";
-import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-props-helpers";
+import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
 const defaultProps = {
   zIndex: 10,
   withoutPortal: false,
+  forceFocusFirstOptionOnType: false,
   startPlacementPreference: "bottom-start",
   placementOrderPreference: ["bottom-start", "bottom-end"]
 };
-const propTypes = {
+const DSAutocompletePropTypes = {
   ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description("List of options").defaultValue([]),
   filter: PropTypes.string.isRequired.description("String value to filter the options").defaultValue(""),
   onSelect: PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue(""),
   children: PropTypes.node.description("React component to apply autocomplete functionality").defaultValue("").deprecated({ version: "3.x" }),
   inputProps: PropTypes.object.description("Props to pass to the input component").defaultValue({}),
   onValueChange: PropTypes.func.description("Function triggered when the value of the input changes").defaultValue(""),
-  renderInput: PropTypes.func.description("Function to render the input").defaultValue("")
+  renderInput: PropTypes.func.description("Function to render the input").defaultValue(""),
+  startPlacementPreference: PropTypes.string.description("Ideal preference for context placement").defaultValue("bottom-start"),
+  placementOrderPreference: PropTypes.arrayOf(PropTypes.string).description("Placement preferences for the context menu in order of most preferred to least preferred").defaultValue("['bottom-start', 'bottom-end']"),
+  withoutPortal: PropTypes.bool.description("Whether to render the context menu in a react portal or next to the input DOM element").defaultValue("false (next to the input)"),
+  forceFocusFirstOptionOnType: 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;
 export {
-  defaultProps,
-  propTypes
+  DSAutocompletePropTypes,
+  DSAutocompletePropTypesSchema,
+  defaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,iBAAiB;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,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,UAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AACzF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,WAAW,wBAAwB;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,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,UAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,UAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,UAAU,QAAQ,UAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,UAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,UAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
   "names": []
 }

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

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

package/dist/esm/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,YAAY,WAAW;ACiDX,SAuBV,UAvBU,KAuBV,YAvBU;AAhDZ,SAAS,sBAAsB;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,oBAAC,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,oBAAC,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,iCAEE;AAAA,sBAAC,kBAAgB,GAAG,wBAAwB;AAAA,EAC5C,oBAAC,kBAAgB,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,8BAAC,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,YAAY,WAAW;ACkDX,SAuBV,UAvBU,KAuBV,YAvBU;AAjDZ,SAAS,sBAAsB;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,oBAAC,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,oBAAC,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,iCAEE;AAAA,sBAAC,kBAAgB,GAAG,wBAAwB;AAAA,EAC5C,oBAAC,kBAAgB,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,8BAAC,WAAM;AAAA;AAAA,EACT;AAAA,GACF;",
   "names": []
 }

package/dist/esm/utils/listHelper.js

@@ -16,11 +16,13 @@ const getFirstOption = (options) => {
     }
   return "";
 };
+const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
 export {
   findInCircularList,
   getFirstOption,
   getOptions,
   getSelectableOptions,
+  isOptionFocuseable,
   isSelectedValueEmpty,
   isSelectedValueMultiple
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEhB,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEhB,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/types/config/useAutocomplete.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { DSAutocompleteT } from '../react-desc-prop-types.js';
+import { usePopoverLogic } from './usePopoverLogic.js';
 import { useRefs } from './useRefs.js';
 import { useVirtualization } from './useVirtualization.js';
-import { usePopoverLogic } from './usePopoverLogic.js';
 export type AutocompleteContextT = ReturnType<typeof useRefs> & ReturnType<typeof useVirtualization> & ReturnType<typeof usePopoverLogic> & {
     props: DSAutocompleteT.InternalProps;
     referenceElement: HTMLElement | null;
@@ -12,4 +12,4 @@ export type AutocompleteContextT = ReturnType<typeof useRefs> & ReturnType<typeo
     setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
     setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 };
-export declare const useAutocomplete: (props: DSAutocompleteT.Props) => AutocompleteContextT;
+export declare const useAutocomplete: (propsFromUser: DSAutocompleteT.Props) => AutocompleteContextT;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DSAutocompleteT } from '../react-desc-prop-types.js';
+export declare const useHandleFocusOnPopoverOpenLogic: ({ options, forceFocusFirstOptionOnType, isShowingPopover, setCurrentOption, }: {
+    options: DSAutocompleteT.OptionTypes[];
+    forceFocusFirstOptionOnType: boolean;
+    isShowingPopover: boolean;
+    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
+}) => void;