@elliemae/ds-form-combobox 3.5.0-rc.9 → 3.6.0-next.0

package/dist/cjs/ComboBox.js

@@ -30,7 +30,7 @@ __export(ComboBox_exports, {
 });
 module.exports = __toCommonJS(ComboBox_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_useComboBox = require("./config/useComboBox");
 var import_container = require("./parts/container");
@@ -38,9 +38,10 @@ var import_ComboBoxCTX = require("./ComboBoxCTX");
 var import_react_desc_prop_types = require("./react-desc-prop-types");
 const DSComboBox = (props) => {
   const ctx = (0, import_useComboBox.useComboBox)(props);
-  return /* @__PURE__ */ import_react.default.createElement(import_ComboBoxCTX.ComboBoxContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ import_react.default.createElement(import_container.Container, null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComboBoxCTX.ComboBoxContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_container.Container, {})
+  });
 };
 DSComboBox.propTypes = import_react_desc_prop_types.ComboboxPropTypes;
 DSComboBox.displayName = "DSComboBox";

package/dist/cjs/ComboBox.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ComboBox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAChC,mCAA+C;AAE/C,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,6BAAAA,QAAA,cAAC,mCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,KAC/B,6BAAAA,QAAA,cAAC,gCAAU,CACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU;AAEhD,qBAAqB,YAAY;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAChC,mCAA+C;AAE/C,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,mCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,sDAAC,8BAAU;AAAA,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU;AAEhD,qBAAqB,YAAY;",
+  "names": []
 }

package/dist/cjs/parts/A11yFocusedOption.js

@@ -28,7 +28,8 @@ __export(A11yFocusedOption_exports, {
 });
 module.exports = __toCommonJS(A11yFocusedOption_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX"));
 var import_styled = require("./styled");
 var import_listHelper = require("../utils/listHelper");
@@ -46,19 +47,19 @@ const A11yFocusedOption = () => {
   const navigationContext = "Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu";
   return (0, import_react.useMemo)(() => {
     if (!(0, import_sharedTypes.isSeparator)(focusOption) && menuState && focusOption && focusOption.type === "option")
-      return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledA11ySelectedValues, {
-        key: menuState,
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledA11ySelectedValues, {
         "aria-live": "polite",
         "aria-atomic": "false",
-        "aria-relevant": "additions text"
-      }, `option ${focusOption?.label} ${isFocusOptionSelected ? "selected and " : ""}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `);
+        "aria-relevant": "additions text",
+        children: `option ${focusOption?.label} ${isFocusOptionSelected ? "selected and " : ""}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `
+      }, menuState);
     if (focusOption?.type === "creatable")
-      return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledA11ySelectedValues, {
-        key: menuState,
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledA11ySelectedValues, {
         "aria-live": "assertive",
         "aria-atomic": "false",
-        "aria-relevant": "additions text"
-      }, `Press enter to Add option written in input box. ${navigationContext}`);
+        "aria-relevant": "additions text",
+        children: `Press enter to Add option written in input box. ${navigationContext}`
+      }, menuState);
     return null;
   }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/A11yFocusedOption.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\nimport { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { filteredOptions, selectedValues },\n    focusOptionIdx,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const selectabledOptions = getSelectableOptions(filteredOptions);\n  const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n  const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  const navigationContext =\n    'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n  return useMemo(() => {\n    if (!isSeparator(focusOption) && menuState && focusOption && focusOption.type === 'option')\n      return (\n        <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n            focusSelectableOptionIdx + 1\n          } of ${selectabledOptions.length}. ${navigationContext} `}\n        </StyledA11ySelectedValues>\n      );\n    if (focusOption?.type === 'creatable')\n      return (\n        <StyledA11ySelectedValues\n          key={menuState}\n          aria-live=\"assertive\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n        >\n          {`Press enter to Add option written in input box. ${navigationContext}`}\n        </StyledA11ySelectedValues>\n      );\n    return null;\n  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAiD;AACjD,yBAA4B;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe;AAAA,IACzC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAC9B,QAAM,yBAAqB,wCAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,gBAAY,8BAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,aAAO,sBAAQ,MAAM;AACnB,QAAI,KAAC,gCAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,6BAAAC,QAAA,cAAC;AAAA,QAAyB,KAAK;AAAA,QAAW,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,SAC5F,UAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,oBACvC;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,6BAAAA,QAAA,cAAC;AAAA,QACC,KAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,SAEb,mDAAmD,mBACtD;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
-  "names": ["ComboBoxContext", "React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAiD;AACjD,yBAA4B;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe;AAAA,IACzC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAC9B,QAAM,yBAAqB,wCAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,gBAAY,8BAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,aAAO,sBAAQ,MAAM;AACnB,QAAI,KAAC,gCAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,4CAAC;AAAA,QAAyC,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,QAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW;AAAA,SAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,4CAAC;AAAA,QAEC,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,QAEb,6DAAmD;AAAA,SAL/C,SAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
+  "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/A11ySelectedValues.js

@@ -28,7 +28,8 @@ __export(A11ySelectedValues_exports, {
 });
 module.exports = __toCommonJS(A11ySelectedValues_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX"));
 var import_styled = require("./styled");
 var import_ComboboxDataTestids = require("../ComboboxDataTestids");
@@ -45,11 +46,12 @@ const A11ySelectedValues = () => {
     }
     return "No Option Selected";
   }, [selectedValues]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledA11ySelectedValues, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledA11ySelectedValues, {
     "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.ALLY_SELECTED_VALUES,
     "aria-live": "polite",
     "aria-atomic": "false",
-    "aria-relevant": "additions text"
-  }, msg);
+    "aria-relevant": "additions text",
+    children: msg
+  });
 };
 //# sourceMappingURL=A11ySelectedValues.js.map

package/dist/cjs/parts/A11ySelectedValues.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/A11ySelectedValues.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n  const {\n    props: { selectedValues },\n  } = useContext(ComboBoxContext);\n\n  const msg = useMemo(() => {\n    if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n    }\n    if (selectedValues) {\n      return `Option selected: ${selectedValues?.label}`;\n    }\n    return 'No Option Selected';\n  }, [selectedValues]);\n\n  return (\n    <StyledA11ySelectedValues\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {msg}\n    </StyledA11ySelectedValues>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,iCAAmC;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,UAAM,sBAAQ,MAAM;AACxB,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,6BAAAC,QAAA,cAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,KAEb,GACH;AAEJ;",
-  "names": ["ComboBoxContext", "React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,iCAAmC;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,UAAM,sBAAQ,MAAM;AACxB,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,4CAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,IAEb;AAAA,GACH;AAEJ;",
+  "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/DropdownIndicator.js

@@ -28,7 +28,8 @@ __export(DropdownIndicator_exports, {
 });
 module.exports = __toCommonJS(DropdownIndicator_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
@@ -54,7 +55,7 @@ const DropdownIndicator = () => {
   const handleOnClick = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement(StyledDropDownButton, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDropDownButton, {
     onClick: handleOnClick,
     "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
@@ -64,7 +65,8 @@ const DropdownIndicator = () => {
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",
-    tabIndex: -1
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null));
+    tabIndex: -1,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {})
+  });
 };
 //# sourceMappingURL=DropdownIndicator.js.map

package/dist/cjs/parts/DropdownIndicator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA+C;AAC/C,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,6BAAAC,QAAA,cAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,8CAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,6BAAAA,QAAA,cAAC,sCAAiB,CACpB;AAEJ;",
-  "names": ["ComboBoxContext", "React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA+C;AAC/C,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,8CAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,IAEV,sDAAC,oCAAiB;AAAA,GACpB;AAEJ;",
+  "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/container/Container.js

@@ -28,7 +28,8 @@ __export(Container_exports, {
 });
 module.exports = __toCommonJS(Container_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
@@ -60,26 +61,39 @@ const Container = () => {
     };
   }, [setMenuState]);
   return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ import_react.default.createElement(import_styled.StyledContainer, {
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledContainer, {
       "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
       ref: setReferenceElement,
       ...containerGlobals,
-      ...xStyledProps
-    }, inline ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_controls.Controls, null), /* @__PURE__ */ import_react.default.createElement(import_menu_list.MenuList, null)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_controls.Controls, null), /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
-      customOffset: [0, 5],
-      referenceElement,
-      showPopover: menuState,
-      closeContextMenu: handleCloseMenu,
-      startPlacementPreference,
-      placementOrderPreference,
-      withoutPortal,
-      withoutArrow: true,
-      withoutAnimation: true,
-      zIndex
-    }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPopperWrapper, {
-      tabIndex: -1,
-      onMouseDown: handleMouseDown
-    }, /* @__PURE__ */ import_react.default.createElement(import_menu_list.MenuList, null))))),
+      ...xStyledProps,
+      children: inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
+        ]
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, {
+            customOffset: [0, 5],
+            referenceElement,
+            showPopover: menuState,
+            closeContextMenu: handleCloseMenu,
+            startPlacementPreference,
+            placementOrderPreference,
+            withoutPortal,
+            withoutArrow: true,
+            withoutAnimation: true,
+            zIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, {
+              tabIndex: -1,
+              onMouseDown: handleMouseDown,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
+            })
+          })
+        ]
+      })
+    }),
     [
       inline,
       setReferenceElement,

package/dist/cjs/parts/container/Container.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { placeholder, onKeyDown, onChange, disabled, tabIndex, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (innerRef?.current) innerRef.current.blur();\n  }, [innerRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        {...containerGlobals}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,QAAI,yBAAW,mBAAAA,OAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AACxG,QAAM,uBAAmB,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,WAAW,UAAU,UAAU,aAAa,iBAAiB,IAAI;AACtF,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,aAAO;AAAA,IACL,MACE,6BAAAC,QAAA,cAAC;AAAA,MACC,eAAa,8CAAmB;AAAA,MAChC,KAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,OAEH,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,8BAAS,GACV,6BAAAA,QAAA,cAAC,+BAAS,CACZ,IAEA,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,8BAAS,GACV,6BAAAA,QAAA,cAAC;AAAA,MACC,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,kBAAgB;AAAA,MAChB;AAAA,OAEA,6BAAAA,QAAA,cAAC;AAAA,MAAoB,UAAU;AAAA,MAAI,aAAa;AAAA,OAC9C,6BAAAA,QAAA,cAAC,+BAAS,CACZ,CACF,CACF,CAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": ["ComboBoxContext", "React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,QAAI,yBAAW,mBAAAA,OAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AACxG,QAAM,uBAAmB,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,WAAW,UAAU,UAAU,aAAa,iBAAiB,IAAI;AACtF,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,eAAa,8CAAmB;AAAA,MAChC,KAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["ComboBoxContext"]
 }

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

@@ -28,7 +28,8 @@ __export(Controls_exports, {
 });
 module.exports = __toCommonJS(Controls_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_DropdownIndicator = require("../DropdownIndicator");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
@@ -87,7 +88,7 @@ const Controls = () => {
     () => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "29px"] : ["minmax(0px, auto)"],
     [inline]
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledControlsWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledControlsWrapper, {
     ref: controlsWrapperRef,
     cols,
     disabled,
@@ -97,19 +98,34 @@ const Controls = () => {
     onClick: handleOnClick,
     onMouseDown: handleOnMouseDown,
     onKeyDown: onKeyDownPills,
-    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.CONTROLS_WRAPPER
-  }, !inline && /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSelection, {
-    ref: selectedOptionsRef,
-    onClick: handleOnPillsClick
-  }, hasFocus && /* @__PURE__ */ import_react.default.createElement(import_A11ySelectedValues.A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ import_react.default.createElement(import_multi_selected_values_container.MultiSelectedValuesContainer, null) : /* @__PURE__ */ import_react.default.createElement("div", {
-    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
-  }, selectedValues && /* @__PURE__ */ import_react.default.createElement(import_RemovableSelectedValuePill.RemovableSelectedValuePill, {
-    pill: selectedValues
-  }))), /* @__PURE__ */ import_react.default.createElement(import_A11yFocusedOption.A11yFocusedOption, null), /* @__PURE__ */ import_react.default.createElement(import_ControlsInput.ControlsInput, null), !inline && /* @__PURE__ */ import_react.default.createElement(import_styled.StyledHeaderActionsWrapper, {
-    justifyContent: "center",
-    cols: ["min-content", "min-content"]
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyleHeaderActionsSeparator, {
-    disabled
-  }), /* @__PURE__ */ import_react.default.createElement(import_DropdownIndicator.DropdownIndicator, null)));
+    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.CONTROLS_WRAPPER,
+    children: [
+      !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSelection, {
+        ref: selectedOptionsRef,
+        onClick: handleOnPillsClick,
+        children: [
+          hasFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11ySelectedValues.A11ySelectedValues, {}),
+          Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
+            children: selectedValues && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RemovableSelectedValuePill.RemovableSelectedValuePill, {
+              pill: selectedValues
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yFocusedOption.A11yFocusedOption, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
+      !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderActionsWrapper, {
+        justifyContent: "center",
+        cols: ["min-content", "min-content"],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHeaderActionsSeparator, {
+            disabled
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownIndicator.DropdownIndicator, {})
+        ]
+      })
+    ]
+  });
 };
 //# sourceMappingURL=Controls.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6BAAAC,QAAA,cAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,KAE/B,CAAC,UACA,6BAAAA,QAAA,cAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KAChD,YAAY,6BAAAA,QAAA,cAAC,kDAAmB,GAChC,MAAM,QAAQ,cAAc,IAC3B,6BAAAA,QAAA,cAAC,yEAA6B,IAE9B,6BAAAA,QAAA,cAAC;AAAA,IAAI,eAAa,8CAAmB;AAAA,KAClC,kBAAkB,6BAAAA,QAAA,cAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,6BAAAA,QAAA,cAAC,gDAAkB,GAEnB,6BAAAA,QAAA,cAAC,wCAAc,GACd,CAAC,UACA,6BAAAA,QAAA,cAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,6BAAAA,QAAA,cAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,6BAAAA,QAAA,cAAC,gDAAkB,CACrB,CAEJ;AAEJ;",
-  "names": ["ComboBoxContext", "React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,6CAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,4CAAC,gDAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC;AAAA,YAAI,eAAa,8CAAmB;AAAA,YAClC,4BAAkB,4CAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,4CAAC,8CAAkB;AAAA,MAEnB,4CAAC,sCAAc;AAAA,MACd,CAAC,UACA,6CAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,sDAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
+  "names": ["ComboBoxContext"]
 }

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

@@ -28,7 +28,8 @@ __export(ControlsInput_exports, {
 });
 module.exports = __toCommonJS(ControlsInput_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
@@ -46,31 +47,40 @@ const ControlsInput = () => {
   const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
   const { tabIndex } = (0, import_ds_utilities.useGetGlobalAttributes)(restProps);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputWidthReference, {
-    ref: spanReference
-  }, spanReferenceText), showPlaceholder && /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputPlaceHolder, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
-    value: showPlaceholder
-  })), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInput, {
-    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
-    autoFocus,
-    placeholder,
-    "aria-controls": "combo-listbox",
-    "aria-activedescendant": focusOptionIdx,
-    "aria-expanded": 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__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, {
+        ref: spanReference,
+        children: spanReferenceText
+      }),
+      showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputPlaceHolder, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+          value: showPlaceholder
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInput, {
+        "data-testid": import_ComboboxDataTestids.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
+      })
+    ]
+  });
 };
 //# sourceMappingURL=ControlsInput.js.map

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

@@ -2,6 +2,6 @@
   "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';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uCAA2C;AAC3C,0BAAuC;AAEvC,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM,EAAE,SAAS,QAAI,4CAAuB,SAAS;AAErD,SACE,6BAAAA,QAAA,cAAC,wCACC,6BAAAA,QAAA,cAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GACjE,mBACC,6BAAAA,QAAA,cAAC,4CACC,6BAAAA,QAAA,cAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAGF,6BAAAA,QAAA,cAAC;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;AAAA,IACA,cAAc;AAAA,GAChB,CACF;AAEJ;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,uCAA2C;AAC3C,0BAAuC;AAEvC,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM,EAAE,SAAS,QAAI,4CAAuB,SAAS;AAErD,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;AAAA,QACC,eAAa,8CAAmB;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/cjs/parts/header-list/HeaderList.js

@@ -28,7 +28,8 @@ __export(HeaderList_exports, {
 });
 module.exports = __toCommonJS(HeaderList_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
 var import_ComboBoxCTX = require("../../ComboBoxCTX");
@@ -52,27 +53,38 @@ const HeaderList = () => {
     checkboxStatus,
     handleSelectAllCheckboxChange
   } = (0, import_useHeaderListHandlers.useHeaderListHandlers)();
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledHeaderListWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown,
-    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSelectAllCheckbox, null, onSelectAll && /* @__PURE__ */ import_react.default.createElement(import_ds_form_checkbox.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__ */ import_react.default.createElement(import_styled.StyledSelectedItems, null, multiSelectedValues.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledButtonSelection, {
-    onKeyDown: handleFilterSelectionBtnOnTab,
-    buttonType: import_ds_button.BUTTON_TYPES.TEXT,
-    onClick: handleToggleSelectedValuesFilter,
-    size: import_ds_button.BUTTON_SIZES.S,
-    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
-    innerRef: toggleSelectionButtonRef
-  }, !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL") : /* @__PURE__ */ import_react.default.createElement(import_styled.StyledNoOptionsSelected, null, "0 SELECTED")));
+    "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectAllCheckbox, {
+        children: onSelectAll && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_checkbox.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__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectedItems, {
+        children: multiSelectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledButtonSelection, {
+          onKeyDown: handleFilterSelectionBtnOnTab,
+          buttonType: import_ds_button.BUTTON_TYPES.TEXT,
+          onClick: handleToggleSelectedValuesFilter,
+          size: import_ds_button.BUTTON_SIZES.S,
+          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
+          innerRef: toggleSelectionButtonRef,
+          children: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoOptionsSelected, {
+          children: "0 SELECTED"
+        })
+      })
+    ]
+  });
 };
 //# sourceMappingURL=HeaderList.js.map

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

@@ -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            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", "import * as React from 'react';\nexport { React };\n"],
-  "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,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE,6BAAAA,QAAA,cAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,8CAAmB,YAAY;AAAA,KAE5C,6BAAAA,QAAA,cAAC,6CACE,eACC,6BAAAA,QAAA,cAAC;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,6BAAAA,QAAA,cAAC,yCACE,oBAAoB,SAAS,IAC5B,6BAAAA,QAAA,cAAC;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,6BAAAA,QAAA,cAAC,6CAAwB,YAAU,CAEvC,CACF;AAEJ;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,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,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE,6CAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,8CAAmB,YAAY;AAAA,IAE5C;AAAA,kDAAC;AAAA,QACE,yBACC,4CAAC;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,4CAAC;AAAA,QACE,8BAAoB,SAAS,IAC5B,4CAAC;AAAA,UACC,WAAW;AAAA,UACX,YAAY,8BAAa;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,8BAAa;AAAA,UACnB,eAAa,8CAAmB,YAAY;AAAA,UAC5C,UAAU;AAAA,UAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA,SAC5E,IAEA,4CAAC;AAAA,UAAwB;AAAA,SAAU;AAAA,OAEvC;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
 }