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

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

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ComboBox_v3_ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBox_v3_parts_headerList_styled = require('./styled.js');
+var ComboBox_v3_utils_listHelper = require('../../utils/listHelper.js');
+require('styled-components');
+require('@elliemae/ds-button');
+require('@elliemae/ds-separator');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HeaderList = function HeaderList() {
+  var _useContext = React.useContext(ComboBox_v3_ComboBoxCTX.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 = ComboBox_v3_utils_listHelper.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 = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    inputRef.current.focus();
+    onClearAll();
+  }, [inputRef, onClearAll]);
+
+  var handleOnMouseDown = function handleOnMouseDown(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_styled.StyledHeaderListWrapper, {
+    onMouseDown: handleOnMouseDown
+  }, /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_styled.StyledSelectedItems, null, "".concat(multiSelectedValues.length, " Selected")), /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_styled.ActionButtons, null, onSelectAll && /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_styled.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__default['default'].createElement(ComboBox_v3_parts_headerList_styled.StyledSeparator, {
+    orientation: "vertical",
+    position: "center",
+    type: "group-level",
+    margin: "none"
+  }), onClearAll && /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_styled.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
+  })));
+};
+
+exports.HeaderList = HeaderList;
+//# sourceMappingURL=HeaderList.js.map

package/cjs/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","React","StyledHeaderListWrapper","StyledSelectedItems","ActionButtons","StyledButton","StyledSeparator"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ComboBox_v3_parts_headerList_HeaderList = require('./HeaderList.js');
+require('react');
+require('../../ComboBoxCTX.js');
+require('./styled.js');
+require('styled-components');
+require('@elliemae/ds-button');
+require('@elliemae/ds-separator');
+require('../../utils/listHelper.js');
+
+
+
+exports.HeaderList = ComboBox_v3_parts_headerList_HeaderList.HeaderList;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var DSButton = require('@elliemae/ds-button');
+var DSSeparator = require('@elliemae/ds-separator');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var StyledHeaderListWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-dazbzt-0"
+})(["display:flex;justify-content:space-between;padding:0px 16px;height:28px;"]);
+var ActionButtons = /*#__PURE__*/styled__default['default'].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__default['default'](DSSeparator__default['default']).withConfig({
+  componentId: "sc-dazbzt-2"
+})(["height:50%;width:auto;"]);
+var StyledButton = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+  componentId: "sc-dazbzt-3"
+})(["padding:0 ", ";align-items:center;"], function (props) {
+  return props.theme.space.xxs;
+});
+var StyledSelectedItems = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-dazbzt-4"
+})(["display:flex;align-items:center;"]);
+
+exports.ActionButtons = ActionButtons;
+exports.StyledButton = StyledButton;
+exports.StyledHeaderListWrapper = StyledHeaderListWrapper;
+exports.StyledSelectedItems = StyledSelectedItems;
+exports.StyledSeparator = StyledSeparator;
+//# sourceMappingURL=styled.js.map

package/cjs/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,0BAAM,CAACC,GAAV;AAAA;AAAA;IAOvBC,aAAa,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,2DAIf,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,GAA3B,CAAX;AAAA,CAJe;IAObC,eAAe,gBAAGP,0BAAM,CAACQ,+BAAD,CAAT;AAAA;AAAA;IAKfC,YAAY,gBAAGT,0BAAM,CAACU,4BAAD,CAAT;AAAA;AAAA,2CACV,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYO,KAAZ,CAAkBC,GAA7B;AAAA,CADU;IAKZC,mBAAmB,gBAAGb,0BAAM,CAACC,GAAV;AAAA;AAAA;;;;;;;;"}

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ComboBox_v3_utils_listHelper = require('../../utils/listHelper.js');
+var ComboBox_v3_parts_menuList_styled = require('./styled.js');
+var ComboBox_v3_ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBox_v3_parts_headerList_HeaderList = require('../header-list/HeaderList.js');
+var ComboBox_v3_utils_hooks_useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
+var ComboBox_v3_parts_emptyState_index = require('../empty-state/index.js');
+var ComboBox_v3_parts_menuList_useMenuList = require('./useMenuList.js');
+require('styled-components');
+require('../header-list/styled.js');
+require('@elliemae/ds-button');
+require('@elliemae/ds-separator');
+require('@babel/runtime/helpers/slicedToArray');
+require('../empty-state/styled.js');
+require('@elliemae/ds-form');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuList = function MenuList() {
+  var _useContext = React.useContext(ComboBox_v3_ComboBoxCTX.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 = ComboBox_v3_parts_menuList_useMenuList.useMenuList(),
+      ItemRenderer = _useMenuList.ItemRenderer;
+
+  ComboBox_v3_utils_hooks_useOnElementResize.useOnElementResize(controlsWrapperRef);
+  var listWidth = inline ? '100%' : "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth, "px");
+  var selectableOptions = ComboBox_v3_utils_listHelper.getOptions(options);
+  var handleOnClick = React.useCallback(function () {
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+  }, [inputRef]);
+  return /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_menuList_styled.StyledListWrapper, {
+    ref: listRef,
+    width: listWidth
+  }, !inline && multiple && options.length > 0 && /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_headerList_HeaderList.HeaderList, null), selectableOptions.length > 0 ? /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_menuList_styled.StyledList, {
+    tabIndex: -1,
+    "aria-expanded": showPopover,
+    id: "combo-listbox",
+    role: "listbox",
+    onFocus: handleOnClick,
+    "data-testid": "menu-list"
+  }, ItemRenderer) : /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_emptyState_index.EmptyState, null));
+};
+
+exports.MenuList = MenuList;
+//# sourceMappingURL=MenuList.js.map

package/cjs/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","React","StyledListWrapper","length","HeaderList","StyledList","EmptyState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAQMA,QAAQ,GAAG,SAAXA,QAAW,GAAmB;AAClC,oBAOIC,gBAAU,CAACC,uCAAD,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,kDAAW,EAApC;AAAA,MAAQC,YAAR,gBAAQA,YAAR;;AACAC,EAAAA,6DAAkB,CAACN,kBAAD,CAAlB;AACA,MAAMO,SAAS,GAAGd,MAAM,GAAG,MAAH,aAAeG,gBAAf,aAAeA,gBAAf,uBAAeA,gBAAgB,CAAEY,WAAjC,OAAxB;AACA,MAAMC,iBAAiB,GAAGC,uCAAU,CAAChB,OAAD,CAApC;AAEA,MAAMiB,aAAa,GAAGC,iBAAW,CAAC,YAAM;AACtCf,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEgB,OAAV,CAAkBC,KAAlB;AACD,GAFgC,EAE9B,CAACjB,QAAD,CAF8B,CAAjC;AAIA,sBACEkB,wCAACC,mDAAD;AAAmB,IAAA,GAAG,EAAElB,OAAxB;AAAiC,IAAA,KAAK,EAAES;AAAxC,KACG,CAACd,MAAD,IAAWQ,QAAX,IAAuBP,OAAO,CAACuB,MAAR,GAAiB,CAAxC,iBAA6CF,wCAACG,kDAAD,OADhD,EAEGT,iBAAiB,CAACQ,MAAlB,GAA2B,CAA3B,gBACCF,wCAACI,4CAAD;AACE,IAAA,QAAQ,EAAE,CAAC,CADb;AAEE,qBAAepB,WAFjB;AAGE,IAAA,EAAE,EAAC,eAHL;AAIE,IAAA,IAAI,EAAC,SAJP;AAKE,IAAA,OAAO,EAAEY,aALX;AAME,mBAAY;AANd,KAQGN,YARH,CADD,gBAYCU,wCAACK,6CAAD,OAdJ,CADF;AAmBD;;;;"}

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ComboBox_v3_utils_listHelper = require('../../utils/listHelper.js');
+var ComboBox_v3_parts_menuList_styled = require('./styled.js');
+var ComboBox_v3_ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBox_v3_utils_hooks_useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
+var ComboBox_v3_parts_emptyState_index = require('../empty-state/index.js');
+var ComboBox_v3_parts_menuList_useMenuList = require('./useMenuList.js');
+require('styled-components');
+require('@babel/runtime/helpers/slicedToArray');
+require('../empty-state/styled.js');
+require('@elliemae/ds-form');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuListInline = function MenuListInline() {
+  var _useContext = React.useContext(ComboBox_v3_ComboBoxCTX.ComboBoxContext),
+      options = _useContext.props.options,
+      inputRef = _useContext.inputRef,
+      controlsWrapperRef = _useContext.controlsWrapperRef;
+
+  var _useMenuList = ComboBox_v3_parts_menuList_useMenuList.useMenuList(),
+      ItemRenderer = _useMenuList.ItemRenderer;
+
+  ComboBox_v3_utils_hooks_useOnElementResize.useOnElementResize(controlsWrapperRef);
+  var selectableOptions = ComboBox_v3_utils_listHelper.getOptions(options);
+  var handleOnClick = React.useCallback(function () {
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+  }, [inputRef]);
+  return /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_menuList_styled.StyledListInlineWrapper, {
+    id: "combo-listbox",
+    role: "listbox"
+  }, selectableOptions.length > 0 ? /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_menuList_styled.StyledList, {
+    onFocus: handleOnClick
+  }, ItemRenderer) : /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_emptyState_index.EmptyState, null));
+};
+
+exports.MenuListInline = MenuListInline;
+//# sourceMappingURL=MenuListInline.js.map

package/cjs/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","React","StyledListInlineWrapper","length","StyledList","EmptyState"],"mappings":";;;;;;;;;;;;;;;;;;;;IAOMA,cAAc,GAAG,SAAjBA,cAAiB,GAAmB;AACxC,oBAIIC,gBAAU,CAACC,uCAAD,CAJd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,QAFF,eAEEA,QAFF;AAAA,MAGEC,kBAHF,eAGEA,kBAHF;;AAMA,qBAAyBC,kDAAW,EAApC;AAAA,MAAQC,YAAR,gBAAQA,YAAR;;AACAC,EAAAA,6DAAkB,CAACH,kBAAD,CAAlB;AACA,MAAMI,iBAAiB,GAAGC,uCAAU,CAACR,OAAD,CAApC;AAEA,MAAMS,aAAa,GAAGC,iBAAW,CAAC,YAAM;AACtCR,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,OAAV,CAAkBC,KAAlB;AACD,GAFgC,EAE9B,CAACV,QAAD,CAF8B,CAAjC;AAIA,sBACEW,wCAACC,yDAAD;AAAyB,IAAA,EAAE,EAAC,eAA5B;AAA4C,IAAA,IAAI,EAAC;AAAjD,KACGP,iBAAiB,CAACQ,MAAlB,GAA2B,CAA3B,gBAA+BF,wCAACG,4CAAD;AAAY,IAAA,OAAO,EAAEP;AAArB,KAAqCJ,YAArC,CAA/B,gBAAiGQ,wCAACI,6CAAD,OADpG,CADF;AAKD;;;;"}

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ComboBox_v3_parts_menuList_MenuList = require('./MenuList.js');
+var ComboBox_v3_parts_menuList_MenuListInline = require('./MenuListInline.js');
+require('react');
+require('../../utils/listHelper.js');
+require('./styled.js');
+require('styled-components');
+require('../../ComboBoxCTX.js');
+require('../header-list/HeaderList.js');
+require('../header-list/styled.js');
+require('@elliemae/ds-button');
+require('@elliemae/ds-separator');
+require('../../utils/hooks/useOnElementResize.js');
+require('@babel/runtime/helpers/slicedToArray');
+require('../empty-state/index.js');
+require('../empty-state/styled.js');
+require('./useMenuList.js');
+require('@elliemae/ds-form');
+
+
+
+exports.MenuList = ComboBox_v3_parts_menuList_MenuList.MenuList;
+exports.MenuListInline = ComboBox_v3_parts_menuList_MenuListInline.MenuListInline;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//   padding: 10px 10px;
+//   list-style: none;
+//   &:focus {
+//     outline: 1px solid ${(props) => props.theme.colors.brand[500]};
+//   }
+// `;
+
+var StyledListWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-1uedyf-0"
+})(["width:", ";"], function (props) {
+  return props.width;
+});
+var StyledList = /*#__PURE__*/styled__default['default'].ul.withConfig({
+  componentId: "sc-1uedyf-1"
+})(["padding:0px;margin:0;"]);
+var StyledGroupSeparator = /*#__PURE__*/styled__default['default'].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__default['default'].div.withConfig({
+  componentId: "sc-1uedyf-3"
+})(["width:100%;"]);
+
+exports.StyledGroupSeparator = StyledGroupSeparator;
+exports.StyledList = StyledList;
+exports.StyledListInlineWrapper = StyledListInlineWrapper;
+exports.StyledListWrapper = StyledListWrapper;
+//# sourceMappingURL=styled.js.map

package/cjs/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,0BAAM,CAACC,GAAV;AAAA;AAAA,oBACnB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CADmB;IAIjBC,UAAU,gBAAGJ,0BAAM,CAACK,EAAV;AAAA;AAAA;IAKVC,oBAAoB,gBAAGN,0BAAM,CAACC,GAAV;AAAA;AAAA,qDAGtB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,GAA3B,CAAX;AAAA,CAHsB;IAMpBC,uBAAuB,gBAAGV,0BAAM,CAACC,GAAV;AAAA;AAAA;;;;;;;"}

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

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dsForm = require('@elliemae/ds-form');
+var ComboBox_v3_ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBox_v3_utils_listHelper = require('../../utils/listHelper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/* eslint-disable react-hooks/exhaustive-deps */
+
+var useMenuList = function useMenuList() {
+  var _useContext = React.useContext(ComboBox_v3_ComboBoxCTX.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 ? dsForm.MultiMenuItem : dsForm.SingleMenuItem;
+  var offsetCounter = 0;
+  var handleClick = React.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 = React.useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var ItemRenderer = React.useMemo(function () {
+    return options && options.map(function (option, idx) {
+      if (option.type === 'section') {
+        offsetCounter += 1;
+        return /*#__PURE__*/React__default['default'].createElement(dsForm.Section, {
+          label: option.label,
+          key: option.dsId
+        });
+      }
+
+      if (option.type === 'separator') {
+        offsetCounter += 1;
+        return /*#__PURE__*/React__default['default'].createElement(dsForm.Separator, {
+          key: option.dsId
+        });
+      }
+
+      if (option.type === 'option') {
+        return /*#__PURE__*/React__default['default'].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: ComboBox_v3_utils_listHelper.isSelected(selectedValues, option)
+        });
+      }
+
+      return React__default['default'].Fragment;
+    });
+  }, [options, focusOptionIdx, selectedValues, inputRef]);
+  return React.useMemo(function () {
+    return {
+      ItemRenderer: ItemRenderer
+    };
+  }, [ItemRenderer]);
+};
+
+exports.useMenuList = useMenuList;
+//# sourceMappingURL=useMenuList.js.map

package/cjs/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":"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"}

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

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var dsPills = require('@elliemae/ds-pills');
+var ComboBox_v3_ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBox_v3_parts_multiSelectedValuesContainer_useGroupPills = require('./useGroupPills.js');
+var ComboBox_v3_parts_a11yMessages_MultiAllyMessages = require('../a11y-messages/MultiAllyMessages.js');
+require('styled-components');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/slicedToArray');
+require('../../utils/hooks/useOnElementResize.js');
+require('../../utils/listHelper.js');
+require('../a11y-messages/styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+var MultiSelectedValuesContainer = function MultiSelectedValuesContainer() {
+  var _useContext = React.useContext(ComboBox_v3_ComboBoxCTX.ComboBoxContext),
+      _useContext$props = _useContext.props,
+      onChange = _useContext$props.onChange,
+      selectedValues = _useContext$props.selectedValues,
+      inputRef = _useContext.inputRef;
+
+  var pillGroupRef = React.useRef(null);
+  var multiSelectedValue = selectedValues;
+  var pillsToShow = ComboBox_v3_parts_multiSelectedValuesContainer_useGroupPills.useGroupPills(pillGroupRef);
+  var correctPillsToShow = pillsToShow || 1;
+
+  var handleClick = function handleClick(e) {
+    // prevent toggle drowpdown on pills remove
+    e.stopPropagation();
+  };
+
+  var pills = React.useMemo(function () {
+    var handleRemove = function handleRemove(option) {
+      onChange(option);
+      inputRef.current.focus();
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      onClick: handleClick,
+      style: {
+        width: 'max-content'
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, {
+      innerRef: pillGroupRef
+    }, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(function (option) {
+      return /*#__PURE__*/React__default['default'].createElement(dsPills.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__default['default'].createElement(dsPills.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__default['default'].createElement(React__default['default'].Fragment, null, multiSelectedValue.length > 0 && !inputRef.current.value && /*#__PURE__*/React__default['default'].createElement(ComboBox_v3_parts_a11yMessages_MultiAllyMessages.MultiAllyMessages, null), pills);
+};
+
+exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer;
+//# sourceMappingURL=MultiSelectedValuesContainer.js.map

package/cjs/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","React","Grid","width","DSPillGroupV2","length","slice","map","DSPillV2","value","label","val","join","MultiAllyMessages"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAQMA,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAmB;AACtD,oBAGIC,gBAAU,CAACC,uCAAD,CAHd;AAAA,sCACEC,KADF;AAAA,MACWC,QADX,qBACWA,QADX;AAAA,MACqBC,cADrB,qBACqBA,cADrB;AAAA,MAEEC,QAFF,eAEEA,QAFF;;AAKA,MAAMC,YAAY,GAAGC,YAAM,CAAiB,IAAjB,CAA3B;AACA,MAAMC,kBAAkB,GAAGJ,cAA3B;AACA,MAAMK,WAAW,GAAGC,0EAAa,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,aAAO,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,wBACEC,wCAACC,wBAAD;AAAM,MAAA,OAAO,EAAEV,WAAf;AAA4B,MAAA,KAAK,EAAE;AAAEW,QAAAA,KAAK,EAAE;AAAT;AAAnC,oBACEF,wCAACG,qBAAD;AAAe,MAAA,QAAQ,EAAElB;AAAzB,OACGE,kBAAkB,CAACiB,MAAnB,GAA4B,CAA5B,IACCjB,kBAAkB,CACfkB,KADH,CACS,CADT,EACYf,kBADZ,EAEGgB,GAFH,CAEO,UAACT,MAAD;AAAA,0BACHG,wCAACO,gBAAD;AACE,QAAA,cAAc,EAAEvB,QAAQ,CAACc,OAAT,CAAiBU,KAAjB,KAA2B,EAA3B,IAAiClB,kBAAkB,KAAKF,WAD1E;AAEE,QAAA,GAAG,EAAES,MAAM,CAACW,KAFd;AAGE,QAAA,KAAK,EAAEX,MAAM,CAACY,KAHhB;AAIE,QAAA,IAAI,EAAC,WAJP;AAKE,QAAA,QAAQ,EAAE;AAAA,iBAAMb,YAAY,CAACC,MAAD,CAAlB;AAAA;AALZ,QADG;AAAA,KAFP,CAFJ,EAaGV,kBAAkB,CAACiB,MAAnB,GAA4B,CAA5B,IAAiCd,kBAAkB,KAAKH,kBAAkB,CAACiB,MAA3E,iBACCJ,wCAACO,gBAAD;AACE,MAAA,cAAc,EAAE,KADlB;AAEE,MAAA,GAAG,EAAC,SAFN;AAGE,MAAA,KAAK,aAAMpB,kBAAkB,CAACiB,MAAnB,GAA4Bd,kBAAlC,CAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,YAAY,EAAEH,kBAAkB,CAC7BkB,KADW,CACLf,kBADK,EAEXgB,GAFW,CAEP,UAACI,GAAD;AAAA,eAASA,GAAG,CAACD,KAAb;AAAA,OAFO,EAGXE,IAHW,CAGN,IAHM;AALhB,MAdJ,CADF,CADF;AA8BD,GAnCoB,EAmClB,CAACvB,WAAD,EAAcN,QAAd,EAAwBE,QAAxB,EAAkCG,kBAAlC,EAAsDG,kBAAtD,CAnCkB,CAArB;AAqCA,sBACEU,kFACGb,kBAAkB,CAACiB,MAAnB,GAA4B,CAA5B,IAAiC,CAACpB,QAAQ,CAACc,OAAT,CAAiBU,KAAnD,iBAA4DR,wCAACY,kEAAD,OAD/D,EAEGlB,KAFH,CADF;AAMD;;;;"}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ComboBox_v3_parts_multiSelectedValuesContainer_MultiSelectedValuesContainer = require('./MultiSelectedValuesContainer.js');
+require('react');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-pills');
+require('../../ComboBoxCTX.js');
+require('./useGroupPills.js');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/slicedToArray');
+require('../../utils/hooks/useOnElementResize.js');
+require('../a11y-messages/MultiAllyMessages.js');
+require('../../utils/listHelper.js');
+require('../a11y-messages/styled.js');
+require('styled-components');
+
+
+
+exports.MultiSelectedValuesContainer = ComboBox_v3_parts_multiSelectedValuesContainer_MultiSelectedValuesContainer.MultiSelectedValuesContainer;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var StyledGroupedPillPopoverContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-1hugfiz-0"
+})(["padding:10px;background-color:#fff;"]);
+var StyledGroupPillWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-1hugfiz-1"
+})([""]);
+var StyledA11ySelectedValues = /*#__PURE__*/styled__default['default'].span.withConfig({
+  componentId: "sc-1hugfiz-2"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+exports.StyledA11ySelectedValues = StyledA11ySelectedValues;
+exports.StyledGroupPillWrapper = StyledGroupPillWrapper;
+exports.StyledGroupedPillPopoverContent = StyledGroupedPillPopoverContent;
+//# sourceMappingURL=styled.js.map

package/cjs/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,0BAAM,CAACC,GAAV;AAAA;AAAA;IAK/BC,sBAAsB,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA;IAEtBE,wBAAwB,gBAAGH,0BAAM,CAACI,IAAV;AAAA;AAAA;;;;;;"}