@elliemae/ds-form 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/ComboBox/v2/components/CustomOption.js

@@ -0,0 +1,99 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var lodash = require('lodash');
+var DSSeparator = require('@elliemae/ds-separator');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var context = require('../context.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const isOptionAGroup = option => option && option.type && option.type.name === 'Group';
+
+const CustomOption = _ref => {
+  var _option$props, _option$props2, _option$props2$innerP, _option$props3, _option$props3$innerP;
+
+  let {
+    index,
+    data,
+    style,
+    isScrolling
+  } = _ref;
+  const {
+    items,
+    options: {
+      useTruncatedText
+    }
+  } = data;
+  const option = items[index];
+  const {
+    value
+  } = React.useContext(context.DropDownContext);
+  const isSelected = (value === null || value === void 0 ? void 0 : value.label) === (option === null || option === void 0 ? void 0 : (_option$props = option.props) === null || _option$props === void 0 ? void 0 : _option$props.label); // react-select performance optimization
+
+  option === null || option === void 0 ? true : (_option$props2 = option.props) === null || _option$props2 === void 0 ? true : (_option$props2$innerP = _option$props2.innerProps) === null || _option$props2$innerP === void 0 ? true : delete _option$props2$innerP.onMouseMove;
+  option === null || option === void 0 ? true : (_option$props3 = option.props) === null || _option$props3 === void 0 ? true : (_option$props3$innerP = _option$props3.innerProps) === null || _option$props3$innerP === void 0 ? true : delete _option$props3$innerP.onMouseOver;
+  const renderOptionStyle = isOptionAGroup(option) ? {} : style;
+
+  const optionProps = _objectSpread(_objectSpread({}, option.props.innerProps), {}, {
+    style: renderOptionStyle,
+    'data-testid': 'combobox-option',
+    role: 'option',
+    'aria-selected': isSelected,
+    onClick: e => {
+      var _option$props4, _option$props4$innerP;
+
+      e.stopPropagation();
+      if (option !== null && option !== void 0 && (_option$props4 = option.props) !== null && _option$props4 !== void 0 && (_option$props4$innerP = _option$props4.innerProps) !== null && _option$props4$innerP !== void 0 && _option$props4$innerP.onClick) option.props.innerProps.onClick(e);
+    }
+  });
+
+  if (useTruncatedText && lodash.get(option, 'props.selectProps.menuIsOpen')) {
+    return /*#__PURE__*/React__default["default"].cloneElement(option, _objectSpread(_objectSpread({}, option.props), {}, {
+      innerProps: optionProps,
+      tabIndex: 0
+    }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [option.props.data.hasSeparator && !lodash.isArray(option.props.data.options) && /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+        margin: "none",
+        style: {
+          zIndex: -2
+        },
+        type: "non-form"
+      }), /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+        value: option.props.children
+      })]
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].cloneElement(option, _objectSpread(_objectSpread({}, option.props), {}, {
+    tabIndex: 0,
+    innerProps: optionProps
+  }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [option.props.data.hasSeparator && !lodash.isArray(option.props.data.options) && /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+      margin: "none",
+      style: {
+        zIndex: -2
+      },
+      type: "non-form"
+    }), option.props.children]
+  }));
+};
+
+module.exports = CustomOption;

package/cjs/ComboBox/v2/components/CustomOptionMulti.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var DSCheckbox = require('../../../Checkbox/DSCheckbox.js');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const CustomOptionMulti = _ref => {
+  let {
+    index,
+    data,
+    style,
+    isScrolling
+  } = _ref;
+  const {
+    items,
+    options: {
+      useTruncatedText
+    }
+  } = data;
+  const option = items[index];
+  const {
+    value
+  } = React.useContext(context.DropDownContext);
+  const isSelected = !!(value !== null && value !== void 0 && value.find(item => {
+    var _option$props;
+
+    return item.label === (option === null || option === void 0 ? void 0 : (_option$props = option.props) === null || _option$props === void 0 ? void 0 : _option$props.label);
+  }));
+
+  const optionProps = _objectSpread(_objectSpread({}, option.props.innerProps), {}, {
+    style,
+    'data-testid': 'combobox-option',
+    role: 'option',
+    'aria-selected': isSelected,
+    onClick: e => {
+      e.stopPropagation();
+      if (option.props.innerProps.onClick) option.props.innerProps.onClick(e);
+    }
+  });
+
+  if (useTruncatedText) {
+    return /*#__PURE__*/React__default["default"].cloneElement(option, _objectSpread(_objectSpread({}, option.props), {}, {
+      innerProps: optionProps
+    }), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "combobox-v2-option-multiple-container"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSCheckbox.DSCheckbox, {
+      checked: option.props.isSelected,
+      labelText: " "
+    }), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "combobox-v2-option-multiple-truncated-label"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: option.props.children
+    }))));
+  }
+
+  return /*#__PURE__*/React__default["default"].cloneElement(option, _objectSpread(_objectSpread({}, option.props), {}, {
+    innerProps: optionProps,
+    children: /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "combobox-v2-option-multiple-container"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSCheckbox.DSCheckbox, {
+      checked: option.props.isSelected,
+      labelText: option.props.children
+    }))
+  }));
+};
+
+module.exports = CustomOptionMulti;

package/cjs/ComboBox/v2/components/DropdownIndicator.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var lodash = require('lodash');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var context = require('../context.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _ChevronSmallDown;
+
+const _excluded = ["innerRef", "onKeyDown", "options", "theme", "clearValue", "getStyles", "getValue", "setValue", "hasStyle", "hasValue", "isMulti", "isRtl", "isDisabled", "isFocused", "selectOption", "selectProps", "innerProps", "cx"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DropdownIndicator = _ref => {
+  let {
+    innerRef,
+    onKeyDown,
+    options,
+    theme,
+    clearValue,
+    getStyles,
+    getValue,
+    setValue,
+    hasStyle,
+    hasValue,
+    isMulti,
+    isRtl,
+    isDisabled,
+    isFocused,
+    selectOption,
+    selectProps,
+    innerProps,
+    cx
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    changeHandleOpening,
+    changeMenuOpen,
+    inputInFocus,
+    handleOpening,
+    menuOpen,
+    onClickDropdownIndicator
+  } = React.useContext(context.DropDownContext);
+  const [touchClick, setTouchClick] = React.useState(false);
+
+  const handleOnClick = e => {
+    onClickDropdownIndicator(e);
+    changeMenuOpen(!menuOpen);
+    changeHandleOpening(!handleOpening);
+  };
+
+  const handleOnKeyDown = e => {
+    if (e.key === 'Enter') {
+      changeMenuOpen(!menuOpen);
+      e.preventDefault();
+    }
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+    "data-testid": "combobox-dropdown-btn",
+    "aria-label": "dropdown-indicator",
+    buttonType: "text",
+    className: "dropdown-indicator ".concat(lodash.get(selectProps, 'menuIsOpen', false) && !inputInFocus ? 'active' : ''),
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+    innerRef: innerRef,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    onTouchStart: () => setTouchClick(true),
+    onTouchEnd: e => {
+      if (touchClick) handleOnClick(e);
+      setTouchClick(false);
+    },
+    tabIndex: -1,
+    variant: lodash.get(selectProps, 'menuIsOpen', false) && !inputInFocus ? DSButton.BUTTON_VARIANT.ACTIVE : DSButton.BUTTON_VARIANT.DEFAULT
+  }, rest));
+};
+
+module.exports = DropdownIndicator;

package/cjs/ComboBox/v2/components/GroupHeading.js

@@ -0,0 +1,47 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var Select = require('react-select');
+var DSSeparator = require('@elliemae/ds-separator');
+var utils = require('./utils.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var _StyledSeparator;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const GroupHeading = props => {
+  const headerPosition = utils.getGroupHeaderPosition(props.id);
+  const {
+    hasSeparator
+  } = props.selectProps.options[headerPosition];
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, hasSeparator && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
+    type: "non-form"
+  }))), /*#__PURE__*/jsxRuntime.jsx(Select.components.GroupHeading, _objectSpread({}, props)));
+};
+
+const StyledSeparator = /*#__PURE__*/styled__default["default"](DSSeparator__default["default"]).withConfig({
+  componentId: "sc-1bw0sto-0"
+})(["width:auto;margin:", ";margin-top:unset;"], props => props.theme.space.xs);
+const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1bw0sto-1"
+})(["display:flex;flex-direction:column;"]);
+
+module.exports = GroupHeading;

package/cjs/ComboBox/v2/components/IndicatorSeparator.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const IndicatorSeparator = _ref => {
+  let {
+    innerProps
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread({}, innerProps));
+};
+
+exports.IndicatorSeparator = IndicatorSeparator;
+exports["default"] = IndicatorSeparator;

package/cjs/ComboBox/v2/components/LoadingIndicator.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _Wrapper;
+const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-m7hflj-0"
+})(["display:flex;justify-content:center;margin-top:12px;"]);
+
+const LoadingIndicator = () => _Wrapper || (_Wrapper = /*#__PURE__*/_jsx__default["default"](Wrapper, {
+  "data-testid": "ds-combobox_loading-indicator"
+}, void 0, /*#__PURE__*/_jsx__default["default"](dsCircularProgressIndicator.DSCircularProgressIndicator, {
+  size: "m"
+})));
+
+module.exports = LoadingIndicator;

package/cjs/ComboBox/v2/components/MenuList.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var Select = require('react-select');
+var reactWindow = require('react-window');
+var memoize = require('memoize-one');
+var CustomOption = require('./CustomOption.js');
+var CustomOptionMulti = require('./CustomOptionMulti.js');
+var MultiSelectHeader = require('./MultiSelectHeader.js');
+var useMenuListHeight = require('./useMenuListHeight.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const createItemData = memoize__default["default"]((items, options) => {
+  if (items !== null && items !== void 0 && items.findIndex) {
+    const index = items.findIndex(item => item.props.isFocused);
+    if (index > -1) return {
+      items,
+      options
+    };
+    return {
+      items: [_objectSpread(_objectSpread({}, items[0]), {}, {
+        props: _objectSpread(_objectSpread({}, items[0].props), {}, {
+          isFocused: true
+        })
+      }), ...items.slice(1)],
+      options
+    };
+  }
+
+  return {
+    items,
+    options
+  };
+});
+
+const scrollTo = (listRef, type) => {
+  if (listRef && listRef.current && listRef.current.props) {
+    const {
+      items
+    } = listRef.current.props.itemData;
+    const index = items.findIndex(item => item.props.isFocused);
+    listRef.current.scrollToItem(index !== -1 ? index : 0, type);
+  }
+};
+
+const MenuList = /*#__PURE__*/React__default["default"].memo(props => {
+  const {
+    children: options,
+    selectProps,
+    isMulti,
+    hasValue
+  } = props;
+  const {
+    customMenuItemOptions,
+    selectMeasure: {
+      bounds: {
+        bottom
+      }
+    }
+  } = selectProps;
+  const listRef = React.useRef(null);
+  const [inside, setInside] = React.useState(false);
+  const remainingHeight = window.innerHeight - bottom - 10;
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const handleKeyDown = () => setInside(false);
+
+  const {
+    itemSize = 35,
+    maxOptions
+  } = customMenuItemOptions;
+  const itemData = createItemData(options, customMenuItemOptions);
+  const RenderOption = !isMulti ? CustomOption : CustomOptionMulti;
+  const height = useMenuListHeight.useMenuListHeight(options, maxOptions, itemSize, remainingHeight);
+
+  if (listRef && listRef.current && !inside && hasValue) {
+    scrollTo(listRef); // use autoScroll
+  }
+
+  React.useEffect(() => {
+    // fix this that has a bug where the groups is being focused
+    if (hasValue && !inside && listRef) scrollTo(listRef);
+  }, [options]);
+
+  const setInsideFalseAtClosing = () => setInside(false);
+
+  React.useEffect(() => setInsideFalseAtClosing, []);
+  if (!options.length) return /*#__PURE__*/jsxRuntime.jsx(Select.components.MenuList, _objectSpread({}, props));
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    role: "list",
+    "data-testid": "combobox-menu-list"
+  }, void 0, isMulti && /*#__PURE__*/jsxRuntime.jsx(MultiSelectHeader, _objectSpread({}, props)), /*#__PURE__*/jsxRuntime.jsx(reactWindow.FixedSizeList, {
+    ref: r => {
+      listRef.current = r;
+
+      if (!inside && listRef && hasValue) {
+        scrollTo(listRef);
+      }
+    },
+    className: "combobox-menu-list ".concat(isMulti && 'combobox-menu-list-is-multi'),
+    height: height,
+    itemCount: options.length,
+    itemData: itemData,
+    itemSize: itemSize,
+    onScroll: () => setInside(true),
+    useIsScrolling: true,
+    children: RenderOption
+  }));
+});
+
+module.exports = MenuList;

package/cjs/ComboBox/v2/components/MultiSelectHeader.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var styled = require('styled-components');
+var DSButton = require('@elliemae/ds-button');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var DSSeparator = require('@elliemae/ds-separator');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var _StyledSeparator, _DSSeparator;
+
+const MultiSelectHeader = props => {
+  const totalItems = props.children.length;
+  const selectedItems = props.children.filter(child => child.props.isSelected).length;
+  const {
+    onSelectAll,
+    selectAllDisabled
+  } = React.useContext(context.DropDownContext);
+  const isClearButtonDisabled = selectedItems === 0;
+  const isAllButtonDisabled = selectedItems === totalItems;
+  return /*#__PURE__*/_jsx__default["default"](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](ContentWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HeaderTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: "".concat(selectedItems, " selected")
+  })), !selectAllDisabled && /*#__PURE__*/_jsx__default["default"](ActionButtons, {}, void 0, /*#__PURE__*/_jsx__default["default"](StyledButton, {
+    "data-testid": "combobox-all-btn",
+    buttonType: "text",
+    labelText: "All",
+    size: "s",
+    onClick: () => onSelectAll(true),
+    disabled: isAllButtonDisabled,
+    "aria-disabled": isAllButtonDisabled ? 'true' : 'false',
+    variant: isAllButtonDisabled && DSButton.BUTTON_VARIANT.DISABLED
+  }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
+    orientation: "vertical",
+    position: "center",
+    type: "group-level",
+    margin: "none"
+  })), /*#__PURE__*/_jsx__default["default"](StyledButton, {
+    "data-testid": "combobox-clear-btn",
+    buttonType: "text",
+    labelText: "Clear",
+    size: "s",
+    onClick: () => onSelectAll(false),
+    disabled: isClearButtonDisabled,
+    "aria-disabled": isClearButtonDisabled ? 'true' : 'false',
+    variant: isClearButtonDisabled && DSButton.BUTTON_VARIANT.DISABLED
+  }))), _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+    position: "center",
+    type: "non-form",
+    margin: "none"
+  })));
+};
+
+const HeaderWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-zjm4r5-0"
+})(["display:flex;flex-direction:column;padding:0 ", ";"], props => props.theme.space.xs);
+const ContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-zjm4r5-1"
+})(["display:grid;align-items:flex-end;justify-content:space-between;height:", ";padding-bottom:4px;grid-template-columns:minmax(0,1fr) 104px;"], props => props.theme.space.s);
+const HeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-zjm4r5-2"
+})(["color:", ";text-overflow:ellipsis;"], props => props.theme.colors.neutral[500]);
+const ActionButtons = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-zjm4r5-3"
+})(["display:inline-flex;color:", ";"], props => props.theme.colors.neutral[500]);
+const StyledSeparator = /*#__PURE__*/styled__default["default"](DSSeparator__default["default"]).withConfig({
+  componentId: "sc-zjm4r5-4"
+})(["height:auto;width:auto;"]);
+const StyledButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-zjm4r5-5"
+})(["padding:0 ", ";"], props => props.theme.space.xxs);
+
+module.exports = MultiSelectHeader;

package/cjs/ComboBox/v2/components/MultiValueLabel.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var DSPopper = require('@elliemae/ds-popper');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
+
+function MultiValueLabel(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+    tooltipPlacement: DSPopper.PopperPositions.TOP,
+    value: children
+  });
+}
+
+module.exports = MultiValueLabel;