@elliemae/ds-controlled-form 3.0.0-next.14 → 3.0.0-next.18

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

@@ -49,53 +49,51 @@ __export(useItemRenderer_exports, {
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_MenuItem = require("@elliemae/ds-common/MenuItem");
-var import_AutocompleteCTX = require("../../AutocompleteCTX");
-var import_listHelper = require("../../utils/listHelper");
+var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
 var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
 const useItemRenderer = () => {
   const {
-    props: { options, onChange, selectedValues, onFilter },
+    props: { options, onSelect },
     inputRef,
     setShowPopover,
     focusOptionIdx,
     virtualListHelpers
-  } = (0, import_react.useContext)(import_AutocompleteCTX.AutocompleteContext);
-  const { virtualItems } = virtualListHelpers;
+  } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const handleClick = (0, import_react.useCallback)((option, e) => {
-    if (inputRef.current)
-      inputRef.current.value = option.label;
-    onFilter(option.label);
-    onChange(option.label);
+    onSelect(option.label, e);
     setShowPopover(false);
-    inputRef.current?.focus();
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, onChange, setShowPopover, inputRef]);
-  const handleOnMouseDown = (0, import_react.useCallback)((e) => {
-    e.preventDefault();
-  }, []);
-  const ItemRenderer = (0, import_react.useMemo)(() => virtualItems.map((vItem) => {
-    const option = options[vItem.index];
-    const generalProps = {
-      wrapperStyles: { position: "absolute", top: vItem.start, left: 0, width: "100%" },
-      key: `${option.dsId}`,
-      innerRef: vItem.measureRef
-    };
-    if (option.type === "option") {
-      return /* @__PURE__ */ import_react.default.createElement(import_MenuItem.SingleMenuItem, __spreadProps(__spreadValues({}, generalProps), {
-        value: option.value,
-        label: option.label,
-        dataTestid: import_AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
-        disabled: option.disabled,
-        onClick: (e) => handleClick(option, e),
-        onMouseDown: handleOnMouseDown,
-        isActive: option.dsId === focusOptionIdx,
-        isSelected: (0, import_listHelper.isSelected)(selectedValues, option)
-      }));
+  }, [onSelect, setShowPopover]);
+  return (0, import_react.useMemo)(() => {
+    if (virtualListHelpers) {
+      return virtualListHelpers.virtualItems.map((vItem) => {
+        const option = options[vItem.index];
+        const generalProps = {
+          wrapperStyles: { position: "absolute", top: vItem.start, left: 0, width: "100%" },
+          key: `${option.dsId}`,
+          innerRef: vItem.measureRef
+        };
+        if (option.type === "section") {
+          return /* @__PURE__ */ import_react.default.createElement(import_MenuItem.Section, __spreadValues({
+            label: option.label
+          }, generalProps));
+        }
+        if (option.type === "option") {
+          return /* @__PURE__ */ import_react.default.createElement(import_MenuItem.SingleMenuItem, __spreadProps(__spreadValues({}, generalProps), {
+            value: option.value,
+            label: option.label,
+            dataTestid: import_AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
+            disabled: option.disabled,
+            onClick: (e) => handleClick(option, e),
+            isActive: option.dsId === focusOptionIdx
+          }));
+        }
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+      });
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
-  }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return ItemRenderer;
+    return null;
+  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);
 };
 module.exports = __toCommonJS(useItemRenderer_exports);
 //# sourceMappingURL=useItemRenderer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/autocomplete/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { VirtualItem } from 'react-virtual';\n\nimport { SingleMenuItem } from '@elliemae/ds-common/MenuItem';\nimport { AutocompleteContext } from '../../AutocompleteCTX';\nimport { isSelected } from '../../utils/listHelper';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { CBOptionT } from '../../index.d';\n\nconst useItemRenderer = (): React.ReactNode[] => {\n  const {\n    props: { options, onChange, selectedValues, onFilter },\n    inputRef,\n    setShowPopover,\n    focusOptionIdx,\n    virtualListHelpers,\n  } = useContext(AutocompleteContext);\n\n  const { virtualItems }: { virtualItems: VirtualItem[] } = virtualListHelpers;\n\n  const handleClick = useCallback(\n    (option: CBOptionT, e: Event) => {\n      if (inputRef.current) inputRef.current.value = option.label;\n      onFilter(option.label);\n      onChange(option.label);\n      setShowPopover(false);\n      inputRef.current?.focus();\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, onChange, setShowPopover, inputRef],\n  );\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  const ItemRenderer = useMemo(\n    (): React.ReactNode[] =>\n      virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n        };\n\n        if (option.type === 'option') {\n          return (\n            <SingleMenuItem\n              {...generalProps}\n              value={option.value}\n              label={option.label}\n              dataTestid={AutocompleteDataTestid.OPTION}\n              disabled={option.disabled}\n              onClick={(e: Event) => handleClick(option, e)}\n              onMouseDown={handleOnMouseDown}\n              isActive={option.dsId === focusOptionIdx}\n              isSelected={isSelected(selectedValues, option)}\n            />\n          );\n        }\n        return <></>;\n      }),\n    [options, focusOptionIdx, selectedValues, inputRef, virtualItems],\n  );\n\n  return ItemRenderer;\n};\n\nexport { useItemRenderer };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AAGxD,sBAA+B;AAC/B,6BAAoC;AACpC,wBAA2B;AAC3B,qCAAuC;AAGvC,MAAM,kBAAkB,MAAyB;AAC/C,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,EAAE,iBAAkD;AAE1D,QAAM,cAAc,8BAClB,CAAC,QAAmB,MAAa;AAC/B,QAAI,SAAS;AAAS,eAAS,QAAQ,QAAQ,OAAO;AACtD,aAAS,OAAO;AAChB,aAAS,OAAO;AAChB,mBAAe;AACf,aAAS,SAAS;AAClB,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU,UAAU,gBAAgB;AAGvC,QAAM,oBAAoB,8BAAY,CAAC,MAAuC;AAC5E,MAAE;AAAA,KACD;AAEH,QAAM,eAAe,0BACnB,MACE,aAAa,IAAI,CAAC,UAAU;AAC1B,UAAM,SAAS,QAAQ,MAAM;AAC7B,UAAM,eAAe;AAAA,MACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO;AAAA,MACzE,KAAK,GAAG,OAAO;AAAA,MACf,UAAU,MAAM;AAAA;AAGlB,QAAI,OAAO,SAAS,UAAU;AAC5B,aACE,mDAAC,gCAAD,iCACM,eADN;AAAA,QAEE,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,YAAY,sDAAuB;AAAA,QACnC,UAAU,OAAO;AAAA,QACjB,SAAS,CAAC,MAAa,YAAY,QAAQ;AAAA,QAC3C,aAAa;AAAA,QACb,UAAU,OAAO,SAAS;AAAA,QAC1B,YAAY,kCAAW,gBAAgB;AAAA;AAAA;AAI7C,WAAO;AAAA,MAEX,CAAC,SAAS,gBAAgB,gBAAgB,UAAU;AAGtD,SAAO;AAAA;",
+  "sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-common/MenuItem';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { DSAutocompleteT } from '../../react-desc-prop-types';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { options, onSelect },\n    inputRef,\n    setShowPopover,\n    focusOptionIdx,\n    virtualListHelpers,\n  } = useContext(AutocompleteContext);\n\n  const handleClick = useCallback(\n    (option: DSAutocompleteT.ItemOption, e: React.ChangeEvent<HTMLInputElement>) => {\n      onSelect(option.label, e);\n      setShowPopover(false);\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onSelect, setShowPopover],\n  );\n\n  return useMemo(() => {\n    if (virtualListHelpers) {\n      return virtualListHelpers.virtualItems.map((vItem) => {\n        const option = options[vItem.index];\n        const generalProps = {\n          wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n          key: `${option.dsId}`,\n          innerRef: vItem.measureRef,\n        };\n        if (option.type === 'section') {\n          return <Section label={option.label} {...generalProps} />;\n        }\n        if (option.type === 'option') {\n          return (\n            <SingleMenuItem\n              {...generalProps}\n              value={option.value}\n              label={option.label}\n              dataTestid={AutocompleteDataTestid.OPTION}\n              disabled={option.disabled}\n              onClick={(e: React.ChangeEvent<HTMLInputElement>) => handleClick(option, e)}\n              isActive={option.dsId === focusOptionIdx}\n            />\n          );\n        }\n        return <></>;\n      });\n    }\n    return null;\n  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,sBAAwC;AACxC,6BAAgC;AAChC,qCAAuC;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,cAAc,8BAClB,CAAC,QAAoC,MAA2C;AAC9E,aAAS,OAAO,OAAO;AACvB,mBAAe;AACf,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU;AAGb,SAAO,0BAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM;AAC7B,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO;AAAA,UACzE,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA;AAElB,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,mDAAC,yBAAD;AAAA,YAAS,OAAO,OAAO;AAAA,aAAW;AAAA;AAE3C,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE,mDAAC,gCAAD,iCACM,eADN;AAAA,YAEE,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd,YAAY,sDAAuB;AAAA,YACnC,UAAU,OAAO;AAAA,YACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ;AAAA,YACzE,UAAU,OAAO,SAAS;AAAA;AAAA;AAIhC,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA,KACN,CAAC,SAAS,gBAAgB,UAAU;AAAA;",
   "names": []
 }

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

@@ -27,20 +27,15 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  noop: () => noop,
   propTypes: () => propTypes
 });
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-function noop(..._args) {
-}
 const propTypes = {
-  placeholder: import_ds_props_helpers.PropTypes.string.description("input s placeholder value").defaultValue(""),
-  options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).description("List of options").defaultValue([]),
-  value: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string]).description("Array of option or single option selected"),
-  autoFocus: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
-  hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
-  onChange: import_ds_props_helpers.PropTypes.func.description("function triggered when an option is selected it will send the options selected").defaultValue("")
+  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.isRequired.description("React component to apply autocomplete functionality").defaultValue("")
 };
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/autocomplete/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 React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\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 | ItemSeparatorOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    placeholder?: string;\n    autoFocus?: boolean;\n    onFilter?: (value: string) => void;\n  }\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    value: string;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    disabled: boolean;\n    innerRef: React.RefObject<HTMLInputElement>;\n    inputProps: object;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const propTypes = {\n  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),\n  value: PropTypes.oneOfType([PropTypes.string]).description('Array of option or single option selected'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  onChange: PropTypes.func\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAEnB,iBAAsC,OAAgB;AAAA;AAoDtD,MAAM,YAAY;AAAA,EACvB,aAAa,kCAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,SAAS,YAAY,mBAAmB,aAAa;AAAA,EAC9G,OAAO,kCAAU,UAAU,CAAC,kCAAU,SAAS,YAAY;AAAA,EAC3D,WAAW,kCAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,kCAAU,KACjB,YAAY,mFACZ,aAAa;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\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 | ItemSeparatorOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    children: React.ReactChild;\n    filter: string;\n    onSelect: (suggestedValue: string | number, e: React.KeyboardEvent<HTMLInputElement>) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    withoutPortal: boolean;\n    zIndex: number;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const propTypes = {\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.isRequired\n    .description('React component to apply autocomplete functionality')\n    .defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,SACtD,WAAW,YAAY,mBACvB,aAAa;AAAA,EAChB,QAAQ,kCAAU,OAAO,WAAW,YAAY,sCAAsC,aAAa;AAAA,EACnG,UAAU,kCAAU,KAAK,WACtB,YAAY,mFACZ,aAAa;AAAA,EAChB,UAAU,kCAAU,KAAK,WACtB,YAAY,uDACZ,aAAa;AAAA;",
   "names": []
 }

package/dist/cjs/autocomplete/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/autocomplete/sharedTypes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useVirtual } from 'react-virtual';\nimport { DSAutocompleteT } from './react-desc-prop-types';\n\nexport declare namespace DSAutoCompleteInternalsT {\n  export interface AutocompleteContext {\n    props: DSAutocompleteT.InternalProps;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    showPopover: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    scrollOptionIntoView: (dsId: string, opts?: any) => void;\n    inputRef: React.RefObject<HTMLInputElement>;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    focusOptionIdx: string;\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSAutocompleteT } from './react-desc-prop-types';\n\nexport declare namespace DSAutoCompleteInternalsT {\n  export interface AutocompleteContext {\n    props: DSAutocompleteT.InternalProps;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    showPopover: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    scrollOptionIntoView: (dsId: string, opts?: any) => void;\n    inputRef: React.RefObject<HTMLInputElement>;\n    listRef: React.RefObject<HTMLDivElement>;\n    focusOptionIdx: string;\n    setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/autocomplete/{config/constants.js → tests/utils.js}

@@ -25,18 +25,32 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var constants_exports = {};
-__export(constants_exports, {
-  DATA_TESTID: () => DATA_TESTID
+var utils_exports = {};
+__export(utils_exports, {
+  basicOptions: () => basicOptions
 });
 var React = __toESM(require("react"));
-const DATA_TESTID = {
-  COMBOBOX_MENU_LIST: "autocomplete-menu-list",
-  COMBOBOX_CLEAR_BTN: "autocomplete-clear-btn",
-  COMBOBOX_ALL_BTN: "autocomplete-all-btn",
-  COMBOBOX_DROPDOWN_BTN: "autocomplete-dropdown-btn",
-  COMBOBOX_OPTION: "autocomplete-option",
-  COMBOBOX: "autocomplete"
-};
-module.exports = __toCommonJS(constants_exports);
-//# sourceMappingURL=constants.js.map
+const basicOptions = [
+  {
+    dsId: "12",
+    type: "section",
+    label: "Please Select the appropriate city"
+  },
+  {
+    dsId: "1",
+    type: "option",
+    label: "44444-4444"
+  },
+  {
+    dsId: "2",
+    type: "option",
+    label: "44444-5555"
+  },
+  {
+    dsId: "3",
+    type: "option",
+    label: "44444-6666"
+  }
+];
+module.exports = __toCommonJS(utils_exports);
+//# sourceMappingURL=utils.js.map

package/dist/cjs/autocomplete/tests/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/autocomplete/tests/utils.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const basicOptions = [\n  {\n    dsId: '12',\n    type: 'section',\n    label: 'Please Select the appropriate city',\n  },\n  {\n    dsId: '1',\n    type: 'option',\n    label: '44444-4444',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    label: '44444-5555',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    label: '44444-6666',\n  },\n];\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA;",
+  "names": []
+}

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

@@ -28,9 +28,9 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var listHelper_exports = {};
 __export(listHelper_exports, {
   findInCircularList: () => findInCircularList,
+  getFirstOption: () => getFirstOption,
   getOptions: () => getOptions,
   getSelectableOptions: () => getSelectableOptions,
-  isSelected: () => isSelected,
   isSelectedValueEmpty: () => isSelectedValueEmpty,
   isSelectedValueMultiple: () => isSelectedValueMultiple
 });
@@ -39,17 +39,6 @@ const getSelectableOptions = (options) => options ? options.filter((option) => o
 const getOptions = (options) => options ? options.filter((option) => option.type === "option") : [];
 const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = (value) => Array.isArray(value);
-const isSelected = (value, activeOption) => {
-  if (isSelectedValueMultiple(value)) {
-    const multiValue = value;
-    return multiValue.some((item) => item?.value === activeOption?.value);
-  }
-  if (typeof value === "string") {
-    return false;
-  }
-  const singleValue = value;
-  return singleValue?.value === activeOption.value;
-};
 const findInCircularList = (list, from, criteria, step = 1) => {
   for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
     if (criteria(list[i]))
@@ -57,5 +46,12 @@ const findInCircularList = (list, from, criteria, step = 1) => {
   }
   return from;
 };
+const getFirstOption = (options) => {
+  for (let i = 0; i < options.length; i += 1)
+    if (!["section", "separator"].includes(options[i].type)) {
+      return options[i].dsId;
+    }
+  return "";
+};
 module.exports = __toCommonJS(listHelper_exports);
 //# sourceMappingURL=listHelper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/autocomplete/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { CBOptionsT, CBOptionT } from '../index.d';\n\nexport const getSelectableOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (value: CBOptionT | Array<CBOptionT>): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: CBOptionT | Array<CBOptionT>): boolean => Array.isArray(value);\n\nexport const isSelected = (value: CBOptionsT, activeOption: CBOptionT): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as CBOptionT[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  if (typeof value === 'string') {\n    return false;\n  }\n  const singleValue = value as CBOptionT;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = <T extends unknown>(\n  list: T[],\n  from: number,\n  criteria: (item: T) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAAC,YACnC,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,YAAY;AAEhF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY;AAE5D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,SAAS,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ;AAEhG,MAAM,aAAa,CAAC,OAAmB,iBAAqC;AACjF,MAAI,wBAAwB,QAAQ;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc;AAAA;AAEjE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAAA;AAGtC,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WAAS,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK;AAAK,aAAO;AAAA;AAEhC,SAAO;AAAA;",
+  "sourcesContent": ["import { DSAutocompleteT } from '../react-desc-prop-types';\n\nexport const getSelectableOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (value: CBOptionT | Array<CBOptionT>): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: CBOptionT | Array<CBOptionT>): boolean => Array.isArray(value);\n\nexport const findInCircularList = <T extends unknown>(\n  list: T[],\n  from: number,\n  criteria: (item: T) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\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;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAAC,YACnC,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,YAAY;AAEhF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY;AAE5D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,SAAS,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ;AAEhG,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WAAS,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK;AAAK,aAAO;AAAA;AAEhC,SAAO;AAAA;AAGF,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,aAAa,SAAS,QAAQ,GAAG,OAAO;AACvD,aAAO,QAAQ,GAAG;AAAA;AAEtB,SAAO;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/config/useComboBox.js

@@ -93,8 +93,14 @@ const useComboBox = (props) => {
     if (!hasFocus)
       setFocusOptionIdx("");
   }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
+  (0, import_react.useEffect)(() => {
+    if (!showPopover) {
+      setFocusOptionIdx("");
+      setShowSelectedOptions(false);
+    }
+  }, [showPopover]);
   const ctx = (0, import_react.useMemo)(() => ({
-    props: __spreadProps(__spreadValues({}, propsWithDefaults), { options: correctOptions }),
+    props: __spreadProps(__spreadValues({}, propsWithDefaults), { filteredOptions: correctOptions }),
     virtualListHelpers,
     showPopover,
     referenceElement,

package/dist/cjs/combobox/config/useComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/combobox/config/useComboBox.tsx", "../../../../../../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, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues } = propsWithDefaults;\n  // ---------------------------------------------------------------------------\n  // Menu Options with/out selected filter and creatable functionality\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // we are updating the focus option only when we have focus on the input and\n    // we are in the selected option view or we are typing to force first option always\n    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    if (!hasFocus) setFocusOptionIdx('');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, options: correctOptions },\n      virtualListHelpers,\n      showPopover,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      showPopover,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAA2B;AAC3B,8BAA6E;AAC7E,yBAA6B;AAC7B,mCAA+C;AAE/C,+BAAkC;AAClC,wBAA+B;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,2BAA2B,iCAC5B,kCAD4B;AAAA,IAE/B,UAAU,yBAAO;AAAA;AAGnB,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AACxD,QAAM,CAAC,kBAAkB,uBAAuB,2BAA6B;AAC7E,QAAM,CAAC,qBAAqB,0BAA0B,2BAAkB;AAExE,QAAM,CAAC,YAAY,iBAAiB,2BAAiB;AACrD,QAAM,CAAC,UAAU,eAAe,2BAAkB;AAElD,QAAM,UAAU,yBAAuB;AACvC,QAAM,iBAAiB,yBAAuB;AAE9C,QAAM,qBAAqB,yBAAuB;AAClD,QAAM,qBAAqB,yBAAuB;AAClD,QAAM,uBAAuB,yBAAyB;AACtD,QAAM,2BAA2B,yBAA0B;AAC3D,QAAM,eAAe,yBAAuB;AAE5C,QAAM,EAAE,mBAAmB;AAK3B,QAAM,iBAAiB,gDAAkB,mBAAmB,YAAY;AAMxE,QAAM,qBAAoD,qCAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA;AAMhB,QAAM,uBAAuB,8BAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,eAAe;AAC5C,uBAAmB,cACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,OAE/C;AAAA,KAGJ,CAAC,gBAAgB;AAOnB,QAAM,CAAC,gBAAgB,qBAAqB,2BAAiB;AAE7D,8BAAU,MAAM;AAGd,QAAI,YAAa,oBAAmB,MAAM,eAAe,MAAM,sBAAsB;AACnF,YAAM,eAAe,sCAAe,gBAAgB,gBAAgB;AACpE,wBAAkB;AAClB,2BAAqB,cAAc,EAAE,OAAO;AAAA;AAE9C,QAAI,CAAC;AAAU,wBAAkB;AAAA,KAEhC,CAAC,aAAa,UAAU,gBAAgB,gBAAgB;AAE3D,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,OAAO,iCAAK,oBAAL,EAAwB,SAAS;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO;AAAA;",
+  "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, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues } = propsWithDefaults;\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // we are updating the focus option only when we have focus on the input and\n    // we are in the selected option view or we are typing to force first option always\n    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    if (!hasFocus) setFocusOptionIdx('');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      showPopover,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      showPopover,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAA2B;AAC3B,8BAA6E;AAC7E,yBAA6B;AAC7B,mCAA+C;AAE/C,+BAAkC;AAClC,wBAA+B;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,2BAA2B,iCAC5B,kCAD4B;AAAA,IAE/B,UAAU,yBAAO;AAAA;AAGnB,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AACxD,QAAM,CAAC,kBAAkB,uBAAuB,2BAA6B;AAC7E,QAAM,CAAC,qBAAqB,0BAA0B,2BAAkB;AAExE,QAAM,CAAC,YAAY,iBAAiB,2BAAiB;AACrD,QAAM,CAAC,UAAU,eAAe,2BAAkB;AAElD,QAAM,UAAU,yBAAuB;AACvC,QAAM,iBAAiB,yBAAuB;AAE9C,QAAM,qBAAqB,yBAAuB;AAClD,QAAM,qBAAqB,yBAAuB;AAClD,QAAM,uBAAuB,yBAAyB;AACtD,QAAM,2BAA2B,yBAA0B;AAC3D,QAAM,eAAe,yBAAuB;AAE5C,QAAM,EAAE,mBAAmB;AAM3B,QAAM,iBAAiB,gDAAkB,mBAAmB,YAAY;AAMxE,QAAM,qBAAoD,qCAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA;AAMhB,QAAM,uBAAuB,8BAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,eAAe;AAC5C,uBAAmB,cACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,OAE/C;AAAA,KAGJ,CAAC,gBAAgB;AAOnB,QAAM,CAAC,gBAAgB,qBAAqB,2BAAiB;AAE7D,8BAAU,MAAM;AAGd,QAAI,YAAa,oBAAmB,MAAM,eAAe,MAAM,sBAAsB;AACnF,YAAM,eAAe,sCAAe,gBAAgB,gBAAgB;AACpE,wBAAkB;AAClB,2BAAqB,cAAc,EAAE,OAAO;AAAA;AAE9C,QAAI,CAAC;AAAU,wBAAkB;AAAA,KAEhC,CAAC,aAAa,UAAU,gBAAgB,gBAAgB;AAE3D,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB,wBAAkB;AAClB,6BAAuB;AAAA;AAAA,KAExB,CAAC;AAEJ,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,OAAO,iCAAK,oBAAL,EAAwB,iBAAiB;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/config/useCorrectOptions.js

@@ -33,45 +33,26 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_uid = require("uid");
 var import_constants = require("../constants");
+var import_listHelper = require("../utils/listHelper");
 const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
-  const { options, selectedValues, onCreate } = propsWithDefaults;
-  const selectedValuesWithSections = (0, import_react.useCallback)(() => {
-    const multiSelectedValue = selectedValues;
-    const items = [];
-    options.forEach((option) => {
-      const isSelectedValue = multiSelectedValue.find((item) => item.dsId === option.dsId);
-      if (isSelectedValue) {
-        items.push(option);
-      }
-      if (option.type === import_constants.MENU_OPTION_TYPES.SECTION) {
-        if (items[items.length - 1]?.type === import_constants.MENU_OPTION_TYPES.SECTION) {
-          items[items.length - 1] = option;
-        } else {
-          items.push(option);
-        }
-      }
-    });
-    if (items[items.length - 1]?.type === import_constants.MENU_OPTION_TYPES.SECTION) {
-      items.pop();
-    }
-    return items;
-  }, [options, selectedValues]);
-  const correctOptions = (0, import_react.useMemo)(() => {
+  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
+  return (0, import_react.useMemo)(() => {
+    if (!filteredOptions)
+      return [...allOptions];
     if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValuesWithSections();
+      return (0, import_listHelper.selectedValuesWithSections)(filteredOptions, selectedValues);
     }
-    if (onCreate && inputValue && options.findIndex((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+    if (onCreate && inputValue && filteredOptions.findIndex((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = (0, import_uid.uid)();
       const creatableItem = {
         dsId: `creatable-${creatableUuid}`,
         label: inputValue,
         type: "creatable"
       };
-      return [creatableItem, ...options];
+      return [creatableItem, ...filteredOptions];
     }
-    return options;
-  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
-  return correctOptions;
+    return filteredOptions;
+  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
 };
 module.exports = __toCommonJS(useCorrectOptions_exports);
 //# sourceMappingURL=useCorrectOptions.js.map

package/dist/cjs/combobox/config/useCorrectOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/combobox/config/useCorrectOptions.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { options, selectedValues, onCreate } = propsWithDefaults;\n  const selectedValuesWithSections = useCallback(() => {\n    const multiSelectedValue = selectedValues as DSComboboxT.OptionTypes[];\n    const items = [] as DSComboboxT.OptionTypes[];\n\n    options.forEach((option) => {\n      const isSelectedValue = multiSelectedValue.find((item) => item.dsId === option.dsId);\n      if (isSelectedValue) {\n        items.push(option);\n      }\n\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n          items[items.length - 1] = option;\n        } else {\n          items.push(option);\n        }\n      }\n    });\n    if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n      items.pop();\n    }\n\n    return items;\n  }, [options, selectedValues]);\n\n  const correctOptions = useMemo(() => {\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections();\n    }\n    if (\n      onCreate &&\n      inputValue &&\n      options.findIndex((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n      };\n      return [creatableItem, ...options];\n    }\n    return options;\n  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);\n\n  return correctOptions;\n};\n\nexport { useCorrectOptions };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqC;AACrC,iBAAoB;AAEpB,uBAAkC;AAClC,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,SAAS,gBAAgB,aAAa;AAC9C,QAAM,6BAA6B,8BAAY,MAAM;AACnD,UAAM,qBAAqB;AAC3B,UAAM,QAAQ;AAEd,YAAQ,QAAQ,CAAC,WAAW;AAC1B,YAAM,kBAAkB,mBAAmB,KAAK,CAAC,SAAS,KAAK,SAAS,OAAO;AAC/E,UAAI,iBAAiB;AACnB,cAAM,KAAK;AAAA;AAGb,UAAI,OAAO,SAAS,mCAAkB,SAAS;AAC7C,YAAI,MAAM,MAAM,SAAS,IAAI,SAAS,mCAAkB,SAAS;AAC/D,gBAAM,MAAM,SAAS,KAAK;AAAA,eACrB;AACL,gBAAM,KAAK;AAAA;AAAA;AAAA;AAIjB,QAAI,MAAM,MAAM,SAAS,IAAI,SAAS,mCAAkB,SAAS;AAC/D,YAAM;AAAA;AAGR,WAAO;AAAA,KACN,CAAC,SAAS;AAEb,QAAM,iBAAiB,0BAAQ,MAAM;AACnC,QAAI,uBAAuB,MAAM,QAAQ,mBAAmB,eAAe,SAAS,GAAG;AACrF,aAAO;AAAA;AAET,QACE,YACA,cACA,QAAQ,UAAU,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,OAAO,UAAU,gBAAgB,IAC3G;AACA,YAAM,gBAAgB;AACtB,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA;AAER,aAAO,CAAC,eAAe,GAAG;AAAA;AAE5B,WAAO;AAAA,KACN,CAAC,SAAS,UAAU,YAAY,4BAA4B,gBAAgB;AAE/E,SAAO;AAAA;",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n  return useMemo(() => {\n    // if filteredOptions is not passed we copy allOptions into the prop as default\n    // this is useful when the user wants a combo with out filtering and only pass allOptions as its required\n    if (!filteredOptions) return [...allOptions];\n    // when show selected toggle is on we return the selected value only as filteredOptions prop\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections(filteredOptions, selectedValues);\n    }\n    // whether oncreate is passed we add as first option the creatable action based on input value string\n    if (\n      onCreate &&\n      inputValue &&\n      filteredOptions.findIndex((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) ===\n        -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n      };\n      return [creatableItem, ...filteredOptions];\n    }\n    return filteredOptions;\n  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,iBAAoB;AAEpB,uBAAkC;AAClC,wBAA2C;AAC3C,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,aAAa;AAElE,SAAO,0BAAQ,MAAM;AAGnB,QAAI,CAAC;AAAiB,aAAO,CAAC,GAAG;AAEjC,QAAI,uBAAuB,MAAM,QAAQ,mBAAmB,eAAe,SAAS,GAAG;AACrF,aAAO,kDAA2B,iBAAiB;AAAA;AAGrD,QACE,YACA,cACA,gBAAgB,UAAU,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,OAAO,UAAU,gBACjG,IACF;AACA,YAAM,gBAAgB;AACtB,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA;AAER,aAAO,CAAC,eAAe,GAAG;AAAA;AAE5B,WAAO;AAAA,KACN,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/A11yFocusedOption.js

@@ -37,12 +37,12 @@ var import_listHelper = require("../utils/listHelper");
 var import_sharedTypes = require("../sharedTypes");
 const A11yFocusedOption = () => {
   const {
-    props: { options },
+    props: { filteredOptions },
     focusOptionIdx,
     showPopover
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
-  const selectabledOptions = (0, import_listHelper.getSelectableOptions)(options);
-  const focusOption = options.find((option) => !(0, import_sharedTypes.isSeparator)(option) && option.dsId === focusOptionIdx);
+  const selectabledOptions = (0, import_listHelper.getSelectableOptions)(filteredOptions);
+  const focusOption = filteredOptions.find((option) => !(0, import_sharedTypes.isSeparator)(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
   return (0, import_react.useMemo)(() => {
     if (!(0, import_sharedTypes.isSeparator)(focusOption) && showPopover && focusOption)

package/dist/cjs/combobox/parts/A11yFocusedOption.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/combobox/parts/A11yFocusedOption.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { options },\n    focusOptionIdx,\n    showPopover,\n  } = useContext(ComboBoxContext);\n  const selectabledOptions = getSelectableOptions(options);\n  const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  return useMemo(() => {\n    if (!isSeparator(focusOption) && showPopover && focusOption)\n      return (\n        <StyledA11ySelectedValues aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length} `}\n        </StyledA11ySelectedValues>\n      );\n\n    return null;\n  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAqC;AACrC,yBAA4B;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,qBAAqB,4CAAqB;AAChD,QAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,oCAAY,WAAW,OAAO,SAAS;AAErF,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS;AAE1F,SAAO,0BAAQ,MAAM;AACnB,QAAI,CAAC,oCAAY,gBAAgB,eAAe;AAC9C,aACE,mDAAC,wCAAD;AAAA,QAA0B,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,SAC5E,UAAU,aAAa,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAIrG,WAAO;AAAA,KACN,CAAC,aAAa,aAAa,0BAA0B;AAAA;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { filteredOptions },\n    focusOptionIdx,\n    showPopover,\n  } = useContext(ComboBoxContext);\n  const selectabledOptions = getSelectableOptions(filteredOptions);\n  const focusOption = filteredOptions.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  return useMemo(() => {\n    if (!isSeparator(focusOption) && showPopover && focusOption)\n      return (\n        <StyledA11ySelectedValues aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length} `}\n        </StyledA11ySelectedValues>\n      );\n\n    return null;\n  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAqC;AACrC,yBAA4B;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,qBAAqB,4CAAqB;AAChD,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,CAAC,oCAAY,WAAW,OAAO,SAAS;AAE7F,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS;AAE1F,SAAO,0BAAQ,MAAM;AACnB,QAAI,CAAC,oCAAY,gBAAgB,eAAe;AAC9C,aACE,mDAAC,wCAAD;AAAA,QAA0B,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,SAC5E,UAAU,aAAa,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAIrG,WAAO;AAAA,KACN,CAAC,aAAa,aAAa,0BAA0B;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/controls/Controls.js

@@ -47,6 +47,8 @@ const Controls = () => {
     selectedOptionsRef,
     setShowPopover,
     hasFocus,
+    focusOptionIdx,
+    scrollOptionIntoView,
     showPopover,
     controlsWrapperRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
@@ -60,7 +62,7 @@ const Controls = () => {
     }
     innerRef.current?.focus();
     setShowPopover(true);
-  }, [disabled, hasFocus, setShowPopover, showPopover, innerRef, inline]);
+  }, [disabled, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]);
   const handleOnPillsClick = (0, import_react.useCallback)((e) => {
     if (showPopover || disabled) {
       e.stopPropagation();

package/dist/cjs/combobox/parts/controls/Controls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setShowPopover,\n    hasFocus,\n    showPopover,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && showPopover && !inline) {\n      setShowPopover(false);\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setShowPopover(true);\n  }, [disabled, hasFocus, setShowPopover, showPopover, innerRef, inline]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (showPopover || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setShowPopover(true);\n      }\n    },\n    [showPopover, innerRef, disabled, setShowPopover],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          <A11ySelectedValues />\n          <A11yFocusedOption />\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['auto', 'auto']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,eAAe,CAAC,QAAQ;AACtC,qBAAe;AACf,eAAS,SAAS;AAClB;AAAA;AAEF,aAAS,SAAS;AAClB,mBAAe;AAAA,KACd,CAAC,UAAU,UAAU,gBAAgB,aAAa,UAAU;AAG/D,QAAM,qBAA8C,8BAClD,CAAC,MAAM;AACL,QAAI,eAAe,UAAU;AAC3B,QAAE;AAAA,WACG;AACL,eAAS,SAAS;AAClB,qBAAe;AAAA;AAAA,KAGnB,CAAC,aAAa,UAAU,UAAU;AAIpC,QAAM,oBAA6C,8BACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE;AAAA;AAAA,KAGN,CAAC,UAAU;AAGb,QAAM,EAAE,mBAAmB;AAE3B,QAAM,OAAO,0BACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,CAAC,sBAC9E,CAAC;AAEH,SACE,mDAAC,qCAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,KAE/B,CAAC,UACA,mDAAC,+BAAD;AAAA,IAAiB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,mDAAC,8CAAD,OACA,mDAAC,4CAAD,OACC,MAAM,QAAQ,kBACb,mDAAC,qEAAD,QAEA,mDAAC,OAAD;AAAA,IAAK,eAAa,8CAAmB;AAAA,KAClC,kBAAkB,mDAAC,8DAAD;AAAA,IAA4B,MAAM;AAAA,QAM7D,mDAAC,oCAAD,OACC,CAAC,UACA,mDAAC,0CAAD;AAAA,IAA4B,gBAAe;AAAA,IAAS,MAAM,CAAC,QAAQ;AAAA,KACjE,mDAAC,2CAAD;AAAA,IAA6B;AAAA,MAC7B,mDAAC,4CAAD;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setShowPopover,\n    hasFocus,\n    focusOptionIdx,\n    scrollOptionIntoView,\n    showPopover,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && showPopover && !inline) {\n      setShowPopover(false);\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setShowPopover(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (showPopover || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setShowPopover(true);\n      }\n    },\n    [showPopover, innerRef, disabled, setShowPopover],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          <A11ySelectedValues />\n          <A11yFocusedOption />\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['auto', 'auto']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,eAAe,CAAC,QAAQ;AACtC,qBAAe;AACf,eAAS,SAAS;AAClB;AAAA;AAEF,aAAS,SAAS;AAClB,mBAAe;AAAA,KAEd,CAAC,UAAU,UAAU,aAAa,QAAQ,UAAU,gBAAgB;AAGvE,QAAM,qBAA8C,8BAClD,CAAC,MAAM;AACL,QAAI,eAAe,UAAU;AAC3B,QAAE;AAAA,WACG;AACL,eAAS,SAAS;AAClB,qBAAe;AAAA;AAAA,KAGnB,CAAC,aAAa,UAAU,UAAU;AAIpC,QAAM,oBAA6C,8BACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE;AAAA;AAAA,KAGN,CAAC,UAAU;AAGb,QAAM,EAAE,mBAAmB;AAE3B,QAAM,OAAO,0BACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,CAAC,sBAC9E,CAAC;AAEH,SACE,mDAAC,qCAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,KAE/B,CAAC,UACA,mDAAC,+BAAD;AAAA,IAAiB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,mDAAC,8CAAD,OACA,mDAAC,4CAAD,OACC,MAAM,QAAQ,kBACb,mDAAC,qEAAD,QAEA,mDAAC,OAAD;AAAA,IAAK,eAAa,8CAAmB;AAAA,KAClC,kBAAkB,mDAAC,8DAAD;AAAA,IAA4B,MAAM;AAAA,QAM7D,mDAAC,oCAAD,OACC,CAAC,UACA,mDAAC,0CAAD;AAAA,IAA4B,gBAAe;AAAA,IAAS,MAAM,CAAC,QAAQ;AAAA,KACjE,mDAAC,2CAAD;AAAA,IAA6B;AAAA,MAC7B,mDAAC,4CAAD;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/controls-input/ControlsInput.js

@@ -39,7 +39,7 @@ var import_useControlsInput = require("./useControlsInput");
 var import_ComboBoxCTX = require("../../ComboBoxCTX");
 const ControlsInput = () => {
   const {
-    props: { autoFocus, disabled, innerRef, onFilter },
+    props: { autoFocus, placeholder, disabled, innerRef, onFilter },
     focusOptionIdx,
     inputValue,
     showPopover
@@ -53,6 +53,7 @@ const ControlsInput = () => {
   })), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInput, {
     "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
     autoFocus,
+    placeholder,
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,

package/dist/cjs/combobox/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, disabled, innerRef, onFilter },\n    focusOptionIdx,\n    inputValue,\n    showPopover,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      <StyledInputPlaceHolder>\n        <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n      </StyledInputPlaceHolder>\n\n      <StyledInput\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={showPopover}\n        aria-haspopup=\"true\"\n        aria-describedby=\"combobox-selected-items\"\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={innerRef}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        withoutCaret={!onFilter}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uCAA2C;AAE3C,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,UAAU,UAAU;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,EAAE,mBAAmB;AAC3B,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F;AACF,SACE,mDAAC,kCAAD,MACE,mDAAC,yCAAD;AAAA,IAA2B,KAAK;AAAA,KAAgB,oBAChD,mDAAC,sCAAD,MACE,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OAGrC,mDAAC,2BAAD;AAAA,IACE,eAAa,8CAAmB;AAAA,IAChC;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, placeholder, disabled, innerRef, onFilter },\n    focusOptionIdx,\n    inputValue,\n    showPopover,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      <StyledInputPlaceHolder>\n        <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n      </StyledInputPlaceHolder>\n\n      <StyledInput\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={showPopover}\n        aria-haspopup=\"true\"\n        aria-describedby=\"combobox-selected-items\"\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={innerRef}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        withoutCaret={!onFilter}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uCAA2C;AAE3C,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,EAAE,mBAAmB;AAC3B,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F;AACF,SACE,mDAAC,kCAAD,MACE,mDAAC,yCAAD;AAAA,IAA2B,KAAK;AAAA,KAAgB,oBAChD,mDAAC,sCAAD,MACE,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OAGrC,mDAAC,2BAAD;AAAA,IACE,eAAa,8CAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/controls-input/styled.js

@@ -45,6 +45,9 @@ const StyledInput = import_ds_system.styled.input`
     outline: none;
   }
   ${({ withoutCaret }) => withoutCaret && "caret-color: transparent;"}
+  &::placeholder {
+    color: transparent;
+  }
 `;
 const StyledInputPlaceHolder = import_ds_system.styled.div`
   font-style: italic;