@elliemae/ds-pills 3.3.0-next.2 → 3.3.0-next.5
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 +3 -15
- package/dist/cjs/components/Pill.js.map +1 -1
- package/dist/cjs/components/PillButton.js +4 -32
- package/dist/cjs/components/PillButton.js.map +1 -1
- package/dist/cjs/components/PillGroup.js +3 -19
- package/dist/cjs/components/PillGroup.js.map +1 -1
- package/dist/cjs/components/types/DropdownPill.js +4 -21
- package/dist/cjs/components/types/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/DropdownPill.js +14 -50
- package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/InputPill.js +14 -46
- package/dist/cjs/deprecated/InputPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPills.js +15 -53
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +26 -64
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +19 -55
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +24 -60
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/cjs/deprecated/Pill.js +14 -48
- package/dist/cjs/deprecated/Pill.js.map +1 -1
- package/dist/cjs/deprecated/PillGroup.js +3 -15
- package/dist/cjs/deprecated/PillGroup.js.map +1 -1
- package/dist/esm/components/Pill.js +3 -17
- package/dist/esm/components/Pill.js.map +1 -1
- package/dist/esm/components/PillButton.js +4 -34
- package/dist/esm/components/PillButton.js.map +1 -1
- package/dist/esm/components/PillGroup.js +3 -21
- package/dist/esm/components/PillGroup.js.map +1 -1
- package/dist/esm/components/types/DropdownPill.js +4 -23
- package/dist/esm/components/types/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/DropdownPill.js +14 -52
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/InputPill.js +14 -48
- package/dist/esm/deprecated/InputPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPills.js +15 -55
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +26 -66
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +19 -57
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +24 -62
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/esm/deprecated/Pill.js +14 -50
- package/dist/esm/deprecated/Pill.js.map +1 -1
- package/dist/esm/deprecated/PillGroup.js +3 -17
- package/dist/esm/deprecated/PillGroup.js.map +1 -1
- package/package.json +15 -15
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2 from "react";
|
|
35
4
|
import { isFunction, addOrRemove } from "@elliemae/ds-utilities";
|
|
@@ -42,55 +11,45 @@ function renderMenuItems(options, factory) {
|
|
|
42
11
|
if (option.type === "submenu") {
|
|
43
12
|
const SubmenuComponent = factory("submenu");
|
|
44
13
|
const ChildComponent = factory("selection-group");
|
|
45
|
-
return /* @__PURE__ */ React2.createElement(SubmenuComponent,
|
|
14
|
+
return /* @__PURE__ */ React2.createElement(SubmenuComponent, {
|
|
15
|
+
...option,
|
|
46
16
|
key: option.id,
|
|
47
17
|
item: option
|
|
48
|
-
}
|
|
18
|
+
}, /* @__PURE__ */ React2.createElement(ChildComponent, {
|
|
19
|
+
...option,
|
|
49
20
|
id: option.id,
|
|
50
21
|
item: option,
|
|
51
22
|
items: option.items,
|
|
52
23
|
itemValueAccessor: (item) => item,
|
|
53
24
|
multi: true
|
|
54
|
-
}))
|
|
25
|
+
}));
|
|
55
26
|
}
|
|
56
|
-
return /* @__PURE__ */ React2.createElement(ItemComponent,
|
|
27
|
+
return /* @__PURE__ */ React2.createElement(ItemComponent, {
|
|
28
|
+
...option,
|
|
57
29
|
key: option.id || index,
|
|
58
30
|
item: option
|
|
59
|
-
})
|
|
31
|
+
});
|
|
60
32
|
});
|
|
61
33
|
}
|
|
62
34
|
const getSubmenuOptionLabelById = (options, id) => {
|
|
63
35
|
const index = options.findIndex((option) => option.id === id);
|
|
64
36
|
return index ? options[index].label : "";
|
|
65
37
|
};
|
|
66
|
-
function LabeledDropdownCascadeMenuPill(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"label",
|
|
82
|
-
"options",
|
|
83
|
-
"value",
|
|
84
|
-
"onChange",
|
|
85
|
-
"onRemove",
|
|
86
|
-
"value",
|
|
87
|
-
"placeholder",
|
|
88
|
-
"onFocusNextGroup",
|
|
89
|
-
"onFocusPreviousGroup",
|
|
90
|
-
"onFocusGroupSet",
|
|
91
|
-
"maxWidth",
|
|
92
|
-
"minWidth"
|
|
93
|
-
]);
|
|
38
|
+
function LabeledDropdownCascadeMenuPill({
|
|
39
|
+
label,
|
|
40
|
+
options,
|
|
41
|
+
value: optionValue,
|
|
42
|
+
onChange,
|
|
43
|
+
onRemove,
|
|
44
|
+
value: selection = {},
|
|
45
|
+
placeholder = "---",
|
|
46
|
+
onFocusNextGroup,
|
|
47
|
+
onFocusPreviousGroup,
|
|
48
|
+
onFocusGroupSet,
|
|
49
|
+
maxWidth,
|
|
50
|
+
minWidth,
|
|
51
|
+
...menuProps
|
|
52
|
+
}) {
|
|
94
53
|
const selectionId = Object.keys(selection)[0];
|
|
95
54
|
const selectionValues = selection[selectionId] || "";
|
|
96
55
|
const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
|
|
@@ -117,7 +76,8 @@ function LabeledDropdownCascadeMenuPill(_a) {
|
|
|
117
76
|
onFocusGroupSet,
|
|
118
77
|
onFocusNextGroup,
|
|
119
78
|
onFocusPreviousGroup
|
|
120
|
-
}, /* @__PURE__ */ React2.createElement(DropdownPill,
|
|
79
|
+
}, /* @__PURE__ */ React2.createElement(DropdownPill, {
|
|
80
|
+
...menuProps,
|
|
121
81
|
itemsRenderer: renderMenuItems,
|
|
122
82
|
label: dropdownLabel || placeholder,
|
|
123
83
|
maxWidth,
|
|
@@ -129,7 +89,7 @@ function LabeledDropdownCascadeMenuPill(_a) {
|
|
|
129
89
|
},
|
|
130
90
|
singleGroupSelection: true,
|
|
131
91
|
variant: "title"
|
|
132
|
-
})
|
|
92
|
+
}), Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ React2.createElement(RemovablePill, {
|
|
133
93
|
key: option.id,
|
|
134
94
|
label: option.label,
|
|
135
95
|
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": "
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,yBAAyB,SAAS,SAAS;AACzC,SAAO,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,UAAM,gBAAgB,QAAQ,OAAO;AAErC,QAAI,OAAO,SAAS,WAAW;AAC7B,YAAM,mBAAmB,QAAQ,SAAS;AAC1C,YAAM,iBAAiB,QAAQ,iBAAiB;AAChD,aACE,qCAAC;AAAA,QAAkB,GAAG;AAAA,QAAQ,KAAK,OAAO;AAAA,QAAI,MAAM;AAAA,SAClD,qCAAC;AAAA,QACE,GAAG;AAAA,QACJ,IAAI,OAAO;AAAA,QACX,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,mBAAmB,CAAC,SAAS;AAAA,QAC7B,OAAK;AAAA,OACP,CACF;AAAA,IAEJ;AAEA,WAAO,qCAAC;AAAA,MAAe,GAAG;AAAA,MAAQ,KAAK,OAAO,MAAM;AAAA,MAAO,MAAM;AAAA,KAAQ;AAAA,EAC3E,CAAC;AACH;AAEA,MAAM,4BAA4B,CAAC,SAAS,OAAO;AACjD,QAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAC5D,SAAO,QAAQ,QAAQ,OAAO,QAAQ;AACxC;AAEA,wCAAwC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO,YAAY,CAAC;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,cAAc,OAAO,KAAK,SAAS,EAAE;AAC3C,QAAM,kBAAkB,UAAU,gBAAgB;AAClD,QAAM,gBAAgB,MAAM,QAAQ,eAAe,IAC/C,0BAA0B,SAAS,WAAW,IAC9C;AAEJ,QAAM,qBAAqB,CAAC,EAAE,MAAM,YAAY;AAC9C,QAAI,WAAW,QAAQ,GAAG;AACxB,YAAM,gBAAgB,QAClB;AAAA,QACE,CAAC,MAAM,KAAK,YAAY,CAAC,GAAI,UAAU,MAAM,OAAO,CAAC,CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE;AAAA,MAC7E,IACA;AAAA,QACE,CAAC,KAAK,KAAK,KAAK;AAAA,MAClB;AACJ,eAAS,aAAa;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,WAAW;AAC/B,QAAI,WAAW,QAAQ,GAAG;AACxB,YAAM,gBAAgB;AAAA,QACpB,CAAC,cAAc,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI,EAAE;AAAA,MACrE;AACA,eAAS,aAAa;AAAA,IACxB;AACA,aAAS,MAAM;AAAA,EACjB;AAEA,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC;AAAA,IACE,GAAG;AAAA,IACJ,eAAe;AAAA,IACf,OAAO,iBAAiB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,CAAC,cAAc,MAAM,QAAQ,eAAe,IAAI,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI;AAAA,IACrF;AAAA,IACA,sBAAoB;AAAA,IACpB,SAAQ;AAAA,GACV,GACC,MAAM,QAAQ,eAAe,KAC5B,gBAAgB,IAAI,CAAC,WACnB,qCAAC;AAAA,IAAc,KAAK,OAAO;AAAA,IAAI,OAAO,OAAO;AAAA,IAAO,UAAU,MAAM,aAAa,MAAM;AAAA,GAAG,CAC3F,CACL;AAEJ;AAGA,IAAO,yCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2, { useState, useEffect, useCallback } from "react";
|
|
35
4
|
import { find } from "lodash";
|
|
@@ -38,26 +7,17 @@ import { RemovablePill } from "../RemovablePill";
|
|
|
38
7
|
import { Pill } from "../Pill";
|
|
39
8
|
import { OverflowPill } from "../OverflowPill";
|
|
40
9
|
import { DropdownPill } from "../DropdownPill";
|
|
41
|
-
function LabeledDropdownMultiPills(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"label",
|
|
53
|
-
"options",
|
|
54
|
-
"value",
|
|
55
|
-
"onSelect",
|
|
56
|
-
"onRemove",
|
|
57
|
-
"onChange",
|
|
58
|
-
"maxWidth",
|
|
59
|
-
"minWidth"
|
|
60
|
-
]);
|
|
10
|
+
function LabeledDropdownMultiPills({
|
|
11
|
+
label,
|
|
12
|
+
options = [],
|
|
13
|
+
value = [],
|
|
14
|
+
onSelect = () => null,
|
|
15
|
+
onRemove = () => null,
|
|
16
|
+
onChange,
|
|
17
|
+
maxWidth,
|
|
18
|
+
minWidth,
|
|
19
|
+
...menuProps
|
|
20
|
+
}) {
|
|
61
21
|
const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);
|
|
62
22
|
const [selectedOptions, setSelectedOptions] = useState(value);
|
|
63
23
|
const [allOptions, setAllOptions] = useState(options);
|
|
@@ -75,9 +35,9 @@ function LabeledDropdownMultiPills(_a) {
|
|
|
75
35
|
if (totalDefaultOptions) {
|
|
76
36
|
const newOptions = allOptions.map((opt) => {
|
|
77
37
|
if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {
|
|
78
|
-
return
|
|
38
|
+
return { ...opt, fixedItem: true };
|
|
79
39
|
}
|
|
80
|
-
return
|
|
40
|
+
return { ...opt, fixedItem: false };
|
|
81
41
|
});
|
|
82
42
|
setAllOptions(newOptions);
|
|
83
43
|
}
|
|
@@ -114,25 +74,27 @@ function LabeledDropdownMultiPills(_a) {
|
|
|
114
74
|
}
|
|
115
75
|
return Pill;
|
|
116
76
|
};
|
|
117
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill,
|
|
77
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, {
|
|
78
|
+
...menuProps,
|
|
118
79
|
focusOnOpen: false,
|
|
119
80
|
label,
|
|
120
81
|
maxWidth,
|
|
121
82
|
minWidth,
|
|
122
83
|
onSelectMenuItem: selectOption,
|
|
123
84
|
options: [
|
|
124
|
-
|
|
85
|
+
{
|
|
86
|
+
...menuProps,
|
|
125
87
|
type: "SelectionGroup",
|
|
126
88
|
id: "multi-selection-views",
|
|
127
89
|
multi: true,
|
|
128
90
|
items: allOptions
|
|
129
|
-
}
|
|
91
|
+
}
|
|
130
92
|
],
|
|
131
93
|
selection: {
|
|
132
94
|
"multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
|
|
133
95
|
},
|
|
134
96
|
variant: "title"
|
|
135
|
-
})
|
|
97
|
+
}), selectedOptions && selectedOptions.map((option, index) => {
|
|
136
98
|
const TypeOfPill = typeOfPill();
|
|
137
99
|
if (index < overflowQuantity) {
|
|
138
100
|
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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2, { useCallback, useState, useEffect, useLayoutEffect } from "react";
|
|
35
4
|
import PropTypes from "prop-types";
|
|
@@ -39,28 +8,18 @@ import { InputPill } from "../InputPill";
|
|
|
39
8
|
import { Pill } from "../Pill";
|
|
40
9
|
import { RemovablePill } from "../RemovablePill";
|
|
41
10
|
import { hasOptionChanged } from "./utils";
|
|
42
|
-
function LabeledDropdownSinglePill(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"label",
|
|
55
|
-
"labelIsValue",
|
|
56
|
-
"options",
|
|
57
|
-
"value",
|
|
58
|
-
"onSelect",
|
|
59
|
-
"onChange",
|
|
60
|
-
"maxWidth",
|
|
61
|
-
"minWidth",
|
|
62
|
-
"fixed"
|
|
63
|
-
]);
|
|
11
|
+
function LabeledDropdownSinglePill({
|
|
12
|
+
label,
|
|
13
|
+
labelIsValue = false,
|
|
14
|
+
options,
|
|
15
|
+
value,
|
|
16
|
+
onSelect = () => null,
|
|
17
|
+
onChange,
|
|
18
|
+
maxWidth,
|
|
19
|
+
minWidth,
|
|
20
|
+
fixed = false,
|
|
21
|
+
...menuProps
|
|
22
|
+
}) {
|
|
64
23
|
const [optionValue, setOptionValue] = useState(value);
|
|
65
24
|
const prevOptions = usePrevious(options);
|
|
66
25
|
const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));
|
|
@@ -95,11 +54,11 @@ function LabeledDropdownSinglePill(_a) {
|
|
|
95
54
|
const { onChangeInput } = optionValue;
|
|
96
55
|
setOptionValue(null);
|
|
97
56
|
onChangeInput && onChangeInput("");
|
|
98
|
-
const newOption =
|
|
57
|
+
const newOption = { ...removedOption, input: "" };
|
|
99
58
|
onRemove && onRemove(newOption, removedOption);
|
|
100
59
|
};
|
|
101
60
|
const renderPill = (option, fixed2) => {
|
|
102
|
-
const
|
|
61
|
+
const { input, onChangeInput, ...otherProps } = option;
|
|
103
62
|
let SelectedPill;
|
|
104
63
|
if (isString(input)) {
|
|
105
64
|
SelectedPill = InputPill;
|
|
@@ -108,13 +67,14 @@ function LabeledDropdownSinglePill(_a) {
|
|
|
108
67
|
} else {
|
|
109
68
|
SelectedPill = RemovablePill;
|
|
110
69
|
}
|
|
111
|
-
return /* @__PURE__ */ React2.createElement(SelectedPill,
|
|
70
|
+
return /* @__PURE__ */ React2.createElement(SelectedPill, {
|
|
112
71
|
key: option.id,
|
|
113
72
|
label: option.label,
|
|
114
73
|
onChange: onChangeInputValue,
|
|
115
74
|
onRemove: (e) => removeOption(option, e),
|
|
116
|
-
value: input
|
|
117
|
-
|
|
75
|
+
value: input,
|
|
76
|
+
...otherProps
|
|
77
|
+
});
|
|
118
78
|
};
|
|
119
79
|
const renderSelection = () => {
|
|
120
80
|
if (!labelIsValue) {
|
|
@@ -125,25 +85,27 @@ function LabeledDropdownSinglePill(_a) {
|
|
|
125
85
|
});
|
|
126
86
|
}
|
|
127
87
|
};
|
|
128
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill,
|
|
88
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, {
|
|
89
|
+
...menuProps,
|
|
129
90
|
label: !labelIsValue ? label : optionValue?.label,
|
|
130
91
|
maxWidth,
|
|
131
92
|
minWidth,
|
|
132
93
|
onSelectMenuItem: selectOption,
|
|
133
94
|
options: [
|
|
134
|
-
|
|
95
|
+
{
|
|
96
|
+
...menuProps,
|
|
135
97
|
type: "SelectionGroup",
|
|
136
98
|
id: "multi-selection-views",
|
|
137
99
|
multi: false,
|
|
138
100
|
items: options,
|
|
139
101
|
closeOnClick: true
|
|
140
|
-
}
|
|
102
|
+
}
|
|
141
103
|
],
|
|
142
104
|
selection: {
|
|
143
105
|
"multi-selection-views": optionValue ? [optionValue?.id] : ""
|
|
144
106
|
},
|
|
145
107
|
variant: "title"
|
|
146
|
-
})
|
|
108
|
+
}), renderSelection());
|
|
147
109
|
}
|
|
148
110
|
LabeledDropdownSinglePill.propTypes = {
|
|
149
111
|
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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2 from "react";
|
|
35
4
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
@@ -41,25 +10,20 @@ const PillWrapper = aggregatedClasses("div")(pillBlockName, null, ({ size, varia
|
|
|
41
10
|
}));
|
|
42
11
|
const PillLabel = aggregatedClasses("span")(pillBlockName, "label");
|
|
43
12
|
const PillAddon = aggregatedClasses("div")(pillBlockName, "addon");
|
|
44
|
-
function Pill(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"size"
|
|
59
|
-
]);
|
|
60
|
-
return /* @__PURE__ */ React2.createElement(PillWrapper, __spreadValues(__spreadProps(__spreadValues({}, containerProps), {
|
|
61
|
-
classProps: { variant, size }
|
|
62
|
-
}), otherProps), leftAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, leftAddon), /* @__PURE__ */ React2.createElement(PillLabel, null, label), rightAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, rightAddon));
|
|
13
|
+
function Pill({
|
|
14
|
+
containerProps = {},
|
|
15
|
+
label = "",
|
|
16
|
+
leftAddon,
|
|
17
|
+
rightAddon,
|
|
18
|
+
variant = "value",
|
|
19
|
+
size = "m",
|
|
20
|
+
...otherProps
|
|
21
|
+
}) {
|
|
22
|
+
return /* @__PURE__ */ React2.createElement(PillWrapper, {
|
|
23
|
+
...containerProps,
|
|
24
|
+
classProps: { variant, size },
|
|
25
|
+
...otherProps
|
|
26
|
+
}, leftAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, leftAddon), /* @__PURE__ */ React2.createElement(PillLabel, null, label), rightAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, rightAddon));
|
|
63
27
|
}
|
|
64
28
|
const props = {
|
|
65
29
|
containerProps: PropTypes.object.description("props to inject to pill wrapper"),
|
|
@@ -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": "
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AACA;AAEA,MAAM,gBAAgB;AAEtB,MAAM,cAAc,kBAAkB,KAAK,EACzC,eACA,MACA,CAAC,EAAE,MAAM,cAAe;AAAA,EACtB,CAAC,UAAU,CAAC,CAAC;AAAA,EACb,CAAC,OAAO,CAAC,CAAC;AACZ,EACF;AACA,MAAM,YAAY,kBAAkB,MAAM,EAAE,eAAe,OAAO;AAClE,MAAM,YAAY,kBAAkB,KAAK,EAAE,eAAe,OAAO;AAEjE,cAAc;AAAA,EACZ,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,KACJ;AAAA,GACF;AACD,SACE,qCAAC;AAAA,IACE,GAAG;AAAA,IACJ,YAAY,EAAE,SAAS,KAAK;AAAA,IAC3B,GAAG;AAAA,KAEH,aAAa,qCAAC,iBAAW,SAAU,GACpC,qCAAC,iBAAW,KAAM,GACjB,cAAc,qCAAC,iBAAW,UAAW,CACxC;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAC/B,iCACF;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,20 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
6
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
-
var __spreadValues = (a, b) => {
|
|
8
|
-
for (var prop in b || (b = {}))
|
|
9
|
-
if (__hasOwnProp.call(b, prop))
|
|
10
|
-
__defNormalProp(a, prop, b[prop]);
|
|
11
|
-
if (__getOwnPropSymbols)
|
|
12
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
13
|
-
if (__propIsEnum.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
}
|
|
16
|
-
return a;
|
|
17
|
-
};
|
|
18
2
|
import * as React from "react";
|
|
19
3
|
import React2 from "react";
|
|
20
4
|
import { describe, PropTypes } from "@elliemae/ds-utilities";
|
|
@@ -30,7 +14,9 @@ const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup
|
|
|
30
14
|
onFocusNextGroup,
|
|
31
15
|
onFocusPreviousGroup,
|
|
32
16
|
orientation: "horizontal"
|
|
33
|
-
}, /* @__PURE__ */ React2.createElement(Container,
|
|
17
|
+
}, /* @__PURE__ */ React2.createElement(Container, {
|
|
18
|
+
...containerProps
|
|
19
|
+
}, children));
|
|
34
20
|
const props = {
|
|
35
21
|
containerProps: PropTypes.object.description("props injected to component wrapper"),
|
|
36
22
|
onFocusNextGroup: PropTypes.func.description("focus next group callback"),
|
|
@@ -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": "
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB;AAEpB,MAAM,YAAY,kBAAkB,KAAK,EAAE,kBAAkB;AAEpE,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,kBAAkB,sBAAsB,iBAAiB,eACjG,qCAAC;AAAA,EACC,aAAa;AAAA,IACX,KAAK;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAY;AAAA,GAEZ,qCAAC;AAAA,EAAW,GAAG;AAAA,GAAiB,QAAS,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,YAC5F,iBACF;AACF;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|