@splunk/react-ui 5.0.0-beta.2 → 5.0.0-beta.4

package/SidePanel.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ R
+        default: () => /* reexport */ L
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -79,29 +79,25 @@
     const c = require("styled-components");
     var f =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
-    const p = require("@splunk/react-ui/TransitionOpen");
-    var y =  e.n(p);
+    const y = require("@splunk/react-ui/TransitionOpen");
+    var d =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
+    const p = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SidePanel/SidePanelStyles.ts
-    var m = (0, c.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], d.mixins.reset("flex"), (0, 
-    d.pick)({
-        enterprise: "0 0 12px rgba(0, 0, 0, 0.3)",
-        prisma: d.variables.overlayShadow
-    }), d.variables.backgroundColorSidebar, d.variables.zindexModal);
-    var b = f()(y()).withConfig({
+    var m = (0, c.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], p.mixins.reset("flex"), p.variables.overlayShadow, p.variables.backgroundColorSidebar, p.variables.zindexModal);
+    var b = f()(d()).withConfig({
         displayName: "SidePanelStyles__StyledLeftPanelTransitionOpen",
         componentId: "mtbcuz-0"
     })([ "", ";top:0;left:0;height:100vh;" ], m);
-    var v = f()(y()).withConfig({
+    var v = f()(d()).withConfig({
         displayName: "SidePanelStyles__StyledRightPanelTransitionOpen",
         componentId: "mtbcuz-1"
     })([ "", ";right:0;top:0;height:100vh;" ], m);
-    var h = f()(y()).withConfig({
+    var h = f()(d()).withConfig({
         displayName: "SidePanelStyles__StyledTopPanelTransitionOpen",
         componentId: "mtbcuz-2"
     })([ "", ";top:0;left:0;width:100vw;" ], m);
-    var g = f()(y()).withConfig({
+    var g = f()(d()).withConfig({
         displayName: "SidePanelStyles__StyledBottomPanelTransitionOpen",
         componentId: "mtbcuz-3"
     })([ "", ";left:0;bottom:0;width:100vw;" ], m);
@@ -169,26 +165,26 @@
         return ("string" === t ? String : Number)(e);
     }
     function A(e, t) {
-        return _(e) || T(e, t) || E(e, t) || N();
+        return _(e) || M(e, t) || T(e, t) || N();
     }
     function N() {
         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 E(e, t) {
+    function T(e, t) {
         if (e) {
-            if ("string" == typeof e) return M(e, t);
+            if ("string" == typeof e) return E(e, t);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? M(e, t) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? E(e, t) : void 0;
         }
     }
-    function M(e, t) {
+    function E(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var r = 0, n = Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function T(e, t) {
+    function M(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, i, a, l = [], u = !0, s = !1;
@@ -238,6 +234,7 @@
     /** @public */    var I = {
         children: i().node,
         dockPosition: i().oneOf([ "top", "bottom", "left", "right" ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
         innerClassName: i().string,
         innerStyle: i().object,
         onAnimationEnd: i().func,
@@ -247,36 +244,36 @@
         outerStyle: i().object,
         useLayerForClickAway: i().bool
     };
-    var F = {
+    var R = {
         left: "slideFromLeft",
         right: "slideFromRight",
         top: "slideFromTop",
         bottom: "slideFromBottom"
     };
-    var z = {
+    var F = {
         left: b,
         right: v,
         top: h,
         bottom: g
     };
-    function L(e) {
-        var t = e.children, o = e.dockPosition, i = o === void 0 ? "right" : o, a = e.innerClassName, u = e.innerStyle, c = e.onAnimationEnd, f = e.onRequestClose, p = e.open, y = e.outerClassName, d = e.outerStyle, m = e.useLayerForClickAway, b = m === void 0 ? true : m, v = q(e, [ "children", "dockPosition", "innerClassName", "innerStyle", "onAnimationEnd", "onRequestClose", "open", "outerClassName", "outerStyle", "useLayerForClickAway" ]);
+    function z(e) {
+        var t = e.children, o = e.dockPosition, i = o === void 0 ? "right" : o, a = e.elementRef, u = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, y = e.onRequestClose, d = e.open, p = e.outerClassName, m = e.outerStyle, b = e.useLayerForClickAway, v = b === void 0 ? true : b, h = q(e, [ "children", "dockPosition", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "onRequestClose", "open", "outerClassName", "outerStyle", "useLayerForClickAway" ]);
         // @docs-props-type SidePanelPropsBase
-                var h = (0, r.useState)(false), g = A(h, 2), S = g[0], w = g[1];
-        var j = s()(p);
+                var g = (0, r.useState)(false), S = A(g, 2), w = S[0], j = S[1];
+        var C = s()(d);
         (0, r.useEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
-            if (j != null && p !== j) {
-                w(true);
+            if (C != null && d !== C) {
+                j(true);
             }
-        }), [ p, j ]);
-        var C = (0, r.useMemo)((function() {
-            if (b) {
+        }), [ d, C ]);
+        var k = (0, r.useMemo)((function() {
+            if (v) {
                 return "interactive";
             }
             return "hidden";
-        }), [ b ]);
-        var k = (0, r.useMemo)((function() {
+        }), [ v ]);
+        var N = (0, r.useMemo)((function() {
             if (i === "left" || i === "right") {
                 return {
                     height: "100%"
@@ -286,45 +283,46 @@
                 width: "100%"
             };
         }), [ i ]);
-        var N = (0, r.useMemo)((function() {
-            return P(P({}, k), u);
-        }), [ k, u ]);
+        var T = (0, r.useMemo)((function() {
+            return P(P({}, N), c);
+        }), [ N, c ]);
         var E = (0, r.useCallback)((function() {
-            w(false);
-            c === null || c === void 0 ? void 0 : c();
-        }), [ c ]);
+            j(false);
+            f === null || f === void 0 ? void 0 : f();
+        }), [ f ]);
         var M = (0, r.useMemo)((function() {
-            return z[i];
+            return F[i];
         }), [ i ]);
-        var T = (0, r.useCallback)((function() {
+        var _ = (0, r.useCallback)((function() {
             
             return n().createElement(M, O({
                 animateOnMount: true,
-                animation: F[i],
+                animation: R[i],
                 "data-test": "side-panel",
-                innerClassName: a,
-                innerStyle: N,
+                elementRef: a,
+                innerClassName: u,
+                innerStyle: T,
                 onAnimationEnd: E,
-                open: p,
-                outerClassName: y,
-                outerStyle: d,
+                open: d,
+                outerClassName: p,
+                outerStyle: m,
                 retainFocus: true,
                 role: "dialog",
                 tabIndex: -1,
                 takeFocus: true
-            }, v), t);
-        }), [ t, i, N, E, a, p, y, d, M, v ]);
+            }, h), t);
+        }), [ t, i, a, T, E, u, d, p, m, M, h ]);
         
         return n().createElement(l(), {
-            childrenInAnimation: S,
-            onRequestClose: f,
-            open: p,
-            renderModal: T,
-            scrim: C
+            childrenInAnimation: w,
+            onRequestClose: y,
+            open: d,
+            renderModal: _,
+            scrim: k
         });
     }
-    L.propTypes = I;
-    /* harmony default export */    const R = L;
+    z.propTypes = I;
+    /* harmony default export */    const L = z;
     // CONCATENATED MODULE: ./src/SidePanel/index.ts
     module.exports = t;
     /******/})();