@elliemae/ds-pills 3.4.2 → 3.4.3
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/dist/cjs/components/Pill.js +6 -3
- package/dist/cjs/components/Pill.js.map +1 -1
- package/dist/cjs/components/PillButton.js +9 -5
- package/dist/cjs/components/PillButton.js.map +1 -1
- package/dist/cjs/components/PillGroup.js +41 -29
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/components/index.js +4 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/styled.js +4 -1
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +61 -47
- package/dist/cjs/components/types/DropdownPill.js.map +2 -2
- package/dist/cjs/components/types/InputPill.js +68 -54
- package/dist/cjs/components/types/InputPill.js.map +2 -2
- package/dist/cjs/components/types/LabelPill.js +15 -5
- package/dist/cjs/components/types/LabelPill.js.map +2 -2
- package/dist/cjs/components/types/ReadOnlyPill.js +32 -19
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +68 -50
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +36 -22
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/components/types/index.js +4 -1
- package/dist/cjs/components/types/index.js.map +1 -1
- package/dist/cjs/deprecated/DropdownPill.js +15 -10
- package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/InputPill.js +8 -5
- package/dist/cjs/deprecated/InputPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPills.js +25 -17
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +32 -25
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +68 -53
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +51 -37
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +4 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js.map +1 -1
- package/dist/cjs/deprecated/LabeledPills.js +25 -16
- package/dist/cjs/deprecated/LabeledPills.js.map +1 -1
- package/dist/cjs/deprecated/OverflowPill.js +8 -4
- package/dist/cjs/deprecated/OverflowPill.js.map +1 -1
- package/dist/cjs/deprecated/Pill.js +30 -10
- package/dist/cjs/deprecated/Pill.js.map +1 -1
- package/dist/cjs/deprecated/PillGroup.js +15 -8
- package/dist/cjs/deprecated/PillGroup.js.map +1 -1
- package/dist/cjs/deprecated/ReadOnlyPill.js +44 -34
- package/dist/cjs/deprecated/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/deprecated/RemovablePill.js +8 -4
- package/dist/cjs/deprecated/RemovablePill.js.map +1 -1
- package/dist/cjs/deprecated/index.js +4 -1
- package/dist/cjs/deprecated/index.js.map +1 -1
- package/dist/cjs/index.d.js +4 -1
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/props.js +4 -1
- package/dist/cjs/props.js.map +1 -1
- package/dist/cjs/utils.js +4 -1
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/components/Pill.js +2 -2
- package/dist/esm/components/Pill.js.map +1 -1
- package/dist/esm/components/PillButton.js +5 -4
- package/dist/esm/components/PillButton.js.map +1 -1
- package/dist/esm/components/PillGroup.js +37 -28
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/styled.js.map +1 -1
- package/dist/esm/components/types/DropdownPill.js +57 -46
- package/dist/esm/components/types/DropdownPill.js.map +2 -2
- package/dist/esm/components/types/InputPill.js +64 -53
- package/dist/esm/components/types/InputPill.js.map +2 -2
- package/dist/esm/components/types/LabelPill.js +11 -4
- package/dist/esm/components/types/LabelPill.js.map +2 -2
- package/dist/esm/components/types/ReadOnlyPill.js +28 -18
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +64 -49
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +32 -21
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/components/types/index.js.map +1 -1
- package/dist/esm/deprecated/DropdownPill.js +11 -9
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/InputPill.js +4 -4
- package/dist/esm/deprecated/InputPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPills.js +21 -16
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +28 -24
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +64 -52
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +47 -36
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map +1 -1
- package/dist/esm/deprecated/LabeledPills.js +21 -15
- package/dist/esm/deprecated/LabeledPills.js.map +1 -1
- package/dist/esm/deprecated/OverflowPill.js +4 -3
- package/dist/esm/deprecated/OverflowPill.js.map +1 -1
- package/dist/esm/deprecated/Pill.js +26 -9
- package/dist/esm/deprecated/Pill.js.map +1 -1
- package/dist/esm/deprecated/PillGroup.js +11 -7
- package/dist/esm/deprecated/PillGroup.js.map +1 -1
- package/dist/esm/deprecated/ReadOnlyPill.js +40 -33
- package/dist/esm/deprecated/ReadOnlyPill.js.map +2 -2
- package/dist/esm/deprecated/RemovablePill.js +4 -3
- package/dist/esm/deprecated/RemovablePill.js.map +1 -1
- package/dist/esm/deprecated/index.js.map +2 -2
- package/dist/esm/index.d.js.map +1 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/props.js.map +1 -1
- package/dist/esm/utils.js.map +1 -1
- package/package.json +15 -15
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useEffect, useCallback } from "react";
|
|
3
4
|
import { find } from "lodash";
|
|
4
5
|
import { isFunction, addOrRemove } from "@elliemae/ds-utilities";
|
|
5
6
|
import { RemovablePill } from "../RemovablePill";
|
|
@@ -47,66 +48,77 @@ function LabeledDropdownMultiPills({
|
|
|
47
48
|
setOverflowOptions(overflow);
|
|
48
49
|
}
|
|
49
50
|
}, [selectedOptions]);
|
|
50
|
-
const selectOption = useCallback(
|
|
51
|
-
|
|
52
|
-
if (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
const selectOption = useCallback(
|
|
52
|
+
(option) => {
|
|
53
|
+
if (!option.fixedItem) {
|
|
54
|
+
if (isFunction(onChange)) {
|
|
55
|
+
const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);
|
|
56
|
+
setSelectedOptions(nextValue);
|
|
57
|
+
onChange(nextValue);
|
|
58
|
+
}
|
|
59
|
+
onSelect(option);
|
|
56
60
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
const removeOption = useCallback(
|
|
61
|
-
|
|
62
|
-
if (
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
},
|
|
62
|
+
[selectedOptions]
|
|
63
|
+
);
|
|
64
|
+
const removeOption = useCallback(
|
|
65
|
+
(option) => {
|
|
66
|
+
if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
|
|
67
|
+
if (isFunction(onChange)) {
|
|
68
|
+
const nextValue = selectedOptions.filter((val) => option.id !== val.id);
|
|
69
|
+
setSelectedOptions(nextValue);
|
|
70
|
+
onChange(nextValue);
|
|
71
|
+
}
|
|
72
|
+
onRemove(option);
|
|
66
73
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
74
|
+
},
|
|
75
|
+
[selectedOptions]
|
|
76
|
+
);
|
|
70
77
|
const typeOfPill = () => {
|
|
71
78
|
if (selectedOptions.length > totalDefaultOptions) {
|
|
72
79
|
return RemovablePill;
|
|
73
80
|
}
|
|
74
81
|
return Pill;
|
|
75
82
|
};
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
label,
|
|
80
|
-
maxWidth,
|
|
81
|
-
minWidth,
|
|
82
|
-
onSelectMenuItem: selectOption,
|
|
83
|
-
options: [
|
|
84
|
-
{
|
|
83
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ jsx(DropdownPill, {
|
|
85
86
|
...menuProps,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
87
|
+
focusOnOpen: false,
|
|
88
|
+
label,
|
|
89
|
+
maxWidth,
|
|
90
|
+
minWidth,
|
|
91
|
+
onSelectMenuItem: selectOption,
|
|
92
|
+
options: [
|
|
93
|
+
{
|
|
94
|
+
...menuProps,
|
|
95
|
+
type: "SelectionGroup",
|
|
96
|
+
id: "multi-selection-views",
|
|
97
|
+
multi: true,
|
|
98
|
+
items: allOptions
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
selection: {
|
|
102
|
+
"multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
|
|
103
|
+
},
|
|
104
|
+
variant: "title"
|
|
105
|
+
}),
|
|
106
|
+
selectedOptions && selectedOptions.map((option, index) => {
|
|
107
|
+
const TypeOfPill = typeOfPill();
|
|
108
|
+
if (index < overflowQuantity) {
|
|
109
|
+
return /* @__PURE__ */ jsx(TypeOfPill, {
|
|
110
|
+
label: option.label,
|
|
111
|
+
onRemove: () => removeOption(option)
|
|
112
|
+
}, option.id);
|
|
113
|
+
}
|
|
114
|
+
return null;
|
|
115
|
+
}),
|
|
116
|
+
selectedOptions && selectedOptions.length > overflowQuantity && /* @__PURE__ */ jsx(OverflowPill, {
|
|
117
|
+
label: `+ ${selectedOptions.length - overflowQuantity}`,
|
|
118
|
+
options: overflowOptions
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
});
|
|
110
122
|
}
|
|
111
123
|
var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
|
|
112
124
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction LabeledDropdownMultiPills({\n label,\n options = [],\n value = [],\n onSelect = () => null,\n onRemove = () => null,\n onChange, // if this is defined, then it's calculating the next result onSelect or onRemove\n maxWidth,\n minWidth,\n ...menuProps\n}) {\n const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);\n const [selectedOptions, setSelectedOptions] = useState(value);\n const [allOptions, setAllOptions] = useState(options);\n const [overflowOptions, setOverflowOptions] = useState([]);\n\n const overflowQuantity = 3;\n\n useEffect(() => setSelectedOptions(value), [value]);\n\n useEffect(() => {\n const newOptions = allOptions.filter((option) => option.fixedItem);\n if (newOptions.length > 0) {\n setSelectedOptions(newOptions);\n }\n setTotalDefaultOptions(newOptions.length);\n }, []);\n\n useEffect(() => {\n if (totalDefaultOptions) {\n const newOptions = allOptions.map((opt) => {\n if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {\n return { ...opt, fixedItem: true };\n }\n return { ...opt, fixedItem: false };\n });\n\n setAllOptions(newOptions);\n }\n }, [onSelect, onRemove, selectedOptions]);\n\n useEffect(() => {\n if (selectedOptions.length > overflowQuantity) {\n const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);\n setOverflowOptions(overflow);\n }\n }, [selectedOptions]);\n\n const selectOption = useCallback(\n (option) => {\n if (!option.fixedItem) {\n if (isFunction(onChange)) {\n const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onSelect(option);\n }\n },\n [selectedOptions],\n );\n\n const removeOption = useCallback(\n (option) => {\n if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {\n if (isFunction(onChange)) {\n const nextValue = selectedOptions.filter((val) => option.id !== val.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onRemove(option);\n }\n },\n [selectedOptions],\n );\n\n const typeOfPill = () => {\n if (selectedOptions.length > totalDefaultOptions) {\n return RemovablePill;\n }\n\n return Pill;\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n focusOnOpen={false}\n label={label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: true,\n items: allOptions,\n },\n ]}\n selection={{\n 'multi-selection-views': selectedOptions ? selectedOptions.map((o) => o.id) : '',\n }}\n variant=\"title\"\n />\n {selectedOptions &&\n selectedOptions.map((option, index) => {\n const TypeOfPill = typeOfPill();\n if (index < overflowQuantity) {\n return <TypeOfPill key={option.id} label={option.label} onRemove={() => removeOption(option)} />;\n }\n return null;\n })}\n {selectedOptions && selectedOptions.length > overflowQuantity && (\n <OverflowPill label={`+ ${selectedOptions.length - overflowQuantity}`} options={overflowOptions} />\n )}\n </>\n );\n}\n\nexport { LabeledDropdownMultiPills };\nexport default LabeledDropdownMultiPills;"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useState, useEffect, useLayoutEffect } from "react";
|
|
3
4
|
import PropTypes from "prop-types";
|
|
4
5
|
import { isFunction, isString, useShouldRecalculate, usePrevious } from "@elliemae/ds-utilities";
|
|
5
6
|
import { DropdownPill } from "../DropdownPill";
|
|
@@ -37,17 +38,23 @@ function LabeledDropdownSinglePill({
|
|
|
37
38
|
setOptionValue(selectedValue);
|
|
38
39
|
}
|
|
39
40
|
}, [options]);
|
|
40
|
-
const selectOption = useCallback(
|
|
41
|
-
|
|
42
|
-
onChange
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
const selectOption = useCallback(
|
|
42
|
+
(option) => {
|
|
43
|
+
if (isFunction(onChange)) {
|
|
44
|
+
onChange(option);
|
|
45
|
+
}
|
|
46
|
+
setOptionValue(option);
|
|
47
|
+
onSelect(option);
|
|
48
|
+
},
|
|
49
|
+
[onChange, onSelect]
|
|
50
|
+
);
|
|
51
|
+
const onChangeInputValue = useCallback(
|
|
52
|
+
({ target: { value: inputValue } }) => {
|
|
53
|
+
const { onChangeInput } = optionValue;
|
|
54
|
+
onChangeInput && onChangeInput(inputValue);
|
|
55
|
+
},
|
|
56
|
+
[optionValue]
|
|
57
|
+
);
|
|
51
58
|
const removeOption = (removedOption) => {
|
|
52
59
|
const { onRemove } = menuProps;
|
|
53
60
|
const { onChangeInput } = optionValue;
|
|
@@ -66,45 +73,49 @@ function LabeledDropdownSinglePill({
|
|
|
66
73
|
} else {
|
|
67
74
|
SelectedPill = RemovablePill;
|
|
68
75
|
}
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
key: option.id,
|
|
76
|
+
return /* @__PURE__ */ jsx(SelectedPill, {
|
|
71
77
|
label: option.label,
|
|
72
78
|
onChange: onChangeInputValue,
|
|
73
79
|
onRemove: (e) => removeOption(option, e),
|
|
74
80
|
value: input,
|
|
75
81
|
...otherProps
|
|
76
|
-
});
|
|
82
|
+
}, option.id);
|
|
77
83
|
};
|
|
78
84
|
const renderSelection = () => {
|
|
79
85
|
if (!labelIsValue) {
|
|
80
86
|
if (optionValue)
|
|
81
87
|
return renderPill(optionValue, fixed);
|
|
82
|
-
return /* @__PURE__ */
|
|
88
|
+
return /* @__PURE__ */ jsx(Pill, {
|
|
83
89
|
label: "-"
|
|
84
90
|
});
|
|
85
91
|
}
|
|
86
92
|
};
|
|
87
|
-
return /* @__PURE__ */
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
maxWidth,
|
|
91
|
-
minWidth,
|
|
92
|
-
onSelectMenuItem: selectOption,
|
|
93
|
-
options: [
|
|
94
|
-
{
|
|
93
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ jsx(DropdownPill, {
|
|
95
96
|
...menuProps,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
97
|
+
label: !labelIsValue ? label : optionValue?.label,
|
|
98
|
+
maxWidth,
|
|
99
|
+
minWidth,
|
|
100
|
+
onSelectMenuItem: selectOption,
|
|
101
|
+
options: [
|
|
102
|
+
{
|
|
103
|
+
...menuProps,
|
|
104
|
+
type: "SelectionGroup",
|
|
105
|
+
id: "multi-selection-views",
|
|
106
|
+
multi: false,
|
|
107
|
+
items: options,
|
|
108
|
+
closeOnClick: true
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
selection: {
|
|
112
|
+
"multi-selection-views": optionValue ? [optionValue?.id] : ""
|
|
113
|
+
},
|
|
114
|
+
variant: "title"
|
|
115
|
+
}),
|
|
116
|
+
renderSelection()
|
|
117
|
+
]
|
|
118
|
+
});
|
|
108
119
|
}
|
|
109
120
|
LabeledDropdownSinglePill.propTypes = {
|
|
110
121
|
label: PropTypes.string,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable mdx/no-unused-expressions */\n/* eslint-disable no-shadow */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable max-lines */\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill';\nimport { InputPill } from '../InputPill';\nimport { Pill } from '../Pill';\nimport { RemovablePill } from '../RemovablePill';\nimport { hasOptionChanged } from './utils';\n\nfunction LabeledDropdownSinglePill({\n label,\n labelIsValue = false,\n options,\n value,\n onSelect = () => null,\n onChange,\n maxWidth,\n minWidth,\n fixed = false,\n ...menuProps\n}) {\n const [optionValue, setOptionValue] = useState(value);\n const prevOptions = usePrevious(options);\n const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n useEffect(() => setOptionValue(value), [value]);\n\n useEffect(() => {\n const selectedValue = options.find((option) => option.selected);\n\n if (selectedValue) {\n setOptionValue(selectedValue);\n } else if (!selectedValue) {\n setOptionValue(options[0]);\n }\n }, [areOptionsEqual]);\n\n useLayoutEffect(() => {\n if (optionValue) {\n const selectedValue = options.find((option) => option.id === optionValue.id);\n setOptionValue(selectedValue);\n }\n }, [options]);\n\n const selectOption = useCallback(\n (option) => {\n if (isFunction(onChange)) {\n onChange(option);\n }\n setOptionValue(option);\n onSelect(option);\n },\n [onChange, onSelect],\n );\n\n const onChangeInputValue = useCallback(\n ({ target: { value: inputValue } }) => {\n const { onChangeInput } = optionValue;\n\n onChangeInput && onChangeInput(inputValue);\n },\n [optionValue],\n );\n\n const removeOption = (removedOption) => {\n const { onRemove } = menuProps;\n const { onChangeInput } = optionValue;\n setOptionValue(null);\n onChangeInput && onChangeInput('');\n const newOption = { ...removedOption, input: '' };\n onRemove && onRemove(newOption, removedOption);\n };\n\n const renderPill = (option, fixed) => {\n const { input, onChangeInput, ...otherProps } = option;\n let SelectedPill;\n if (isString(input)) {\n SelectedPill = InputPill;\n } else if (fixed) {\n SelectedPill = Pill;\n } else {\n SelectedPill = RemovablePill;\n }\n\n return (\n <SelectedPill\n key={option.id}\n label={option.label}\n onChange={onChangeInputValue}\n onRemove={(e) => removeOption(option, e)}\n value={input}\n {...otherProps}\n />\n );\n };\n\n const renderSelection = () => {\n if (!labelIsValue) {\n if (optionValue) return renderPill(optionValue, fixed);\n return <Pill label=\"-\" />;\n }\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n label={!labelIsValue ? label : optionValue?.label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: false,\n items: options,\n closeOnClick: true,\n },\n ]}\n selection={{\n 'multi-selection-views': optionValue ? [optionValue?.id] : '',\n }}\n variant=\"title\"\n />\n {renderSelection()}\n </>\n );\n}\n\nLabeledDropdownSinglePill.propTypes = {\n label: PropTypes.string,\n labelIsValue: PropTypes.bool,\n options: PropTypes.array,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onSelect: PropTypes.func,\n onChange: PropTypes.func,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["fixed"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/utils.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { isEqual } from '@elliemae/ds-utilities';\nimport { omit } from 'lodash';\n\nexport const hasOptionChanged = (prevOptions, options) => {\n if (prevOptions && options) {\n const prevOptionsOmited = prevOptions.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n const optionsOmited = options.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n\n return isEqual(prevOptionsOmited, optionsOmited);\n }\n\n return false;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AACxB,SAAS,YAAY;AAEd,MAAM,mBAAmB,CAAC,aAAa,YAAY;AACxD,MAAI,eAAe,SAAS;AAC1B,UAAM,oBAAoB,YAAY,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AACtG,UAAM,gBAAgB,QAAQ,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AAE9F,WAAO,QAAQ,mBAAmB,aAAa;AAAA,EACjD;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { PillGroup } from "./PillGroup";
|
|
5
5
|
import { RemovablePill } from "./RemovablePill";
|
|
@@ -12,25 +12,31 @@ function LabeledPills({
|
|
|
12
12
|
onFocusNextGroup,
|
|
13
13
|
onFocusPreviousGroup
|
|
14
14
|
}) {
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ jsxs(PillGroup, {
|
|
16
16
|
onFocusGroupSet,
|
|
17
17
|
onFocusNextGroup,
|
|
18
|
-
onFocusPreviousGroup
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
onFocusPreviousGroup,
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ jsx(Pill, {
|
|
21
|
+
label,
|
|
22
|
+
leftAddon,
|
|
23
|
+
variant: "title",
|
|
24
|
+
"data-testid": "pill-title"
|
|
25
|
+
}),
|
|
26
|
+
children
|
|
27
|
+
]
|
|
28
|
+
});
|
|
25
29
|
}
|
|
26
30
|
const props = {
|
|
27
31
|
label: PropTypes.string.isRequired.description("pill text label"),
|
|
28
|
-
children: PropTypes.arrayOf(
|
|
29
|
-
|
|
30
|
-
PropTypes.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
children: PropTypes.arrayOf(
|
|
33
|
+
PropTypes.shape({
|
|
34
|
+
type: PropTypes.oneOf([
|
|
35
|
+
PropTypes.instanceOf(Pill),
|
|
36
|
+
PropTypes.instanceOf(RemovablePill)
|
|
37
|
+
])
|
|
38
|
+
})
|
|
39
|
+
).isRequired.description("pill to add the label to"),
|
|
34
40
|
leftAddon: PropTypes.node.description("addon component to left"),
|
|
35
41
|
onFocusNextGroup: PropTypes.func.description("focus next group callback"),
|
|
36
42
|
onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledPills.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { RemovablePill } from './RemovablePill';\nimport { Pill } from './Pill';\n\nfunction LabeledPills({\n children,\n label = '',\n leftAddon,\n onFocusGroupSet,\n onFocusNextGroup,\n onFocusPreviousGroup,\n}) {\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Pill\n label={label}\n leftAddon={leftAddon}\n variant=\"title\"\n data-testid=\"pill-title\"\n />\n {children}\n </PillGroup>\n );\n}\n\nconst props = {\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill to add the label to */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf([\n PropTypes.instanceOf(Pill),\n PropTypes.instanceOf(RemovablePill),\n ]),\n }),\n ).isRequired.description('pill to add the label to'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SACE,qBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,0BAAC;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,eAAY;AAAA,OACd;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,UAAU;AAAA,IAClB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,MAAM;AAAA,QACpB,UAAU,WAAW,IAAI;AAAA,QACzB,UAAU,WAAW,aAAa;AAAA,MACpC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA,EAEnD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useState, useEffect } from "react";
|
|
3
4
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
5
|
import { useFocusGroupItem } from "@elliemae/ds-shared";
|
|
5
6
|
import { DSTooltip } from "@elliemae/ds-tooltip";
|
|
@@ -20,11 +21,11 @@ function OverflowPill({ containerProps = {}, label = "", options = [] }) {
|
|
|
20
21
|
setTooltipText(text);
|
|
21
22
|
}, [options]);
|
|
22
23
|
useFocusGroupItem(ref);
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
+
return /* @__PURE__ */ jsx(DSTooltip, {
|
|
24
25
|
isOpen: tooltipIsOpen,
|
|
25
26
|
title: tooltipText,
|
|
26
27
|
zIndex: 11,
|
|
27
|
-
triggerComponent: /* @__PURE__ */
|
|
28
|
+
triggerComponent: /* @__PURE__ */ jsx(Pill, {
|
|
28
29
|
className: "overflow-pill",
|
|
29
30
|
containerProps,
|
|
30
31
|
innerRef: ref,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/OverflowPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nfunction OverflowPill({ containerProps = {}, label = '', options = [] }) {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,QAAQ,UAAU,iBAAiB;AACnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAErB,SAAS,aAAa,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,GAAG;AACvE,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,YAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,oBAAkB,GAAG;AAErB,SACE,oBAAC;AAAA,IACC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,oBAAC;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,MACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,KAC5C;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,iCAAiC;AAAA,EAE9E,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,UAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
5
|
const pillBlockName = "pill";
|
|
6
|
-
const PillWrapper = aggregatedClasses("div")(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
})
|
|
6
|
+
const PillWrapper = aggregatedClasses("div")(
|
|
7
|
+
pillBlockName,
|
|
8
|
+
null,
|
|
9
|
+
({ size, variant }) => ({
|
|
10
|
+
[variant]: !!variant,
|
|
11
|
+
[size]: !!size
|
|
12
|
+
})
|
|
13
|
+
);
|
|
10
14
|
const PillLabel = aggregatedClasses("span")(pillBlockName, "label");
|
|
11
15
|
const PillAddon = aggregatedClasses("div")(pillBlockName, "addon");
|
|
12
16
|
function Pill({
|
|
@@ -18,14 +22,27 @@ function Pill({
|
|
|
18
22
|
size = "m",
|
|
19
23
|
...otherProps
|
|
20
24
|
}) {
|
|
21
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsxs(PillWrapper, {
|
|
22
26
|
...containerProps,
|
|
23
27
|
classProps: { variant, size },
|
|
24
|
-
...otherProps
|
|
25
|
-
|
|
28
|
+
...otherProps,
|
|
29
|
+
children: [
|
|
30
|
+
leftAddon && /* @__PURE__ */ jsx(PillAddon, {
|
|
31
|
+
children: leftAddon
|
|
32
|
+
}),
|
|
33
|
+
/* @__PURE__ */ jsx(PillLabel, {
|
|
34
|
+
children: label
|
|
35
|
+
}),
|
|
36
|
+
rightAddon && /* @__PURE__ */ jsx(PillAddon, {
|
|
37
|
+
children: rightAddon
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
});
|
|
26
41
|
}
|
|
27
42
|
const props = {
|
|
28
|
-
containerProps: PropTypes.object.description(
|
|
43
|
+
containerProps: PropTypes.object.description(
|
|
44
|
+
"props to inject to pill wrapper"
|
|
45
|
+
),
|
|
29
46
|
label: PropTypes.string.isRequired.description("pill text label"),
|
|
30
47
|
size: PropTypes.oneOf(["m", "l"]).description("pill size"),
|
|
31
48
|
variant: PropTypes.oneOf(["value", "title"]).description("pill variant"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/Pill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst pillBlockName = 'pill';\n\nconst PillWrapper = aggregatedClasses('div')(\n pillBlockName,\n null,\n ({ size, variant }) => ({\n [variant]: !!variant,\n [size]: !!size,\n }),\n);\nconst PillLabel = aggregatedClasses('span')(pillBlockName, 'label');\nconst PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');\n\nfunction Pill({\n containerProps = {},\n label = '',\n leftAddon,\n rightAddon,\n variant = 'value',\n size = 'm',\n ...otherProps\n}) {\n return (\n <PillWrapper\n {...containerProps}\n classProps={{ variant, size }}\n {...otherProps}\n >\n {leftAddon && <PillAddon>{leftAddon}</PillAddon>}\n <PillLabel>{label}</PillLabel>\n {rightAddon && <PillAddon>{rightAddon}</PillAddon>}\n </PillWrapper>\n );\n}\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description(\n 'props to inject to pill wrapper',\n ),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill size */\n size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n /** addon component to right */\n rightAddon: PropTypes.node.description('addon component to right'),\n};\n\nPill.propTypes = props;\nPill.displayName = 'Pill';\nconst DSPillWithSchema = describe(Pill);\nDSPillWithSchema.propTypes = props;\n\nexport { Pill, DSPillWithSchema };\nexport default Pill;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAElC,MAAM,gBAAgB;AAEtB,MAAM,cAAc,kBAAkB,KAAK;AAAA,EACzC;AAAA,EACA;AAAA,EACA,CAAC,EAAE,MAAM,QAAQ,OAAO;AAAA,IACtB,CAAC,UAAU,CAAC,CAAC;AAAA,IACb,CAAC,OAAO,CAAC,CAAC;AAAA,EACZ;AACF;AACA,MAAM,YAAY,kBAAkB,MAAM,EAAE,eAAe,OAAO;AAClE,MAAM,YAAY,kBAAkB,KAAK,EAAE,eAAe,OAAO;AAEjE,SAAS,KAAK;AAAA,EACZ,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,KACJ;AACL,GAAG;AACD,SACE,qBAAC;AAAA,IACE,GAAG;AAAA,IACJ,YAAY,EAAE,SAAS,KAAK;AAAA,IAC3B,GAAG;AAAA,IAEH;AAAA,mBAAa,oBAAC;AAAA,QAAW;AAAA,OAAU;AAAA,MACpC,oBAAC;AAAA,QAAW;AAAA,OAAM;AAAA,MACjB,cAAc,oBAAC;AAAA,QAAW;AAAA,OAAW;AAAA;AAAA,GACxC;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA,EAEzD,SAAS,UAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA,EAEvE,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,YAAY,UAAU,KAAK,YAAY,0BAA0B;AACnE;AAEA,KAAK,YAAY;AACjB,KAAK,cAAc;AACnB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAG7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe, PropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
5
|
import { FocusGroupProvider } from "@elliemae/ds-shared";
|
|
6
6
|
const pillGroupBlockName = "pill-group";
|
|
7
7
|
const Container = aggregatedClasses("div")(pillGroupBlockName);
|
|
8
|
-
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */
|
|
8
|
+
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */ jsx(FocusGroupProvider, {
|
|
9
9
|
keyBindings: {
|
|
10
10
|
Tab: "next"
|
|
11
11
|
},
|
|
12
12
|
onFocusGroupSet,
|
|
13
13
|
onFocusNextGroup,
|
|
14
14
|
onFocusPreviousGroup,
|
|
15
|
-
orientation: "horizontal"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
orientation: "horizontal",
|
|
16
|
+
children: /* @__PURE__ */ jsx(Container, {
|
|
17
|
+
...containerProps,
|
|
18
|
+
children
|
|
19
|
+
})
|
|
20
|
+
});
|
|
19
21
|
const props = {
|
|
20
22
|
containerProps: PropTypes.object.description("props injected to component wrapper"),
|
|
21
23
|
onFocusNextGroup: PropTypes.func.description("focus next group callback"),
|
|
22
24
|
onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
|
|
23
25
|
onFocusGroupSet: PropTypes.func.description("focus group set callback"),
|
|
24
|
-
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(
|
|
26
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(
|
|
27
|
+
"pill components"
|
|
28
|
+
)
|
|
25
29
|
};
|
|
26
30
|
PillGroup.propTypes = props;
|
|
27
31
|
PillGroup.displayName = "PillGroup";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/PillGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\n\nconst pillGroupBlockName = 'pill-group';\n\nexport const Container = aggregatedClasses('div')(pillGroupBlockName);\n\nconst PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => (\n <FocusGroupProvider\n keyBindings={{\n Tab: 'next',\n }}\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n orientation=\"horizontal\"\n >\n <Container {...containerProps}>{children}</Container>\n </FocusGroupProvider>\n);\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n /** pill components */\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(\n 'pill components',\n ),\n};\n\nPillGroup.propTypes = props;\nPillGroup.displayName = 'PillGroup';\nconst DSPillGroupWithSchema = describe(PillGroup);\nDSPillGroupWithSchema.propTypes = props;\n\nexport { PillGroup, DSPillGroupWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB;AAEpB,MAAM,YAAY,kBAAkB,KAAK,EAAE,kBAAkB;AAEpE,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,kBAAkB,sBAAsB,iBAAiB,SAAS,MAC1G,oBAAC;AAAA,EACC,aAAa;AAAA,IACX,KAAK;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAY;AAAA,EAEZ,8BAAC;AAAA,IAAW,GAAG;AAAA,IAAiB;AAAA,GAAS;AAAA,CAC3C;AAGF,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AAAA,EAEtE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,GAAG,UAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC5F;AAAA,EACF;AACF;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|