@splunk/react-ui 5.4.0 → 5.5.0

package/SlidingPanels.js

@@ -83,11 +83,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanelsStyles.ts
-    var d = c()(s()).withConfig({
+    var p = c()(s()).withConfig({
         displayName: "SlidingPanelsStyles__StyledBox",
         componentId: "su6isq-0"
     })([ "overflow:hidden;position:relative;" ]);
-    var v = c()(o.animated.div).withConfig({
+    var d = c()(o.animated.div).withConfig({
         displayName: "SlidingPanelsStyles__StyledAnimatedDiv",
         componentId: "su6isq-1"
     })([ "", ";", ";" ], y.mixins.reset("block"), y.mixins.clearfix());
@@ -98,7 +98,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function p(e, n) {
+    function m(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -111,8 +111,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/SlidingPanels/Panel.tsx
-    function m() {
-        return m = Object.assign ? Object.assign.bind() : function(e) {
+    function v() {
+        return v = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -120,29 +120,29 @@
                 }
             }
             return e;
-        }, m.apply(null, arguments);
+        }, v.apply(null, arguments);
     }
     function b(e, n) {
-        return j(e) || S(e, n) || g(e, n) || O();
+        return j(e) || h(e, n) || g(e, n) || O();
     }
     function O() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
     function g(e, n) {
         if (e) {
-            if ("string" == typeof e) return h(e, n);
+            if ("string" == typeof e) return S(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            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) ? h(e, n) : void 0;
+            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) ? S(e, n) : void 0;
         }
     }
-    function h(e, n) {
+    function S(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function S(e, n) {
+    function h(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, u = [], l = !0, c = !1;
@@ -204,9 +204,9 @@
         var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = w(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
         // @docs-props-type PanelPropsBase
                 var c = (0, t.useState)(null), f = b(c, 2), s = f[0], y = f[1];
-        var d = (0, t.useCallback)((function(e) {
+        var p = (0, t.useCallback)((function(e) {
             y(e);
-            p(o, e);
+            m(o, e);
         }), [ o ]);
         (0, t.useEffect)((function() {
             i === null || i === void 0 ? void 0 : i(s, u);
@@ -215,11 +215,11 @@
             };
         }), [ i, a, s, u ]);
         
-        return r().createElement(v, m({
+        return r().createElement(d, v({
             "data-test": "panel",
             "data-test-panel-id": u
         }, l, {
-            ref: d
+            ref: p
         }), n);
     }
     E.propTypes = x;
@@ -233,8 +233,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, I(e);
     }
-    function C() {
-        return C = Object.assign ? Object.assign.bind() : function(e) {
+    function M() {
+        return M = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -242,9 +242,9 @@
                 }
             }
             return e;
-        }, C.apply(null, arguments);
+        }, M.apply(null, arguments);
     }
-    function M(e, n) {
+    function C(e, n) {
         return k(e) || R(e, n) || T(e, n) || N();
     }
     function N() {
@@ -402,37 +402,32 @@
             return e;
         }), 0);
     };
-    /* this function is used to loop over children panels and output a render function for each,
-   we wrap each child panel in animated.div via StyledAnimatedDiv
+    /* This component is used to wrap each child panel in animated.div via StyledAnimatedDiv
    apply any custom inner styles or classnames that have been passed in
-   apply styles coming from the transitions call that is rendering this component
-   you can see this being used below as `<PanelToRender style={style} />` */    var H = function e(n) {
-        var o = n.validChildren, i = n.innerClassName, a = n.innerStyle, u = n.onMount, l = n.onUnmount;
-        return o.map((function(e) {
-            /* this is returning a function (component) that is rendered near bottom of file as <PanelToRender style={style} /> */
-            return function(n) {
-                var o = n.style;
-                var c =  (0, t.cloneElement)(e, {
-                    onMount: u,
-                    onUnmount: l
-                });
-                var f = (0, t.useMemo)((function() {
-                    return B(B({}, a), o);
-                }), [ o ]);
-                
-                return r().createElement(v, {
-                    style: f,
-                    className: i
-                }, c);
-            };
-        }));
-    };
+   apply styles coming from the transitions call that is rendering this component */    var H =  r().memo((function(e) {
+        var n = e.innerClassName, o = e.innerStyle, i = e.onMount, a = e.onUnmount, u = e.panel, l = e.style;
+        var c = (0, t.useMemo)((function() {
+            
+            return (0, t.cloneElement)(u, {
+                onMount: i,
+                onUnmount: a
+            });
+        }), [ u, i, a ]);
+        var f = (0, t.useMemo)((function() {
+            return B(B({}, o), l);
+        }), [ o, l ]);
+        
+        return r().createElement(d, {
+            style: f,
+            className: n
+        }, c);
+    }));
     function J(e) {
-        var n = e.activePanelId, i = e.children, a = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, v = e.transition, p = v === void 0 ? "forward" : v, m = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
+        var n = e.activePanelId, i = e.children, a = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, d = e.transition, m = d === void 0 ? "forward" : d, v = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
         // @docs-props-type SlidingPanelsPropsBase
-                var b = (0, t.useState)(0), O = M(b, 2), g = O[0], h = O[1];
-        var S = (0, t.useState)([]), j = M(S, 2), w = j[0], P = j[1];
-        var x = (0, t.useState)({}), E = M(x, 2), A = E[0], I = E[1];
+                var b = (0, t.useState)(0), O = C(b, 2), g = O[0], S = O[1];
+        var h = (0, t.useState)([]), j = C(h, 2), w = j[0], P = j[1];
+        var x = (0, t.useState)({}), E = C(x, 2), A = E[0], I = E[1];
         var N = (0, o.useSpringRef)();
         var T = (0, t.useMemo)((function() {
             return t.Children.toArray(i).filter(t.isValidElement);
@@ -447,8 +442,8 @@
         }), [ A ]);
         /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var R = (0, 
         t.useMemo)((function() {
-            return F(q, p);
-        }), [ q, p ]);
+            return F(q, m);
+        }), [ q, m ]);
         var k = (0, u.useAnimationTransition)(g, B(B(B({
             ref: N
         }, z), R), {}, {
@@ -470,7 +465,7 @@
                 var t = e.props;
                 return t.panelId === n;
             }));
-            h(e);
+            S(e);
         }), [ n, T ]);
         var _ = (0, t.useCallback)((function(e, n) {
             if (e != null && n != null) {
@@ -493,25 +488,23 @@
      * to Storybook and quickly switching between basic and dropdown examples.  The basic example will eventually
      * show a small square on initial render, vs what we want to be the entire initial panel.
      */
-            P(H({
-                validChildren: T,
-                onMount: _,
-                onUnmount: D,
-                innerClassName: l,
-                innerStyle: c
-            }));
-        }), [ T, _, D, l, c ]);
+            P(T);
+        }), [ T ]);
         
-        return r().createElement(d, C({
+        return r().createElement(p, M({
             className: s,
             "data-test-active-panel-id": n,
             "data-test": "sliding-panels",
             elementRef: a,
             style: y
-        }, m), k((function(e, n) {
+        }, v), k((function(e, n) {
             var t = w[n];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        return t ?  r().createElement(t, {
+            return t ?  r().createElement(H, {
+                innerClassName: l,
+                innerStyle: c,
+                onMount: _,
+                onUnmount: D,
+                panel: t,
                 style: e
             }) : null;
         })));

package/Switch.js

@@ -96,9 +96,9 @@
     // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
     var C = "20px";
     var S = "12px";
-    var x = "4px";
+    var w = "4px";
  // diameter - toggleIndicatorDiameter / 2
-        var w = u()(m()).withConfig({
+        var x = u()(m()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
     })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], k.variables.spacingSmall, k.variables.inputHeight, k.variables.contentColorActive, (function(e) {
@@ -134,14 +134,14 @@
         displayName: "SwitchStyles__StyledCheck",
         componentId: "sc-844ieu-2"
     })([ "", "" ], $);
-    var q = u()(p()).withConfig({
+    var N = u()(p()).withConfig({
         displayName: "SwitchStyles__StyledSome",
         componentId: "sc-844ieu-3"
     })([ "", "" ], $);
-    var E = u().div.withConfig({
+    var q = u().div.withConfig({
         displayName: "SwitchStyles__StyledToggleIndicator",
         componentId: "sc-844ieu-4"
-    })([ "--toggle-indicator-margin:calc( ", " - ", " );background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], x, k.variables.inputBorderWidth, (0, 
+    })([ "--toggle-indicator-margin:calc( ", " - ", " );background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], w, k.variables.inputBorderWidth, (0, 
     k.pick)({
         light: k.variables.black,
         dark: k.variables.white
@@ -161,7 +161,7 @@
         var r = e.$disabled;
         return r && (0, s.css)([ "background-color:", ";" ], k.variables.neutral400);
     }));
-    var _ = (0, s.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, k.variables.interactiveColorBackground, (function(e) {
+    var E = (0, s.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, k.variables.interactiveColorBackground, (function(e) {
         return e.$delay;
     }), C, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.focusShadow, (function(e) {
         var r = e.$selected;
@@ -173,11 +173,11 @@
         var r = e.$selected;
         return r && (0, s.css)([ "background-color:", ";" ], k.variables.neutral100);
     }));
-    var R = u()(y()).withConfig({
+    var _ = u()(y()).withConfig({
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-5"
-    })([ "", "" ], _);
-    var N = u().label.withConfig({
+    })([ "", "" ], E);
+    var R = u().label.withConfig({
         displayName: "SwitchStyles__StyledLabel",
         componentId: "sc-844ieu-6"
     })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], k.mixins.reset("inline-block"), k.variables.lineHeight, (function(e) {
@@ -212,10 +212,10 @@
         }), [ i, o ]);
     };
     var P = function e(r) {
-        var a = r.additionalMessage, i = a === void 0 ? "" : a, o = r.componentName, t = r.propName, l = r.propValue;
-        useEffect((function() {
+        var i = r.additionalMessage, o = i === void 0 ? "" : i, t = r.componentName, l = r.propName, n = r.propValue;
+        (0, a.useEffect)((function() {
             if (false) {}
-        }), [ i, o, t, l ]);
+        }), [ o, t, l, n ]);
     };
     var D = function e(r) {
         var i = r.additionalMessage, o = i === void 0 ? "" : i, t = r.componentName, l = r.deprecatedPropValue, n = r.propName, c = r.propValue;
@@ -285,13 +285,13 @@
         var g = u === true ? "disabled" : undefined;
         var m = (0, l.useAnimationToggle)();
         var h = m === "on" ? "200ms" : undefined;
-        var y =  i().createElement(E, {
+        var y =  i().createElement(q, {
             $delay: h,
             $disabled: !!g,
             $selected: p
         });
         
-        return i().createElement(R, {
+        return i().createElement(_, {
             role: "switch",
             "aria-checked": a,
             "aria-describedby": s,
@@ -315,7 +315,7 @@
    */        var h = "4 4 16 16";
         var y =  i().createElement(i().Fragment, null, g === true &&  i().createElement(I, {
             viewBox: h
-        }), g === "some" &&  i().createElement(q, {
+        }), g === "some" &&  i().createElement(N, {
             viewBox: h
         }));
         var k = s === true ? "disabled" : undefined;
@@ -341,7 +341,7 @@
     /**
  * `Switch` is a basic form control with an on/off state.
  */    function z(e) {
-        var r = e.appearance, o = r === void 0 ? "checkbox" : r, t = e.children, l = e.describedBy, n = e.disabled, s = e.elementRef, u = e.error, b = e.id, v = e.inline, f = e.labelledBy, p = e.onClick, g = e.required, m = e.selected, h = e.selectedLabel, y = e.someSelectedLabel, k = e.role, C = e.tabIndex, S = e.toggleRef, x = e.unselectedLabel, B = e.value, O = H(e, [ "appearance", "children", "describedBy", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "role", "tabIndex", "toggleRef", "unselectedLabel", "value" ]);
+        var r = e.appearance, o = r === void 0 ? "checkbox" : r, t = e.children, l = e.describedBy, n = e.disabled, s = e.elementRef, u = e.error, b = e.id, v = e.inline, f = e.labelledBy, p = e.onClick, g = e.required, m = e.selected, h = e.selectedLabel, y = e.someSelectedLabel, k = e.role, C = e.tabIndex, S = e.toggleRef, w = e.unselectedLabel, B = e.value, O = H(e, [ "appearance", "children", "describedBy", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "role", "tabIndex", "toggleRef", "unselectedLabel", "value" ]);
         // @docs-props-type SwitchPropsBase
                 D({
             componentName: "Switch",
@@ -349,6 +349,21 @@
             propName: "appearance",
             propValue: o
         });
+        P({
+            componentName: "Switch",
+            propName: "selectedLabel",
+            propValue: h
+        });
+        P({
+            componentName: "Switch",
+            propName: "someSelectedLabel",
+            propValue: y
+        });
+        P({
+            componentName: "Switch",
+            propName: "unselectedLabel",
+            propValue: w
+        });
         /* If has internal label defined with children, must have an id and must use generated labelId.
    * Otherwise, use customer defined id and external label.
    */        var $ = t && b == null ? (0, d.createDOMID)("clickable") : b;
@@ -357,28 +372,28 @@
             if (false) {}
             if (false) {}
         }), [ m, o, u ]);
-        var q = (0, a.useCallback)((function(e) {
+        var N = (0, a.useCallback)((function(e) {
             p === null || p === void 0 ? void 0 : p(e, {
                 value: B,
                 // @ts-expect-error - safe due to individual prop interfaces
                 selected: m
             });
         }), [ p, B, m ]);
-        var E = (0, a.useCallback)((function(e) {
+        var q = (0, a.useCallback)((function(e) {
             L(S, e);
         }), [ S ]);
-        var _ = m === "some" ? "mixed" : m;
-        var R = {
+        var E = m === "some" ? "mixed" : m;
+        var _ = {
             true: h,
-            false: x,
+            false: w,
             some: y
         };
         var T = {
             id: $,
-            onClick: n ? undefined : q,
-            elementRef: E,
+            onClick: n ? undefined : N,
+            elementRef: q,
             ariaLabelledBy: I,
-            ariaChecked: _,
+            ariaChecked: E,
             ariaInvalid: u ? true : undefined,
             ariaRequired: g,
             dataTest: "toggle",
@@ -387,9 +402,9 @@
             role: k,
             tabIndex: C
         };
-        var j = !!h || !!y || !!x;
+        var j = !!h || !!y || !!w;
         
-        return i().createElement(w, A({
+        return i().createElement(x, A({
             flex: true,
             inline: v,
             "data-test": "switch",
@@ -407,7 +422,7 @@
             error: u || false,
             disabled: n || false,
             selected: m
-        }, T)), j &&  i().createElement(c(), null, R["".concat(m)]), t &&  i().createElement(N, {
+        }, T)), j &&  i().createElement(c(), null, _["".concat(m)]), t &&  i().createElement(R, {
             $disabled: n || false,
             "data-test": "label",
             id: I,