@elliemae/ds-pills 2.0.0-alpha.5 → 2.0.0-alpha.9

package/cjs/components/types/ValuePill.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 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 }; }
@@ -12,17 +13,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ValuePill = /*#__PURE__*/React__default['default'].memo(({
+const ValuePill = /*#__PURE__*/React__default["default"].memo(({
   label,
-  tooltipValue
-}) => /*#__PURE__*/_jsx__default['default'](styled.StyledValuePillWrapper, {
+  tooltipValue,
+  iconLeft,
+  ariaLabel
+}) => /*#__PURE__*/_jsx__default["default"](styled.StyledValuePillWrapper, {
   alignItems: "center",
-  className: "ds-pill-wrapper",
+  className: "ds-pill-wrapper ds-pill-wrapper-value",
   "data-testid": "ds-pill-wrapper",
-  "aria-label": label
-}, void 0, tooltipValue !== '' ? /*#__PURE__*/_jsx__default['default'](DSTooltip.DSTooltipV2, {
-  title: tooltipValue,
-  triggerComponent: label
-}) : label));
+  "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.DSTooltipV3, {
+  text: tooltipValue,
+  startPlacementPreference: "bottom"
+}, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSpanWithTooltip, {
+  className: "ds-pill-tooltip-value",
+  tabIndex: 0
+}, void 0, label)) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  value: label
+})));
 
 exports.ValuePill = ValuePill;

package/cjs/deprecated/DropdownPill.js

@@ -28,7 +28,7 @@ const _excluded = ["containerProps", "label", "variant", "tabIndex", "closeMenuO
 
 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 DropdownPill(_ref) {
   let {
@@ -40,14 +40,14 @@ function DropdownPill(_ref) {
     maxWidth,
     minWidth
   } = _ref,
-      dropdownProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      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), {}, {
+  } = useFocusGroupItem__default["default"](ref);
+  return /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default["default"], _objectSpread(_objectSpread({}, dropdownProps), {}, {
     closeMenuOnItemSelection: closeMenuOnItemSelection,
     maxWidth: maxWidth,
     hideIfNotVisible: true,
@@ -58,7 +58,7 @@ function DropdownPill(_ref) {
     minWidth: minWidth,
     onClose: focusFirst,
     referenceNode: chevronEl,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](Pill.Pill, {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](Pill.Pill, {
       "data-testid": "dropdown-pill",
       className: "dropdown-pill",
       containerProps: _objectSpread({
@@ -68,7 +68,7 @@ function DropdownPill(_ref) {
       label: label,
       rightAddon: /*#__PURE__*/jsxRuntime.jsx("div", {
         ref: chevronRef,
-        children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx__default['default'](ChevronDown__default['default'], {
+        children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx__default["default"](ChevronDown__default["default"], {
           className: "dropdown-pill-chevron-down",
           "data-testid": "dropdown-pill-button"
         }))

package/cjs/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/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/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.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) => {
@@ -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/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.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,7 +35,7 @@ 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);
@@ -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/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -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,11 +42,11 @@ 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));
+  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);
@@ -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/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/deprecated/OverflowPill.js

@@ -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/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/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/deprecated/ReadOnlyPill.js

@@ -35,21 +35,21 @@ const ReadOnlyPill = ({
   };
 
   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/deprecated/RemovablePill.js

@@ -6,14 +6,14 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 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({
@@ -26,8 +26,8 @@ function RemovablePill({
   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/index.js

@@ -12,12 +12,13 @@ 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;
@@ -38,3 +39,5 @@ 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;

package/cjs/props.js

@@ -10,11 +10,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-const pillTypes = reactDesc.PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable']);
+const pillTypes = reactDesc.PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
 const DSPillV2PropTypes = {
   label: reactDesc.PropTypes.string.description('Label to show in the pill').isRequired,
   type: pillTypes.description('The type of pill that you want to render').isRequired,
   innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)').defaultValue(() => null),
+  ariaLabel: reactDesc.PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
+  tooltipValue: reactDesc.PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),
   iconLeft: reactDesc.PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),
   iconRight: reactDesc.PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),
   onRemove: reactDesc.PropTypes.func.description('Callback triggered when removing a pill with the close icon').defaultValue(() => null),
@@ -24,8 +26,14 @@ const DSPillV2PropTypes = {
   inputWidth: reactDesc.PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
   dropdownProps: reactDesc.PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({})
 };
+const DSPillButtonPropTypes = {
+  type: reactDesc.PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
+  width: reactDesc.PropTypes.string.description('Width of the button').defaultValue('100%'),
+  height: reactDesc.PropTypes.string.description('Height of the button').defaultValue('100%')
+};
 const DSPillV2DefaultProps = {
   innerRef: () => null,
+  ariaLabel: '',
   tooltipValue: '',
   iconLeft: null,
   iconRight: null,
@@ -33,10 +41,17 @@ const DSPillV2DefaultProps = {
   inputPlaceholder: '',
   onInputChange: () => null,
   onInputClear: () => null,
-  inputWidth: 150,
-  inputRender: DSInput__default['default'],
+  inputWidth: 72,
+  inputRender: DSInput__default["default"],
   dropdownProps: {}
 };
+const DSPillButtonDefaultProps = {
+  type: 'right',
+  width: '100%',
+  height: '100%'
+};
 
+exports.DSPillButtonDefaultProps = DSPillButtonDefaultProps;
+exports.DSPillButtonPropTypes = DSPillButtonPropTypes;
 exports.DSPillV2DefaultProps = DSPillV2DefaultProps;
 exports.DSPillV2PropTypes = DSPillV2PropTypes;

package/esm/components/Pill.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { DSPillV2PropTypes, DSPillV2DefaultProps } from '../props.js';
 import { DropdownPill } from './types/DropdownPill.js';
 import { InputPill } from './types/InputPill.js';
@@ -23,9 +24,8 @@ const pillComponentGetter = {
 };
 
 const DSPillV2 = props => {
-  // TODO -- investigate why showcase story doesn't work with useMemoMerge
-  const propsWithDefaults = _objectSpread(_objectSpread({}, DSPillV2DefaultProps), props);
-
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());
   const {
     type
   } = propsWithDefaults;

package/esm/components/PillButton.js

@@ -0,0 +1,41 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { StyledPillButton } from './styled.js';
+import { DSPillButtonPropTypes, DSPillButtonDefaultProps } from '../props.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["type", "children"];
+
+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(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 typeToClassName = {
+  only: 'ds-pill-button-only',
+  left: 'ds-pill-button-left',
+  right: 'ds-pill-button-right'
+};
+
+const DSPillButton = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonWithSchema.toTypescript());
+
+  const {
+    type,
+    children
+  } = propsWithDefaults,
+        rest = _objectWithoutProperties(propsWithDefaults, _excluded);
+
+  return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
+    buttonType: "raw",
+    className: `${typeToClassName[type]} ${rest.className}`,
+    children: children
+  }));
+};
+
+const DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');
+DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
+
+export { DSPillButton, DSPillButtonWithSchema };

package/esm/components/index.js

@@ -1,2 +1,3 @@
 export { DSPillV2, DSPillV2WithSchema } from './Pill.js';
 export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './PillGroup.js';
+export { DSPillButton, DSPillButtonWithSchema } from './PillButton.js';