@splunk/react-ui 5.0.0-rc.2 → 5.1.0

package/CollapsiblePanel.js

@@ -73,144 +73,144 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
     const o = require("@splunk/react-ui/TransitionOpen");
     var i =  e.n(o);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const s = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-    const c = require("@splunk/react-ui/useControlled");
-    var u =  e.n(c);
+    const s = require("@splunk/react-ui/useControlled");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const p = require("@splunk/react-ui/usePrevious");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const f = require("lodash/omit");
-    var b =  e.n(f);
+    const u = require("@splunk/react-ui/usePrevious");
+    var p =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const d = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
-    var y =  e.n(v);
+    const f = require("styled-components");
+    var b =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const m = require("@splunk/react-ui/Box");
-    var g =  e.n(m);
+    const v = require("@splunk/react-ui/Box");
+    var y =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const h = require("@splunk/react-ui/ButtonSimple");
-    var S =  e.n(h);
+    const m = require("@splunk/react-ui/ButtonSimple");
+    var g =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const C = require("@splunk/react-ui/Clickable");
-    var O =  e.n(C);
+    const h = require("@splunk/react-ui/Clickable");
+    var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const P = require("@splunk/themes");
+    const C = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const w = require("@splunk/react-icons/ChevronRight");
-    var k =  e.n(w);
+    const O = require("@splunk/react-icons/ChevronRight");
+    var P =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const I = require("@splunk/react-icons/enterprise/ChevronRight");
-    var j =  e.n(I);
+    const w = require("@splunk/react-icons/enterprise/ChevronRight");
+    var k =  e.n(w);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
-    var x = {
+    var I = {
         className: l().string
     };
-    var E = function e(n) {
+    var j = function e(n) {
         var t = n.className;
-        var a = (0, P.useSplunkTheme)(), l = a.isEnterprise;
-        return l ?  r().createElement(j(), {
+        var a = (0, C.useSplunkTheme)(), l = a.isEnterprise;
+        return l ?  r().createElement(k(), {
             className: t,
             hideDefaultTooltip: true,
             screenReaderText: null
-        }) :  r().createElement(k(), {
+        }) :  r().createElement(P(), {
             className: t
         });
     };
-    E.propTypes = x;
-    /* harmony default export */    const _ = E;
+    j.propTypes = I;
+    /* harmony default export */    const x = j;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var N = y()(g()).withConfig({
+    var E = b()(y()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
     })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0, 
-    P.pickVariant)("$appearance", {
+    C.pickVariant)("$appearance", {
         default: {
-            prisma: P.variables.backgroundColorSection,
+            prisma: C.variables.backgroundColorSection,
             enterprise: {
-                dark: P.variables.gray22,
-                light: P.variables.white
+                dark: C.variables.gray22,
+                light: C.variables.white
             }
         },
-        subtle: P.variables.transparent
+        subtle: C.variables.transparent
     }));
-    var A = y()(g()).withConfig({
+    var _ = b()(y()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
+    })([ "", ";flex-direction:column;margin-bottom:0;" ], C.mixins.reset("flex"));
     /*
     these styles are consistent for both regular and actions, but applied to different elements
     * in regular mode, they're on the SVG's span wrapper
     * in actionsMode, they're on the button
     applying them directly to the icon wrapper doesn't work because Enterprise has 1px border around the button
-*/    var T = (0, v.css)([ "min-width:16px;" ]);
-    var $ = y().span.withConfig({
+*/    var N = (0, f.css)([ "min-width:16px;" ]);
+    var A = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
-    })([ "display:inline-block;flex:0 auto;", "" ], T);
-    var q = y().div.withConfig({
+    })([ "display:inline-block;flex:0 auto;", "" ], N);
+    var T = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledActions",
         componentId: "sc-1phikbp-3"
-    })([ "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, 
-    P.pickVariant)("$appearance", {
-        default: P.variables.neutral100,
-        subtle: P.variables.transparent
+    })([ "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:", ";", "" ], C.variables.spacingSmall, C.variables.spacingXSmall, C.variables.spacingLarge, C.variables.contentColorActive, (0, 
+    C.pickVariant)("$appearance", {
+        default: C.variables.neutral100,
+        subtle: C.variables.transparent
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
     }));
-    var D = y()(S()).withConfig({
+    var $ = b()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
-    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
-    var R = y()(O()).withConfig({
+    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], C.variables.lineHeight);
+    var q = b()(S()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
-    })([ "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, 
-    P.pickVariant)("$appearance", {
-        default: P.variables.neutral100,
-        subtle: P.variables.transparent
-    }), P.variables.contentColorDisabled, P.variables.focusShadowInset, P.mixins.overlayColors(P.variables.neutral100, P.variables.interactiveColorOverlayHover));
-    var B = y().span.withConfig({
+    })([ "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:", ";}" ], C.variables.spacingSmall, C.variables.spacingXSmall, C.variables.spacingLarge, C.variables.contentColorActive, (0, 
+    C.pickVariant)("$appearance", {
+        default: C.variables.neutral100,
+        subtle: C.variables.transparent
+    }), C.variables.contentColorDisabled, C.variables.focusShadowInset, C.mixins.overlayColors(C.variables.neutral100, C.variables.interactiveColorOverlayHover));
+    var D = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
         componentId: "sc-1phikbp-6"
-    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
+    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], C.variables.fontWeightSemiBold, C.variables.lineHeight, (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
     }));
-    var M = y().span.withConfig({
+    var R = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingActions",
         componentId: "sc-1phikbp-7"
-    })([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
-    var L = y().span.withConfig({
+    })([ "min-height:", ";flex:1 0 auto;" ], C.variables.inputHeight);
+    var B = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledDescription",
         componentId: "sc-1phikbp-8"
-    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
+    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], C.variables.contentColorDefault, C.variables.fontSizeSmall, C.variables.spacingSmall, (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
     }));
-    var W = y().div.withConfig({
+    var M = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
         componentId: "sc-1phikbp-9"
-    })([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
+    })([ "", ";gap:", ";", "" ], C.mixins.reset("block"), C.variables.spacingSmall, (function(e) {
         var n = e.$inset;
-        return n && (0, v.css)([ "padding:", ";" ], P.variables.spacingLarge);
+        return n && (0, f.css)([ "padding:", ";" ], C.variables.spacingLarge);
     }));
-    var H = y()(_).withConfig({
+    var L = b()(x).withConfig({
         displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
         componentId: "sc-1phikbp-10"
-    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, P.pick)({
+    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, C.pick)({
         enterprise: "300ms",
         prisma: "200ms"
     }), (function(e) {
         var n = e.open;
-        return n && (0, v.css)([ "transform:rotate(90deg);" ]);
-    }), (0, P.pick)({
+        return n && (0, f.css)([ "transform:rotate(90deg);" ]);
+    }), (0, C.pick)({
         enterprise: "baseline",
         prisma: "text-bottom"
     }));
+    // CONCATENATED MODULE: external "lodash/omit"
+    const W = require("lodash/omit");
+    var H =  e.n(W);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
     var V =  (0, t.createContext)({});
     /* harmony default export */    const G = V;
@@ -314,9 +314,9 @@
         openPanelId: l().any
     };
     function le(e) {
-        var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, c = e.openPanelId, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
+        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, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
         // @docs-props-type SingleOpenPanelGroupPropsBase
-                var d = u()({
+                var d = c()({
             componentName: "SingleOpenPanelGroup",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -325,33 +325,33 @@
             valuePropName: "openPanelId"
         });
         var f = !d ? a : undefined;
-        var v = (0, t.useState)(f), y = K(v, 2), m = y[0], g = y[1];
-        var h = (0, t.useCallback)((function(e, n) {
+        var b = (0, t.useState)(f), v = K(b, 2), y = v[0], m = v[1];
+        var g = (0, t.useCallback)((function(e, n) {
             var t = n.panelId;
-            var r = d ? c : m;
+            var r = d ? u : y;
             var a = r === t ? null : t;
             if (!d) {
-                g(a);
+                m(a);
             }
             s === null || s === void 0 ? void 0 : s(e, n);
-        }), [ d, c, m, s ]);
-        var S = t.Children.toArray(n).filter(t.isValidElement);
+        }), [ d, u, y, s ]);
+        var h = t.Children.toArray(n).filter(t.isValidElement);
  // remove false, null, 0, etc
-                var C = (0, t.useMemo)((function() {
+                var S = (0, t.useMemo)((function() {
             return {
-                onChange: h,
-                openPanelId: d ? c : m,
+                onChange: g,
+                openPanelId: d ? u : y,
                 inset: i
             };
-        }), [ h, i, d, c, m ]);
+        }), [ g, i, d, u, y ]);
         
-        return r().createElement(A, U({
+        return r().createElement(_, U({
             "data-test": "single-open-panel-group",
-            "data-test-open-panel-id": c,
+            "data-test-open-panel-id": u,
             elementRef: l
-        }, b().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  r().createElement(G.Provider, {
-            value: C
-        }, S));
+        }, H().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  r().createElement(G.Provider, {
+            value: S
+        }, h));
     }
     le.propTypes = ae;
     /* harmony default export */    const oe = le;
@@ -504,11 +504,11 @@
         title: l().node.isRequired
     };
     function Pe(e) {
-        var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, c = e.children, p = e.defaultOpen, f = p === void 0 ? undefined : p, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, C = S === void 0 ? "auto" : S, O = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, j = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
+        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, C = S === void 0 ? "auto" : S, O = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, j = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
         // @docs-props-type CollapsiblePanelPropsBase
                 var x = (0, t.useContext)(G);
-        var E = Object.keys(x).length !== 0;
-        var _ = u()({
+        var _ = Object.keys(x).length !== 0;
+        var N = c()({
             componentName: "CollapsiblePanel",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -516,10 +516,10 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var A = (0, t.useState)("container-".concat((0, s.createGUID)())), T = be(A, 1), V = T[0];
-        var U = (0, t.useState)("toggle-".concat((0, s.createGUID)())), z = be(U, 1), X = z[0];
-        var F = d()(h);
-        var J = !_ ? f || false : undefined;
+        var W = (0, t.useState)("container-".concat((0, d.createGUID)())), H = be(W, 1), V = H[0];
+        var U = (0, t.useState)("toggle-".concat((0, d.createGUID)())), z = be(U, 1), X = z[0];
+        var F = p()(h);
+        var J = !N ? f || false : undefined;
         var K = (0, t.useState)(J), Q = be(K, 2), Y = Q[0], Z = Q[1];
         var ee = (0, t.useState)(), ne = be(ee, 2), te = ne[0], re = ne[1];
         var ae = (0, t.useState)(false), le = be(ae, 2), oe = le[0], ie = le[1];
@@ -528,17 +528,17 @@
    * so context.openPanelId is used for both the controlled and uncontrolled case.
    */        (0, t.useEffect)((function() {
             var e;
-            if (E) {
+            if (_) {
                 e = x.openPanelId === O;
             } else {
-                e = _ ? h : Y;
+                e = N ? h : Y;
             }
             re(e);
-        }), [ x.openPanelId, E, _, h, Y, O ]);
+        }), [ x.openPanelId, _, N, h, Y, O ]);
         // Only testing this in the scenario of a SingleOpenPanelGroup.
                 (0, t.useEffect)((function() {
             if (false) {}
-        }), [ f, E, h ]);
+        }), [ f, _, h ]);
         (0, t.useEffect)((function() {
             if (F != null && h !== F) {
                 ie(true);
@@ -546,7 +546,7 @@
         }), [ h, F ]);
         var ce = (0, t.useCallback)((function(e) {
             var n;
-            if (!_) {
+            if (!N) {
                 ie(true);
                 Z(!te);
             }
@@ -561,11 +561,11 @@
                 reason: "toggleClick",
                 action: t
             });
-        }), [ x, _, te, g, O ]);
+        }), [ x, N, te, g, O ]);
         var pe = (0, t.useCallback)((function() {
             ie(false);
         }), []);
-        var de = (0, s.createDOMID)("panel-toggle");
+        var de = (0, d.createDOMID)("panel-toggle");
         var fe = {
             disabled: v,
             onClick: ce,
@@ -585,38 +585,38 @@
             }, n);
         }), [ n ]);
         
-        return r().createElement(N, se({
+        return r().createElement(E, se({
             "data-test": "collapsible-panel",
             elementRef: y,
             $appearance: o
-        }, j), a != null ?  r().createElement(q, {
+        }, j), a != null ?  r().createElement(T, {
             $appearance: o,
             $disabled: !!v
-        },  r().createElement(D, se({
+        },  r().createElement($, se({
             appearance: "secondary",
             "aria-labelledby": de
-        }, fe),  r().createElement(H, {
+        }, fe),  r().createElement(L, {
             open: !!te
-        })),  r().createElement(B, {
+        })),  r().createElement(D, {
             $disabled: !!v,
             "data-test": "title",
             id: de
-        }, w),  r().createElement(M, null, a)) : 
+        }, w),  r().createElement(R, null, a)) : 
         
         /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
         r().createElement("span", {
             "data-test": "heading",
             role: m ? "heading" : undefined,
             "aria-level": m
-        },  r().createElement(R, se({
+        },  r().createElement(q, se({
             $appearance: o
-        }, fe),  r().createElement($, null,  r().createElement(H, {
+        }, fe),  r().createElement(A, null,  r().createElement(L, {
             open: !!te
-        })),  r().createElement(B, {
+        })),  r().createElement(D, {
             $disabled: !!v
         },  r().createElement("span", {
             "data-test": "title"
-        }, w), b &&  r().createElement(L, {
+        }, w), b &&  r().createElement(B, {
             $disabled: !!v,
             "data-test": "description"
         }, b)))),  r().createElement(i(), {
@@ -629,9 +629,9 @@
             onAnimationEnd: pe,
             role: a != null ? "region" : undefined,
             renderChildrenWhenCollapsed: P
-        },  r().createElement(W, {
+        },  r().createElement(M, {
             $inset: I
-        }, c)));
+        }, s)));
     }
     Pe.propTypes = Oe;
     /* harmony default export */    const we = Pe;