@elliemae/ds-pills 2.0.0-alpha.11 → 2.0.0-alpha.12

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 (67) hide show
  1. package/cjs/components/Pill.js +6 -1
  2. package/cjs/components/PillButton.js +6 -1
  3. package/cjs/components/PillGroup.js +20 -7
  4. package/cjs/components/styled.js +24 -8
  5. package/cjs/components/types/DropdownPill.js +42 -22
  6. package/cjs/components/types/InputPill.js +14 -12
  7. package/cjs/components/types/LabelPill.js +30 -15
  8. package/cjs/components/types/ReadOnlyPill.js +22 -9
  9. package/cjs/components/types/RemovablePill.js +23 -13
  10. package/cjs/components/types/ValuePill.js +37 -22
  11. package/cjs/deprecated/DropdownPill.js +7 -3
  12. package/cjs/deprecated/InputPill.js +22 -18
  13. package/cjs/deprecated/LabeledDropdownPills.js +5 -0
  14. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +17 -8
  15. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +11 -4
  16. package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +18 -14
  17. package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +4 -2
  18. package/cjs/deprecated/LabeledPills.js +9 -8
  19. package/cjs/deprecated/OverflowPill.js +9 -5
  20. package/cjs/deprecated/Pill.js +18 -10
  21. package/cjs/deprecated/PillGroup.js +25 -17
  22. package/cjs/deprecated/ReadOnlyPill.js +25 -22
  23. package/cjs/deprecated/RemovablePill.js +13 -13
  24. package/cjs/deprecated/index.js +1 -0
  25. package/cjs/props.js +20 -8
  26. package/cjs/utils.js +19 -9
  27. package/esm/components/Pill.js +6 -1
  28. package/esm/components/PillButton.js +6 -1
  29. package/esm/components/PillGroup.js +20 -7
  30. package/esm/components/styled.js +24 -9
  31. package/esm/components/types/DropdownPill.js +43 -21
  32. package/esm/components/types/InputPill.js +14 -11
  33. package/esm/components/types/LabelPill.js +30 -15
  34. package/esm/components/types/ReadOnlyPill.js +22 -9
  35. package/esm/components/types/RemovablePill.js +23 -12
  36. package/esm/components/types/ValuePill.js +38 -23
  37. package/esm/deprecated/DropdownPill.js +6 -1
  38. package/esm/deprecated/InputPill.js +19 -12
  39. package/esm/deprecated/LabeledDropdownPills.js +5 -0
  40. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +14 -5
  41. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +8 -1
  42. package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +14 -8
  43. package/esm/deprecated/LabeledDropdownPillsTypes/utils.js +3 -1
  44. package/esm/deprecated/LabeledPills.js +9 -8
  45. package/esm/deprecated/OverflowPill.js +9 -5
  46. package/esm/deprecated/Pill.js +18 -10
  47. package/esm/deprecated/PillGroup.js +25 -17
  48. package/esm/deprecated/ReadOnlyPill.js +25 -21
  49. package/esm/deprecated/RemovablePill.js +11 -10
  50. package/esm/deprecated/index.js +1 -1
  51. package/esm/props.js +18 -4
  52. package/esm/utils.js +19 -9
  53. package/package.json +21 -12
  54. package/types/components/PillGroup.d.ts +8 -2
  55. package/types/components/styled.d.ts +17 -33
  56. package/types/deprecated/DropdownPill.d.ts +51 -7
  57. package/types/deprecated/LabeledDropdownPills.d.ts +65 -9
  58. package/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +1 -1
  59. package/types/deprecated/LabeledPills.d.ts +37 -5
  60. package/types/deprecated/OverflowPill.d.ts +22 -3
  61. package/types/deprecated/Pill.d.ts +44 -6
  62. package/types/deprecated/PillGroup.d.ts +36 -5
  63. package/types/deprecated/ReadOnlyPill.d.ts +43 -6
  64. package/types/deprecated/RemovablePill.d.ts +37 -6
  65. package/types/deprecated/index.d.ts +1 -0
  66. package/types/index.d.ts +1 -1
  67. package/types/props.d.ts +69 -16
@@ -1,11 +1,15 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
7
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
8
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
9
  import 'react';
5
- import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
10
+ import { CloseXsmall } from '@elliemae/ds-icons';
6
11
  import { aggregatedClasses } from '@elliemae/ds-classnames';
7
- import DSInputMask from '@elliemae/ds-form/InputMask';
8
- import DSInput from '@elliemae/ds-form/Input';
12
+ import { DSInput, DSInputMask } from '@elliemae/ds-form';
9
13
  import { Pill } from './Pill.js';
10
14
  import { jsx } from 'react/jsx-runtime';
11
15
 
@@ -14,12 +18,15 @@ const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "val
14
18
  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
19
 
16
20
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
17
- const StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({
18
- value
19
- }) => ({
20
- value
21
- }));
22
- function InputPill(_ref) {
21
+ const StyledInputPill = aggregatedClasses(Pill)('input-pill', null, _ref => {
22
+ let {
23
+ value
24
+ } = _ref;
25
+ return {
26
+ value
27
+ };
28
+ });
29
+ function InputPill(_ref2) {
23
30
  let {
24
31
  containerProps = {},
25
32
  placeholder = 'Enter Value',
@@ -27,8 +34,8 @@ function InputPill(_ref) {
27
34
  onRemove,
28
35
  value,
29
36
  type
30
- } = _ref,
31
- otherProps = _objectWithoutProperties(_ref, _excluded);
37
+ } = _ref2,
38
+ otherProps = _objectWithoutProperties(_ref2, _excluded);
32
39
 
33
40
  let TypeOfInput = DSInput; // TODO: implement the DSTimeInput, see how because it returns a moment()
34
41
  // TODO: implement the DSDateInput
@@ -55,7 +62,7 @@ function InputPill(_ref) {
55
62
  placeholder: placeholder,
56
63
  value: value
57
64
  }, otherProps)),
58
- rightAddon: value && /*#__PURE__*/_jsx(CloseIcon, {
65
+ rightAddon: value && /*#__PURE__*/_jsx(CloseXsmall, {
59
66
  className: "remove-pill-button",
60
67
  "data-testid": "remove-pill-button",
61
68
  onClick: onRemove
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
7
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
8
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -1,9 +1,16 @@
1
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
2
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
3
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
4
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
5
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
6
+ import 'core-js/modules/esnext.async-iterator.map.js';
7
+ import 'core-js/modules/esnext.iterator.map.js';
4
8
  import 'core-js/modules/web.dom-collections.iterator.js';
9
+ import 'core-js/modules/esnext.async-iterator.filter.js';
10
+ import 'core-js/modules/esnext.iterator.constructor.js';
11
+ import 'core-js/modules/esnext.iterator.filter.js';
5
12
  import { createElement } from 'react';
6
- import { isFunction, addOrRemove } from '@elliemae/ds-utilities/utils';
13
+ import { isFunction, addOrRemove } from '@elliemae/ds-utilities';
7
14
  import { PillGroup } from '../PillGroup.js';
8
15
  import { RemovablePill } from '../RemovablePill.js';
9
16
  import { DropdownPill } from '../DropdownPill.js';
@@ -67,10 +74,12 @@ function LabeledDropdownCascadeMenuPill(_ref) {
67
74
  const selectionValues = selection[selectionId] || '';
68
75
  const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
69
76
 
70
- const handleSelectChange = ({
71
- item,
72
- group
73
- }) => {
77
+ const handleSelectChange = _ref2 => {
78
+ let {
79
+ item,
80
+ group
81
+ } = _ref2;
82
+
74
83
  if (isFunction(onChange)) {
75
84
  const nextSelection = group ? {
76
85
  [group.id]: addOrRemove([...(selection[group.id] || [])], item, o => o.id)
@@ -2,9 +2,16 @@ 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
4
  import 'core-js/modules/web.dom-collections.iterator.js';
5
+ import 'core-js/modules/esnext.async-iterator.filter.js';
6
+ import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.filter.js';
8
+ import 'core-js/modules/esnext.async-iterator.map.js';
9
+ import 'core-js/modules/esnext.iterator.map.js';
10
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
11
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
12
  import { useState, useEffect, useCallback } from 'react';
6
13
  import { find } from 'lodash';
7
- import { isFunction, addOrRemove } from '@elliemae/ds-utilities/utils';
14
+ import { isFunction, addOrRemove } from '@elliemae/ds-utilities';
8
15
  import { RemovablePill } from '../RemovablePill.js';
9
16
  import { Pill } from '../Pill.js';
10
17
  import { OverflowPill } from '../OverflowPill.js';
@@ -2,10 +2,15 @@ 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
4
  import 'core-js/modules/web.dom-collections.iterator.js';
5
+ import 'core-js/modules/esnext.async-iterator.find.js';
6
+ import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.find.js';
8
+ import 'core-js/modules/esnext.async-iterator.filter.js';
9
+ import 'core-js/modules/esnext.iterator.filter.js';
10
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
11
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
12
  import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
6
- import usePrevious from '@elliemae/ds-utilities/hooks/usePrevious';
7
- import useShouldRecalculate from '@elliemae/ds-utilities/hooks/useShouldRecalculate';
8
- import { isFunction, isString } from '@elliemae/ds-utilities/utils';
13
+ import { usePrevious, useShouldRecalculate, isFunction, isString } from '@elliemae/ds-utilities';
9
14
  import { DropdownPill } from '../DropdownPill.js';
10
15
  import { InputPill } from '../InputPill.js';
11
16
  import { Pill } from '../Pill.js';
@@ -62,11 +67,12 @@ function LabeledDropdownSinglePill(_ref) {
62
67
  setOptionValue(option);
63
68
  onSelect(option);
64
69
  }, [onChange, onSelect]);
65
- const onChangeInputValue = useCallback(({
66
- target: {
67
- value: inputValue
68
- }
69
- }) => {
70
+ const onChangeInputValue = useCallback(_ref2 => {
71
+ let {
72
+ target: {
73
+ value: inputValue
74
+ }
75
+ } = _ref2;
70
76
  const {
71
77
  onChangeInput
72
78
  } = optionValue;
@@ -1,4 +1,6 @@
1
- import { isEqual } from '@elliemae/ds-utilities/utils';
1
+ import 'core-js/modules/esnext.async-iterator.map.js';
2
+ import 'core-js/modules/esnext.iterator.map.js';
3
+ import { isEqual } from '@elliemae/ds-utilities';
2
4
  import { omit } from 'lodash';
3
5
 
4
6
  const hasOptionChanged = (prevOptions, options) => {
@@ -5,14 +5,15 @@ import { PillGroup } from './PillGroup.js';
5
5
  import { RemovablePill } from './RemovablePill.js';
6
6
  import { Pill } from './Pill.js';
7
7
 
8
- function LabeledPills({
9
- children,
10
- label = '',
11
- leftAddon,
12
- onFocusGroupSet,
13
- onFocusNextGroup,
14
- onFocusPreviousGroup
15
- }) {
8
+ function LabeledPills(_ref) {
9
+ let {
10
+ children,
11
+ label = '',
12
+ leftAddon,
13
+ onFocusGroupSet,
14
+ onFocusNextGroup,
15
+ onFocusPreviousGroup
16
+ } = _ref;
16
17
  return /*#__PURE__*/_jsx(PillGroup, {
17
18
  onFocusGroupSet: onFocusGroupSet,
18
19
  onFocusNextGroup: onFocusNextGroup,
@@ -1,16 +1,20 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
4
+ import 'core-js/modules/esnext.iterator.constructor.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
3
6
  import { useRef, useState, useEffect } from 'react';
4
7
  import { PropTypes, describe } from 'react-desc';
5
8
  import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
6
9
  import DSTooltip from '@elliemae/ds-tooltip';
7
10
  import { Pill } from './Pill.js';
8
11
 
9
- function OverflowPill({
10
- containerProps = {},
11
- label = '',
12
- options = []
13
- }) {
12
+ function OverflowPill(_ref) {
13
+ let {
14
+ containerProps = {},
15
+ label = '',
16
+ options = []
17
+ } = _ref;
14
18
  const ref = useRef(null);
15
19
  const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
16
20
  const [tooltipText, setTooltipText] = useState('');
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
8
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -12,17 +17,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
12
17
 
13
18
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
14
19
  const pillBlockName = 'pill';
15
- const PillWrapper = aggregatedClasses('div')(pillBlockName, null, ({
16
- size,
17
- variant
18
- }) => ({
19
- [variant]: !!variant,
20
- [size]: !!size
21
- }));
20
+ const PillWrapper = aggregatedClasses('div')(pillBlockName, null, _ref => {
21
+ let {
22
+ size,
23
+ variant
24
+ } = _ref;
25
+ return {
26
+ [variant]: !!variant,
27
+ [size]: !!size
28
+ };
29
+ });
22
30
  const PillLabel = aggregatedClasses('span')(pillBlockName, 'label');
23
31
  const PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');
24
32
 
25
- function Pill(_ref) {
33
+ function Pill(_ref2) {
26
34
  let {
27
35
  containerProps = {},
28
36
  label = '',
@@ -30,8 +38,8 @@ function Pill(_ref) {
30
38
  rightAddon,
31
39
  variant = 'value',
32
40
  size = 'm'
33
- } = _ref,
34
- otherProps = _objectWithoutProperties(_ref, _excluded);
41
+ } = _ref2,
42
+ otherProps = _objectWithoutProperties(_ref2, _excluded);
35
43
 
36
44
  return /*#__PURE__*/jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
37
45
  classProps: {
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
7
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
8
  import 'react';
@@ -12,23 +17,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
12
17
  const pillGroupBlockName = 'pill-group';
13
18
  const Container = aggregatedClasses('div')(pillGroupBlockName);
14
19
 
15
- const PillGroup = ({
16
- containerProps = {},
17
- onFocusNextGroup,
18
- onFocusPreviousGroup,
19
- onFocusGroupSet,
20
- children
21
- }) => /*#__PURE__*/_jsx(FocusGroupProvider, {
22
- keyBindings: {
23
- Tab: 'next'
24
- },
25
- onFocusGroupSet: onFocusGroupSet,
26
- onFocusNextGroup: onFocusNextGroup,
27
- onFocusPreviousGroup: onFocusPreviousGroup,
28
- orientation: "horizontal"
29
- }, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
30
- children: children
31
- })));
20
+ const PillGroup = _ref => {
21
+ let {
22
+ containerProps = {},
23
+ onFocusNextGroup,
24
+ onFocusPreviousGroup,
25
+ onFocusGroupSet,
26
+ children
27
+ } = _ref;
28
+ return /*#__PURE__*/_jsx(FocusGroupProvider, {
29
+ keyBindings: {
30
+ Tab: 'next'
31
+ },
32
+ onFocusGroupSet: onFocusGroupSet,
33
+ onFocusNextGroup: onFocusNextGroup,
34
+ onFocusPreviousGroup: onFocusPreviousGroup,
35
+ orientation: "horizontal"
36
+ }, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
37
+ children: children
38
+ })));
39
+ };
32
40
 
33
41
  const props = {
34
42
  /** props injected to component wrapper */
@@ -2,20 +2,21 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import { useRef, useState } from 'react';
4
4
  import { PropTypes, describe } from 'react-desc';
5
- import InfoCircleSmall from '@elliemae/ds-icons/InfoCircleSmall';
5
+ import { InfoCircleSmall } from '@elliemae/ds-icons';
6
6
  import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
7
7
  import Popover from '@elliemae/ds-popover';
8
8
  import { Pill } from './Pill.js';
9
9
  import { jsxs, Fragment } from 'react/jsx-runtime';
10
10
 
11
- const ReadOnlyPill = ({
12
- containerProps = {},
13
- modalContent = '',
14
- label = '',
15
- leftAddon,
16
- modalTitle = '',
17
- tooltipText = ''
18
- }) => {
11
+ const ReadOnlyPill = _ref => {
12
+ let {
13
+ containerProps = {},
14
+ modalContent = '',
15
+ label = '',
16
+ leftAddon,
17
+ modalTitle = '',
18
+ tooltipText = ''
19
+ } = _ref;
19
20
  const ref = useRef(null);
20
21
  const [isModalOpen, setIsModalOpen] = useState(false);
21
22
  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -37,18 +38,21 @@ const ReadOnlyPill = ({
37
38
  content: tooltipText,
38
39
  placement: "top",
39
40
  showArrow: true,
40
- renderTrigger: ({
41
- ref
42
- }) => /*#__PURE__*/_jsx(InfoCircleSmall, {
43
- role: "button",
44
- "data-testid": "read-only-info-btn",
45
- className: "remove-pill-button",
46
- onClick: toggle,
47
- onMouseEnter: () => setIsTooltipOpen(true),
48
- onMouseLeave: () => setIsTooltipOpen(false),
49
- color: ['brand-primary', '600'],
50
- innerRef: ref
51
- })
41
+ renderTrigger: _ref2 => {
42
+ let {
43
+ ref
44
+ } = _ref2;
45
+ return /*#__PURE__*/_jsx(InfoCircleSmall, {
46
+ role: "button",
47
+ "data-testid": "read-only-info-btn",
48
+ className: "remove-pill-button",
49
+ onClick: toggle,
50
+ onMouseEnter: () => setIsTooltipOpen(true),
51
+ onMouseLeave: () => setIsTooltipOpen(false),
52
+ color: ['brand-primary', '600'],
53
+ innerRef: ref
54
+ });
55
+ }
52
56
  }),
53
57
  tabIndex: -1
54
58
  }), /*#__PURE__*/_jsx(DSModal, {
@@ -1,18 +1,19 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import { useRef } from 'react';
3
3
  import { PropTypes, describe } from 'react-desc';
4
- import { isFunction } from '@elliemae/ds-utilities/utils';
5
- import CloseIcon from '@elliemae/ds-icons/CloseXsmall';
4
+ import { isFunction } from '@elliemae/ds-utilities';
5
+ import { CloseXsmall } from '@elliemae/ds-icons';
6
6
  import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
7
7
  import { Pill } from './Pill.js';
8
8
 
9
- function RemovablePill({
10
- containerProps = {},
11
- label = '',
12
- onRemove,
13
- size = 'm',
14
- leftAddon
15
- }) {
9
+ function RemovablePill(_ref) {
10
+ let {
11
+ containerProps = {},
12
+ label = '',
13
+ onRemove,
14
+ size = 'm',
15
+ leftAddon
16
+ } = _ref;
16
17
  const ref = useRef(null);
17
18
  const {
18
19
  focusPrevious
@@ -31,7 +32,7 @@ function RemovablePill({
31
32
  if (isFunction(focusPrevious)) focusPrevious();
32
33
  }
33
34
  },
34
- rightAddon: /*#__PURE__*/_jsx(CloseIcon, {
35
+ rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
35
36
  role: "button",
36
37
  "data-testid": "remove-pill-button",
37
38
  className: "remove-pill-button",
@@ -1,4 +1,4 @@
1
- export { DSPillWithSchema, Pill } from './Pill.js';
1
+ export { DSPillWithSchema, Pill, Pill as default } from './Pill.js';
2
2
  export { Container, DSPillGroupWithSchema, PillGroup } from './PillGroup.js';
3
3
  export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills } from './LabeledDropdownPills.js';
4
4
  export { DSLabeledPillsWithSchema, LabeledPills } from './LabeledPills.js';
package/esm/props.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropTypes } from 'react-desc';
2
- import DSInput from '@elliemae/ds-form/Input';
2
+ import { DSInput } from '@elliemae/ds-form';
3
3
 
4
4
  /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
5
5
  const pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
@@ -7,7 +7,9 @@ const DSPillV2PropTypes = {
7
7
  label: PropTypes.string.description('Label to show in the pill').isRequired,
8
8
  type: pillTypes.description('The type of pill that you want to render').isRequired,
9
9
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)').defaultValue(() => null),
10
+ size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),
10
11
  ariaLabel: PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
12
+ labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),
11
13
  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),
12
14
  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),
13
15
  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),
@@ -16,16 +18,23 @@ const DSPillV2PropTypes = {
16
18
  onInputChange: PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
17
19
  onInputClear: PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
18
20
  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
19
- dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({})
21
+ dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
22
+ onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
20
23
  };
21
24
  const DSPillButtonPropTypes = {
22
25
  type: PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
23
26
  width: PropTypes.string.description('Width of the button').defaultValue('100%'),
24
27
  height: PropTypes.string.description('Height of the button').defaultValue('100%')
25
28
  };
29
+ const DSPillGroupPropTypes = {
30
+ width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),
31
+ innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the pill group wrapper').defaultValue(() => null)
32
+ };
26
33
  const DSPillV2DefaultProps = {
27
34
  innerRef: () => null,
28
35
  ariaLabel: '',
36
+ size: 'm',
37
+ labelTruncated: true,
29
38
  tooltipValue: '',
30
39
  iconLeft: null,
31
40
  iconRight: null,
@@ -35,12 +44,17 @@ const DSPillV2DefaultProps = {
35
44
  onInputClear: () => null,
36
45
  inputWidth: 72,
37
46
  inputRender: DSInput,
38
- dropdownProps: {}
47
+ dropdownProps: {},
48
+ onDropdownClick: () => null
39
49
  };
40
50
  const DSPillButtonDefaultProps = {
41
51
  type: 'right',
42
52
  width: '100%',
43
53
  height: '100%'
44
54
  };
55
+ const DSPillGroupDefaultProps = {
56
+ width: 'fit-content',
57
+ innerRef: () => null
58
+ };
45
59
 
46
- export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };
60
+ export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillGroupDefaultProps, DSPillGroupPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };
package/esm/utils.js CHANGED
@@ -1,14 +1,24 @@
1
- const setMultipleRefs = (...refs) => _ref => {
2
- refs.forEach(ref => {
3
- if (!ref || !_ref) return;
1
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.for-each.js';
4
4
 
5
- if (typeof ref === 'function') {
6
- ref(_ref);
7
- return;
8
- }
5
+ const setMultipleRefs = function () {
6
+ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
7
+ refs[_key] = arguments[_key];
8
+ }
9
9
 
10
- if (ref) ref.current = _ref;
11
- });
10
+ return _ref => {
11
+ refs.forEach(ref => {
12
+ if (!ref || !_ref) return;
13
+
14
+ if (typeof ref === 'function') {
15
+ ref(_ref);
16
+ return;
17
+ }
18
+
19
+ if (ref) ref.current = _ref;
20
+ });
21
+ };
12
22
  };
13
23
 
14
24
  export { setMultipleRefs };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pills",
3
- "version": "2.0.0-alpha.11",
3
+ "version": "2.0.0-alpha.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pills",
6
6
  "module": "./esm/index.js",
@@ -144,25 +144,34 @@
144
144
  "build": "node ../../scripts/build/build.js"
145
145
  },
146
146
  "dependencies": {
147
- "@elliemae/ds-classnames": "2.0.0-alpha.11",
148
- "@elliemae/ds-dropdownmenu": "2.0.0-alpha.11",
149
- "@elliemae/ds-form": "2.0.0-alpha.11",
150
- "@elliemae/ds-icons": "2.0.0-alpha.11",
151
- "@elliemae/ds-modal": "2.0.0-alpha.11",
152
- "@elliemae/ds-shared": "2.0.0-alpha.11",
153
- "@elliemae/ds-tooltip": "2.0.0-alpha.11",
154
- "@elliemae/ds-utilities": "2.0.0-alpha.11",
147
+ "@elliemae/ds-button": "2.0.0-alpha.12",
148
+ "@elliemae/ds-classnames": "2.0.0-alpha.12",
149
+ "@elliemae/ds-dropdownmenu": "2.0.0-alpha.12",
150
+ "@elliemae/ds-form": "2.0.0-alpha.12",
151
+ "@elliemae/ds-grid": "2.0.0-alpha.12",
152
+ "@elliemae/ds-icons": "2.0.0-alpha.12",
153
+ "@elliemae/ds-modal": "2.0.0-alpha.12",
154
+ "@elliemae/ds-popover": "2.0.0-alpha.12",
155
+ "@elliemae/ds-props-helpers": "2.0.0-alpha.12",
156
+ "@elliemae/ds-shared": "2.0.0-alpha.12",
157
+ "@elliemae/ds-system": "2.0.0-alpha.12",
158
+ "@elliemae/ds-tooltip": "2.0.0-alpha.12",
159
+ "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.12",
160
+ "@elliemae/ds-utilities": "2.0.0-alpha.12",
155
161
  "prop-types": "~15.7.2",
156
- "react-desc": "~4.1.3"
162
+ "react-desc": "~4.1.3",
163
+ "uid": "~2.0.0"
157
164
  },
158
165
  "devDependencies": {
159
- "styled-components": "~5.3.1"
166
+ "@testing-library/react": "~12.1.2",
167
+ "@testing-library/user-event": "~13.5.0",
168
+ "styled-components": "~5.3.3"
160
169
  },
161
170
  "peerDependencies": {
162
171
  "lodash": "^4.17.21",
163
172
  "react": "^17.0.2",
164
173
  "react-dom": "^17.0.2",
165
- "styled-components": "^5.3.1"
174
+ "styled-components": "^5.3.3"
166
175
  },
167
176
  "publishConfig": {
168
177
  "access": "public",
@@ -1,7 +1,13 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
2
  import React from 'react';
3
+ import { DSPillGroupProps } from '../index.d';
2
4
  export declare const DSPillGroupV2Context: React.Context<{
3
5
  onKeyboardRemove: (pillUid: string) => void;
4
6
  }>;
5
- declare const DSPillGroupV2: React.ComponentType;
6
- declare const DSPillGroupV2WithSchema: any;
7
+ declare const DSPillGroupV2: React.ComponentType<DSPillGroupProps>;
8
+ declare const DSPillGroupV2WithSchema: {
9
+ (props?: React.PropsWithChildren<DSPillGroupProps> | undefined): JSX.Element;
10
+ propTypes: unknown;
11
+ toTypescript: () => import("react-desc").TypescriptSchema;
12
+ };
7
13
  export { DSPillGroupV2, DSPillGroupV2WithSchema };