@splunk/react-ui 5.2.0 → 5.3.0
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/Avatar.js +57 -52
- package/Box.js +2 -1
- package/CHANGELOG.md +31 -0
- package/Calendar.js +8 -4
- package/Checkbox.d.ts +2 -0
- package/Checkbox.js +350 -0
- package/Code.js +151 -132
- package/CollapsiblePanel.js +184 -210
- package/Color.js +4 -2
- package/ControlGroup.js +2 -1
- package/Date.js +123 -119
- package/DefinitionList.js +100 -77
- package/Dropdown.js +2 -2
- package/DualListbox.js +409 -353
- package/File.js +102 -99
- package/JSONTree.js +317 -303
- package/Link.js +11 -11
- package/MIGRATION.md +27 -0
- package/Markdown.js +162 -151
- package/Menu.js +44 -42
- package/Modal.js +3 -3
- package/Multiselect.js +454 -435
- package/Paginator.js +2 -1
- package/ResultsMenu.js +2 -1
- package/Scroll.js +2 -1
- package/Search.js +131 -127
- package/Select.js +3 -2
- package/Switch.js +197 -229
- package/Table.js +24 -16
- package/Text.js +180 -206
- package/TextArea.js +233 -224
- package/Tooltip.js +144 -139
- package/package.json +9 -10
- package/tsconfig.check-docs.json +8 -0
- package/types/src/Avatar/docs/examples/Basic.d.ts +1 -1
- package/types/src/Checkbox/Checkbox.d.ts +90 -0
- package/types/src/Checkbox/docs/examples/Basic.d.ts +7 -0
- package/types/src/Checkbox/docs/examples/Disabled.d.ts +6 -0
- package/types/src/Checkbox/docs/examples/Error.d.ts +6 -0
- package/types/src/Checkbox/docs/examples/Uncontrolled.d.ts +7 -0
- package/types/src/Checkbox/index.d.ts +2 -0
- package/types/src/Code/Code.d.ts +4 -1
- package/types/src/Code/LineHighlights.d.ts +1 -0
- package/types/src/Code/LineNumbers.d.ts +2 -1
- package/types/src/Code/docs/examples/CustomizeContainer.d.ts +7 -0
- package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +3 -3
- package/types/src/Date/Date.d.ts +7 -1
- package/types/src/DefinitionList/DefinitionList.d.ts +7 -2
- package/types/src/DefinitionList/DefinitionListContext.d.ts +1 -1
- package/types/src/DefinitionList/docs/examples/StackedLayout.d.ts +6 -0
- package/types/src/DualListbox/DualListbox.d.ts +1 -1
- package/types/src/DualListbox/Label.d.ts +7 -7
- package/types/src/DualListbox/Listbox.d.ts +2 -2
- package/types/src/DualListbox/ListboxContext.d.ts +1 -1
- package/types/src/File/File.d.ts +7 -1
- package/types/src/JSONTree/JSONTreeItem.d.ts +4 -2
- package/types/src/JSONTree/renderTreeItems.d.ts +2 -1
- package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +2 -1
- package/types/src/Menu/docs/examples/Dimmed.d.ts +1 -1
- package/types/src/Menu/docs/examples/Disabled.d.ts +1 -0
- package/types/src/Multiselect/Compact.d.ts +7 -1
- package/types/src/Multiselect/Multiselect.d.ts +7 -1
- package/types/src/Multiselect/Normal.d.ts +7 -1
- package/types/src/Search/Search.d.ts +5 -1
- package/types/src/Switch/Switch.d.ts +7 -1
- package/types/src/Switch/docs/examples/Basic.d.ts +2 -10
- package/types/src/Switch/docs/examples/Disabled.d.ts +2 -9
- package/types/src/Table/ExpandButton.d.ts +1 -1
- package/types/src/Tooltip/Tooltip.d.ts +14 -1
- package/NonInteractiveCheckbox.js +0 -101
- package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +0 -12
- package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +0 -22
- package/types/src/NonInteractiveCheckbox/index.d.ts +0 -1
- package/types/src/Switch/docs/examples/Error.d.ts +0 -6
- package/types/src/Text/IconOutlinedHide.d.ts +0 -3
- package/types/src/Text/IconOutlinedView.d.ts +0 -3
- /package/cypress/{tsconfig.cypress.json → tsconfig.check-cypress.json} +0 -0
package/CollapsiblePanel.js
CHANGED
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
e.r(n);
|
|
62
62
|
// EXPORTS
|
|
63
63
|
e.d(n, {
|
|
64
|
-
SingleOpenPanelGroup: () => /* reexport */
|
|
65
|
-
default: () => /* reexport */
|
|
64
|
+
SingleOpenPanelGroup: () => /* reexport */ ne,
|
|
65
|
+
default: () => /* reexport */ he
|
|
66
66
|
});
|
|
67
67
|
// CONCATENATED MODULE: external "react"
|
|
68
68
|
const t = require("react");
|
|
@@ -78,145 +78,119 @@
|
|
|
78
78
|
var c = e.n(s);
|
|
79
79
|
// CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
|
|
80
80
|
const u = require("@splunk/react-ui/usePrevious");
|
|
81
|
-
var
|
|
81
|
+
var d = e.n(u);
|
|
82
82
|
// CONCATENATED MODULE: external "@splunk/ui-utils/id"
|
|
83
|
-
const
|
|
83
|
+
const p = require("@splunk/ui-utils/id");
|
|
84
84
|
// CONCATENATED MODULE: external "styled-components"
|
|
85
85
|
const f = require("styled-components");
|
|
86
86
|
var b = e.n(f);
|
|
87
|
-
// CONCATENATED MODULE: external "@splunk/react-
|
|
88
|
-
const v = require("@splunk/react-
|
|
87
|
+
// CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
|
|
88
|
+
const v = require("@splunk/react-icons/ChevronRight");
|
|
89
89
|
var y = e.n(v);
|
|
90
|
-
// CONCATENATED MODULE: external "@splunk/react-ui/
|
|
91
|
-
const m = require("@splunk/react-ui/
|
|
90
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/Box"
|
|
91
|
+
const m = require("@splunk/react-ui/Box");
|
|
92
92
|
var g = e.n(m);
|
|
93
|
-
// CONCATENATED MODULE: external "@splunk/react-ui/
|
|
94
|
-
const h = require("@splunk/react-ui/
|
|
93
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
|
|
94
|
+
const h = require("@splunk/react-ui/ButtonSimple");
|
|
95
95
|
var S = e.n(h);
|
|
96
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
|
|
97
|
+
const O = require("@splunk/react-ui/Clickable");
|
|
98
|
+
var C = e.n(O);
|
|
96
99
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
97
|
-
const
|
|
98
|
-
// CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
|
|
99
|
-
const C = require("@splunk/react-icons/ChevronRight");
|
|
100
|
-
var P = e.n(C);
|
|
101
|
-
// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
|
|
102
|
-
const w = require("@splunk/react-icons/enterprise/ChevronRight");
|
|
103
|
-
var k = e.n(w);
|
|
104
|
-
// CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
|
|
105
|
-
var I = {
|
|
106
|
-
className: l().string
|
|
107
|
-
};
|
|
108
|
-
var x = function e(n) {
|
|
109
|
-
var t = n.className;
|
|
110
|
-
var a = (0, O.useSplunkTheme)(), l = a.isEnterprise;
|
|
111
|
-
return l ? r().createElement(k(), {
|
|
112
|
-
className: t,
|
|
113
|
-
hideDefaultTooltip: true,
|
|
114
|
-
screenReaderText: null
|
|
115
|
-
}) : r().createElement(P(), {
|
|
116
|
-
className: t
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
|
-
x.propTypes = I;
|
|
120
|
-
/* harmony default export */ const j = x;
|
|
100
|
+
const P = require("@splunk/themes");
|
|
121
101
|
// CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
|
|
122
|
-
var
|
|
102
|
+
var w = b()(g()).withConfig({
|
|
123
103
|
displayName: "CollapsiblePanelStyles__StyledBox",
|
|
124
104
|
componentId: "sc-1phikbp-0"
|
|
125
105
|
})([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0,
|
|
126
|
-
|
|
106
|
+
P.pickVariant)("$appearance", {
|
|
127
107
|
default: {
|
|
128
|
-
prisma:
|
|
108
|
+
prisma: P.variables.backgroundColorSection,
|
|
129
109
|
enterprise: {
|
|
130
|
-
dark:
|
|
131
|
-
light:
|
|
110
|
+
dark: P.variables.gray22,
|
|
111
|
+
light: P.variables.white
|
|
132
112
|
}
|
|
133
113
|
},
|
|
134
|
-
subtle:
|
|
114
|
+
subtle: P.variables.transparent
|
|
135
115
|
}));
|
|
136
|
-
var
|
|
116
|
+
var k = b()(g()).withConfig({
|
|
137
117
|
displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
|
|
138
118
|
componentId: "sc-1phikbp-1"
|
|
139
|
-
})([ "", ";flex-direction:column;margin-bottom:0;" ],
|
|
119
|
+
})([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
|
|
140
120
|
/*
|
|
141
121
|
these styles are consistent for both regular and actions, but applied to different elements
|
|
142
122
|
* in regular mode, they're on the SVG's span wrapper
|
|
143
123
|
* in actionsMode, they're on the button
|
|
144
124
|
applying them directly to the icon wrapper doesn't work because Enterprise has 1px border around the button
|
|
145
|
-
*/ var
|
|
146
|
-
var
|
|
125
|
+
*/ var I = (0, f.css)([ "min-width:16px;" ]);
|
|
126
|
+
var j = b().span.withConfig({
|
|
147
127
|
displayName: "CollapsiblePanelStyles__StyledIconWrapper",
|
|
148
128
|
componentId: "sc-1phikbp-2"
|
|
149
|
-
})([ "display:inline-block;flex:0 auto;", "" ],
|
|
150
|
-
var
|
|
129
|
+
})([ "display:inline-block;flex:0 auto;", "" ], I);
|
|
130
|
+
var x = b().div.withConfig({
|
|
151
131
|
displayName: "CollapsiblePanelStyles__StyledActions",
|
|
152
132
|
componentId: "sc-1phikbp-3"
|
|
153
|
-
})([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ],
|
|
154
|
-
|
|
155
|
-
default:
|
|
156
|
-
subtle:
|
|
133
|
+
})([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0,
|
|
134
|
+
P.pickVariant)("$appearance", {
|
|
135
|
+
default: P.variables.neutral100,
|
|
136
|
+
subtle: P.variables.transparent
|
|
157
137
|
}), (function(e) {
|
|
158
138
|
var n = e.$disabled;
|
|
159
|
-
return n && (0, f.css)([ "color:", ";" ],
|
|
139
|
+
return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
|
|
160
140
|
}));
|
|
161
|
-
var
|
|
141
|
+
var E = b()(S()).withConfig({
|
|
162
142
|
displayName: "CollapsiblePanelStyles__StyledToggleButton",
|
|
163
143
|
componentId: "sc-1phikbp-4"
|
|
164
|
-
})([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ],
|
|
165
|
-
var
|
|
144
|
+
})([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
|
|
145
|
+
var _ = b()(C()).withConfig({
|
|
166
146
|
displayName: "CollapsiblePanelStyles__StyledTitleClickable",
|
|
167
147
|
componentId: "sc-1phikbp-5"
|
|
168
|
-
})([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ],
|
|
169
|
-
|
|
170
|
-
default:
|
|
171
|
-
subtle:
|
|
172
|
-
}),
|
|
173
|
-
var
|
|
148
|
+
})([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0,
|
|
149
|
+
P.pickVariant)("$appearance", {
|
|
150
|
+
default: P.variables.neutral100,
|
|
151
|
+
subtle: P.variables.transparent
|
|
152
|
+
}), P.variables.contentColorDisabled, P.variables.focusShadowInset, P.mixins.overlayColors(P.variables.neutral100, P.variables.interactiveColorOverlayHover));
|
|
153
|
+
var A = b().span.withConfig({
|
|
174
154
|
displayName: "CollapsiblePanelStyles__StyledHeadingContent",
|
|
175
155
|
componentId: "sc-1phikbp-6"
|
|
176
|
-
})([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ],
|
|
156
|
+
})([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
|
|
177
157
|
var n = e.$disabled;
|
|
178
|
-
return n && (0, f.css)([ "color:", ";" ],
|
|
158
|
+
return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
|
|
179
159
|
}));
|
|
180
|
-
var
|
|
160
|
+
var $ = b().span.withConfig({
|
|
181
161
|
displayName: "CollapsiblePanelStyles__StyledHeadingActions",
|
|
182
162
|
componentId: "sc-1phikbp-7"
|
|
183
|
-
})([ "min-height:", ";flex:1 0 auto;" ],
|
|
184
|
-
var
|
|
163
|
+
})([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
|
|
164
|
+
var N = b().span.withConfig({
|
|
185
165
|
displayName: "CollapsiblePanelStyles__StyledDescription",
|
|
186
166
|
componentId: "sc-1phikbp-8"
|
|
187
|
-
})([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ],
|
|
167
|
+
})([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
|
|
188
168
|
var n = e.$disabled;
|
|
189
|
-
return n && (0, f.css)([ "color:", ";" ],
|
|
169
|
+
return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
|
|
190
170
|
}));
|
|
191
|
-
var
|
|
171
|
+
var q = b().div.withConfig({
|
|
192
172
|
displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
|
|
193
173
|
componentId: "sc-1phikbp-9"
|
|
194
|
-
})([ "", ";gap:", ";", "" ],
|
|
174
|
+
})([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
|
|
195
175
|
var n = e.$inset;
|
|
196
|
-
return n && (0, f.css)([ "padding:", ";" ],
|
|
176
|
+
return n && (0, f.css)([ "padding:", ";" ], P.variables.spacingLarge);
|
|
197
177
|
}));
|
|
198
|
-
var
|
|
178
|
+
var D = b()(y()).withConfig({
|
|
199
179
|
displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
|
|
200
180
|
componentId: "sc-1phikbp-10"
|
|
201
|
-
})([ "transition:transform
|
|
202
|
-
|
|
203
|
-
prisma: "200ms"
|
|
204
|
-
}), (function(e) {
|
|
205
|
-
var n = e.open;
|
|
181
|
+
})([ "transition:transform 200ms;", " width:100%;vertical-align:text-bottom;" ], (function(e) {
|
|
182
|
+
var n = e.$open;
|
|
206
183
|
return n && (0, f.css)([ "transform:rotate(90deg);" ]);
|
|
207
|
-
}), (0, O.pick)({
|
|
208
|
-
enterprise: "baseline",
|
|
209
|
-
prisma: "text-bottom"
|
|
210
184
|
}));
|
|
211
185
|
// CONCATENATED MODULE: external "lodash/omit"
|
|
212
|
-
const
|
|
213
|
-
var
|
|
186
|
+
const T = require("lodash/omit");
|
|
187
|
+
var M = e.n(T);
|
|
214
188
|
// CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
|
|
215
|
-
var
|
|
216
|
-
/* harmony default export */ const
|
|
189
|
+
var R = (0, t.createContext)({});
|
|
190
|
+
/* harmony default export */ const B = R;
|
|
217
191
|
// CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
|
|
218
|
-
function
|
|
219
|
-
return
|
|
192
|
+
function L() {
|
|
193
|
+
return L = Object.assign ? Object.assign.bind() : function(e) {
|
|
220
194
|
for (var n = 1; n < arguments.length; n++) {
|
|
221
195
|
var t = arguments[n];
|
|
222
196
|
for (var r in t) {
|
|
@@ -224,41 +198,41 @@
|
|
|
224
198
|
}
|
|
225
199
|
}
|
|
226
200
|
return e;
|
|
227
|
-
},
|
|
201
|
+
}, L.apply(null, arguments);
|
|
228
202
|
}
|
|
229
|
-
function
|
|
230
|
-
return
|
|
203
|
+
function W(e) {
|
|
204
|
+
return G(e) || V(e) || X(e) || H();
|
|
231
205
|
}
|
|
232
|
-
function
|
|
206
|
+
function H() {
|
|
233
207
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
234
208
|
}
|
|
235
|
-
function
|
|
209
|
+
function V(e) {
|
|
236
210
|
if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
|
|
237
211
|
}
|
|
238
|
-
function
|
|
239
|
-
if (Array.isArray(e)) return
|
|
212
|
+
function G(e) {
|
|
213
|
+
if (Array.isArray(e)) return F(e);
|
|
240
214
|
}
|
|
241
|
-
function
|
|
242
|
-
return
|
|
215
|
+
function U(e, n) {
|
|
216
|
+
return K(e) || J(e, n) || X(e, n) || z();
|
|
243
217
|
}
|
|
244
|
-
function
|
|
218
|
+
function z() {
|
|
245
219
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
246
220
|
}
|
|
247
|
-
function
|
|
221
|
+
function X(e, n) {
|
|
248
222
|
if (e) {
|
|
249
|
-
if ("string" == typeof e) return
|
|
223
|
+
if ("string" == typeof e) return F(e, n);
|
|
250
224
|
var t = {}.toString.call(e).slice(8, -1);
|
|
251
|
-
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ?
|
|
225
|
+
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? F(e, n) : void 0;
|
|
252
226
|
}
|
|
253
227
|
}
|
|
254
|
-
function
|
|
228
|
+
function F(e, n) {
|
|
255
229
|
(null == n || n > e.length) && (n = e.length);
|
|
256
230
|
for (var t = 0, r = Array(n); t < n; t++) {
|
|
257
231
|
r[t] = e[t];
|
|
258
232
|
}
|
|
259
233
|
return r;
|
|
260
234
|
}
|
|
261
|
-
function
|
|
235
|
+
function J(e, n) {
|
|
262
236
|
var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
|
|
263
237
|
if (null != t) {
|
|
264
238
|
var r, a, l, o, i = [], s = !0, c = !1;
|
|
@@ -280,12 +254,12 @@
|
|
|
280
254
|
return i;
|
|
281
255
|
}
|
|
282
256
|
}
|
|
283
|
-
function
|
|
257
|
+
function K(e) {
|
|
284
258
|
if (Array.isArray(e)) return e;
|
|
285
259
|
}
|
|
286
|
-
function
|
|
260
|
+
function Q(e, n) {
|
|
287
261
|
if (null == e) return {};
|
|
288
|
-
var t, r, a =
|
|
262
|
+
var t, r, a = Y(e, n);
|
|
289
263
|
if (Object.getOwnPropertySymbols) {
|
|
290
264
|
var l = Object.getOwnPropertySymbols(e);
|
|
291
265
|
for (r = 0; r < l.length; r++) {
|
|
@@ -294,7 +268,7 @@
|
|
|
294
268
|
}
|
|
295
269
|
return a;
|
|
296
270
|
}
|
|
297
|
-
function
|
|
271
|
+
function Y(e, n) {
|
|
298
272
|
if (null == e) return {};
|
|
299
273
|
var t = {};
|
|
300
274
|
for (var r in e) {
|
|
@@ -305,7 +279,7 @@
|
|
|
305
279
|
}
|
|
306
280
|
return t;
|
|
307
281
|
}
|
|
308
|
-
/** @public */ var
|
|
282
|
+
/** @public */ var Z = {
|
|
309
283
|
children: l().node,
|
|
310
284
|
defaultOpenPanelId: l().any,
|
|
311
285
|
elementRef: l().oneOfType([ l().func, l().object ]),
|
|
@@ -313,10 +287,10 @@
|
|
|
313
287
|
onChange: l().func,
|
|
314
288
|
openPanelId: l().any
|
|
315
289
|
};
|
|
316
|
-
function
|
|
317
|
-
var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId,
|
|
290
|
+
function ee(e) {
|
|
291
|
+
var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, d = Q(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
|
|
318
292
|
// @docs-props-type SingleOpenPanelGroupPropsBase
|
|
319
|
-
var
|
|
293
|
+
var p = c()({
|
|
320
294
|
componentName: "SingleOpenPanelGroup",
|
|
321
295
|
/* eslint-disable-next-line prefer-rest-params */
|
|
322
296
|
componentProps: arguments[0],
|
|
@@ -324,48 +298,48 @@
|
|
|
324
298
|
defaultValuePropName: "defaultOpenPanelId",
|
|
325
299
|
valuePropName: "openPanelId"
|
|
326
300
|
});
|
|
327
|
-
var f = !
|
|
328
|
-
var b = (0, t.useState)(f), v =
|
|
301
|
+
var f = !p ? a : undefined;
|
|
302
|
+
var b = (0, t.useState)(f), v = U(b, 2), y = v[0], m = v[1];
|
|
329
303
|
var g = (0, t.useCallback)((function(e, n) {
|
|
330
304
|
var t = n.panelId;
|
|
331
|
-
var r =
|
|
305
|
+
var r = p ? u : y;
|
|
332
306
|
var a = r === t ? null : t;
|
|
333
|
-
if (!
|
|
307
|
+
if (!p) {
|
|
334
308
|
m(a);
|
|
335
309
|
}
|
|
336
310
|
s === null || s === void 0 ? void 0 : s(e, n);
|
|
337
|
-
}), [
|
|
311
|
+
}), [ p, u, y, s ]);
|
|
338
312
|
var h = t.Children.toArray(n).filter(t.isValidElement);
|
|
339
313
|
// remove false, null, 0, etc
|
|
340
314
|
var S = (0, t.useMemo)((function() {
|
|
341
315
|
return {
|
|
342
316
|
onChange: g,
|
|
343
|
-
openPanelId:
|
|
317
|
+
openPanelId: p ? u : y,
|
|
344
318
|
inset: i
|
|
345
319
|
};
|
|
346
|
-
}), [ g, i,
|
|
320
|
+
}), [ g, i, p, u, y ]);
|
|
347
321
|
|
|
348
|
-
return r().createElement(
|
|
322
|
+
return r().createElement(k, L({
|
|
349
323
|
"data-test": "single-open-panel-group",
|
|
350
324
|
"data-test-open-panel-id": u,
|
|
351
325
|
elementRef: l
|
|
352
|
-
},
|
|
326
|
+
}, M().apply(void 0, [ d ].concat(W(Object.keys(Z))))), r().createElement(B.Provider, {
|
|
353
327
|
value: S
|
|
354
328
|
}, h));
|
|
355
329
|
}
|
|
356
|
-
|
|
357
|
-
/* harmony default export */ const
|
|
330
|
+
ee.propTypes = Z;
|
|
331
|
+
/* harmony default export */ const ne = ee;
|
|
358
332
|
// CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
|
|
359
|
-
function
|
|
333
|
+
function te(e) {
|
|
360
334
|
"@babel/helpers - typeof";
|
|
361
|
-
return
|
|
335
|
+
return te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
|
|
362
336
|
return typeof e;
|
|
363
337
|
} : function(e) {
|
|
364
338
|
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
|
|
365
|
-
},
|
|
339
|
+
}, te(e);
|
|
366
340
|
}
|
|
367
|
-
function
|
|
368
|
-
return
|
|
341
|
+
function re() {
|
|
342
|
+
return re = Object.assign ? Object.assign.bind() : function(e) {
|
|
369
343
|
for (var n = 1; n < arguments.length; n++) {
|
|
370
344
|
var t = arguments[n];
|
|
371
345
|
for (var r in t) {
|
|
@@ -373,9 +347,9 @@
|
|
|
373
347
|
}
|
|
374
348
|
}
|
|
375
349
|
return e;
|
|
376
|
-
},
|
|
350
|
+
}, re.apply(null, arguments);
|
|
377
351
|
}
|
|
378
|
-
function
|
|
352
|
+
function ae(e, n) {
|
|
379
353
|
var t = Object.keys(e);
|
|
380
354
|
if (Object.getOwnPropertySymbols) {
|
|
381
355
|
var r = Object.getOwnPropertySymbols(e);
|
|
@@ -385,60 +359,60 @@
|
|
|
385
359
|
}
|
|
386
360
|
return t;
|
|
387
361
|
}
|
|
388
|
-
function
|
|
362
|
+
function le(e) {
|
|
389
363
|
for (var n = 1; n < arguments.length; n++) {
|
|
390
364
|
var t = null != arguments[n] ? arguments[n] : {};
|
|
391
|
-
n % 2 ?
|
|
392
|
-
|
|
393
|
-
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) :
|
|
365
|
+
n % 2 ? ae(Object(t), !0).forEach((function(n) {
|
|
366
|
+
oe(e, n, t[n]);
|
|
367
|
+
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ae(Object(t)).forEach((function(n) {
|
|
394
368
|
Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
|
|
395
369
|
}));
|
|
396
370
|
}
|
|
397
371
|
return e;
|
|
398
372
|
}
|
|
399
|
-
function
|
|
400
|
-
return (n =
|
|
373
|
+
function oe(e, n, t) {
|
|
374
|
+
return (n = ie(n)) in e ? Object.defineProperty(e, n, {
|
|
401
375
|
value: t,
|
|
402
376
|
enumerable: !0,
|
|
403
377
|
configurable: !0,
|
|
404
378
|
writable: !0
|
|
405
379
|
}) : e[n] = t, e;
|
|
406
380
|
}
|
|
407
|
-
function
|
|
408
|
-
var n =
|
|
409
|
-
return "symbol" ==
|
|
381
|
+
function ie(e) {
|
|
382
|
+
var n = se(e, "string");
|
|
383
|
+
return "symbol" == te(n) ? n : n + "";
|
|
410
384
|
}
|
|
411
|
-
function
|
|
412
|
-
if ("object" !=
|
|
385
|
+
function se(e, n) {
|
|
386
|
+
if ("object" != te(e) || !e) return e;
|
|
413
387
|
var t = e[Symbol.toPrimitive];
|
|
414
388
|
if (void 0 !== t) {
|
|
415
389
|
var r = t.call(e, n || "default");
|
|
416
|
-
if ("object" !=
|
|
390
|
+
if ("object" != te(r)) return r;
|
|
417
391
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
418
392
|
}
|
|
419
393
|
return ("string" === n ? String : Number)(e);
|
|
420
394
|
}
|
|
421
|
-
function
|
|
422
|
-
return
|
|
395
|
+
function ce(e, n) {
|
|
396
|
+
return be(e) || fe(e, n) || de(e, n) || ue();
|
|
423
397
|
}
|
|
424
|
-
function
|
|
398
|
+
function ue() {
|
|
425
399
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
426
400
|
}
|
|
427
|
-
function
|
|
401
|
+
function de(e, n) {
|
|
428
402
|
if (e) {
|
|
429
|
-
if ("string" == typeof e) return
|
|
403
|
+
if ("string" == typeof e) return pe(e, n);
|
|
430
404
|
var t = {}.toString.call(e).slice(8, -1);
|
|
431
|
-
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ?
|
|
405
|
+
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? pe(e, n) : void 0;
|
|
432
406
|
}
|
|
433
407
|
}
|
|
434
|
-
function
|
|
408
|
+
function pe(e, n) {
|
|
435
409
|
(null == n || n > e.length) && (n = e.length);
|
|
436
410
|
for (var t = 0, r = Array(n); t < n; t++) {
|
|
437
411
|
r[t] = e[t];
|
|
438
412
|
}
|
|
439
413
|
return r;
|
|
440
414
|
}
|
|
441
|
-
function
|
|
415
|
+
function fe(e, n) {
|
|
442
416
|
var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
|
|
443
417
|
if (null != t) {
|
|
444
418
|
var r, a, l, o, i = [], s = !0, c = !1;
|
|
@@ -460,12 +434,12 @@
|
|
|
460
434
|
return i;
|
|
461
435
|
}
|
|
462
436
|
}
|
|
463
|
-
function
|
|
437
|
+
function be(e) {
|
|
464
438
|
if (Array.isArray(e)) return e;
|
|
465
439
|
}
|
|
466
|
-
function
|
|
440
|
+
function ve(e, n) {
|
|
467
441
|
if (null == e) return {};
|
|
468
|
-
var t, r, a =
|
|
442
|
+
var t, r, a = ye(e, n);
|
|
469
443
|
if (Object.getOwnPropertySymbols) {
|
|
470
444
|
var l = Object.getOwnPropertySymbols(e);
|
|
471
445
|
for (r = 0; r < l.length; r++) {
|
|
@@ -474,7 +448,7 @@
|
|
|
474
448
|
}
|
|
475
449
|
return a;
|
|
476
450
|
}
|
|
477
|
-
function
|
|
451
|
+
function ye(e, n) {
|
|
478
452
|
if (null == e) return {};
|
|
479
453
|
var t = {};
|
|
480
454
|
for (var r in e) {
|
|
@@ -485,7 +459,7 @@
|
|
|
485
459
|
}
|
|
486
460
|
return t;
|
|
487
461
|
}
|
|
488
|
-
/** @public */ var
|
|
462
|
+
/** @public */ var me = {
|
|
489
463
|
innerBodyStyles: l().object,
|
|
490
464
|
actions: l().node,
|
|
491
465
|
appearance: l().oneOf([ "default", "subtle" ]),
|
|
@@ -503,12 +477,12 @@
|
|
|
503
477
|
renderChildrenWhenCollapsed: l().bool,
|
|
504
478
|
title: l().node.isRequired
|
|
505
479
|
};
|
|
506
|
-
function
|
|
507
|
-
var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed,
|
|
480
|
+
function ge(e) {
|
|
481
|
+
var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, k = e.title, I = e.inset, T = I === void 0 ? true : I, M = ve(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
|
|
508
482
|
// @docs-props-type CollapsiblePanelPropsBase
|
|
509
|
-
var
|
|
510
|
-
var
|
|
511
|
-
var
|
|
483
|
+
var R = (0, t.useContext)(B);
|
|
484
|
+
var L = Object.keys(R).length !== 0;
|
|
485
|
+
var W = c()({
|
|
512
486
|
componentName: "CollapsiblePanel",
|
|
513
487
|
/* eslint-disable-next-line prefer-rest-params */
|
|
514
488
|
componentProps: arguments[0],
|
|
@@ -516,127 +490,127 @@
|
|
|
516
490
|
defaultValuePropName: "defaultOpen",
|
|
517
491
|
valuePropName: "open"
|
|
518
492
|
});
|
|
519
|
-
var
|
|
520
|
-
var U = (0, t.useState)("toggle-".concat((0,
|
|
521
|
-
var F =
|
|
522
|
-
var J = !
|
|
523
|
-
var K = (0, t.useState)(J), Q =
|
|
524
|
-
var ee = (0, t.useState)(false), ne =
|
|
525
|
-
var
|
|
526
|
-
if (
|
|
493
|
+
var H = (0, t.useState)("container-".concat((0, p.createGUID)())), V = ce(H, 1), G = V[0];
|
|
494
|
+
var U = (0, t.useState)("toggle-".concat((0, p.createGUID)())), z = ce(U, 1), X = z[0];
|
|
495
|
+
var F = d()(h);
|
|
496
|
+
var J = !W ? f || false : undefined;
|
|
497
|
+
var K = (0, t.useState)(J), Q = ce(K, 2), Y = Q[0], Z = Q[1];
|
|
498
|
+
var ee = (0, t.useState)(false), ne = ce(ee, 2), te = ne[0], ae = ne[1];
|
|
499
|
+
var oe = (0, t.useMemo)((function() {
|
|
500
|
+
if (L) {
|
|
527
501
|
/**
|
|
528
502
|
* SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
|
|
529
503
|
* so context.openPanelId is used for both the controlled and uncontrolled case.
|
|
530
504
|
*/
|
|
531
|
-
return
|
|
505
|
+
return R.openPanelId === C;
|
|
532
506
|
}
|
|
533
|
-
return
|
|
534
|
-
}), [
|
|
507
|
+
return W ? h : Y;
|
|
508
|
+
}), [ R.openPanelId, L, W, h, Y, C ]);
|
|
535
509
|
// SUI-7877 Must initialize openPanel with value to avoid re-render animation bug
|
|
536
|
-
var
|
|
510
|
+
var ie = (0, t.useState)(oe), se = ce(ie, 2), ue = se[0], de = se[1];
|
|
537
511
|
(0, t.useEffect)((function() {
|
|
538
|
-
|
|
539
|
-
}), [
|
|
512
|
+
de(oe);
|
|
513
|
+
}), [ oe ]);
|
|
540
514
|
// Only testing this in the scenario of a SingleOpenPanelGroup.
|
|
541
515
|
(0, t.useEffect)((function() {
|
|
542
516
|
if (false) {}
|
|
543
|
-
}), [ f,
|
|
517
|
+
}), [ f, L, h ]);
|
|
544
518
|
(0, t.useEffect)((function() {
|
|
545
519
|
if (F != null && h !== F) {
|
|
546
|
-
|
|
520
|
+
ae(true);
|
|
547
521
|
}
|
|
548
522
|
}), [ h, F ]);
|
|
549
523
|
var pe = (0, t.useCallback)((function(e) {
|
|
550
524
|
var n;
|
|
551
|
-
if (!
|
|
552
|
-
|
|
553
|
-
Z(!
|
|
525
|
+
if (!W) {
|
|
526
|
+
ae(true);
|
|
527
|
+
Z(!ue);
|
|
554
528
|
}
|
|
555
|
-
var t =
|
|
529
|
+
var t = ue ? "close" : "open";
|
|
556
530
|
g === null || g === void 0 ? void 0 : g(e, {
|
|
557
531
|
panelId: C,
|
|
558
532
|
reason: "toggleClick",
|
|
559
533
|
action: t
|
|
560
534
|
});
|
|
561
|
-
(n =
|
|
535
|
+
(n = R.onChange) === null || n === void 0 ? void 0 : n.call(R, e, {
|
|
562
536
|
panelId: C,
|
|
563
537
|
reason: "toggleClick",
|
|
564
538
|
action: t
|
|
565
539
|
});
|
|
566
|
-
}), [
|
|
567
|
-
var
|
|
568
|
-
|
|
540
|
+
}), [ R, W, ue, g, C ]);
|
|
541
|
+
var fe = (0, t.useCallback)((function() {
|
|
542
|
+
ae(false);
|
|
569
543
|
}), []);
|
|
570
|
-
var
|
|
571
|
-
var
|
|
544
|
+
var be = (0, p.createDOMID)("panel-toggle");
|
|
545
|
+
var ye = {
|
|
572
546
|
disabled: v,
|
|
573
547
|
onClick: pe,
|
|
574
548
|
id: X,
|
|
575
|
-
"aria-controls":
|
|
576
|
-
"aria-expanded":
|
|
549
|
+
"aria-controls": G,
|
|
550
|
+
"aria-expanded": ue,
|
|
577
551
|
"data-test": "toggle"
|
|
578
552
|
};
|
|
579
|
-
var
|
|
553
|
+
var me = (0, t.useMemo)((function() {
|
|
580
554
|
return {
|
|
581
555
|
overflow: te ? "hidden" : O
|
|
582
556
|
};
|
|
583
557
|
}), [ te, O ]);
|
|
584
|
-
var
|
|
585
|
-
return
|
|
558
|
+
var ge = (0, t.useMemo)((function() {
|
|
559
|
+
return le({
|
|
586
560
|
tableLayout: "fixed"
|
|
587
561
|
}, n);
|
|
588
562
|
}), [ n ]);
|
|
589
563
|
|
|
590
|
-
return r().createElement(
|
|
564
|
+
return r().createElement(w, re({
|
|
591
565
|
"data-test": "collapsible-panel",
|
|
592
566
|
elementRef: y,
|
|
593
567
|
$appearance: o
|
|
594
|
-
},
|
|
568
|
+
}, M), a != null ? r().createElement(x, {
|
|
595
569
|
$appearance: o,
|
|
596
570
|
$disabled: !!v
|
|
597
|
-
}, r().createElement(
|
|
571
|
+
}, r().createElement(E, re({
|
|
598
572
|
appearance: "secondary",
|
|
599
|
-
"aria-labelledby":
|
|
600
|
-
},
|
|
601
|
-
open: !!
|
|
602
|
-
})), r().createElement(
|
|
573
|
+
"aria-labelledby": be
|
|
574
|
+
}, ye), r().createElement(D, {
|
|
575
|
+
$open: !!ue
|
|
576
|
+
})), r().createElement(A, {
|
|
603
577
|
$disabled: !!v,
|
|
604
578
|
"data-test": "title",
|
|
605
|
-
id:
|
|
606
|
-
},
|
|
579
|
+
id: be
|
|
580
|
+
}, k), r().createElement($, null, a)) :
|
|
607
581
|
|
|
608
582
|
/* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
|
|
609
583
|
r().createElement("span", {
|
|
610
584
|
"data-test": "heading",
|
|
611
585
|
role: m ? "heading" : undefined,
|
|
612
586
|
"aria-level": m
|
|
613
|
-
}, r().createElement(
|
|
587
|
+
}, r().createElement(_, re({
|
|
614
588
|
$appearance: o
|
|
615
|
-
},
|
|
616
|
-
open: !!
|
|
617
|
-
})), r().createElement(
|
|
589
|
+
}, ye), r().createElement(j, null, r().createElement(D, {
|
|
590
|
+
$open: !!ue
|
|
591
|
+
})), r().createElement(A, {
|
|
618
592
|
$disabled: !!v
|
|
619
593
|
}, r().createElement("span", {
|
|
620
594
|
"data-test": "title"
|
|
621
|
-
},
|
|
595
|
+
}, k), b && r().createElement(N, {
|
|
622
596
|
$disabled: !!v,
|
|
623
597
|
"data-test": "description"
|
|
624
598
|
}, b)))), r().createElement(i(), {
|
|
625
|
-
outerId:
|
|
599
|
+
outerId: G,
|
|
626
600
|
"aria-labelledby": X,
|
|
627
601
|
"data-test": "body",
|
|
628
|
-
outerStyle:
|
|
629
|
-
innerStyle:
|
|
630
|
-
open:
|
|
631
|
-
onAnimationEnd:
|
|
602
|
+
outerStyle: me,
|
|
603
|
+
innerStyle: ge,
|
|
604
|
+
open: ue,
|
|
605
|
+
onAnimationEnd: fe,
|
|
632
606
|
role: a != null ? "region" : undefined,
|
|
633
607
|
renderChildrenWhenCollapsed: P
|
|
634
|
-
}, r().createElement(
|
|
635
|
-
$inset:
|
|
608
|
+
}, r().createElement(q, {
|
|
609
|
+
$inset: T
|
|
636
610
|
}, s)));
|
|
637
611
|
}
|
|
638
|
-
|
|
639
|
-
/* harmony default export */ const
|
|
612
|
+
ge.propTypes = me;
|
|
613
|
+
/* harmony default export */ const he = ge;
|
|
640
614
|
// CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
|
|
641
615
|
module.exports = n;
|
|
642
616
|
/******/})();
|