@elliemae/ds-controlled-form 2.2.0-next.3 → 2.3.0-alpha.1

package/esm/controlled-combobox/parts/controls-input/useControlsInput.js

@@ -1,18 +1,10 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
-import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { isSelectedValueEmpty } from '../../utils/listHelper.js';
-
+import * as React from "react";
+import { useContext, useEffect, useMemo, useRef, useCallback, useState } from "react";
+import { ComboBoxContext } from "../../ComboBoxCTX";
+import { isSelectedValueEmpty } from "../../utils/listHelper";
 const useControlsInput = () => {
-  var _inputRef$current, _inputRef$current2, _inputRef$current3;
-
   const {
-    props: {
-      selectedValues,
-      placeholder,
-      onFilter
-    },
+    props: { selectedValues, placeholder, onFilter },
     setShowPopover,
     setCurrentOption,
     inputRef,
@@ -23,36 +15,30 @@ const useControlsInput = () => {
   const [width, setWidth] = useState(1);
   const spanReference = useRef(null);
   useEffect(() => {
-    var _spanReference$curren;
-
-    setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
-  }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]); // When writting open popover
-  // and refresh selected values and update filter outside value.
-
-  const handleOnChange = useCallback(e => {
+    setWidth(spanReference.current?.offsetWidth || 1);
+  }, [inputRef.current?.value]);
+  const handleOnChange = useCallback((e) => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     onFilter(e.currentTarget.value);
   }, [onFilter, setShowPopover, setShowSelectedOptions]);
   const handleOnBlur = useCallback(() => {
     setHasFocus(false);
-    if (inputRef.current) inputRef.current.value = '';
+    if (inputRef.current)
+      inputRef.current.value = "";
     setTimeout(() => {
-      var _wrapperListRef$curre;
-
-      if (!(wrapperListRef !== null && wrapperListRef !== void 0 && (_wrapperListRef$curre = wrapperListRef.current) !== null && _wrapperListRef$curre !== void 0 && _wrapperListRef$curre.contains(document.activeElement))) {
+      if (!wrapperListRef?.current?.contains(document.activeElement)) {
         setShowPopover(false);
       }
-
-      setCurrentOption('');
-      onFilter('');
+      setCurrentOption("");
+      onFilter("");
     });
   }, [setHasFocus, setCurrentOption, wrapperListRef, onFilter, inputRef, setShowPopover]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);
-  const showPlaceholder = !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && isSelectedValueEmpty(selectedValues) ? placeholder : null;
-  const spanReferenceText = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.replace(/\s/g, '\u00a0');
+  const showPlaceholder = !inputRef.current?.value && isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  const spanReferenceText = inputRef.current?.value.replace(/\s/g, "\xA0");
   return useMemo(() => ({
     handleOnFocus,
     handleOnBlur,
@@ -63,5 +49,7 @@ const useControlsInput = () => {
     spanReference
   }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
 };
-
-export { useControlsInput };
+export {
+  useControlsInput
+};
+//# sourceMappingURL=useControlsInput.js.map

package/esm/controlled-combobox/parts/controls-input/useControlsInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/controls-input/useControlsInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n  handleOnFocus: () => void;\n  handleOnBlur: () => void;\n  handleOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, placeholder, onFilter },\n    setShowPopover,\n    setCurrentOption,\n    inputRef,\n    wrapperListRef,\n    setHasFocus,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  const spanReference = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    setWidth(spanReference.current?.offsetWidth || 1);\n  }, [inputRef.current?.value]);\n\n  // When writting open popover\n  // and refresh selected values and update filter outside value.\n  const handleOnChange = useCallback(\n    (e: React.FormEvent<HTMLInputElement>) => {\n      setShowSelectedOptions(false);\n      setShowPopover(true);\n      onFilter(e.currentTarget.value);\n    },\n    [onFilter, setShowPopover, setShowSelectedOptions],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    setHasFocus(false);\n    if (inputRef.current) inputRef.current.value = '';\n\n    setTimeout(() => {\n      if (!wrapperListRef?.current?.contains(document.activeElement)) {\n        setShowPopover(false);\n      }\n      setCurrentOption('');\n      onFilter('');\n    });\n  }, [setHasFocus, setCurrentOption, wrapperListRef, onFilter, inputRef, setShowPopover]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  const showPlaceholder = !inputRef.current?.value && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n  const spanReferenceText = inputRef.current?.value.replace(/\\s/g, '\\u00a0');\n\n  return useMemo(\n    () => ({\n      handleOnFocus,\n      handleOnBlur,\n      handleOnChange,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AAWA,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,aAAa;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,CAAC,OAAO,YAAY,SAAS;AACnC,QAAM,gBAAgB,OAAwB;AAE9C,YAAU,MAAM;AACd,aAAS,cAAc,SAAS,eAAe;AAAA,KAC9C,CAAC,SAAS,SAAS;AAItB,QAAM,iBAAiB,YACrB,CAAC,MAAyC;AACxC,2BAAuB;AACvB,mBAAe;AACf,aAAS,EAAE,cAAc;AAAA,KAE3B,CAAC,UAAU,gBAAgB;AAG7B,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY;AACZ,QAAI,SAAS;AAAS,eAAS,QAAQ,QAAQ;AAE/C,eAAW,MAAM;AACf,UAAI,CAAC,gBAAgB,SAAS,SAAS,SAAS,gBAAgB;AAC9D,uBAAe;AAAA;AAEjB,uBAAiB;AACjB,eAAS;AAAA;AAAA,KAEV,CAAC,aAAa,kBAAkB,gBAAgB,UAAU,UAAU;AAEvE,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY;AAAA,KACX,CAAC;AAEJ,QAAM,kBAAkB,CAAC,SAAS,SAAS,SAAS,qBAAqB,kBAAkB,cAAc;AACzG,QAAM,oBAAoB,SAAS,SAAS,MAAM,QAAQ,OAAO;AAEjE,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,eAAe,cAAc,gBAAgB,mBAAmB,iBAAiB,OAAO;AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -1,17 +1,12 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
-import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledDropDownButton } from './styled.js';
-import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-
-var _ChevronSmallDown;
-
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ChevronSmallDown } from "@elliemae/ds-icons";
+import { ComboBoxContext } from "../../ComboBoxCTX";
+import { StyledDropDownButton } from "./styled";
+import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 const DropdownIndicator = () => {
-  const {
-    showPopover
-  } = useContext(ComboBoxContext);
-  return /*#__PURE__*/_jsx(StyledDropDownButton, {
+  const { showPopover } = useContext(ComboBoxContext);
+  return /* @__PURE__ */ React2.createElement(StyledDropDownButton, {
     "data-testid": ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
@@ -19,9 +14,13 @@ const DropdownIndicator = () => {
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "text",
-    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
     tabIndex: -1
   });
 };
-
-export { DropdownIndicator as default };
+var DropdownIndicator_default = DropdownIndicator;
+export {
+  DropdownIndicator,
+  DropdownIndicator_default as default
+};
+//# sourceMappingURL=DropdownIndicator.js.map

package/esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledDropDownButton } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nconst DropdownIndicator = (): JSX.Element => {\n  const { showPopover } = useContext(ComboBoxContext);\n\n  return (\n    <StyledDropDownButton\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      aria-expanded={showPopover}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"text\"\n      icon={<ChevronSmallDown />}\n      tabIndex={-1}\n    />\n  );\n};\n\nexport { DropdownIndicator };\nexport default DropdownIndicator;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,MAAmB;AAC3C,QAAM,EAAE,gBAAgB,WAAW;AAEnC,SACE,qCAAC,sBAAD;AAAA,IACE,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,qCAAC,kBAAD;AAAA,IACN,UAAU;AAAA;AAAA;AAMhB,IAAO,4BAAQ;",
+  "names": []
+}

package/esm/controlled-combobox/parts/dropdown-indicator/index.js

@@ -1 +1,2 @@
-
+import * as React from "react";
+//# sourceMappingURL=index.js.map

package/esm/controlled-combobox/parts/dropdown-indicator/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/parts/dropdown-indicator/styled.js

@@ -1,8 +1,14 @@
-import styled from 'styled-components';
-import DSButton from '@elliemae/ds-button';
-
-const StyledDropDownButton = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-14dzwqd-0"
-})(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
-
-export { StyledDropDownButton };
+import * as React from "react";
+import styled from "styled-components";
+import { DSButton } from "@elliemae/ds-button";
+const StyledDropDownButton = styled(DSButton)`
+  box-sizing: border-box;
+  width: 100;
+  & svg {
+    fill: ${(props) => props.theme.colors.brand["700"]};
+  }
+`;
+export {
+  StyledDropDownButton
+};
+//# sourceMappingURL=styled.js.map

package/esm/controlled-combobox/parts/dropdown-indicator/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/dropdown-indicator/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButton } from '@elliemae/ds-button';\n\nexport const StyledDropDownButton = styled(DSButton)`\n  box-sizing: border-box;\n  width: 100;\n  & svg {\n    fill: ${(props) => props.theme.colors.brand['700']};\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,YAI/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/parts/empty-state/index.js

@@ -1,15 +1,16 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledNoResultsWrapper, StyledNoResults } from './styled.js';
-
-var _StyledNoResults;
-
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ComboBoxContext } from "../../ComboBoxCTX";
+import { StyledNoResults, StyledNoResultsWrapper } from "./styled";
 const EmptyState = () => {
-  useContext(ComboBoxContext);
-  return /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
+  const {
+    props: { onCreate }
+  } = useContext(ComboBoxContext);
+  return /* @__PURE__ */ React2.createElement(StyledNoResultsWrapper, {
     id: "id-no-results"
-  }, void 0, _StyledNoResults || (_StyledNoResults = /*#__PURE__*/_jsx(StyledNoResults, {}, void 0, "No matches found")));
+  }, /* @__PURE__ */ React2.createElement(StyledNoResults, null, "No matches found"));
 };
-
-export { EmptyState };
+export {
+  EmptyState
+};
+//# sourceMappingURL=index.js.map

package/esm/controlled-combobox/parts/empty-state/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/empty-state/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledNoResults, StyledNoResultsWrapper } from './styled';\n\nconst EmptyState = (): JSX.Element => {\n  const {\n    props: { onCreate },\n  } = useContext(ComboBoxContext);\n  return (\n    <StyledNoResultsWrapper id=\"id-no-results\">\n      {/* {onCreate ? (\n        <StyledNoResults>\n          No items match your search, click RETURN at any point to add your unique entry to the field\n        </StyledNoResults>\n      ) : ( */}\n      <StyledNoResults>No matches found</StyledNoResults>\n      {/* )} */}\n    </StyledNoResultsWrapper>\n  );\n};\n\nexport { EmptyState };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,aAAa,MAAmB;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,MACP,WAAW;AACf,SACE,qCAAC,wBAAD;AAAA,IAAwB,IAAG;AAAA,KAMzB,qCAAC,iBAAD,MAAiB;AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/parts/empty-state/styled.js

@@ -1,10 +1,11 @@
-import styled from 'styled-components';
-
-const StyledNoResultsWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1j46c03-0"
-})(["padding:16px;"]);
-const StyledNoResults = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1j46c03-1"
-})([""]);
-
-export { StyledNoResults, StyledNoResultsWrapper };
+import * as React from "react";
+import styled from "styled-components";
+const StyledNoResultsWrapper = styled.div`
+  padding: 16px;
+`;
+const StyledNoResults = styled.span``;
+export {
+  StyledNoResults,
+  StyledNoResultsWrapper
+};
+//# sourceMappingURL=styled.js.map

package/esm/controlled-combobox/parts/empty-state/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/empty-state/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n\nexport const StyledNoResults = styled.span``;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,kBAAkB,OAAO;",
+  "names": []
+}

package/esm/controlled-combobox/parts/header-list/HeaderList.js

@@ -1,42 +1,33 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { useContext } from 'react';
-import { noop } from 'lodash';
-import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
-import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledHeaderListWrapper, StyledSelectAllCheckbox, StyledSelectedItems, StyledButtonSelection, StyledNoOptionsSelected } from './styled.js';
-import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-import { useHeaderListHandlers } from './useHeaderListHandlers.js';
-
-var _StyledNoOptionsSelec;
-
+import * as React from "react";
+import React2, { useContext } from "react";
+import { noop } from "lodash";
+import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
+import { ComboBoxContext } from "../../ComboBoxCTX";
+import {
+  StyledHeaderListWrapper,
+  StyledButtonSelection,
+  StyledSelectedItems,
+  StyledSelectAllCheckbox,
+  StyledNoOptionsSelected
+} from "./styled";
+import { ComboboxDataTestid } from "../../ComboboxDataTestids";
+import { useHeaderListHandlers } from "./useHeaderListHandlers";
 const HeaderList = () => {
   const {
-    props: {
-      onSelectAll,
-      onClearAll,
-      selectedValues
-    },
+    props: { onSelectAll, onClearAll, selectedValues },
     showSelectedOptions,
     inputRef
   } = useContext(ComboBoxContext);
   const isSelectAllSupplied = onSelectAll !== noop;
   const isClearAllSupplied = onClearAll !== noop;
   const multiSelectedValues = selectedValues;
-  const {
-    handleKeyDown,
-    handleOnMouseDown,
-    handleToggle,
-    checkboxStatus,
-    handleSelectAllCheckboxChange
-  } = useHeaderListHandlers();
-  return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
+  const { handleKeyDown, handleOnMouseDown, handleToggle, checkboxStatus, handleSelectAllCheckboxChange } = useHeaderListHandlers();
+  return /* @__PURE__ */ React2.createElement(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, isSelectAllSupplied && isClearAllSupplied && /*#__PURE__*/_jsx(DSControlledCheckbox, {
+  }, /* @__PURE__ */ React2.createElement(StyledSelectAllCheckbox, null, isSelectAllSupplied && isClearAllSupplied && /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
     checked: checkboxStatus,
-    ariaControls: checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
+    ariaControls: checkboxStatus === "mixed" ? multiSelectedValues.map((item) => item.dsId).join(" ") : "",
     name: "select-all-checkbox",
     ariaLabel: "Select/Unselect All Items",
     id: "select-all-checkbox",
@@ -44,27 +35,21 @@ const HeaderList = () => {
     "data-testid": ComboboxDataTestid.SELECT_ALL_CHECKBOX,
     onBlur: () => {
       if (multiSelectedValues.length === 0) {
-        setTimeout(() => {
-          var _inputRef$current;
-
-          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-        });
+        setTimeout(() => inputRef.current?.focus());
       }
     }
-  })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(StyledButtonSelection, {
+  })), /* @__PURE__ */ React2.createElement(StyledSelectedItems, null, multiSelectedValues.length > 0 ? /* @__PURE__ */ React2.createElement(StyledButtonSelection, {
     onBlur: () => {
-      setTimeout(() => {
-        var _inputRef$current2;
-
-        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-      });
+      setTimeout(() => inputRef.current?.focus());
     },
     buttonType: "text",
     onClick: handleToggle,
-    labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
+    labelText: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL",
     size: "s",
     "data-testid": ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE
-  }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }) : /* @__PURE__ */ React2.createElement(StyledNoOptionsSelected, null, "0 SELECTED")));
+};
+export {
+  HeaderList
 };
-
-export { HeaderList };
+//# sourceMappingURL=HeaderList.js.map

package/esm/controlled-combobox/parts/header-list/HeaderList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/header-list/HeaderList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { noop } from 'lodash';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  StyledHeaderListWrapper,\n  StyledButtonSelection,\n  StyledSelectedItems,\n  StyledSelectAllCheckbox,\n  StyledNoOptionsSelected,\n} from './styled';\nimport { CBItemOption } from '../../index.d';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { useHeaderListHandlers } from './useHeaderListHandlers';\nconst HeaderList = (): JSX.Element => {\n  const {\n    props: { onSelectAll, onClearAll, selectedValues },\n    showSelectedOptions,\n    inputRef,\n  } = useContext(ComboBoxContext);\n\n  const isSelectAllSupplied = onSelectAll !== noop;\n  const isClearAllSupplied = onClearAll !== noop;\n\n  const multiSelectedValues = selectedValues as CBItemOption[];\n  const { handleKeyDown, handleOnMouseDown, handleToggle, checkboxStatus, handleSelectAllCheckboxChange } =\n    useHeaderListHandlers();\n\n  return (\n    <StyledHeaderListWrapper onKeyDown={handleKeyDown} onMouseDown={handleOnMouseDown}>\n      <StyledSelectAllCheckbox>\n        {isSelectAllSupplied && isClearAllSupplied && (\n          <DSControlledCheckbox\n            checked={checkboxStatus}\n            ariaControls={checkboxStatus === 'mixed' ? multiSelectedValues.map((item) => item.dsId).join(' ') : ''}\n            name=\"select-all-checkbox\"\n            ariaLabel=\"Select/Unselect All Items\"\n            id=\"select-all-checkbox\"\n            onChange={handleSelectAllCheckboxChange}\n            data-testid={ComboboxDataTestid.SELECT_ALL_CHECKBOX}\n            onBlur={() => {\n              if (multiSelectedValues.length === 0) {\n                setTimeout(() => inputRef.current?.focus());\n              }\n            }}\n          />\n        )}\n      </StyledSelectAllCheckbox>\n      <StyledSelectedItems>\n        {multiSelectedValues.length > 0 ? (\n          <StyledButtonSelection\n            onBlur={() => {\n              setTimeout(() => inputRef.current?.focus());\n            }}\n            buttonType=\"text\"\n            onClick={handleToggle}\n            labelText={!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n            size=\"s\"\n            data-testid={ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE}\n          />\n        ) : (\n          <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n        )}\n      </StyledSelectedItems>\n    </StyledHeaderListWrapper>\n  );\n};\n\nexport { HeaderList };\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA,MAAM,aAAa,MAAmB;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,YAAY;AAAA,IAClC;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,sBAAsB,gBAAgB;AAC5C,QAAM,qBAAqB,eAAe;AAE1C,QAAM,sBAAsB;AAC5B,QAAM,EAAE,eAAe,mBAAmB,cAAc,gBAAgB,kCACtE;AAEF,SACE,qCAAC,yBAAD;AAAA,IAAyB,WAAW;AAAA,IAAe,aAAa;AAAA,KAC9D,qCAAC,yBAAD,MACG,uBAAuB,sBACtB,qCAAC,sBAAD;AAAA,IACE,SAAS;AAAA,IACT,cAAc,mBAAmB,UAAU,oBAAoB,IAAI,CAAC,SAAS,KAAK,MAAM,KAAK,OAAO;AAAA,IACpG,MAAK;AAAA,IACL,WAAU;AAAA,IACV,IAAG;AAAA,IACH,UAAU;AAAA,IACV,eAAa,mBAAmB;AAAA,IAChC,QAAQ,MAAM;AACZ,UAAI,oBAAoB,WAAW,GAAG;AACpC,mBAAW,MAAM,SAAS,SAAS;AAAA;AAAA;AAAA,OAM7C,qCAAC,qBAAD,MACG,oBAAoB,SAAS,IAC5B,qCAAC,uBAAD;AAAA,IACE,QAAQ,MAAM;AACZ,iBAAW,MAAM,SAAS,SAAS;AAAA;AAAA,IAErC,YAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW,CAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA,IACpF,MAAK;AAAA,IACL,eAAa,mBAAmB;AAAA,OAGlC,qCAAC,yBAAD,MAAyB;AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/parts/header-list/index.js

@@ -1 +1,6 @@
-export { HeaderList } from './HeaderList.js';
+import * as React from "react";
+import { HeaderList } from "./HeaderList";
+export {
+  HeaderList
+};
+//# sourceMappingURL=index.js.map

package/esm/controlled-combobox/parts/header-list/index.js.map

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

package/esm/controlled-combobox/parts/header-list/styled.js

@@ -1,21 +1,50 @@
-import styled from 'styled-components';
-import DSButton from '@elliemae/ds-button';
+import * as React from "react";
+import styled from "styled-components";
+import { DSButton } from "@elliemae/ds-button";
+const StyledHeaderListWrapper = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  justify-content: space-between;
+  padding: 0px 12px 0px 16px;
+  width: 100%;
+  height: 28px;
+  background-color: #fff;
+  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
+  overflow-x: hidden;
 
-/* eslint-disable max-len */
-const StyledHeaderListWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1fb5jy1-0"
-})(["display:flex;position:fixed;top:0;z-index:10;justify-content:space-between;padding:0px 12px 0px 16px;width:100%;height:28px;background-color:#fff;box-shadow:0 4px 2px -4px ", ";overflow-x:hidden;& button{font-size:13px;}"], props => props.theme.colors.neutral[700]);
-const StyledButtonSelection = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-1fb5jy1-1"
-})(["border-radius:0px;padding:0 ", ";margin:0;align-items:center;transition:unset;&:hover:not([disabled]){background-color:transparent;color:", ";}"], props => props.theme.space.xxs, props => props.theme.colors.brand['700']);
-const StyledSelectedItems = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1fb5jy1-2"
-})(["display:flex;align-items:center;"]);
-const StyledNoOptionsSelected = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1fb5jy1-3"
-})(["padding:0 ", ";"], props => props.theme.space.xxs);
-const StyledSelectAllCheckbox = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1fb5jy1-4"
-})(["display:flex;align-items:center;"]);
-
-export { StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectAllCheckbox, StyledSelectedItems };
+  & button {
+    font-size: 13px;
+  }
+`;
+const StyledButtonSelection = styled(DSButton)`
+  border-radius: 0px;
+  padding: 0 ${(props) => props.theme.space.xxs};
+  margin: 0;
+  align-items: center;
+  transition: unset;
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: ${(props) => props.theme.colors.brand["700"]};
+  }
+`;
+const StyledSelectedItems = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledNoOptionsSelected = styled.div`
+  padding: 0 ${(props) => props.theme.space.xxs};
+`;
+const StyledSelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export {
+  StyledButtonSelection,
+  StyledHeaderListWrapper,
+  StyledNoOptionsSelected,
+  StyledSelectAllCheckbox,
+  StyledSelectedItems
+};
+//# sourceMappingURL=styled.js.map

package/esm/controlled-combobox/parts/header-list/styled.js.map

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

package/esm/controlled-combobox/parts/header-list/useHeaderListHandlers.js

@@ -1,16 +1,10 @@
-import { useContext, useMemo, useCallback, useEffect } from 'react';
-import { getSelectableOptions } from '../../utils/listHelper.js';
-import { ComboBoxContext } from '../../ComboBoxCTX.js';
-
+import * as React from "react";
+import { useMemo, useEffect, useContext, useCallback } from "react";
+import { getSelectableOptions } from "../../utils/listHelper";
+import { ComboBoxContext } from "../../ComboBoxCTX";
 const useHeaderListHandlers = () => {
   const {
-    props: {
-      onFilter,
-      selectedValues,
-      options,
-      onSelectAll,
-      onClearAll
-    },
+    props: { onFilter, selectedValues, options, onSelectAll, onClearAll },
     inputRef,
     showSelectedOptions,
     setShowSelectedOptions,
@@ -19,33 +13,32 @@ const useHeaderListHandlers = () => {
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(options);
   const checkboxStatus = useMemo(() => {
-    if ((selectableOptions === null || selectableOptions === void 0 ? void 0 : selectableOptions.length) === (multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length)) {
+    if (selectableOptions?.length === multiSelectedValues?.length) {
       return true;
     }
-
-    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
+    if (multiSelectedValues?.length === 0) {
       return false;
     }
-
-    return 'mixed';
+    return "mixed";
   }, [multiSelectedValues, selectableOptions]);
-  const handleOnMouseDown = useCallback(e => {
+  const handleOnMouseDown = useCallback((e) => {
     e.preventDefault();
   }, []);
   const handleSelectAllCheckboxChange = useCallback(() => {
-    if (!checkboxStatus || checkboxStatus === 'mixed') {
+    if (!checkboxStatus || checkboxStatus === "mixed") {
       onSelectAll();
     } else {
       onClearAll();
     }
   }, [checkboxStatus, onSelectAll, onClearAll]);
   const handleToggle = useCallback(() => {
-    if (inputRef.current) inputRef.current.value = '';
-    onFilter('');
+    if (inputRef.current)
+      inputRef.current.value = "";
+    onFilter("");
     setShowSelectedOptions(!showSelectedOptions);
   }, [setShowSelectedOptions, inputRef, onFilter, showSelectedOptions]);
-  const handleKeyDown = useCallback(e => {
-    if (e.key === 'Escape') {
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape") {
       setShowPopover(false);
     }
   }, [setShowPopover]);
@@ -62,5 +55,7 @@ const useHeaderListHandlers = () => {
     checkboxStatus
   }), [handleKeyDown, handleToggle, handleOnMouseDown, checkboxStatus, handleSelectAllCheckboxChange]);
 };
-
-export { useHeaderListHandlers };
+export {
+  useHeaderListHandlers
+};
+//# sourceMappingURL=useHeaderListHandlers.js.map

package/esm/controlled-combobox/parts/header-list/useHeaderListHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-combobox/parts/header-list/useHeaderListHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useState, useEffect, useContext, useCallback } from 'react';\nimport { CBItemOption } from '../../index.d';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\ninterface UseHeaderListHandlersT {\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n  handleToggle: () => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n  handleSelectAllCheckboxChange: () => void;\n  checkboxStatus: boolean | 'mixed';\n}\n\nconst useHeaderListHandlers = (): UseHeaderListHandlersT => {\n  const {\n    props: { onFilter, selectedValues, options, onSelectAll, onClearAll },\n    inputRef,\n    showSelectedOptions,\n    setShowSelectedOptions,\n    setShowPopover,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as CBItemOption[];\n  const selectableOptions = getSelectableOptions(options);\n\n  const checkboxStatus = useMemo(() => {\n    if (selectableOptions?.length === multiSelectedValues?.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues, selectableOptions]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(() => {\n    if (!checkboxStatus || checkboxStatus === 'mixed') {\n      onSelectAll();\n    } else {\n      onClearAll();\n    }\n  }, [checkboxStatus, onSelectAll, onClearAll]);\n\n  const handleToggle = useCallback(() => {\n    if (inputRef.current) inputRef.current.value = '';\n    onFilter('');\n    setShowSelectedOptions(!showSelectedOptions);\n  }, [setShowSelectedOptions, inputRef, onFilter, showSelectedOptions]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowPopover(false);\n      }\n    },\n    [setShowPopover],\n  );\n\n  useEffect(() => {\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggle,\n      handleOnMouseDown,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [handleKeyDown, handleToggle, handleOnMouseDown, checkboxStatus, handleSelectAllCheckboxChange],\n  );\n};\n\nexport { useHeaderListHandlers };\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AAUA,MAAM,wBAAwB,MAA8B;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,SAAS,aAAa;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,mBAAmB,WAAW,qBAAqB,QAAQ;AAC7D,aAAO;AAAA;AAET,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,qBAAqB;AAEzB,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE;AAAA,KACD;AAEH,QAAM,gCAAgC,YAAY,MAAM;AACtD,QAAI,CAAC,kBAAkB,mBAAmB,SAAS;AACjD;AAAA,WACK;AACL;AAAA;AAAA,KAED,CAAC,gBAAgB,aAAa;AAEjC,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAS;AAAS,eAAS,QAAQ,QAAQ;AAC/C,aAAS;AACT,2BAAuB,CAAC;AAAA,KACvB,CAAC,wBAAwB,UAAU,UAAU;AAEhD,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB,CAAC;AAGH,YAAU,MAAM;AACd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB;AAAA;AAAA,KAExB,CAAC,qBAAqB;AAEzB,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,eAAe,cAAc,mBAAmB,gBAAgB;AAAA;",
+  "names": []
+}