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

package/esm/ComboBox/v3/parts/menu-list/MenuList.js

@@ -0,0 +1,54 @@
+import React, { useContext, useCallback } from 'react';
+import { getOptions } from '../../utils/listHelper.js';
+import { StyledListWrapper, StyledList } from './styled.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { HeaderList } from '../header-list/HeaderList.js';
+import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
+import { EmptyState } from '../empty-state/index.js';
+import { useMenuList } from './useMenuList.js';
+import 'styled-components';
+import '../header-list/styled.js';
+import '@elliemae/ds-button';
+import '@elliemae/ds-separator';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../empty-state/styled.js';
+import '@elliemae/ds-form';
+
+var MenuList = function MenuList() {
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      inline = _useContext$props.inline,
+      options = _useContext$props.options,
+      selectedValues = _useContext$props.selectedValues,
+      referenceElement = _useContext.referenceElement,
+      inputRef = _useContext.inputRef,
+      listRef = _useContext.listRef,
+      showPopover = _useContext.showPopover,
+      controlsWrapperRef = _useContext.controlsWrapperRef;
+
+  var multiple = Array.isArray(selectedValues);
+
+  var _useMenuList = useMenuList(),
+      ItemRenderer = _useMenuList.ItemRenderer;
+
+  useOnElementResize(controlsWrapperRef);
+  var listWidth = inline ? '100%' : "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth, "px");
+  var selectableOptions = getOptions(options);
+  var handleOnClick = useCallback(function () {
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(StyledListWrapper, {
+    ref: listRef,
+    width: listWidth
+  }, !inline && multiple && options.length > 0 && /*#__PURE__*/React.createElement(HeaderList, null), selectableOptions.length > 0 ? /*#__PURE__*/React.createElement(StyledList, {
+    tabIndex: -1,
+    "aria-expanded": showPopover,
+    id: "combo-listbox",
+    role: "listbox",
+    onFocus: handleOnClick,
+    "data-testid": "menu-list"
+  }, ItemRenderer) : /*#__PURE__*/React.createElement(EmptyState, null));
+};
+
+export { MenuList };
+//# sourceMappingURL=MenuList.js.map

package/esm/ComboBox/v3/parts/menu-list/MenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","sources":["../../../../../../src/ComboBox/v3/parts/menu-list/MenuList.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react';\nimport { getOptions } from '../../utils/listHelper';\nimport { StyledListWrapper, StyledList } from './styled';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useOnElementResize } from '../../utils/hooks/useOnElementResize';\nimport { EmptyState } from '../empty-state';\nimport { useMenuList } from './useMenuList';\nconst MenuList = (): JSX.Element => {\n  const {\n    props: { inline, options, selectedValues },\n    referenceElement,\n    inputRef,\n    listRef,\n    showPopover,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const { ItemRenderer } = useMenuList();\n  useOnElementResize(controlsWrapperRef);\n  const listWidth = inline ? '100%' : `${referenceElement?.offsetWidth}px`;\n  const selectableOptions = getOptions(options);\n\n  const handleOnClick = useCallback(() => {\n    inputRef?.current.focus();\n  }, [inputRef]);\n\n  return (\n    <StyledListWrapper ref={listRef} width={listWidth}>\n      {!inline && multiple && options.length > 0 && <HeaderList />}\n      {selectableOptions.length > 0 ? (\n        <StyledList\n          tabIndex={-1}\n          aria-expanded={showPopover}\n          id=\"combo-listbox\"\n          role=\"listbox\"\n          onFocus={handleOnClick}\n          data-testid=\"menu-list\"\n        >\n          {ItemRenderer}\n        </StyledList>\n      ) : (\n        <EmptyState />\n      )}\n    </StyledListWrapper>\n  );\n};\n\nexport { MenuList };\n"],"names":["MenuList","useContext","ComboBoxContext","props","inline","options","selectedValues","referenceElement","inputRef","listRef","showPopover","controlsWrapperRef","multiple","Array","isArray","useMenuList","ItemRenderer","useOnElementResize","listWidth","offsetWidth","selectableOptions","getOptions","handleOnClick","useCallback","current","focus","length"],"mappings":";;;;;;;;;;;;;;;;IAQMA,QAAQ,GAAG,SAAXA,QAAW,GAAmB;AAClC,oBAOIC,UAAU,CAACC,eAAD,CAPd;AAAA,sCACEC,KADF;AAAA,MACWC,MADX,qBACWA,MADX;AAAA,MACmBC,OADnB,qBACmBA,OADnB;AAAA,MAC4BC,cAD5B,qBAC4BA,cAD5B;AAAA,MAEEC,gBAFF,eAEEA,gBAFF;AAAA,MAGEC,QAHF,eAGEA,QAHF;AAAA,MAIEC,OAJF,eAIEA,OAJF;AAAA,MAKEC,WALF,eAKEA,WALF;AAAA,MAMEC,kBANF,eAMEA,kBANF;;AASA,MAAMC,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAcR,cAAd,CAAjB;;AACA,qBAAyBS,WAAW,EAApC;AAAA,MAAQC,YAAR,gBAAQA,YAAR;;AACAC,EAAAA,kBAAkB,CAACN,kBAAD,CAAlB;AACA,MAAMO,SAAS,GAAGd,MAAM,GAAG,MAAH,aAAeG,gBAAf,aAAeA,gBAAf,uBAAeA,gBAAgB,CAAEY,WAAjC,OAAxB;AACA,MAAMC,iBAAiB,GAAGC,UAAU,CAAChB,OAAD,CAApC;AAEA,MAAMiB,aAAa,GAAGC,WAAW,CAAC,YAAM;AACtCf,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEgB,OAAV,CAAkBC,KAAlB;AACD,GAFgC,EAE9B,CAACjB,QAAD,CAF8B,CAAjC;AAIA,sBACE,oBAAC,iBAAD;AAAmB,IAAA,GAAG,EAAEC,OAAxB;AAAiC,IAAA,KAAK,EAAES;AAAxC,KACG,CAACd,MAAD,IAAWQ,QAAX,IAAuBP,OAAO,CAACqB,MAAR,GAAiB,CAAxC,iBAA6C,oBAAC,UAAD,OADhD,EAEGN,iBAAiB,CAACM,MAAlB,GAA2B,CAA3B,gBACC,oBAAC,UAAD;AACE,IAAA,QAAQ,EAAE,CAAC,CADb;AAEE,qBAAehB,WAFjB;AAGE,IAAA,EAAE,EAAC,eAHL;AAIE,IAAA,IAAI,EAAC,SAJP;AAKE,IAAA,OAAO,EAAEY,aALX;AAME,mBAAY;AANd,KAQGN,YARH,CADD,gBAYC,oBAAC,UAAD,OAdJ,CADF;AAmBD;;;;"}

package/esm/ComboBox/v3/parts/menu-list/MenuListInline.js

@@ -0,0 +1,36 @@
+import React, { useContext, useCallback } from 'react';
+import { getOptions } from '../../utils/listHelper.js';
+import { StyledListInlineWrapper, StyledList } from './styled.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
+import { EmptyState } from '../empty-state/index.js';
+import { useMenuList } from './useMenuList.js';
+import 'styled-components';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../empty-state/styled.js';
+import '@elliemae/ds-form';
+
+var MenuListInline = function MenuListInline() {
+  var _useContext = useContext(ComboBoxContext),
+      options = _useContext.props.options,
+      inputRef = _useContext.inputRef,
+      controlsWrapperRef = _useContext.controlsWrapperRef;
+
+  var _useMenuList = useMenuList(),
+      ItemRenderer = _useMenuList.ItemRenderer;
+
+  useOnElementResize(controlsWrapperRef);
+  var selectableOptions = getOptions(options);
+  var handleOnClick = useCallback(function () {
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(StyledListInlineWrapper, {
+    id: "combo-listbox",
+    role: "listbox"
+  }, selectableOptions.length > 0 ? /*#__PURE__*/React.createElement(StyledList, {
+    onFocus: handleOnClick
+  }, ItemRenderer) : /*#__PURE__*/React.createElement(EmptyState, null));
+};
+
+export { MenuListInline };
+//# sourceMappingURL=MenuListInline.js.map

package/esm/ComboBox/v3/parts/menu-list/MenuListInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListInline.js","sources":["../../../../../../src/ComboBox/v3/parts/menu-list/MenuListInline.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react';\nimport { getOptions } from '../../utils/listHelper';\nimport { StyledListInlineWrapper, StyledList } from './styled';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { useOnElementResize } from '../../utils/hooks/useOnElementResize';\nimport { EmptyState } from '../empty-state';\nimport { useMenuList } from './useMenuList';\nconst MenuListInline = (): JSX.Element => {\n  const {\n    props: { options },\n    inputRef,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const { ItemRenderer } = useMenuList();\n  useOnElementResize(controlsWrapperRef);\n  const selectableOptions = getOptions(options);\n\n  const handleOnClick = useCallback(() => {\n    inputRef?.current.focus();\n  }, [inputRef]);\n\n  return (\n    <StyledListInlineWrapper id=\"combo-listbox\" role=\"listbox\">\n      {selectableOptions.length > 0 ? <StyledList onFocus={handleOnClick}>{ItemRenderer}</StyledList> : <EmptyState />}\n    </StyledListInlineWrapper>\n  );\n};\n\nexport { MenuListInline };\n"],"names":["MenuListInline","useContext","ComboBoxContext","options","props","inputRef","controlsWrapperRef","useMenuList","ItemRenderer","useOnElementResize","selectableOptions","getOptions","handleOnClick","useCallback","current","focus","length"],"mappings":";;;;;;;;;;;;IAOMA,cAAc,GAAG,SAAjBA,cAAiB,GAAmB;AACxC,oBAIIC,UAAU,CAACC,eAAD,CAJd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,QAFF,eAEEA,QAFF;AAAA,MAGEC,kBAHF,eAGEA,kBAHF;;AAMA,qBAAyBC,WAAW,EAApC;AAAA,MAAQC,YAAR,gBAAQA,YAAR;;AACAC,EAAAA,kBAAkB,CAACH,kBAAD,CAAlB;AACA,MAAMI,iBAAiB,GAAGC,UAAU,CAACR,OAAD,CAApC;AAEA,MAAMS,aAAa,GAAGC,WAAW,CAAC,YAAM;AACtCR,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,OAAV,CAAkBC,KAAlB;AACD,GAFgC,EAE9B,CAACV,QAAD,CAF8B,CAAjC;AAIA,sBACE,oBAAC,uBAAD;AAAyB,IAAA,EAAE,EAAC,eAA5B;AAA4C,IAAA,IAAI,EAAC;AAAjD,KACGK,iBAAiB,CAACM,MAAlB,GAA2B,CAA3B,gBAA+B,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAEJ;AAArB,KAAqCJ,YAArC,CAA/B,gBAAiG,oBAAC,UAAD,OADpG,CADF;AAKD;;;;"}

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

@@ -0,0 +1,18 @@
+export { MenuList } from './MenuList.js';
+export { MenuListInline } from './MenuListInline.js';
+import 'react';
+import '../../utils/listHelper.js';
+import './styled.js';
+import 'styled-components';
+import '../../ComboBoxCTX.js';
+import '../header-list/HeaderList.js';
+import '../header-list/styled.js';
+import '@elliemae/ds-button';
+import '@elliemae/ds-separator';
+import '../../utils/hooks/useOnElementResize.js';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../empty-state/index.js';
+import '../empty-state/styled.js';
+import './useMenuList.js';
+import '@elliemae/ds-form';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+//   padding: 10px 10px;
+//   list-style: none;
+//   &:focus {
+//     outline: 1px solid ${(props) => props.theme.colors.brand[500]};
+//   }
+// `;
+
+var StyledListWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1uedyf-0"
+})(["width:", ";"], function (props) {
+  return props.width;
+});
+var StyledList = /*#__PURE__*/styled.ul.withConfig({
+  componentId: "sc-1uedyf-1"
+})(["padding:0px;margin:0;"]);
+var StyledGroupSeparator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1uedyf-2"
+})(["margin:0px 10px;font-family:12px;color:", ";"], function (props) {
+  return props.theme.colors.neutral[500];
+});
+var StyledListInlineWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1uedyf-3"
+})(["width:100%;"]);
+
+export { StyledGroupSeparator, StyledList, StyledListInlineWrapper, StyledListWrapper };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/menu-list/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\n// export const StyledItemWrapper = styled.li`\n//   padding: 10px 10px;\n//   list-style: none;\n\n//   &:focus {\n//     outline: 1px solid ${(props) => props.theme.colors.brand[500]};\n//   }\n// `;\n\nexport const StyledListWrapper = styled.div<{ width: string | number }>`\n  width: ${(props) => props.width};\n`;\n\nexport const StyledList = styled.ul`\n  padding: 0px;\n  margin: 0;\n`;\n\nexport const StyledGroupSeparator = styled.div`\n  margin: 0px 10px;\n  font-family: 12px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n`;\n\nexport const StyledListInlineWrapper = styled.div`\n  width: 100%;\n`;\n"],"names":["StyledListWrapper","styled","div","props","width","StyledList","ul","StyledGroupSeparator","theme","colors","neutral","StyledListInlineWrapper"],"mappings":";;AAGA;AACA;AAEA;AACA;AACA;AACA;;IAEaA,iBAAiB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA,oBACnB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CADmB;IAIjBC,UAAU,gBAAGJ,MAAM,CAACK,EAAV;AAAA;AAAA;IAKVC,oBAAoB,gBAAGN,MAAM,CAACC,GAAV;AAAA;AAAA,qDAGtB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,GAA3B,CAAX;AAAA,CAHsB;IAMpBC,uBAAuB,gBAAGV,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/menu-list/useMenuList.js

@@ -0,0 +1,80 @@
+import React, { useContext, useCallback, useMemo } from 'react';
+import { Section, Separator, MultiMenuItem, SingleMenuItem } from '@elliemae/ds-form';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { isSelected } from '../../utils/listHelper.js';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+
+var useMenuList = function useMenuList() {
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      options = _useContext$props.options,
+      onChange = _useContext$props.onChange,
+      selectedValues = _useContext$props.selectedValues,
+      onFilter = _useContext$props.onFilter,
+      inputRef = _useContext.inputRef,
+      setShowPopover = _useContext.setShowPopover,
+      focusOptionIdx = _useContext.focusOptionIdx;
+
+  var multiple = Array.isArray(selectedValues);
+  var CBItem = multiple ? MultiMenuItem : SingleMenuItem;
+  var offsetCounter = 0;
+  var handleClick = useCallback(function (option, e) {
+    if (!multiple) {
+      setShowPopover(false);
+    } else {
+      onFilter(inputRef.current.value);
+    }
+
+    onChange(option);
+    inputRef.current.focus();
+    e.stopPropagation();
+    e.preventDefault();
+  }, [onFilter, onChange, setShowPopover, multiple, inputRef]);
+  var handleOnMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var ItemRenderer = useMemo(function () {
+    return options && options.map(function (option, idx) {
+      if (option.type === 'section') {
+        offsetCounter += 1;
+        return /*#__PURE__*/React.createElement(Section, {
+          label: option.label,
+          key: option.dsId
+        });
+      }
+
+      if (option.type === 'separator') {
+        offsetCounter += 1;
+        return /*#__PURE__*/React.createElement(Separator, {
+          key: option.dsId
+        });
+      }
+
+      if (option.type === 'option') {
+        return /*#__PURE__*/React.createElement(CBItem, {
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled,
+          onClick: function onClick(e) {
+            return handleClick(option, e);
+          },
+          onMouseDown: handleOnMouseDown,
+          key: option.dsId,
+          isActive: idx - offsetCounter === focusOptionIdx,
+          isSelected: isSelected(selectedValues, option)
+        });
+      }
+
+      return React.Fragment;
+    });
+  }, [options, focusOptionIdx, selectedValues, inputRef]);
+  return useMemo(function () {
+    return {
+      ItemRenderer: ItemRenderer
+    };
+  }, [ItemRenderer]);
+};
+
+export { useMenuList };
+//# sourceMappingURL=useMenuList.js.map

package/esm/ComboBox/v3/parts/menu-list/useMenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuList.js","sources":["../../../../../../src/ComboBox/v3/parts/menu-list/useMenuList.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-form';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelected } from '../../utils/listHelper';\n\nconst useMenuList = () => {\n  const {\n    props: { options, onChange, selectedValues, onFilter },\n    inputRef,\n    setShowPopover,\n    focusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  let offsetCounter = 0;\n  const handleClick = useCallback(\n    (option, e) => {\n      if (!multiple) {\n        setShowPopover(false);\n      } else {\n        onFilter(inputRef.current.value);\n      }\n      onChange(option);\n      inputRef.current.focus();\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, onChange, setShowPopover, multiple, inputRef],\n  );\n\n  const handleOnMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const ItemRenderer = useMemo(\n    () =>\n      options &&\n      options.map((option, idx) => {\n        if (option.type === 'section') {\n          offsetCounter += 1;\n\n          return React.createElement(Section, {\n            label: option.label,\n            key: option.dsId,\n          });\n        }\n        if (option.type === 'separator') {\n          offsetCounter += 1;\n          return React.createElement(Separator, {\n            key: option.dsId,\n          });\n        }\n        if (option.type === 'option') {\n          return React.createElement(CBItem, {\n            value: option.value,\n            label: option.label,\n            disabled: option.disabled,\n            onClick: (e) => handleClick(option, e),\n            onMouseDown: handleOnMouseDown,\n            key: option.dsId,\n            isActive: idx - offsetCounter === focusOptionIdx,\n            isSelected: isSelected(selectedValues, option),\n          });\n        }\n        return React.Fragment;\n      }),\n    [options, focusOptionIdx, selectedValues, inputRef],\n  );\n\n  return useMemo(\n    () => ({\n      ItemRenderer,\n    }),\n    [ItemRenderer],\n  );\n};\n\nexport { useMenuList };\n"],"names":["useMenuList","useContext","ComboBoxContext","props","options","onChange","selectedValues","onFilter","inputRef","setShowPopover","focusOptionIdx","multiple","Array","isArray","CBItem","MultiMenuItem","SingleMenuItem","offsetCounter","handleClick","useCallback","option","e","current","value","focus","stopPropagation","preventDefault","handleOnMouseDown","ItemRenderer","useMemo","map","idx","type","React","createElement","Section","label","key","dsId","Separator","disabled","onClick","onMouseDown","isActive","isSelected","Fragment"],"mappings":";;;;;AAAA;;IAMMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,oBAKIC,UAAU,CAACC,eAAD,CALd;AAAA,sCACEC,KADF;AAAA,MACWC,OADX,qBACWA,OADX;AAAA,MACoBC,QADpB,qBACoBA,QADpB;AAAA,MAC8BC,cAD9B,qBAC8BA,cAD9B;AAAA,MAC8CC,QAD9C,qBAC8CA,QAD9C;AAAA,MAEEC,QAFF,eAEEA,QAFF;AAAA,MAGEC,cAHF,eAGEA,cAHF;AAAA,MAIEC,cAJF,eAIEA,cAJF;;AAOA,MAAMC,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAcP,cAAd,CAAjB;AACA,MAAMQ,MAAM,GAAGH,QAAQ,GAAGI,aAAH,GAAmBC,cAA1C;AAEA,MAAIC,aAAa,GAAG,CAApB;AACA,MAAMC,WAAW,GAAGC,WAAW,CAC7B,UAACC,MAAD,EAASC,CAAT,EAAe;AACb,QAAI,CAACV,QAAL,EAAe;AACbF,MAAAA,cAAc,CAAC,KAAD,CAAd;AACD,KAFD,MAEO;AACLF,MAAAA,QAAQ,CAACC,QAAQ,CAACc,OAAT,CAAiBC,KAAlB,CAAR;AACD;;AACDlB,IAAAA,QAAQ,CAACe,MAAD,CAAR;AACAZ,IAAAA,QAAQ,CAACc,OAAT,CAAiBE,KAAjB;AACAH,IAAAA,CAAC,CAACI,eAAF;AACAJ,IAAAA,CAAC,CAACK,cAAF;AACD,GAX4B,EAY7B,CAACnB,QAAD,EAAWF,QAAX,EAAqBI,cAArB,EAAqCE,QAArC,EAA+CH,QAA/C,CAZ6B,CAA/B;AAeA,MAAMmB,iBAAiB,GAAGR,WAAW,CAAC,UAACE,CAAD,EAAO;AAC3CA,IAAAA,CAAC,CAACK,cAAF;AACD,GAFoC,EAElC,EAFkC,CAArC;AAIA,MAAME,YAAY,GAAGC,OAAO,CAC1B;AAAA,WACEzB,OAAO,IACPA,OAAO,CAAC0B,GAAR,CAAY,UAACV,MAAD,EAASW,GAAT,EAAiB;AAC3B,UAAIX,MAAM,CAACY,IAAP,KAAgB,SAApB,EAA+B;AAC7Bf,QAAAA,aAAa,IAAI,CAAjB;AAEA,4BAAOgB,KAAK,CAACC,aAAN,CAAoBC,OAApB,EAA6B;AAClCC,UAAAA,KAAK,EAAEhB,MAAM,CAACgB,KADoB;AAElCC,UAAAA,GAAG,EAAEjB,MAAM,CAACkB;AAFsB,SAA7B,CAAP;AAID;;AACD,UAAIlB,MAAM,CAACY,IAAP,KAAgB,WAApB,EAAiC;AAC/Bf,QAAAA,aAAa,IAAI,CAAjB;AACA,4BAAOgB,KAAK,CAACC,aAAN,CAAoBK,SAApB,EAA+B;AACpCF,UAAAA,GAAG,EAAEjB,MAAM,CAACkB;AADwB,SAA/B,CAAP;AAGD;;AACD,UAAIlB,MAAM,CAACY,IAAP,KAAgB,QAApB,EAA8B;AAC5B,4BAAOC,KAAK,CAACC,aAAN,CAAoBpB,MAApB,EAA4B;AACjCS,UAAAA,KAAK,EAAEH,MAAM,CAACG,KADmB;AAEjCa,UAAAA,KAAK,EAAEhB,MAAM,CAACgB,KAFmB;AAGjCI,UAAAA,QAAQ,EAAEpB,MAAM,CAACoB,QAHgB;AAIjCC,UAAAA,OAAO,EAAE,iBAACpB,CAAD;AAAA,mBAAOH,WAAW,CAACE,MAAD,EAASC,CAAT,CAAlB;AAAA,WAJwB;AAKjCqB,UAAAA,WAAW,EAAEf,iBALoB;AAMjCU,UAAAA,GAAG,EAAEjB,MAAM,CAACkB,IANqB;AAOjCK,UAAAA,QAAQ,EAAEZ,GAAG,GAAGd,aAAN,KAAwBP,cAPD;AAQjCkC,UAAAA,UAAU,EAAEA,UAAU,CAACtC,cAAD,EAAiBc,MAAjB;AARW,SAA5B,CAAP;AAUD;;AACD,aAAOa,KAAK,CAACY,QAAb;AACD,KA5BD,CAFF;AAAA,GAD0B,EAgC1B,CAACzC,OAAD,EAAUM,cAAV,EAA0BJ,cAA1B,EAA0CE,QAA1C,CAhC0B,CAA5B;AAmCA,SAAOqB,OAAO,CACZ;AAAA,WAAO;AACLD,MAAAA,YAAY,EAAZA;AADK,KAAP;AAAA,GADY,EAIZ,CAACA,YAAD,CAJY,CAAd;AAMD;;;;"}

package/esm/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -0,0 +1,68 @@
+import React, { useContext, useRef, useMemo } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { useGroupPills } from './useGroupPills.js';
+import { MultiAllyMessages } from '../a11y-messages/MultiAllyMessages.js';
+import 'styled-components';
+import '@babel/runtime/helpers/esm/toConsumableArray';
+import '@babel/runtime/helpers/esm/slicedToArray';
+import '../../utils/hooks/useOnElementResize.js';
+import '../../utils/listHelper.js';
+import '../a11y-messages/styled.js';
+
+var MultiSelectedValuesContainer = function MultiSelectedValuesContainer() {
+  var _useContext = useContext(ComboBoxContext),
+      _useContext$props = _useContext.props,
+      onChange = _useContext$props.onChange,
+      selectedValues = _useContext$props.selectedValues,
+      inputRef = _useContext.inputRef;
+
+  var pillGroupRef = useRef(null);
+  var multiSelectedValue = selectedValues;
+  var pillsToShow = useGroupPills(pillGroupRef);
+  var correctPillsToShow = pillsToShow || 1;
+
+  var handleClick = function handleClick(e) {
+    // prevent toggle drowpdown on pills remove
+    e.stopPropagation();
+  };
+
+  var pills = useMemo(function () {
+    var handleRemove = function handleRemove(option) {
+      onChange(option);
+      inputRef.current.focus();
+    };
+
+    return /*#__PURE__*/React.createElement(Grid, {
+      onClick: handleClick,
+      style: {
+        width: 'max-content'
+      }
+    }, /*#__PURE__*/React.createElement(DSPillGroupV2, {
+      innerRef: pillGroupRef
+    }, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(function (option) {
+      return /*#__PURE__*/React.createElement(DSPillV2, {
+        labelTruncated: inputRef.current.value === '' || correctPillsToShow !== pillsToShow,
+        key: option.value,
+        label: option.label,
+        type: "removable",
+        onRemove: function onRemove() {
+          return handleRemove(option);
+        }
+      });
+    }), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/React.createElement(DSPillV2, {
+      labelTruncated: false,
+      key: "grouped",
+      label: "+".concat(multiSelectedValue.length - correctPillsToShow),
+      type: "value",
+      tooltipValue: multiSelectedValue.slice(correctPillsToShow).map(function (val) {
+        return val.label;
+      }).join(', ')
+    })));
+  }, [pillsToShow, onChange, inputRef, multiSelectedValue, correctPillsToShow]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, multiSelectedValue.length > 0 && !inputRef.current.value && /*#__PURE__*/React.createElement(MultiAllyMessages, null), pills);
+};
+
+export { MultiSelectedValuesContainer };
+//# sourceMappingURL=MultiSelectedValuesContainer.js.map

package/esm/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectedValuesContainer.js","sources":["../../../../../../src/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],"sourcesContent":["import React, { useMemo, useContext, useRef } from 'react';\nimport Grid from '@elliemae/ds-grid';\n\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { useGroupPills } from './useGroupPills';\nimport { CBOptionT } from '../../index.d';\nimport { MultiAllyMessages } from '../a11y-messages';\nconst MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props: { onChange, selectedValues },\n    inputRef,\n  } = useContext(ComboBoxContext);\n\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n  const multiSelectedValue = selectedValues as CBOptionT[];\n  const pillsToShow = useGroupPills(pillGroupRef);\n  const correctPillsToShow = pillsToShow || 1;\n\n  const handleClick = (e) => {\n    // prevent toggle drowpdown on pills remove\n    e.stopPropagation();\n  };\n\n  const pills = useMemo(() => {\n    const handleRemove = (option) => {\n      onChange(option);\n      inputRef.current.focus();\n    };\n    return (\n      <Grid onClick={handleClick} style={{ width: 'max-content' }}>\n        <DSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((option) => (\n                <DSPillV2\n                  labelTruncated={inputRef.current.value === '' || correctPillsToShow !== pillsToShow}\n                  key={option.value}\n                  label={option.label}\n                  type=\"removable\"\n                  onRemove={() => handleRemove(option)}\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <DSPillV2\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              tooltipValue={multiSelectedValue\n                .slice(correctPillsToShow)\n                .map((val) => val.label)\n                .join(', ')}\n            />\n          )}\n        </DSPillGroupV2>\n      </Grid>\n    );\n  }, [pillsToShow, onChange, inputRef, multiSelectedValue, correctPillsToShow]);\n\n  return (\n    <>\n      {multiSelectedValue.length > 0 && !inputRef.current.value && <MultiAllyMessages />}\n      {pills}\n    </>\n  );\n};\n\nexport { MultiSelectedValuesContainer };\n"],"names":["MultiSelectedValuesContainer","useContext","ComboBoxContext","props","onChange","selectedValues","inputRef","pillGroupRef","useRef","multiSelectedValue","pillsToShow","useGroupPills","correctPillsToShow","handleClick","e","stopPropagation","pills","useMemo","handleRemove","option","current","focus","width","length","slice","map","value","label","val","join"],"mappings":";;;;;;;;;;;;;IAQMA,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAmB;AACtD,oBAGIC,UAAU,CAACC,eAAD,CAHd;AAAA,sCACEC,KADF;AAAA,MACWC,QADX,qBACWA,QADX;AAAA,MACqBC,cADrB,qBACqBA,cADrB;AAAA,MAEEC,QAFF,eAEEA,QAFF;;AAKA,MAAMC,YAAY,GAAGC,MAAM,CAAiB,IAAjB,CAA3B;AACA,MAAMC,kBAAkB,GAAGJ,cAA3B;AACA,MAAMK,WAAW,GAAGC,aAAa,CAACJ,YAAD,CAAjC;AACA,MAAMK,kBAAkB,GAAGF,WAAW,IAAI,CAA1C;;AAEA,MAAMG,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAO;AACzB;AACAA,IAAAA,CAAC,CAACC,eAAF;AACD,GAHD;;AAKA,MAAMC,KAAK,GAAGC,OAAO,CAAC,YAAM;AAC1B,QAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,MAAD,EAAY;AAC/Bf,MAAAA,QAAQ,CAACe,MAAD,CAAR;AACAb,MAAAA,QAAQ,CAACc,OAAT,CAAiBC,KAAjB;AACD,KAHD;;AAIA,wBACE,oBAAC,IAAD;AAAM,MAAA,OAAO,EAAER,WAAf;AAA4B,MAAA,KAAK,EAAE;AAAES,QAAAA,KAAK,EAAE;AAAT;AAAnC,oBACE,oBAAC,aAAD;AAAe,MAAA,QAAQ,EAAEf;AAAzB,OACGE,kBAAkB,CAACc,MAAnB,GAA4B,CAA5B,IACCd,kBAAkB,CACfe,KADH,CACS,CADT,EACYZ,kBADZ,EAEGa,GAFH,CAEO,UAACN,MAAD;AAAA,0BACH,oBAAC,QAAD;AACE,QAAA,cAAc,EAAEb,QAAQ,CAACc,OAAT,CAAiBM,KAAjB,KAA2B,EAA3B,IAAiCd,kBAAkB,KAAKF,WAD1E;AAEE,QAAA,GAAG,EAAES,MAAM,CAACO,KAFd;AAGE,QAAA,KAAK,EAAEP,MAAM,CAACQ,KAHhB;AAIE,QAAA,IAAI,EAAC,WAJP;AAKE,QAAA,QAAQ,EAAE;AAAA,iBAAMT,YAAY,CAACC,MAAD,CAAlB;AAAA;AALZ,QADG;AAAA,KAFP,CAFJ,EAaGV,kBAAkB,CAACc,MAAnB,GAA4B,CAA5B,IAAiCX,kBAAkB,KAAKH,kBAAkB,CAACc,MAA3E,iBACC,oBAAC,QAAD;AACE,MAAA,cAAc,EAAE,KADlB;AAEE,MAAA,GAAG,EAAC,SAFN;AAGE,MAAA,KAAK,aAAMd,kBAAkB,CAACc,MAAnB,GAA4BX,kBAAlC,CAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,YAAY,EAAEH,kBAAkB,CAC7Be,KADW,CACLZ,kBADK,EAEXa,GAFW,CAEP,UAACG,GAAD;AAAA,eAASA,GAAG,CAACD,KAAb;AAAA,OAFO,EAGXE,IAHW,CAGN,IAHM;AALhB,MAdJ,CADF,CADF;AA8BD,GAnCoB,EAmClB,CAACnB,WAAD,EAAcN,QAAd,EAAwBE,QAAxB,EAAkCG,kBAAlC,EAAsDG,kBAAtD,CAnCkB,CAArB;AAqCA,sBACE,0CACGH,kBAAkB,CAACc,MAAnB,GAA4B,CAA5B,IAAiC,CAACjB,QAAQ,CAACc,OAAT,CAAiBM,KAAnD,iBAA4D,oBAAC,iBAAD,OAD/D,EAEGV,KAFH,CADF;AAMD;;;;"}

package/esm/ComboBox/v3/parts/multi-selected-values-container/index.js

@@ -0,0 +1,14 @@
+export { MultiSelectedValuesContainer } from './MultiSelectedValuesContainer.js';
+import 'react';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-pills';
+import '../../ComboBoxCTX.js';
+import './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 'styled-components';
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/multi-selected-values-container/index.js.map

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

package/esm/ComboBox/v3/parts/multi-selected-values-container/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+var StyledGroupedPillPopoverContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1hugfiz-0"
+})(["padding:10px;background-color:#fff;"]);
+var StyledGroupPillWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1hugfiz-1"
+})([""]);
+var StyledA11ySelectedValues = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1hugfiz-2"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+export { StyledA11ySelectedValues, StyledGroupPillWrapper, StyledGroupedPillPopoverContent };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/multi-selected-values-container/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/multi-selected-values-container/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGroupedPillPopoverContent = styled.div`\n  padding: 10px;\n  background-color: #fff;\n`;\n\nexport const StyledGroupPillWrapper = styled.div``;\n\nexport const StyledA11ySelectedValues = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],"names":["StyledGroupedPillPopoverContent","styled","div","StyledGroupPillWrapper","StyledA11ySelectedValues","span"],"mappings":";;IAEaA,+BAA+B,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;IAK/BC,sBAAsB,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA;IAEtBE,wBAAwB,gBAAGH,MAAM,CAACI,IAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js

@@ -0,0 +1,67 @@
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { useContext, useState, useEffect, useLayoutEffect } from 'react';
+import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+
+var getGroupedPillWidth = function getGroupedPillWidth(remainingPills) {
+  if (remainingPills === 0) return 0;
+  var digits = remainingPills.toString().length;
+  return 8 * (digits - 1) + 31;
+};
+
+var useGroupPills = function useGroupPills(pillGroupRef) {
+  var _useContext = useContext(ComboBoxContext),
+      selectedValues = _useContext.props.selectedValues,
+      selectedOptionsRef = _useContext.selectedOptionsRef,
+      controlsWrapperRef = _useContext.controlsWrapperRef;
+
+  var multiSelectedValues = selectedValues;
+
+  var _useState = useState(multiSelectedValues.length),
+      _useState2 = _slicedToArray(_useState, 2),
+      pillsToShow = _useState2[0],
+      setPillsToShow = _useState2[1];
+
+  var _useOnElementResize = useOnElementResize(controlsWrapperRef),
+      width = _useOnElementResize.width;
+
+  useEffect(function () {
+    if (multiSelectedValues.length !== pillsToShow) {
+      setPillsToShow(multiSelectedValues.length);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [multiSelectedValues.length, width]);
+  useLayoutEffect(function () {
+    if (selectedOptionsRef.current) {
+      pillGroupRef.current.style.width = 'max-content';
+      var lastPillFit = -1;
+      var currentWidth = 0;
+      var referenceWidth = selectedOptionsRef.current.offsetWidth;
+
+      var pills = _toConsumableArray(selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-removable'));
+
+      var pillsWidth = pills.map(function (pill) {
+        return pill === null || pill === void 0 ? void 0 : pill.offsetWidth;
+      });
+      pillsWidth.forEach(function (pillWidth, idx) {
+        currentWidth += pillWidth;
+
+        if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
+          lastPillFit = idx;
+        }
+      });
+      var nextPillsToShow = lastPillFit + 1;
+
+      if (nextPillsToShow !== pillsToShow) {
+        setPillsToShow(nextPillsToShow);
+      }
+
+      pillGroupRef.current.style.width = 'fit-content';
+    }
+  }, [selectedOptionsRef, multiSelectedValues, pillsToShow, pillGroupRef, width]);
+  return pillsToShow;
+};
+
+export { useGroupPills };
+//# sourceMappingURL=useGroupPills.js.map

package/esm/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupPills.js","sources":["../../../../../../src/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '../../utils/hooks/useOnElementResize';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { CBOptionT } from '../../index.d';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (pillGroupRef: React.MutableRefObject<HTMLDivElement>): number => {\n  const {\n    props: { selectedValues },\n    selectedOptionsRef,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as CBOptionT[];\n  const [pillsToShow, setPillsToShow] = useState(multiSelectedValues.length);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  useEffect(() => {\n    if (multiSelectedValues.length !== pillsToShow) {\n      setPillsToShow(multiSelectedValues.length);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [multiSelectedValues.length, width]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current) {\n      pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-removable'),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n      const nextPillsToShow = lastPillFit + 1;\n\n      if (nextPillsToShow !== pillsToShow) {\n        setPillsToShow(nextPillsToShow);\n      }\n      pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [selectedOptionsRef, multiSelectedValues, pillsToShow, pillGroupRef, width]);\n\n  return pillsToShow;\n};\n\nexport { useGroupPills };\n"],"names":["getGroupedPillWidth","remainingPills","digits","toString","length","useGroupPills","pillGroupRef","useContext","ComboBoxContext","selectedValues","props","selectedOptionsRef","controlsWrapperRef","multiSelectedValues","useState","pillsToShow","setPillsToShow","useOnElementResize","width","useEffect","useLayoutEffect","current","style","lastPillFit","currentWidth","referenceWidth","offsetWidth","pills","querySelectorAll","pillsWidth","map","pill","forEach","pillWidth","idx","nextPillsToShow"],"mappings":";;;;;;AAKA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,cAAD,EAAoC;AAC9D,MAAIA,cAAc,KAAK,CAAvB,EAA0B,OAAO,CAAP;AAC1B,MAAMC,MAAM,GAAGD,cAAc,CAACE,QAAf,GAA0BC,MAAzC;AACA,SAAO,KAAKF,MAAM,GAAG,CAAd,IAAmB,EAA1B;AACD,CAJD;;IAKMG,aAAa,GAAG,SAAhBA,aAAgB,CAACC,YAAD,EAAkE;AACtF,oBAIIC,UAAU,CAACC,eAAD,CAJd;AAAA,MACWC,cADX,eACEC,KADF,CACWD,cADX;AAAA,MAEEE,kBAFF,eAEEA,kBAFF;AAAA,MAGEC,kBAHF,eAGEA,kBAHF;;AAMA,MAAMC,mBAAmB,GAAGJ,cAA5B;;AACA,kBAAsCK,QAAQ,CAACD,mBAAmB,CAACT,MAArB,CAA9C;AAAA;AAAA,MAAOW,WAAP;AAAA,MAAoBC,cAApB;;AACA,4BAAkBC,kBAAkB,CAACL,kBAAD,CAApC;AAAA,MAAQM,KAAR,uBAAQA,KAAR;;AACAC,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIN,mBAAmB,CAACT,MAApB,KAA+BW,WAAnC,EAAgD;AAC9CC,MAAAA,cAAc,CAACH,mBAAmB,CAACT,MAArB,CAAd;AACD,KAHa;;AAKf,GALQ,EAKN,CAACS,mBAAmB,CAACT,MAArB,EAA6Bc,KAA7B,CALM,CAAT;AAOAE,EAAAA,eAAe,CAAC,YAAM;AACpB,QAAIT,kBAAkB,CAACU,OAAvB,EAAgC;AAC9Bf,MAAAA,YAAY,CAACe,OAAb,CAAqBC,KAArB,CAA2BJ,KAA3B,GAAmC,aAAnC;AACA,UAAIK,WAAW,GAAG,CAAC,CAAnB;AACA,UAAIC,YAAY,GAAG,CAAnB;AACA,UAAMC,cAAc,GAAGd,kBAAkB,CAACU,OAAnB,CAA2BK,WAAlD;;AACA,UAAMC,KAAuB,sBACxBhB,kBAAkB,CAACU,OAAnB,CAA2BO,gBAA3B,CAA4C,4BAA5C,CADwB,CAA7B;;AAGA,UAAMC,UAAU,GAAGF,KAAK,CAACG,GAAN,CAAU,UAACC,IAAD;AAAA,eAAUA,IAAV,aAAUA,IAAV,uBAAUA,IAAI,CAAEL,WAAhB;AAAA,OAAV,CAAnB;AACAG,MAAAA,UAAU,CAACG,OAAX,CAAmB,UAACC,SAAD,EAAYC,GAAZ,EAAoB;AACrCV,QAAAA,YAAY,IAAIS,SAAhB;;AACA,YAAIT,YAAY,GAAGxB,mBAAmB,CAACa,mBAAmB,CAACT,MAApB,GAA6B8B,GAA7B,GAAmC,CAApC,CAAlC,IAA4ET,cAAhF,EAAgG;AAC9FF,UAAAA,WAAW,GAAGW,GAAd;AACD;AACF,OALD;AAMA,UAAMC,eAAe,GAAGZ,WAAW,GAAG,CAAtC;;AAEA,UAAIY,eAAe,KAAKpB,WAAxB,EAAqC;AACnCC,QAAAA,cAAc,CAACmB,eAAD,CAAd;AACD;;AACD7B,MAAAA,YAAY,CAACe,OAAb,CAAqBC,KAArB,CAA2BJ,KAA3B,GAAmC,aAAnC;AACD;AACF,GAvBc,EAuBZ,CAACP,kBAAD,EAAqBE,mBAArB,EAA0CE,WAA1C,EAAuDT,YAAvD,EAAqEY,KAArE,CAvBY,CAAf;AAyBA,SAAOH,WAAP;AACD;;;;"}

package/esm/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledSingleSelectedValue } from './styled.js';
+import 'styled-components';
+
+var SingleSelectedValueContainer = function SingleSelectedValueContainer() {
+  var _useContext = useContext(ComboBoxContext),
+      selectedValues = _useContext.props.selectedValues,
+      showSelectedValue = _useContext.showSelectedValue;
+
+  var singleSelectedValue = selectedValues;
+  return /*#__PURE__*/React.createElement(StyledSingleSelectedValue, null, showSelectedValue ? /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+    value: singleSelectedValue === null || singleSelectedValue === void 0 ? void 0 : singleSelectedValue.label
+  }) : null);
+};
+
+export { SingleSelectedValueContainer };
+//# sourceMappingURL=SingleSelectedValueContainer.js.map

package/esm/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectedValueContainer.js","sources":["../../../../../../src/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\n\nimport { CBOptionT } from '../../index.d';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nimport { StyledSingleSelectedValue } from './styled';\nconst SingleSelectedValueContainer = (): JSX.Element => {\n  const {\n    props: { selectedValues },\n    showSelectedValue,\n  } = useContext(ComboBoxContext);\n\n  const singleSelectedValue = selectedValues as CBOptionT;\n  return (\n    <StyledSingleSelectedValue>\n      {showSelectedValue ? <SimpleTruncatedTooltipText value={singleSelectedValue?.label} /> : null}\n    </StyledSingleSelectedValue>\n  );\n};\n\nexport { SingleSelectedValueContainer };\n"],"names":["SingleSelectedValueContainer","useContext","ComboBoxContext","selectedValues","props","showSelectedValue","singleSelectedValue","label"],"mappings":";;;;;;IAOMA,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAmB;AACtD,oBAGIC,UAAU,CAACC,eAAD,CAHd;AAAA,MACWC,cADX,eACEC,KADF,CACWD,cADX;AAAA,MAEEE,iBAFF,eAEEA,iBAFF;;AAKA,MAAMC,mBAAmB,GAAGH,cAA5B;AACA,sBACE,oBAAC,yBAAD,QACGE,iBAAiB,gBAAG,oBAAC,0BAAD;AAA4B,IAAA,KAAK,EAAEC,mBAAF,aAAEA,mBAAF,uBAAEA,mBAAmB,CAAEC;AAAxD,IAAH,GAAuE,IAD3F,CADF;AAKD;;;;"}

package/esm/ComboBox/v3/parts/single-selected-value-container/index.js

@@ -0,0 +1,7 @@
+export { SingleSelectedValueContainer } from './SingleSelectedValueContainer.js';
+import 'react';
+import '@elliemae/ds-truncated-tooltip-text';
+import '../../ComboBoxCTX.js';
+import './styled.js';
+import 'styled-components';
+//# sourceMappingURL=index.js.map

package/esm/ComboBox/v3/parts/single-selected-value-container/index.js.map

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

package/esm/ComboBox/v3/parts/single-selected-value-container/styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+var StyledSingleSelectedValue = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-ui9n59-0"
+})(["width:100%;display:flex;align-items:center;"]);
+
+export { StyledSingleSelectedValue };
+//# sourceMappingURL=styled.js.map

package/esm/ComboBox/v3/parts/single-selected-value-container/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/ComboBox/v3/parts/single-selected-value-container/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledSingleSelectedValue = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n`;\n"],"names":["StyledSingleSelectedValue","styled","div"],"mappings":";;IAEaA,yBAAyB,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}

package/esm/ComboBox/v3/propTypes.js

@@ -0,0 +1,18 @@
+import { PropTypes } from 'react-desc';
+
+var propTypes = {
+  placeholder: PropTypes.string.description('').defaultValue(''),
+  options: PropTypes.array.description('').defaultValue([]),
+  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description(''),
+  autoFocus: PropTypes.bool.description('').defaultValue('false'),
+  hasError: PropTypes.bool.description('').defaultValue('false'),
+  onChange: PropTypes.func.description('').defaultValue(''),
+  onSelectAll: PropTypes.func.description('').defaultValue(''),
+  onFilter: PropTypes.func.description('').defaultValue(''),
+  onCreate: PropTypes.func.description('').defaultValue(''),
+  onClear: PropTypes.func.description('').defaultValue(''),
+  onClearAll: PropTypes.func.description('').defaultValue('')
+};
+
+export { propTypes };
+//# sourceMappingURL=propTypes.js.map

package/esm/ComboBox/v3/propTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propTypes.js","sources":["../../../../src/ComboBox/v3/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  placeholder: PropTypes.string.description('').defaultValue(''),\n  options: PropTypes.array.description('').defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description(''),\n  autoFocus: PropTypes.bool.description('').defaultValue('false'),\n  hasError: PropTypes.bool.description('').defaultValue('false'),\n  onChange: PropTypes.func.description('').defaultValue(''),\n  onSelectAll: PropTypes.func.description('').defaultValue(''),\n  onFilter: PropTypes.func.description('').defaultValue(''),\n  onCreate: PropTypes.func.description('').defaultValue(''),\n  onClear: PropTypes.func.description('').defaultValue(''),\n  onClearAll: PropTypes.func.description('').defaultValue(''),\n};\n"],"names":["propTypes","placeholder","PropTypes","string","description","defaultValue","options","array","selectedValues","oneOfType","arrayOf","object","autoFocus","bool","hasError","onChange","func","onSelectAll","onFilter","onCreate","onClear","onClearAll"],"mappings":";;IAEaA,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAEC,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,EAA7B,EAAiCC,YAAjC,CAA8C,EAA9C,CADU;AAEvBC,EAAAA,OAAO,EAAEJ,SAAS,CAACK,KAAV,CAAgBH,WAAhB,CAA4B,EAA5B,EAAgCC,YAAhC,CAA6C,EAA7C,CAFc;AAGvBG,EAAAA,cAAc,EAAEN,SAAS,CAACO,SAAV,CAAoB,CAACP,SAAS,CAACQ,OAAV,CAAkBR,SAAS,CAACS,MAA5B,CAAD,EAAsCT,SAAS,CAACS,MAAhD,CAApB,EAA6EP,WAA7E,CAAyF,EAAzF,CAHO;AAIvBQ,EAAAA,SAAS,EAAEV,SAAS,CAACW,IAAV,CAAeT,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,OAA5C,CAJY;AAKvBS,EAAAA,QAAQ,EAAEZ,SAAS,CAACW,IAAV,CAAeT,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,OAA5C,CALa;AAMvBU,EAAAA,QAAQ,EAAEb,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C,CANa;AAOvBY,EAAAA,WAAW,EAAEf,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C,CAPU;AAQvBa,EAAAA,QAAQ,EAAEhB,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C,CARa;AASvBc,EAAAA,QAAQ,EAAEjB,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C,CATa;AAUvBe,EAAAA,OAAO,EAAElB,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C,CAVc;AAWvBgB,EAAAA,UAAU,EAAEnB,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,EAA3B,EAA+BC,YAA/B,CAA4C,EAA5C;AAXW;;;;"}

package/esm/ComboBox/v3/tests/utils.js

@@ -0,0 +1,19 @@
+var basicOptions = [{
+  dsId: '1',
+  type: 'option',
+  value: 'id_1',
+  label: 'Luke Skywalker too long this text is super long'
+}, {
+  dsId: '2',
+  type: 'option',
+  value: 'id_2',
+  label: 'Obi-Wan Kenobi'
+}, {
+  dsId: '3',
+  type: 'option',
+  value: 'id_3',
+  label: 'Padme Amidala'
+}];
+
+export { basicOptions };
+//# sourceMappingURL=utils.js.map

package/esm/ComboBox/v3/tests/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/ComboBox/v3/tests/utils.tsx"],"sourcesContent":["export const basicOptions = [\n  {\n    dsId: '1',\n    type: 'option',\n    value: 'id_1',\n    label: 'Luke Skywalker too long this text is super long',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    value: 'id_2',\n    label: 'Obi-Wan Kenobi',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    value: 'id_3',\n    label: 'Padme Amidala',\n  },\n];\n"],"names":["basicOptions","dsId","type","value","label"],"mappings":"IAAaA,YAAY,GAAG,CAC1B;AACEC,EAAAA,IAAI,EAAE,GADR;AAEEC,EAAAA,IAAI,EAAE,QAFR;AAGEC,EAAAA,KAAK,EAAE,MAHT;AAIEC,EAAAA,KAAK,EAAE;AAJT,CAD0B,EAO1B;AACEH,EAAAA,IAAI,EAAE,GADR;AAEEC,EAAAA,IAAI,EAAE,QAFR;AAGEC,EAAAA,KAAK,EAAE,MAHT;AAIEC,EAAAA,KAAK,EAAE;AAJT,CAP0B,EAa1B;AACEH,EAAAA,IAAI,EAAE,GADR;AAEEC,EAAAA,IAAI,EAAE,QAFR;AAGEC,EAAAA,KAAK,EAAE,MAHT;AAIEC,EAAAA,KAAK,EAAE;AAJT,CAb0B;;;;"}