@elliemae/ds-pills 2.3.0-next.18 → 2.3.0-next.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/cjs/components/styled.js +34 -6
  2. package/cjs/components/types/RemovablePill.js +19 -15
  3. package/cjs/components/types/ValuePill.js +2 -0
  4. package/cjs/props.js +1 -0
  5. package/esm/components/styled.js +34 -6
  6. package/esm/components/types/RemovablePill.js +19 -15
  7. package/esm/components/types/ValuePill.js +2 -0
  8. package/esm/props.js +1 -0
  9. package/package.json +15 -15
  10. package/types/props.d.ts +1 -0
package/cjs/components/styled.js CHANGED
@@ -22,10 +22,38 @@ const borderOutside = function (color) {
22
22
  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
23
23
  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
24
24
  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
25
- return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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);
25
+ return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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, _ref => {
26
+ let {
27
+ disabled,
28
+ theme
29
+ } = _ref;
30
+ return disabled ? theme.colors.neutral[400] : color;
31
+ }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
26
32
  };
27
33
 
28
- const commonPillWrapperCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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])); // =============================================================================
34
+ const commonPillWrapperCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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 user-select: ", ";\n cursor: ", ";\n color: ", ";\n ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', _ref2 => {
35
+ let {
36
+ theme,
37
+ disabled
38
+ } = _ref2;
39
+ return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
40
+ }, _ref3 => {
41
+ let {
42
+ disabled
43
+ } = _ref3;
44
+ return disabled ? 'none' : 'auto';
45
+ }, _ref4 => {
46
+ let {
47
+ disabled
48
+ } = _ref4;
49
+ return disabled ? 'not-allowed' : 'default';
50
+ }, _ref5 => {
51
+ let {
52
+ theme,
53
+ disabled
54
+ } = _ref5;
55
+ return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
56
+ }, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
29
57
  // Pills wrappers
30
58
  // =============================================================================
31
59
 
@@ -37,11 +65,11 @@ const StyledValuePillWrapper = /*#__PURE__*/styled__default["default"](Grid__def
37
65
  })(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
38
66
  const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
39
67
  componentId: "sc-j0tlch-2"
40
- })(["", " 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 => {
68
+ })(["", " 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'], _ref6 => {
41
69
  let {
42
70
  value,
43
71
  theme
44
- } = _ref;
72
+ } = _ref6;
45
73
  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
46
74
  }, 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"));
47
75
  const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
@@ -58,10 +86,10 @@ const StyledRemovablePillWrapper = /*#__PURE__*/styled__default["default"](Grid_
58
86
 
59
87
  const StyledPillGroup = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
60
88
  componentId: "sc-j0tlch-6"
61
- })(["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 => {
89
+ })(["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;}}}"], _ref7 => {
62
90
  let {
63
91
  width
64
- } = _ref2;
92
+ } = _ref7;
65
93
  return width;
66
94
  }); // =============================================================================
67
95
  // Extra stuff
package/cjs/components/types/RemovablePill.js CHANGED
@@ -10,6 +10,7 @@ var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
10
10
  var styled = require('../styled.js');
11
11
  var PillGroup = require('../PillGroup.js');
12
12
  var PillButton = require('../PillButton.js');
13
+ var jsxRuntime = require('react/jsx-runtime');
13
14
 
14
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
16
 
@@ -20,6 +21,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
20
21
  let {
21
22
  label,
22
23
  size,
24
+ disabled,
23
25
  labelTruncated,
24
26
  onRemove,
25
27
  innerRef,
@@ -65,21 +67,23 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
65
67
  className: "ds-pill-wrapper ds-pill-wrapper-removable",
66
68
  "data-testid": "ds-pill-wrapper",
67
69
  "aria-label": ariaLabel || label
68
- }, void 0, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
69
- className: "ds-pill-focus-point",
70
- id: pillUid,
71
- "data-testid": "ds-pill-close-icon",
72
- innerRef: innerRef,
73
- onClick: onRemove,
74
- onKeyDown: onKeyDown,
75
- "aria-label": "Remove ".concat(label),
76
- type: "right",
77
- tabIndex: tabIndex
78
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
79
- width: size === 's' ? 18 : 22.65,
80
- height: size === 's' ? 18 : 22.65,
81
- color: ['brand-primary', '700']
82
- })));
70
+ }, void 0, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label), /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
71
+ children: !disabled ? /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
72
+ className: "ds-pill-focus-point",
73
+ id: pillUid,
74
+ "data-testid": "ds-pill-close-icon",
75
+ innerRef: innerRef,
76
+ onClick: onRemove,
77
+ onKeyDown: onKeyDown,
78
+ "aria-label": "Remove ".concat(label),
79
+ type: "right",
80
+ tabIndex: tabIndex
81
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
82
+ width: size === 's' ? 18 : 22.65,
83
+ height: size === 's' ? 18 : 22.65,
84
+ color: ['brand-primary', '700']
85
+ })) : null
86
+ }));
83
87
  });
84
88
 
85
89
  exports.RemovablePill = RemovablePill;
package/cjs/components/types/ValuePill.js CHANGED
@@ -21,6 +21,7 @@ const ValuePill = /*#__PURE__*/React__default["default"].memo(_ref => {
21
21
  label,
22
22
  size,
23
23
  labelTruncated,
24
+ disabled,
24
25
  tooltipValue,
25
26
  iconLeft,
26
27
  ariaLabel
@@ -34,6 +35,7 @@ const ValuePill = /*#__PURE__*/React__default["default"].memo(_ref => {
34
35
  });
35
36
  } : React__default["default"].Fragment;
36
37
  return /*#__PURE__*/_jsx__default["default"](styled.StyledValuePillWrapper, {
38
+ disabled: disabled,
37
39
  size: size,
38
40
  alignItems: "center",
39
41
  className: "ds-pill-wrapper ds-pill-wrapper-value",
package/cjs/props.js CHANGED
@@ -36,6 +36,7 @@ const DSPillGroupPropTypes = {
36
36
  };
37
37
  const DSPillV2DefaultProps = {
38
38
  innerRef: () => null,
39
+ disabled: false,
39
40
  ariaLabel: '',
40
41
  size: 'm',
41
42
  labelTruncated: true,
package/esm/components/styled.js CHANGED
@@ -12,10 +12,38 @@ const borderOutside = function (color) {
12
12
  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
13
13
  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
14
14
  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
15
- 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);
15
+ 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, _ref => {
16
+ let {
17
+ disabled,
18
+ theme
19
+ } = _ref;
20
+ return disabled ? theme.colors.neutral[400] : color;
21
+ }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
16
22
  };
17
23
 
18
- 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])); // =============================================================================
24
+ 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 user-select: ", ";\n cursor: ", ";\n color: ", ";\n ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', _ref2 => {
25
+ let {
26
+ theme,
27
+ disabled
28
+ } = _ref2;
29
+ return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
30
+ }, _ref3 => {
31
+ let {
32
+ disabled
33
+ } = _ref3;
34
+ return disabled ? 'none' : 'auto';
35
+ }, _ref4 => {
36
+ let {
37
+ disabled
38
+ } = _ref4;
39
+ return disabled ? 'not-allowed' : 'default';
40
+ }, _ref5 => {
41
+ let {
42
+ theme,
43
+ disabled
44
+ } = _ref5;
45
+ return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
46
+ }, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
19
47
  // Pills wrappers
20
48
  // =============================================================================
21
49
 
@@ -27,11 +55,11 @@ const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
27
55
  })(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
28
56
  const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
29
57
  componentId: "sc-j0tlch-2"
30
- })(["", " 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 => {
58
+ })(["", " 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'], _ref6 => {
31
59
  let {
32
60
  value,
33
61
  theme
34
- } = _ref;
62
+ } = _ref6;
35
63
  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
36
64
  }, 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"));
37
65
  const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
@@ -48,10 +76,10 @@ const StyledRemovablePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
48
76
 
49
77
  const StyledPillGroup = /*#__PURE__*/styled(Grid).withConfig({
50
78
  componentId: "sc-j0tlch-6"
51
- })(["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 => {
79
+ })(["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;}}}"], _ref7 => {
52
80
  let {
53
81
  width
54
- } = _ref2;
82
+ } = _ref7;
55
83
  return width;
56
84
  }); // =============================================================================
57
85
  // Extra stuff
package/esm/components/types/RemovablePill.js CHANGED
@@ -6,11 +6,13 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
6
6
  import { StyledRemovablePillWrapper } from '../styled.js';
7
7
  import { DSPillGroupV2Context } from '../PillGroup.js';
8
8
  import { DSPillButton } from '../PillButton.js';
9
+ import { jsx, Fragment } from 'react/jsx-runtime';
9
10
 
10
11
  const RemovablePill = /*#__PURE__*/React.memo(_ref => {
11
12
  let {
12
13
  label,
13
14
  size,
15
+ disabled,
14
16
  labelTruncated,
15
17
  onRemove,
16
18
  innerRef,
@@ -56,21 +58,23 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
56
58
  className: "ds-pill-wrapper ds-pill-wrapper-removable",
57
59
  "data-testid": "ds-pill-wrapper",
58
60
  "aria-label": ariaLabel || label
59
- }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
60
- className: "ds-pill-focus-point",
61
- id: pillUid,
62
- "data-testid": "ds-pill-close-icon",
63
- innerRef: innerRef,
64
- onClick: onRemove,
65
- onKeyDown: onKeyDown,
66
- "aria-label": "Remove ".concat(label),
67
- type: "right",
68
- tabIndex: tabIndex
69
- }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
70
- width: size === 's' ? 18 : 22.65,
71
- height: size === 's' ? 18 : 22.65,
72
- color: ['brand-primary', '700']
73
- })));
61
+ }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/jsx(Fragment, {
62
+ children: !disabled ? /*#__PURE__*/_jsx(DSPillButton, {
63
+ className: "ds-pill-focus-point",
64
+ id: pillUid,
65
+ "data-testid": "ds-pill-close-icon",
66
+ innerRef: innerRef,
67
+ onClick: onRemove,
68
+ onKeyDown: onKeyDown,
69
+ "aria-label": "Remove ".concat(label),
70
+ type: "right",
71
+ tabIndex: tabIndex
72
+ }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
73
+ width: size === 's' ? 18 : 22.65,
74
+ height: size === 's' ? 18 : 22.65,
75
+ color: ['brand-primary', '700']
76
+ })) : null
77
+ }));
74
78
  });
75
79
 
76
80
  export { RemovablePill };
package/esm/components/types/ValuePill.js CHANGED
@@ -12,6 +12,7 @@ const ValuePill = /*#__PURE__*/React.memo(_ref => {
12
12
  label,
13
13
  size,
14
14
  labelTruncated,
15
+ disabled,
15
16
  tooltipValue,
16
17
  iconLeft,
17
18
  ariaLabel
@@ -25,6 +26,7 @@ const ValuePill = /*#__PURE__*/React.memo(_ref => {
25
26
  });
26
27
  } : React.Fragment;
27
28
  return /*#__PURE__*/_jsx(StyledValuePillWrapper, {
29
+ disabled: disabled,
28
30
  size: size,
29
31
  alignItems: "center",
30
32
  className: "ds-pill-wrapper ds-pill-wrapper-value",
package/esm/props.js CHANGED
@@ -32,6 +32,7 @@ const DSPillGroupPropTypes = {
32
32
  };
33
33
  const DSPillV2DefaultProps = {
34
34
  innerRef: () => null,
35
+ disabled: false,
35
36
  ariaLabel: '',
36
37
  size: 'm',
37
38
  labelTruncated: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pills",
3
- "version": "2.3.0-next.18",
3
+ "version": "2.3.0-next.19",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pills",
6
6
  "module": "./esm/index.js",
@@ -144,20 +144,20 @@
144
144
  "build": "node ../../scripts/build/build.js"
145
145
  },
146
146
  "dependencies": {
147
- "@elliemae/ds-button": "2.3.0-next.18",
148
- "@elliemae/ds-classnames": "2.3.0-next.18",
149
- "@elliemae/ds-dropdownmenu": "2.3.0-next.18",
150
- "@elliemae/ds-form": "2.3.0-next.18",
151
- "@elliemae/ds-grid": "2.3.0-next.18",
152
- "@elliemae/ds-icons": "2.3.0-next.18",
153
- "@elliemae/ds-modal": "2.3.0-next.18",
154
- "@elliemae/ds-popover": "2.3.0-next.18",
155
- "@elliemae/ds-props-helpers": "2.3.0-next.18",
156
- "@elliemae/ds-shared": "2.3.0-next.18",
157
- "@elliemae/ds-system": "2.3.0-next.18",
158
- "@elliemae/ds-tooltip": "2.3.0-next.18",
159
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.18",
160
- "@elliemae/ds-utilities": "2.3.0-next.18",
147
+ "@elliemae/ds-button": "2.3.0-next.19",
148
+ "@elliemae/ds-classnames": "2.3.0-next.19",
149
+ "@elliemae/ds-dropdownmenu": "2.3.0-next.19",
150
+ "@elliemae/ds-form": "2.3.0-next.19",
151
+ "@elliemae/ds-grid": "2.3.0-next.19",
152
+ "@elliemae/ds-icons": "2.3.0-next.19",
153
+ "@elliemae/ds-modal": "2.3.0-next.19",
154
+ "@elliemae/ds-popover": "2.3.0-next.19",
155
+ "@elliemae/ds-props-helpers": "2.3.0-next.19",
156
+ "@elliemae/ds-shared": "2.3.0-next.19",
157
+ "@elliemae/ds-system": "2.3.0-next.19",
158
+ "@elliemae/ds-tooltip": "2.3.0-next.19",
159
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.19",
160
+ "@elliemae/ds-utilities": "2.3.0-next.19",
161
161
  "prop-types": "~15.7.2",
162
162
  "react-desc": "~4.1.3",
163
163
  "uid": "~2.0.0"
package/types/props.d.ts CHANGED
@@ -66,6 +66,7 @@ export declare const DSPillGroupPropTypes: {
66
66
  };
67
67
  export declare const DSPillV2DefaultProps: {
68
68
  innerRef: () => null;
69
+ disabled: boolean;
69
70
  ariaLabel: string;
70
71
  size: string;
71
72
  labelTruncated: boolean;