@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.
Files changed (74) hide show
  1. package/Button.js +3 -1
  2. package/CHANGELOG.md +4 -1
  3. package/CHANGELOG.v5.mdx +35 -0
  4. package/Card.js +163 -162
  5. package/Chip.js +171 -225
  6. package/Clickable.js +79 -76
  7. package/ComboBox.js +1 -1
  8. package/Date.js +160 -184
  9. package/DualListbox.js +439 -504
  10. package/File.js +449 -324
  11. package/FormRows.js +143 -142
  12. package/JSONTree.js +496 -521
  13. package/Layer.js +162 -97
  14. package/Link.js +20 -13
  15. package/MIGRATION.v5.mdx +47 -0
  16. package/Markdown.js +1 -1
  17. package/Message.js +119 -141
  18. package/MessageBar.js +109 -168
  19. package/Multiselect.js +595 -602
  20. package/Popover.js +194 -190
  21. package/Progress.js +68 -54
  22. package/RadioBar.js +4 -1
  23. package/RadioList.js +67 -65
  24. package/Resize.js +377 -265
  25. package/ResultsMenu.js +573 -661
  26. package/ScrollContainerContext.js +13 -9
  27. package/Search.js +1 -1
  28. package/Select.js +206 -199
  29. package/Slider.js +455 -329
  30. package/StepBar.js +2 -2
  31. package/Switch.js +88 -87
  32. package/TabBar.js +322 -317
  33. package/TabLayout.js +34 -34
  34. package/Table.js +548 -525
  35. package/Text.js +20 -19
  36. package/TextArea.js +278 -152
  37. package/Tooltip.js +173 -177
  38. package/Tree.js +2 -2
  39. package/Typography.js +30 -28
  40. package/WaitSpinner.js +6 -11
  41. package/cypress/support/commands.ts +14 -4
  42. package/cypress/support/index.d.ts +1 -1
  43. package/package.json +5 -5
  44. package/stubs-splunkui.d.ts +0 -4
  45. package/types/src/Card/Card.d.ts +3 -1
  46. package/types/src/Card/Header.d.ts +2 -0
  47. package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
  48. package/types/src/Clickable/Clickable.d.ts +11 -3
  49. package/types/src/Link/Link.d.ts +4 -0
  50. package/types/src/Message/Message.d.ts +1 -1
  51. package/types/src/MessageBar/MessageBar.d.ts +1 -1
  52. package/types/src/Multiselect/Multiselect.d.ts +1 -8
  53. package/types/src/Multiselect/Normal.d.ts +1 -7
  54. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
  55. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
  56. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
  57. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
  58. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
  59. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
  60. package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
  61. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
  62. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
  63. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
  64. package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
  65. package/types/src/Select/SelectBase.d.ts +2 -2
  66. package/types/src/TabBar/TabBar.d.ts +8 -5
  67. package/types/src/TabBar/TabBarContext.d.ts +1 -1
  68. package/types/src/TabLayout/TabLayout.d.ts +8 -5
  69. package/types/src/Typography/Typography.d.ts +27 -22
  70. package/types/src/Date/Icon.d.ts +0 -3
  71. package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
  72. package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
  73. /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
  74. /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 a = r && r.__esModule ?
12
+ /******/ var n = r && r.__esModule ?
13
13
  /******/ () => r["default"]
14
14
  /******/ : () => r
15
15
  /******/;
16
- e.d(a, {
17
- a
16
+ e.d(n, {
17
+ a: n
18
18
  });
19
- /******/ return a;
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, a) => {
27
- /******/ for (var n in a) {
28
- /******/ if (e.o(a, n) && !e.o(r, n)) {
29
- /******/ Object.defineProperty(r, n, {
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: a[n]
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 a = require("react");
68
- var n = e.n(a);
67
+ const n = require("react");
68
+ var o = e.n(n);
69
69
  // CONCATENATED MODULE: external "lodash/omit"
70
- const t = require("lodash/omit");
71
- var o = e.n(t);
70
+ const a = require("lodash/omit");
71
+ var t = e.n(a);
72
72
  // CONCATENATED MODULE: external "prop-types"
73
- const i = require("prop-types");
74
- var l = e.n(i);
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 d = require("@splunk/ui-utils/i18n");
79
+ const u = require("@splunk/ui-utils/i18n");
83
80
  // CONCATENATED MODULE: external "@splunk/ui-utils/color"
84
- const v = require("@splunk/ui-utils/color");
81
+ const d = require("@splunk/ui-utils/color");
85
82
  // CONCATENATED MODULE: external "@splunk/ui-utils/format"
86
- const f = require("@splunk/ui-utils/format");
83
+ const v = require("@splunk/ui-utils/format");
87
84
  // CONCATENATED MODULE: external "styled-components"
88
- const b = require("styled-components");
89
- var m = e.n(b);
85
+ const p = require("styled-components");
86
+ var f = e.n(p);
90
87
  // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
91
- const g = require("@splunk/react-ui/Clickable");
92
- var y = e.n(g);
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 h = require("@splunk/themes");
94
+ const C = require("@splunk/themes");
95
95
  // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
96
- var C = (0, b.css)([ "", ";background-color:", ";color:", ";border:1px solid transparent;border-radius:2px;", " ", " flex:0 1 auto;max-width:calc(100% - 3px);", " ", "" ], h.mixins.reset("inline-flex"), (0,
97
- h.pickVariant)("$appearance", {
98
- default: h.variables.neutral200,
99
- outline: h.variables.transparent,
100
- info: h.variables.severityColorInfo,
101
- success: h.variables.severityColorNormal,
102
- warning: h.variables.severityColorNotice,
103
- error: h.variables.severityColorAlert,
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 a = r.$backgroundColor;
106
- return a;
105
+ var n = r.$backgroundColor;
106
+ return n;
107
107
  }
108
108
  }), (function(e) {
109
- var r = e.$appearance, a = e.$foregroundColor;
110
- return a || (r === "default" || r === "outline" ? h.variables.contentColorActive : h.variables.contentColorInverted);
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, b.css)([ "border-color:", ";" ], h.variables.borderColorStrong);
113
+ return r === "outline" && (0, p.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
114
114
  }), (function(e) {
115
- var r = e.$appearance, a = e.$disabled;
116
- return a && (0, b.css)([ "background-color:", ";color:", ";", "" ], h.variables.neutral100, h.variables.contentColorDisabled, r === "outline" && (0,
117
- b.css)([ "background-color:", ";border-color:", ";" ], h.variables.transparent, h.variables.borderColorWeak));
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 x = m().div.withConfig({
132
- displayName: "ChipStyles__StyledBasic",
119
+ var S = f().div.withConfig({
120
+ displayName: "ChipStyles__StyledNonInteractive",
133
121
  componentId: "sc-1sd3tsh-0"
134
- })([ "", "" ], C);
135
- var S = m()(x).withConfig({
136
- displayName: "ChipStyles__Styled",
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 $ = m().div.withConfig({
126
+ var $ = f().div.withConfig({
164
127
  displayName: "ChipStyles__StyledIcon",
165
- componentId: "sc-1sd3tsh-3"
166
- })([ "", ";margin-right:", ";" ], (0, h.pick)({
167
- prisma: {
168
- compact: (0, b.css)([ "font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}" ]),
169
- comfortable: (0, b.css)([ "font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}" ])
170
- },
171
- enterprise: (0, b.css)([ "flex:0 0 auto;" ])
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-4"
178
- })([ "", " ", ";" ], h.mixins.ellipsis(), (0, h.pick)({
179
- enterprise: (0, b.css)([ "flex:0 1 auto;" ])
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-6"
195
- })([ "", " flex:0 1 auto;line-height:16px;cursor:pointer;", "" ], C, (function(e) {
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, b.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], h.variables.focusShadow, (0,
198
- h.pickVariant)("$appearance", {
199
- outline: h.variables.neutral100,
200
- default: h.variables.neutral300,
201
- info: h.mixins.overlayColors(h.variables.severityColorInfo, h.variables.interactiveColorOverlayHover),
202
- success: h.mixins.overlayColors(h.variables.severityColorNormal, h.variables.interactiveColorOverlayHover),
203
- warning: h.mixins.overlayColors(h.variables.severityColorNotice, h.variables.interactiveColorOverlayHover),
204
- error: h.mixins.overlayColors(h.variables.severityColorAlert, h.variables.interactiveColorOverlayHover),
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 a = r.$backgroundColor;
207
- return a && h.mixins.overlayColors(a, h.variables.interactiveColorOverlayHover);
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 R() {
213
- return R = Object.assign ? Object.assign.bind() : function(e) {
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 a = arguments[r];
216
- for (var n in a) {
217
- ({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
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
- }, R.apply(null, arguments);
170
+ }, w.apply(null, arguments);
222
171
  }
223
- function j(e, r) {
224
- return H(e) || N(e, r) || I(e, r) || q();
172
+ function q(e, r) {
173
+ return E(e) || x(e, r) || j(e, r) || _();
225
174
  }
226
- function q() {
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 I(e, r) {
178
+ function j(e, r) {
230
179
  if (e) {
231
- if ("string" == typeof e) return E(e, r);
232
- var a = {}.toString.call(e).slice(8, -1);
233
- return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? E(e, r) : void 0;
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 E(e, r) {
185
+ function I(e, r) {
237
186
  (null == r || r > e.length) && (r = e.length);
238
- for (var a = 0, n = Array(r); a < r; a++) {
239
- n[a] = e[a];
187
+ for (var n = 0, o = Array(r); n < r; n++) {
188
+ o[n] = e[n];
240
189
  }
241
- return n;
190
+ return o;
242
191
  }
243
- function N(e, r) {
244
- var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
245
- if (null != a) {
246
- var n, t, o, i, l = [], s = !0, c = !1;
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 (o = (a = a.call(e)).next, 0 === r) {
249
- if (Object(a) !== a) return;
197
+ if (t = (n = n.call(e)).next, 0 === r) {
198
+ if (Object(n) !== n) return;
250
199
  s = !1;
251
- } else for (;!(s = (n = o.call(a)).done) && (l.push(n.value), l.length !== r); s = !0) {
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, t = e;
203
+ c = !0, a = e;
255
204
  } finally {
256
205
  try {
257
- if (!s && null != a["return"] && (i = a["return"](), Object(i) !== i)) return;
206
+ if (!s && null != n["return"] && (l = n["return"](), Object(l) !== l)) return;
258
207
  } finally {
259
- if (c) throw t;
208
+ if (c) throw a;
260
209
  }
261
210
  }
262
- return l;
211
+ return i;
263
212
  }
264
213
  }
265
- function H(e) {
214
+ function E(e) {
266
215
  if (Array.isArray(e)) return e;
267
216
  }
268
- function A(e, r) {
217
+ function N(e, r) {
269
218
  if (null == e) return {};
270
- var a, n, t = z(e, r);
219
+ var n, o, a = A(e, r);
271
220
  if (Object.getOwnPropertySymbols) {
272
- var o = Object.getOwnPropertySymbols(e);
273
- for (n = 0; n < o.length; n++) {
274
- a = o[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
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 t;
226
+ return a;
278
227
  }
279
- function z(e, r) {
228
+ function A(e, r) {
280
229
  if (null == e) return {};
281
- var a = {};
282
- for (var n in e) {
283
- if ({}.hasOwnProperty.call(e, n)) {
284
- if (r.includes(n)) continue;
285
- a[n] = e[n];
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 a;
237
+ return n;
289
238
  }
290
239
  /** @public */ var P = {
291
- appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
292
- backgroundColor: l().string,
293
- children: l().node.isRequired,
294
- disabled: l().bool,
295
- elementRef: l().oneOfType([ l().func, l().object ]),
296
- foregroundColor: l().string,
297
- icon: l().node,
298
- onRequestRemove: l().func,
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: l().any
249
+ value: i().any
301
250
  };
302
- function T(e) {
251
+ function H(e) {
303
252
  return !!e.onRequestRemove;
304
253
  }
305
- function M(e) {
306
- var r = e.appearance, a = e.backgroundColor, n = e.disabled, t = e.foregroundColor, o = e.icon, i = A(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
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 l = t && (0, v.isCSSColor)(t) ? t : undefined;
309
- var s = a && (0, v.isCSSColor)(a) ? a : undefined;
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: l,
315
- disabled: n,
316
- icon: o
263
+ $foregroundColor: i,
264
+ disabled: o,
265
+ icon: t
317
266
  };
318
- return [ c, i ];
267
+ return [ c, l ];
319
268
  }
320
- function V(e) {
321
- var r = M(e), t = j(r, 2), i = t[0], l = t[1];
322
- var s = i.$appearance, u = i.$foregroundColor, v = i.disabled, b = v === void 0 ? false : v, m = i.icon, g = A(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
323
- var y = l.children, h = l.elementRef, C = l.onRequestRemove, x = l.value, S = A(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
324
- var q = typeof y === "string";
325
- var I = q ? (0, f.sprintf)((0, d._)("Remove %(children)s"), {
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, d._)("Remove");
328
- var E = (0, a.useCallback)((function(e) {
276
+ }) : (0, u._)("Remove");
277
+ var I = (0, n.useCallback)((function(e) {
329
278
  C(e, {
330
- value: x
279
+ value: h
331
280
  });
332
- }), [ C, x ]);
281
+ }), [ C, h ]);
333
282
 
334
- return n().createElement(_, R({
283
+ return o().createElement(R, w({
335
284
  $appearance: s,
336
- $disabled: b,
337
- $foregroundColor: u,
338
- "data-test-value": x,
339
- disabled: b,
340
- elementRef: h,
341
- onClick: E
342
- }, g, o()(S, Object.keys(P))), n().createElement(k, {
343
- $icon: !!m,
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": q ? true : undefined
348
- }, y), n().createElement(w, null, n().createElement(p(), {
294
+ "aria-hidden": _ ? true : undefined
295
+ }, y), o().createElement(k, {
349
296
  "data-test": "cross"
350
- }))));
297
+ }));
351
298
  }
352
- function X(e) {
353
- var r = M(e), a = j(r, 2), t = a[0], i = a[1];
354
- var l = t.$appearance, s = t.$foregroundColor, c = t.disabled, u = t.icon, p = A(t, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
355
- var d = i.children, v = i.elementRef, f = A(i, [ "children", "elementRef" ]);
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 n().createElement(S, R({
358
- $appearance: l,
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
- ref: v
362
- }, p, o()(f, Object.keys(P))), n().createElement(k, {
363
- $icon: !!u,
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
- }, d)));
313
+ }, v));
368
314
  }
369
- function B(e) {
315
+ function X(e) {
370
316
  // @docs-props-type ChipPropsBase
371
- return T(e) ? n().createElement(V, e) : n().createElement(X, e);
317
+ return H(e) ? o().createElement(M, e) : o().createElement(V, e);
372
318
  }
373
- B.propTypes = P;
374
- /* harmony default export */ const D = B;
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;