@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.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/Button.js +3 -1
- package/CHANGELOG.md +4 -1
- package/CHANGELOG.v5.mdx +35 -0
- package/Card.js +163 -162
- package/Chip.js +171 -225
- package/Clickable.js +79 -76
- package/ComboBox.js +1 -1
- package/Date.js +160 -184
- package/DualListbox.js +439 -504
- package/File.js +449 -324
- package/FormRows.js +143 -142
- package/JSONTree.js +496 -521
- package/Layer.js +162 -97
- package/Link.js +20 -13
- package/MIGRATION.v5.mdx +47 -0
- package/Markdown.js +1 -1
- package/Message.js +119 -141
- package/MessageBar.js +109 -168
- package/Multiselect.js +595 -602
- package/Popover.js +194 -190
- package/Progress.js +68 -54
- package/RadioBar.js +4 -1
- package/RadioList.js +67 -65
- package/Resize.js +377 -265
- package/ResultsMenu.js +573 -661
- package/ScrollContainerContext.js +13 -9
- package/Search.js +1 -1
- package/Select.js +206 -199
- package/Slider.js +455 -329
- package/StepBar.js +2 -2
- package/Switch.js +88 -87
- package/TabBar.js +322 -317
- package/TabLayout.js +34 -34
- package/Table.js +548 -525
- package/Text.js +20 -19
- package/TextArea.js +278 -152
- package/Tooltip.js +173 -177
- package/Tree.js +2 -2
- package/Typography.js +30 -28
- package/WaitSpinner.js +6 -11
- package/cypress/support/commands.ts +14 -4
- package/cypress/support/index.d.ts +1 -1
- package/package.json +5 -5
- package/stubs-splunkui.d.ts +0 -4
- package/types/src/Card/Card.d.ts +3 -1
- package/types/src/Card/Header.d.ts +2 -0
- package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
- package/types/src/Clickable/Clickable.d.ts +11 -3
- package/types/src/Link/Link.d.ts +4 -0
- package/types/src/Message/Message.d.ts +1 -1
- package/types/src/MessageBar/MessageBar.d.ts +1 -1
- package/types/src/Multiselect/Multiselect.d.ts +1 -8
- package/types/src/Multiselect/Normal.d.ts +1 -7
- package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
- package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
- package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
- package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
- package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
- package/types/src/Select/SelectBase.d.ts +2 -2
- package/types/src/TabBar/TabBar.d.ts +8 -5
- package/types/src/TabBar/TabBarContext.d.ts +1 -1
- package/types/src/TabLayout/TabLayout.d.ts +8 -5
- package/types/src/Typography/Typography.d.ts +27 -22
- package/types/src/Date/Icon.d.ts +0 -3
- package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
- package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
- /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
- /package/types/src/TabBar/docs/examples/{VerticalIconsLeft.d.ts → VerticalIcons.d.ts} +0 -0
package/Chip.js
CHANGED
|
@@ -9,26 +9,26 @@
|
|
|
9
9
|
/******/ (() => {
|
|
10
10
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
11
11
|
/******/ e.n = r => {
|
|
12
|
-
/******/ var
|
|
12
|
+
/******/ var n = r && r.__esModule ?
|
|
13
13
|
/******/ () => r["default"]
|
|
14
14
|
/******/ : () => r
|
|
15
15
|
/******/;
|
|
16
|
-
e.d(
|
|
17
|
-
a
|
|
16
|
+
e.d(n, {
|
|
17
|
+
a: n
|
|
18
18
|
});
|
|
19
|
-
/******/ return
|
|
19
|
+
/******/ return n;
|
|
20
20
|
/******/ };
|
|
21
21
|
/******/ })();
|
|
22
22
|
/******/
|
|
23
23
|
/******/ /* webpack/runtime/define property getters */
|
|
24
24
|
/******/ (() => {
|
|
25
25
|
/******/ // define getter functions for harmony exports
|
|
26
|
-
/******/ e.d = (r,
|
|
27
|
-
/******/ for (var
|
|
28
|
-
/******/ if (e.o(
|
|
29
|
-
/******/ Object.defineProperty(r,
|
|
26
|
+
/******/ e.d = (r, n) => {
|
|
27
|
+
/******/ for (var o in n) {
|
|
28
|
+
/******/ if (e.o(n, o) && !e.o(r, o)) {
|
|
29
|
+
/******/ Object.defineProperty(r, o, {
|
|
30
30
|
enumerable: true,
|
|
31
|
-
get:
|
|
31
|
+
get: n[o]
|
|
32
32
|
});
|
|
33
33
|
/******/ }
|
|
34
34
|
/******/ }
|
|
@@ -64,314 +64,260 @@
|
|
|
64
64
|
default: () => /* reexport */ D
|
|
65
65
|
});
|
|
66
66
|
// CONCATENATED MODULE: external "react"
|
|
67
|
-
const
|
|
68
|
-
var
|
|
67
|
+
const n = require("react");
|
|
68
|
+
var o = e.n(n);
|
|
69
69
|
// CONCATENATED MODULE: external "lodash/omit"
|
|
70
|
-
const
|
|
71
|
-
var
|
|
70
|
+
const a = require("lodash/omit");
|
|
71
|
+
var t = e.n(a);
|
|
72
72
|
// CONCATENATED MODULE: external "prop-types"
|
|
73
|
-
const
|
|
74
|
-
var
|
|
73
|
+
const l = require("prop-types");
|
|
74
|
+
var i = e.n(l);
|
|
75
75
|
// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
76
76
|
const s = require("@splunk/react-ui/ScreenReaderContent");
|
|
77
77
|
var c = e.n(s);
|
|
78
|
-
// CONCATENATED MODULE: external "@splunk/react-icons/Cross"
|
|
79
|
-
const u = require("@splunk/react-icons/Cross");
|
|
80
|
-
var p = e.n(u);
|
|
81
78
|
// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
|
|
82
|
-
const
|
|
79
|
+
const u = require("@splunk/ui-utils/i18n");
|
|
83
80
|
// CONCATENATED MODULE: external "@splunk/ui-utils/color"
|
|
84
|
-
const
|
|
81
|
+
const d = require("@splunk/ui-utils/color");
|
|
85
82
|
// CONCATENATED MODULE: external "@splunk/ui-utils/format"
|
|
86
|
-
const
|
|
83
|
+
const v = require("@splunk/ui-utils/format");
|
|
87
84
|
// CONCATENATED MODULE: external "styled-components"
|
|
88
|
-
const
|
|
89
|
-
var
|
|
85
|
+
const p = require("styled-components");
|
|
86
|
+
var f = e.n(p);
|
|
90
87
|
// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
|
|
91
|
-
const
|
|
92
|
-
var
|
|
88
|
+
const b = require("@splunk/react-ui/Clickable");
|
|
89
|
+
var m = e.n(b);
|
|
90
|
+
// CONCATENATED MODULE: external "@splunk/react-icons/Cross"
|
|
91
|
+
const y = require("@splunk/react-icons/Cross");
|
|
92
|
+
var g = e.n(y);
|
|
93
93
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
94
|
-
const
|
|
94
|
+
const C = require("@splunk/themes");
|
|
95
95
|
// CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
|
|
96
|
-
var
|
|
97
|
-
|
|
98
|
-
default:
|
|
99
|
-
outline:
|
|
100
|
-
info:
|
|
101
|
-
success:
|
|
102
|
-
warning:
|
|
103
|
-
error:
|
|
96
|
+
var h = (0, p.css)([ "", ";", ";align-content:center;align-items:center;height:", ";max-width:100%;padding:", " ", ";column-gap:", ";background-color:", ";color:", ";border-radius:", ";", ";", ";" ], C.mixins.reset("grid"), C.mixins.typography("body"), C.variables.inputHeight, C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall, (0,
|
|
97
|
+
C.pickVariant)("$appearance", {
|
|
98
|
+
default: C.variables.neutral200,
|
|
99
|
+
outline: C.variables.transparent,
|
|
100
|
+
info: C.variables.severityColorInfo,
|
|
101
|
+
success: C.variables.severityColorNormal,
|
|
102
|
+
warning: C.variables.severityColorNotice,
|
|
103
|
+
error: C.variables.severityColorAlert,
|
|
104
104
|
custom: function e(r) {
|
|
105
|
-
var
|
|
106
|
-
return
|
|
105
|
+
var n = r.$backgroundColor;
|
|
106
|
+
return n;
|
|
107
107
|
}
|
|
108
108
|
}), (function(e) {
|
|
109
|
-
var r = e.$appearance,
|
|
110
|
-
return
|
|
111
|
-
}), (function(e) {
|
|
109
|
+
var r = e.$appearance, n = e.$foregroundColor;
|
|
110
|
+
return n || (r === "default" || r === "outline" ? C.variables.contentColorActive : C.variables.contentColorInverted);
|
|
111
|
+
}), C.variables.borderRadius, (function(e) {
|
|
112
112
|
var r = e.$appearance;
|
|
113
|
-
return r === "outline" && (0,
|
|
113
|
+
return r === "outline" && (0, p.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
|
|
114
114
|
}), (function(e) {
|
|
115
|
-
var r = e.$appearance,
|
|
116
|
-
return
|
|
117
|
-
|
|
118
|
-
}), (0, h.pick)({
|
|
119
|
-
enterprise: (0, b.css)([ "line-height:", ";" ], h.variables.lineHeight),
|
|
120
|
-
prisma: (0, b.css)([ "line-height:16px;" ])
|
|
121
|
-
}), (0, h.pick)({
|
|
122
|
-
enterprise: {
|
|
123
|
-
comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;" ], h.variables.inputHeight),
|
|
124
|
-
compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], h.variables.inputHeight)
|
|
125
|
-
},
|
|
126
|
-
prisma: {
|
|
127
|
-
comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;font-size:", ";" ], h.variables.inputHeight, h.variables.fontSizeSmall),
|
|
128
|
-
compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 7px;font-size:", ";" ], h.variables.inputHeight, h.variables.fontSizeSmall)
|
|
129
|
-
}
|
|
115
|
+
var r = e.$appearance, n = e.$disabled;
|
|
116
|
+
return n && (0, p.css)([ "background-color:", ";color:", ";", "" ], C.variables.neutral100, C.variables.contentColorDisabled, r === "outline" && (0,
|
|
117
|
+
p.css)([ "background-color:", ";border-color:", ";" ], C.variables.transparent, C.variables.borderColorWeak));
|
|
130
118
|
}));
|
|
131
|
-
var
|
|
132
|
-
displayName: "
|
|
119
|
+
var S = f().div.withConfig({
|
|
120
|
+
displayName: "ChipStyles__StyledNonInteractive",
|
|
133
121
|
componentId: "sc-1sd3tsh-0"
|
|
134
|
-
})([ "", "" ], C)
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
componentId: "sc-1sd3tsh-1"
|
|
138
|
-
})([ "align-items:center;" ]);
|
|
139
|
-
var k = m().div.withConfig({
|
|
140
|
-
displayName: "ChipStyles__StyledInner",
|
|
141
|
-
componentId: "sc-1sd3tsh-2"
|
|
142
|
-
})([ "", ";" ], (0, h.pick)({
|
|
143
|
-
enterprise: (0, b.css)([ "display:flex;max-width:100%;" ]),
|
|
144
|
-
prisma: (0, b.css)([ "display:grid;max-width:100%;height:16px;column-gap:", ";", ";" ], (0,
|
|
145
|
-
h.pick)({
|
|
146
|
-
prisma: {
|
|
147
|
-
compact: h.variables.spacingXSmall,
|
|
148
|
-
comfortable: h.variables.spacingSmall
|
|
149
|
-
}
|
|
150
|
-
}), (function(e) {
|
|
151
|
-
var r = e.$icon, a = e.$removable;
|
|
152
|
-
var n = (0, b.css)([ "grid-template-columns:1fr;" ]);
|
|
153
|
-
if (r && a) {
|
|
154
|
-
n = (0, b.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
|
|
155
|
-
} else if (r) {
|
|
156
|
-
n = (0, b.css)([ "grid-template-columns:0fr 1fr;" ]);
|
|
157
|
-
} else if (a) {
|
|
158
|
-
n = (0, b.css)([ "grid-template-columns:1fr 0fr;" ]);
|
|
159
|
-
}
|
|
160
|
-
return n;
|
|
161
|
-
}))
|
|
122
|
+
})([ "", " ", ";" ], h, (0, C.pickVariant)("$icon", {
|
|
123
|
+
true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto;" ]),
|
|
124
|
+
false: (0, p.css)([ "grid-template-columns:[label] auto;" ])
|
|
162
125
|
}));
|
|
163
|
-
var $ =
|
|
126
|
+
var $ = f().div.withConfig({
|
|
164
127
|
displayName: "ChipStyles__StyledIcon",
|
|
165
|
-
componentId: "sc-1sd3tsh-
|
|
166
|
-
})([ "
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}), (0, h.pick)({
|
|
173
|
-
enterprise: "3px"
|
|
174
|
-
}));
|
|
175
|
-
var O = m().div.withConfig({
|
|
128
|
+
componentId: "sc-1sd3tsh-1"
|
|
129
|
+
})([ "display:grid;grid-column:icon;" ]);
|
|
130
|
+
var k = f()(g()).withConfig({
|
|
131
|
+
displayName: "ChipStyles__StyledRemoveIcon",
|
|
132
|
+
componentId: "sc-1sd3tsh-2"
|
|
133
|
+
})([ "grid-column:remove;" ]);
|
|
134
|
+
var O = f().div.withConfig({
|
|
176
135
|
displayName: "ChipStyles__StyledLabel",
|
|
177
|
-
componentId: "sc-1sd3tsh-
|
|
178
|
-
})([ "", "
|
|
179
|
-
|
|
180
|
-
}));
|
|
181
|
-
var w = m().span.withConfig({
|
|
182
|
-
displayName: "ChipStyles__StyledRemove",
|
|
183
|
-
componentId: "sc-1sd3tsh-5"
|
|
184
|
-
})([ "", ";" ], (0, h.pick)({
|
|
185
|
-
enterprise: (0, b.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";" ], h.variables.spacingXSmall, (0,
|
|
186
|
-
h.pick)({
|
|
187
|
-
compact: "9px",
|
|
188
|
-
comfortable: "10.5px"
|
|
189
|
-
})),
|
|
190
|
-
prisma: (0, b.css)([ "display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;" ])
|
|
191
|
-
}));
|
|
192
|
-
var _ = m()(y()).withConfig({
|
|
136
|
+
componentId: "sc-1sd3tsh-3"
|
|
137
|
+
})([ "", " grid-column:label;" ], C.mixins.ellipsis());
|
|
138
|
+
var R = f()(m()).withConfig({
|
|
193
139
|
displayName: "ChipStyles__StyledClickable",
|
|
194
|
-
componentId: "sc-1sd3tsh-
|
|
195
|
-
})([ "", "
|
|
140
|
+
componentId: "sc-1sd3tsh-4"
|
|
141
|
+
})([ "", " cursor:pointer;", ";", "" ], h, (0, C.pickVariant)("$icon", {
|
|
142
|
+
true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto [remove] min-content;" ]),
|
|
143
|
+
false: (0, p.css)([ "grid-template-columns:[label] auto [remove] min-content;" ])
|
|
144
|
+
}), (function(e) {
|
|
196
145
|
var r = e.$disabled;
|
|
197
|
-
return !r && (0,
|
|
198
|
-
|
|
199
|
-
outline:
|
|
200
|
-
default:
|
|
201
|
-
info:
|
|
202
|
-
success:
|
|
203
|
-
warning:
|
|
204
|
-
error:
|
|
146
|
+
return !r && (0, p.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0,
|
|
147
|
+
C.pickVariant)("$appearance", {
|
|
148
|
+
outline: C.variables.neutral100,
|
|
149
|
+
default: C.variables.neutral300,
|
|
150
|
+
info: C.mixins.overlayColors(C.variables.severityColorInfo, C.variables.interactiveColorOverlayHover),
|
|
151
|
+
success: C.mixins.overlayColors(C.variables.severityColorNormal, C.variables.interactiveColorOverlayHover),
|
|
152
|
+
warning: C.mixins.overlayColors(C.variables.severityColorNotice, C.variables.interactiveColorOverlayHover),
|
|
153
|
+
error: C.mixins.overlayColors(C.variables.severityColorAlert, C.variables.interactiveColorOverlayHover),
|
|
205
154
|
custom: function e(r) {
|
|
206
|
-
var
|
|
207
|
-
return
|
|
155
|
+
var n = r.$backgroundColor;
|
|
156
|
+
return n && C.mixins.overlayColors(n, C.variables.interactiveColorOverlayHover);
|
|
208
157
|
}
|
|
209
158
|
}));
|
|
210
159
|
}));
|
|
211
160
|
// CONCATENATED MODULE: ./src/Chip/Chip.tsx
|
|
212
|
-
function
|
|
213
|
-
return
|
|
161
|
+
function w() {
|
|
162
|
+
return w = Object.assign ? Object.assign.bind() : function(e) {
|
|
214
163
|
for (var r = 1; r < arguments.length; r++) {
|
|
215
|
-
var
|
|
216
|
-
for (var
|
|
217
|
-
({}).hasOwnProperty.call(
|
|
164
|
+
var n = arguments[r];
|
|
165
|
+
for (var o in n) {
|
|
166
|
+
({}).hasOwnProperty.call(n, o) && (e[o] = n[o]);
|
|
218
167
|
}
|
|
219
168
|
}
|
|
220
169
|
return e;
|
|
221
|
-
},
|
|
170
|
+
}, w.apply(null, arguments);
|
|
222
171
|
}
|
|
223
|
-
function
|
|
224
|
-
return
|
|
172
|
+
function q(e, r) {
|
|
173
|
+
return E(e) || x(e, r) || j(e, r) || _();
|
|
225
174
|
}
|
|
226
|
-
function
|
|
175
|
+
function _() {
|
|
227
176
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
228
177
|
}
|
|
229
|
-
function
|
|
178
|
+
function j(e, r) {
|
|
230
179
|
if (e) {
|
|
231
|
-
if ("string" == typeof e) return
|
|
232
|
-
var
|
|
233
|
-
return "Object" ===
|
|
180
|
+
if ("string" == typeof e) return I(e, r);
|
|
181
|
+
var n = {}.toString.call(e).slice(8, -1);
|
|
182
|
+
return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? I(e, r) : void 0;
|
|
234
183
|
}
|
|
235
184
|
}
|
|
236
|
-
function
|
|
185
|
+
function I(e, r) {
|
|
237
186
|
(null == r || r > e.length) && (r = e.length);
|
|
238
|
-
for (var
|
|
239
|
-
n
|
|
187
|
+
for (var n = 0, o = Array(r); n < r; n++) {
|
|
188
|
+
o[n] = e[n];
|
|
240
189
|
}
|
|
241
|
-
return
|
|
190
|
+
return o;
|
|
242
191
|
}
|
|
243
|
-
function
|
|
244
|
-
var
|
|
245
|
-
if (null !=
|
|
246
|
-
var
|
|
192
|
+
function x(e, r) {
|
|
193
|
+
var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
|
|
194
|
+
if (null != n) {
|
|
195
|
+
var o, a, t, l, i = [], s = !0, c = !1;
|
|
247
196
|
try {
|
|
248
|
-
if (
|
|
249
|
-
if (Object(
|
|
197
|
+
if (t = (n = n.call(e)).next, 0 === r) {
|
|
198
|
+
if (Object(n) !== n) return;
|
|
250
199
|
s = !1;
|
|
251
|
-
} else for (;!(s = (
|
|
200
|
+
} else for (;!(s = (o = t.call(n)).done) && (i.push(o.value), i.length !== r); s = !0) {
|
|
252
201
|
}
|
|
253
202
|
} catch (e) {
|
|
254
|
-
c = !0,
|
|
203
|
+
c = !0, a = e;
|
|
255
204
|
} finally {
|
|
256
205
|
try {
|
|
257
|
-
if (!s && null !=
|
|
206
|
+
if (!s && null != n["return"] && (l = n["return"](), Object(l) !== l)) return;
|
|
258
207
|
} finally {
|
|
259
|
-
if (c) throw
|
|
208
|
+
if (c) throw a;
|
|
260
209
|
}
|
|
261
210
|
}
|
|
262
|
-
return
|
|
211
|
+
return i;
|
|
263
212
|
}
|
|
264
213
|
}
|
|
265
|
-
function
|
|
214
|
+
function E(e) {
|
|
266
215
|
if (Array.isArray(e)) return e;
|
|
267
216
|
}
|
|
268
|
-
function
|
|
217
|
+
function N(e, r) {
|
|
269
218
|
if (null == e) return {};
|
|
270
|
-
var
|
|
219
|
+
var n, o, a = A(e, r);
|
|
271
220
|
if (Object.getOwnPropertySymbols) {
|
|
272
|
-
var
|
|
273
|
-
for (
|
|
274
|
-
|
|
221
|
+
var t = Object.getOwnPropertySymbols(e);
|
|
222
|
+
for (o = 0; o < t.length; o++) {
|
|
223
|
+
n = t[o], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
|
|
275
224
|
}
|
|
276
225
|
}
|
|
277
|
-
return
|
|
226
|
+
return a;
|
|
278
227
|
}
|
|
279
|
-
function
|
|
228
|
+
function A(e, r) {
|
|
280
229
|
if (null == e) return {};
|
|
281
|
-
var
|
|
282
|
-
for (var
|
|
283
|
-
if ({}.hasOwnProperty.call(e,
|
|
284
|
-
if (r.includes(
|
|
285
|
-
|
|
230
|
+
var n = {};
|
|
231
|
+
for (var o in e) {
|
|
232
|
+
if ({}.hasOwnProperty.call(e, o)) {
|
|
233
|
+
if (r.includes(o)) continue;
|
|
234
|
+
n[o] = e[o];
|
|
286
235
|
}
|
|
287
236
|
}
|
|
288
|
-
return
|
|
237
|
+
return n;
|
|
289
238
|
}
|
|
290
239
|
/** @public */ var P = {
|
|
291
|
-
appearance:
|
|
292
|
-
backgroundColor:
|
|
293
|
-
children:
|
|
294
|
-
disabled:
|
|
295
|
-
elementRef:
|
|
296
|
-
foregroundColor:
|
|
297
|
-
icon:
|
|
298
|
-
onRequestRemove:
|
|
240
|
+
appearance: i().oneOf([ "info", "success", "warning", "error", "outline" ]),
|
|
241
|
+
backgroundColor: i().string,
|
|
242
|
+
children: i().node.isRequired,
|
|
243
|
+
disabled: i().bool,
|
|
244
|
+
elementRef: i().oneOfType([ i().func, i().object ]),
|
|
245
|
+
foregroundColor: i().string,
|
|
246
|
+
icon: i().node,
|
|
247
|
+
onRequestRemove: i().func,
|
|
299
248
|
/** Includes this value in `onRequestRemove` callbacks. */
|
|
300
|
-
value:
|
|
249
|
+
value: i().any
|
|
301
250
|
};
|
|
302
|
-
function
|
|
251
|
+
function H(e) {
|
|
303
252
|
return !!e.onRequestRemove;
|
|
304
253
|
}
|
|
305
|
-
function
|
|
306
|
-
var r = e.appearance,
|
|
254
|
+
function T(e) {
|
|
255
|
+
var r = e.appearance, n = e.backgroundColor, o = e.disabled, a = e.foregroundColor, t = e.icon, l = N(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
|
|
307
256
|
// Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
|
|
308
|
-
var
|
|
309
|
-
var s =
|
|
257
|
+
var i = a && (0, d.isCSSColor)(a) ? a : undefined;
|
|
258
|
+
var s = n && (0, d.isCSSColor)(n) ? n : undefined;
|
|
310
259
|
var c = {
|
|
311
260
|
"data-test": "chip",
|
|
312
261
|
$appearance: r || (s ? "custom" : "default"),
|
|
313
262
|
$backgroundColor: s,
|
|
314
|
-
$foregroundColor:
|
|
315
|
-
disabled:
|
|
316
|
-
icon:
|
|
263
|
+
$foregroundColor: i,
|
|
264
|
+
disabled: o,
|
|
265
|
+
icon: t
|
|
317
266
|
};
|
|
318
|
-
return [ c,
|
|
267
|
+
return [ c, l ];
|
|
319
268
|
}
|
|
320
|
-
function
|
|
321
|
-
var r =
|
|
322
|
-
var s =
|
|
323
|
-
var y =
|
|
324
|
-
var
|
|
325
|
-
var
|
|
269
|
+
function M(e) {
|
|
270
|
+
var r = T(e), a = q(r, 2), l = a[0], i = a[1];
|
|
271
|
+
var s = l.$appearance, d = l.$foregroundColor, p = l.disabled, f = p === void 0 ? false : p, b = l.icon, m = N(l, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
|
|
272
|
+
var y = i.children, g = i.elementRef, C = i.onRequestRemove, h = i.value, S = N(i, [ "children", "elementRef", "onRequestRemove", "value" ]);
|
|
273
|
+
var _ = typeof y === "string";
|
|
274
|
+
var j = _ ? (0, v.sprintf)((0, u._)("Remove %(children)s"), {
|
|
326
275
|
children: y
|
|
327
|
-
}) : (0,
|
|
328
|
-
var
|
|
276
|
+
}) : (0, u._)("Remove");
|
|
277
|
+
var I = (0, n.useCallback)((function(e) {
|
|
329
278
|
C(e, {
|
|
330
|
-
value:
|
|
279
|
+
value: h
|
|
331
280
|
});
|
|
332
|
-
}), [ C,
|
|
281
|
+
}), [ C, h ]);
|
|
333
282
|
|
|
334
|
-
return
|
|
283
|
+
return o().createElement(R, w({
|
|
335
284
|
$appearance: s,
|
|
336
|
-
$
|
|
337
|
-
$
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
$removable: true
|
|
345
|
-
}, n().createElement(c(), null, I), m && n().createElement($, null, m), n().createElement(O, {
|
|
285
|
+
$icon: !!b,
|
|
286
|
+
$disabled: f,
|
|
287
|
+
$foregroundColor: d,
|
|
288
|
+
"data-test-value": h,
|
|
289
|
+
disabled: f ? "disabled" : undefined,
|
|
290
|
+
elementRef: g,
|
|
291
|
+
onClick: I
|
|
292
|
+
}, m, t()(S, Object.keys(P))), o().createElement(c(), null, j), b && o().createElement($, null, b), o().createElement(O, {
|
|
346
293
|
"data-test": "label",
|
|
347
|
-
"aria-hidden":
|
|
348
|
-
}, y),
|
|
294
|
+
"aria-hidden": _ ? true : undefined
|
|
295
|
+
}, y), o().createElement(k, {
|
|
349
296
|
"data-test": "cross"
|
|
350
|
-
}))
|
|
297
|
+
}));
|
|
351
298
|
}
|
|
352
|
-
function
|
|
353
|
-
var r =
|
|
354
|
-
var
|
|
355
|
-
var
|
|
299
|
+
function V(e) {
|
|
300
|
+
var r = T(e), n = q(r, 2), a = n[0], l = n[1];
|
|
301
|
+
var i = a.$appearance, s = a.$foregroundColor, c = a.disabled, u = a.icon, d = N(a, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
|
|
302
|
+
var v = l.children, p = l.elementRef, f = N(l, [ "children", "elementRef" ]);
|
|
356
303
|
|
|
357
|
-
return
|
|
358
|
-
$appearance:
|
|
304
|
+
return o().createElement(S, w({
|
|
305
|
+
$appearance: i,
|
|
306
|
+
$icon: !!u,
|
|
359
307
|
$disabled: c !== null && c !== void 0 ? c : false,
|
|
360
308
|
$foregroundColor: s,
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
$removable: false
|
|
365
|
-
}, u && n().createElement($, null, u), n().createElement(O, {
|
|
309
|
+
"data-test-disabled": c ? "disabled" : undefined,
|
|
310
|
+
ref: p
|
|
311
|
+
}, d, t()(f, Object.keys(P))), u && o().createElement($, null, u), o().createElement(O, {
|
|
366
312
|
"data-test": "label"
|
|
367
|
-
},
|
|
313
|
+
}, v));
|
|
368
314
|
}
|
|
369
|
-
function
|
|
315
|
+
function X(e) {
|
|
370
316
|
// @docs-props-type ChipPropsBase
|
|
371
|
-
return
|
|
317
|
+
return H(e) ? o().createElement(M, e) : o().createElement(V, e);
|
|
372
318
|
}
|
|
373
|
-
|
|
374
|
-
/* harmony default export */ const D =
|
|
319
|
+
X.propTypes = P;
|
|
320
|
+
/* harmony default export */ const D = X;
|
|
375
321
|
// ChipInteractiveProps and ChipNonInteractiveProps are exported for Storybook
|
|
376
322
|
// CONCATENATED MODULE: ./src/Chip/index.ts
|
|
377
323
|
module.exports = r;
|