@splunk/react-ui 5.7.0 → 5.8.0

package/SidePanel.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -61,220 +61,380 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ L
+        default: () => /* reexport */ Q
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
+    const n = require("react");
+    var r =  e.n(n);
+    // CONCATENATED MODULE: external "lodash/defer"
+    const o = require("lodash/defer");
     var i =  e.n(o);
+    // CONCATENATED MODULE: external "prop-types"
+    const u = require("prop-types");
+    var a =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
-    const a = require("@splunk/react-ui/ModalLayer");
-    var l =  e.n(a);
+    const l = require("@splunk/react-ui/ModalLayer");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const u = require("@splunk/react-ui/usePrevious");
-    var s =  e.n(u);
+    const f = require("@splunk/react-ui/usePrevious");
+    var s =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var f =  e.n(c);
-    // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
-    const y = require("@splunk/react-ui/TransitionOpen");
+    const y = require("styled-components");
     var d =  e.n(y);
+    // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
+    const v = require("@splunk/react-ui/TransitionOpen");
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const p = require("@splunk/themes");
+    const b = 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:", ";" ], p.mixins.reset("flex"), p.variables.overlayShadow, p.variables.backgroundColorSidebar, p.variables.zindexModal);
-    var b = f()(d()).withConfig({
+    var m = {
+        inline: "auto",
+        container: "100%",
+        page: "100vw"
+    };
+    var g = {
+        inline: "auto",
+        container: "100%",
+        page: "100vh"
+    };
+    var S = {
+        inline: "static",
+        container: "absolute",
+        page: "fixed"
+    };
+    var h = {
+        inline: "auto",
+        container: b.variables.zindexLayer,
+        page: b.variables.zindexModal
+    };
+    var O = (0, y.css)([ "", " position:", ";flex-direction:column;", " background-color:", ";z-index:", ";" ], b.mixins.reset("flex"), (function(e) {
+        var t = e.$dockLayout;
+        return S[t];
+    }), (function(e) {
+        var t = e.$dockLayout;
+        return t !== "inline" && (0, y.css)([ "box-shadow:", ";" ], b.variables.overlayShadow);
+    }), b.variables.backgroundColorSidebar, (function(e) {
+        var t = e.$dockLayout;
+        return h[t];
+    }));
+    var P = d()(p()).withConfig({
         displayName: "SidePanelStyles__StyledLeftPanelTransitionOpen",
         componentId: "mtbcuz-0"
-    })([ "", ";top:0;left:0;height:100vh;" ], m);
-    var v = f()(d()).withConfig({
+    })([ "", ";top:0;left:0;height:", ";" ], O, (function(e) {
+        var t = e.$dockLayout;
+        return g[t];
+    }));
+    var j = d()(p()).withConfig({
         displayName: "SidePanelStyles__StyledRightPanelTransitionOpen",
         componentId: "mtbcuz-1"
-    })([ "", ";right:0;top:0;height:100vh;" ], m);
-    var h = f()(d()).withConfig({
+    })([ "", ";right:0;top:0;height:", ";" ], O, (function(e) {
+        var t = e.$dockLayout;
+        return g[t];
+    }));
+    var k = d()(p()).withConfig({
         displayName: "SidePanelStyles__StyledTopPanelTransitionOpen",
         componentId: "mtbcuz-2"
-    })([ "", ";top:0;left:0;width:100vw;" ], m);
-    var g = f()(d()).withConfig({
+    })([ "", ";top:0;left:0;width:", ";" ], O, (function(e) {
+        var t = e.$dockLayout;
+        return m[t];
+    }));
+    var w = d()(p()).withConfig({
         displayName: "SidePanelStyles__StyledBottomPanelTransitionOpen",
         componentId: "mtbcuz-3"
-    })([ "", ";left:0;bottom:0;width:100vw;" ], m);
+    })([ "", ";left:0;bottom:0;width:", ";" ], O, (function(e) {
+        var t = e.$dockLayout;
+        return m[t];
+    }));
+    // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
+    const C = require("@splunk/ui-utils/focus");
+    // CONCATENATED MODULE: ./src/utils/resolveInitialFocusTarget.ts
+    function T(e) {
+        "@babel/helpers - typeof";
+        return T = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, T(e)
+        /**
+ * Resolves the initial focus target based on the initialFocus prop value.
+ *
+ * @param initialFocus - The initialFocus prop value ('first', 'container', HTMLElement, or React.Component with focus method)
+ * @param containerEl - The container element to use for 'first' and 'container' options
+ * @returns The element or component to focus, or null if none found
+ */;
+    }
+    function L(e, t) {
+        if (e === "first" && t) {
+            var n;
+            return (n = (0, C.getSortedTabbableElements)(t)[0]) !== null && n !== void 0 ? n : null;
+        }
+        if (e === "container") {
+            return t;
+        }
+        if (T(e) === "object") {
+            return e;
+        }
+        return null;
+    }
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function E(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                e(t);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = t;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
     // CONCATENATED MODULE: ./src/SidePanel/SidePanel.tsx
-    function O(e) {
+    function A(e) {
         "@babel/helpers - typeof";
-        return O = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return A = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, O(e);
+        }, A(e);
     }
-    function S() {
-        return S = Object.assign ? Object.assign.bind() : function(e) {
+    function F() {
+        return F = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                var n = arguments[t];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
-        }, S.apply(null, arguments);
+        }, F.apply(null, arguments);
     }
-    function w(e, t) {
-        var r = Object.keys(e);
+    function _(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            t && (r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            }))), n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
-    function P(e) {
+    function M(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? w(Object(r), !0).forEach((function(t) {
-                j(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : w(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            var n = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? _(Object(n), !0).forEach((function(t) {
+                N(e, t, n[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : _(Object(n)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
         return e;
     }
-    function j(e, t, r) {
-        return (t = C(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
+    function N(e, t, n) {
+        return (t = R(t)) in e ? Object.defineProperty(e, t, {
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = r, e;
+        }) : e[t] = n, e;
     }
-    function C(e) {
-        var t = k(e, "string");
-        return "symbol" == O(t) ? t : t + "";
+    function R(e) {
+        var t = q(e, "string");
+        return "symbol" == A(t) ? t : t + "";
     }
-    function k(e, t) {
-        if ("object" != O(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != O(n)) return n;
+    function q(e, t) {
+        if ("object" != A(e) || !e) return e;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var r = n.call(e, t || "default");
+            if ("object" != A(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function A(e, t) {
-        return M(e) || E(e, t) || T(e, t) || N();
+    function x(e, t) {
+        return B(e) || D(e, t) || $(e, t) || I();
     }
-    function N() {
+    function I() {
         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 T(e, t) {
+    function $(e, t) {
         if (e) {
-            if ("string" == typeof e) return x(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) ? x(e, t) : void 0;
+            if ("string" == typeof e) return z(e, t);
+            var n = {}.toString.call(e).slice(8, -1);
+            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) ? z(e, t) : void 0;
         }
     }
-    function x(e, t) {
+    function z(e, t) {
         (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
         }
-        return n;
+        return r;
     }
-    function E(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;
+    function D(e, t) {
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, o, i, u, a = [], l = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
-                    u = !1;
-                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                if (i = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
+                    l = !1;
+                } else for (;!(l = (r = i.call(n)).done) && (a.push(r.value), a.length !== t); l = !0) {
                 }
             } catch (e) {
-                s = !0, o = e;
+                c = !0, o = e;
             } finally {
                 try {
-                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != n["return"] && (u = n["return"](), Object(u) !== u)) return;
                 } finally {
-                    if (s) throw o;
+                    if (c) throw o;
                 }
             }
-            return l;
+            return a;
         }
     }
-    function M(e) {
+    function B(e) {
         if (Array.isArray(e)) return e;
     }
-    function _(e, t) {
+    function U(e, t) {
         if (null == e) return {};
-        var r, n, o = q(e, t);
+        var n, r, o = Y(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                n = i[r], -1 === t.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
             }
         }
         return o;
     }
-    function q(e, t) {
+    function Y(e, t) {
         if (null == e) return {};
-        var r = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== t.indexOf(n)) continue;
-                r[n] = e[n];
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (-1 !== t.indexOf(r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
-    /** @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,
-        onRequestClose: i().func,
-        open: i().bool,
-        outerClassName: i().string,
-        outerStyle: i().object,
-        useLayerForClickAway: i().bool
+    /** @public */    var G = {
+        children: a().node,
+        dockLayout: a().oneOf([ "page", "container", "inline" ]),
+        dockPosition: a().oneOf([ "top", "bottom", "left", "right" ]),
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        initialFocus: a().oneOfType([ a().object, a().oneOf([ "first", "container" ]) ]),
+        innerClassName: a().string,
+        innerStyle: a().object,
+        onAnimationEnd: a().func,
+        onRequestClose: a().func,
+        open: a().bool,
+        outerClassName: a().string,
+        outerStyle: a().object,
+        returnFocus: a().oneOfType([ a().func, a().object ]),
+        useLayerForClickAway: a().bool
     };
-    var R = {
+    var H = {
         left: "slideFromLeft",
         right: "slideFromRight",
         top: "slideFromTop",
         bottom: "slideFromBottom"
     };
-    var F = {
-        left: b,
-        right: v,
-        top: h,
-        bottom: g
+    var J = {
+        left: P,
+        right: j,
+        top: k,
+        bottom: w
     };
-    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 = _(e, [ "children", "dockPosition", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "onRequestClose", "open", "outerClassName", "outerStyle", "useLayerForClickAway" ]);
+    function K(e) {
+        var t = e.children, o = e.dockLayout, u = o === void 0 ? "page" : o, a = e.dockPosition, l = a === void 0 ? "right" : a, f = e.elementRef, y = e.initialFocus, d = e.innerClassName, v = e.innerStyle, p = e.onAnimationEnd, b = e.onRequestClose, m = e.open, g = e.outerClassName, S = e.outerStyle, h = e.returnFocus, O = e.useLayerForClickAway, P = O === void 0 ? true : O, j = U(e, [ "children", "dockLayout", "dockPosition", "elementRef", "initialFocus", "innerClassName", "innerStyle", "onAnimationEnd", "onRequestClose", "open", "outerClassName", "outerStyle", "returnFocus", "useLayerForClickAway" ]);
         // @docs-props-type SidePanelPropsBase
-                var g = (0, r.useState)(false), O = A(g, 2), w = O[0], j = O[1];
-        var C = s()(d);
-        (0, r.useEffect)((function() {
+                var k = (0, n.useRef)(null);
+        var w = (0, n.useRef)(undefined);
+        // Use symbol to distinguish "never applied" from "applied with undefined/null"
+                var C = (0, n.useRef)(Symbol("FOCUS_NOT_YET_APPLIED")).current;
+        var T = (0, n.useRef)(C);
+        var A = (0, n.useState)(false), _ = x(A, 2), N = _[0], R = _[1];
+        var q = s()(m);
+        (0, n.useEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
-            if (C != null && d !== C) {
-                j(true);
+            if (q != null && m !== q) {
+                R(true);
+            }
+        }), [ m, q ]);
+        // Focus handling strategy: consistent across all dockLayouts
+        // - If initialFocus is passed, use it
+        // - Else use 'first' (first focusable element)
+        // - Else use container (fallback when no focusable elements)
+                var I = (0, n.useCallback)((function() {
+            // Clear pending focus if initialFocus target changed
+            var e = y !== null && y !== void 0 ? y : null;
+            if (T.current !== e) {
+                clearTimeout(w.current);
+            }
+            // PANEL OPENING: Apply initial focus if needed
+                        if (m) {
+                w.current = i()((function() {
+                    var e = y !== null && y !== void 0 ? y : "first";
+                    // Only apply focus if the target changed from last time
+                                        if (T.current !== (e !== null && e !== void 0 ? e : null)) {
+                        var t, n;
+                        var r = L(e, k.current);
+                        // Fall back to container if target has no focus method
+                                                if (!((t = r) === null || t === void 0 ? void 0 : t.focus)) {
+                            r = k.current;
+                        }
+                        // TODO: bug fix https://splunk.atlassian.net/browse/SUI-8621
+                                                (n = r) === null || n === void 0 ? void 0 : n.focus({
+                            preventScroll: true
+                        });
+                        T.current = e !== null && e !== void 0 ? e : null;
+                    }
+                }));
             }
-        }), [ d, C ]);
-        var k = (0, r.useMemo)((function() {
-            if (v) {
+        }), [ m, y ]);
+        var $ = (0, n.useCallback)((function() {
+            // PANEL CLOSING: Reset state and handle return focus
+            if (!m) {
+                // Reset focus tracking state
+                T.current = C;
+                clearTimeout(w.current);
+                // Return focus to invoking element if panel was previously open
+                                if (q && h) {
+                    if (typeof h === "function") {
+                        h();
+                    } else {
+                        i()((function() {
+                            var e, t;
+                            (e = h.current) === null || e === void 0 ? void 0 : (t = e.focus) === null || t === void 0 ? void 0 : t.call(e);
+                        }));
+                    }
+                }
+            }
+        }), [ m, q, h, C ]);
+        // Handle return focus when panel closes, runs on change of handleReturnFocus deps
+                (0, n.useEffect)((function() {
+            $();
+        }), [ $ ]);
+        // Handle initial focus when panel opens - runs on change of handleInitialFocus deps
+                (0, n.useEffect)((function() {
+            I();
+        }), [ I ]);
+        var z = (0, n.useMemo)((function() {
+            if (P) {
                 return "interactive";
             }
             return "hidden";
-        }), [ v ]);
-        var N = (0, r.useMemo)((function() {
-            if (i === "left" || i === "right") {
+        }), [ P ]);
+        var D = (0, n.useMemo)((function() {
+            if (l === "left" || l === "right") {
                 return {
                     height: "100%"
                 };
@@ -282,47 +442,66 @@
             return {
                 width: "100%"
             };
-        }), [ i ]);
-        var T = (0, r.useMemo)((function() {
-            return P(P({}, N), c);
-        }), [ N, c ]);
-        var x = (0, r.useCallback)((function() {
-            j(false);
-            f === null || f === void 0 ? void 0 : f();
-        }), [ f ]);
-        var E = (0, r.useMemo)((function() {
-            return F[i];
-        }), [ i ]);
-        var M = (0, r.useCallback)((function() {
+        }), [ l ]);
+        var B = (0, n.useMemo)((function() {
+            return M(M({}, D), v);
+        }), [ D, v ]);
+        var Y = (0, n.useCallback)((function() {
+            R(false);
+            p === null || p === void 0 ? void 0 : p();
+        }), [ p ]);
+        var G = (0, n.useCallback)((function(e) {
+            E(k, e);
+            E(f, e);
+        }), [ k, f ]);
+        var K = (0, n.useCallback)((function(e) {
+            T.current = null;
+            b === null || b === void 0 ? void 0 : b(e);
+        }), [ b ]);
+        var Q = (0, n.useMemo)((function() {
+            return J[l];
+        }), [ l ]);
+        var V = (0, n.useMemo)((function() {
+            return {
+                retainFocus: true,
+                role: "dialog",
+                tabIndex: -1
+            };
+        }), []);
+        var W = (0, n.useMemo)((function() {
             
-            return n().createElement(E, S({
+            return r().createElement(Q, F({
+                $dockLayout: u,
                 animateOnMount: true,
-                animation: R[i],
+                animation: H[l],
                 "data-test": "side-panel",
-                elementRef: a,
-                innerClassName: u,
-                innerStyle: T,
-                onAnimationEnd: x,
-                open: d,
-                outerClassName: p,
-                outerStyle: m,
-                retainFocus: true,
-                role: "dialog",
-                tabIndex: -1,
-                takeFocus: true
-            }, h), t);
-        }), [ t, i, a, T, x, u, d, p, m, E, h ]);
+                elementRef: G,
+                innerClassName: d,
+                innerStyle: B,
+                onAnimationEnd: Y,
+                open: m,
+                outerClassName: g,
+                outerStyle: S
+            }, u === "page" && V, j), t);
+        }), [ t, u, l, B, Y, G, d, m, g, S, V, Q, j ]);
+        var X = (0, n.useCallback)((function() {
+            return W;
+        }), [ W ]);
+        // If dockLayout is container or inline we want to return without the ModalLayer below.
+                if (u !== "page") {
+            return W;
+        }
         
-        return n().createElement(l(), {
-            childrenInAnimation: w,
-            onRequestClose: y,
-            open: d,
-            renderModal: M,
-            scrim: k
+        return r().createElement(c(), {
+            childrenInAnimation: N,
+            onRequestClose: K,
+            open: m,
+            renderModal: X,
+            scrim: z
         });
     }
-    z.propTypes = I;
-    /* harmony default export */    const L = z;
+    K.propTypes = G;
+    /* harmony default export */    const Q = K;
     // CONCATENATED MODULE: ./src/SidePanel/index.ts
     module.exports = t;
     /******/})();