@elliemae/ds-pills 2.0.0-alpha.10 → 2.0.0-alpha.14
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 +7 -2
- package/cjs/components/PillGroup.js +23 -9
- package/cjs/components/styled.js +24 -8
- package/cjs/components/types/DropdownPill.js +43 -23
- package/cjs/components/types/InputPill.js +16 -13
- package/cjs/components/types/LabelPill.js +30 -15
- package/cjs/components/types/ReadOnlyPill.js +22 -9
- package/cjs/components/types/RemovablePill.js +25 -15
- package/cjs/components/types/ValuePill.js +37 -22
- package/cjs/deprecated/DropdownPill.js +8 -3
- package/cjs/deprecated/InputPill.js +22 -18
- package/cjs/deprecated/LabeledDropdownPills.js +5 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +18 -8
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +13 -5
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +19 -14
- package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +4 -2
- package/cjs/deprecated/LabeledPills.js +9 -8
- package/cjs/deprecated/OverflowPill.js +12 -7
- package/cjs/deprecated/Pill.js +18 -10
- package/cjs/deprecated/PillGroup.js +25 -17
- package/cjs/deprecated/ReadOnlyPill.js +26 -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 +7 -2
- package/esm/components/PillGroup.js +23 -9
- package/esm/components/styled.js +24 -9
- package/esm/components/types/DropdownPill.js +44 -22
- package/esm/components/types/InputPill.js +16 -12
- package/esm/components/types/LabelPill.js +30 -15
- package/esm/components/types/ReadOnlyPill.js +22 -9
- package/esm/components/types/RemovablePill.js +25 -14
- package/esm/components/types/ValuePill.js +38 -23
- package/esm/deprecated/DropdownPill.js +7 -1
- package/esm/deprecated/InputPill.js +19 -12
- package/esm/deprecated/LabeledDropdownPills.js +5 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +15 -5
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +10 -2
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +15 -8
- package/esm/deprecated/LabeledDropdownPillsTypes/utils.js +3 -1
- package/esm/deprecated/LabeledPills.js +9 -8
- package/esm/deprecated/OverflowPill.js +12 -7
- package/esm/deprecated/Pill.js +18 -10
- package/esm/deprecated/PillGroup.js +25 -17
- package/esm/deprecated/ReadOnlyPill.js +26 -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
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
|
@@ -5,10 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
7
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
14
|
var React = require('react');
|
|
9
15
|
var reactDesc = require('react-desc');
|
|
10
16
|
var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
|
|
11
|
-
var
|
|
17
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
12
18
|
var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
|
|
13
19
|
var Pill = require('./Pill.js');
|
|
14
20
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -19,7 +25,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
19
25
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
26
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
21
27
|
var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
|
|
22
|
-
var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
|
|
23
28
|
var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
|
|
24
29
|
|
|
25
30
|
var _ChevronDown;
|
|
@@ -68,7 +73,7 @@ function DropdownPill(_ref) {
|
|
|
68
73
|
label: label,
|
|
69
74
|
rightAddon: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
70
75
|
ref: chevronRef,
|
|
71
|
-
children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx__default["default"](
|
|
76
|
+
children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
|
|
72
77
|
className: "dropdown-pill-chevron-down",
|
|
73
78
|
"data-testid": "dropdown-pill-button"
|
|
74
79
|
}))
|
|
@@ -2,14 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
13
|
require('react');
|
|
9
|
-
var
|
|
14
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
10
15
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
11
|
-
var
|
|
12
|
-
var DSInput = require('@elliemae/ds-form/Input');
|
|
16
|
+
var dsForm = require('@elliemae/ds-form');
|
|
13
17
|
var Pill = require('./Pill.js');
|
|
14
18
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
19
|
|
|
@@ -18,21 +22,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
18
22
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
19
23
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
24
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
21
|
-
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
|
|
22
|
-
var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
|
|
23
|
-
var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
|
|
24
25
|
|
|
25
26
|
const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "value", "type"];
|
|
26
27
|
|
|
27
28
|
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; }
|
|
28
29
|
|
|
29
30
|
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__default["default"](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; }
|
|
30
|
-
const StyledInputPill = dsClassnames.aggregatedClasses(Pill.Pill)('input-pill', null,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
const StyledInputPill = dsClassnames.aggregatedClasses(Pill.Pill)('input-pill', null, _ref => {
|
|
32
|
+
let {
|
|
33
|
+
value
|
|
34
|
+
} = _ref;
|
|
35
|
+
return {
|
|
36
|
+
value
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
function InputPill(_ref2) {
|
|
36
40
|
let {
|
|
37
41
|
containerProps = {},
|
|
38
42
|
placeholder = 'Enter Value',
|
|
@@ -40,19 +44,19 @@ function InputPill(_ref) {
|
|
|
40
44
|
onRemove,
|
|
41
45
|
value,
|
|
42
46
|
type
|
|
43
|
-
} =
|
|
44
|
-
otherProps = _objectWithoutProperties__default["default"](
|
|
47
|
+
} = _ref2,
|
|
48
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
45
49
|
|
|
46
|
-
let TypeOfInput =
|
|
50
|
+
let TypeOfInput = dsForm.DSInput; // TODO: implement the DSTimeInput, see how because it returns a moment()
|
|
47
51
|
// TODO: implement the DSDateInput
|
|
48
52
|
|
|
49
53
|
switch (type) {
|
|
50
54
|
case 'inputText':
|
|
51
|
-
TypeOfInput =
|
|
55
|
+
TypeOfInput = dsForm.DSInput;
|
|
52
56
|
break;
|
|
53
57
|
|
|
54
58
|
case 'inputMask':
|
|
55
|
-
TypeOfInput =
|
|
59
|
+
TypeOfInput = dsForm.DSInputMask;
|
|
56
60
|
break;
|
|
57
61
|
}
|
|
58
62
|
|
|
@@ -68,7 +72,7 @@ function InputPill(_ref) {
|
|
|
68
72
|
placeholder: placeholder,
|
|
69
73
|
value: value
|
|
70
74
|
}, otherProps)),
|
|
71
|
-
rightAddon: value && /*#__PURE__*/_jsx__default["default"](
|
|
75
|
+
rightAddon: value && /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
|
|
72
76
|
className: "remove-pill-button",
|
|
73
77
|
"data-testid": "remove-pill-button",
|
|
74
78
|
onClick: onRemove
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -3,8 +3,16 @@
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
8
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
14
|
var React = require('react');
|
|
7
|
-
var
|
|
15
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
8
16
|
var PillGroup = require('../PillGroup.js');
|
|
9
17
|
var RemovablePill = require('../RemovablePill.js');
|
|
10
18
|
var DropdownPill = require('../DropdownPill.js');
|
|
@@ -74,13 +82,15 @@ function LabeledDropdownCascadeMenuPill(_ref) {
|
|
|
74
82
|
const selectionValues = selection[selectionId] || '';
|
|
75
83
|
const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
|
|
76
84
|
|
|
77
|
-
const handleSelectChange =
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
85
|
+
const handleSelectChange = _ref2 => {
|
|
86
|
+
let {
|
|
87
|
+
item,
|
|
88
|
+
group
|
|
89
|
+
} = _ref2;
|
|
90
|
+
|
|
91
|
+
if (dsUtilities.isFunction(onChange)) {
|
|
82
92
|
const nextSelection = group ? {
|
|
83
|
-
[group.id]:
|
|
93
|
+
[group.id]: dsUtilities.addOrRemove([...(selection[group.id] || [])], item, o => o.id)
|
|
84
94
|
} : {
|
|
85
95
|
[item.id]: item.label
|
|
86
96
|
};
|
|
@@ -89,7 +99,7 @@ function LabeledDropdownCascadeMenuPill(_ref) {
|
|
|
89
99
|
};
|
|
90
100
|
|
|
91
101
|
const removeOption = option => {
|
|
92
|
-
if (
|
|
102
|
+
if (dsUtilities.isFunction(onChange)) {
|
|
93
103
|
const nextSelection = {
|
|
94
104
|
[selectionId]: selectionValues.filter(val => option.id !== val.id)
|
|
95
105
|
};
|
|
@@ -3,9 +3,17 @@
|
|
|
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
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
14
|
var React = require('react');
|
|
7
15
|
var lodash = require('lodash');
|
|
8
|
-
var
|
|
16
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
9
17
|
var RemovablePill = require('../RemovablePill.js');
|
|
10
18
|
var Pill = require('../Pill.js');
|
|
11
19
|
var OverflowPill = require('../OverflowPill.js');
|
|
@@ -78,8 +86,8 @@ function LabeledDropdownMultiPills(_ref) {
|
|
|
78
86
|
}, [selectedOptions]);
|
|
79
87
|
const selectOption = React.useCallback(option => {
|
|
80
88
|
if (!option.fixedItem) {
|
|
81
|
-
if (
|
|
82
|
-
const nextValue =
|
|
89
|
+
if (dsUtilities.isFunction(onChange)) {
|
|
90
|
+
const nextValue = dsUtilities.addOrRemove(selectedOptions, option, item => item.id);
|
|
83
91
|
setSelectedOptions(nextValue);
|
|
84
92
|
onChange(nextValue);
|
|
85
93
|
}
|
|
@@ -89,7 +97,7 @@ function LabeledDropdownMultiPills(_ref) {
|
|
|
89
97
|
}, [selectedOptions]);
|
|
90
98
|
const removeOption = React.useCallback(option => {
|
|
91
99
|
if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
|
|
92
|
-
if (
|
|
100
|
+
if (dsUtilities.isFunction(onChange)) {
|
|
93
101
|
const nextValue = selectedOptions.filter(val => option.id !== val.id);
|
|
94
102
|
setSelectedOptions(nextValue);
|
|
95
103
|
onChange(nextValue);
|
|
@@ -136,7 +144,7 @@ function LabeledDropdownMultiPills(_ref) {
|
|
|
136
144
|
|
|
137
145
|
return null;
|
|
138
146
|
}), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx__default["default"](OverflowPill.OverflowPill, {
|
|
139
|
-
label:
|
|
147
|
+
label: "+ ".concat(selectedOptions.length - overflowQuantity),
|
|
140
148
|
options: overflowOptions
|
|
141
149
|
})]
|
|
142
150
|
});
|
|
@@ -3,10 +3,16 @@
|
|
|
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
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
14
|
var React = require('react');
|
|
7
|
-
var
|
|
8
|
-
var useShouldRecalculate = require('@elliemae/ds-utilities/hooks/useShouldRecalculate');
|
|
9
|
-
var utils$1 = require('@elliemae/ds-utilities/utils');
|
|
15
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
10
16
|
var DropdownPill = require('../DropdownPill.js');
|
|
11
17
|
var InputPill = require('../InputPill.js');
|
|
12
18
|
var Pill = require('../Pill.js');
|
|
@@ -19,8 +25,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
19
25
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
20
26
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
21
27
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
22
|
-
var usePrevious__default = /*#__PURE__*/_interopDefaultLegacy(usePrevious);
|
|
23
|
-
var useShouldRecalculate__default = /*#__PURE__*/_interopDefaultLegacy(useShouldRecalculate);
|
|
24
28
|
|
|
25
29
|
var _Pill;
|
|
26
30
|
|
|
@@ -45,8 +49,8 @@ function LabeledDropdownSinglePill(_ref) {
|
|
|
45
49
|
menuProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
46
50
|
|
|
47
51
|
const [optionValue, setOptionValue] = React.useState(value);
|
|
48
|
-
const prevOptions =
|
|
49
|
-
const areOptionsEqual =
|
|
52
|
+
const prevOptions = dsUtilities.usePrevious(options);
|
|
53
|
+
const areOptionsEqual = dsUtilities.useShouldRecalculate(utils.hasOptionChanged(prevOptions, options));
|
|
50
54
|
React.useEffect(() => setOptionValue(value), [value]);
|
|
51
55
|
React.useEffect(() => {
|
|
52
56
|
const selectedValue = options.find(option => option.selected);
|
|
@@ -64,18 +68,19 @@ function LabeledDropdownSinglePill(_ref) {
|
|
|
64
68
|
}
|
|
65
69
|
}, [options]);
|
|
66
70
|
const selectOption = React.useCallback(option => {
|
|
67
|
-
if (
|
|
71
|
+
if (dsUtilities.isFunction(onChange)) {
|
|
68
72
|
onChange(option);
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
setOptionValue(option);
|
|
72
76
|
onSelect(option);
|
|
73
77
|
}, [onChange, onSelect]);
|
|
74
|
-
const onChangeInputValue = React.useCallback(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
const onChangeInputValue = React.useCallback(_ref2 => {
|
|
79
|
+
let {
|
|
80
|
+
target: {
|
|
81
|
+
value: inputValue
|
|
82
|
+
}
|
|
83
|
+
} = _ref2;
|
|
79
84
|
const {
|
|
80
85
|
onChangeInput
|
|
81
86
|
} = optionValue;
|
|
@@ -108,7 +113,7 @@ function LabeledDropdownSinglePill(_ref) {
|
|
|
108
113
|
|
|
109
114
|
let SelectedPill;
|
|
110
115
|
|
|
111
|
-
if (
|
|
116
|
+
if (dsUtilities.isString(input)) {
|
|
112
117
|
SelectedPill = InputPill.InputPill;
|
|
113
118
|
} else if (fixed) {
|
|
114
119
|
SelectedPill = Pill.Pill;
|
|
@@ -2,14 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
7
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
6
8
|
var lodash = require('lodash');
|
|
7
9
|
|
|
8
10
|
const hasOptionChanged = (prevOptions, options) => {
|
|
9
11
|
if (prevOptions && options) {
|
|
10
12
|
const prevOptionsOmited = prevOptions.map(option => lodash.omit(option, ['input', 'onChangeInput', 'mask']));
|
|
11
13
|
const optionsOmited = options.map(option => lodash.omit(option, ['input', 'onChangeInput', 'mask']));
|
|
12
|
-
return
|
|
14
|
+
return dsUtilities.isEqual(prevOptionsOmited, optionsOmited);
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
return false;
|
|
@@ -13,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
|
|
14
14
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
15
|
|
|
16
|
-
function LabeledPills({
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
function LabeledPills(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
children,
|
|
19
|
+
label = '',
|
|
20
|
+
leftAddon,
|
|
21
|
+
onFocusGroupSet,
|
|
22
|
+
onFocusNextGroup,
|
|
23
|
+
onFocusPreviousGroup
|
|
24
|
+
} = _ref;
|
|
24
25
|
return /*#__PURE__*/_jsx__default["default"](PillGroup.PillGroup, {
|
|
25
26
|
onFocusGroupSet: onFocusGroupSet,
|
|
26
27
|
onFocusNextGroup: onFocusNextGroup,
|
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
10
|
var React = require('react');
|
|
7
11
|
var reactDesc = require('react-desc');
|
|
8
12
|
var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
|
|
@@ -15,11 +19,12 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
15
19
|
var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
|
|
16
20
|
var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
|
|
17
21
|
|
|
18
|
-
function OverflowPill({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
function OverflowPill(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
containerProps = {},
|
|
25
|
+
label = '',
|
|
26
|
+
options = []
|
|
27
|
+
} = _ref;
|
|
23
28
|
const ref = React.useRef(null);
|
|
24
29
|
const [tooltipIsOpen, setTooltipIsOpen] = React.useState(false);
|
|
25
30
|
const [tooltipText, setTooltipText] = React.useState('');
|
|
@@ -27,9 +32,9 @@ function OverflowPill({
|
|
|
27
32
|
let text = '';
|
|
28
33
|
options.forEach(option => {
|
|
29
34
|
if (!tooltipText || option === options[0]) {
|
|
30
|
-
text =
|
|
35
|
+
text = "".concat(option.label);
|
|
31
36
|
} else {
|
|
32
|
-
text = text.concat(
|
|
37
|
+
text = text.concat(", ".concat(option.label));
|
|
33
38
|
}
|
|
34
39
|
});
|
|
35
40
|
setTooltipText(text);
|
package/cjs/deprecated/Pill.js
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -22,17 +27,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
22
27
|
|
|
23
28
|
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__default["default"](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; }
|
|
24
29
|
const pillBlockName = 'pill';
|
|
25
|
-
const PillWrapper = dsClassnames.aggregatedClasses('div')(pillBlockName, null,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
const PillWrapper = dsClassnames.aggregatedClasses('div')(pillBlockName, null, _ref => {
|
|
31
|
+
let {
|
|
32
|
+
size,
|
|
33
|
+
variant
|
|
34
|
+
} = _ref;
|
|
35
|
+
return {
|
|
36
|
+
[variant]: !!variant,
|
|
37
|
+
[size]: !!size
|
|
38
|
+
};
|
|
39
|
+
});
|
|
32
40
|
const PillLabel = dsClassnames.aggregatedClasses('span')(pillBlockName, 'label');
|
|
33
41
|
const PillAddon = dsClassnames.aggregatedClasses('div')(pillBlockName, 'addon');
|
|
34
42
|
|
|
35
|
-
function Pill(
|
|
43
|
+
function Pill(_ref2) {
|
|
36
44
|
let {
|
|
37
45
|
containerProps = {},
|
|
38
46
|
label = '',
|
|
@@ -40,8 +48,8 @@ function Pill(_ref) {
|
|
|
40
48
|
rightAddon,
|
|
41
49
|
variant = 'value',
|
|
42
50
|
size = 'm'
|
|
43
|
-
} =
|
|
44
|
-
otherProps = _objectWithoutProperties__default["default"](
|
|
51
|
+
} = _ref2,
|
|
52
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
45
53
|
|
|
46
54
|
return /*#__PURE__*/jsxRuntime.jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
|
|
47
55
|
classProps: {
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
12
|
require('react');
|
|
@@ -22,23 +27,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
22
27
|
const pillGroupBlockName = 'pill-group';
|
|
23
28
|
const Container = dsClassnames.aggregatedClasses('div')(pillGroupBlockName);
|
|
24
29
|
|
|
25
|
-
const PillGroup =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
})
|
|
30
|
+
const PillGroup = _ref => {
|
|
31
|
+
let {
|
|
32
|
+
containerProps = {},
|
|
33
|
+
onFocusNextGroup,
|
|
34
|
+
onFocusPreviousGroup,
|
|
35
|
+
onFocusGroupSet,
|
|
36
|
+
children
|
|
37
|
+
} = _ref;
|
|
38
|
+
return /*#__PURE__*/_jsx__default["default"](FocusGroupProvider__default["default"], {
|
|
39
|
+
keyBindings: {
|
|
40
|
+
Tab: 'next'
|
|
41
|
+
},
|
|
42
|
+
onFocusGroupSet: onFocusGroupSet,
|
|
43
|
+
onFocusNextGroup: onFocusNextGroup,
|
|
44
|
+
onFocusPreviousGroup: onFocusPreviousGroup,
|
|
45
|
+
orientation: "horizontal"
|
|
46
|
+
}, void 0, /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
|
|
47
|
+
children: children
|
|
48
|
+
})));
|
|
49
|
+
};
|
|
42
50
|
|
|
43
51
|
const props = {
|
|
44
52
|
/** props injected to component wrapper */
|
|
@@ -3,9 +3,10 @@
|
|
|
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');
|
|
6
7
|
var React = require('react');
|
|
7
8
|
var reactDesc = require('react-desc');
|
|
8
|
-
var
|
|
9
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
9
10
|
var DSModal = require('@elliemae/ds-modal');
|
|
10
11
|
var Popover = require('@elliemae/ds-popover');
|
|
11
12
|
var Pill = require('./Pill.js');
|
|
@@ -14,18 +15,18 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
16
17
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
17
|
-
var InfoCircleSmall__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleSmall);
|
|
18
18
|
var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
|
|
19
19
|
var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
|
|
20
20
|
|
|
21
|
-
const ReadOnlyPill =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
const ReadOnlyPill = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
containerProps = {},
|
|
24
|
+
modalContent = '',
|
|
25
|
+
label = '',
|
|
26
|
+
leftAddon,
|
|
27
|
+
modalTitle = '',
|
|
28
|
+
tooltipText = ''
|
|
29
|
+
} = _ref;
|
|
29
30
|
const ref = React.useRef(null);
|
|
30
31
|
const [isModalOpen, setIsModalOpen] = React.useState(false);
|
|
31
32
|
const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
|
|
@@ -47,18 +48,21 @@ const ReadOnlyPill = ({
|
|
|
47
48
|
content: tooltipText,
|
|
48
49
|
placement: "top",
|
|
49
50
|
showArrow: true,
|
|
50
|
-
renderTrigger:
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
51
|
+
renderTrigger: _ref2 => {
|
|
52
|
+
let {
|
|
53
|
+
ref
|
|
54
|
+
} = _ref2;
|
|
55
|
+
return /*#__PURE__*/_jsx__default["default"](dsIcons.InfoCircleSmall, {
|
|
56
|
+
role: "button",
|
|
57
|
+
"data-testid": "read-only-info-btn",
|
|
58
|
+
className: "remove-pill-button",
|
|
59
|
+
onClick: toggle,
|
|
60
|
+
onMouseEnter: () => setIsTooltipOpen(true),
|
|
61
|
+
onMouseLeave: () => setIsTooltipOpen(false),
|
|
62
|
+
color: ['brand-primary', '600'],
|
|
63
|
+
innerRef: ref
|
|
64
|
+
});
|
|
65
|
+
}
|
|
62
66
|
}),
|
|
63
67
|
tabIndex: -1
|
|
64
68
|
}), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
|
|
@@ -5,24 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactDesc = require('react-desc');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
9
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
10
10
|
var useFocusGroupItem = require('@elliemae/ds-shared/FocusGroup/useFocusGroupItem');
|
|
11
11
|
var Pill = require('./Pill.js');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
14
|
|
|
15
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
|
-
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
|
|
17
16
|
var useFocusGroupItem__default = /*#__PURE__*/_interopDefaultLegacy(useFocusGroupItem);
|
|
18
17
|
|
|
19
|
-
function RemovablePill({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
function RemovablePill(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
containerProps = {},
|
|
21
|
+
label = '',
|
|
22
|
+
onRemove,
|
|
23
|
+
size = 'm',
|
|
24
|
+
leftAddon
|
|
25
|
+
} = _ref;
|
|
26
26
|
const ref = React.useRef(null);
|
|
27
27
|
const {
|
|
28
28
|
focusPrevious
|
|
@@ -36,12 +36,12 @@ function RemovablePill({
|
|
|
36
36
|
label: label,
|
|
37
37
|
leftAddon: leftAddon,
|
|
38
38
|
onKeyDown: e => {
|
|
39
|
-
if (e.key === 'Backspace' &&
|
|
39
|
+
if (e.key === 'Backspace' && dsUtilities.isFunction(onRemove)) {
|
|
40
40
|
onRemove();
|
|
41
|
-
if (
|
|
41
|
+
if (dsUtilities.isFunction(focusPrevious)) focusPrevious();
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
|
-
rightAddon: /*#__PURE__*/_jsx__default["default"](
|
|
44
|
+
rightAddon: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
|
|
45
45
|
role: "button",
|
|
46
46
|
"data-testid": "remove-pill-button",
|
|
47
47
|
className: "remove-pill-button",
|
package/cjs/deprecated/index.js
CHANGED
|
@@ -15,6 +15,7 @@ var OverflowPill = require('./OverflowPill.js');
|
|
|
15
15
|
|
|
16
16
|
exports.DSPillWithSchema = Pill.DSPillWithSchema;
|
|
17
17
|
exports.Pill = Pill.Pill;
|
|
18
|
+
exports["default"] = Pill.Pill;
|
|
18
19
|
exports.Container = PillGroup.Container;
|
|
19
20
|
exports.DSPillGroupWithSchema = PillGroup.DSPillGroupWithSchema;
|
|
20
21
|
exports.PillGroup = PillGroup.PillGroup;
|