@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.
- package/cjs/components/Pill.js +6 -1
- package/cjs/components/PillButton.js +6 -1
- package/cjs/components/PillGroup.js +20 -7
- package/cjs/components/styled.js +24 -8
- package/cjs/components/types/DropdownPill.js +42 -22
- package/cjs/components/types/InputPill.js +14 -12
- package/cjs/components/types/LabelPill.js +30 -15
- package/cjs/components/types/ReadOnlyPill.js +22 -9
- package/cjs/components/types/RemovablePill.js +23 -13
- package/cjs/components/types/ValuePill.js +37 -22
- package/cjs/deprecated/DropdownPill.js +7 -3
- package/cjs/deprecated/InputPill.js +22 -18
- package/cjs/deprecated/LabeledDropdownPills.js +5 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +17 -8
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +11 -4
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +18 -14
- package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +4 -2
- package/cjs/deprecated/LabeledPills.js +9 -8
- package/cjs/deprecated/OverflowPill.js +9 -5
- package/cjs/deprecated/Pill.js +18 -10
- package/cjs/deprecated/PillGroup.js +25 -17
- package/cjs/deprecated/ReadOnlyPill.js +25 -22
- package/cjs/deprecated/RemovablePill.js +13 -13
- package/cjs/deprecated/index.js +1 -0
- package/cjs/props.js +20 -8
- package/cjs/utils.js +19 -9
- package/esm/components/Pill.js +6 -1
- package/esm/components/PillButton.js +6 -1
- package/esm/components/PillGroup.js +20 -7
- package/esm/components/styled.js +24 -9
- package/esm/components/types/DropdownPill.js +43 -21
- package/esm/components/types/InputPill.js +14 -11
- package/esm/components/types/LabelPill.js +30 -15
- package/esm/components/types/ReadOnlyPill.js +22 -9
- package/esm/components/types/RemovablePill.js +23 -12
- package/esm/components/types/ValuePill.js +38 -23
- package/esm/deprecated/DropdownPill.js +6 -1
- package/esm/deprecated/InputPill.js +19 -12
- package/esm/deprecated/LabeledDropdownPills.js +5 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +14 -5
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +8 -1
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +14 -8
- package/esm/deprecated/LabeledDropdownPillsTypes/utils.js +3 -1
- package/esm/deprecated/LabeledPills.js +9 -8
- package/esm/deprecated/OverflowPill.js +9 -5
- package/esm/deprecated/Pill.js +18 -10
- package/esm/deprecated/PillGroup.js +25 -17
- package/esm/deprecated/ReadOnlyPill.js +25 -21
- package/esm/deprecated/RemovablePill.js +11 -10
- package/esm/deprecated/index.js +1 -1
- package/esm/props.js +18 -4
- package/esm/utils.js +19 -9
- package/package.json +21 -12
- package/types/components/PillGroup.d.ts +8 -2
- package/types/components/styled.d.ts +17 -33
- package/types/deprecated/DropdownPill.d.ts +51 -7
- package/types/deprecated/LabeledDropdownPills.d.ts +65 -9
- package/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +1 -1
- package/types/deprecated/LabeledPills.d.ts +37 -5
- package/types/deprecated/OverflowPill.d.ts +22 -3
- package/types/deprecated/Pill.d.ts +44 -6
- package/types/deprecated/PillGroup.d.ts +36 -5
- package/types/deprecated/ReadOnlyPill.d.ts +43 -6
- package/types/deprecated/RemovablePill.d.ts +37 -6
- package/types/deprecated/index.d.ts +1 -0
- package/types/index.d.ts +1 -1
- 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
|
|
10
|
+
import { CloseXsmall } from '@elliemae/ds-icons';
|
|
6
11
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
7
|
-
import DSInputMask from '@elliemae/ds-form
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
} =
|
|
31
|
-
otherProps = _objectWithoutProperties(
|
|
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(
|
|
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
|
|
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
|
-
|
|
72
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
67
|
-
|
|
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
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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('');
|
package/esm/deprecated/Pill.js
CHANGED
|
@@ -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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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(
|
|
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
|
-
} =
|
|
34
|
-
otherProps = _objectWithoutProperties(
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
|
5
|
-
import
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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(
|
|
35
|
+
rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
|
|
35
36
|
role: "button",
|
|
36
37
|
"data-testid": "remove-pill-button",
|
|
37
38
|
className: "remove-pill-button",
|
package/esm/deprecated/index.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
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.
|
|
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-
|
|
148
|
-
"@elliemae/ds-
|
|
149
|
-
"@elliemae/ds-
|
|
150
|
-
"@elliemae/ds-
|
|
151
|
-
"@elliemae/ds-
|
|
152
|
-
"@elliemae/ds-
|
|
153
|
-
"@elliemae/ds-
|
|
154
|
-
"@elliemae/ds-
|
|
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
|
-
"
|
|
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.
|
|
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:
|
|
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 };
|