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

package/SlidingPanels.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var n = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(n, {
-                a: n
+            e.d(r, {
+                a: r
             });
-            /******/            return n;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, n) => {
-            /******/ for (var r in n) {
-                /******/ if (e.o(n, r) && !e.o(t, r)) {
-                    /******/ Object.defineProperty(t, r, {
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: n[r]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,53 +56,43 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(n);
     // EXPORTS
-        e.d(t, {
-        Panel: () => /* reexport */ L,
-        default: () => /* reexport */ be
+        e.d(n, {
+        Panel: () => /* reexport */ x,
+        default: () => /* reexport */ Q
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var r =  e.n(n);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
-    // CONCATENATED MODULE: external "lodash/filter"
-    const a = require("lodash/filter");
-    var l =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const u = require("lodash/keys");
-    var c =  e.n(u);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var f =  e.n(s);
-    // CONCATENATED MODULE: external "lodash/values"
-    const p = require("lodash/values");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "react-spring"
-    const v = require("react-spring");
+    // CONCATENATED MODULE: external "@react-spring/web"
+    const a = require("@react-spring/web");
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
-    const y = require("@splunk/react-ui/Animation");
+    const u = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "styled-components"
-    const b = require("styled-components");
-    var m =  e.n(b);
+    const l = require("styled-components");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const h = require("@splunk/react-ui/Box");
-    var g =  e.n(h);
+    const f = require("@splunk/react-ui/Box");
+    var s =  e.n(f);
+    // CONCATENATED MODULE: external "react-spring"
+    const y = require("react-spring");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const O = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanelsStyles.ts
-    var P = m()((0, v.animated)(g())).withConfig({
+    var v = c()(s()).withConfig({
         displayName: "SlidingPanelsStyles__StyledBox",
         componentId: "su6isq-0"
     })([ "overflow:hidden;position:relative;" ]);
-    var j = m()(v.animated.div).withConfig({
-        displayName: "SlidingPanelsStyles__Styled",
+    var p = c()(y.animated.div).withConfig({
+        displayName: "SlidingPanelsStyles__StyledAnimatedDiv",
         componentId: "su6isq-1"
-    })([ "", ";", ";" ], O.mixins.reset("block"), O.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.
@@ -110,335 +100,264 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function w(e, t) {
+    function m(e, n) {
         if (e) {
             if (typeof e === "function") {
-                e(t);
+                e(n);
             } 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;
+                e.current = n;
  // eslint-disable-line no-param-reassign
                         }
         }
     }
     // CONCATENATED MODULE: ./src/SlidingPanels/Panel.tsx
-    function S(e) {
-        "@babel/helpers - typeof";
-        return S = "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;
-        }, S(e);
-    }
-    function I() {
-        return I = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
+    function b() {
+        return b = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
-        }, I.apply(null, arguments);
+        }, b.apply(null, arguments);
     }
-    function E(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function g(e, n) {
+        return w(e) || j(e, n) || h(e, n) || O();
     }
-    function _(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, N(r.key), r);
-        }
+    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 k(e, t, n) {
-        return t && _(e.prototype, t), n && _(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function h(e, n) {
+        if (e) {
+            if ("string" == typeof e) return S(e, n);
+            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) ? S(e, n) : void 0;
+        }
     }
-    function T(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function S(e, n) {
+        (null == n || n > e.length) && (n = e.length);
+        for (var r = 0, t = Array(n); r < n; r++) {
+            t[r] = e[r];
+        }
+        return t;
+    }
+    function j(e, n) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var t, o, i, a, u = [], l = !0, c = !1;
+            try {
+                if (i = (r = r.call(e)).next, 0 === n) {
+                    if (Object(r) !== r) return;
+                    l = !1;
+                } else for (;!(l = (t = i.call(r)).done) && (u.push(t.value), u.length !== n); l = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && q(e, t);
-    }
-    function q(e, t) {
-        return q = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, q(e, t);
-    }
-    function A(e) {
-        var t = R();
-        return function() {
-            var n, r = x(e);
-            if (t) {
-                var o = x(this).constructor;
-                n = Reflect.construct(r, arguments, o);
-            } else n = r.apply(this, arguments);
-            return C(this, n);
-        };
-    }
-    function C(e, t) {
-        if (t && ("object" == S(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return M(e);
-    }
-    function M(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function R() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (R = function t() {
-            return !!e;
-        })();
-    }
-    function x(e) {
-        return x = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, x(e);
+            return u;
+        }
     }
-    function U(e, t, n) {
-        return (t = N(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = n, e;
+    function w(e) {
+        if (Array.isArray(e)) return e;
     }
-    function N(e) {
-        var t = D(e, "string");
-        return "symbol" == S(t) ? t : t + "";
+    function P(e, n) {
+        if (null == e) return {};
+        var r, t, o = E(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
     }
-    function D(e, t) {
-        if ("object" != S(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != S(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function E(e, n) {
+        if (null == e) return {};
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        return r;
     }
-    var W = {
+    var A = {
+        children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
-        panelId: i().any.isRequired,
-        /**
-   * @private.
-   * Used internally, func passed in from outer place is overwritten
-   * by SlidingPanels during rendering
-   */
+        /** @private */
         onMount: i().func,
-        /**
-   * @private.
-   * Used internally, func passed in from outer place is overwritten
-   * by SlidingPanels during rendering
-   */
-        onUnmount: i().func
+        /** @private */
+        onUnmount: i().func,
+        panelId: i().any.isRequired
     };
-    var B = {};
     /**
  * Container for arbitrary content.
- */    var X =  function(e) {
-        T(n, e);
-        var t = A(n);
-        function n() {
-            var e;
-            E(this, n);
-            for (var r = arguments.length, o = new Array(r), i = 0; i < r; i++) {
-                o[i] = arguments[i];
-            }
-            e = t.call.apply(t, [ this ].concat(o));
-            U(M(e), "el", null);
-            U(M(e), "handleMount", (function(t) {
-                e.el = t;
-                w(e.props.elementRef, t);
-            }));
-            return e;
-        }
- // @docs-props-type PanelPropsBase
-                k(n, [ {
-            key: "componentDidMount",
-            value: function e() {
-                var t, n;
-                (t = (n = this.props).onMount) === null || t === void 0 ? void 0 : t.call(n, this);
-            }
-        }, {
-            key: "componentWillUnmount",
-            value: function e() {
-                var t, n;
-                (t = (n = this.props).onUnmount) === null || t === void 0 ? void 0 : t.call(n, this);
-            }
- // eslint-disable-next-line react/no-unused-class-component-methods
-                }, {
-            key: "getHeight",
-            value: function e() {
-                var t;
-                return (t = this.el) === null || t === void 0 ? void 0 : t.clientHeight;
-            }
- // eslint-disable-next-line react/no-unused-class-component-methods
-                }, {
-            key: "getWidth",
-            value: function e() {
-                var t;
-                return (t = this.el) === null || t === void 0 ? void 0 : t.clientWidth;
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.props.panelId;
-                
-                return r().createElement(j, I({
-                    "data-test": "panel",
-                    "data-test-panel-id": t
-                }, f()(this.props, c()(n.propTypes)), {
-                    ref: this.handleMount
-                }));
-            }
-        } ]);
-        return n;
-    }(n.Component);
-    U(X, "propTypes", W);
-    U(X, "defaultProps", B);
-    /* harmony default export */    const L = X;
+ */    function I(e) {
+        var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = P(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
+        // @docs-props-type PanelPropsBase
+                var c = (0, r.useState)(null), f = g(c, 2), s = f[0], y = f[1];
+        var d = (0, r.useCallback)((function(e) {
+            y(e);
+            m(o, e);
+        }), [ o ]);
+        (0, r.useEffect)((function() {
+            i === null || i === void 0 ? void 0 : i(s, u);
+            return function() {
+                a === null || a === void 0 ? void 0 : a(u);
+            };
+        }), [ i, a, s, u ]);
+        
+        return t().createElement(p, b({
+            "data-test": "panel",
+            "data-test-panel-id": u
+        }, l, {
+            ref: d
+        }), n);
+    }
+    I.propTypes = A;
+    /* harmony default export */    const x = I;
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanels.tsx
-    function H(e) {
+    function C(e) {
         "@babel/helpers - typeof";
-        return H = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return C = "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;
-        }, H(e);
-    }
-    function V() {
-        return V = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
+        }, C(e);
+    }
+    function M() {
+        return M = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
-        }, V.apply(null, arguments);
+        }, M.apply(null, arguments);
     }
-    function F(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function N(e, n) {
+        return U(e) || k(e, n) || R(e, n) || q();
     }
-    function z(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, oe(r.key), r);
-        }
+    function q() {
+        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, t, n) {
-        return t && z(e.prototype, t), n && z(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function R(e, n) {
+        if (e) {
+            if ("string" == typeof e) return T(e, n);
+            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) ? T(e, n) : void 0;
+        }
     }
-    function J(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function T(e, n) {
+        (null == n || n > e.length) && (n = e.length);
+        for (var r = 0, t = Array(n); r < n; r++) {
+            t[r] = e[r];
+        }
+        return t;
+    }
+    function k(e, n) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var t, o, i, a, u = [], l = !0, c = !1;
+            try {
+                if (i = (r = r.call(e)).next, 0 === n) {
+                    if (Object(r) !== r) return;
+                    l = !1;
+                } else for (;!(l = (t = i.call(r)).done) && (u.push(t.value), u.length !== n); l = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && K(e, t);
-    }
-    function K(e, t) {
-        return K = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, K(e, t);
-    }
-    function Q(e) {
-        var t = $();
-        return function() {
-            var n, r = ee(e);
-            if (t) {
-                var o = ee(this).constructor;
-                n = Reflect.construct(r, arguments, o);
-            } else n = r.apply(this, arguments);
-            return Y(this, n);
-        };
-    }
-    function Y(e, t) {
-        if (t && ("object" == H(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return Z(e);
+            return u;
+        }
     }
-    function Z(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
+    function U(e) {
+        if (Array.isArray(e)) return e;
     }
-    function $() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return ($ = function t() {
-            return !!e;
-        })();
+    function _(e, n) {
+        if (null == e) return {};
+        var r, t, o = D(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
     }
-    function ee(e) {
-        return ee = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, ee(e);
+    function D(e, n) {
+        if (null == e) return {};
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
+        }
+        return r;
     }
-    function te(e, t) {
-        var n = Object.keys(e);
+    function B(e, n) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var r = Object.getOwnPropertySymbols(e);
-            t && (r = r.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), n.push.apply(n, r);
+            var t = Object.getOwnPropertySymbols(e);
+            n && (t = t.filter((function(n) {
+                return Object.getOwnPropertyDescriptor(e, n).enumerable;
+            }))), r.push.apply(r, t);
         }
-        return n;
-    }
-    function ne(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var n = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? te(Object(n), !0).forEach((function(t) {
-                re(e, t, n[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : te(Object(n)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+        return r;
+    }
+    function V(e) {
+        for (var n = 1; n < arguments.length; n++) {
+            var r = null != arguments[n] ? arguments[n] : {};
+            n % 2 ? B(Object(r), !0).forEach((function(n) {
+                $(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : B(Object(r)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function re(e, t, n) {
-        return (t = oe(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
+    function $(e, n, r) {
+        return (n = W(n)) in e ? Object.defineProperty(e, n, {
+            value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = n, e;
-    }
-    function oe(e) {
-        var t = ie(e, "string");
-        return "symbol" == H(t) ? t : t + "";
-    }
-    function ie(e, t) {
-        if ("object" != H(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != H(r)) return r;
+        }) : e[n] = r, e;
+    }
+    function W(e) {
+        var n = z(e, "string");
+        return "symbol" == C(n) ? n : n + "";
+    }
+    function z(e, n) {
+        if ("object" != C(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var t = r.call(e, n || "default");
+            if ("object" != C(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === t ? String : Number)(e);
+        return ("string" === n ? String : Number)(e);
     }
-    var ae = {
+    // can't use PanelId as key type, because an index signature parameter type must be 'string', 'number', 'symbol', or a template literal type.
+        var F = {
         activePanelId: i().any.isRequired,
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
@@ -449,203 +368,157 @@
         outerStyle: i().object,
         transition: i().oneOf([ "forward", "backward" ])
     };
-    var le = {
-        transition: "forward"
-    };
-    var ue = {
-        precision: 1
-    };
-    var ce = function e(t) {
-        var n = t.animating, r = t.outerStyle, o = t.interpolatedOuterStyle;
-        return ne(ne({}, r), n ? o : {});
-    };
-    var se = function e(t) {
-        return t ? {
-            translateX: 1
-        } : {};
-    };
-    var fe = function e(t) {
-        var n = t ? t.getWidth() : 0;
-        var r = t ? t.getHeight() : 0;
-        return {
-            width: n,
-            height: r
-        };
-    };
-    var pe = function e(t) {
-        var o;
-        var i = t.activePanelId, a = t.children, l = t.maxWidth, u = t.onMount, c = t.onUnmount, s = t.transition, f = t.transitionStyle;
-        var p = n.Children.toArray(a).filter(n.isValidElement).find((function(e) {
-            return e.props.panelId === i;
-        }));
-        // TODO: Fix Interpolation<string | number> can't be cast to string
-                var d = (o = f.translateX) === null || o === void 0 ? void 0 : o.to((function(e) {
-            return "translateX(".concat(e * l * (s === "forward" ? 1 : -1), "px)");
-        }));
-        var y = p ?  r().createElement(v.animated.div, {
-            style: f
-        },  (0, n.cloneElement)(p, {
-            style: ne(ne({}, p.props.style), {}, {
-                transform: d
-            }),
-            onMount: u,
-            onUnmount: c
-        })) : null;
-        return y;
+    var G = {
+        enter: {
+            x: "0px"
+        },
+        initial: {
+            x: "0px"
+        }
     };
-    var de = function e() {
+    var H = function e(n, r) {
+        var t = "".concat(n, "px");
+        var o = "".concat(n * -1, "px");
+        var i = r === "forward" ? t : o;
+        var a = r === "forward" ? o : t;
         return {
-            translateX: 0
-        };
-    };
-    var ve = function e(t) {
-        return t ? {
-            translateX: -1,
-            position: "absolute",
-            left: 0,
-            top: 0
-        } : {
-            translateX: -1
+            from: {
+                x: i
+            },
+            /**
+     * Use absolute positioning so the arriving and leaving panel take up the same space.
+     * Without this, the arriving panel and leaving panel will be visible at the same time, because
+     * the arriving panel would insert itself underneath the still visible leaving panel.
+     */
+            leave: {
+                position: "absolute",
+                x: a
+            }
         };
     };
-    var ye =  function(e) {
-        J(o, e);
-        var t = Q(o);
-        G(o, null, [ {
-            key: "getDerivedStateFromProps",
-            // @docs-props-type SlidingPanelsPropsBase
-            value: function e(t, n) {
-                if (t.activePanelId !== n.prevActivePanelId) {
-                    // instead of using panelId, assign each sliding event an id and
-                    // use it as the key to make sure new panelA will transit as expected if
-                    // old panelA has not fully left yet
-                    return {
-                        animating: true,
-                        panelLoading: true,
-                        prevActivePanelId: t.activePanelId,
-                        slidingId: n.slidingId + 1
-                    };
-                }
-                return null;
+    var J = 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);
             }
-        } ]);
-        function o(e) {
-            var i;
-            F(this, o);
-            i = t.call(this, e);
-            re(Z(i), "panelInstances", {});
-            re(Z(i), "allowAnimationUpdates", true);
-            re(Z(i), "handlePanelMount", (function(e) {
-                i.panelInstances[e.props.panelId] = e;
-                if (e.props.panelId === i.props.activePanelId) {
-                    i.setState({
-                        activePanel: e,
-                        panelLoading: false
-                    });
-                }
-            }));
-            re(Z(i), "handlePanelUnmount", (function(e) {
-                delete i.panelInstances[e.props.panelId];
-            }));
-            re(Z(i), "handleAnimationEnd", (function() {
-                var e, t;
-                if (i.allowAnimationUpdates) {
-                    i.setState({
-                        animating: false
-                    });
-                }
-                (e = (t = i.props).onAnimationEnd) === null || e === void 0 ? void 0 : e.call(t);
-            }));
-            re(Z(i), "renderOuterContainer", (function(e) {
-                var t = i.props, a = t.activePanelId, u = t.children, s = t.elementRef, p = t.outerClassName, b = t.outerStyle, m = t.innerClassName, h = t.innerStyle;
-                var g = i.state.animating;
-                var O = ce({
-                    animating: g,
-                    outerStyle: b,
-                    interpolatedOuterStyle: e
+            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
+   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 K = 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, r.cloneElement)(e, {
+                    onMount: u,
+                    onUnmount: l
                 });
-                var j = n.Children.toArray(u).filter(n.isValidElement).find((function(e) {
-                    return e.props.panelId === a;
-                }));
-                if (false) {}
-                var w = l()(d()(i.panelInstances), (function(e) {
-                    return !!e;
-                }));
-                var S = w.map((function(e) {
-                    var t;
-                    var n = i.panelInstances[e.props.panelId];
-                    return n ? (t = n.getWidth()) !== null && t !== void 0 ? t : 0 : 0;
-                })).reduce((function(e, t) {
-                    return Math.max(e, t);
-                }), 0);
+                var f = (0, r.useMemo)((function() {
+                    return V(V({}, a), o);
+                }), [ o ]);
                 
-                return r().createElement(P, V({
-                    className: p,
-                    "data-test-active-panel-id": a,
-                    "data-test": "sliding-panels",
-                    elementRef: s,
-                    style: O
-                }, f()(i.props, c()(o.propTypes))),  r().createElement(y.Transition, {
-                    from: se(g),
-                    enter: de(),
-                    leave: ve(g),
-                    items: a
-                }, (
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                function(e, t) {
-                    
-                    return r().createElement(v.animated.div, {
-                        style: h,
-                        className: m
-                    }, pe({
-                        activePanelId: t,
-                        children: u,
-                        maxWidth: S,
-                        onMount: i.handlePanelMount,
-                        onUnmount: i.handlePanelUnmount,
-                        transition: i.props.transition,
-                        transitionStyle: e
-                    }));
-                })));
-            }));
-            i.state = {
-                animating: false,
-                panelLoading: false,
-                prevActivePanelId: i.props.activePanelId,
-                // eslint-disable-line react/no-unused-state
-                slidingId: 0
+                return t().createElement(p, {
+                    style: f,
+                    className: i
+                }, c);
             };
-            return i;
-        }
-        G(o, [ {
-            key: "componentWillUnmount",
-            value: function e() {
-                this.allowAnimationUpdates = false;
+        }));
+    };
+    function L(e) {
+        var n = e.activePanelId, o = e.children, i = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, d = e.transition, p = d === void 0 ? "forward" : d, m = _(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
+        // @docs-props-type SlidingPanelsPropsBase
+                var b = (0, r.useState)(0), g = N(b, 2), O = g[0], h = g[1];
+        var S = (0, r.useState)([]), j = N(S, 2), w = j[0], P = j[1];
+        var E = (0, r.useState)({}), A = N(E, 2), I = A[0], x = A[1];
+        var C = (0, a.useSpringRef)();
+        var q = (0, r.useMemo)((function() {
+            return r.Children.toArray(o).filter(r.isValidElement);
+        }), [ o ]);
+        /**
+   * maxWidth is used to determine how far to translate the x value of the animated panels.
+   * 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 R = (0, r.useMemo)((function() {
+            return J(I);
+        }), [ I ]);
+        /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var T = (0, 
+        r.useMemo)((function() {
+            return H(R, p);
+        }), [ R, p ]);
+        var k = (0, u.useAnimationTransition)(O, V(V(V({
+            ref: C
+        }, G), T), {}, {
+            onRest: function e() {
+                f === null || f === void 0 ? void 0 : f();
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.state, n = t.activePanel, o = t.panelLoading;
- // When a new panel is loading, the activePanel is about to be removed. The height and/or
-                // width of that panel may have changed since the last render. To ensure that the next
-                // panel animates from the current height and width (rather than the previously loaded one),
-                // we only set the style when panelLoading is true (immediate prop prevents animation if true).
-                                
-                return r().createElement(y.Spring, {
-                    to: fe(n),
-                    onRest: this.handleAnimationEnd,
-                    immediate: o,
-                    config: ue
-                }, /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                this.renderOuterContainer);
+        }));
+        (0, r.useEffect)((function() {
+            /* if it can't find activePanelId it will set currentPanelIndex to -1 */
+            if (false) {}
+        }), [ O ]);
+        (0, r.useEffect)((function() {
+            /* starts animation */
+            C.start();
+        }), [ C, O ]);
+        (0, r.useEffect)((function() {
+            /* sets the currentPanelIndex in state whenever activePanelId or children changes */
+            var e = q.findIndex((function(e) {
+                var r = e.props;
+                return r.panelId === n;
+            }));
+            h(e);
+        }), [ n, q ]);
+        var U = (0, r.useCallback)((function(e, n) {
+            if (e != null && n != null) {
+                x((function(r) {
+                    return V(V({}, r), {}, $({}, n, e));
+                }));
             }
-        } ]);
-        return o;
-    }(n.Component);
-    re(ye, "propTypes", ae);
-    re(ye, "defaultProps", le);
-    re(ye, "Panel", L);
-    /* harmony default export */    const be = ye;
+        }), []);
+        var D = (0, r.useCallback)((function(e) {
+            x((function(n) {
+                var r = V({}, n);
+                delete r[e];
+                return r;
+            }));
+        }), []);
+        (0, r.useMemo)((function() {
+            /**
+     * use useMemo instead of useEffect to setPanels because we need panels to be populated before mount
+     * so SlidingPanels will appear with a panel already inside the StyledBox
+     */
+            P(K({
+                validChildren: q,
+                onMount: U,
+                onUnmount: D,
+                innerClassName: l,
+                innerStyle: c
+            }));
+        }), [ q, U, D, l, c ]);
+        
+        return t().createElement(v, M({
+            className: s,
+            "data-test-active-panel-id": n,
+            "data-test": "sliding-panels",
+            elementRef: i,
+            style: y
+        }, m), k((function(e, n) {
+            var r = w[n];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        return r ?  t().createElement(r, {
+                style: e
+            }) : null;
+        })));
+    }
+    L.propTypes = F;
+    L.Panel = x;
+    /* harmony default export */    const Q = L;
     // CONCATENATED MODULE: ./src/SlidingPanels/index.ts
-    module.exports = t;
+    module.exports = n;
     /******/})();