@elliemae/ds-pills 2.0.0-alpha.1 → 2.0.0-alpha.10

package/cjs/{InputPill.js → deprecated/InputPill.js}

@@ -6,7 +6,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
 var dsClassnames = require('@elliemae/ds-classnames');
 var DSInputMask = require('@elliemae/ds-form/InputMask');
 var DSInput = require('@elliemae/ds-form/Input');
@@ -18,7 +18,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
 var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
 
@@ -26,7 +26,7 @@ const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "val
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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, ({
   value
 }) => ({
@@ -41,22 +41,22 @@ function InputPill(_ref) {
     value,
     type
   } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  let TypeOfInput = DSInput__default['default']; // TODO: implement the DSTimeInput, see how because it returns a moment()
+  let TypeOfInput = DSInput__default["default"]; // TODO: implement the DSTimeInput, see how because it returns a moment()
   // TODO: implement the DSDateInput
 
   switch (type) {
     case 'inputText':
-      TypeOfInput = DSInput__default['default'];
+      TypeOfInput = DSInput__default["default"];
       break;
 
     case 'inputMask':
-      TypeOfInput = DSInputMask__default['default'];
+      TypeOfInput = DSInputMask__default["default"];
       break;
   }
 
-  return /*#__PURE__*/_jsx__default['default'](StyledInputPill, {
+  return /*#__PURE__*/_jsx__default["default"](StyledInputPill, {
     className: "input-pill",
     classProps: {
       value
@@ -68,7 +68,7 @@ function InputPill(_ref) {
       placeholder: placeholder,
       value: value
     }, otherProps)),
-    rightAddon: value && /*#__PURE__*/_jsx__default['default'](CloseXsmall__default['default'], {
+    rightAddon: value && /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
       className: "remove-pill-button",
       "data-testid": "remove-pill-button",
       onClick: onRemove

package/cjs/{LabeledDropdownPills.js → deprecated/LabeledDropdownPills.js}

@@ -23,7 +23,7 @@ const _excluded = ["label", "value", "type", "onFocusNextGroup", "onFocusPreviou
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const DropdownPills = {
   single: LabeledDropdownSinglePill,
   multi: LabeledDropdownMultiPill,
@@ -44,10 +44,10 @@ function LabeledDropdownPills(_ref) {
     minWidth,
     fixed
   } = _ref,
-      menuProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const Component = createDropdownPill(type);
-  return /*#__PURE__*/_jsx__default['default'](PillGroup.PillGroup, {
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,
     onFocusPreviousGroup: onFocusPreviousGroup

package/cjs/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/LabeledDropdownCascadeMenuPill.js

@@ -3,7 +3,7 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var react = require('react');
+var React = require('react');
 var utils = require('@elliemae/ds-utilities/utils');
 var PillGroup = require('../PillGroup.js');
 var RemovablePill = require('../RemovablePill.js');
@@ -20,7 +20,7 @@ const _excluded = ["label", "options", "value", "onChange", "onRemove", "value",
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) => {
@@ -29,7 +29,7 @@ function renderMenuItems(options, factory) {
     if (option.type === 'submenu') {
       const SubmenuComponent = factory('submenu');
       const ChildComponent = factory('selection-group');
-      return /*#__PURE__*/react.createElement(SubmenuComponent, _objectSpread(_objectSpread({}, option), {}, {
+      return /*#__PURE__*/React.createElement(SubmenuComponent, _objectSpread(_objectSpread({}, option), {}, {
         key: option.id,
         item: option
       }), /*#__PURE__*/jsxRuntime.jsx(ChildComponent, _objectSpread(_objectSpread({}, option), {}, {
@@ -41,7 +41,7 @@ function renderMenuItems(options, factory) {
       })));
     }
 
-    return /*#__PURE__*/react.createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
+    return /*#__PURE__*/React.createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
       key: option.id || index,
       item: option
     }));
@@ -68,7 +68,7 @@ function LabeledDropdownCascadeMenuPill(_ref) {
     maxWidth,
     minWidth
   } = _ref,
-      menuProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const selectionId = Object.keys(selection)[0];
   const selectionValues = selection[selectionId] || '';
@@ -99,7 +99,7 @@ function LabeledDropdownCascadeMenuPill(_ref) {
     onRemove(option);
   };
 
-  return /*#__PURE__*/_jsx__default['default'](PillGroup.PillGroup, {
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,
     onFocusPreviousGroup: onFocusPreviousGroup
@@ -115,7 +115,7 @@ function LabeledDropdownCascadeMenuPill(_ref) {
     },
     singleGroupSelection: true,
     variant: "title"
-  })), Array.isArray(selectionValues) && selectionValues.map(option => /*#__PURE__*/_jsx__default['default'](RemovablePill.RemovablePill, {
+  })), Array.isArray(selectionValues) && selectionValues.map(option => /*#__PURE__*/_jsx__default["default"](RemovablePill.RemovablePill, {
     label: option.label,
     onRemove: () => removeOption(option)
   }, option.id)));

package/cjs/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/LabeledDropdownMultiPill.js

@@ -3,7 +3,7 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
+var React = require('react');
 var lodash = require('lodash');
 var utils = require('@elliemae/ds-utilities/utils');
 var RemovablePill = require('../RemovablePill.js');
@@ -22,7 +22,7 @@ const _excluded = ["label", "options", "value", "onSelect", "onRemove", "onChang
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function LabeledDropdownMultiPills(_ref) {
   let {
     label,
@@ -35,15 +35,15 @@ function LabeledDropdownMultiPills(_ref) {
     maxWidth,
     minWidth
   } = _ref,
-      menuProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      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 [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(() => {
+  React.useEffect(() => setSelectedOptions(value), [value]);
+  React.useEffect(() => {
     const newOptions = allOptions.filter(option => option.fixedItem);
 
     if (newOptions.length > 0) {
@@ -52,7 +52,7 @@ function LabeledDropdownMultiPills(_ref) {
 
     setTotalDefaultOptions(newOptions.length);
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (totalDefaultOptions) {
       const newOptions = allOptions.map(opt => {
         if (selectedOptions.length <= totalDefaultOptions && lodash.find(selectedOptions, {
@@ -70,13 +70,13 @@ function LabeledDropdownMultiPills(_ref) {
       setAllOptions(newOptions);
     }
   }, [onSelect, onRemove, selectedOptions]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (selectedOptions.length > overflowQuantity) {
       const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);
       setOverflowOptions(overflow);
     }
   }, [selectedOptions]);
-  const selectOption = react.useCallback(option => {
+  const selectOption = React.useCallback(option => {
     if (!option.fixedItem) {
       if (utils.isFunction(onChange)) {
         const nextValue = utils.addOrRemove(selectedOptions, option, item => item.id);
@@ -87,7 +87,7 @@ function LabeledDropdownMultiPills(_ref) {
       onSelect(option);
     }
   }, [selectedOptions]);
-  const removeOption = react.useCallback(option => {
+  const removeOption = React.useCallback(option => {
     if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
       if (utils.isFunction(onChange)) {
         const nextValue = selectedOptions.filter(val => option.id !== val.id);
@@ -128,14 +128,14 @@ function LabeledDropdownMultiPills(_ref) {
       const TypeOfPill = typeOfPill();
 
       if (index < overflowQuantity) {
-        return /*#__PURE__*/_jsx__default['default'](TypeOfPill, {
+        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, {
+    }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx__default["default"](OverflowPill.OverflowPill, {
       label: `+ ${selectedOptions.length - overflowQuantity}`,
       options: overflowOptions
     })]

package/cjs/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/LabeledDropdownSinglePill.js

@@ -3,7 +3,7 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
+var React = require('react');
 var usePrevious = require('@elliemae/ds-utilities/hooks/usePrevious');
 var useShouldRecalculate = require('@elliemae/ds-utilities/hooks/useShouldRecalculate');
 var utils$1 = require('@elliemae/ds-utilities/utils');
@@ -29,7 +29,7 @@ const _excluded = ["label", "labelIsValue", "options", "value", "onSelect", "onC
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function LabeledDropdownSinglePill(_ref) {
   let {
     label,
@@ -42,13 +42,13 @@ function LabeledDropdownSinglePill(_ref) {
     minWidth,
     fixed = false
   } = _ref,
-      menuProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  const [optionValue, setOptionValue] = react.useState(value);
-  const prevOptions = usePrevious__default['default'](options);
-  const areOptionsEqual = useShouldRecalculate__default['default'](utils.hasOptionChanged(prevOptions, options));
-  react.useEffect(() => setOptionValue(value), [value]);
-  react.useEffect(() => {
+  const [optionValue, setOptionValue] = React.useState(value);
+  const prevOptions = usePrevious__default["default"](options);
+  const areOptionsEqual = useShouldRecalculate__default["default"](utils.hasOptionChanged(prevOptions, options));
+  React.useEffect(() => setOptionValue(value), [value]);
+  React.useEffect(() => {
     const selectedValue = options.find(option => option.selected);
 
     if (selectedValue) {
@@ -57,13 +57,13 @@ function LabeledDropdownSinglePill(_ref) {
       setOptionValue(options[0]);
     }
   }, [areOptionsEqual]);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (optionValue) {
       const selectedValue = options.find(option => option.id === optionValue.id);
       setOptionValue(selectedValue);
     }
   }, [options]);
-  const selectOption = react.useCallback(option => {
+  const selectOption = React.useCallback(option => {
     if (utils$1.isFunction(onChange)) {
       onChange(option);
     }
@@ -71,7 +71,7 @@ function LabeledDropdownSinglePill(_ref) {
     setOptionValue(option);
     onSelect(option);
   }, [onChange, onSelect]);
-  const onChangeInputValue = react.useCallback(({
+  const onChangeInputValue = React.useCallback(({
     target: {
       value: inputValue
     }
@@ -104,7 +104,7 @@ function LabeledDropdownSinglePill(_ref) {
       input,
       onChangeInput
     } = option,
-          otherProps = _objectWithoutProperties__default['default'](option, _excluded2);
+          otherProps = _objectWithoutProperties__default["default"](option, _excluded2);
 
     let SelectedPill;
 
@@ -127,7 +127,7 @@ function LabeledDropdownSinglePill(_ref) {
   const renderSelection = () => {
     if (!labelIsValue) {
       if (optionValue) return renderPill(optionValue, fixed);
-      return _Pill || (_Pill = /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+      return _Pill || (_Pill = /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
         label: "-"
       }));
     }

package/cjs/{LabeledPills.js → deprecated/LabeledPills.js}

@@ -21,11 +21,11 @@ function LabeledPills({
   onFocusNextGroup,
   onFocusPreviousGroup
 }) {
-  return /*#__PURE__*/_jsx__default['default'](PillGroup.PillGroup, {
+  return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,
     onFocusPreviousGroup: onFocusPreviousGroup
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
     label: label,
     leftAddon: leftAddon,
     variant: "title",

package/cjs/{OverflowPill.js → deprecated/OverflowPill.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
 var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
 var DSTooltip = require('@elliemae/ds-tooltip');
@@ -20,10 +20,10 @@ function OverflowPill({
   label = '',
   options = []
 }) {
-  const ref = react.useRef(null);
-  const [tooltipIsOpen, setTooltipIsOpen] = react.useState(false);
-  const [tooltipText, setTooltipText] = react.useState('');
-  react.useEffect(() => {
+  const ref = React.useRef(null);
+  const [tooltipIsOpen, setTooltipIsOpen] = React.useState(false);
+  const [tooltipText, setTooltipText] = React.useState('');
+  React.useEffect(() => {
     let text = '';
     options.forEach(option => {
       if (!tooltipText || option === options[0]) {
@@ -34,12 +34,12 @@ function OverflowPill({
     });
     setTooltipText(text);
   }, [options]);
-  useFocusGroupItem__default['default'](ref);
-  return /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
+  useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
     isOpen: tooltipIsOpen,
     title: tooltipText,
     zIndex: 11,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
       className: "overflow-pill",
       containerProps: containerProps,
       innerRef: ref,

package/cjs/{Pill.js → deprecated/Pill.js}

@@ -20,7 +20,7 @@ const _excluded = ["containerProps", "label", "leftAddon", "rightAddon", "varian
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillBlockName = 'pill';
 const PillWrapper = dsClassnames.aggregatedClasses('div')(pillBlockName, null, ({
   size,
@@ -41,7 +41,7 @@ function Pill(_ref) {
     variant = 'value',
     size = 'm'
   } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
     classProps: {
@@ -49,7 +49,7 @@ function Pill(_ref) {
       size
     }
   }, otherProps), {}, {
-    children: [leftAddon && /*#__PURE__*/_jsx__default['default'](PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default['default'](PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx__default['default'](PillAddon, {}, void 0, rightAddon)]
+    children: [leftAddon && /*#__PURE__*/_jsx__default["default"](PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx__default["default"](PillAddon, {}, void 0, rightAddon)]
   }));
 }
 
@@ -77,4 +77,4 @@ DSPillWithSchema.propTypes = props;
 
 exports.DSPillWithSchema = DSPillWithSchema;
 exports.Pill = Pill;
-exports['default'] = Pill;
+exports["default"] = Pill;

package/cjs/{PillGroup.js → deprecated/PillGroup.js}

@@ -18,7 +18,7 @@ var FocusGroupProvider__default = /*#__PURE__*/_interopDefaultLegacy(FocusGroupP
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillGroupBlockName = 'pill-group';
 const Container = dsClassnames.aggregatedClasses('div')(pillGroupBlockName);
 
@@ -28,7 +28,7 @@ const PillGroup = ({
   onFocusPreviousGroup,
   onFocusGroupSet,
   children
-}) => /*#__PURE__*/_jsx__default['default'](FocusGroupProvider__default['default'], {
+}) => /*#__PURE__*/_jsx__default["default"](FocusGroupProvider__default["default"], {
   keyBindings: {
     Tab: 'next'
   },

package/cjs/{ReadOnlyPill.js → deprecated/ReadOnlyPill.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
 var InfoCircleSmall = require('@elliemae/ds-icons/InfoCircleSmall');
 var DSModal = require('@elliemae/ds-modal');
@@ -26,30 +26,30 @@ const ReadOnlyPill = ({
   modalTitle = '',
   tooltipText = ''
 }) => {
-  const ref = react.useRef(null);
-  const [isModalOpen, setIsModalOpen] = react.useState(false);
-  const [isTooltipOpen, setIsTooltipOpen] = react.useState(false);
+  const ref = React.useRef(null);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
 
   const toggle = () => {
     setIsModalOpen(!isModalOpen);
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+    children: [/*#__PURE__*/_jsx__default["default"](Pill.Pill, {
       "data-testid": "read-only-pill",
       className: "removable-pill",
       containerProps: containerProps,
       innerRef: ref,
       label: label,
       leftAddon: leftAddon,
-      rightAddon: /*#__PURE__*/_jsx__default['default'](Popover__default['default'], {
+      rightAddon: /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
         isOpen: tooltipText && isTooltipOpen,
         content: tooltipText,
         placement: "top",
         showArrow: true,
         renderTrigger: ({
           ref
-        }) => /*#__PURE__*/_jsx__default['default'](InfoCircleSmall__default['default'], {
+        }) => /*#__PURE__*/_jsx__default["default"](InfoCircleSmall__default["default"], {
           role: "button",
           "data-testid": "read-only-info-btn",
           className: "remove-pill-button",
@@ -61,7 +61,7 @@ const ReadOnlyPill = ({
         })
       }),
       tabIndex: -1
-    }), /*#__PURE__*/_jsx__default['default'](DSModal__default['default'], {
+    }), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
       isOpen: isModalOpen,
       showClose: true,
       shouldCloseOnOverlayClick: true,

package/cjs/{RemovablePill.js → deprecated/RemovablePill.js}

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
 var utils = require('@elliemae/ds-utilities/utils');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
 var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
 var Pill = require('./Pill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
 
 function RemovablePill({
@@ -23,11 +23,11 @@ function RemovablePill({
   size = 'm',
   leftAddon
 }) {
-  const ref = react.useRef(null);
+  const ref = React.useRef(null);
   const {
     focusPrevious
-  } = useFocusGroupItem__default['default'](ref);
-  return /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+  } = useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
     className: "removable-pill",
     "data-testid": "removable-pill",
     containerProps: containerProps,
@@ -41,7 +41,7 @@ function RemovablePill({
         if (utils.isFunction(focusPrevious)) focusPrevious();
       }
     },
-    rightAddon: /*#__PURE__*/_jsx__default['default'](CloseXsmall__default['default'], {
+    rightAddon: /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
       role: "button",
       "data-testid": "remove-pill-button",
       className: "remove-pill-button",

package/cjs/deprecated/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Pill = require('./Pill.js');
+var PillGroup = require('./PillGroup.js');
+var LabeledDropdownPills = require('./LabeledDropdownPills.js');
+var LabeledPills = require('./LabeledPills.js');
+var DropdownPill = require('./DropdownPill.js');
+var RemovablePill = require('./RemovablePill.js');
+var ReadOnlyPill = require('./ReadOnlyPill.js');
+var OverflowPill = require('./OverflowPill.js');
+
+
+
+exports.DSPillWithSchema = Pill.DSPillWithSchema;
+exports.Pill = Pill.Pill;
+exports.Container = PillGroup.Container;
+exports.DSPillGroupWithSchema = PillGroup.DSPillGroupWithSchema;
+exports.PillGroup = PillGroup.PillGroup;
+exports.DSLabeledDropdownPillsWithSchema = LabeledDropdownPills.DSLabeledDropdownPillsWithSchema;
+exports.LabeledDropdownPills = LabeledDropdownPills.LabeledDropdownPills;
+exports.DSLabeledPillsWithSchema = LabeledPills.DSLabeledPillsWithSchema;
+exports.LabeledPills = LabeledPills.LabeledPills;
+exports.DSDropdownPillWithSchema = DropdownPill.DSDropdownPillWithSchema;
+exports.DropdownPill = DropdownPill.DropdownPill;
+exports.DSRemovablePillWithSchema = RemovablePill.DSRemovablePillWithSchema;
+exports.RemovablePill = RemovablePill.RemovablePill;
+exports.DSReadOnlyPillWithSchema = ReadOnlyPill.DSReadOnlyPillWithSchema;
+exports.ReadOnlyPill = ReadOnlyPill.ReadOnlyPill;
+exports.DSOverflowPillWithSchema = OverflowPill.DSOverflowPillWithSchema;
+exports.OverflowPill = OverflowPill.OverflowPill;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -2,20 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Pill = require('./Pill.js');
-var PillGroup = require('./PillGroup.js');
-var LabeledDropdownPills = require('./LabeledDropdownPills.js');
-var LabeledPills = require('./LabeledPills.js');
-var DropdownPill = require('./DropdownPill.js');
-var RemovablePill = require('./RemovablePill.js');
-var ReadOnlyPill = require('./ReadOnlyPill.js');
-var OverflowPill = require('./OverflowPill.js');
+var Pill = require('./deprecated/Pill.js');
+var PillGroup = require('./deprecated/PillGroup.js');
+var LabeledDropdownPills = require('./deprecated/LabeledDropdownPills.js');
+var LabeledPills = require('./deprecated/LabeledPills.js');
+var DropdownPill = require('./deprecated/DropdownPill.js');
+var RemovablePill = require('./deprecated/RemovablePill.js');
+var ReadOnlyPill = require('./deprecated/ReadOnlyPill.js');
+var OverflowPill = require('./deprecated/OverflowPill.js');
+var Pill$1 = require('./components/Pill.js');
+var PillGroup$1 = require('./components/PillGroup.js');
+var PillButton = require('./components/PillButton.js');
 
 
 
 exports.DSPillWithSchema = Pill.DSPillWithSchema;
 exports.Pill = Pill.Pill;
-exports.default = Pill.Pill;
+exports["default"] = Pill.Pill;
 exports.Container = PillGroup.Container;
 exports.DSPillGroupWithSchema = PillGroup.DSPillGroupWithSchema;
 exports.PillGroup = PillGroup.PillGroup;
@@ -31,3 +34,10 @@ exports.DSReadOnlyPillWithSchema = ReadOnlyPill.DSReadOnlyPillWithSchema;
 exports.ReadOnlyPill = ReadOnlyPill.ReadOnlyPill;
 exports.DSOverflowPillWithSchema = OverflowPill.DSOverflowPillWithSchema;
 exports.OverflowPill = OverflowPill.OverflowPill;
+exports.DSPillV2 = Pill$1.DSPillV2;
+exports.DSPillV2WithSchema = Pill$1.DSPillV2WithSchema;
+exports.DSPillGroupV2 = PillGroup$1.DSPillGroupV2;
+exports.DSPillGroupV2Context = PillGroup$1.DSPillGroupV2Context;
+exports.DSPillGroupV2WithSchema = PillGroup$1.DSPillGroupV2WithSchema;
+exports.DSPillButton = PillButton.DSPillButton;
+exports.DSPillButtonWithSchema = PillButton.DSPillButtonWithSchema;