npm - @elliemae/ds-form-combobox - Versions diffs - 3.0.0-next.45 → 3.0.0-next.48 - Mend

@elliemae/ds-form-combobox 3.0.0-next.45 → 3.0.0-next.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/dist/esm/parts/DropdownIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvC,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,sBAAiB,CACpB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,sBAAiB,CACpB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls/Controls.js CHANGED Viewed

@@ -40,8 +40,10 @@ const Controls = () => {
     innerRef.current?.focus();
     setMenuState(true);
     window.requestAnimationFrame(() => {
-      if (listRef.current)
-        scrollIfNeeded(listRef.current);
+      window.requestAnimationFrame(() => {
+        if (listRef.current)
+          scrollIfNeeded(listRef.current);
+      });
     });
   }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
   const handleOnPillsClick = useCallback((e) => {

package/dist/esm/parts/controls/Controls.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { scrollIfNeeded } from '../../utils/listHelper';\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    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n    window.requestAnimationFrame(() => {\n      if (listRef.current) scrollIfNeeded(listRef.current);\n    });\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, 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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, setMenuState],\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          {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      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,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,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,UAAI,QAAQ;AAAS,uBAAe,QAAQ,OAAO;AAAA,IACrD,CAAC;AAAA,EAGH,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C,YAClD,CAAC,MAAM;AACL,QAAI,aAAa,UAAU;AACzB,QAAE,gBAAgB;AAAA,IACpB,OAAO;AACL,eAAS,SAAS,MAAM;AACxB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GACA,CAAC,WAAW,UAAU,UAAU,YAAY,CAC9C;AAGA,QAAM,oBAA6C,YACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GACA,CAAC,UAAU,MAAM,CACnB;AAEA,QAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAM,OAAO,QACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB,GACjG,CAAC,MAAM,CACT;AACA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,KAE/B,CAAC,UACA,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,qCAAC,wBAAmB,GACnB,MAAM,QAAQ,cAAc,IAC3B,qCAAC,kCAA6B,IAE9B,qCAAC;AAAA,IAAI,eAAa,mBAAmB;AAAA,KAClC,kBAAkB,qCAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,qCAAC,uBAAkB,GAEnB,qCAAC,mBAAc,GACd,CAAC,UACA,qCAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,qCAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,qCAAC,uBAAkB,CACrB,CAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { scrollIfNeeded } from '../../utils/listHelper';\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    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n    window.requestAnimationFrame(() => {\n      window.requestAnimationFrame(() => {\n        if (listRef.current) scrollIfNeeded(listRef.current);\n      });\n    });\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, 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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, setMenuState],\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          {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      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,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,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,MAAM;AACjC,YAAI,QAAQ;AAAS,yBAAe,QAAQ,OAAO;AAAA,MACrD,CAAC;AAAA,IACH,CAAC;AAAA,EAGH,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C,YAClD,CAAC,MAAM;AACL,QAAI,aAAa,UAAU;AACzB,QAAE,gBAAgB;AAAA,IACpB,OAAO;AACL,eAAS,SAAS,MAAM;AACxB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GACA,CAAC,WAAW,UAAU,UAAU,YAAY,CAC9C;AAGA,QAAM,oBAA6C,YACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GACA,CAAC,UAAU,MAAM,CACnB;AAEA,QAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAM,OAAO,QACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB,GACjG,CAAC,MAAM,CACT;AACA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,KAE/B,CAAC,UACA,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,qCAAC,wBAAmB,GACnB,MAAM,QAAQ,cAAc,IAC3B,qCAAC,kCAA6B,IAE9B,qCAAC;AAAA,IAAI,eAAa,mBAAmB;AAAA,KAClC,kBAAkB,qCAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,qCAAC,uBAAkB,GAEnB,qCAAC,mBAAc,GACd,CAAC,UACA,qCAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,qCAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,qCAAC,uBAAkB,CACrB,CAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls-input/ControlsInput.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ControlsInput = () => {
   const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
   return /* @__PURE__ */ React2.createElement(StyledInputWrapper, null, /* @__PURE__ */ React2.createElement(StyledInputWidthReference, {
     ref: spanReference
-  }, spanReferenceText), /* @__PURE__ */ React2.createElement(StyledInputPlaceHolder, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+  }, spanReferenceText), showPlaceholder && /* @__PURE__ */ React2.createElement(StyledInputPlaceHolder, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
     value: showPlaceholder
   })), /* @__PURE__ */ React2.createElement(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,

package/dist/esm/parts/controls-input/ControlsInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    menuState,\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={menuState}\n        aria-haspopup=\"listbox\"\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"],
-  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAC9B,QAAM,EAAE,mBAAmB,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,iBAAiB;AACnB,SACE,qCAAC,0BACC,qCAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GAClE,qCAAC,8BACC,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAEA,qCAAC;AAAA,IACC,eAAa,mBAAmB;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,MAAM;AAAA,IACf,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc,CAAC;AAAA,GACjB,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    menuState,\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      {showPlaceholder && (\n        <StyledInputPlaceHolder>\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\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={menuState}\n        aria-haspopup=\"listbox\"\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"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAC9B,QAAM,EAAE,mBAAmB,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,iBAAiB;AACnB,SACE,qCAAC,0BACC,qCAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GACjE,mBACC,qCAAC,8BACC,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAGF,qCAAC;AAAA,IACC,eAAa,mBAAmB;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,MAAM;AAAA,IACf,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc,CAAC;AAAA,GACjB,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls-input/styled.js CHANGED Viewed

@@ -8,7 +8,9 @@ const StyledInput = styled("input", {
   font-size: 13px;
   line-height: 13px;
   border: none;
+  overflow: hidden;
   padding: 0;
+  z-index: 2;
   outline: none;
   color: ${(props) => props.theme.colors.neutral[700]};
   &:focus {
@@ -32,17 +34,20 @@ const StyledInputPlaceHolder = styled.div`
   & span::after {
     content: '';
     padding: 1px;
+    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
+  z-index: 1;
 `;
 const StyledInputWrapper = styled("div")`
   position: relative;
   align-items: center;
   display: flex;
+  padding-right: 1px;
 `;
 export {
   StyledInput,

package/dist/esm/parts/controls-input/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,mBAAmB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,mBAAmB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/controls-input/useControlsInput.js CHANGED Viewed

@@ -16,7 +16,11 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
   useEffect(() => {
-    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+    if (spanReference.current) {
+      spanReference.current.style.display = "block";
+      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+      spanReference.current.style.display = "none";
+    }
   }, [inputValue]);
   const handleOnChange = useMaskedOnChange();
   const handleOnBlur = useCallback(() => {

package/dist/esm/parts/controls-input/useControlsInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, allOptions, placeholder, onFilter },\n    setHasFocus,\n    inputValue,\n    setMenuState,\n    setInputValue,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  // use span reference to calculate the real width for the input\n  const spanReference = useRef<HTMLSpanElement>(null);\n  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n  const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n  useEffect(() => {\n    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n  }, [inputValue]);\n\n  // if we se an input mask we configure inside here the proper mask\n  // or a stardard combobox onchange event\n  const handleOnChange = useMaskedOnChange();\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter(allOptions);\n    setHasFocus(false);\n  }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n"],
-  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AAWA,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,YAAY,SAAS,CAAC;AAEpC,QAAM,gBAAgB,OAAwB,IAAI;AAClD,QAAM,kBAAkB,CAAC,cAAc,qBAAqB,cAAc,IAAI,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,YAAU,MAAM;AACd,aAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa,CACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, allOptions, placeholder, onFilter },\n    setHasFocus,\n    inputValue,\n    setMenuState,\n    setInputValue,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  // use span reference to calculate the real width for the input\n  const spanReference = useRef<HTMLSpanElement>(null);\n  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n  const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n  useEffect(() => {\n    if (spanReference.current) {\n      spanReference.current.style.display = 'block';\n      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n      spanReference.current.style.display = 'none';\n    }\n  }, [inputValue]);\n\n  // if we se an input mask we configure inside here the proper mask\n  // or a stardard combobox onchange event\n  const handleOnChange = useMaskedOnChange();\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter(allOptions);\n    setHasFocus(false);\n  }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AAWA,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,YAAY,SAAS,CAAC;AAEpC,QAAM,gBAAgB,OAAwB,IAAI;AAClD,QAAM,kBAAkB,CAAC,cAAc,qBAAqB,cAAc,IAAI,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,YAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa,CACxG;AACF;",
   "names": []
 }

package/dist/esm/parts/controls-input/useKeyboardNavigation.js CHANGED Viewed

@@ -14,6 +14,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -122,10 +123,8 @@ const useKeyboardNavigation = () => {
     if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = getLastValueSelected(selectedValues);
       if (!e.currentTarget.value && lastValue) {
-        onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+        onChange(getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
       }
-      if (onFilter)
-        onFilter(allOptions, inputValue);
     }
     if (e.key === "Tab" && !inline && menuState) {
       const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
@@ -158,7 +157,8 @@ const useKeyboardNavigation = () => {
     selectedValues,
     onChange,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef
+    toggleSelectionButtonRef,
+    isNonClearable
   ]);
   return { onInputKeyDown };
 };

package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/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 { useCallback, useContext } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n  scrollIfNeeded,\n} from '../../utils/listHelper';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      filteredOptions,\n      selectedValues,\n      withoutPortal,\n    },\n    inputValue,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (\n        (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) &&\n        !menuState\n      ) {\n        setMenuState(true);\n        window.requestAnimationFrame(() => {\n          if (listRef.current) scrollIfNeeded(listRef.current);\n        });\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, 'close', e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter and space on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey)) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && selectableOptions.length) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length) return;\n        const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, 'open', e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n        if (onFilter) onFilter(allOptions, inputValue);\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n        if (element) {\n          e.preventDefault();\n          element.focus();\n        } else {\n          setMenuState(false, 'blur', e);\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n"],
-  "mappings": "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",
+  "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 { useCallback, useContext } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n  scrollIfNeeded,\n} from '../../utils/listHelper';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      filteredOptions,\n      selectedValues,\n      withoutPortal,\n    },\n    inputValue,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (\n        (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) &&\n        !menuState\n      ) {\n        setMenuState(true);\n        window.requestAnimationFrame(() => {\n          if (listRef.current) scrollIfNeeded(listRef.current);\n        });\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, 'close', e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter and space on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey)) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && selectableOptions.length) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length) return;\n        const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, 'open', e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n        if (element) {\n          e.preventDefault();\n          element.focus();\n        } else {\n          setMenuState(false, 'blur', e);\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      isNonClearable,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/menu-list/useItemRenderer.js CHANGED Viewed

@@ -28,7 +28,7 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants";
 const useItemRenderer = () => {
   const {
-    props: { filteredOptions, onCreate, onChange, selectedValues, onFilter, allOptions },
+    props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },
     setMenuState,
     inputValue,
     focusOptionIdx,
@@ -54,7 +54,7 @@ const useItemRenderer = () => {
         if (!multiple) {
           setMenuState(false, "selectOption", e);
         }
-        onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
+        onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);
       }
     }
     e.stopPropagation();

package/dist/esm/parts/menu-list/useItemRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-common';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { filteredOptions, onCreate, onChange, selectedValues, onFilter, allOptions },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (!virtualListHelpers) {\n      return null;\n    }\n    return virtualListHelpers.virtualItems.map((vItem) => {\n      const option = filteredOptions[vItem.index];\n      const generalProps = {\n        wrapperStyles: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          transform: `translateY(${vItem.start}px)`,\n        },\n\n        key: `${option.dsId}`,\n        innerRef: vItem.measureRef,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return <Section label={option.label} {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={option.disabled}\n            onClick={(e: React.MouseEvent) => handleClick(option, e)}\n            onMouseDown={handleOnMouseDown}\n            isActive={option.dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={option.dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label }: { label: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${label}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return <></>;\n    });\n  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-common';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (!virtualListHelpers) {\n      return null;\n    }\n    return virtualListHelpers.virtualItems.map((vItem) => {\n      const option = filteredOptions[vItem.index];\n      const generalProps = {\n        wrapperStyles: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          transform: `translateY(${vItem.start}px)`,\n        },\n\n        key: `${option.dsId}`,\n        innerRef: vItem.measureRef,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return <Section label={option.label} {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={option.disabled}\n            onClick={(e: React.MouseEvent) => handleClick(option, e)}\n            onMouseDown={handleOnMouseDown}\n            isActive={option.dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={option.dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label }: { label: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${label}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return <></>;\n    });\n  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED Viewed

@@ -6,14 +6,14 @@ import { getSuggestedValueOnChange } from "../../utils/listHelper";
 const RemovableSelectedValuePill = (props) => {
   const { pill } = props;
   const {
-    props: { onChange, disabled, selectedValues, innerRef }
+    props: { onChange, isNonClearable, disabled, selectedValues, innerRef }
   } = useContext(ComboBoxContext);
   return /* @__PURE__ */ React2.createElement(DSPillV2, {
     size: "s",
     key: pill.value,
     label: pill.label,
     disabled,
-    type: disabled ? "value" : "removable",
+    type: disabled || isNonClearable ? "value" : "removable",
     tabIndex: -1,
     onRemove: (e) => {
       e.stopPropagation();

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, disabled, selectedValues, innerRef },\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        innerRef.current?.focus();\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACO,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,SAAS;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,UAAU,gBAAgB;AAAA,MAC3C,WAAW,eAAe;AAE9B,SACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,KAAK,KAAK;AAAA,IACV,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,WAAW,UAAU;AAAA,IAC3B,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,eAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues, innerRef },\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || isNonClearable ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        innerRef.current?.focus();\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACO,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,SAAS;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,gBAAgB;AAAA,MAC3D,WAAW,eAAe;AAE9B,SACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,KAAK,KAAK;AAAA,IACV,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,eAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/useGroupPills.js CHANGED Viewed

@@ -10,7 +10,7 @@ const getGroupedPillWidth = (remainingPills) => {
 };
 const useGroupPills = () => {
   const {
-    props: { selectedValues, disabled, innerRef },
+    props: { selectedValues, isNonClearable, disabled, innerRef },
     selectedOptionsRef,
     controlsWrapperRef,
     pillGroupRef
@@ -33,7 +33,7 @@ const useGroupPills = () => {
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
       const pills = [
-        ...pillGroupRef.current.querySelectorAll(disabled ? ".ds-pill-wrapper-value" : ".ds-pill-wrapper-removable")
+        ...pillGroupRef.current.querySelectorAll(disabled || isNonClearable ? ".ds-pill-wrapper-value" : ".ds-pill-wrapper-removable")
       ];
       const pillsWidth = pills.map((pill) => pill?.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
@@ -60,7 +60,8 @@ const useGroupPills = () => {
     width,
     widthInput,
     disabled,
-    selectedValuesLength
+    selectedValuesLength,
+    isNonClearable
   ]);
   return pillsToShow || 1;
 };

package/dist/esm/parts/multi-selected-values-container/useGroupPills.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/useGroupPills.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable'),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB;AAAG,WAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,IAAK,UAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,kBAAkB,SAAS,oBAAoB;AACnE,QAAM,EAAE,UAAU,mBAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,eAAe,mBAAmB,YAAY,IAAI;AACjE,YAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,kBAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ,iBAAiB,WAAW,2BAA2B,4BAA4B;AAAA,MAC7G;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,CAAE,wBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, isNonClearable, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(\n          disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n        ),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n    isNonClearable,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB;AAAG,WAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,IAAK,UAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB,UAAU;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,kBAAkB,SAAS,oBAAoB;AACnE,QAAM,EAAE,UAAU,mBAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,eAAe,mBAAmB,YAAY,IAAI;AACjE,YAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,kBAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ,iBACtB,YAAY,iBAAiB,2BAA2B,4BAC1D;AAAA,MACF;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,CAAE,wBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\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 interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    isMenuOpen?: boolean;\n    onMenuChange?: (state: boolean, reason: string, e: Event) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onBlur?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    filteredOptions: OptionTypes[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\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  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  closeMenuOnScroll: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])\n    .description('If true, close the select menu when the user scrolls the document/body.')\n    .defaultValue(false),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.object.description('ref to the components container'),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\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 interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    isMenuOpen?: boolean;\n    onMenuChange?: (state: boolean, reason: string, e: Event) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    filteredOptions: OptionTypes[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\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  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  closeMenuOnScroll: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])\n    .description('If true, close the select menu when the user scrolls the document/body.')\n    .defaultValue(false),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.object.description('ref to the components container'),\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AAEO,iBAAsC,OAAgB;AAAC;AA2EvD,MAAM,oBAAoB,iCAC5B,4BAD4B;AAAA,EAE/B,aAAa,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,GAAG,UAAU,MAAM,CAAC,EAAE,WAAW,YACtG,2CACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,UAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,mBAAmB,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,IAAI,CAAC,EACpE,YAAY,yEAAyE,EACrF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,UAAU,KACjB,YACC,wGACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,UAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,UAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,UAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,UAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,UAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,QAAQ,UAAU,OAAO,YAAY,kCAAkC,EAAE,aAAa,EAAE;AAAA,EACxF,UAAU,UAAU,OAAO,YAAY,iCAAiC;AAC1E;",
   "names": []
 }

package/dist/esm/utils/listHelper.js CHANGED Viewed

@@ -37,20 +37,28 @@ const getFirstOption = (options, selectedValues, inputValue) => {
     }
   return "";
 };
-const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
+const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
   if (Array.isArray(selectedValues)) {
     const isFound = selectedValues.find((item) => item.type === "option" && item.value === selectedOption.value);
     if (isFound) {
+      if (isNonClearable)
+        return selectedValues;
       return selectedValues.filter((item) => item.type === "option" && item.value !== selectedOption.value);
     }
     return [...selectedValues, selectedOption];
   }
   if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    if (isNonClearable)
+      return selectedOption;
     return null;
   }
   return selectedOption;
 };
-const filterOptions = (inputValue, options) => options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const filterOptions = (inputValue, options) => {
+  if (inputValue === "")
+    return options;
+  return options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+};
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   const items = [];
   if (optionsToParse)

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

@@ -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 { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.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 getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  inputValue: string,\n): string => {\n  if (!inputValue) {\n    const lastValue = getLastValueSelected(selectedValues);\n    if (lastValue) return lastValue.dsId;\n  }\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  // list of disabled item results return ''\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) =>\n  options.filter(\n    (option) =>\n      option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n\nexport const selectedValuesWithSections = (\n  optionsToParse: DSComboboxT.OptionTypes[],\n  multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n  const items = [] as DSComboboxT.OptionTypes[];\n\n  if (optionsToParse)\n    optionsToParse.forEach((option) => {\n      // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\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};\n\nexport const getFilteredOptionsSelected = (\n  filteredOption: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n  elem: HTMLElement,\n  options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n  const bounding = elem.getBoundingClientRect();\n  if (\n    !(\n      bounding.top >= 0 &&\n      bounding.left >= 0 &&\n      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n    )\n  )\n    elem.scrollIntoView(options);\n};\n"],
-  "mappings": "AAAA;ACCA;AACO,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS;AAAA,EAChD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,gBACA,eACW;AACX,MAAI,CAAC,YAAY;AACf,UAAM,YAAY,qBAAqB,cAAc;AACrD,QAAI;AAAW,aAAO,UAAU;AAAA,EAClC;AAEA,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,UAAU;AAC/E,aAAO,QAAQ,GAAG;AAAA,IACpB;AAEF,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,mBACG;AACH,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,UAAM,UAAU,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAC3G,QAAI,SAAS;AACX,aAAO,eAAe,OAAO,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAAA,IACtG;AACA,WAAO,CAAC,GAAG,gBAAgB,cAAc;AAAA,EAC3C;AACA,MAAI,kBAAkB,eAAe,SAAS,eAAe,MAAM;AACjE,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAC,YAAoB,YAChD,QAAQ,OACN,CAAC,WACC,OAAO,SAAS,kBAAkB,UAAU,OAAO,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC,CAC5G;AAEK,MAAM,6BAA6B,CACxC,gBACA,uBACG;AACH,QAAM,QAAQ,CAAC;AAEf,MAAI;AACF,mBAAe,QAAQ,CAAC,WAAW;AAEjC,UAAI,OAAO,SAAS,kBAAkB,UAAU,WAAW,oBAAoB,MAAM,GAAG;AACtF,cAAM,KAAK,MAAM;AAAA,MACnB;AAEA,UAAI,OAAO,SAAS,kBAAkB,SAAS;AAC7C,YAAI,MAAM,MAAM,SAAS,IAAI,SAAS,kBAAkB,SAAS;AAC/D,gBAAM,MAAM,SAAS,KAAK;AAAA,QAC5B,OAAO;AACL,gBAAM,KAAK,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAC;AACH,MAAI,MAAM,MAAM,SAAS,IAAI,SAAS,kBAAkB,SAAS;AAC/D,UAAM,IAAI;AAAA,EACZ;AAEA,SAAO;AACT;AAEO,MAAM,6BAA6B,CACxC,gBACA,mBACG,eAAe,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,WAAW,gBAAgB,MAAM,CAAC;AAE9G,MAAM,iBAAiB,CAC5B,MACA,UAAU,EAAE,UAAU,UAAU,OAAO,OAAO,QAAQ,UAAU,MAC7D;AACH,QAAM,WAAW,KAAK,sBAAsB;AAC5C,MACE,CACE,UAAS,OAAO,KAChB,SAAS,QAAQ,KACjB,SAAS,UAAW,QAAO,eAAe,SAAS,gBAAgB,iBACnE,SAAS,SAAU,QAAO,cAAc,SAAS,gBAAgB;AAGnE,SAAK,eAAe,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.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 getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  inputValue: string,\n): string => {\n  if (!inputValue) {\n    const lastValue = getLastValueSelected(selectedValues);\n    if (lastValue) return lastValue.dsId;\n  }\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  // list of disabled item results return ''\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  isNonClearable?: boolean,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      if (isNonClearable) return selectedValues;\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    if (isNonClearable) return selectedOption;\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n  if (inputValue === '') return options;\n  return options.filter(\n    (option) =>\n      option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n};\n\nexport const selectedValuesWithSections = (\n  optionsToParse: DSComboboxT.OptionTypes[],\n  multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n  const items = [] as DSComboboxT.OptionTypes[];\n\n  if (optionsToParse)\n    optionsToParse.forEach((option) => {\n      // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\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};\n\nexport const getFilteredOptionsSelected = (\n  filteredOption: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n  elem: HTMLElement,\n  options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n  const bounding = elem.getBoundingClientRect();\n  if (\n    !(\n      bounding.top >= 0 &&\n      bounding.left >= 0 &&\n      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n    )\n  )\n    elem.scrollIntoView(options);\n};\n"],
+  "mappings": "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",
   "names": []
 }