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

package/cjs/components/Pill.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var props = require('../props.js');
 var DropdownPill = require('./types/DropdownPill.js');
 var InputPill = require('./types/InputPill.js');
@@ -20,7 +21,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 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 pillComponentGetter = {
   dropdown: DropdownPill.DropdownPill,
   input: InputPill.InputPill,
@@ -31,9 +32,8 @@ const pillComponentGetter = {
 };
 
 const DSPillV2 = props$1 => {
-  // TODO -- investigate why showcase story doesn't work with useMemoMerge
-  const propsWithDefaults = _objectSpread(_objectSpread({}, props.DSPillV2DefaultProps), props$1);
-
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillV2DefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());
   const {
     type
   } = propsWithDefaults;

package/cjs/components/PillButton.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styled = require('./styled.js');
+var props = require('../props.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+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__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 typeToClassName = {
+  only: 'ds-pill-button-only',
+  left: 'ds-pill-button-left',
+  right: 'ds-pill-button-right'
+};
+
+const DSPillButton = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillButtonDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonWithSchema.toTypescript());
+
+  const {
+    type,
+    children
+  } = propsWithDefaults,
+        rest = _objectWithoutProperties__default["default"](propsWithDefaults, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
+    buttonType: "raw",
+    className: `${typeToClassName[type]} ${rest.className}`,
+    children: children
+  }));
+};
+
+const DSPillButtonWithSchema = reactDesc.describe(DSPillButton).description('Pill button');
+DSPillButtonWithSchema.propTypes = props.DSPillButtonPropTypes;
+
+exports.DSPillButton = DSPillButton;
+exports.DSPillButtonWithSchema = DSPillButtonWithSchema;

package/cjs/components/PillGroup.js

@@ -31,13 +31,13 @@ const DSPillGroupV2 = ({
       elems[pillIndex + 1].focus();
     }
   }, [pillGroupUid]);
-  return /*#__PURE__*/_jsx__default['default'](DSPillGroupV2Context.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](DSPillGroupV2Context.Provider, {
     value: {
       onKeyboardRemove
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledPillGroup, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPillGroup, {
     id: pillGroupUid,
-    cols: React__default['default'].Children.map(children, () => 'auto'),
+    cols: React__default["default"].Children.map(children, () => 'auto'),
     gutter: "2px"
   }, void 0, children));
 };

package/cjs/components/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Pill = require('./Pill.js');
 var PillGroup = require('./PillGroup.js');
+var PillButton = require('./PillButton.js');
 
 
 
@@ -12,3 +13,5 @@ exports.DSPillV2WithSchema = Pill.DSPillV2WithSchema;
 exports.DSPillGroupV2 = PillGroup.DSPillGroupV2;
 exports.DSPillGroupV2Context = PillGroup.DSPillGroupV2Context;
 exports.DSPillGroupV2WithSchema = PillGroup.DSPillGroupV2WithSchema;
+exports.DSPillButton = PillButton.DSPillButton;
+exports.DSPillButtonWithSchema = PillButton.DSPillButtonWithSchema;

package/cjs/components/styled.js

@@ -4,85 +4,66 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var Grid = require('@elliemae/ds-grid');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
-var ChevronDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
-var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
 
 /* eslint-disable max-lines */
 // Common CSS
 // =============================================================================
 
-const borderOutside = color => styled.css([":after{content:' ';position:absolute;top:0px;left:0px;right:0px;bottom:0px;border:1px solid ", ";border-radius:12px;pointer-events:none;}"], color);
+const borderOutside = (color, size = 1, zIndex = 2, borderRadius = '12px') => styled.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 borderInside = color => styled.css([":before{content:' ';position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid ", ";border-radius:12px;pointer-events:none;}"], color);
-
-const commonPillWrapperCss = /*#__PURE__*/styled.css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;padding:0px 12px 0 12px;border-radius:12px;font-size:", ";color:", ";"], props => props.theme.colors.brand[200], props => props.theme.fontSizes.value[400], props => props.theme.colors.neutral[800]);
-const commonFocuseablePillWrapperCss = /*#__PURE__*/styled.css([":focus,:hover,:active{color:", ";", " ", "}"], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[600]), props => borderInside(props.theme.colors.brand[300])); // =============================================================================
-// Pill content
+const commonPillWrapperCss = /*#__PURE__*/styled.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])); // =============================================================================
+// Pills wrappers
 // =============================================================================
 
-const StyledInput = /*#__PURE__*/styled__default['default'].input.withConfig({
+const StyledLabelPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-0"
-})(["font-style:", ";color:", ";background:inherit;border:none;font-size:13px;margin:1px 0 1px 12px;padding:0;width:", ";outline:none;:focus{font-style:normal;color:", ";}"], props => props.value === '' ? 'italic' : 'normal', ({
-  value,
-  theme
-}) => value === '' ? theme.colors.neutral[500] : theme.colors.brand[800], props => props.inputWidth, props => props.theme.colors.brand[800]); // =============================================================================
-// Icons
-// =============================================================================
-
-const StyledCloseIcon = /*#__PURE__*/styled__default['default'](CloseXsmall__default['default']).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
+const StyledValuePillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-1"
-})(["cursor:pointer;z-index:2;margin-top:-1px;:focus{outline:1px solid ", ";}"], props => props.theme.colors.brand[800]);
-const StyledChevronDown = /*#__PURE__*/styled__default['default'](ChevronDown__default['default']).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
+const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-2"
-})(["fill:", ";svg{fill:inherit !important;}"], props => props.theme.colors.neutral[600]); // =============================================================================
-// Pills wrappers
-// =============================================================================
-
-const StyledLabelPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " 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`);
+const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-3"
-})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.semibold);
-const StyledValuePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
+const StyledReadonlyPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-4"
-})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.regular);
-const StyledInputPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIconRight ? '0 !important' : '12px', props => props.hasIconLeft ? '0 !important' : '12px');
+const StyledRemovablePillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-5"
-})(["", " background:", ";border:", ";padding:0;:focus-within{border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";background:", ";}:active,:hover{border:1px solid ", ";}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:none !important;height:100%;background:transparent;width:", ";padding:0;margin:1px 0 1px 12px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, ({
-  value,
-  theme
-}) => value === '' ? theme.colors.neutral['000'] : theme.colors.brand[200], ({
-  value,
-  theme
-}) => value === '' ? `1px solid ${theme.colors.neutral[300]}` : '1px solid transparent', props => props.theme.colors.brand[600], props => props.theme.colors.brand[300], props => props.theme.colors.brand[200], props => props.theme.colors.brand[700], props => `${props.inputWidth}px`);
-const StyledDropdownPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
-  componentId: "sc-j0tlch-6"
-})(["", " ", " font-weight:", ";cursor:pointer;padding:1px 3px 0 12px;:focus,:hover,:active{& ", "{fill:", ";}}"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.semibold, StyledChevronDown, props => props.theme.colors.brand[800]);
-const StyledReadonlyPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
-  componentId: "sc-j0tlch-7"
-})(["", " font-weight:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
-const StyledRemovablePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
-  componentId: "sc-j0tlch-8"
-})(["", " ", " font-weight:", ";padding:1px 3px 0 12px;"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
 // Pill group
 // =============================================================================
 
-const StyledPillGroup = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
-  componentId: "sc-j0tlch-9"
-})(["width:fit-content;& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,> input{border-top-left-radius:0px;border-bottom-left-radius:0px;}}}& .ds-pill-wrapper{&:not(:last-of-type){&,:after,:before,> input{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"]);
+const StyledPillGroup = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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;}}}"]); // =============================================================================
+// Extra stuff
+// =============================================================================
+
+const StyledSpanWithTooltip = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-j0tlch-7"
+})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
+const StyledPillButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-j0tlch-8"
+})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], props => props.width, props => props.height, props => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit'));
 
-exports.StyledChevronDown = StyledChevronDown;
-exports.StyledCloseIcon = StyledCloseIcon;
 exports.StyledDropdownPillWrapper = StyledDropdownPillWrapper;
-exports.StyledInput = StyledInput;
 exports.StyledInputPillWrapper = StyledInputPillWrapper;
 exports.StyledLabelPillWrapper = StyledLabelPillWrapper;
+exports.StyledPillButton = StyledPillButton;
 exports.StyledPillGroup = StyledPillGroup;
 exports.StyledReadonlyPillWrapper = StyledReadonlyPillWrapper;
 exports.StyledRemovablePillWrapper = StyledRemovablePillWrapper;
+exports.StyledSpanWithTooltip = StyledSpanWithTooltip;
 exports.StyledValuePillWrapper = StyledValuePillWrapper;

package/cjs/components/types/DropdownPill.js

@@ -7,8 +7,11 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
 var uid = require('uid');
+var ChevronDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
 var utils = require('../../utils.js');
+var PillButton = require('../PillButton.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,48 +20,47 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
-
-var _StyledChevronDown;
+var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
 
 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; }
-const DropdownPill = /*#__PURE__*/React__default['default'].memo(({
+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 DropdownPill = /*#__PURE__*/React__default["default"].memo(({
   label,
   dropdownProps,
-  innerRef
+  innerRef,
+  ariaLabel
 }) => {
-  const [chevronEl, chevronRef] = React.useState();
-  const pillRef = React.useRef(null);
+  const chevronRef = React.useRef(null);
   const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
-  return /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default['default'], _objectSpread(_objectSpread({}, dropdownProps), {}, {
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownPillWrapper, {
+    id: pillUid,
+    className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+    "data-testid": "ds-pill-wrapper",
+    cols: ['auto', '24px'],
+    gutter: "2px",
+    alignItems: "center",
+    justifyItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: label
+  }), /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default["default"], _objectSpread(_objectSpread({
     hideIfNotVisible: true,
-    referenceNode: chevronEl,
-    onClose: () => pillRef.current.focus(),
+    onClose: () => chevronRef.current.focus(),
     menuProps: {
       zIndex: 100
-    },
-    triggerComponent: /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDropdownPillWrapper, {
-      id: pillUid,
-      className: "ds-pill-wrapper ds-pill-focus-point",
-      "data-testid": "ds-pill-wrapper",
-      ref: utils.setMultipleRefs(pillRef, innerRef),
-      cols: ['auto', '24px'],
-      alignItems: "center",
-      tabIndex: 0,
-      justifyItems: "center",
-      role: "button",
-      onKeyDown: e => ['Enter', 'Space'].includes(e.code),
-      "aria-label": label,
-      children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: chevronRef,
-        children: _StyledChevronDown || (_StyledChevronDown = /*#__PURE__*/_jsx__default['default'](styled.StyledChevronDown, {
-          size: "s",
-          "data-testid": "ds-pill-dropdown-chevron"
-        }))
-      })]
-    })
-  }));
+    }
+  }, dropdownProps), {}, {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+      className: "ds-pill-focus-point",
+      "data-testid": "ds-pill-dropdown-chevron",
+      innerRef: utils.setMultipleRefs(chevronRef, innerRef),
+      "aria-label": ariaLabel || label,
+      type: "right"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](ChevronDown__default["default"], {
+      color: ['brand-primary', '700'],
+      size: "s"
+    }))
+  })));
 });
 
 exports.DropdownPill = DropdownPill;

package/cjs/components/types/InputPill.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var uid = require('uid');
+var CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
 var styled = require('../styled.js');
 var utils = require('../../utils.js');
+var PillButton = require('../PillButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 
-const InputPill = /*#__PURE__*/React__default['default'].memo(({
+const InputPill = /*#__PURE__*/React__default["default"].memo(({
   label,
   inputPlaceholder,
   inputWidth,
@@ -25,40 +28,44 @@ const InputPill = /*#__PURE__*/React__default['default'].memo(({
   const ref = React.useRef(null);
   const InputComponent = React.useMemo(() => inputRender, [inputRender]);
   const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledInputPillWrapper, {
+  const onCloseIconClick = React.useCallback(e => {
+    if ([undefined, 'Enter', 'Space'].includes(e.code)) {
+      e.preventDefault();
+      onInputClear(e);
+      ref.current.focus();
+    }
+  }, [onInputClear]);
+  const [inputHasFocus, setInputHasFocus] = React.useState(false);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledInputPillWrapper, {
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
-    cols: ['auto', '24px'],
-    inputWidth: inputWidth
-  }, void 0, /*#__PURE__*/_jsx__default['default'](InputComponent, {
+    cols: label === '' ? ['auto'] : ['auto', '24px'],
+    inputWidth: inputWidth,
+    value: label,
+    inputHasFocus: inputHasFocus
+  }, void 0, /*#__PURE__*/_jsx__default["default"](InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",
     "data-testid": "ds-pill-input",
     innerRef: utils.setMultipleRefs(ref, innerRef),
     value: label,
     onChange: onInputChange,
-    placeholder: inputPlaceholder
-  }), label !== '' && /*#__PURE__*/_jsx__default['default'](styled.StyledCloseIcon, {
+    placeholder: inputPlaceholder,
+    onFocus: () => setInputHasFocus(true),
+    onBlur: () => setInputHasFocus(false),
+    disableTooltip: false
+  }), label !== '' && /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+    id: pillUid,
     "data-testid": "ds-pill-clear-icon",
-    tabIndex: 0,
+    innerRef: innerRef,
+    onClick: onCloseIconClick,
+    onKeyDown: onCloseIconClick,
+    "aria-label": "Clear input",
+    type: "right"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
     size: "s",
-    onClick: e => {
-      onInputClear(e);
-      ref.current.focus();
-    },
-    onKeyDown: e => {
-      if (['Enter', 'Space'].includes(e.code)) {
-        e.preventDefault();
-        onInputClear(e);
-        ref.current.focus();
-      }
-    },
-    style: {
-      position: 'absolute',
-      right: 6,
-      top: 4
-    }
-  }));
+    color: ['brand-primary', '700']
+  })));
 });
 
 exports.InputPill = InputPill;

package/cjs/components/types/LabelPill.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+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 }; }
@@ -11,13 +12,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const LabelPill = /*#__PURE__*/React__default['default'].memo(({
-  label
-}) => /*#__PURE__*/_jsx__default['default'](styled.StyledLabelPillWrapper, {
+const LabelPill = /*#__PURE__*/React__default["default"].memo(({
+  label,
+  iconLeft,
+  ariaLabel
+}) => /*#__PURE__*/_jsx__default["default"](styled.StyledLabelPillWrapper, {
   alignItems: "center",
-  className: "ds-pill-wrapper",
+  className: "ds-pill-wrapper ds-pill-wrapper-label",
   "data-testid": "ds-pill-wrapper",
-  "aria-label": label
-}, void 0, label));
+  "aria-label": ariaLabel || label,
+  cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
+  gutter: "xxxs",
+  hasIcon: iconLeft !== null
+}, void 0, iconLeft, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  value: label
+})));
 
 exports.LabelPill = LabelPill;

package/cjs/components/types/ReadOnlyPill.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+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 }; }
@@ -11,17 +12,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ReadOnlyPill = /*#__PURE__*/React__default['default'].memo(({
+const ReadOnlyPill = /*#__PURE__*/React__default["default"].memo(({
   label,
   iconLeft,
-  iconRight
-}) => /*#__PURE__*/_jsx__default['default'](styled.StyledLabelPillWrapper, {
-  alignItems: "center",
-  className: "ds-pill-wrapper",
-  "data-testid": "ds-pill-wrapper",
-  "aria-label": label,
-  cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(notFalse => notFalse),
-  gutter: "xxs"
-}, void 0, iconLeft, label ? /*#__PURE__*/_jsx__default['default']("span", {}, void 0, label) : null, iconRight));
+  iconRight,
+  ariaLabel
+}) => {
+  const hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
+  const hasIconRight = iconRight !== null || iconLeft !== null && label === '';
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledReadonlyPillWrapper, {
+    alignItems: "center",
+    className: "ds-pill-wrapper ds-pill-wrapper-readonly",
+    "data-testid": "ds-pill-wrapper",
+    "aria-label": ariaLabel || label,
+    cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(notFalse => notFalse),
+    gutter: "xxxs",
+    hasIconRight: hasIconRight,
+    hasIconLeft: hasIconLeft
+  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: label
+  }) : null, iconRight);
+});
 
 exports.ReadOnlyPill = ReadOnlyPill;

package/cjs/components/types/RemovablePill.js

@@ -5,47 +5,58 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var uid = require('uid');
+var CloseIcon = require('@elliemae/ds-icons/CloseXsmall');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('../styled.js');
-var utils = require('../../utils.js');
 var PillGroup = require('../PillGroup.js');
+var PillButton = require('../PillButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 
-const RemovablePill = /*#__PURE__*/React__default['default'].memo(({
+const RemovablePill = /*#__PURE__*/React__default["default"].memo(({
   label,
   onRemove,
-  innerRef
+  innerRef,
+  ariaLabel
 }) => {
   const {
     onKeyboardRemove
   } = React.useContext(PillGroup.DSPillGroupV2Context);
   const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledRemovablePillWrapper, {
+  const onKeyDown = React.useCallback(e => {
+    if (['Enter', 'Space'].includes(e.code)) {
+      e.preventDefault();
+      if (onKeyboardRemove) onKeyboardRemove(pillUid);
+      onRemove(e);
+    }
+  }, [onKeyboardRemove, onRemove, pillUid]);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledRemovablePillWrapper, {
     cols: ['auto', '24px'],
+    gutter: "2px",
     alignItems: "center",
     justifyItems: "center",
-    className: "ds-pill-wrapper",
+    className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
-    "aria-label": label
-  }, void 0, label, /*#__PURE__*/_jsx__default['default'](styled.StyledCloseIcon, {
-    id: pillUid,
+    "aria-label": ariaLabel || label
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: label
+  }), /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
     className: "ds-pill-focus-point",
+    id: pillUid,
     "data-testid": "ds-pill-close-icon",
-    tabIndex: 0,
-    size: "s",
-    innerRef: utils.setMultipleRefs(innerRef),
+    innerRef: innerRef,
     onClick: onRemove,
-    onKeyDown: e => {
-      if (['Enter', 'Space'].includes(e.code)) {
-        e.preventDefault();
-        if (onKeyboardRemove) onKeyboardRemove(pillUid);
-        onRemove(e);
-      }
-    }
-  }));
+    onKeyDown: onKeyDown,
+    "aria-label": `Remove ${label}`,
+    type: "right"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {
+    size: "s",
+    color: ['brand-primary', '700']
+  })));
 });
 
 exports.RemovablePill = RemovablePill;