npm - @elliemae/ds-form-combobox - Versions diffs - 3.0.0-next.46 → 3.0.0-next.49 - Mend

@elliemae/ds-form-combobox 3.0.0-next.46 → 3.0.0-next.49

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/cjs/parts/controls-input/ControlsInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uCAA2C;AAE3C,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kCAAe;AAC9B,QAAM,EAAE,mBAAmB,wDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,8CAAiB;AACnB,SACE,mDAAC,wCACC,mDAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GAClE,mDAAC,4CACC,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAEA,mDAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uCAA2C;AAE3C,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kCAAe;AAC9B,QAAM,EAAE,mBAAmB,wDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,8CAAiB;AACnB,SACE,mDAAC,wCACC,mDAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GACjE,mBACC,mDAAC,4CACC,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAGF,mDAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE,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/cjs/parts/controls-input/styled.js CHANGED Viewed

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
   StyledInput: () => StyledInput,
@@ -32,6 +25,7 @@ __export(styled_exports, {
   StyledInputWidthReference: () => StyledInputWidthReference,
   StyledInputWrapper: () => StyledInputWrapper
 });
+module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_theming = require("../../theming");
@@ -42,7 +36,9 @@ const StyledInput = (0, import_ds_system.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 {
@@ -66,17 +62,19 @@ const StyledInputPlaceHolder = import_ds_system.styled.div`
   & span::after {
     content: '';
     padding: 1px;
+    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = import_ds_system.styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
+  z-index: 1;
 `;
 const StyledInputWrapper = (0, import_ds_system.styled)("div")`
   position: relative;
   align-items: center;
   display: flex;
+  padding-right: 1px;
 `;
-module.exports = __toCommonJS(styled_exports);
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;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,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAM,qBAAqB,6BAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;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,wBAAO;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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,6BAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useControlsInput_exports = {};
 __export(useControlsInput_exports, {
   useControlsInput: () => useControlsInput
 });
+module.exports = __toCommonJS(useControlsInput_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_useMaskedOnChange = require("./useMaskedOnChange");
@@ -47,7 +41,11 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && (0, import_listHelper.isSelectedValueEmpty)(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
   (0, import_react.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 = (0, import_useMaskedOnChange.useMaskedOnChange)();
   const handleOnBlur = (0, import_react.useCallback)(() => {
@@ -69,5 +67,4 @@ const useControlsInput = () => {
     spanReference
   }), [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]);
 };
-module.exports = __toCommonJS(useControlsInput_exports);
 //# sourceMappingURL=useControlsInput.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAE9B,QAAM,CAAC,OAAO,YAAY,2BAAS,CAAC;AAEpC,QAAM,gBAAgB,yBAAwB,IAAI;AAClD,QAAM,kBAAkB,CAAC,cAAc,4CAAqB,cAAc,IAAI,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,8BAAU,MAAM;AACd,aAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,gDAAkB;AAEzC,QAAM,eAAe,8BAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,8BAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,0BACL,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAE9B,QAAM,CAAC,OAAO,YAAY,2BAAS,CAAC;AAEpC,QAAM,gBAAgB,yBAAwB,IAAI;AAClD,QAAM,kBAAkB,CAAC,cAAc,4CAAqB,cAAc,IAAI,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,8BAAU,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,gDAAkB;AAEzC,QAAM,eAAe,8BAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,8BAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,0BACL,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/cjs/parts/controls-input/useKeyboardNavigation.js CHANGED Viewed

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useKeyboardNavigation_exports = {};
 __export(useKeyboardNavigation_exports, {
   useKeyboardNavigation: () => useKeyboardNavigation
 });
+module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ComboBoxCTX = require("../../ComboBoxCTX");
@@ -39,6 +33,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -147,10 +142,8 @@ const useKeyboardNavigation = () => {
     if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = (0, import_listHelper.getLastValueSelected)(selectedValues);
       if (!e.currentTarget.value && lastValue) {
-        onChange((0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues), lastValue, e);
+        onChange((0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues, isNonClearable), lastValue, e);
       }
-      if (onFilter)
-        onFilter(allOptions, inputValue);
     }
     if (e.key === "Tab" && !inline && menuState) {
       const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
@@ -183,9 +176,9 @@ const useKeyboardNavigation = () => {
     selectedValues,
     onChange,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef
+    toggleSelectionButtonRef,
+    isNonClearable
   ]);
   return { onInputKeyDown };
 };
-module.exports = __toCommonJS(useKeyboardNavigation_exports);
 //# sourceMappingURL=useKeyboardNavigation.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useMaskedOnChange_exports = {};
 __export(useMaskedOnChange_exports, {
   useMaskedOnChange: () => useMaskedOnChange
 });
+module.exports = __toCommonJS(useMaskedOnChange_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
@@ -59,5 +53,4 @@ const useMaskedOnChange = () => {
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;
 };
-module.exports = __toCommonJS(useMaskedOnChange_exports);
 //# sourceMappingURL=useMaskedOnChange.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, 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) {\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n        setInputValue(e.currentTarget.value);\n      }\n    },\n    [allOptions, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAG9B,QAAM,iBAAiB,8BACrB,CAAC,MAA2C;AAC1C,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,UAAU;AACZ,eAAS,qCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAChF,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,EACF,GACA,CAAC,YAAY,UAAU,eAAe,cAAc,sBAAsB,CAC5E;AAGA,QAAM,qBAAqB,8BACzB,CAAC,GAAwC,SAAkB;AACzD,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,QAAQ;AAAU,eAAS,qCAAc,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;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAG9B,QAAM,iBAAiB,8BACrB,CAAC,MAA2C;AAC1C,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,UAAU;AACZ,eAAS,qCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAChF,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,EACF,GACA,CAAC,YAAY,UAAU,eAAe,cAAc,sBAAsB,CAC5E;AAGA,QAAM,qBAAqB,8BACzB,CAAC,GAAwC,SAAkB;AACzD,2BAAuB,KAAK;AAC5B,iBAAa,MAAM,UAAU,CAAC;AAC9B,QAAI,QAAQ;AAAU,eAAS,qCAAc,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;",
   "names": []
 }

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

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var HeaderList_exports = {};
 __export(HeaderList_exports, {
   HeaderList: () => HeaderList
 });
+module.exports = __toCommonJS(HeaderList_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_button = require("@elliemae/ds-button");
@@ -76,5 +70,4 @@ const HeaderList = () => {
     innerRef: toggleSelectionButtonRef
   }, !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL") : /* @__PURE__ */ import_react.default.createElement(import_styled.StyledNoOptionsSelected, null, "0 SELECTED")));
 };
-module.exports = __toCommonJS(HeaderList_exports);
 //# sourceMappingURL=HeaderList.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* 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          />\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkC;AAClC,uBAA2C;AAC3C,8BAAqC;AACrC,yBAAgC;AAChC,oBAMO;AAGP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,wDAAsB;AAE1B,SACE,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,8CAAmB,YAAY;AAAA,KAE5C,mDAAC,6CACE,eACC,mDAAC;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,GACZ,CAEJ,GACA,mDAAC,yCACE,oBAAoB,SAAS,IAC5B,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,YAAY,8BAAa;AAAA,IACzB,SAAS;AAAA,IACT,MAAM,8BAAa;AAAA,IACnB,eAAa,8CAAmB,YAAY;AAAA,IAC5C,UAAU;AAAA,KAET,CAAC,sBAAsB,kBAAkB,oBAAoB,YAAY,UAC5E,IAEA,mDAAC,6CAAwB,YAAU,CAEvC,CACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkC;AAClC,uBAA2C;AAC3C,8BAAqC;AACrC,yBAAgC;AAChC,oBAMO;AAGP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,wDAAsB;AAE1B,SACE,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,8CAAmB,YAAY;AAAA,KAE5C,mDAAC,6CACE,eACC,mDAAC;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,GACZ,CAEJ,GACA,mDAAC,yCACE,oBAAoB,SAAS,IAC5B,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,YAAY,8BAAa;AAAA,IACzB,SAAS;AAAA,IACT,MAAM,8BAAa;AAAA,IACnB,eAAa,8CAAmB,YAAY;AAAA,IAC5C,UAAU;AAAA,KAET,CAAC,sBAAsB,kBAAkB,oBAAoB,YAAY,UAC5E,IAEA,mDAAC,6CAAwB,YAAU,CAEvC,CACF;AAEJ;",
   "names": []
 }

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

@@ -4,32 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var header_list_exports = {};
 __export(header_list_exports, {
   HeaderList: () => import_HeaderList.HeaderList
 });
+module.exports = __toCommonJS(header_list_exports);
 var React = __toESM(require("react"));
 var import_HeaderList = require("./HeaderList");
-module.exports = __toCommonJS(header_list_exports);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
   StyledButtonSelection: () => StyledButtonSelection,
@@ -33,6 +26,7 @@ __export(styled_exports, {
   StyledSelectAllCheckbox: () => StyledSelectAllCheckbox,
   StyledSelectedItems: () => StyledSelectedItems
 });
+module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button = require("@elliemae/ds-button");
@@ -75,5 +69,4 @@ const StyledSelectAllCheckbox = import_ds_system.styled.div`
   display: flex;
   align-items: center;
 `;
-module.exports = __toCommonJS(styled_exports);
 //# sourceMappingURL=styled.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* 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: 100%;\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  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`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n  display: flex;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,uBAA2B;AAEpB,MAAM,0BAA0B,wBAAO;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,6BAAO,2BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAM/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI1C,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,uBAA2B;AAEpB,MAAM,0BAA0B,wBAAO;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,6BAAO,2BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAM/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI1C,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
   "names": []
 }