npm - @elliemae/ds-form-combobox - Versions diffs - 3.4.3-rc.1 → 3.4.3 - Mend

@elliemae/ds-form-combobox 3.4.3-rc.1 → 3.4.3

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 (143) hide show

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids";
@@ -17,32 +18,41 @@ const ControlsInput = () => {
   const { onInputKeyDown } = useKeyboardNavigation();
   const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
   const { tabIndex } = useGetGlobalAttributes(restProps);
-  return /* @__PURE__ */ React2.createElement(StyledInputWrapper, null, /* @__PURE__ */ React2.createElement(StyledInputWidthReference, {
-    ref: spanReference
-  }, spanReferenceText), showPlaceholder && /* @__PURE__ */ React2.createElement(StyledInputPlaceHolder, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: showPlaceholder
-  })), /* @__PURE__ */ React2.createElement(StyledInput, {
-    "data-testid": ComboboxDataTestid.INPUT,
-    autoFocus,
-    placeholder,
-    "aria-controls": "combo-listbox",
-    "aria-activedescendant": focusOptionIdx,
-    "aria-expanded": menuState,
-    "aria-haspopup": "listbox",
-    "aria-describedby": "combobox-selected-items",
-    role: "combobox",
-    disabled,
-    style: { width },
-    ref: innerRef,
-    value: inputValue,
-    type: "text",
-    onKeyDown: onInputKeyDown,
-    onChange: handleOnChange,
-    onBlur: handleOnBlur,
-    onFocus: handleOnFocus,
-    tabIndex,
-    withoutCaret: onlySelectable
-  }));
+  return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+    children: [
+      /* @__PURE__ */ jsx(StyledInputWidthReference, {
+        ref: spanReference,
+        children: spanReferenceText
+      }),
+      showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, {
+        children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
+          value: showPlaceholder
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledInput, {
+        "data-testid": ComboboxDataTestid.INPUT,
+        autoFocus,
+        placeholder,
+        "aria-controls": "combo-listbox",
+        "aria-activedescendant": focusOptionIdx,
+        "aria-expanded": menuState,
+        "aria-haspopup": "listbox",
+        "aria-describedby": "combobox-selected-items",
+        role: "combobox",
+        disabled,
+        style: { width },
+        ref: innerRef,
+        value: inputValue,
+        type: "text",
+        onKeyDown: onInputKeyDown,
+        onChange: handleOnChange,
+        onBlur: handleOnBlur,
+        onFocus: handleOnFocus,
+        tabIndex,
+        withoutCaret: onlySelectable
+      })
+    ]
+  });
 };
 export {
   ControlsInput

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

@@ -2,6 +2,6 @@
   "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';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\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, onlySelectable, ...restProps },\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\n  const { tabIndex } = useGetGlobalAttributes(restProps);\n\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        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAC9B,QAAM,EAAE,mBAAmB,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,iBAAiB;AAEnB,QAAM,EAAE,aAAa,uBAAuB,SAAS;AAErD,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;AAAA,IACA,cAAc;AAAA,GAChB,CACF;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AAEvC,SAAS,0BAA0B;AACnC,SAAS,aAAa,oBAAoB,wBAAwB,iCAAiC;AACnG,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM,EAAE,SAAS,IAAI,uBAAuB,SAAS;AAErD,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,oBAAC;AAAA,QACC,8BAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,oBAAC;AAAA,QACC,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAiB;AAAA,QACjB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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  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;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,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,aAAa,MAAM,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

@@ -31,15 +31,18 @@ const useControlsInput = () => {
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);
-  return useMemo(() => ({
-    handleOnBlur,
-    handleOnChange,
-    handleOnFocus,
-    showPlaceholder,
-    spanReferenceText,
-    width,
-    spanReference
-  }), [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]);
+  return useMemo(
+    () => ({
+      handleOnBlur,
+      handleOnChange,
+      handleOnFocus,
+      showPlaceholder,
+      spanReferenceText,
+      width,
+      spanReference
+    }),
+    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]
+  );
 };
 export {
   useControlsInput

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

@@ -2,6 +2,6 @@
   "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    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,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;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAE9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,SAAS;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,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;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
   "names": []
 }

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

@@ -40,121 +40,127 @@ const useKeyboardNavigation = () => {
   const selectableOptions = getOptions(filteredOptions);
   const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);
   const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
-  const onInputKeyDown = useCallback((e) => {
-    if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION)
-      onKeyDown(e, currentItem);
-    if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
-      setMenuState(true);
-    }
-    if (e.key === "Escape") {
-      if (onCancel)
-        onCancel();
-      if (inputValue) {
-        if (onFilter)
-          onFilter(allOptions, inputValue);
-        setInputValue("");
+  const onInputKeyDown = useCallback(
+    (e) => {
+      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION)
+        onKeyDown(e, currentItem);
+      if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
+        setMenuState(true);
       }
-      if (!inline)
-        setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);
-    }
-    if (e.key === "Enter" && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue);
-      setFocusOptionIdx("");
-      if (onFilter)
-        onFilter(allOptions, "");
-      setInputValue("");
-      return;
-    }
-    if (e.key === "Enter" || e.keyCode === 32 && e.altKey) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (focusOptionIdx !== "" && (menuState || inline) && currentItem?.type === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+      if (e.key === "Escape") {
+        if (onCancel)
+          onCancel();
+        if (inputValue) {
+          if (onFilter)
+            onFilter(allOptions, inputValue);
+          setInputValue("");
+        }
+        if (!inline)
+          setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);
+      }
+      if (e.key === "Enter" && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+        onCreate(inputValue);
+        setFocusOptionIdx("");
         if (onFilter)
           onFilter(allOptions, "");
         setInputValue("");
-        if (!multiple) {
-          setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);
+        return;
+      }
+      if (e.key === "Enter" || e.keyCode === 32 && e.altKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (focusOptionIdx !== "" && (menuState || inline) && currentItem?.type === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+          if (onFilter)
+            onFilter(allOptions, "");
+          setInputValue("");
+          if (!multiple) {
+            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);
+          }
+          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);
         }
-        onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);
       }
-    }
-    if (e.key === "Enter" && e.altKey) {
-      setMenuState(false, "selectOption", e);
-    }
-    if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
-      onSelectAll(filteredOptions.filter((option) => option.type === "option" && !option.disabled), e);
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      e.stopPropagation();
-      if ((menuState || inline) && selectableOptions.length) {
-        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
-        if (nextItemIndexIndex > -1) {
-          setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);
-          scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);
+      if (e.key === "Enter" && e.altKey) {
+        setMenuState(false, "selectOption", e);
+      }
+      if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
+        onSelectAll(
+          filteredOptions.filter((option) => option.type === "option" && !option.disabled),
+          e
+        );
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        e.stopPropagation();
+        if ((menuState || inline) && selectableOptions.length) {
+          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+          if (nextItemIndexIndex > -1) {
+            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);
+            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);
+          }
         }
       }
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!selectableOptions.length)
-        return;
-      const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
-      if (prevItemIndex > -1) {
-        if (menuState || inline) {
-          setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
-          scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
-        } else {
-          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);
-          const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
-          setTimeout(() => {
-            scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);
-          });
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!selectableOptions.length)
+          return;
+        const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
+        if (prevItemIndex > -1) {
+          if (menuState || inline) {
+            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
+          } else {
+            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);
+            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
+            setTimeout(() => {
+              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);
+            });
+          }
         }
       }
-    }
-    if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
-      const lastValue = getLastValueSelected(selectedValues);
-      if (!e.currentTarget.value && lastValue && !isNonClearable) {
-        onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+      if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
+        const lastValue = getLastValueSelected(selectedValues);
+        if (!e.currentTarget.value && lastValue && !isNonClearable) {
+          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+        }
       }
-    }
-    if (e.key === "Tab" && !inline && menuState) {
-      const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
-      if (element) {
-        e.preventDefault();
-        element.focus();
-      } else {
-        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);
+      if (e.key === "Tab" && !inline && menuState) {
+        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
+        if (element) {
+          e.preventDefault();
+          element.focus();
+        } else {
+          setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);
+        }
       }
-    }
-  }, [
-    onKeyDown,
-    currentItem,
-    onCreate,
-    multiple,
-    inputValue,
-    inline,
-    withoutPortal,
-    setMenuState,
-    onCancel,
-    onFilter,
-    setInputValue,
-    listRef,
-    focusOptionIdx,
-    menuState,
-    selectableOptions.length,
-    filteredOptions,
-    currentItemIndex,
-    setFocusOptionIdx,
-    selectedValues,
-    onChange,
-    selectAllCheckboxRef,
-    toggleSelectionButtonRef,
-    isNonClearable
-  ]);
+    },
+    [
+      onKeyDown,
+      currentItem,
+      onCreate,
+      multiple,
+      inputValue,
+      inline,
+      withoutPortal,
+      setMenuState,
+      onCancel,
+      onFilter,
+      setInputValue,
+      listRef,
+      focusOptionIdx,
+      menuState,
+      selectableOptions.length,
+      filteredOptions,
+      currentItemIndex,
+      setFocusOptionIdx,
+      selectedValues,
+      onChange,
+      selectAllCheckboxRef,
+      toggleSelectionButtonRef,
+      isNonClearable
+    ]
+  );
   return { onInputKeyDown };
 };
 export {

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

@@ -2,6 +2,6 @@
   "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} from '../../utils/listHelper';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } 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      }\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, MENU_CONTROL_REASONS.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, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), 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, MENU_CONTROL_REASONS.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 && !isNonClearable) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), 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, MENU_CONTROL_REASONS.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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",
+  "mappings": "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",
   "names": []
 }

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

@@ -9,23 +9,29 @@ const useMaskedOnChange = () => {
     setInputValue,
     setShowSelectedOptions
   } = useContext(ComboBoxContext);
-  const handleOnChange = useCallback((e) => {
-    setShowSelectedOptions(false);
-    setMenuState(true, "filter", e);
-    if (onFilter && !onlySelectable) {
-      onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
-    }
-    if (!onlySelectable)
-      setInputValue(e.currentTarget.value);
-  }, [allOptions, onlySelectable, onFilter, setInputValue, setMenuState, setShowSelectedOptions]);
-  const handleOnChangeMask = useCallback((e, mask) => {
-    setShowSelectedOptions(false);
-    setMenuState(true, "filter", e);
-    if (mask && onFilter)
-      onFilter(filterOptions(mask, allOptions), mask);
-    else if (!mask && onFilter)
-      onFilter(allOptions, "");
-  }, [allOptions, onFilter, setMenuState, setShowSelectedOptions]);
+  const handleOnChange = useCallback(
+    (e) => {
+      setShowSelectedOptions(false);
+      setMenuState(true, "filter", e);
+      if (onFilter && !onlySelectable) {
+        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
+      }
+      if (!onlySelectable)
+        setInputValue(e.currentTarget.value);
+    },
+    [allOptions, onlySelectable, onFilter, setInputValue, setMenuState, setShowSelectedOptions]
+  );
+  const handleOnChangeMask = useCallback(
+    (e, mask) => {
+      setShowSelectedOptions(false);
+      setMenuState(true, "filter", e);
+      if (mask && onFilter)
+        onFilter(filterOptions(mask, allOptions), mask);
+      else if (!mask && onFilter)
+        onFilter(allOptions, "");
+    },
+    [allOptions, onFilter, setMenuState, setShowSelectedOptions]
+  );
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useMaskedOnChange.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onlySelectable, onFilter, allOptions },\n    setMenuState,\n    setInputValue,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setShowSelectedOptions(false);\n      setMenuState(true, 'filter', e);\n      if (onFilter && !onlySelectable) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      if (!onlySelectable) setInputValue(e.currentTarget.value);\n    },\n    [allOptions, onlySelectable, onFilter, setInputValue, setMenuState, setShowSelectedOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setShowSelectedOptions(false);\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [allOptions, onFilter, setMenuState, setShowSelectedOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,gBAAgB,UAAU;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAG9B,QAAM,iBAAiB,YACrB,CAAC,MAA2C;AAC1C,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,YAAY,CAAC,gBAAgB;AAE/B,eAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,IAClF;AACA,QAAI,CAAC;AAAgB,oBAAc,EAAE,cAAc,KAAK;AAAA,EAC1D,GACA,CAAC,YAAY,gBAAgB,UAAU,eAAe,cAAc,sBAAsB,CAC5F;AAGA,QAAM,qBAAqB,YACzB,CAAC,GAAwC,SAAkB;AACzD,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,QAAQ;AAAU,eAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,aAC3D,CAAC,QAAQ;AAAU,eAAS,YAAY,EAAE;AAAA,EACrD,GACA,CAAC,YAAY,UAAU,cAAc,sBAAsB,CAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,gBAAgB,UAAU,WAAW;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,YAAY,CAAC,gBAAgB;AAE/B,iBAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,UAAI,CAAC;AAAgB,sBAAc,EAAE,cAAc,KAAK;AAAA,IAC1D;AAAA,IACA,CAAC,YAAY,gBAAgB,UAAU,eAAe,cAAc,sBAAsB;AAAA,EAC5F;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ;AAAU,iBAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ;AAAU,iBAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,sBAAsB;AAAA,EAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
   "names": []
 }

package/dist/esm/parts/header-list/HeaderList.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { ComboBoxContext } from "../../ComboBoxCTX";
@@ -29,28 +30,39 @@ const HeaderList = () => {
     checkboxStatus,
     handleSelectAllCheckboxChange
   } = useHeaderListHandlers();
-  return /* @__PURE__ */ React2.createElement(StyledHeaderListWrapper, {
+  return /* @__PURE__ */ jsxs(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown,
-    "data-testid": ComboboxDataTestid.MULTISELECT.HEADER_LIST
-  }, /* @__PURE__ */ React2.createElement(StyledSelectAllCheckbox, null, onSelectAll && /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
-    checked: checkboxStatus,
-    "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
-    name: "select-all-checkbox",
-    "aria-label": "Select/Unselect All Items",
-    id: "select-all-checkbox",
-    onChange: handleSelectAllCheckboxChange,
-    onKeyDown: handleCheckAllOnTab,
-    innerRef: selectAllCheckboxRef,
-    device: "desktop"
-  })), /* @__PURE__ */ React2.createElement(StyledSelectedItems, null, multiSelectedValues.length > 0 ? /* @__PURE__ */ React2.createElement(StyledButtonSelection, {
-    onKeyDown: handleFilterSelectionBtnOnTab,
-    buttonType: BUTTON_TYPES.TEXT,
-    onClick: handleToggleSelectedValuesFilter,
-    size: BUTTON_SIZES.S,
-    "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
-    innerRef: toggleSelectionButtonRef
-  }, !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL") : /* @__PURE__ */ React2.createElement(StyledNoOptionsSelected, null, "0 SELECTED")));
+    "data-testid": ComboboxDataTestid.MULTISELECT.HEADER_LIST,
+    children: [
+      /* @__PURE__ */ jsx(StyledSelectAllCheckbox, {
+        children: onSelectAll && /* @__PURE__ */ jsx(DSControlledCheckbox, {
+          checked: checkboxStatus,
+          "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
+          name: "select-all-checkbox",
+          "aria-label": "Select/Unselect All Items",
+          id: "select-all-checkbox",
+          onChange: handleSelectAllCheckboxChange,
+          onKeyDown: handleCheckAllOnTab,
+          innerRef: selectAllCheckboxRef,
+          device: "desktop"
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledSelectedItems, {
+        children: multiSelectedValues.length > 0 ? /* @__PURE__ */ jsx(StyledButtonSelection, {
+          onKeyDown: handleFilterSelectionBtnOnTab,
+          buttonType: BUTTON_TYPES.TEXT,
+          onClick: handleToggleSelectedValuesFilter,
+          size: BUTTON_SIZES.S,
+          "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
+          innerRef: toggleSelectionButtonRef,
+          children: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
+        }) : /* @__PURE__ */ jsx(StyledNoOptionsSelected, {
+          children: "0 SELECTED"
+        })
+      })
+    ]
+  });
 };
 export {
   HeaderList

package/dist/esm/parts/header-list/HeaderList.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/HeaderList.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  StyledHeaderListWrapper,\n  StyledButtonSelection,\n  StyledSelectedItems,\n  StyledSelectAllCheckbox,\n  StyledNoOptionsSelected,\n} from './styled';\n\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { useHeaderListHandlers } from './useHeaderListHandlers';\nexport const HeaderList = (): JSX.Element => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll },\n    showSelectedOptions,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const {\n    handleKeyDown,\n    handleOnMouseDown,\n    handleFilterSelectionBtnOnTab,\n    handleToggleSelectedValuesFilter,\n    handleCheckAllOnTab,\n    checkboxStatus,\n    handleSelectAllCheckboxChange,\n  } = useHeaderListHandlers();\n\n  return (\n    <StyledHeaderListWrapper\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleOnMouseDown}\n      data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n    >\n      <StyledSelectAllCheckbox>\n        {onSelectAll && (\n          <DSControlledCheckbox\n            checked={checkboxStatus}\n            aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n            name=\"select-all-checkbox\"\n            aria-label=\"Select/Unselect All Items\"\n            id=\"select-all-checkbox\"\n            onChange={handleSelectAllCheckboxChange}\n            onKeyDown={handleCheckAllOnTab}\n            innerRef={selectAllCheckboxRef}\n            device=\"desktop\"\n          />\n        )}\n      </StyledSelectAllCheckbox>\n      <StyledSelectedItems>\n        {multiSelectedValues.length > 0 ? (\n          <StyledButtonSelection\n            onKeyDown={handleFilterSelectionBtnOnTab}\n            buttonType={BUTTON_TYPES.TEXT}\n            onClick={handleToggleSelectedValuesFilter}\n            size={BUTTON_SIZES.S}\n            data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n            innerRef={toggleSelectionButtonRef}\n          >\n            {!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n          </StyledButtonSelection>\n        ) : (\n          <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n        )}\n      </StyledSelectedItems>\n    </StyledHeaderListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACO,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,sBAAsB;AAE1B,SACE,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,mBAAmB,YAAY;AAAA,KAE5C,qCAAC,+BACE,eACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,IAChE,MAAK;AAAA,IACL,cAAW;AAAA,IACX,IAAG;AAAA,IACH,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAO;AAAA,GACT,CAEJ,GACA,qCAAC,2BACE,oBAAoB,SAAS,IAC5B,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,YAAY,aAAa;AAAA,IACzB,SAAS;AAAA,IACT,MAAM,aAAa;AAAA,IACnB,eAAa,mBAAmB,YAAY;AAAA,IAC5C,UAAU;AAAA,KAET,CAAC,sBAAsB,kBAAkB,oBAAoB,YAAY,UAC5E,IAEA,qCAAC,+BAAwB,YAAU,CAEvC,CACF;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,kBAAkB;AAClC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAE1B,SACE,qBAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,mBAAmB,YAAY;AAAA,IAE5C;AAAA,0BAAC;AAAA,QACE,yBACC,oBAAC;AAAA,UACC,SAAS;AAAA,UACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,UAChE,MAAK;AAAA,UACL,cAAW;AAAA,UACX,IAAG;AAAA,UACH,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAO;AAAA,SACT;AAAA,OAEJ;AAAA,MACA,oBAAC;AAAA,QACE,8BAAoB,SAAS,IAC5B,oBAAC;AAAA,UACC,WAAW;AAAA,UACX,YAAY,aAAa;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,eAAa,mBAAmB,YAAY;AAAA,UAC5C,UAAU;AAAA,UAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA,SAC5E,IAEA,oBAAC;AAAA,UAAwB;AAAA,SAAU;AAAA,OAEvC;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/header-list/index.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { HeaderList } from './HeaderList';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;",
   "names": []
 }

package/dist/esm/parts/header-list/styled.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nexport const StyledHeaderListWrapper = styled.div`\n  display: flex;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  justify-content: space-between;\n  padding: 0px 12px 0px 16px;\n  width: inherit;\n  height: 28px;\n  background-color: #fff;\n  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};\n  overflow-x: hidden;\n\n  & button {\n    font-size: 13px;\n  }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n  border-radius: 0px;\n  padding: 0 ${(props) => props.theme.space.xxs};\n  margin: 0;\n  font-size: 13px;\n  align-items: center;\n  transition: unset;\n  &:hover:not([disabled]) {\n    background-color: transparent;\n    color: ${(props) => props.theme.colors.brand['700']};\n  }\n`;\n\nexport const StyledSelectedItems = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n  padding: 0 ${(props) => props.theme.space.xxs};\n  font-size: 13px;\n`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n  display: flex;\n  align-items: center;\n`;\n"],
-  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAUf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9D,MAAM,wBAAwB,OAAO,UAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI1C,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,OAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAEpB,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAUf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9D,MAAM,wBAAwB,OAAO,UAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI1C,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,OAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;",
   "names": []
 }