@elliemae/ds-pills 3.0.0-alpha.0 → 3.0.0-alpha.1
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 +15 -3
- package/dist/cjs/components/Pill.js.map +1 -1
- package/dist/cjs/components/PillButton.js +32 -4
- package/dist/cjs/components/PillButton.js.map +1 -1
- package/dist/cjs/components/PillGroup.js +34 -6
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +21 -4
- package/dist/cjs/components/types/DropdownPill.js.map +1 -1
- package/dist/cjs/components/types/RemovablePill.js +17 -6
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/deprecated/DropdownPill.js +50 -14
- package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/InputPill.js +46 -14
- package/dist/cjs/deprecated/InputPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPills.js +53 -15
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +64 -26
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +55 -19
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +60 -24
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/cjs/deprecated/Pill.js +48 -14
- package/dist/cjs/deprecated/Pill.js.map +1 -1
- package/dist/cjs/deprecated/PillGroup.js +15 -3
- package/dist/cjs/deprecated/PillGroup.js.map +1 -1
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/props.js +2 -1
- package/dist/cjs/props.js.map +2 -2
- package/dist/esm/components/Pill.js +17 -3
- package/dist/esm/components/Pill.js.map +1 -1
- package/dist/esm/components/PillButton.js +34 -4
- package/dist/esm/components/PillButton.js.map +1 -1
- package/dist/esm/components/PillGroup.js +41 -6
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +23 -4
- package/dist/esm/components/types/DropdownPill.js.map +1 -1
- package/dist/esm/components/types/RemovablePill.js +17 -6
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/deprecated/DropdownPill.js +52 -14
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/InputPill.js +48 -14
- package/dist/esm/deprecated/InputPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPills.js +55 -15
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +66 -26
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +57 -19
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +62 -24
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/esm/deprecated/Pill.js +50 -14
- package/dist/esm/deprecated/Pill.js.map +1 -1
- package/dist/esm/deprecated/PillGroup.js +17 -3
- package/dist/esm/deprecated/PillGroup.js.map +1 -1
- package/dist/esm/props.js +2 -1
- package/dist/esm/props.js.map +2 -2
- package/package.json +16 -15
- package/dist/types/components/Pill.d.ts +0 -5
- package/dist/types/components/PillButton.d.ts +0 -5
- package/dist/types/components/PillGroup.d.ts +0 -13
- package/dist/types/components/index.d.ts +0 -3
- package/dist/types/components/styled.d.ts +0 -24
- package/dist/types/components/types/DropdownPill.d.ts +0 -3
- package/dist/types/components/types/InputPill.d.ts +0 -3
- package/dist/types/components/types/LabelPill.d.ts +0 -3
- package/dist/types/components/types/ReadOnlyPill.d.ts +0 -3
- package/dist/types/components/types/RemovablePill.d.ts +0 -3
- package/dist/types/components/types/ValuePill.d.ts +0 -3
- package/dist/types/components/types/index.d.ts +0 -6
- package/dist/types/deprecated/DropdownPill.d.ts +0 -66
- package/dist/types/deprecated/InputPill.d.ts +0 -10
- package/dist/types/deprecated/LabeledDropdownPills.d.ts +0 -82
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +0 -17
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +0 -15
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +0 -29
- package/dist/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +0 -1
- package/dist/types/deprecated/LabeledPills.d.ts +0 -52
- package/dist/types/deprecated/OverflowPill.d.ts +0 -33
- package/dist/types/deprecated/Pill.d.ts +0 -59
- package/dist/types/deprecated/PillGroup.d.ts +0 -50
- package/dist/types/deprecated/ReadOnlyPill.d.ts +0 -56
- package/dist/types/deprecated/RemovablePill.d.ts +0 -49
- package/dist/types/deprecated/index.d.ts +0 -9
- package/dist/types/index.d.ts +0 -3
- package/dist/types/props.d.ts +0 -92
- package/dist/types/tests/DSPill.test.d.ts +0 -1
- package/dist/types/tests/DSPillGroup.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.test.d.ts +0 -1
- package/dist/types/utils.d.ts +0 -4
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2, { useRef, useState } from "react";
|
|
3
34
|
import { PropTypes, describe } from "react-desc";
|
|
@@ -5,21 +36,28 @@ import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
|
|
|
5
36
|
import { ChevronDown } from "@elliemae/ds-icons";
|
|
6
37
|
import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup/useFocusGroupItem";
|
|
7
38
|
import { Pill } from "./Pill";
|
|
8
|
-
function DropdownPill({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
39
|
+
function DropdownPill(_a) {
|
|
40
|
+
var _b = _a, {
|
|
41
|
+
containerProps = {},
|
|
42
|
+
label = "",
|
|
43
|
+
variant,
|
|
44
|
+
tabIndex = -1,
|
|
45
|
+
closeMenuOnItemSelection = false,
|
|
46
|
+
maxWidth,
|
|
47
|
+
minWidth
|
|
48
|
+
} = _b, dropdownProps = __objRest(_b, [
|
|
49
|
+
"containerProps",
|
|
50
|
+
"label",
|
|
51
|
+
"variant",
|
|
52
|
+
"tabIndex",
|
|
53
|
+
"closeMenuOnItemSelection",
|
|
54
|
+
"maxWidth",
|
|
55
|
+
"minWidth"
|
|
56
|
+
]);
|
|
18
57
|
const ref = useRef(null);
|
|
19
58
|
const [chevronEl, chevronRef] = useState();
|
|
20
59
|
const { focusFirst } = useFocusGroupItem(ref);
|
|
21
|
-
return /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
|
|
22
|
-
...dropdownProps,
|
|
60
|
+
return /* @__PURE__ */ React2.createElement(DSDropdownMenu, __spreadProps(__spreadValues({}, dropdownProps), {
|
|
23
61
|
closeMenuOnItemSelection,
|
|
24
62
|
maxWidth,
|
|
25
63
|
hideIfNotVisible: true,
|
|
@@ -30,7 +68,7 @@ function DropdownPill({
|
|
|
30
68
|
triggerComponent: /* @__PURE__ */ React2.createElement(Pill, {
|
|
31
69
|
"data-testid": "dropdown-pill",
|
|
32
70
|
className: "dropdown-pill",
|
|
33
|
-
containerProps: { role: "listbox",
|
|
71
|
+
containerProps: __spreadValues({ role: "listbox" }, containerProps),
|
|
34
72
|
innerRef: ref,
|
|
35
73
|
label,
|
|
36
74
|
rightAddon: /* @__PURE__ */ React2.createElement("div", {
|
|
@@ -42,7 +80,7 @@ function DropdownPill({
|
|
|
42
80
|
tabIndex,
|
|
43
81
|
variant
|
|
44
82
|
})
|
|
45
|
-
});
|
|
83
|
+
}));
|
|
46
84
|
}
|
|
47
85
|
const props = {
|
|
48
86
|
containerProps: PropTypes.object.description("props injected to component wrapper"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n containerProps = {},\n label = '',\n variant,\n tabIndex = -1,\n closeMenuOnItemSelection = false,\n maxWidth,\n minWidth,\n ...dropdownProps\n}) {\n const ref = useRef(null);\n const [chevronEl, chevronRef] = useState();\n const { focusFirst } = useFocusGroupItem(ref);\n return (\n <DSDropdownMenu\n {...dropdownProps}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n maxWidth={maxWidth}\n hideIfNotVisible\n menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n minWidth={minWidth}\n onClose={focusFirst}\n referenceNode={chevronEl}\n triggerComponent={\n <Pill\n data-testid=\"dropdown-pill\"\n className=\"dropdown-pill\"\n containerProps={{ role: 'listbox', ...containerProps }}\n innerRef={ref}\n label={label}\n rightAddon={\n <div ref={chevronRef}>\n <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n </div>\n }\n tabIndex={tabIndex}\n variant={variant}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** html focus border */\n tabIndex: PropTypes.number.description('html focus order'),\n /** close menu on item selection */\n closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n /** pill max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAsB;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAsB,IASnB;AATmB,eACpB;AAAA,qBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,2BAA2B;AAAA,IAC3B;AAAA,IACA;AAAA,MAPoB,IAQjB,0BARiB,IAQjB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,kBAAkB;AACzC,SACE,qCAAC,gBAAD,iCACM,gBADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,qCAAC,MAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,iBAAE,MAAM,aAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,qCAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,qCAAC,aAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,UAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,UAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,UAAU,KAAK,YAAY;AAAA,EAErD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
1
29
|
import * as React from "react";
|
|
2
30
|
import React2 from "react";
|
|
3
31
|
import { CloseXsmall } from "@elliemae/ds-icons";
|
|
@@ -7,16 +35,23 @@ import { Pill } from "./Pill";
|
|
|
7
35
|
const StyledInputPill = aggregatedClasses(Pill)("input-pill", null, ({ value }) => ({
|
|
8
36
|
value
|
|
9
37
|
}));
|
|
10
|
-
function InputPill({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
38
|
+
function InputPill(_a) {
|
|
39
|
+
var _b = _a, {
|
|
40
|
+
containerProps = {},
|
|
41
|
+
placeholder = "Enter Value",
|
|
42
|
+
onChange = () => {
|
|
43
|
+
},
|
|
44
|
+
onRemove,
|
|
45
|
+
value,
|
|
46
|
+
type
|
|
47
|
+
} = _b, otherProps = __objRest(_b, [
|
|
48
|
+
"containerProps",
|
|
49
|
+
"placeholder",
|
|
50
|
+
"onChange",
|
|
51
|
+
"onRemove",
|
|
52
|
+
"value",
|
|
53
|
+
"type"
|
|
54
|
+
]);
|
|
20
55
|
let TypeOfInput = DSInput;
|
|
21
56
|
switch (type) {
|
|
22
57
|
case "inputText":
|
|
@@ -32,13 +67,12 @@ function InputPill({
|
|
|
32
67
|
className: "input-pill",
|
|
33
68
|
classProps: { value },
|
|
34
69
|
containerProps,
|
|
35
|
-
label: /* @__PURE__ */ React2.createElement(TypeOfInput, {
|
|
70
|
+
label: /* @__PURE__ */ React2.createElement(TypeOfInput, __spreadValues({
|
|
36
71
|
"data-testid": "input-pill",
|
|
37
72
|
onChange,
|
|
38
73
|
placeholder,
|
|
39
|
-
value
|
|
40
|
-
|
|
41
|
-
}),
|
|
74
|
+
value
|
|
75
|
+
}, otherProps)),
|
|
42
76
|
rightAddon: value && /* @__PURE__ */ React2.createElement(CloseXsmall, {
|
|
43
77
|
className: "remove-pill-button",
|
|
44
78
|
"data-testid": "remove-pill-button",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/InputPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n value,\n}));\n\nexport function InputPill({\n containerProps = {},\n placeholder = 'Enter Value',\n onChange = () => {},\n onRemove,\n value,\n type,\n ...otherProps\n}) {\n let TypeOfInput = DSInput;\n // TODO: implement the DSTimeInput, see how because it returns a moment()\n // TODO: implement the DSDateInput\n switch (type) {\n case 'inputText':\n TypeOfInput = DSInput;\n break;\n case 'inputMask':\n TypeOfInput = DSInputMask;\n break;\n default:\n break;\n }\n\n return (\n <StyledInputPill\n className=\"input-pill\"\n classProps={{ value }}\n containerProps={containerProps}\n label={\n <TypeOfInput\n data-testid=\"input-pill\"\n onChange={onChange}\n placeholder={placeholder}\n value={value}\n {...otherProps}\n />\n }\n rightAddon={\n value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n}\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,kBAAkB,MAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,kBAAkB,MAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB,IAQvB;AARuB,eACxB;AAAA,qBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,WAAW,MAAM;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MANwB,IAOrB,uBAPqB,IAOrB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,qCAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,qCAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,OACI;AAAA,IAGR,YACE,SAAS,qCAAC,aAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2 from "react";
|
|
3
34
|
import { PropTypes, describe } from "react-desc";
|
|
@@ -11,31 +42,40 @@ const DropdownPills = {
|
|
|
11
42
|
cascaded: LabeledDropdownCascadeMenuPill
|
|
12
43
|
};
|
|
13
44
|
const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
|
|
14
|
-
function LabeledDropdownPills({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
45
|
+
function LabeledDropdownPills(_a) {
|
|
46
|
+
var _b = _a, {
|
|
47
|
+
label = "",
|
|
48
|
+
value,
|
|
49
|
+
type,
|
|
50
|
+
onFocusNextGroup,
|
|
51
|
+
onFocusPreviousGroup,
|
|
52
|
+
onFocusGroupSet,
|
|
53
|
+
maxWidth,
|
|
54
|
+
minWidth,
|
|
55
|
+
fixed
|
|
56
|
+
} = _b, menuProps = __objRest(_b, [
|
|
57
|
+
"label",
|
|
58
|
+
"value",
|
|
59
|
+
"type",
|
|
60
|
+
"onFocusNextGroup",
|
|
61
|
+
"onFocusPreviousGroup",
|
|
62
|
+
"onFocusGroupSet",
|
|
63
|
+
"maxWidth",
|
|
64
|
+
"minWidth",
|
|
65
|
+
"fixed"
|
|
66
|
+
]);
|
|
26
67
|
const Component = createDropdownPill(type);
|
|
27
68
|
return /* @__PURE__ */ React2.createElement(PillGroup, {
|
|
28
69
|
onFocusGroupSet,
|
|
29
70
|
onFocusNextGroup,
|
|
30
71
|
onFocusPreviousGroup
|
|
31
|
-
}, /* @__PURE__ */ React2.createElement(Component, {
|
|
32
|
-
...menuProps,
|
|
72
|
+
}, /* @__PURE__ */ React2.createElement(Component, __spreadProps(__spreadValues({}, menuProps), {
|
|
33
73
|
label,
|
|
34
74
|
maxWidth,
|
|
35
75
|
minWidth,
|
|
36
76
|
value,
|
|
37
77
|
fixed
|
|
38
|
-
}));
|
|
78
|
+
})));
|
|
39
79
|
}
|
|
40
80
|
const props = {
|
|
41
81
|
type: PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledDropdownPills.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n single: LabeledDropdownSinglePill,\n multi: LabeledDropdownMultiPills,\n cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) =>\n DropdownPills[type] || DropdownPills.single;\n\nfunction LabeledDropdownPills({\n label = '',\n value,\n type,\n onFocusNextGroup,\n onFocusPreviousGroup,\n onFocusGroupSet,\n maxWidth,\n minWidth,\n fixed,\n ...menuProps\n}) {\n const Component = createDropdownPill(type);\n\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Component\n {...menuProps}\n label={label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n value={value}\n fixed={fixed}\n />\n </PillGroup>\n );\n}\n\nconst props = {\n /** pill type */\n type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description(\n 'pill type',\n ),\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 max width */\n maxWidth: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).description('pill min width'),\n /** fixed pill */\n fixed: PropTypes.bool.description('fixed pill'),\n /** pill label text */\n label: PropTypes.string.isRequired.description('pill label text'),\n /** pill value */\n value: PropTypes.oneOfType([\n PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ),\n PropTypes.shape({\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA;AAGZ,MAAM,qBAAqB,CAAC,SAC1B,cAAc,SAAS,cAAc;AAEvC,8BAA8B;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA;AAGZ,MAAM,qBAAqB,CAAC,SAC1B,cAAc,SAAS,cAAc;AAEvC,8BAA8B,IAW3B;AAX2B,eAC5B;AAAA,YAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAT4B,IAUzB,sBAVyB,IAUzB;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,YAAY,mBAAmB;AAErC,SACE,qCAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,WAAD,iCACM,YADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,aAAa,YACrD;AAAA,EAGF,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,sBAAsB,UAAU,KAAK,YAAY;AAAA,EAEjD,iBAAiB,UAAU,KAAK,YAAY;AAAA,EAE5C,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EAEf,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EAEf,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU,QACR,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA;AAAA,IAGrB,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA;AAAA,KAElB,YAAY;AAAA;AAGjB,qBAAqB,YAAY;AACjC,MAAM,mCAAmC,SAAS;AAClD,iCAAiC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2 from "react";
|
|
3
34
|
import { isFunction, addOrRemove } from "@elliemae/ds-utilities";
|
|
@@ -10,45 +41,55 @@ function renderMenuItems(options, factory) {
|
|
|
10
41
|
if (option.type === "submenu") {
|
|
11
42
|
const SubmenuComponent = factory("submenu");
|
|
12
43
|
const ChildComponent = factory("selection-group");
|
|
13
|
-
return /* @__PURE__ */ React2.createElement(SubmenuComponent, {
|
|
14
|
-
...option,
|
|
44
|
+
return /* @__PURE__ */ React2.createElement(SubmenuComponent, __spreadProps(__spreadValues({}, option), {
|
|
15
45
|
key: option.id,
|
|
16
46
|
item: option
|
|
17
|
-
}, /* @__PURE__ */ React2.createElement(ChildComponent, {
|
|
18
|
-
...option,
|
|
47
|
+
}), /* @__PURE__ */ React2.createElement(ChildComponent, __spreadProps(__spreadValues({}, option), {
|
|
19
48
|
id: option.id,
|
|
20
49
|
item: option,
|
|
21
50
|
items: option.items,
|
|
22
51
|
itemValueAccessor: (item) => item,
|
|
23
52
|
multi: true
|
|
24
|
-
}));
|
|
53
|
+
})));
|
|
25
54
|
}
|
|
26
|
-
return /* @__PURE__ */ React2.createElement(ItemComponent, {
|
|
27
|
-
...option,
|
|
55
|
+
return /* @__PURE__ */ React2.createElement(ItemComponent, __spreadProps(__spreadValues({}, option), {
|
|
28
56
|
key: option.id || index,
|
|
29
57
|
item: option
|
|
30
|
-
});
|
|
58
|
+
}));
|
|
31
59
|
});
|
|
32
60
|
}
|
|
33
61
|
const getSubmenuOptionLabelById = (options, id) => {
|
|
34
62
|
const index = options.findIndex((option) => option.id === id);
|
|
35
63
|
return index ? options[index].label : "";
|
|
36
64
|
};
|
|
37
|
-
function LabeledDropdownCascadeMenuPill({
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
65
|
+
function LabeledDropdownCascadeMenuPill(_a) {
|
|
66
|
+
var _b = _a, {
|
|
67
|
+
label,
|
|
68
|
+
options,
|
|
69
|
+
value: optionValue,
|
|
70
|
+
onChange,
|
|
71
|
+
onRemove,
|
|
72
|
+
value: selection = {},
|
|
73
|
+
placeholder = "---",
|
|
74
|
+
onFocusNextGroup,
|
|
75
|
+
onFocusPreviousGroup,
|
|
76
|
+
onFocusGroupSet,
|
|
77
|
+
maxWidth,
|
|
78
|
+
minWidth
|
|
79
|
+
} = _b, menuProps = __objRest(_b, [
|
|
80
|
+
"label",
|
|
81
|
+
"options",
|
|
82
|
+
"value",
|
|
83
|
+
"onChange",
|
|
84
|
+
"onRemove",
|
|
85
|
+
"value",
|
|
86
|
+
"placeholder",
|
|
87
|
+
"onFocusNextGroup",
|
|
88
|
+
"onFocusPreviousGroup",
|
|
89
|
+
"onFocusGroupSet",
|
|
90
|
+
"maxWidth",
|
|
91
|
+
"minWidth"
|
|
92
|
+
]);
|
|
52
93
|
const selectionId = Object.keys(selection)[0];
|
|
53
94
|
const selectionValues = selection[selectionId] || "";
|
|
54
95
|
const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
|
|
@@ -75,8 +116,7 @@ function LabeledDropdownCascadeMenuPill({
|
|
|
75
116
|
onFocusGroupSet,
|
|
76
117
|
onFocusNextGroup,
|
|
77
118
|
onFocusPreviousGroup
|
|
78
|
-
}, /* @__PURE__ */ React2.createElement(DropdownPill, {
|
|
79
|
-
...menuProps,
|
|
119
|
+
}, /* @__PURE__ */ React2.createElement(DropdownPill, __spreadProps(__spreadValues({}, menuProps), {
|
|
80
120
|
itemsRenderer: renderMenuItems,
|
|
81
121
|
label: dropdownLabel || placeholder,
|
|
82
122
|
maxWidth,
|
|
@@ -88,7 +128,7 @@ function LabeledDropdownCascadeMenuPill({
|
|
|
88
128
|
},
|
|
89
129
|
singleGroupSelection: true,
|
|
90
130
|
variant: "title"
|
|
91
|
-
}), Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ React2.createElement(RemovablePill, {
|
|
131
|
+
})), Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ React2.createElement(RemovablePill, {
|
|
92
132
|
key: option.id,
|
|
93
133
|
label: option.label,
|
|
94
134
|
onRemove: () => removeOption(option)
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n return options.map((option, index) => {\n const ItemComponent = factory('radio');\n\n if (option.type === 'submenu') {\n const SubmenuComponent = factory('submenu');\n const ChildComponent = factory('selection-group');\n return (\n <SubmenuComponent {...option} key={option.id} item={option}>\n <ChildComponent\n {...option}\n id={option.id}\n item={option}\n items={option.items}\n itemValueAccessor={(item) => item}\n multi\n />\n </SubmenuComponent>\n );\n }\n\n return <ItemComponent {...option} key={option.id || index} item={option} />;\n });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n const index = options.findIndex((option) => option.id === id);\n return index ? options[index].label : '';\n};\n\nfunction LabeledDropdownCascadeMenuPill({\n label,\n options,\n value: optionValue,\n onChange,\n onRemove,\n value: selection = {},\n placeholder = '---',\n onFocusNextGroup,\n onFocusPreviousGroup,\n onFocusGroupSet,\n maxWidth,\n minWidth,\n ...menuProps\n}) {\n const selectionId = Object.keys(selection)[0];\n const selectionValues = selection[selectionId] || '';\n const dropdownLabel = Array.isArray(selectionValues)\n ? getSubmenuOptionLabelById(options, selectionId)\n : selectionValues;\n\n const handleSelectChange = ({ item, group }) => {\n if (isFunction(onChange)) {\n const nextSelection = group\n ? {\n [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n }\n : {\n [item.id]: item.label,\n };\n onChange(nextSelection);\n }\n };\n\n const removeOption = (option) => {\n if (isFunction(onChange)) {\n const nextSelection = {\n [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n };\n onChange(nextSelection);\n }\n onRemove(option);\n };\n\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <DropdownPill\n {...menuProps}\n itemsRenderer={renderMenuItems}\n label={dropdownLabel || placeholder}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectChange={handleSelectChange}\n options={options}\n selection={{\n [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n }}\n singleGroupSelection\n variant=\"title\"\n />\n {Array.isArray(selectionValues) &&\n selectionValues.map((option) => (\n <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n ))}\n </PillGroup>\n );\n}\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,yBAAyB,SAAS,SAAS;AACzC,SAAO,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,UAAM,gBAAgB,QAAQ;AAE9B,QAAI,OAAO,SAAS,WAAW;AAC7B,YAAM,mBAAmB,QAAQ;AACjC,YAAM,iBAAiB,QAAQ;AAC/B,aACE,qCAAC,kBAAD
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,yBAAyB,SAAS,SAAS;AACzC,SAAO,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,UAAM,gBAAgB,QAAQ;AAE9B,QAAI,OAAO,SAAS,WAAW;AAC7B,YAAM,mBAAmB,QAAQ;AACjC,YAAM,iBAAiB,QAAQ;AAC/B,aACE,qCAAC,kBAAD,iCAAsB,SAAtB;AAAA,QAA8B,KAAK,OAAO;AAAA,QAAI,MAAM;AAAA,UAClD,qCAAC,gBAAD,iCACM,SADN;AAAA,QAEE,IAAI,OAAO;AAAA,QACX,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,mBAAmB,CAAC,SAAS;AAAA,QAC7B,OAAK;AAAA;AAAA;AAMb,WAAO,qCAAC,eAAD,iCAAmB,SAAnB;AAAA,MAA2B,KAAK,OAAO,MAAM;AAAA,MAAO,MAAM;AAAA;AAAA;AAAA;AAIrE,MAAM,4BAA4B,CAAC,SAAS,OAAO;AACjD,QAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO;AAC1D,SAAO,QAAQ,QAAQ,OAAO,QAAQ;AAAA;AAGxC,wCAAwC,IAcrC;AAdqC,eACtC;AAAA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IACnB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAZsC,IAanC,sBAbmC,IAanC;AAAA,IAZH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,cAAc,OAAO,KAAK,WAAW;AAC3C,QAAM,kBAAkB,UAAU,gBAAgB;AAClD,QAAM,gBAAgB,MAAM,QAAQ,mBAChC,0BAA0B,SAAS,eACnC;AAEJ,QAAM,qBAAqB,CAAC,EAAE,MAAM,YAAY;AAC9C,QAAI,WAAW,WAAW;AACxB,YAAM,gBAAgB,QAClB;AAAA,SACG,MAAM,KAAK,YAAY,CAAC,GAAI,UAAU,MAAM,OAAO,KAAM,MAAM,CAAC,MAAM,EAAE;AAAA,UAE3E;AAAA,SACG,KAAK,KAAK,KAAK;AAAA;AAEtB,eAAS;AAAA;AAAA;AAIb,QAAM,eAAe,CAAC,WAAW;AAC/B,QAAI,WAAW,WAAW;AACxB,YAAM,gBAAgB;AAAA,SACnB,cAAc,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI;AAAA;AAEnE,eAAS;AAAA;AAEX,aAAS;AAAA;AAGX,SACE,qCAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,cAAD,iCACM,YADN;AAAA,IAEE,eAAe;AAAA,IACf,OAAO,iBAAiB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,OACR,cAAc,MAAM,QAAQ,mBAAmB,gBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,IAErF,sBAAoB;AAAA,IACpB,SAAQ;AAAA,OAET,MAAM,QAAQ,oBACb,gBAAgB,IAAI,CAAC,WACnB,qCAAC,eAAD;AAAA,IAAe,KAAK,OAAO;AAAA,IAAI,OAAO,OAAO;AAAA,IAAO,UAAU,MAAM,aAAa;AAAA;AAAA;AAO3F,IAAO,yCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2, { useState, useEffect, useCallback } from "react";
|
|
3
34
|
import { find } from "lodash";
|
|
@@ -6,17 +37,26 @@ import { RemovablePill } from "../RemovablePill";
|
|
|
6
37
|
import { Pill } from "../Pill";
|
|
7
38
|
import { OverflowPill } from "../OverflowPill";
|
|
8
39
|
import { DropdownPill } from "../DropdownPill";
|
|
9
|
-
function LabeledDropdownMultiPills({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
40
|
+
function LabeledDropdownMultiPills(_a) {
|
|
41
|
+
var _b = _a, {
|
|
42
|
+
label,
|
|
43
|
+
options = [],
|
|
44
|
+
value = [],
|
|
45
|
+
onSelect = () => null,
|
|
46
|
+
onRemove = () => null,
|
|
47
|
+
onChange,
|
|
48
|
+
maxWidth,
|
|
49
|
+
minWidth
|
|
50
|
+
} = _b, menuProps = __objRest(_b, [
|
|
51
|
+
"label",
|
|
52
|
+
"options",
|
|
53
|
+
"value",
|
|
54
|
+
"onSelect",
|
|
55
|
+
"onRemove",
|
|
56
|
+
"onChange",
|
|
57
|
+
"maxWidth",
|
|
58
|
+
"minWidth"
|
|
59
|
+
]);
|
|
20
60
|
const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);
|
|
21
61
|
const [selectedOptions, setSelectedOptions] = useState(value);
|
|
22
62
|
const [allOptions, setAllOptions] = useState(options);
|
|
@@ -34,9 +74,9 @@ function LabeledDropdownMultiPills({
|
|
|
34
74
|
if (totalDefaultOptions) {
|
|
35
75
|
const newOptions = allOptions.map((opt) => {
|
|
36
76
|
if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {
|
|
37
|
-
return {
|
|
77
|
+
return __spreadProps(__spreadValues({}, opt), { fixedItem: true });
|
|
38
78
|
}
|
|
39
|
-
return {
|
|
79
|
+
return __spreadProps(__spreadValues({}, opt), { fixedItem: false });
|
|
40
80
|
});
|
|
41
81
|
setAllOptions(newOptions);
|
|
42
82
|
}
|
|
@@ -73,27 +113,25 @@ function LabeledDropdownMultiPills({
|
|
|
73
113
|
}
|
|
74
114
|
return Pill;
|
|
75
115
|
};
|
|
76
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, {
|
|
77
|
-
...menuProps,
|
|
116
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, __spreadProps(__spreadValues({}, menuProps), {
|
|
78
117
|
focusOnOpen: false,
|
|
79
118
|
label,
|
|
80
119
|
maxWidth,
|
|
81
120
|
minWidth,
|
|
82
121
|
onSelectMenuItem: selectOption,
|
|
83
122
|
options: [
|
|
84
|
-
{
|
|
85
|
-
...menuProps,
|
|
123
|
+
__spreadProps(__spreadValues({}, menuProps), {
|
|
86
124
|
type: "SelectionGroup",
|
|
87
125
|
id: "multi-selection-views",
|
|
88
126
|
multi: true,
|
|
89
127
|
items: allOptions
|
|
90
|
-
}
|
|
128
|
+
})
|
|
91
129
|
],
|
|
92
130
|
selection: {
|
|
93
131
|
"multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
|
|
94
132
|
},
|
|
95
133
|
variant: "title"
|
|
96
|
-
}), selectedOptions && selectedOptions.map((option, index) => {
|
|
134
|
+
})), selectedOptions && selectedOptions.map((option, index) => {
|
|
97
135
|
const TypeOfPill = typeOfPill();
|
|
98
136
|
if (index < overflowQuantity) {
|
|
99
137
|
return /* @__PURE__ */ React2.createElement(TypeOfPill, {
|
|
@@ -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;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,mCAAmC;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,mCAAmC,IAUhC;AAVgC,eACjC;AAAA;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MARiC,IAS9B,sBAT8B,IAS9B;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,qBAAqB,0BAA0B,SAAS;AAC/D,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AACvD,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AAEvD,QAAM,mBAAmB;AAEzB,YAAU,MAAM,mBAAmB,QAAQ,CAAC;AAE5C,YAAU,MAAM;AACd,UAAM,aAAa,WAAW,OAAO,CAAC,WAAW,OAAO;AACxD,QAAI,WAAW,SAAS,GAAG;AACzB,yBAAmB;AAAA;AAErB,2BAAuB,WAAW;AAAA,KACjC;AAEH,YAAU,MAAM;AACd,QAAI,qBAAqB;AACvB,YAAM,aAAa,WAAW,IAAI,CAAC,QAAQ;AACzC,YAAI,gBAAgB,UAAU,uBAAuB,KAAK,iBAAiB,EAAE,IAAI,IAAI,OAAO;AAC1F,iBAAO,iCAAK,MAAL,EAAU,WAAW;AAAA;AAE9B,eAAO,iCAAK,MAAL,EAAU,WAAW;AAAA;AAG9B,oBAAc;AAAA;AAAA,KAEf,CAAC,UAAU,UAAU;AAExB,YAAU,MAAM;AACd,QAAI,gBAAgB,SAAS,kBAAkB;AAC7C,YAAM,WAAW,gBAAgB,OAAO,CAAC,KAAK,UAAU,SAAS;AACjE,yBAAmB;AAAA;AAAA,KAEpB,CAAC;AAEJ,QAAM,eAAe,YACnB,CAAC,WAAW;AACV,QAAI,CAAC,OAAO,WAAW;AACrB,UAAI,WAAW,WAAW;AACxB,cAAM,YAAY,YAAY,iBAAiB,QAAQ,CAAC,SAAS,KAAK;AACtE,2BAAmB;AACnB,iBAAS;AAAA;AAEX,eAAS;AAAA;AAAA,KAGb,CAAC;AAGH,QAAM,eAAe,YACnB,CAAC,WAAW;AACV,QAAI,CAAC,OAAO,aAAa,gBAAgB,SAAS,qBAAqB;AACrE,UAAI,WAAW,WAAW;AACxB,cAAM,YAAY,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI;AACpE,2BAAmB;AACnB,iBAAS;AAAA;AAEX,eAAS;AAAA;AAAA,KAGb,CAAC;AAGH,QAAM,aAAa,MAAM;AACvB,QAAI,gBAAgB,SAAS,qBAAqB;AAChD,aAAO;AAAA;AAGT,WAAO;AAAA;AAGT,SACE,4DACE,qCAAC,cAAD,iCACM,YADN;AAAA,IAEE,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,SAAS;AAAA,MACP,iCACK,YADL;AAAA,QAEE,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,yBAAyB,kBAAkB,gBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,IAEhF,SAAQ;AAAA,OAET,mBACC,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACrC,UAAM,aAAa;AACnB,QAAI,QAAQ,kBAAkB;AAC5B,aAAO,qCAAC,YAAD;AAAA,QAAY,KAAK,OAAO;AAAA,QAAI,OAAO,OAAO;AAAA,QAAO,UAAU,MAAM,aAAa;AAAA;AAAA;AAEvF,WAAO;AAAA,MAEV,mBAAmB,gBAAgB,SAAS,oBAC3C,qCAAC,cAAD;AAAA,IAAc,OAAO,KAAK,gBAAgB,SAAS;AAAA,IAAoB,SAAS;AAAA;AAAA;AAOxF,IAAO,mCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|