@elliemae/ds-form-combobox 3.49.0-rc.4 → 3.50.0-next.2

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

@@ -0,0 +1,104 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  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_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
+var import_styled = require("./styled.js");
+var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
+var import_useHeaderListHandlers = require("./useHeaderListHandlers.js");
+const HeaderList = () => {
+  const {
+    props: { selectedValues, onSelectAll },
+    showSelectedOptions,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef,
+    correctOptions: filteredOptions
+  } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
+  const multiSelectedValues = selectedValues;
+  const {
+    handleKeyDown,
+    handleOnMouseDown,
+    handleFilterSelectionBtnOnTab,
+    handleToggleSelectedValuesFilter,
+    handleCheckAllOnTab,
+    checkboxStatus,
+    handleSelectAllCheckboxChange
+  } = (0, import_useHeaderListHandlers.useHeaderListHandlers)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledHeaderListWrapper,
+    {
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleOnMouseDown,
+      "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",
+            "aria-labelledby": "",
+            id: "select-all-checkbox",
+            onChange: handleSelectAllCheckboxChange,
+            onKeyDown: handleCheckAllOnTab,
+            innerRef: selectAllCheckboxRef
+          }
+        ) }),
+        /* @__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_v2.BUTTON_TYPES.TEXT,
+            onClick: handleToggleSelectedValuesFilter,
+            size: import_ds_button_v2.BUTTON_SIZES.S,
+            "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
+            innerRef: toggleSelectionButtonRef,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
+              {
+                value: !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

@@ -0,0 +1,7 @@
+{
+  "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-v2';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  StyledHeaderListWrapper,\n  StyledButtonSelection,\n  StyledSelectedItems,\n  StyledSelectAllCheckbox,\n  StyledNoOptionsSelected,\n} from './styled.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useHeaderListHandlers } from './useHeaderListHandlers.js';\nexport const HeaderList = (): JSX.Element => {\n  const {\n    props: { selectedValues, onSelectAll },\n    showSelectedOptions,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    correctOptions: filteredOptions,\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            aria-labelledby=\"\"\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            <SimpleTruncatedTooltipText\n              value={!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n            ></SimpleTruncatedTooltipText>\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;ADuCnB;AApCJ,mBAAkC;AAClC,0BAA2C;AAC3C,8BAAqC;AACrC,uCAA2C;AAC3C,yBAAgC;AAChC,oBAMO;AAEP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,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;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,8CAAmB,YAAY;AAAA,MAE5C;AAAA,oDAAC,yCACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAgB;AAAA,YAChB,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GAEJ;AAAA,QACA,4CAAC,qCACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,iCAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,iCAAa;AAAA,YACnB,eAAa,8CAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,CAAC,sBAAsB,kBAAkB,oBAAoB,MAAM,MAAM;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  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.js");
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  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,
+  StyledHeaderListWrapper: () => StyledHeaderListWrapper,
+  StyledNoOptionsSelected: () => StyledNoOptionsSelected,
+  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_v2 = require("@elliemae/ds-button-v2");
+const StyledHeaderListWrapper = import_ds_system.styled.div`
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  justify-content: space-between;
+  width: inherit;
+  padding: 5px 12px 5px 16px;
+  @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
+    padding: 3.25px 12px 3.25px 16px;
+  }
+
+  background-color: #fff;
+  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
+  overflow-x: hidden;
+
+  & button {
+    font-size: 1rem;
+  }
+`;
+const StyledButtonSelection = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
+  border-radius: 0px;
+  padding: 0 ${(props) => props.theme.space.xxs};
+  margin: 0;
+  font-size: 1rem;
+  align-items: center;
+  transition: unset;
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: ${(props) => props.theme.colors.brand["700"]};
+  }
+`;
+const StyledSelectedItems = import_ds_system.styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledNoOptionsSelected = import_ds_system.styled.div`
+  padding: 0 ${(props) => props.theme.space.xxs};
+  font-size: 1rem;
+`;
+const StyledSelectAllCheckbox = import_ds_system.styled.div`
+  display: flex;
+  align-items: center;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-len */\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  justify-content: space-between;\n  width: inherit;\n  padding: 5px 12px 5px 16px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 3.25px 12px 3.25px 16px;\n  }\n\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: 1rem;\n  }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n  border-radius: 0px;\n  padding: 0 ${(props) => props.theme.space.xxs};\n  margin: 0;\n  font-size: 1rem;\n  align-items: center;\n  transition: unset;\n  &:hover:not([disabled]) {\n    background-color: transparent;\n    color: ${(props) => props.theme.colors.brand['700']};\n  }\n`;\n\nexport const StyledSelectedItems = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n  padding: 0 ${(props) => props.theme.space.xxs};\n  font-size: 1rem;\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;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAC3B,0BAA2B;AAEpB,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlE,MAAM,4BAAwB,yBAAO,8BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAIxC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/header-list/useHeaderListHandlers.js

@@ -0,0 +1,140 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useHeaderListHandlers_exports = {};
+__export(useHeaderListHandlers_exports, {
+  useHeaderListHandlers: () => useHeaderListHandlers
+});
+module.exports = __toCommonJS(useHeaderListHandlers_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_listHelper = require("../../utils/listHelper.js");
+var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
+const useHeaderListHandlers = () => {
+  const {
+    props: { selectedValues, onSelectAll },
+    showSelectedOptions,
+    internalRef,
+    setShowSelectedOptions,
+    setMenuState,
+    correctOptions: filteredOptions
+  } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const multiSelectedValues = selectedValues;
+  const selectableOptions = (0, import_listHelper.getSelectableOptions)(filteredOptions);
+  const getCheckboxStatus = (0, import_react.useMemo)(() => {
+    if (multiSelectedValues.length === selectableOptions.length) {
+      return true;
+    }
+    if (multiSelectedValues?.length === 0) {
+      return false;
+    }
+    return "mixed";
+  }, [multiSelectedValues.length, selectableOptions.length]);
+  const [checkboxStatus, setCheckboxStatus] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setCheckboxStatus(getCheckboxStatus);
+  }, [getCheckboxStatus, multiSelectedValues]);
+  const handleOnMouseDown = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
+  const handleSelectAllCheckboxChange = (0, import_react.useCallback)(
+    (e) => {
+      if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
+        onSelectAll(
+          filteredOptions.filter((option) => option.type === "option" && !option.disabled),
+          e
+        );
+        setCheckboxStatus(true);
+      } else if (onSelectAll) {
+        onSelectAll([], e);
+        setCheckboxStatus(false);
+      }
+    },
+    [checkboxStatus, onSelectAll, filteredOptions]
+  );
+  const handleToggleSelectedValuesFilter = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      setShowSelectedOptions(!showSelectedOptions);
+    },
+    [setShowSelectedOptions, showSelectedOptions]
+  );
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        setMenuState(false, "close", e);
+        internalRef.current?.focus();
+      }
+    },
+    [setMenuState, internalRef]
+  );
+  const handleFilterSelectionBtnOnTab = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        internalRef.current?.focus();
+      }
+    },
+    [internalRef]
+  );
+  const handleCheckAllOnTab = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
+        e.preventDefault();
+        internalRef.current?.focus();
+      }
+    },
+    [internalRef, multiSelectedValues]
+  );
+  (0, import_react.useEffect)(() => {
+    if (multiSelectedValues.length === 0) {
+      setShowSelectedOptions(false);
+    }
+  }, [multiSelectedValues, setShowSelectedOptions]);
+  return (0, import_react.useMemo)(
+    () => ({
+      handleKeyDown,
+      handleToggleSelectedValuesFilter,
+      handleFilterSelectionBtnOnTab,
+      handleOnMouseDown,
+      handleCheckAllOnTab,
+      handleSelectAllCheckboxChange,
+      checkboxStatus
+    }),
+    [
+      handleKeyDown,
+      handleFilterSelectionBtnOnTab,
+      handleToggleSelectedValuesFilter,
+      handleOnMouseDown,
+      handleCheckAllOnTab,
+      handleSelectAllCheckboxChange,
+      checkboxStatus
+    ]
+  );
+};
+//# sourceMappingURL=useHeaderListHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, onSelectAll },\n    showSelectedOptions,\n    internalRef,\n    setShowSelectedOptions,\n    setMenuState,\n    correctOptions: filteredOptions,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => void = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        internalRef.current?.focus();\n      }\n    },\n    [setMenuState, internalRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AAEtE,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAEM;AAAA,IACV,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["ComboBoxContext"]
+}

package/dist/cjs/parts/menu-list/MenuList.js

@@ -37,20 +37,24 @@ var import_react = require("react");
 var import_styled = require("./styled.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
+var import_header_list = require("../header-list/index.js");
 var import_useItemRenderer = require("./useItemRenderer.js");
 var import_LoadingContainer = require("./LoadingContainer.js");
 var import_SkeletonContainer = require("./SkeletonContainer.js");
 var import_useOnElementResize = require("../../utils/useOnElementResize.js");
 const MenuList = () => {
   const {
-    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
+    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },
     controlsWrapperRef,
     listRef,
+    inputValue,
     wrapperListRef,
     virtualListHelpers,
     correctOptions: filteredOptions,
     instanceUid
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
   const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
@@ -59,32 +63,43 @@ const MenuList = () => {
   const menuListRender = (0, import_react.useMemo)(() => {
     if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid });
     if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
-    if (filteredOptions && filteredOptions.length > 0 || onCreate) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, inline, maxHeight: menuMaxHeight, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledList,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_header_list.HeaderList, {}),
+      filteredOptions && filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledVirtualListWrapper,
+        {
+          tabIndex: -1,
+          inline,
+          maxHeight: menuMaxHeight,
+          innerRef: listRef,
+          withHeader,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styled.StyledList,
+            {
+              "aria-label": "listbox",
+              id: `combo-listbox-${instanceUid}`,
+              role: "listbox",
+              "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
+              style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
+              children: ItemRenderer
+            }
+          )
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledNoResultsWrapper,
         {
-          "aria-label": "listbox",
           id: `combo-listbox-${instanceUid}`,
-          role: "listbox",
-          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
-          style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
-          children: ItemRenderer
+          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
+          role: "alert",
+          children: noOptionsMessage
         }
-      ) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styled.StyledNoResultsWrapper,
-      {
-        id: `combo-listbox-${instanceUid}`,
-        "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
-        role: "alert",
-        children: noOptionsMessage
-      }
-    );
+      )
+    ] });
   }, [
     instanceUid,
     isSkeleton,
     isLoading,
+    withHeader,
     filteredOptions,
     onCreate,
     inline,

package/dist/cjs/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledVirtualListWrapper tabIndex={-1} inline={inline} maxHeight={menuMaxHeight} innerRef={listRef}>\n          <StyledList\n            aria-label=\"listbox\"\n            id={`combo-listbox-${instanceUid}`}\n            role=\"listbox\"\n            data-testid={ComboboxDataTestid.LIST}\n            style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      );\n    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BI;AA5B3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAG9B,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,0CAAyB,UAAU,IAAI,QAAgB,WAAW,eAAe,UAAU,SAC1F;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,IAAI,iBAAiB,WAAW;AAAA,UAChC,MAAK;AAAA,UACL,eAAa,8CAAmB;AAAA,UAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,UAElF;AAAA;AAAA,MACH,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper\n            id={`combo-listbox-${instanceUid}`}\n            data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n            role=\"alert\"\n          >\n            {noOptionsMessage}\n          </StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,iBAAiB,WAAW;AAAA,UAChC,eAAa,8CAAmB;AAAA,UAChC,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/menu-list/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n  z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAK/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n  z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: SizingProps['maxHeight'];\n  withHeader?: boolean;\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
   "names": []
 }

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

@@ -43,7 +43,7 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_constants = require("../../constants.js");
 const useItemRenderer = () => {
   const {
-    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
+    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },
     setMenuState,
     inputValue,
     focusOptionIdx,
@@ -62,7 +62,6 @@ const useItemRenderer = () => {
   }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = (0, import_react.useCallback)(
     (option, e) => {
-      if (readOnly) return;
       if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
         if (!option.disabled) {
           if (onFilter) onFilter(allOptions, inputValue);

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

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