@splunk/react-ui 5.9.0 → 5.9.1

package/SlidingPanels.js

@@ -61,36 +61,39 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Panel: () => /* reexport */ A,
-        default: () => /* reexport */ K
+        Panel: () => /* reexport */ C,
+        default: () => /* reexport */ ee
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var r =  e.n(t);
     // CONCATENATED MODULE: external "@react-spring/web"
     const o = require("@react-spring/web");
+    // CONCATENATED MODULE: external "lodash/defer"
+    const i = require("lodash/defer");
+    var u =  e.n(i);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var a =  e.n(i);
+    const a = require("prop-types");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
-    const u = require("@splunk/react-ui/Animation");
+    const c = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var c =  e.n(l);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const f = require("@splunk/react-ui/Box");
+    const f = require("styled-components");
     var s =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const y = require("@splunk/react-ui/Box");
+    var v =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const y = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanelsStyles.ts
-    var p = c()(s()).withConfig({
+    var p = s()(v()).withConfig({
         displayName: "SlidingPanelsStyles__StyledBox",
         componentId: "su6isq-0"
     })([ "overflow:hidden;position:relative;" ]);
-    var d = c()(o.animated.div).withConfig({
+    var m = s()(o.animated.div).withConfig({
         displayName: "SlidingPanelsStyles__StyledAnimatedDiv",
         componentId: "su6isq-1"
-    })([ "", ";", ";" ], y.mixins.reset("block"), y.mixins.clearfix());
+    })([ "", ";", ";" ], d.mixins.reset("block"), d.mixins.clearfix());
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -98,7 +101,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function v(e, n) {
+    function b(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -111,8 +114,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/SlidingPanels/Panel.tsx
-    function m() {
-        return m = Object.assign ? Object.assign.bind() : function(e) {
+    function O() {
+        return O = 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,56 +123,56 @@
                 }
             }
             return e;
-        }, m.apply(null, arguments);
+        }, O.apply(null, arguments);
     }
-    function b(e, n) {
-        return j(e) || h(e, n) || g(e, n) || O();
+    function g(e, n) {
+        return P(e) || w(e, n) || h(e, n) || S();
     }
-    function O() {
+    function S() {
         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) {
+    function h(e, n) {
         if (e) {
-            if ("string" == typeof e) return S(e, n);
+            if ("string" == typeof e) return j(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) ? S(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) ? j(e, n) : void 0;
         }
     }
-    function S(e, n) {
+    function j(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 h(e, n) {
+    function w(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;
+            var r, o, i, u, a = [], l = !0, c = !1;
             try {
                 if (i = (t = t.call(e)).next, 0 === n) {
                     if (Object(t) !== t) return;
                     l = !1;
-                } else for (;!(l = (r = i.call(t)).done) && (u.push(r.value), u.length !== n); l = !0) {
+                } else for (;!(l = (r = i.call(t)).done) && (a.push(r.value), a.length !== n); l = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                    if (!l && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
                 } finally {
                     if (c) throw o;
                 }
             }
-            return u;
+            return a;
         }
     }
-    function j(e) {
+    function P(e) {
         if (Array.isArray(e)) return e;
     }
-    function w(e, n) {
+    function E(e, n) {
         if (null == e) return {};
-        var t, r, o = P(e, n);
+        var t, r, o = x(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -178,7 +181,7 @@
         }
         return o;
     }
-    function P(e, n) {
+    function x(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -189,52 +192,83 @@
         }
         return t;
     }
-    var x = {
-        children: a().node,
-        elementRef: a().oneOfType([ a().func, a().object ]),
+    var A = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
         /** @private */
-        onMount: a().func,
+        onMount: l().func,
         /** @private */
-        onUnmount: a().func,
-        panelId: a().oneOfType([ a().string, a().number ]).isRequired
+        onUnmount: l().func,
+        panelId: l().oneOfType([ l().string, l().number ]).isRequired
     };
     /**
  * Container for arbitrary content.
- */    function E(e) {
-        var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = w(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
+ */    function I(e) {
+        var n = e.children, o = e.elementRef, i = e.onMount, u = e.onUnmount, a = e.panelId, l = E(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 p = (0, t.useCallback)((function(e) {
+                var c = (0, t.useState)(null), f = g(c, 2), s = f[0], y = f[1];
+        var v = (0, t.useCallback)((function(e) {
             y(e);
-            v(o, e);
+            b(o, e);
         }), [ o ]);
         (0, t.useEffect)((function() {
-            i === null || i === void 0 ? void 0 : i(s, u);
+            i === null || i === void 0 ? void 0 : i(s, a);
             return function() {
-                a === null || a === void 0 ? void 0 : a(u);
+                u === null || u === void 0 ? void 0 : u(a);
             };
-        }), [ i, a, s, u ]);
+        }), [ i, u, s, a ]);
         
-        return r().createElement(d, m({
+        return r().createElement(m, O({
             "data-test": "panel",
-            "data-test-panel-id": u
+            "data-test-panel-id": a
         }, l, {
-            ref: p
+            ref: v
         }), n);
     }
-    E.propTypes = x;
-    /* harmony default export */    const A = E;
+    I.propTypes = A;
+    /* harmony default export */    const C = I;
+    // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
+    const M = require("@splunk/ui-utils/focus");
+    // CONCATENATED MODULE: ./src/utils/resolveInitialFocusTarget.ts
+    function N(e) {
+        "@babel/helpers - typeof";
+        return N = "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;
+        }, N(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 T(e, n) {
+        if (e === "first" && n) {
+            var t;
+            return (t = (0, M.getSortedTabbableElements)(n)[0]) !== null && t !== void 0 ? t : null;
+        }
+        if (e === "container") {
+            return n;
+        }
+        if (N(e) === "object") {
+            return e;
+        }
+        return null;
+    }
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanels.tsx
-    function I(e) {
+    function q(e) {
         "@babel/helpers - typeof";
-        return I = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return q = "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;
-        }, I(e);
+        }, q(e);
     }
-    function M() {
-        return M = Object.assign ? Object.assign.bind() : function(e) {
+    function R() {
+        return R = 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,56 +276,56 @@
                 }
             }
             return e;
-        }, M.apply(null, arguments);
+        }, R.apply(null, arguments);
     }
-    function C(e, n) {
-        return k(e) || R(e, n) || T(e, n) || N();
+    function k(e, n) {
+        return L(e) || B(e, n) || _(e, n) || U();
     }
-    function N() {
+    function U() {
         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, n) {
+    function _(e, n) {
         if (e) {
-            if ("string" == typeof e) return q(e, n);
+            if ("string" == typeof e) return D(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) ? q(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) ? D(e, n) : void 0;
         }
     }
-    function q(e, n) {
+    function D(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 R(e, n) {
+    function B(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;
+            var r, o, i, u, a = [], l = !0, c = !1;
             try {
                 if (i = (t = t.call(e)).next, 0 === n) {
                     if (Object(t) !== t) return;
                     l = !1;
-                } else for (;!(l = (r = i.call(t)).done) && (u.push(r.value), u.length !== n); l = !0) {
+                } else for (;!(l = (r = i.call(t)).done) && (a.push(r.value), a.length !== n); l = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                    if (!l && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
                 } finally {
                     if (c) throw o;
                 }
             }
-            return u;
+            return a;
         }
     }
-    function k(e) {
+    function L(e) {
         if (Array.isArray(e)) return e;
     }
-    function U(e, n) {
+    function V(e, n) {
         if (null == e) return {};
-        var t, r, o = _(e, n);
+        var t, r, o = $(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -300,7 +334,7 @@
         }
         return o;
     }
-    function _(e, n) {
+    function $(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -311,7 +345,7 @@
         }
         return t;
     }
-    function D(e, n) {
+    function W(e, n) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -321,52 +355,52 @@
         }
         return t;
     }
-    function B(e) {
+    function z(e) {
         for (var n = 1; n < arguments.length; n++) {
             var t = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? D(Object(t), !0).forEach((function(n) {
-                V(e, n, t[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : D(Object(t)).forEach((function(n) {
+            n % 2 ? W(Object(t), !0).forEach((function(n) {
+                F(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : W(Object(t)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
             }));
         }
         return e;
     }
-    function V(e, n, t) {
-        return (n = $(n)) in e ? Object.defineProperty(e, n, {
+    function F(e, n, t) {
+        return (n = G(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function $(e) {
-        var n = L(e, "string");
-        return "symbol" == I(n) ? n : n + "";
+    function G(e) {
+        var n = H(e, "string");
+        return "symbol" == q(n) ? n : n + "";
     }
-    function L(e, n) {
-        if ("object" != I(e) || !e) return e;
+    function H(e, n) {
+        if ("object" != q(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != I(r)) return r;
+            if ("object" != q(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
     // can't use PanelId as key type, because an index signature parameter type must be 'string', 'number', 'symbol', or a template literal type.
-        var W = {
-        activePanelId: a().oneOfType([ a().string, a().number ]).isRequired,
-        children: a().node,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        innerClassName: a().string,
-        innerStyle: a().object,
-        onAnimationEnd: a().func,
-        outerClassName: a().string,
-        outerStyle: a().object,
-        transition: a().oneOf([ "forward", "backward" ])
+        var J = {
+        activePanelId: l().oneOfType([ l().string, l().number ]).isRequired,
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        innerClassName: l().string,
+        innerStyle: l().object,
+        onAnimationEnd: l().func,
+        outerClassName: l().string,
+        outerStyle: l().object,
+        transition: l().oneOf([ "forward", "backward" ])
     };
-    var z = {
+    var K = {
         enter: {
             x: "0px"
         },
@@ -374,11 +408,11 @@
             x: "0px"
         }
     };
-    var F = function e(n, t) {
+    var Q = function e(n, t) {
         var r = "".concat(n, "px");
         var o = "".concat(n * -1, "px");
         var i = t === "forward" ? r : o;
-        var a = t === "forward" ? o : r;
+        var u = t === "forward" ? o : r;
         return {
             from: {
                 x: i
@@ -390,11 +424,11 @@
      */
             leave: {
                 position: "absolute",
-                x: a
+                x: u
             }
         };
     };
-    var G = function e(n) {
+    var X = function e(n) {
         return Object.values(n).reduce((function(e, n) {
             if ((n === null || n === void 0 ? void 0 : n.tagName) === "DIV") {
                 return Math.max(e, n.clientWidth);
@@ -404,32 +438,34 @@
     };
     /* 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 */    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;
+   apply styles coming from the transitions call that is rendering this component */    var Y =  r().memo((function(e) {
+        var n = e.innerClassName, o = e.innerStyle, i = e.onMount, u = e.onUnmount, a = e.panel, l = e.style;
         var c = (0, t.useMemo)((function() {
             
-            return (0, t.cloneElement)(u, {
+            return (0, t.cloneElement)(a, {
                 onMount: i,
-                onUnmount: a
+                onUnmount: u
             });
-        }), [ u, i, a ]);
+        }), [ a, i, u ]);
         var f = (0, t.useMemo)((function() {
-            return B(B({}, o), l);
+            return z(z({}, o), l);
         }), [ o, l ]);
         
-        return r().createElement(d, {
+        return r().createElement(m, {
             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, d = e.transition, v = d === void 0 ? "forward" : d, m = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
+    function Z(e) {
+        var n = e.activePanelId, i = e.children, a = e.elementRef, l = e.innerClassName, f = e.innerStyle, s = e.onAnimationEnd, y = e.outerClassName, v = e.outerStyle, d = e.transition, m = d === void 0 ? "forward" : d, O = V(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
         // @docs-props-type SlidingPanelsPropsBase
-                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() {
+                var g = (0, t.useState)(0), S = k(g, 2), h = S[0], j = S[1];
+        var w = (0, t.useState)([]), P = k(w, 2), E = P[0], x = P[1];
+        var A = (0, t.useState)({}), I = k(A, 2), C = I[0], M = I[1];
+        var N = (0, t.useRef)(null);
+        var q = (0, t.useRef)(false);
+        var U = (0, o.useSpringRef)();
+        var _ = (0, t.useMemo)((function() {
             return t.Children.toArray(i).filter(t.isValidElement);
         }), [ i ]);
         /**
@@ -437,46 +473,77 @@
    * Without maxWidth, we run into a problem if the leaving panel width > the arriving panel width.
    * In this case, useAnimationTransition will only know to shift the leaving panel by the width of the arriving panel,
    * which would result in seeing part of the leaving panel's content on screen at the same time as the arriving panel's content.
-   */        var q = (0, t.useMemo)((function() {
-            return G(A);
-        }), [ A ]);
-        /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var R = (0, 
+   */        var D = (0, t.useMemo)((function() {
+            return X(C);
+        }), [ C ]);
+        /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var B = (0, 
         t.useMemo)((function() {
-            return F(q, v);
-        }), [ q, v ]);
-        var k = (0, u.useAnimationTransition)(g, B(B(B({
-            ref: N
-        }, z), R), {}, {
+            return Q(D, m);
+        }), [ D, m ]);
+        var L = (0, c.useAnimationTransition)(h, z(z(z({
+            ref: U
+        }, K), B), {}, {
             onRest: function e() {
-                f === null || f === void 0 ? void 0 : f();
+                s === null || s === void 0 ? void 0 : s();
             }
         }));
         (0, t.useEffect)((function() {
             /* if it can't find activePanelId it will set currentPanelIndex to -1 */
             if (false) {}
-        }), [ g ]);
+        }), [ h ]);
         (0, t.useEffect)((function() {
             /* starts animation */
-            N.start();
-        }), [ N, g ]);
+            U.start();
+        }), [ U, h ]);
+        (0, t.useLayoutEffect)((function() {
+            var e;
+            /* capture focus state before the DOM mutation that unmounts the leaving panel */            if ((e = N.current) === null || e === void 0 ? void 0 : e.contains(document.activeElement)) {
+                q.current = true;
+            }
+        }), [ n ]);
         (0, t.useEffect)((function() {
             /* sets the currentPanelIndex in state whenever activePanelId or children changes */
-            var e = T.findIndex((function(e) {
+            var e = _.findIndex((function(e) {
                 var t = e.props;
                 return t.panelId === n;
             }));
-            S(e);
-        }), [ n, T ]);
-        var _ = (0, t.useCallback)((function(e, n) {
+            j(e);
+        }), [ n, _ ]);
+        (0, t.useEffect)((function() {
+            /**
+     * If focus was inside the container when the active panel changed, move focus to the
+     * first tabbable element of the incoming panel. Both deps are needed because the order
+     * they settle depends on whether animations are running:
+     *   - With animations: both panels stay mounted, so only `activePanelId` changes.
+     *   - Without animations (e.g. prefers-reduced-motion): the leaving panel unmounts and
+     *     the incoming panel mounts fresh, so `panelInstances` changes last.
+     */
+            if (!q.current) {
+                return undefined;
+            }
+            var e = C[n];
+            if (e) {
+                q.current = false;
+                var t = u()((function() {
+                    var n;
+                    (n = T("first", e)) === null || n === void 0 ? void 0 : n.focus();
+                }));
+                return function() {
+                    return clearTimeout(t);
+                };
+            }
+            return undefined;
+        }), [ n, C ]);
+        var $ = (0, t.useCallback)((function(e, n) {
             if (e != null && n != null) {
-                I((function(t) {
-                    return B(B({}, t), {}, V({}, n, e));
+                M((function(t) {
+                    return z(z({}, t), {}, F({}, n, e));
                 }));
             }
         }), []);
-        var D = (0, t.useCallback)((function(e) {
-            I((function(n) {
-                var t = B({}, n);
+        var W = (0, t.useCallback)((function(e) {
+            M((function(n) {
+                var t = z({}, n);
                 delete t[e];
                 return t;
             }));
@@ -488,30 +555,34 @@
      * 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(T);
-        }), [ T ]);
+            x(_);
+        }), [ _ ]);
+        var G = (0, t.useCallback)((function(e) {
+            N.current = e;
+            b(a, e);
+        }), [ a ]);
         
-        return r().createElement(p, M({
-            className: s,
+        return r().createElement(p, R({
+            className: y,
             "data-test-active-panel-id": n,
             "data-test": "sliding-panels",
-            ref: a,
-            style: y
-        }, m), k((function(e, n) {
-            var t = w[n];
-            return t ?  r().createElement(H, {
+            ref: G,
+            style: v
+        }, O), L((function(e, n) {
+            var t = E[n];
+            return t ?  r().createElement(Y, {
                 innerClassName: l,
-                innerStyle: c,
-                onMount: _,
-                onUnmount: D,
+                innerStyle: f,
+                onMount: $,
+                onUnmount: W,
                 panel: t,
                 style: e
             }) : null;
         })));
     }
-    J.propTypes = W;
-    J.Panel = A;
-    /* harmony default export */    const K = J;
+    Z.propTypes = J;
+    Z.Panel = C;
+    /* harmony default export */    const ee = Z;
     // CONCATENATED MODULE: ./src/SlidingPanels/index.ts
     module.exports = n;
     /******/})();

package/SpotLight.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/SpotLight';
+export * from './types/src/SpotLight';