@elliemae/ds-pills 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/components/types/ValuePill.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 DSTooltip = require('@elliemae/ds-tooltip');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var styled = require('../styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ValuePill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    tooltipValue,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React__default["default"].Fragment;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledValuePillWrapper, {
+    size: size,
+    alignItems: "center",
+    className: "ds-pill-wrapper ds-pill-wrapper-value",
+    "data-testid": "ds-pill-wrapper",
+    "aria-label": ariaLabel || label,
+    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
+    gutter: "xxxs",
+    hasIcon: iconLeft !== null
+  }, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx__default["default"](DSTooltip.DSTooltipV2, {
+    title: tooltipValue,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](styled.StyledSpanWithTooltip, {
+      className: "ds-pill-tooltip-value",
+      tabIndex: 0
+    }, void 0, label)
+  }) : /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label));
+});
+
+exports.ValuePill = ValuePill;

package/cjs/components/types/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DropdownPill = require('./DropdownPill.js');
+var InputPill = require('./InputPill.js');
+var LabelPill = require('./LabelPill.js');
+var ReadOnlyPill = require('./ReadOnlyPill.js');
+var RemovablePill = require('./RemovablePill.js');
+var ValuePill = require('./ValuePill.js');
+
+
+
+exports.DropdownPill = DropdownPill.DropdownPill;
+exports.InputPill = InputPill.InputPill;
+exports.LabelPill = LabelPill.LabelPill;
+exports.ReadOnlyPill = ReadOnlyPill.ReadOnlyPill;
+exports.RemovablePill = RemovablePill.RemovablePill;
+exports.ValuePill = ValuePill.ValuePill;

package/cjs/deprecated/DropdownPill.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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 reactDesc = require('react-desc');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+var dsIcons = require('@elliemae/ds-icons');
+var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
+var Pill = require('./Pill.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
+var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
+
+var _ChevronDown;
+
+const _excluded = ["containerProps", "label", "variant", "tabIndex", "closeMenuOnItemSelection", "maxWidth", "minWidth"];
+
+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; }
+
+function DropdownPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    variant,
+    tabIndex = -1,
+    closeMenuOnItemSelection = false,
+    maxWidth,
+    minWidth
+  } = _ref,
+      dropdownProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const ref = React.useRef(null);
+  const [chevronEl, chevronRef] = React.useState();
+  const {
+    focusFirst
+  } = useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default["default"], _objectSpread(_objectSpread({}, dropdownProps), {}, {
+    closeMenuOnItemSelection: closeMenuOnItemSelection,
+    maxWidth: maxWidth,
+    hideIfNotVisible: true,
+    menuProps: {
+      className: 'dropdown-pill-menu',
+      zIndex: 100
+    },
+    minWidth: minWidth,
+    onClose: focusFirst,
+    referenceNode: chevronEl,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
+      "data-testid": "dropdown-pill",
+      className: "dropdown-pill",
+      containerProps: _objectSpread({
+        role: 'listbox'
+      }, containerProps),
+      innerRef: ref,
+      label: label,
+      rightAddon: /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: chevronRef,
+        children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
+          className: "dropdown-pill-chevron-down",
+          "data-testid": "dropdown-pill-button"
+        }))
+      }),
+      tabIndex: tabIndex,
+      variant: variant
+    })
+  }));
+}
+
+const props = {
+  /** props injected to component wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: reactDesc.PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill variant */
+  variant: reactDesc.PropTypes.oneOf(['value', 'title']).description('pill variant'),
+
+  /** html focus border */
+  tabIndex: reactDesc.PropTypes.number.description('html focus order'),
+
+  /** close menu on item selection */
+  closeMenuOnItemSelection: reactDesc.PropTypes.bool.description('close menu on item selection'),
+
+  /** pill max width */
+  maxWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill max width'),
+
+  /** pill min width */
+  minWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill min width')
+};
+const DSDropdownPillWithSchema = reactDesc.describe(DropdownPill);
+DSDropdownPillWithSchema.propTypes = props;
+
+exports.DSDropdownPillWithSchema = DSDropdownPillWithSchema;
+exports.DropdownPill = DropdownPill;

package/cjs/deprecated/InputPill.js

@@ -0,0 +1,84 @@
+'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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsForm = require('@elliemae/ds-form');
+var Pill = require('./Pill.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "value", "type"];
+
+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 StyledInputPill = dsClassnames.aggregatedClasses(Pill.Pill)('input-pill', null, _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+});
+function InputPill(_ref2) {
+  let {
+    containerProps = {},
+    placeholder = 'Enter Value',
+    onChange = () => {},
+    onRemove,
+    value,
+    type
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+  let TypeOfInput = dsForm.DSInput; // TODO: implement the DSTimeInput, see how because it returns a moment()
+  // TODO: implement the DSDateInput
+
+  switch (type) {
+    case 'inputText':
+      TypeOfInput = dsForm.DSInput;
+      break;
+
+    case 'inputMask':
+      TypeOfInput = dsForm.DSInputMask;
+      break;
+  }
+
+  return /*#__PURE__*/_jsx__default["default"](StyledInputPill, {
+    className: "input-pill",
+    classProps: {
+      value
+    },
+    containerProps: containerProps,
+    label: /*#__PURE__*/jsxRuntime.jsx(TypeOfInput, _objectSpread({
+      "data-testid": "input-pill",
+      onChange: onChange,
+      placeholder: placeholder,
+      value: value
+    }, otherProps)),
+    rightAddon: value && /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+      className: "remove-pill-button",
+      "data-testid": "remove-pill-button",
+      onClick: onRemove
+    }),
+    tabIndex: -1
+  });
+}
+
+exports.InputPill = InputPill;

package/cjs/deprecated/LabeledDropdownPills.js

@@ -0,0 +1,106 @@
+'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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var PillGroup = require('./PillGroup.js');
+var LabeledDropdownSinglePill = require('./LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js');
+var LabeledDropdownMultiPill = require('./LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js');
+var LabeledDropdownCascadeMenuPill = require('./LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["label", "value", "type", "onFocusNextGroup", "onFocusPreviousGroup", "onFocusGroupSet", "maxWidth", "minWidth", "fixed"];
+
+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 DropdownPills = {
+  single: LabeledDropdownSinglePill,
+  multi: LabeledDropdownMultiPill,
+  cascaded: LabeledDropdownCascadeMenuPill
+};
+
+const createDropdownPill = type => DropdownPills[type] || DropdownPills.single;
+
+function LabeledDropdownPills(_ref) {
+  let {
+    label = '',
+    value,
+    type,
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    maxWidth,
+    minWidth,
+    fixed
+  } = _ref,
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const Component = createDropdownPill(type);
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, menuProps), {}, {
+    label: label,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    value: value,
+    fixed: fixed
+  })));
+}
+
+const props = {
+  /** pill type */
+  type: reactDesc.PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),
+
+  /** focus next group callback */
+  onFocusNextGroup: reactDesc.PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: reactDesc.PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: reactDesc.PropTypes.func.description('focus group set callback'),
+
+  /** pill max width */
+  maxWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill max width'),
+
+  /** pill min width */
+  minWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill min width'),
+
+  /** fixed pill */
+  fixed: reactDesc.PropTypes.bool.description('fixed pill'),
+
+  /** pill label text */
+  label: reactDesc.PropTypes.string.isRequired.description('pill label text'),
+
+  /** pill value */
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    id: reactDesc.PropTypes.string,
+    label: reactDesc.PropTypes.string
+  })), reactDesc.PropTypes.shape({
+    id: reactDesc.PropTypes.string,
+    label: reactDesc.PropTypes.string
+  })]).description('pill value')
+};
+const DSLabeledDropdownPillsWithSchema = reactDesc.describe(LabeledDropdownPills);
+DSLabeledDropdownPillsWithSchema.propTypes = props;
+
+exports.DSLabeledDropdownPillsWithSchema = DSLabeledDropdownPillsWithSchema;
+exports.LabeledDropdownPills = LabeledDropdownPills;

package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+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 dsUtilities = require('@elliemae/ds-utilities');
+var PillGroup = require('../PillGroup.js');
+var RemovablePill = require('../RemovablePill.js');
+var DropdownPill = require('../DropdownPill.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+const _excluded = ["label", "options", "value", "onChange", "onRemove", "value", "placeholder", "onFocusNextGroup", "onFocusPreviousGroup", "onFocusGroupSet", "maxWidth", "minWidth"];
+
+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; }
+
+function renderMenuItems(options, factory) {
+  return options.map((option, index) => {
+    const ItemComponent = factory('radio');
+
+    if (option.type === 'submenu') {
+      const SubmenuComponent = factory('submenu');
+      const ChildComponent = factory('selection-group');
+      return /*#__PURE__*/React.createElement(SubmenuComponent, _objectSpread(_objectSpread({}, option), {}, {
+        key: option.id,
+        item: option
+      }), /*#__PURE__*/jsxRuntime.jsx(ChildComponent, _objectSpread(_objectSpread({}, option), {}, {
+        id: option.id,
+        item: option,
+        items: option.items,
+        itemValueAccessor: item => item,
+        multi: true
+      })));
+    }
+
+    return /*#__PURE__*/React.createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
+      key: option.id || index,
+      item: option
+    }));
+  });
+}
+
+const getSubmenuOptionLabelById = (options, id) => {
+  const index = options.findIndex(option => option.id === id);
+  return index ? options[index].label : '';
+};
+
+function LabeledDropdownCascadeMenuPill(_ref) {
+  let {
+    label,
+    options,
+    value: optionValue,
+    onChange,
+    onRemove,
+    value: selection = {},
+    placeholder = '---',
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    maxWidth,
+    minWidth
+  } = _ref,
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const selectionId = Object.keys(selection)[0];
+  const selectionValues = selection[selectionId] || '';
+  const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
+
+  const handleSelectChange = _ref2 => {
+    let {
+      item,
+      group
+    } = _ref2;
+
+    if (dsUtilities.isFunction(onChange)) {
+      const nextSelection = group ? {
+        [group.id]: dsUtilities.addOrRemove([...(selection[group.id] || [])], item, o => o.id)
+      } : {
+        [item.id]: item.label
+      };
+      onChange(nextSelection);
+    }
+  };
+
+  const removeOption = option => {
+    if (dsUtilities.isFunction(onChange)) {
+      const nextSelection = {
+        [selectionId]: selectionValues.filter(val => option.id !== val.id)
+      };
+      onChange(nextSelection);
+    }
+
+    onRemove(option);
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(DropdownPill.DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
+    itemsRenderer: renderMenuItems,
+    label: dropdownLabel || placeholder,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    onSelectChange: handleSelectChange,
+    options: options,
+    selection: {
+      [selectionId]: Array.isArray(selectionValues) ? selectionValues.map(v => v.id) : selectionValues
+    },
+    singleGroupSelection: true,
+    variant: "title"
+  })), Array.isArray(selectionValues) && selectionValues.map(option => /*#__PURE__*/_jsx__default["default"](RemovablePill.RemovablePill, {
+    label: option.label,
+    onRemove: () => removeOption(option)
+  }, option.id)));
+}
+
+module.exports = LabeledDropdownCascadeMenuPill;

package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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.map.js');
+require('core-js/modules/esnext.iterator.map.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 dsUtilities = require('@elliemae/ds-utilities');
+var RemovablePill = require('../RemovablePill.js');
+var Pill = require('../Pill.js');
+var OverflowPill = require('../OverflowPill.js');
+var DropdownPill = require('../DropdownPill.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["label", "options", "value", "onSelect", "onRemove", "onChange", "maxWidth", "minWidth"];
+
+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; }
+function LabeledDropdownMultiPills(_ref) {
+  let {
+    label,
+    options = [],
+    value = [],
+    onSelect = () => null,
+    onRemove = () => null,
+    onChange,
+    // if this is defined, then it's calculating the next result onSelect or onRemove
+    maxWidth,
+    minWidth
+  } = _ref,
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [totalDefaultOptions, setTotalDefaultOptions] = React.useState(0);
+  const [selectedOptions, setSelectedOptions] = React.useState(value);
+  const [allOptions, setAllOptions] = React.useState(options);
+  const [overflowOptions, setOverflowOptions] = React.useState([]);
+  const overflowQuantity = 3;
+  React.useEffect(() => setSelectedOptions(value), [value]);
+  React.useEffect(() => {
+    const newOptions = allOptions.filter(option => option.fixedItem);
+
+    if (newOptions.length > 0) {
+      setSelectedOptions(newOptions);
+    }
+
+    setTotalDefaultOptions(newOptions.length);
+  }, []);
+  React.useEffect(() => {
+    if (totalDefaultOptions) {
+      const newOptions = allOptions.map(opt => {
+        if (selectedOptions.length <= totalDefaultOptions && lodash.find(selectedOptions, {
+          id: opt.id
+        })) {
+          return _objectSpread(_objectSpread({}, opt), {}, {
+            fixedItem: true
+          });
+        }
+
+        return _objectSpread(_objectSpread({}, opt), {}, {
+          fixedItem: false
+        });
+      });
+      setAllOptions(newOptions);
+    }
+  }, [onSelect, onRemove, selectedOptions]);
+  React.useEffect(() => {
+    if (selectedOptions.length > overflowQuantity) {
+      const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);
+      setOverflowOptions(overflow);
+    }
+  }, [selectedOptions]);
+  const selectOption = React.useCallback(option => {
+    if (!option.fixedItem) {
+      if (dsUtilities.isFunction(onChange)) {
+        const nextValue = dsUtilities.addOrRemove(selectedOptions, option, item => item.id);
+        setSelectedOptions(nextValue);
+        onChange(nextValue);
+      }
+
+      onSelect(option);
+    }
+  }, [selectedOptions]);
+  const removeOption = React.useCallback(option => {
+    if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
+      if (dsUtilities.isFunction(onChange)) {
+        const nextValue = selectedOptions.filter(val => option.id !== val.id);
+        setSelectedOptions(nextValue);
+        onChange(nextValue);
+      }
+
+      onRemove(option);
+    }
+  }, [selectedOptions]);
+
+  const typeOfPill = () => {
+    if (selectedOptions.length > totalDefaultOptions) {
+      return RemovablePill.RemovablePill;
+    }
+
+    return Pill.Pill;
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DropdownPill.DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
+      focusOnOpen: false,
+      label: label,
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      onSelectMenuItem: selectOption,
+      options: [_objectSpread(_objectSpread({}, menuProps), {}, {
+        type: 'SelectionGroup',
+        id: 'multi-selection-views',
+        multi: true,
+        items: allOptions
+      })],
+      selection: {
+        'multi-selection-views': selectedOptions ? selectedOptions.map(o => o.id) : ''
+      },
+      variant: "title"
+    })), selectedOptions && selectedOptions.map((option, index) => {
+      const TypeOfPill = typeOfPill();
+
+      if (index < overflowQuantity) {
+        return /*#__PURE__*/_jsx__default["default"](TypeOfPill, {
+          label: option.label,
+          onRemove: () => removeOption(option)
+        }, option.id);
+      }
+
+      return null;
+    }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx__default["default"](OverflowPill.OverflowPill, {
+      label: "+ ".concat(selectedOptions.length - overflowQuantity),
+      options: overflowOptions
+    })]
+  });
+}
+
+module.exports = LabeledDropdownMultiPills;