@elliemae/ds-pills 2.4.2-rc.9 → 2.4.2

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 (25) hide show
  1. package/cjs/components/PillButton.js +1 -1
  2. package/cjs/components/PillGroup.js +3 -4
  3. package/cjs/components/styled.js +47 -11
  4. package/cjs/components/types/DropdownPill.js +1 -1
  5. package/cjs/components/types/InputPill.js +1 -2
  6. package/cjs/components/types/RemovablePill.js +2 -2
  7. package/cjs/deprecated/DropdownPill.js +3 -4
  8. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +0 -1
  9. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +1 -2
  10. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +2 -3
  11. package/cjs/deprecated/OverflowPill.js +2 -3
  12. package/cjs/deprecated/ReadOnlyPill.js +0 -1
  13. package/esm/components/PillButton.js +1 -1
  14. package/esm/components/PillGroup.js +3 -4
  15. package/esm/components/styled.js +47 -10
  16. package/esm/components/types/DropdownPill.js +1 -1
  17. package/esm/components/types/InputPill.js +1 -2
  18. package/esm/components/types/RemovablePill.js +2 -2
  19. package/esm/deprecated/DropdownPill.js +3 -4
  20. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +0 -1
  21. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +1 -2
  22. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +2 -3
  23. package/esm/deprecated/OverflowPill.js +2 -3
  24. package/esm/deprecated/ReadOnlyPill.js +0 -1
  25. package/package.json +15 -15
package/cjs/components/PillButton.js CHANGED
@@ -44,7 +44,7 @@ const DSPillButton = props$1 => {
44
44
 
45
45
  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
46
46
  buttonType: "raw",
47
- className: "".concat(typeToClassName[type], " ").concat(rest.className),
47
+ className: `${typeToClassName[type]} ${rest.className}`,
48
48
  children: children
49
49
  }));
50
50
  };
package/cjs/components/PillGroup.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- require('core-js/modules/web.dom-collections.iterator.js');
8
7
  require('core-js/modules/esnext.async-iterator.map.js');
9
8
  require('core-js/modules/esnext.iterator.map.js');
10
9
  require('core-js/modules/esnext.async-iterator.filter.js');
@@ -37,14 +36,14 @@ const DSPillGroupV2 = props$1 => {
37
36
  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
38
37
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillGroupPropTypes);
39
38
  const globalAttrs = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
40
- const pillGroupUid = React.useMemo(() => "ds-pill-group-".concat(uid.uid()), []);
39
+ const pillGroupUid = React.useMemo(() => `ds-pill-group-${uid.uid()}`, []);
41
40
  const {
42
41
  children,
43
42
  width,
44
43
  innerRef
45
44
  } = propsWithDefaults;
46
45
  const onKeyboardRemove = React.useCallback(pillUid => {
47
- const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
46
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
48
47
  const pillIndex = elems.findIndex(elem => elem.id === pillUid);
49
48
 
50
49
  if (pillIndex > 0) {
@@ -54,7 +53,7 @@ const DSPillGroupV2 = props$1 => {
54
53
  }
55
54
  }, [pillGroupUid]);
56
55
  const onKeyboardNavigation = React.useCallback((pillUid, step, e) => {
57
- const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
56
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
58
57
  const pillIndex = elems.findIndex(elem => elem.id === pillUid);
59
58
 
60
59
  if (pillIndex >= 0) {
package/cjs/components/styled.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var styled = require('styled-components');
7
6
  var dsSystem = require('@elliemae/ds-system');
8
7
  var Grid = require('@elliemae/ds-grid');
@@ -10,11 +9,10 @@ var dsButton = require('@elliemae/ds-button');
10
9
 
11
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
11
 
13
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
14
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
13
  var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
16
14
 
17
- var _templateObject, _templateObject2;
15
+ /* eslint-disable max-lines */
18
16
  // Common CSS
19
17
  // =============================================================================
20
18
 
@@ -22,38 +20,76 @@ const borderOutside = function (color) {
22
20
  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
23
21
  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
24
22
  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, _ref => {
23
+ return dsSystem.css`
24
+ :after {
25
+ content: ' ';
26
+ position: absolute;
27
+ top: 0px;
28
+ left: 0px;
29
+ right: 0px;
30
+ bottom: 0px;
31
+ border: ${size}px solid ${_ref => {
26
32
  let {
27
33
  disabled,
28
34
  theme
29
35
  } = _ref;
30
36
  return disabled ? theme.colors.neutral[400] : color;
31
- }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
37
+ }};
38
+ border-top-left-radius: ${borderRadius};
39
+ border-top-right-radius: ${borderRadius};
40
+ border-bottom-left-radius: ${borderRadius};
41
+ border-bottom-right-radius: ${borderRadius};
42
+ pointer-events: none;
43
+ z-index: ${zIndex};
44
+ }
45
+ `;
32
46
  };
33
47
 
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 => {
48
+ const commonPillWrapperCss = dsSystem.css`
49
+ height: ${props => props?.size === 'm' ? '24px' : '18px'};
50
+
51
+ position: relative;
52
+
53
+ width: fit-content;
54
+
55
+ background-color: ${_ref2 => {
35
56
  let {
36
57
  theme,
37
58
  disabled
38
59
  } = _ref2;
39
60
  return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
40
- }, _ref3 => {
61
+ }};
62
+
63
+ outline: none;
64
+
65
+ white-space: nowrap;
66
+
67
+ padding: 0px 12px 0 12px;
68
+ border-radius: 12px;
69
+
70
+ font-size: 13px;
71
+ line-height: 1;
72
+ user-select: ${_ref3 => {
41
73
  let {
42
74
  disabled
43
75
  } = _ref3;
44
76
  return disabled ? 'none' : 'auto';
45
- }, _ref4 => {
77
+ }};
78
+ cursor: ${_ref4 => {
46
79
  let {
47
80
  disabled
48
81
  } = _ref4;
49
82
  return disabled ? 'not-allowed' : 'default';
50
- }, _ref5 => {
83
+ }};
84
+ color: ${_ref5 => {
51
85
  let {
52
86
  theme,
53
87
  disabled
54
88
  } = _ref5;
55
89
  return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
56
- }, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
90
+ }};
91
+ ${props => borderOutside(props.theme.colors.brand[300])};
92
+ `; // =============================================================================
57
93
  // Pills wrappers
58
94
  // =============================================================================
59
95
 
@@ -71,7 +107,7 @@ const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__def
71
107
  theme
72
108
  } = _ref6;
73
109
  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
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"));
110
+ }, 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`);
75
111
  const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
76
112
  componentId: "sc-j0tlch-3"
77
113
  })(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
package/cjs/components/types/DropdownPill.js CHANGED
@@ -39,7 +39,7 @@ const DropdownPill = /*#__PURE__*/React__default["default"].memo(_ref => {
39
39
  onDropdownClick
40
40
  } = _ref;
41
41
  const chevronRef = React.useRef(null);
42
- const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
42
+ const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
43
43
  const TextComponent = labelTruncated ? _ref2 => {
44
44
  let {
45
45
  children
package/cjs/components/types/InputPill.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
6
  var React = require('react');
8
7
  var uid = require('uid');
9
8
  var dsIcons = require('@elliemae/ds-icons');
@@ -29,7 +28,7 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
29
28
  } = _ref;
30
29
  const ref = React.useRef(null);
31
30
  const InputComponent = React.useMemo(() => inputRender, [inputRender]);
32
- const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
31
+ const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
33
32
  const onCloseIconClick = React.useCallback(e => {
34
33
  if ([undefined, 'Enter', 'Space'].includes(e.code)) {
35
34
  e.preventDefault();
package/cjs/components/types/RemovablePill.js CHANGED
@@ -32,7 +32,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
32
32
  onKeyboardRemove,
33
33
  onKeyboardNavigation
34
34
  } = React.useContext(PillGroup.DSPillGroupV2Context);
35
- const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
35
+ const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
36
36
  const TextComponent = labelTruncated ? _ref2 => {
37
37
  let {
38
38
  children
@@ -75,7 +75,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
75
75
  innerRef: innerRef,
76
76
  onClick: onRemove,
77
77
  onKeyDown: onKeyDown,
78
- "aria-label": "Remove ".concat(label),
78
+ "aria-label": `Remove ${label}`,
79
79
  type: "right",
80
80
  tabIndex: tabIndex
81
81
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
package/cjs/deprecated/DropdownPill.js CHANGED
@@ -2,15 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
- require('core-js/modules/web.dom-collections.iterator.js');
9
5
  require('core-js/modules/esnext.async-iterator.filter.js');
10
6
  require('core-js/modules/esnext.iterator.constructor.js');
11
7
  require('core-js/modules/esnext.iterator.filter.js');
12
8
  require('core-js/modules/esnext.async-iterator.for-each.js');
13
9
  require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _jsx = require('@babel/runtime/helpers/jsx');
11
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
14
13
  var React = require('react');
15
14
  var reactDesc = require('react-desc');
16
15
  var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js CHANGED
@@ -5,7 +5,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  require('core-js/modules/esnext.async-iterator.map.js');
7
7
  require('core-js/modules/esnext.iterator.map.js');
8
- require('core-js/modules/web.dom-collections.iterator.js');
9
8
  require('core-js/modules/esnext.async-iterator.filter.js');
10
9
  require('core-js/modules/esnext.iterator.constructor.js');
11
10
  require('core-js/modules/esnext.iterator.filter.js');
package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js CHANGED
@@ -3,7 +3,6 @@
3
3
  var _jsx = require('@babel/runtime/helpers/jsx');
4
4
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
5
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
6
  require('core-js/modules/esnext.async-iterator.filter.js');
8
7
  require('core-js/modules/esnext.iterator.constructor.js');
9
8
  require('core-js/modules/esnext.iterator.filter.js');
@@ -144,7 +143,7 @@ function LabeledDropdownMultiPills(_ref) {
144
143
 
145
144
  return null;
146
145
  }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx__default["default"](OverflowPill.OverflowPill, {
147
- label: "+ ".concat(selectedOptions.length - overflowQuantity),
146
+ label: `+ ${selectedOptions.length - overflowQuantity}`,
148
147
  options: overflowOptions
149
148
  })]
150
149
  });
package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js CHANGED
@@ -3,7 +3,6 @@
3
3
  var _jsx = require('@babel/runtime/helpers/jsx');
4
4
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
5
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
6
  require('core-js/modules/esnext.async-iterator.find.js');
8
7
  require('core-js/modules/esnext.iterator.constructor.js');
9
8
  require('core-js/modules/esnext.iterator.find.js');
@@ -140,7 +139,7 @@ function LabeledDropdownSinglePill(_ref) {
140
139
 
141
140
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
142
141
  children: [/*#__PURE__*/jsxRuntime.jsx(DropdownPill.DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
143
- label: !labelIsValue ? label : optionValue === null || optionValue === void 0 ? void 0 : optionValue.label,
142
+ label: !labelIsValue ? label : optionValue?.label,
144
143
  maxWidth: maxWidth,
145
144
  minWidth: minWidth,
146
145
  onSelectMenuItem: selectOption,
@@ -152,7 +151,7 @@ function LabeledDropdownSinglePill(_ref) {
152
151
  closeOnClick: true
153
152
  })],
154
153
  selection: {
155
- 'multi-selection-views': optionValue ? [optionValue === null || optionValue === void 0 ? void 0 : optionValue.id] : ''
154
+ 'multi-selection-views': optionValue ? [optionValue?.id] : ''
156
155
  },
157
156
  variant: "title"
158
157
  })), renderSelection()]
package/cjs/deprecated/OverflowPill.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
6
  require('core-js/modules/esnext.async-iterator.for-each.js');
8
7
  require('core-js/modules/esnext.iterator.constructor.js');
9
8
  require('core-js/modules/esnext.iterator.for-each.js');
@@ -32,9 +31,9 @@ function OverflowPill(_ref) {
32
31
  let text = '';
33
32
  options.forEach(option => {
34
33
  if (!tooltipText || option === options[0]) {
35
- text = "".concat(option.label);
34
+ text = `${option.label}`;
36
35
  } else {
37
- text = text.concat(", ".concat(option.label));
36
+ text = text.concat(`, ${option.label}`);
38
37
  }
39
38
  });
40
39
  setTooltipText(text);
package/cjs/deprecated/ReadOnlyPill.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
6
  var React = require('react');
8
7
  var reactDesc = require('react-desc');
9
8
  var dsIcons = require('@elliemae/ds-icons');
package/esm/components/PillButton.js CHANGED
@@ -35,7 +35,7 @@ const DSPillButton = props => {
35
35
 
36
36
  return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
37
37
  buttonType: "raw",
38
- className: "".concat(typeToClassName[type], " ").concat(rest.className),
38
+ className: `${typeToClassName[type]} ${rest.className}`,
39
39
  children: children
40
40
  }));
41
41
  };
package/esm/components/PillGroup.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import 'core-js/modules/web.dom-collections.iterator.js';
4
3
  import 'core-js/modules/esnext.async-iterator.map.js';
5
4
  import 'core-js/modules/esnext.iterator.map.js';
6
5
  import 'core-js/modules/esnext.async-iterator.filter.js';
@@ -27,14 +26,14 @@ const DSPillGroupV2 = props => {
27
26
  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
28
27
  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
29
28
  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
30
- const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
29
+ const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);
31
30
  const {
32
31
  children,
33
32
  width,
34
33
  innerRef
35
34
  } = propsWithDefaults;
36
35
  const onKeyboardRemove = useCallback(pillUid => {
37
- const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
36
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
38
37
  const pillIndex = elems.findIndex(elem => elem.id === pillUid);
39
38
 
40
39
  if (pillIndex > 0) {
@@ -44,7 +43,7 @@ const DSPillGroupV2 = props => {
44
43
  }
45
44
  }, [pillGroupUid]);
46
45
  const onKeyboardNavigation = useCallback((pillUid, step, e) => {
47
- const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
46
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
48
47
  const pillIndex = elems.findIndex(elem => elem.id === pillUid);
49
48
 
50
49
  if (pillIndex >= 0) {
package/esm/components/styled.js CHANGED
@@ -1,10 +1,9 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import styled from 'styled-components';
3
2
  import { css } from '@elliemae/ds-system';
4
3
  import Grid from '@elliemae/ds-grid';
5
4
  import { DSButtonV2 } from '@elliemae/ds-button';
6
5
 
7
- var _templateObject, _templateObject2;
6
+ /* eslint-disable max-lines */
8
7
  // Common CSS
9
8
  // =============================================================================
10
9
 
@@ -12,38 +11,76 @@ const borderOutside = function (color) {
12
11
  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
13
12
  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
14
13
  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, _ref => {
14
+ return css`
15
+ :after {
16
+ content: ' ';
17
+ position: absolute;
18
+ top: 0px;
19
+ left: 0px;
20
+ right: 0px;
21
+ bottom: 0px;
22
+ border: ${size}px solid ${_ref => {
16
23
  let {
17
24
  disabled,
18
25
  theme
19
26
  } = _ref;
20
27
  return disabled ? theme.colors.neutral[400] : color;
21
- }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
28
+ }};
29
+ border-top-left-radius: ${borderRadius};
30
+ border-top-right-radius: ${borderRadius};
31
+ border-bottom-left-radius: ${borderRadius};
32
+ border-bottom-right-radius: ${borderRadius};
33
+ pointer-events: none;
34
+ z-index: ${zIndex};
35
+ }
36
+ `;
22
37
  };
23
38
 
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 => {
39
+ const commonPillWrapperCss = css`
40
+ height: ${props => props?.size === 'm' ? '24px' : '18px'};
41
+
42
+ position: relative;
43
+
44
+ width: fit-content;
45
+
46
+ background-color: ${_ref2 => {
25
47
  let {
26
48
  theme,
27
49
  disabled
28
50
  } = _ref2;
29
51
  return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
30
- }, _ref3 => {
52
+ }};
53
+
54
+ outline: none;
55
+
56
+ white-space: nowrap;
57
+
58
+ padding: 0px 12px 0 12px;
59
+ border-radius: 12px;
60
+
61
+ font-size: 13px;
62
+ line-height: 1;
63
+ user-select: ${_ref3 => {
31
64
  let {
32
65
  disabled
33
66
  } = _ref3;
34
67
  return disabled ? 'none' : 'auto';
35
- }, _ref4 => {
68
+ }};
69
+ cursor: ${_ref4 => {
36
70
  let {
37
71
  disabled
38
72
  } = _ref4;
39
73
  return disabled ? 'not-allowed' : 'default';
40
- }, _ref5 => {
74
+ }};
75
+ color: ${_ref5 => {
41
76
  let {
42
77
  theme,
43
78
  disabled
44
79
  } = _ref5;
45
80
  return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
46
- }, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
81
+ }};
82
+ ${props => borderOutside(props.theme.colors.brand[300])};
83
+ `; // =============================================================================
47
84
  // Pills wrappers
48
85
  // =============================================================================
49
86
 
@@ -61,7 +98,7 @@ const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
61
98
  theme
62
99
  } = _ref6;
63
100
  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
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"));
101
+ }, 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`);
65
102
  const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
66
103
  componentId: "sc-j0tlch-3"
67
104
  })(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
package/esm/components/types/DropdownPill.js CHANGED
@@ -29,7 +29,7 @@ const DropdownPill = /*#__PURE__*/React.memo(_ref => {
29
29
  onDropdownClick
30
30
  } = _ref;
31
31
  const chevronRef = useRef(null);
32
- const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
32
+ const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
33
33
  const TextComponent = labelTruncated ? _ref2 => {
34
34
  let {
35
35
  children
package/esm/components/types/InputPill.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
2
  import React, { useRef, useMemo, useCallback, useState } from 'react';
4
3
  import { uid } from 'uid';
5
4
  import { CloseXsmall } from '@elliemae/ds-icons';
@@ -20,7 +19,7 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
20
19
  } = _ref;
21
20
  const ref = useRef(null);
22
21
  const InputComponent = useMemo(() => inputRender, [inputRender]);
23
- const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
22
+ const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
24
23
  const onCloseIconClick = useCallback(e => {
25
24
  if ([undefined, 'Enter', 'Space'].includes(e.code)) {
26
25
  e.preventDefault();
package/esm/components/types/RemovablePill.js CHANGED
@@ -23,7 +23,7 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
23
23
  onKeyboardRemove,
24
24
  onKeyboardNavigation
25
25
  } = useContext(DSPillGroupV2Context);
26
- const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
26
+ const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
27
27
  const TextComponent = labelTruncated ? _ref2 => {
28
28
  let {
29
29
  children
@@ -66,7 +66,7 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
66
66
  innerRef: innerRef,
67
67
  onClick: onRemove,
68
68
  onKeyDown: onKeyDown,
69
- "aria-label": "Remove ".concat(label),
69
+ "aria-label": `Remove ${label}`,
70
70
  type: "right",
71
71
  tabIndex: tabIndex
72
72
  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
package/esm/deprecated/DropdownPill.js CHANGED
@@ -1,12 +1,11 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
1
  import 'core-js/modules/esnext.async-iterator.filter.js';
6
2
  import 'core-js/modules/esnext.iterator.constructor.js';
7
3
  import 'core-js/modules/esnext.iterator.filter.js';
8
4
  import 'core-js/modules/esnext.async-iterator.for-each.js';
9
5
  import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
7
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
10
9
  import { useRef, useState } from 'react';
11
10
  import { PropTypes, describe } from 'react-desc';
12
11
  import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js CHANGED
@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
5
5
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
6
6
  import 'core-js/modules/esnext.async-iterator.map.js';
7
7
  import 'core-js/modules/esnext.iterator.map.js';
8
- import 'core-js/modules/web.dom-collections.iterator.js';
9
8
  import 'core-js/modules/esnext.async-iterator.filter.js';
10
9
  import 'core-js/modules/esnext.iterator.constructor.js';
11
10
  import 'core-js/modules/esnext.iterator.filter.js';
package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
4
  import 'core-js/modules/esnext.async-iterator.filter.js';
6
5
  import 'core-js/modules/esnext.iterator.constructor.js';
7
6
  import 'core-js/modules/esnext.iterator.filter.js';
@@ -136,7 +135,7 @@ function LabeledDropdownMultiPills(_ref) {
136
135
 
137
136
  return null;
138
137
  }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx(OverflowPill, {
139
- label: "+ ".concat(selectedOptions.length - overflowQuantity),
138
+ label: `+ ${selectedOptions.length - overflowQuantity}`,
140
139
  options: overflowOptions
141
140
  })]
142
141
  });
package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
4
  import 'core-js/modules/esnext.async-iterator.find.js';
6
5
  import 'core-js/modules/esnext.iterator.constructor.js';
7
6
  import 'core-js/modules/esnext.iterator.find.js';
@@ -132,7 +131,7 @@ function LabeledDropdownSinglePill(_ref) {
132
131
 
133
132
  return /*#__PURE__*/jsxs(Fragment, {
134
133
  children: [/*#__PURE__*/jsx(DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
135
- label: !labelIsValue ? label : optionValue === null || optionValue === void 0 ? void 0 : optionValue.label,
134
+ label: !labelIsValue ? label : optionValue?.label,
136
135
  maxWidth: maxWidth,
137
136
  minWidth: minWidth,
138
137
  onSelectMenuItem: selectOption,
@@ -144,7 +143,7 @@ function LabeledDropdownSinglePill(_ref) {
144
143
  closeOnClick: true
145
144
  })],
146
145
  selection: {
147
- 'multi-selection-views': optionValue ? [optionValue === null || optionValue === void 0 ? void 0 : optionValue.id] : ''
146
+ 'multi-selection-views': optionValue ? [optionValue?.id] : ''
148
147
  },
149
148
  variant: "title"
150
149
  })), renderSelection()]
package/esm/deprecated/OverflowPill.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
2
  import 'core-js/modules/esnext.async-iterator.for-each.js';
4
3
  import 'core-js/modules/esnext.iterator.constructor.js';
5
4
  import 'core-js/modules/esnext.iterator.for-each.js';
@@ -22,9 +21,9 @@ function OverflowPill(_ref) {
22
21
  let text = '';
23
22
  options.forEach(option => {
24
23
  if (!tooltipText || option === options[0]) {
25
- text = "".concat(option.label);
24
+ text = `${option.label}`;
26
25
  } else {
27
- text = text.concat(", ".concat(option.label));
26
+ text = text.concat(`, ${option.label}`);
28
27
  }
29
28
  });
30
29
  setTooltipText(text);
package/esm/deprecated/ReadOnlyPill.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
2
  import { useRef, useState } from 'react';
4
3
  import { PropTypes, describe } from 'react-desc';
5
4
  import { InfoCircleSmall } from '@elliemae/ds-icons';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pills",
3
- "version": "2.4.2-rc.9",
3
+ "version": "2.4.2",
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.4.2-rc.9",
148
- "@elliemae/ds-classnames": "2.4.2-rc.9",
149
- "@elliemae/ds-dropdownmenu": "2.4.2-rc.9",
150
- "@elliemae/ds-form": "2.4.2-rc.9",
151
- "@elliemae/ds-grid": "2.4.2-rc.9",
152
- "@elliemae/ds-icons": "2.4.2-rc.9",
153
- "@elliemae/ds-modal": "2.4.2-rc.9",
154
- "@elliemae/ds-popover": "2.4.2-rc.9",
155
- "@elliemae/ds-props-helpers": "2.4.2-rc.9",
156
- "@elliemae/ds-shared": "2.4.2-rc.9",
157
- "@elliemae/ds-system": "2.4.2-rc.9",
158
- "@elliemae/ds-tooltip": "2.4.2-rc.9",
159
- "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.9",
160
- "@elliemae/ds-utilities": "2.4.2-rc.9",
147
+ "@elliemae/ds-button": "2.4.2",
148
+ "@elliemae/ds-classnames": "2.4.2",
149
+ "@elliemae/ds-dropdownmenu": "2.4.2",
150
+ "@elliemae/ds-form": "2.4.2",
151
+ "@elliemae/ds-grid": "2.4.2",
152
+ "@elliemae/ds-icons": "2.4.2",
153
+ "@elliemae/ds-modal": "2.4.2",
154
+ "@elliemae/ds-popover": "2.4.2",
155
+ "@elliemae/ds-props-helpers": "2.4.2",
156
+ "@elliemae/ds-shared": "2.4.2",
157
+ "@elliemae/ds-system": "2.4.2",
158
+ "@elliemae/ds-tooltip": "2.4.2",
159
+ "@elliemae/ds-truncated-tooltip-text": "2.4.2",
160
+ "@elliemae/ds-utilities": "2.4.2",
161
161
  "prop-types": "~15.7.2",
162
162
  "react-desc": "~4.1.3",
163
163
  "uid": "~2.0.0"