@elliemae/ds-form 1.57.0-rc.1 → 1.57.0-rc.13

package/esm/ComboBox/v3/parts/container/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+var StyledContainerWithPopper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-17wftik-0"
+})(["width:100%;height:28px;position:relative;"]);
+var StyledContainerInline = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-17wftik-1"
+})(["width:100%;position:relative;"]);
+var StyledPopperWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-17wftik-2"
+})(["background:#fff;max-height:300px;overflow:auto;position:relative;"]);
+
+export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/container/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/container/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledContainerWithPopper = styled.div`\n  width: 100%;\n  height: 28px;\n  position: relative;\n`;\n\nexport const StyledContainerInline = styled.div`\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n  background: #fff;\n  max-height: 300px;\n  overflow: auto;\n  position: relative;\n`;\n"],"names":["StyledContainerWithPopper","styled","div","StyledContainerInline","StyledPopperWrapper"],"mappings":";;IAEaA,yBAAyB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;IAMzBC,qBAAqB,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA;IAKrBE,mBAAmB,gBAAGH,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/controls/Controls.js

@@ -0,0 +1,73 @@
+import React, { useContext, useCallback } from 'react';
+import DropdownIndicator from '../dropdown-indicator/DropdownIndicator.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledControlsWrapper, StyledSelection, StyledHeaderActionsWrapper, StyleHeaderActionsSeparator } from './styled.js';
+import { MultiSelectedValuesContainer } from '../multi-selected-values-container/MultiSelectedValuesContainer.js';
+import { ControlsInput } from '../controls-input/ControlsInput.js';
+import { SingleSelectedValueContainer } from '../single-selected-value-container/SingleSelectedValueContainer.js';
+import '@elliemae/ds-icons/ChevronSmallDown';
+import '../dropdown-indicator/styled.js';
+import 'styled-components';
+import '@elliemae/ds-button';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-pills';
+import '../multi-selected-values-container/useGroupPills.js';
+import '@babel/runtime/helpers/esm/toConsumableArray';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../../utils/hooks/useOnElementResize.js';
+import '../a11y-messages/MultiAllyMessages.js';
+import '../../utils/listHelper.js';
+import '../a11y-messages/styled.js';
+import '@elliemae/ds-truncated-tooltip-text';
+import '../controls-input/styled.js';
+import '../../utils/hooks/useKeyboardNavigation.js';
+import '../controls-input/useControlsInput.js';
+import '../single-selected-value-container/styled.js';
+
+/* eslint-disable complexity */
+
+var Controls = function Controls() {
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      inline = _useContext$props.inline,
+      hasError = _useContext$props.hasError,
+      selectedValues = _useContext$props.selectedValues,
+      inputRef = _useContext.inputRef,
+      selectedOptionsRef = _useContext.selectedOptionsRef,
+      setShowPopover = _useContext.setShowPopover,
+      showPopover = _useContext.showPopover,
+      hasFocus = _useContext.hasFocus,
+      controlsWrapperRef = _useContext.controlsWrapperRef;
+
+  var handleOnClick = useCallback(function () {
+    if (hasFocus && showPopover && !inline) {
+      inputRef.current.blur();
+    } else if (hasFocus) {
+      setShowPopover(true);
+    } else {
+      inputRef.current.focus();
+    }
+  }, [hasFocus, setShowPopover, showPopover, inputRef, inline]);
+
+  var handleOnMouseDown = function handleOnMouseDown(e) {
+    if (hasFocus || inline) {
+      e.preventDefault();
+    }
+  };
+
+  var cols = !inline ? ['minmax(0px,max-content)', 'minmax(0px, auto)', '29px'] : ['minmax(0px, auto)'];
+  return /*#__PURE__*/React.createElement(StyledControlsWrapper, {
+    ref: controlsWrapperRef,
+    cols: cols,
+    hasError: hasError,
+    hasFocus: hasFocus,
+    inline: inline,
+    onClick: handleOnClick,
+    onMouseDown: handleOnMouseDown
+  }, !inline && /*#__PURE__*/React.createElement(StyledSelection, {
+    ref: selectedOptionsRef
+  }, Array.isArray(selectedValues) ? /*#__PURE__*/React.createElement(MultiSelectedValuesContainer, null) : /*#__PURE__*/React.createElement(SingleSelectedValueContainer, null)), /*#__PURE__*/React.createElement(ControlsInput, null), !inline && /*#__PURE__*/React.createElement(StyledHeaderActionsWrapper, null, /*#__PURE__*/React.createElement(StyleHeaderActionsSeparator, null), /*#__PURE__*/React.createElement(DropdownIndicator, null)));
+};
+
+export { Controls };
+//# sourceMappingURL=Controls.js.map

package/esm/ComboBox/v3/parts/controls/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","sources":["../../../../../../src/ComboBox/v3/parts/controls/Controls.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport DropdownIndicator from '../dropdown-indicator/DropdownIndicator';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { SingleSelectedValueContainer } from '../single-selected-value-container';\nconst Controls = (): JSX.Element => {\n  const {\n    props: { inline, hasError, selectedValues },\n    inputRef,\n    selectedOptionsRef,\n    setShowPopover,\n    showPopover,\n    hasFocus,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (hasFocus && showPopover && !inline) {\n      inputRef.current.blur();\n    } else if (hasFocus) {\n      setShowPopover(true);\n    } else {\n      inputRef.current.focus();\n    }\n  }, [hasFocus, setShowPopover, showPopover, inputRef, inline]);\n\n  const handleOnMouseDown = (e) => {\n    if (hasFocus || inline) {\n      e.preventDefault();\n    }\n  };\n  const cols = !inline ? ['minmax(0px,max-content)', 'minmax(0px, auto)', '29px'] : ['minmax(0px, auto)'];\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      hasError={hasError}\n      hasFocus={hasFocus}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef}>\n          {Array.isArray(selectedValues) ? <MultiSelectedValuesContainer /> : <SingleSelectedValueContainer />}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper>\n          <StyleHeaderActionsSeparator />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n\nexport { Controls };\n"],"names":["Controls","useContext","ComboBoxContext","props","inline","hasError","selectedValues","inputRef","selectedOptionsRef","setShowPopover","showPopover","hasFocus","controlsWrapperRef","handleOnClick","useCallback","current","blur","focus","handleOnMouseDown","e","preventDefault","cols","Array","isArray"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;IAaMA,QAAQ,GAAG,SAAXA,QAAW,GAAmB;AAClC,oBAQIC,UAAU,CAACC,eAAD,CARd;AAAA,sCACEC,KADF;AAAA,MACWC,MADX,qBACWA,MADX;AAAA,MACmBC,QADnB,qBACmBA,QADnB;AAAA,MAC6BC,cAD7B,qBAC6BA,cAD7B;AAAA,MAEEC,QAFF,eAEEA,QAFF;AAAA,MAGEC,kBAHF,eAGEA,kBAHF;AAAA,MAIEC,cAJF,eAIEA,cAJF;AAAA,MAKEC,WALF,eAKEA,WALF;AAAA,MAMEC,QANF,eAMEA,QANF;AAAA,MAOEC,kBAPF,eAOEA,kBAPF;;AAUA,MAAMC,aAAa,GAAGC,WAAW,CAAC,YAAM;AACtC,QAAIH,QAAQ,IAAID,WAAZ,IAA2B,CAACN,MAAhC,EAAwC;AACtCG,MAAAA,QAAQ,CAACQ,OAAT,CAAiBC,IAAjB;AACD,KAFD,MAEO,IAAIL,QAAJ,EAAc;AACnBF,MAAAA,cAAc,CAAC,IAAD,CAAd;AACD,KAFM,MAEA;AACLF,MAAAA,QAAQ,CAACQ,OAAT,CAAiBE,KAAjB;AACD;AACF,GARgC,EAQ9B,CAACN,QAAD,EAAWF,cAAX,EAA2BC,WAA3B,EAAwCH,QAAxC,EAAkDH,MAAlD,CAR8B,CAAjC;;AAUA,MAAMc,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAO;AAC/B,QAAIR,QAAQ,IAAIP,MAAhB,EAAwB;AACtBe,MAAAA,CAAC,CAACC,cAAF;AACD;AACF,GAJD;;AAKA,MAAMC,IAAI,GAAG,CAACjB,MAAD,GAAU,CAAC,yBAAD,EAA4B,mBAA5B,EAAiD,MAAjD,CAAV,GAAqE,CAAC,mBAAD,CAAlF;AACA,sBACE,oBAAC,qBAAD;AACE,IAAA,GAAG,EAAEQ,kBADP;AAEE,IAAA,IAAI,EAAES,IAFR;AAGE,IAAA,QAAQ,EAAEhB,QAHZ;AAIE,IAAA,QAAQ,EAAEM,QAJZ;AAKE,IAAA,MAAM,EAAEP,MALV;AAME,IAAA,OAAO,EAAES,aANX;AAOE,IAAA,WAAW,EAAEK;AAPf,KASG,CAACd,MAAD,iBACC,oBAAC,eAAD;AAAiB,IAAA,GAAG,EAAEI;AAAtB,KACGc,KAAK,CAACC,OAAN,CAAcjB,cAAd,iBAAgC,oBAAC,4BAAD,OAAhC,gBAAmE,oBAAC,4BAAD,OADtE,CAVJ,eAeE,oBAAC,aAAD,OAfF,EAgBG,CAACF,MAAD,iBACC,oBAAC,0BAAD,qBACE,oBAAC,2BAAD,OADF,eAEE,oBAAC,iBAAD,OAFF,CAjBJ,CADF;AAyBD;;;;"}

package/esm/ComboBox/v3/parts/controls/index.js

@@ -0,0 +1,27 @@
+export { Controls } from './Controls.js';
+import 'react';
+import '../dropdown-indicator/DropdownIndicator.js';
+import '@elliemae/ds-icons/ChevronSmallDown';
+import '../../ComboBoxCTX.js';
+import '../dropdown-indicator/styled.js';
+import 'styled-components';
+import '@elliemae/ds-button';
+import './styled.js';
+import '@elliemae/ds-grid';
+import '../multi-selected-values-container/MultiSelectedValuesContainer.js';
+import '@elliemae/ds-pills';
+import '../multi-selected-values-container/useGroupPills.js';
+import '@babel/runtime/helpers/esm/toConsumableArray';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../../utils/hooks/useOnElementResize.js';
+import '../a11y-messages/MultiAllyMessages.js';
+import '../../utils/listHelper.js';
+import '../a11y-messages/styled.js';
+import '../controls-input/ControlsInput.js';
+import '@elliemae/ds-truncated-tooltip-text';
+import '../controls-input/styled.js';
+import '../../utils/hooks/useKeyboardNavigation.js';
+import '../controls-input/useControlsInput.js';
+import '../single-selected-value-container/SingleSelectedValueContainer.js';
+import '../single-selected-value-container/styled.js';
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/ComboBox/v3/parts/controls/styled.js

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+
+var StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-64uci7-0"
+})(["background:transparent;position:relative;border:1px solid ", ";border-radius:2px;align-items:center;align-content:center;height:28px;padding-left:8px;margin:", ";", " &:hover{border:1px solid ", ";}"], function (props) {
+  return props.hasError ? props.theme.colors.danger[900] : props.theme.colors.neutral[400];
+}, function (_ref) {
+  var inline = _ref.inline;
+  return inline ? '10px 16px' : 'none';
+}, function (props) {
+  return props.hasFocus && focusMixin;
+}, function (props) {
+  return props.theme.colors.brand[600];
+});
+var focusMixin = /*#__PURE__*/css(["&::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:7;}"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.brand[700];
+});
+var StyledSelection = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-64uci7-1"
+})(["font-size:13px;margin-right:3px;line-height:13px;display:flex;"]);
+var StyledHeaderActionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-64uci7-2"
+})(["align-items:center;align-self:stretch;display:flex;box-sizing:border-box;height:26px;.em-ds-button--text:focus::after{border:none;}"]);
+var StyleDropdownIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-64uci7-3"
+})([""]);
+var StyleHeaderActionsSeparator = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-64uci7-4"
+})(["align-self:stretch;margin:4px 0px;width:1px;background-color:", ";"], function (props) {
+  return props.theme.colors.neutral['500'];
+});
+
+export { StyleDropdownIndicator, StyleHeaderActionsSeparator, StyledControlsWrapper, StyledHeaderActionsWrapper, StyledSelection };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/controls/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/controls/styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ComboBoxPropsT } from '../../index.d';\n\nexport const StyledControlsWrapper = styled(Grid)<Pick<ComboBoxPropsT, 'hasError' | 'inline'>>`\n  background: transparent;\n  position: relative;\n  border: 1px solid ${(props) => (props.hasError ? props.theme.colors.danger[900] : props.theme.colors.neutral[400])};\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ${({ inline }) => (inline ? '10px 16px' : 'none')};\n  /* &:active::after,\n  &:focus-within::after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  } */\n\n  ${(props) => props.hasFocus && focusMixin}\n\n  &:hover {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n  }\n`;\n\nconst focusMixin = css`\n  &::after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const StyledSelection = styled.div`\n  font-size: 13px;\n  margin-right: 3px;\n  line-height: 13px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled.div`\n  align-items: center;\n  align-self: stretch;\n  display: flex;\n  box-sizing: border-box;\n  height: 26px;\n\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span`\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral['500']};\n`;\n"],"names":["StyledControlsWrapper","styled","Grid","props","hasError","theme","colors","danger","neutral","inline","hasFocus","focusMixin","brand","css","StyledSelection","div","StyledHeaderActionsWrapper","StyleDropdownIndicator","StyleHeaderActionsSeparator","span"],"mappings":";;;IAIaA,qBAAqB,gBAAGC,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,+MAGZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBD,KAAK,CAACE,KAAN,CAAYC,MAAZ,CAAmBC,MAAnB,CAA0B,GAA1B,CAAjB,GAAkDJ,KAAK,CAACE,KAAN,CAAYC,MAAZ,CAAmBE,OAAnB,CAA2B,GAA3B,CAA9D;AAAA,CAHY,EAStB;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,WAAH,GAAiB,MAAxC;AAAA,CATsB,EAwB9B,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACO,QAAN,IAAkBC,UAA7B;AAAA,CAxB8B,EA2BV,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACE,KAAN,CAAYC,MAAZ,CAAmBM,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CA3BU;AA+BlC,IAAMD,UAAU,gBAAGE,GAAH,+IASQ;AAAA,MAAGR,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAACC,MAAN,CAAaM,KAAb,CAAmB,GAAnB,CAAf;AAAA,CATR,CAAhB;IAeaE,eAAe,gBAAGb,MAAM,CAACc,GAAV;AAAA;AAAA;IAOfC,0BAA0B,gBAAGf,MAAM,CAACc,GAAV;AAAA;AAAA;IAY1BE,sBAAsB,gBAAGhB,MAAM,CAACc,GAAV;AAAA;AAAA;IAEtBG,2BAA2B,gBAAGjB,MAAM,CAACkB,IAAV;AAAA;AAAA,2EAIlB,UAAChB,KAAD;AAAA,SAAWA,KAAK,CAACE,KAAN,CAAYC,MAAZ,CAAmBE,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAJkB;;;;"}

package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledInputWrapper, StyledInputWidthReference, StyledInputPlaceHolder, StyledInput } from './styled.js';
+import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
+import { useControlsInput } from './useControlsInput.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import 'styled-components';
+import '../../utils/listHelper.js';
+import '@babel/runtime/helpers/esm/slicedToArray';
+
+var ControlsInput = function ControlsInput() {
+  var _useContext = useContext(ComboBoxContext),
+      autoFocus = _useContext.props.autoFocus,
+      showPopover = _useContext.showPopover,
+      inputRef = _useContext.inputRef;
+
+  var onInputKeyDown = useKeyboardNavigation();
+
+  var _useControlsInput = useControlsInput(),
+      span = _useControlsInput.span,
+      width = _useControlsInput.width,
+      focusOptionValue = _useControlsInput.focusOptionValue,
+      spanReferenceText = _useControlsInput.spanReferenceText,
+      showPlaceholder = _useControlsInput.showPlaceholder,
+      handleOnBlur = _useControlsInput.handleOnBlur,
+      handleOnChange = _useControlsInput.handleOnChange,
+      handleOnFocus = _useControlsInput.handleOnFocus;
+
+  return /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputWidthReference, {
+    ref: span
+  }, spanReferenceText), /*#__PURE__*/React.createElement(StyledInputPlaceHolder, null, /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+    value: showPlaceholder
+  })), /*#__PURE__*/React.createElement(StyledInput, {
+    autoFocus: autoFocus,
+    "aria-labelledby": "combo-label",
+    "aria-controls": "combo-listbox",
+    "aria-owns": "combo-listbox",
+    "aria-activedescendant": focusOptionValue,
+    "aria-expanded": showPopover,
+    "aria-haspopup": "listbox",
+    role: "combobox",
+    style: {
+      width: width
+    },
+    ref: inputRef,
+    type: "text",
+    onKeyDown: onInputKeyDown,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus
+  }));
+};
+
+export { ControlsInput };
+//# sourceMappingURL=ControlsInput.js.map

package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsInput.js","sources":["../../../../../../src/ComboBox/v3/parts/controls-input/ControlsInput.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\n\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus },\n    showPopover,\n    inputRef,\n  } = useContext(ComboBoxContext);\n  const onInputKeyDown = useKeyboardNavigation();\n  const {\n    span,\n    width,\n    focusOptionValue,\n    spanReferenceText,\n    showPlaceholder,\n    handleOnBlur,\n    handleOnChange,\n    handleOnFocus,\n  } = useControlsInput();\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={span}>{spanReferenceText}</StyledInputWidthReference>\n      <StyledInputPlaceHolder>\n        <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n      </StyledInputPlaceHolder>\n      <StyledInput\n        autoFocus={autoFocus}\n        aria-labelledby=\"combo-label\"\n        aria-controls=\"combo-listbox\"\n        aria-owns=\"combo-listbox\"\n        aria-activedescendant={focusOptionValue}\n        aria-expanded={showPopover}\n        aria-haspopup=\"listbox\"\n        role=\"combobox\"\n        style={{ width }}\n        ref={inputRef}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n      />\n    </StyledInputWrapper>\n  );\n};\n\nexport { ControlsInput };\n"],"names":["ControlsInput","useContext","ComboBoxContext","autoFocus","props","showPopover","inputRef","onInputKeyDown","useKeyboardNavigation","useControlsInput","span","width","focusOptionValue","spanReferenceText","showPlaceholder","handleOnBlur","handleOnChange","handleOnFocus"],"mappings":";;;;;;;;;;IAQMA,aAAa,GAAG,SAAhBA,aAAgB,GAAmB;AACvC,oBAIIC,UAAU,CAACC,eAAD,CAJd;AAAA,MACWC,SADX,eACEC,KADF,CACWD,SADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;AAAA,MAGEC,QAHF,eAGEA,QAHF;;AAKA,MAAMC,cAAc,GAAGC,qBAAqB,EAA5C;;AACA,0BASIC,gBAAgB,EATpB;AAAA,MACEC,IADF,qBACEA,IADF;AAAA,MAEEC,KAFF,qBAEEA,KAFF;AAAA,MAGEC,gBAHF,qBAGEA,gBAHF;AAAA,MAIEC,iBAJF,qBAIEA,iBAJF;AAAA,MAKEC,eALF,qBAKEA,eALF;AAAA,MAMEC,YANF,qBAMEA,YANF;AAAA,MAOEC,cAPF,qBAOEA,cAPF;AAAA,MAQEC,aARF,qBAQEA,aARF;;AAWA,sBACE,oBAAC,kBAAD,qBACE,oBAAC,yBAAD;AAA2B,IAAA,GAAG,EAAEP;AAAhC,KAAuCG,iBAAvC,CADF,eAEE,oBAAC,sBAAD,qBACE,oBAAC,0BAAD;AAA4B,IAAA,KAAK,EAAEC;AAAnC,IADF,CAFF,eAKE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAEX,SADb;AAEE,uBAAgB,aAFlB;AAGE,qBAAc,eAHhB;AAIE,iBAAU,eAJZ;AAKE,6BAAuBS,gBALzB;AAME,qBAAeP,WANjB;AAOE,qBAAc,SAPhB;AAQE,IAAA,IAAI,EAAC,UARP;AASE,IAAA,KAAK,EAAE;AAAEM,MAAAA,KAAK,EAALA;AAAF,KATT;AAUE,IAAA,GAAG,EAAEL,QAVP;AAWE,IAAA,IAAI,EAAC,MAXP;AAYE,IAAA,SAAS,EAAEC,cAZb;AAaE,IAAA,QAAQ,EAAES,cAbZ;AAcE,IAAA,MAAM,EAAED,YAdV;AAeE,IAAA,OAAO,EAAEE;AAfX,IALF,CADF;AAyBD;;;;"}

package/esm/ComboBox/v3/parts/controls-input/styled.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+var StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-1ue5xik-0"
+})(["font-size:13px;line-height:13px;border:none;padding:0;outline:none;&:focus{outline:none;}"]);
+var StyledInputPlaceHolder = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ue5xik-1"
+})(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], function (props) {
+  return props.theme.colors.neutral[500];
+});
+var StyledInputWidthReference = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1ue5xik-2"
+})(["visibility:hidden;position:absolute;top:-9999px;"]);
+var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ue5xik-3"
+})(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
+
+export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/controls-input/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/controls-input/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledInput = styled.input`\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n`;\n\nexport const StyledInputWrapper = styled.div`\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n`;\n"],"names":["StyledInput","styled","input","StyledInputPlaceHolder","div","props","theme","colors","neutral","StyledInputWidthReference","span","StyledInputWrapper"],"mappings":";;IAEaA,WAAW,gBAAGC,MAAM,CAACC,KAAV;AAAA;AAAA;IAWXC,sBAAsB,gBAAGF,MAAM,CAACG,GAAV;AAAA;AAAA,gIAExB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,GAA3B,CAAX;AAAA,CAFwB;IAWtBC,yBAAyB,gBAAGR,MAAM,CAACS,IAAV;AAAA;AAAA;IAMzBC,kBAAkB,gBAAGV,MAAM,CAACG,GAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js

@@ -0,0 +1,84 @@
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { getOptions, isSelectedValueEmpty } from '../../utils/listHelper.js';
+
+var useControlsInput = function useControlsInput() {
+  var _inputRef$current, _inputRef$current2, _inputRef$current3;
+
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      selectedValues = _useContext$props.selectedValues,
+      placeholder = _useContext$props.placeholder,
+      options = _useContext$props.options,
+      onFilter = _useContext$props.onFilter,
+      setShowPopover = _useContext.setShowPopover,
+      inputRef = _useContext.inputRef,
+      listRef = _useContext.listRef,
+      focusOptionIdx = _useContext.focusOptionIdx,
+      setHasFocus = _useContext.setHasFocus,
+      setShowSelectedValue = _useContext.setShowSelectedValue,
+      setCurrentOption = _useContext.setCurrentOption;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var span = useRef(null);
+  var selectableOptions = getOptions(options);
+  var focusOptionValue = selectableOptions[focusOptionIdx] ? selectableOptions[focusOptionIdx].value : 'id-no-results';
+  useEffect(function () {
+    var _span$current;
+
+    setWidth(((_span$current = span.current) === null || _span$current === void 0 ? void 0 : _span$current.offsetWidth) || 1);
+  }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
+  useEffect(function () {
+    setShowSelectedValue(true);
+  }, [selectedValues, setShowSelectedValue]); // When writting open popover
+  // and refresh selected values and update filter outside value.
+
+  var handleOnChange = useCallback(function (e) {
+    if (e.target.value) setShowSelectedValue(false);
+    setShowPopover(true);
+    onFilter(e.target.value);
+    setCurrentOption(0);
+  }, [onFilter, setShowPopover, setShowSelectedValue, setCurrentOption]);
+  var handleOnBlur = useCallback(function () {
+    setTimeout(function () {
+      var _listRef$current;
+
+      if (!(listRef !== null && listRef !== void 0 && (_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.contains(document.activeElement))) {
+        setShowPopover(false);
+      }
+
+      setHasFocus(false);
+      setShowSelectedValue(true);
+      onFilter('');
+      inputRef.current.value = '';
+      setCurrentOption(-1);
+    }, 10);
+  }, [setHasFocus, setCurrentOption, listRef, onFilter, inputRef, setShowPopover, setShowSelectedValue]);
+  var handleOnFocus = useCallback(function () {
+    setHasFocus(true);
+    setShowPopover(true);
+    setCurrentOption(0);
+  }, [setHasFocus, setCurrentOption, setShowPopover]);
+  var showPlaceholder = !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  var spanReferenceText = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.replace(/\s/g, "\xA0");
+  return useMemo(function () {
+    return {
+      handleOnFocus: handleOnFocus,
+      handleOnBlur: handleOnBlur,
+      handleOnChange: handleOnChange,
+      showPlaceholder: showPlaceholder,
+      focusOptionValue: focusOptionValue,
+      spanReferenceText: spanReferenceText,
+      width: width,
+      span: span
+    };
+  }, [handleOnFocus, handleOnBlur, handleOnChange, focusOptionValue, spanReferenceText, showPlaceholder, width, span]);
+};
+
+export { useControlsInput };
+//# sourceMappingURL=useControlsInput.js.map

package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlsInput.js","sources":["../../../../../../src/ComboBox/v3/parts/controls-input/useControlsInput.tsx"],"sourcesContent":["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { getOptions, isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface useControlsInputT {\n  handleOnFocus: () => void;\n  handleOnBlur: () => void;\n  handleOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  showPlaceholder?: string;\n  focusOptionValue: string;\n  spanReferenceText: string;\n  width: number;\n  span: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): useControlsInputT => {\n  const {\n    props: { selectedValues, placeholder, options, onFilter },\n    setShowPopover,\n\n    inputRef,\n    listRef,\n    focusOptionIdx,\n    setHasFocus,\n    setShowSelectedValue,\n    setCurrentOption,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState();\n  const span = useRef(null);\n  const selectableOptions = getOptions(options);\n\n  const focusOptionValue = selectableOptions[focusOptionIdx]\n    ? selectableOptions[focusOptionIdx].value\n    : 'id-no-results';\n\n  useEffect(() => {\n    setWidth(span.current?.offsetWidth || 1);\n  }, [inputRef.current?.value]);\n\n  useEffect(() => {\n    setShowSelectedValue(true);\n  }, [selectedValues, setShowSelectedValue]);\n\n  // When writting open popover\n  // and refresh selected values and update filter outside value.\n  const handleOnChange = useCallback(\n    (e) => {\n      if (e.target.value) setShowSelectedValue(false);\n      setShowPopover(true);\n      onFilter(e.target.value);\n      setCurrentOption(0);\n    },\n    [onFilter, setShowPopover, setShowSelectedValue, setCurrentOption],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    setTimeout(() => {\n      if (!listRef?.current?.contains(document.activeElement)) {\n        setShowPopover(false);\n      }\n      setHasFocus(false);\n      setShowSelectedValue(true);\n      console.log('holis');\n      onFilter('');\n      inputRef.current.value = '';\n      setCurrentOption(-1);\n    }, 10);\n  }, [setHasFocus, setCurrentOption, listRef, onFilter, inputRef, setShowPopover, setShowSelectedValue]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n    setShowPopover(true);\n    setCurrentOption(0);\n  }, [setHasFocus, setCurrentOption, setShowPopover]);\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      focusOptionValue,\n      spanReferenceText,\n      width,\n      span,\n    }),\n    [handleOnFocus, handleOnBlur, handleOnChange, focusOptionValue, spanReferenceText, showPlaceholder, width, span],\n  );\n};\n\nexport { useControlsInput };\n"],"names":["useControlsInput","useContext","ComboBoxContext","props","selectedValues","placeholder","options","onFilter","setShowPopover","inputRef","listRef","focusOptionIdx","setHasFocus","setShowSelectedValue","setCurrentOption","useState","width","setWidth","span","useRef","selectableOptions","getOptions","focusOptionValue","value","useEffect","current","offsetWidth","handleOnChange","useCallback","e","target","handleOnBlur","setTimeout","contains","document","activeElement","handleOnFocus","showPlaceholder","isSelectedValueEmpty","spanReferenceText","replace","useMemo"],"mappings":"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"}

package/esm/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledDropDownButton } from './styled.js';
+import 'styled-components';
+import '@elliemae/ds-button';
+
+/* eslint-disable react/prop-types */
+
+var DropdownIndicator = function DropdownIndicator() {
+  var _useContext = useContext(ComboBoxContext),
+      showPopover = _useContext.showPopover;
+
+  return /*#__PURE__*/React.createElement(StyledDropDownButton, {
+    "data-testid": "combobox-dropdown-btn",
+    "aria-controls": "combo-listbox",
+    "aria-labelledby": "combo-label",
+    "aria-expanded": showPopover,
+    "aria-haspopup": "listbox",
+    buttonType: "text",
+    style: {
+      height: '100%'
+    },
+    icon: /*#__PURE__*/React.createElement(ChevronSmallDown, null),
+    tabIndex: -1
+  });
+};
+
+export { DropdownIndicator as default };
+//# sourceMappingURL=DropdownIndicator.js.map

package/esm/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownIndicator.js","sources":["../../../../../../src/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext } from 'react';\nimport ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledDropDownButton } from './styled';\nconst DropdownIndicator = (): JSX.Element => {\n  const { showPopover } = useContext(ComboBoxContext);\n\n  return (\n    <StyledDropDownButton\n      data-testid=\"combobox-dropdown-btn\"\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      aria-expanded={showPopover}\n      aria-haspopup=\"listbox\"\n      buttonType=\"text\"\n      style={{ height: '100%' }}\n      icon={<ChevronSmallDown />}\n      tabIndex={-1}\n    />\n  );\n};\n\nexport default DropdownIndicator;\n"],"names":["DropdownIndicator","useContext","ComboBoxContext","showPopover","height"],"mappings":";;;;;;;AAAA;;IAMMA,iBAAiB,GAAG,SAApBA,iBAAoB,GAAmB;AAC3C,oBAAwBC,UAAU,CAACC,eAAD,CAAlC;AAAA,MAAQC,WAAR,eAAQA,WAAR;;AAEA,sBACE,oBAAC,oBAAD;AACE,mBAAY,uBADd;AAEE,qBAAc,eAFhB;AAGE,uBAAgB,aAHlB;AAIE,qBAAeA,WAJjB;AAKE,qBAAc,SALhB;AAME,IAAA,UAAU,EAAC,MANb;AAOE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAPT;AAQE,IAAA,IAAI,eAAE,oBAAC,gBAAD,OARR;AASE,IAAA,QAAQ,EAAE,CAAC;AATb,IADF;AAaD;;;;"}

package/esm/ComboBox/v3/parts/dropdown-indicator/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/dropdown-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/ComboBox/v3/parts/dropdown-indicator/styled.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
+
+var StyledDropDownButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-1ijoe1w-0"
+})([""]);
+
+export { StyledDropDownButton };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/dropdown-indicator/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/dropdown-indicator/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\n\nexport const StyledDropDownButton = styled(DSButton)``;\n"],"names":["StyledDropDownButton","styled","DSButton"],"mappings":";;;IAGaA,oBAAoB,gBAAGC,MAAM,CAACC,QAAD,CAAT;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/empty-state/index.js

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledNoResultsWrapper, StyledNoResults } from './styled.js';
+import 'styled-components';
+
+var EmptyState = function EmptyState() {
+  var _useContext = useContext(ComboBoxContext),
+      onCreate = _useContext.props.onCreate;
+
+  return /*#__PURE__*/React.createElement(StyledNoResultsWrapper, {
+    id: "id-no-results"
+  }, onCreate ? /*#__PURE__*/React.createElement(StyledNoResults, null, "No items match your search, click RETURN at any point to add your unique entry to the field") : /*#__PURE__*/React.createElement(StyledNoResults, null, "No matches found."));
+};
+
+export { EmptyState };
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/empty-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/ComboBox/v3/parts/empty-state/index.tsx"],"sourcesContent":["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"],"names":["EmptyState","useContext","ComboBoxContext","onCreate","props"],"mappings":";;;;;IAIMA,UAAU,GAAG,SAAbA,UAAa,GAAmB;AACpC,oBAEIC,UAAU,CAACC,eAAD,CAFd;AAAA,MACWC,QADX,eACEC,KADF,CACWD,QADX;;AAGA,sBACE,oBAAC,sBAAD;AAAwB,IAAA,EAAE,EAAC;AAA3B,KACGA,QAAQ,gBACP,oBAAC,eAAD,sGADO,gBAKP,oBAAC,eAAD,4BANJ,CADF;AAWD;;;;"}

package/esm/ComboBox/v3/parts/empty-state/styled.js

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

package/esm/ComboBox/v3/parts/empty-state/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/empty-state/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n\nexport const StyledNoResults = styled.span``;\n"],"names":["StyledNoResultsWrapper","styled","div","StyledNoResults","span"],"mappings":";;IAEaA,sBAAsB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;IAItBC,eAAe,gBAAGF,MAAM,CAACG,IAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/header-list/HeaderList.js

@@ -0,0 +1,86 @@
+import React, { useContext, useCallback } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledHeaderListWrapper, StyledSelectedItems, ActionButtons, StyledButton, StyledSeparator } from './styled.js';
+import { getSelectableOptions } from '../../utils/listHelper.js';
+import 'styled-components';
+import '@elliemae/ds-button';
+import '@elliemae/ds-separator';
+
+var HeaderList = function HeaderList() {
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      onSelectAll = _useContext$props.onSelectAll,
+      onClearAll = _useContext$props.onClearAll,
+      selectedValues = _useContext$props.selectedValues,
+      options = _useContext$props.options,
+      inputRef = _useContext.inputRef,
+      setShowPopover = _useContext.setShowPopover;
+
+  var multiSelectedValues = selectedValues;
+  var selectableOptions = getSelectableOptions(options);
+
+  var handleOnBlurSelectAll = function handleOnBlurSelectAll(e) {
+    if (!onClearAll || multiSelectedValues.length === 0) {
+      e.preventDefault();
+      inputRef.current.focus();
+    }
+  };
+
+  var handleOnBlurClearAll = function handleOnBlurClearAll(e) {
+    e.preventDefault();
+    inputRef.current.focus();
+  };
+
+  var handleClickOnSelectAll = function handleClickOnSelectAll() {
+    onSelectAll();
+    inputRef.current.focus();
+    setShowPopover(false);
+  };
+
+  var handleClickOnClearAll = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    inputRef.current.focus();
+    onClearAll();
+  }, [inputRef, onClearAll]);
+
+  var handleOnMouseDown = function handleOnMouseDown(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/React.createElement(StyledHeaderListWrapper, {
+    onMouseDown: handleOnMouseDown
+  }, /*#__PURE__*/React.createElement(StyledSelectedItems, null, "".concat(multiSelectedValues.length, " Selected")), /*#__PURE__*/React.createElement(ActionButtons, null, onSelectAll && /*#__PURE__*/React.createElement(StyledButton, {
+    disabled: selectableOptions.length === multiSelectedValues.length,
+    tabIndex: 0,
+    "data-testid": "combobox-all-btn",
+    buttonType: "text",
+    labelText: "All",
+    size: "s",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onBlur: handleOnBlurSelectAll,
+    onClick: handleClickOnSelectAll
+  }), onSelectAll && onClearAll && /*#__PURE__*/React.createElement(StyledSeparator, {
+    orientation: "vertical",
+    position: "center",
+    type: "group-level",
+    margin: "none"
+  }), onClearAll && /*#__PURE__*/React.createElement(StyledButton, {
+    disabled: multiSelectedValues.length === 0,
+    tabIndex: 0,
+    "data-testid": "combobox-clear-btn",
+    buttonType: "text",
+    labelText: "Clear",
+    size: "s",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onBlur: handleOnBlurClearAll,
+    onClick: handleClickOnClearAll
+  })));
+};
+
+export { HeaderList };
+//# sourceMappingURL=HeaderList.js.map

package/esm/ComboBox/v3/parts/header-list/HeaderList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderList.js","sources":["../../../../../../src/ComboBox/v3/parts/header-list/HeaderList.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledHeaderListWrapper, StyledSelectedItems, ActionButtons, StyledButton, StyledSeparator } from './styled';\nimport { CBOptionT } from '../../index.d';\nimport { getSelectableOptions } from '../../utils/listHelper';\nconst HeaderList = (): JSX.Element => {\n  const {\n    props: { onSelectAll, onClearAll, selectedValues, options },\n    inputRef,\n    setShowPopover,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as CBOptionT[];\n  const selectableOptions = getSelectableOptions(options);\n  const handleOnBlurSelectAll = (e) => {\n    if (!onClearAll || multiSelectedValues.length === 0) {\n      e.preventDefault();\n      inputRef.current.focus();\n    }\n  };\n\n  const handleOnBlurClearAll = (e) => {\n    e.preventDefault();\n    inputRef.current.focus();\n  };\n\n  const handleClickOnSelectAll = () => {\n    onSelectAll();\n    inputRef.current.focus();\n    setShowPopover(false);\n  };\n\n  const handleClickOnClearAll = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      inputRef.current.focus();\n      onClearAll();\n    },\n    [inputRef, onClearAll],\n  );\n\n  const handleOnMouseDown = (e) => {\n    e.preventDefault();\n  };\n\n  return (\n    <StyledHeaderListWrapper onMouseDown={handleOnMouseDown}>\n      <StyledSelectedItems>{`${multiSelectedValues.length} Selected`}</StyledSelectedItems>\n      <ActionButtons>\n        {onSelectAll && (\n          <StyledButton\n            disabled={selectableOptions.length === multiSelectedValues.length}\n            tabIndex={0}\n            data-testid=\"combobox-all-btn\"\n            buttonType=\"text\"\n            labelText=\"All\"\n            size=\"s\"\n            onMouseDown={(e) => e.stopPropagation()}\n            onBlur={handleOnBlurSelectAll}\n            onClick={handleClickOnSelectAll}\n          />\n        )}\n        {onSelectAll && onClearAll && (\n          <StyledSeparator orientation=\"vertical\" position=\"center\" type=\"group-level\" margin=\"none\" />\n        )}\n        {onClearAll && (\n          <StyledButton\n            disabled={multiSelectedValues.length === 0}\n            tabIndex={0}\n            data-testid=\"combobox-clear-btn\"\n            buttonType=\"text\"\n            labelText=\"Clear\"\n            size=\"s\"\n            onMouseDown={(e) => e.stopPropagation()}\n            onBlur={handleOnBlurClearAll}\n            onClick={handleClickOnClearAll}\n          />\n        )}\n      </ActionButtons>\n    </StyledHeaderListWrapper>\n  );\n};\n\nexport { HeaderList };\n"],"names":["HeaderList","useContext","ComboBoxContext","props","onSelectAll","onClearAll","selectedValues","options","inputRef","setShowPopover","multiSelectedValues","selectableOptions","getSelectableOptions","handleOnBlurSelectAll","e","length","preventDefault","current","focus","handleOnBlurClearAll","handleClickOnSelectAll","handleClickOnClearAll","useCallback","stopPropagation","handleOnMouseDown"],"mappings":"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"}

package/esm/ComboBox/v3/parts/header-list/index.js

@@ -0,0 +1,9 @@
+export { HeaderList } from './HeaderList.js';
+import 'react';
+import '../../ComboBoxCTX.js';
+import './styled.js';
+import 'styled-components';
+import '@elliemae/ds-button';
+import '@elliemae/ds-separator';
+import '../../utils/listHelper.js';
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/header-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/esm/ComboBox/v3/parts/header-list/styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
+import DSSeparator from '@elliemae/ds-separator';
+
+var StyledHeaderListWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-dazbzt-0"
+})(["display:flex;justify-content:space-between;padding:0px 16px;height:28px;"]);
+var ActionButtons = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-dazbzt-1"
+})(["display:inline-flex;align-items:center;color:", ";"], function (props) {
+  return props.theme.colors.neutral[500];
+});
+var StyledSeparator = /*#__PURE__*/styled(DSSeparator).withConfig({
+  componentId: "sc-dazbzt-2"
+})(["height:50%;width:auto;"]);
+var StyledButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-dazbzt-3"
+})(["padding:0 ", ";align-items:center;"], function (props) {
+  return props.theme.space.xxs;
+});
+var StyledSelectedItems = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-dazbzt-4"
+})(["display:flex;align-items:center;"]);
+
+export { ActionButtons, StyledButton, StyledHeaderListWrapper, StyledSelectedItems, StyledSeparator };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/header-list/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/header-list/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport DSSeparator from '@elliemae/ds-separator';\n\nexport const StyledHeaderListWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  padding: 0px 16px;\n  height: 28px;\n`;\n\nexport const ActionButtons = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  color: ${(props) => props.theme.colors.neutral[500]};\n`;\n\nexport const StyledSeparator = styled(DSSeparator)`\n  height: 50%;\n  width: auto;\n`;\n\nexport const StyledButton = styled(DSButton)`\n  padding: 0 ${(props) => props.theme.space.xxs};\n  align-items: center;\n`;\n\nexport const StyledSelectedItems = styled.div`\n  display: flex;\n  align-items: center;\n`;\n"],"names":["StyledHeaderListWrapper","styled","div","ActionButtons","props","theme","colors","neutral","StyledSeparator","DSSeparator","StyledButton","DSButton","space","xxs","StyledSelectedItems"],"mappings":";;;;IAIaA,uBAAuB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;IAOvBC,aAAa,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,2DAIf,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,GAA3B,CAAX;AAAA,CAJe;IAObC,eAAe,gBAAGP,MAAM,CAACQ,WAAD,CAAT;AAAA;AAAA;IAKfC,YAAY,gBAAGT,MAAM,CAACU,QAAD,CAAT;AAAA;AAAA,2CACV,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYO,KAAZ,CAAkBC,GAA7B;AAAA,CADU;IAKZC,mBAAmB,gBAAGb,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}