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

package/cjs/props.js

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
-var DSInput = require('@elliemae/ds-form/Input');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
+var dsForm = require('@elliemae/ds-form');
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 const pillTypes = reactDesc.PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
@@ -15,7 +11,9 @@ 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),
+  size: reactDesc.PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),
   ariaLabel: reactDesc.PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
+  labelTruncated: reactDesc.PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),
   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),
@@ -24,16 +22,23 @@ const DSPillV2PropTypes = {
   onInputChange: reactDesc.PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
   onInputClear: reactDesc.PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
   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({})
+  dropdownProps: reactDesc.PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
+  onDropdownClick: reactDesc.PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
 };
 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 DSPillGroupPropTypes = {
+  width: reactDesc.PropTypes.string.description('Width of the group').defaultValue('fit-content'),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Reference to the pill group wrapper').defaultValue(() => null)
+};
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   ariaLabel: '',
+  size: 'm',
+  labelTruncated: true,
   tooltipValue: '',
   iconLeft: null,
   iconRight: null,
@@ -42,16 +47,23 @@ const DSPillV2DefaultProps = {
   onInputChange: () => null,
   onInputClear: () => null,
   inputWidth: 72,
-  inputRender: DSInput__default["default"],
-  dropdownProps: {}
+  inputRender: dsForm.DSInput,
+  dropdownProps: {},
+  onDropdownClick: () => null
 };
 const DSPillButtonDefaultProps = {
   type: 'right',
   width: '100%',
   height: '100%'
 };
+const DSPillGroupDefaultProps = {
+  width: 'fit-content',
+  innerRef: () => null
+};
 
 exports.DSPillButtonDefaultProps = DSPillButtonDefaultProps;
 exports.DSPillButtonPropTypes = DSPillButtonPropTypes;
+exports.DSPillGroupDefaultProps = DSPillGroupDefaultProps;
+exports.DSPillGroupPropTypes = DSPillGroupPropTypes;
 exports.DSPillV2DefaultProps = DSPillV2DefaultProps;
 exports.DSPillV2PropTypes = DSPillV2PropTypes;

package/cjs/utils.js

@@ -2,17 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const setMultipleRefs = (...refs) => _ref => {
-  refs.forEach(ref => {
-    if (!ref || !_ref) return;
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 
-    if (typeof ref === 'function') {
-      ref(_ref);
-      return;
-    }
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
 
-    if (ref) ref.current = _ref;
-  });
+  return _ref => {
+    refs.forEach(ref => {
+      if (!ref || !_ref) return;
+
+      if (typeof ref === 'function') {
+        ref(_ref);
+        return;
+      }
+
+      if (ref) ref.current = _ref;
+    });
+  };
 };
 
 exports.setMultipleRefs = setMultipleRefs;

package/esm/components/Pill.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { describe } from 'react-desc';
@@ -25,7 +30,7 @@ const pillComponentGetter = {
 
 const DSPillV2 = props => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);
-  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);
   const {
     type
   } = propsWithDefaults;

package/esm/components/PillButton.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
@@ -20,7 +25,7 @@ const typeToClassName = {
 
 const DSPillButton = props => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
-  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);
 
   const {
     type,
@@ -30,7 +35,7 @@ const DSPillButton = props => {
 
   return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
     buttonType: "raw",
-    className: `${typeToClassName[type]} ${rest.className}`,
+    className: "".concat(typeToClassName[type], " ").concat(rest.className),
     children: children
   }));
 };

package/esm/components/PillGroup.js

@@ -1,19 +1,30 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { createContext, useMemo, useCallback } from 'react';
 import { describe } from 'react-desc';
 import { uid } from 'uid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { DSPillGroupPropTypes, DSPillGroupDefaultProps } from '../props.js';
 import { StyledPillGroup } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const DSPillGroupV2Context = /*#__PURE__*/createContext({
   onKeyboardRemove: () => null
 });
 
-const DSPillGroupV2 = ({
-  children
-}) => {
-  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);
+const DSPillGroupV2 = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
+  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
+  const {
+    children,
+    width,
+    innerRef
+  } = propsWithDefaults;
   const onKeyboardRemove = useCallback(pillUid => {
-    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
+    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex > 0) {
@@ -26,14 +37,17 @@ const DSPillGroupV2 = ({
     value: {
       onKeyboardRemove
     }
-  }, void 0, /*#__PURE__*/_jsx(StyledPillGroup, {
+  }, void 0, /*#__PURE__*/jsx(StyledPillGroup, {
+    width: width,
     id: pillGroupUid,
     cols: React.Children.map(children, () => 'auto'),
-    gutter: "2px"
-  }, void 0, children));
+    gutter: "2px",
+    ref: innerRef,
+    children: children
+  }));
 };
 
 const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
-DSPillGroupV2WithSchema.propTypes = {};
+DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
 
 export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema };

package/esm/components/styled.js

@@ -1,14 +1,21 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import Grid from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-/* eslint-disable max-lines */
+var _templateObject, _templateObject2;
 // Common CSS
 // =============================================================================
 
-const borderOutside = (color, size = 1, zIndex = 2, borderRadius = '12px') => css([":after{content:' ';position:absolute;top:0px;left:0px;right:0px;bottom:0px;border:", "px solid ", ";border-top-left-radius:", ";border-top-right-radius:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";pointer-events:none;z-index:", ";}"], size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+const borderOutside = function (color) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ", "px solid ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    pointer-events: none;\n    z-index: ", ";\n  }\n"])), size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+};
 
-const commonPillWrapperCss = /*#__PURE__*/css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;padding:0px 12px 0 12px;border-radius:12px;font-size:13px;line-height:1;color:", ";", ";"], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
+const commonPillWrapperCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ", ";\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
 // Pills wrappers
 // =============================================================================
 
@@ -20,10 +27,13 @@ const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
 })(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
 const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-2"
-})(["", " background:", ";padding:0;", ":focus-within{", "}:active{", "}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;height:100%;background:transparent;width:", ";padding:0;margin:0 0 0 8px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, props => props.theme.colors.neutral['000'], ({
-  value,
-  theme
-}) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]), props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`);
+})(["", " background:", ";padding:0;", ":focus-within{", "}:active{", "}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;height:100%;background:transparent;width:", ";padding:0;margin:0 0 0 8px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, props => props.theme.colors.neutral['000'], _ref => {
+  let {
+    value,
+    theme
+  } = _ref;
+  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
+}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px"));
 const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-3"
 })(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
@@ -38,7 +48,12 @@ const StyledRemovablePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
 
 const StyledPillGroup = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-6"
-})(["width:fit-content;& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-left-radius:0px;border-bottom-left-radius:0px;}}&:not(:last-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}& .ds-pill-wrapper-label,& .ds-pill-wrapper-value,& .ds-pill-wrapper-readonly{&:not(:first-of-type){padding-left:8px;}&:not(:last-of-type){padding-right:8px;}}& .ds-pill-wrapper-removable:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper-dropdown:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper{:not(:first-of-type){.ds-pill-button-left{border-radius:0px;}.ds-pill-button-only{border-top-left-radius:0px;border-bottom-left-radius:0px;}}:not(:last-of-type){.ds-pill-button-right{border-radius:0px;}.ds-pill-button-only{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"]); // =============================================================================
+})(["width:", ";& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-left-radius:0px;border-bottom-left-radius:0px;}}&:not(:last-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}& .ds-pill-wrapper-label,& .ds-pill-wrapper-value,& .ds-pill-wrapper-readonly{&:not(:first-of-type){padding-left:8px;}&:not(:last-of-type){padding-right:8px;}}& .ds-pill-wrapper-removable:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper-dropdown:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper{:not(:first-of-type){.ds-pill-button-left{border-radius:0px;}.ds-pill-button-only{border-top-left-radius:0px;border-bottom-left-radius:0px;}}:not(:last-of-type){.ds-pill-button-right{border-radius:0px;}.ds-pill-button-only{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"], _ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width;
+}); // =============================================================================
 // Extra stuff
 // =============================================================================
 

package/esm/components/types/DropdownPill.js

@@ -1,9 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useRef, useMemo } from 'react';
-import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
+import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
 import { uid } from 'uid';
-import ChevronDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledDropdownPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
@@ -13,15 +18,28 @@ import { jsx } from 'react/jsx-runtime';
 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 DropdownPill = /*#__PURE__*/React.memo(({
-  label,
-  dropdownProps,
-  innerRef,
-  ariaLabel
-}) => {
+const DropdownPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    dropdownProps,
+    innerRef,
+    ariaLabel,
+    onDropdownClick
+  } = _ref;
   const chevronRef = useRef(null);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
   return /*#__PURE__*/_jsx(StyledDropdownPillWrapper, {
+    size: size,
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
     "data-testid": "ds-pill-wrapper",
@@ -29,24 +47,28 @@ const DropdownPill = /*#__PURE__*/React.memo(({
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({
-    hideIfNotVisible: true,
-    onClose: () => chevronRef.current.focus(),
-    menuProps: {
-      zIndex: 100
-    }
+  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/jsx(DSDropdownMenuV2, _objectSpread(_objectSpread({
+    placementOrderPreference: ['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']
   }, dropdownProps), {}, {
-    triggerComponent: /*#__PURE__*/_jsx(DSPillButton, {
+    onClickOutside: e => {
+      if (e.code === 'Escape') chevronRef.current.focus();
+      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
+    },
+    wrapperStyles: {
+      width: '100%',
+      height: '100%'
+    },
+    children: /*#__PURE__*/_jsx(DSPillButton, {
       className: "ds-pill-focus-point",
       "data-testid": "ds-pill-dropdown-chevron",
       innerRef: setMultipleRefs(chevronRef, innerRef),
       "aria-label": ariaLabel || label,
-      type: "right"
-    }, void 0, /*#__PURE__*/_jsx(ChevronDown, {
-      color: ['brand-primary', '700'],
-      size: "s"
+      type: "right",
+      onClick: onDropdownClick
+    }, void 0, /*#__PURE__*/_jsx(ChevronSmallDown, {
+      color: ['brand-primary', '800'],
+      width: 20,
+      height: 20
     }))
   })));
 });

package/esm/components/types/InputPill.js

@@ -1,23 +1,26 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useCallback, useState } from 'react';
 import { uid } from 'uid';
-import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import { StyledInputPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
 import { DSPillButton } from '../PillButton.js';
 
-const InputPill = /*#__PURE__*/React.memo(({
-  label,
-  inputPlaceholder,
-  inputWidth,
-  inputRender,
-  onInputChange,
-  onInputClear,
-  innerRef
-}) => {
+const InputPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    inputPlaceholder,
+    inputWidth,
+    inputRender,
+    onInputChange,
+    onInputClear,
+    innerRef
+  } = _ref;
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
   const onCloseIconClick = useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -27,6 +30,7 @@ const InputPill = /*#__PURE__*/React.memo(({
   }, [onInputClear]);
   const [inputHasFocus, setInputHasFocus] = useState(false);
   return /*#__PURE__*/_jsx(StyledInputPillWrapper, {
+    size: size,
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
     cols: label === '' ? ['auto'] : ['auto', '24px'],
@@ -52,7 +56,7 @@ const InputPill = /*#__PURE__*/React.memo(({
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx(CloseIcon, {
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
     size: "s",
     color: ['brand-primary', '700']
   })));

package/esm/components/types/LabelPill.js

@@ -1,22 +1,37 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import React from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledLabelPillWrapper } from '../styled.js';
 
-const LabelPill = /*#__PURE__*/React.memo(({
-  label,
-  iconLeft,
-  ariaLabel
-}) => /*#__PURE__*/_jsx(StyledLabelPillWrapper, {
-  alignItems: "center",
-  className: "ds-pill-wrapper ds-pill-wrapper-label",
-  "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, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-  value: label
-})));
+const LabelPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
+  return /*#__PURE__*/_jsx(StyledLabelPillWrapper, {
+    size: size,
+    alignItems: "center",
+    className: "ds-pill-wrapper ds-pill-wrapper-label",
+    "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, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
+});
 
 export { LabelPill };

package/esm/components/types/ReadOnlyPill.js

@@ -1,17 +1,32 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import React from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledReadonlyPillWrapper } from '../styled.js';
 
-const ReadOnlyPill = /*#__PURE__*/React.memo(({
-  label,
-  iconLeft,
-  iconRight,
-  ariaLabel
-}) => {
+const ReadOnlyPill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = _ref;
   const hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
   const hasIconRight = iconRight !== null || iconLeft !== null && label === '';
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
   return /*#__PURE__*/_jsx(StyledReadonlyPillWrapper, {
+    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-readonly",
     "data-testid": "ds-pill-wrapper",
@@ -20,9 +35,7 @@ const ReadOnlyPill = /*#__PURE__*/React.memo(({
     gutter: "xxxs",
     hasIconRight: hasIconRight,
     hasIconLeft: hasIconLeft
-  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-    value: label
-  }) : null, iconRight);
+  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(TextComponent, {}, void 0, label) : null, iconRight);
 });
 
 export { ReadOnlyPill };

package/esm/components/types/RemovablePill.js

@@ -1,22 +1,33 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext, useMemo, useCallback } from 'react';
 import { uid } from 'uid';
-import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledRemovablePillWrapper } from '../styled.js';
 import { DSPillGroupV2Context } from '../PillGroup.js';
 import { DSPillButton } from '../PillButton.js';
 
-const RemovablePill = /*#__PURE__*/React.memo(({
-  label,
-  onRemove,
-  innerRef,
-  ariaLabel
-}) => {
+const RemovablePill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    onRemove,
+    innerRef,
+    ariaLabel
+  } = _ref;
   const {
     onKeyboardRemove
   } = useContext(DSPillGroupV2Context);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
   const onKeyDown = useCallback(e => {
     if (['Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -25,6 +36,7 @@ const RemovablePill = /*#__PURE__*/React.memo(({
     }
   }, [onKeyboardRemove, onRemove, pillUid]);
   return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
+    size: size,
     cols: ['auto', '24px'],
     gutter: "2px",
     alignItems: "center",
@@ -32,19 +44,18 @@ const RemovablePill = /*#__PURE__*/React.memo(({
     className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label
-  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/_jsx(DSPillButton, {
+  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
     innerRef: innerRef,
     onClick: onRemove,
     onKeyDown: onKeyDown,
-    "aria-label": `Remove ${label}`,
+    "aria-label": "Remove ".concat(label),
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx(CloseIcon, {
-    size: "s",
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
+    width: 22.65,
+    height: 22.65,
     color: ['brand-primary', '700']
   })));
 });