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

package/esm/components/styled.js

@@ -1,68 +1,52 @@
 import styled, { css } from 'styled-components';
 import Grid from '@elliemae/ds-grid';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
-import ChevronDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
 // Common CSS
 // =============================================================================
 
-const borderOutside = color => 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') => 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 => 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__*/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__*/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 StyledInput = /*#__PURE__*/styled.input.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(CloseXsmall).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(ChevronDown).withConfig({
-  componentId: "sc-j0tlch-2"
-})(["fill:", ";svg{fill:inherit !important;}"], props => props.theme.colors.neutral[600]); // =============================================================================
+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])); // =============================================================================
 // Pills wrappers
 // =============================================================================
 
 const StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-3"
-})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.semibold);
+  componentId: "sc-j0tlch-0"
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
 const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-4"
-})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.regular);
+  componentId: "sc-j0tlch-1"
+})(["", " 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-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], ({
+  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
-}) => 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`);
+}) => 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(Grid).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]);
+  componentId: "sc-j0tlch-3"
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
 const StyledReadonlyPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-7"
-})(["", " font-weight:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
+  componentId: "sc-j0tlch-4"
+})(["", " 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(Grid).withConfig({
-  componentId: "sc-j0tlch-8"
-})(["", " ", " font-weight:", ";padding:1px 3px 0 12px;"], commonPillWrapperCss, commonFocuseablePillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
+  componentId: "sc-j0tlch-5"
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
 // Pill group
 // =============================================================================
 
 const StyledPillGroup = /*#__PURE__*/styled(Grid).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;}}}"]);
+  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.span.withConfig({
+  componentId: "sc-j0tlch-7"
+})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
+const StyledPillButton = /*#__PURE__*/styled(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'));
 
-export { StyledChevronDown, StyledCloseIcon, StyledDropdownPillWrapper, StyledInput, StyledInputPillWrapper, StyledLabelPillWrapper, StyledPillGroup, StyledReadonlyPillWrapper, StyledRemovablePillWrapper, StyledValuePillWrapper };
+export { StyledDropdownPillWrapper, StyledInputPillWrapper, StyledLabelPillWrapper, StyledPillButton, StyledPillGroup, StyledReadonlyPillWrapper, StyledRemovablePillWrapper, StyledSpanWithTooltip, StyledValuePillWrapper };

package/esm/components/types/DropdownPill.js

@@ -1,13 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useRef, useMemo } from 'react';
 import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
 import { uid } from 'uid';
-import { StyledDropdownPillWrapper, StyledChevronDown } from '../styled.js';
+import ChevronDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledDropdownPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var _StyledChevronDown;
+import { DSPillButton } from '../PillButton.js';
+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; }
 
@@ -15,39 +16,39 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const DropdownPill = /*#__PURE__*/React.memo(({
   label,
   dropdownProps,
-  innerRef
+  innerRef,
+  ariaLabel
 }) => {
-  const [chevronEl, chevronRef] = useState();
-  const pillRef = useRef(null);
+  const chevronRef = useRef(null);
   const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
-  return /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({}, dropdownProps), {}, {
+  return /*#__PURE__*/_jsx(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(SimpleTruncatedTooltipText, {
+    value: label
+  }), /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({
     hideIfNotVisible: true,
-    referenceNode: chevronEl,
-    onClose: () => pillRef.current.focus(),
+    onClose: () => chevronRef.current.focus(),
     menuProps: {
       zIndex: 100
-    },
-    triggerComponent: /*#__PURE__*/jsxs(StyledDropdownPillWrapper, {
-      id: pillUid,
-      className: "ds-pill-wrapper ds-pill-focus-point",
-      "data-testid": "ds-pill-wrapper",
-      ref: 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__*/jsx("div", {
-        ref: chevronRef,
-        children: _StyledChevronDown || (_StyledChevronDown = /*#__PURE__*/_jsx(StyledChevronDown, {
-          size: "s",
-          "data-testid": "ds-pill-dropdown-chevron"
-        }))
-      })]
-    })
-  }));
+    }
+  }, dropdownProps), {}, {
+    triggerComponent: /*#__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"
+    }))
+  })));
 });
 
 export { DropdownPill };

package/esm/components/types/InputPill.js

@@ -1,8 +1,10 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useCallback, useState } from 'react';
 import { uid } from 'uid';
-import { StyledInputPillWrapper, StyledCloseIcon } from '../styled.js';
+import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+import { StyledInputPillWrapper } from '../styled.js';
 import { setMultipleRefs } from '../../utils.js';
+import { DSPillButton } from '../PillButton.js';
 
 const InputPill = /*#__PURE__*/React.memo(({
   label,
@@ -16,11 +18,21 @@ const InputPill = /*#__PURE__*/React.memo(({
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
   const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const onCloseIconClick = useCallback(e => {
+    if ([undefined, 'Enter', 'Space'].includes(e.code)) {
+      e.preventDefault();
+      onInputClear(e);
+      ref.current.focus();
+    }
+  }, [onInputClear]);
+  const [inputHasFocus, setInputHasFocus] = useState(false);
   return /*#__PURE__*/_jsx(StyledInputPillWrapper, {
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
-    cols: ['auto', '24px'],
-    inputWidth: inputWidth
+    cols: label === '' ? ['auto'] : ['auto', '24px'],
+    inputWidth: inputWidth,
+    value: label,
+    inputHasFocus: inputHasFocus
   }, void 0, /*#__PURE__*/_jsx(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",
@@ -28,28 +40,22 @@ const InputPill = /*#__PURE__*/React.memo(({
     innerRef: setMultipleRefs(ref, innerRef),
     value: label,
     onChange: onInputChange,
-    placeholder: inputPlaceholder
-  }), label !== '' && /*#__PURE__*/_jsx(StyledCloseIcon, {
+    placeholder: inputPlaceholder,
+    onFocus: () => setInputHasFocus(true),
+    onBlur: () => setInputHasFocus(false),
+    disableTooltip: false
+  }), label !== '' && /*#__PURE__*/_jsx(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(CloseIcon, {
     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']
+  })));
 });
 
 export { InputPill };

package/esm/components/types/LabelPill.js

@@ -1,14 +1,22 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledLabelPillWrapper } from '../styled.js';
 
 const LabelPill = /*#__PURE__*/React.memo(({
-  label
+  label,
+  iconLeft,
+  ariaLabel
 }) => /*#__PURE__*/_jsx(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(SimpleTruncatedTooltipText, {
+  value: label
+})));
 
 export { LabelPill };

package/esm/components/types/ReadOnlyPill.js

@@ -1,18 +1,28 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
-import { StyledLabelPillWrapper } from '../styled.js';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledReadonlyPillWrapper } from '../styled.js';
 
 const ReadOnlyPill = /*#__PURE__*/React.memo(({
   label,
   iconLeft,
-  iconRight
-}) => /*#__PURE__*/_jsx(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("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(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(SimpleTruncatedTooltipText, {
+    value: label
+  }) : null, iconRight);
+});
 
 export { ReadOnlyPill };

package/esm/components/types/RemovablePill.js

@@ -1,42 +1,52 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import { uid } from 'uid';
-import { StyledRemovablePillWrapper, StyledCloseIcon } from '../styled.js';
-import { setMultipleRefs } from '../../utils.js';
+import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
+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
+  innerRef,
+  ariaLabel
 }) => {
   const {
     onKeyboardRemove
   } = useContext(DSPillGroupV2Context);
   const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const onKeyDown = useCallback(e => {
+    if (['Enter', 'Space'].includes(e.code)) {
+      e.preventDefault();
+      if (onKeyboardRemove) onKeyboardRemove(pillUid);
+      onRemove(e);
+    }
+  }, [onKeyboardRemove, onRemove, pillUid]);
   return /*#__PURE__*/_jsx(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(StyledCloseIcon, {
-    id: pillUid,
+    "aria-label": ariaLabel || label
+  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: label
+  }), /*#__PURE__*/_jsx(DSPillButton, {
     className: "ds-pill-focus-point",
+    id: pillUid,
     "data-testid": "ds-pill-close-icon",
-    tabIndex: 0,
-    size: "s",
-    innerRef: 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(CloseIcon, {
+    size: "s",
+    color: ['brand-primary', '700']
+  })));
 });
 
 export { RemovablePill };

package/esm/components/types/ValuePill.js

@@ -1,19 +1,30 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
-import { DSTooltipV2 } from '@elliemae/ds-tooltip';
-import { StyledValuePillWrapper } from '../styled.js';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledValuePillWrapper, StyledSpanWithTooltip } from '../styled.js';
 
 const ValuePill = /*#__PURE__*/React.memo(({
   label,
-  tooltipValue
+  tooltipValue,
+  iconLeft,
+  ariaLabel
 }) => /*#__PURE__*/_jsx(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(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(DSTooltipV3, {
+  text: tooltipValue,
+  startPlacementPreference: "bottom"
+}, void 0, /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
+  className: "ds-pill-tooltip-value",
+  tabIndex: 0
+}, void 0, label)) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+  value: label
+})));
 
 export { ValuePill };

package/esm/deprecated/InputPill.js

@@ -2,7 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
+import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import DSInputMask from '@elliemae/ds-form/InputMask';
 import DSInput from '@elliemae/ds-form/Input';
@@ -55,7 +55,7 @@ function InputPill(_ref) {
       placeholder: placeholder,
       value: value
     }, otherProps)),
-    rightAddon: value && /*#__PURE__*/_jsx(CloseXsmall, {
+    rightAddon: value && /*#__PURE__*/_jsx(CloseIcon, {
       className: "remove-pill-button",
       "data-testid": "remove-pill-button",
       onClick: onRemove

package/esm/deprecated/RemovablePill.js

@@ -2,7 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useRef } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { isFunction } from '@elliemae/ds-utilities/utils';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
+import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import { Pill } from './Pill.js';
 
@@ -31,7 +31,7 @@ function RemovablePill({
         if (isFunction(focusPrevious)) focusPrevious();
       }
     },
-    rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
+    rightAddon: /*#__PURE__*/_jsx(CloseIcon, {
       role: "button",
       "data-testid": "remove-pill-button",
       className: "remove-pill-button",

package/esm/index.js

@@ -8,3 +8,4 @@ export { DSReadOnlyPillWithSchema, ReadOnlyPill } from './deprecated/ReadOnlyPil
 export { DSOverflowPillWithSchema, OverflowPill } from './deprecated/OverflowPill.js';
 export { DSPillV2, DSPillV2WithSchema } from './components/Pill.js';
 export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './components/PillGroup.js';
+export { DSPillButton, DSPillButtonWithSchema } from './components/PillButton.js';

package/esm/props.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "module": "./esm/index.js",
@@ -111,6 +111,10 @@
       "import": "./esm/components/PillGroup.js",
       "require": "./cjs/components/PillGroup.js"
     },
+    "./components/PillButton": {
+      "import": "./esm/components/PillButton.js",
+      "require": "./cjs/components/PillButton.js"
+    },
     "./components/Pill": {
       "import": "./esm/components/Pill.js",
       "require": "./cjs/components/Pill.js"
@@ -140,14 +144,14 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.0.0-alpha.5",
-    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.5",
-    "@elliemae/ds-form": "2.0.0-alpha.5",
-    "@elliemae/ds-icons": "2.0.0-alpha.5",
-    "@elliemae/ds-modal": "2.0.0-alpha.5",
-    "@elliemae/ds-shared": "2.0.0-alpha.5",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.5",
-    "@elliemae/ds-utilities": "2.0.0-alpha.5",
+    "@elliemae/ds-classnames": "2.0.0-alpha.9",
+    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.9",
+    "@elliemae/ds-form": "2.0.0-alpha.9",
+    "@elliemae/ds-icons": "2.0.0-alpha.9",
+    "@elliemae/ds-modal": "2.0.0-alpha.9",
+    "@elliemae/ds-shared": "2.0.0-alpha.9",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.9",
+    "@elliemae/ds-utilities": "2.0.0-alpha.9",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },

package/types/components/PillButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSButtonPropsT } from '@elliemae/ds-button';
+declare const DSPillButton: React.ComponentType<DSButtonPropsT>;
+declare const DSPillButtonWithSchema: any;
+export { DSPillButton, DSPillButtonWithSchema };

package/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Pill';
 export * from './PillGroup';
+export * from './PillButton';