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

package/Resize.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* 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 = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,130 +56,128 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ re
+        e.d(r, {
+        default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var i =  e.n(o);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const a = require("lodash/keys");
-    var s =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const c = require("lodash/omit");
-    var l =  e.n(c);
+    const i = require("prop-types");
+    var o =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const u = require("@splunk/react-ui/EventListener");
-    var d =  e.n(u);
+    const a = require("@splunk/react-ui/EventListener");
+    var s =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const f = require("@splunk/react-ui/ScreenReaderContent");
-    var p =  e.n(f);
+    const l = require("@splunk/react-ui/ScreenReaderContent");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const v = require("@splunk/ui-utils/i18n");
+    const u = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const h = require("@splunk/ui-utils/keyboard");
+    const d = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const y = require("styled-components");
-    var w =  e.n(y);
+    const f = require("styled-components");
+    var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const p = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
-    var m = "9px";
-    var g = "14px";
-    var S = "3px";
-    var k = "11px";
-    var z = w().div.withConfig({
+    var h = "9px";
+    var w = "14px";
+    var m = "3px";
+    var y = "11px";
+    var b = v().div.withConfig({
         displayName: "ResizeStyles__Styled",
         componentId: "sc-181mwes-0"
-    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], b.mixins.reset("block"));
-    var O = w().div.withConfig({
+    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], p.mixins.reset("block"));
+    var g = v().div.withConfig({
         displayName: "ResizeStyles__StyledBorder",
         componentId: "sc-181mwes-1"
-    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], b.mixins.reset("block"), (0, 
-    b.pick)({
-        prisma: b.variables.interactiveColorBackground,
+    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], p.mixins.reset("block"), (0, 
+    p.pick)({
+        // TODO(SUI-6298): Should use a semantically correct token
+        prisma: {
+            light: "#eeeeee",
+            dark: "#272a2f"
+        },
         enterprise: {
-            dark: b.variables.gray22,
-            light: b.variables.white
+            dark: p.variables.gray22,
+            light: p.variables.white
         }
     }), (function(e) {
-        var t = e.$borderSides;
-        return t.n && (0, y.css)([ "border-top-width:", ";" ], m);
+        var r = e.$borderSides;
+        return r.n && (0, f.css)([ "border-top-width:", ";" ], h);
     }), (function(e) {
-        var t = e.$borderSides;
-        return t.e && (0, y.css)([ "border-right-width:", ";" ], m);
+        var r = e.$borderSides;
+        return r.e && (0, f.css)([ "border-right-width:", ";" ], h);
     }), (function(e) {
-        var t = e.$borderSides;
-        return t.s && (0, y.css)([ "border-bottom-width:", ";" ], m);
+        var r = e.$borderSides;
+        return r.s && (0, f.css)([ "border-bottom-width:", ";" ], h);
     }), (function(e) {
-        var t = e.$borderSides;
-        return t.w && (0, y.css)([ "border-left-width:", ";" ], m);
+        var r = e.$borderSides;
+        return r.w && (0, f.css)([ "border-left-width:", ";" ], h);
     }));
-    var _ = w().svg.withConfig({
+    var S = v().svg.withConfig({
         displayName: "ResizeStyles__StyledCornerSvg",
         componentId: "sc-181mwes-2"
     })([ "display:block;stroke:currentColor;" ]);
-    var x = w().path.withConfig({
+    var k = v().path.withConfig({
         displayName: "ResizeStyles__StyledCornerPath",
         componentId: "sc-181mwes-3"
     })([ "stroke-width:1.1px;" ]);
-    var R = w().svg.withConfig({
+    var z = v().svg.withConfig({
         displayName: "ResizeStyles__StyledSideSvg",
         componentId: "sc-181mwes-4"
     })([ "display:block;fill:currentColor;" ]);
-    var D = (0, y.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], b.mixins.reset("block"), (0, 
-    b.pick)({
-        prisma: b.variables.contentColorDefault,
+    var x = (0, f.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], p.mixins.reset("block"), (0, 
+    p.pick)({
+        prisma: p.variables.contentColorDefault,
         enterprise: {
-            dark: b.variables.gray92,
-            light: b.variables.borderColor
+            dark: p.variables.gray92,
+            light: p.variables.borderColor
         }
-    }), (0, b.pick)({
-        prisma: b.variables.interactiveColorPrimary,
-        enterprise: b.variables.linkColor
+    }), (0, p.pick)({
+        prisma: p.variables.interactiveColorPrimary,
+        enterprise: p.variables.contentColorLink
     }), (function(e) {
-        var t = e.$isSeparator, r = e.$cardinalDirection;
-        var n = [ "n", "e", "w", "s" ].includes(r);
-        return t && n && (0, y.css)([ "background-color:", ";&:active{background-color:", ";}" ], b.variables.borderColorWeak, b.variables.borderColorStrong);
+        var r = e.$isSeparator, t = e.$cardinalDirection;
+        var n = [ "n", "e", "w", "s" ].includes(t);
+        return r && n && (0, f.css)([ "background-color:", ";&:active{background-color:", ";}" ], p.variables.borderColorWeak, p.variables.borderColorStrong);
     }), (function(e) {
-        var t = e.$showHandles;
-        return t === "on-hover" && (0, y.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ z);
+        var r = e.$showHandles;
+        return r === "on-hover" && (0, f.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ b);
     }));
-    var E = (0, y.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], D, k, k);
-    var j = (0, y.css)([ "height:100%;" ]);
-    var C = (0, y.css)([ "width:100%;display:flex;justify-content:center;" ]);
-    var P = (0, y.css)([ "", ";position:absolute;z-index:1;", "" ], D, (function(e) {
-        var t = e.$isSeparator;
-        return t && (0, b.pickVariant)("$cardinalDirection", {
-            n: C,
-            s: C,
-            e: j,
-            w: j
+    var R = (0, f.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], x, y, y);
+    var C = (0, f.css)([ "height:100%;" ]);
+    var O = (0, f.css)([ "width:100%;display:flex;justify-content:center;" ]);
+    var _ = (0, f.css)([ "", ";position:absolute;z-index:1;", "" ], x, (function(e) {
+        var r = e.$isSeparator;
+        return r && (0, p.pickVariant)("$cardinalDirection", {
+            n: O,
+            s: O,
+            e: C,
+            w: C
         });
     }));
-    var $ = function e(t) {
-        var r = t.$isSeparator;
-        return r ? "0" : "calc(50% - ".concat(g, " / 2)");
+    var E = function e(r) {
+        var t = r.$isSeparator;
+        return t ? "0" : "calc(50% - ".concat(w, " / 2)");
     };
-    var q = w().button.withConfig({
+    var $ = v().button.withConfig({
         displayName: "ResizeStyles__StyledResize",
         componentId: "sc-181mwes-5"
-    })([ "", "" ], (0, b.pickVariant)("$cardinalDirection", {
-        nw: (0, y.css)([ "", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], E, /* sc-sel */ _),
-        n: (0, y.css)([ "", ";cursor:ns-resize;top:0;left:", ";padding:", " 0;" ], P, $, S),
-        ne: (0, y.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], E, /* sc-sel */ _),
-        w: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:", ";" ], P, S, $),
-        e: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:", ";" ], P, S, $),
-        sw: (0, y.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], E, /* sc-sel */ _),
-        s: (0, y.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:", ";" ], P, S, $),
-        se: (0, y.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], E)
+    })([ "", "" ], (0, p.pickVariant)("$cardinalDirection", {
+        nw: (0, f.css)([ "", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], R, /* sc-sel */ S),
+        n: (0, f.css)([ "", ";cursor:ns-resize;top:0;left:", ";padding:", " 0;" ], _, E, m),
+        ne: (0, f.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], R, /* sc-sel */ S),
+        w: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:", ";" ], _, m, E),
+        e: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:", ";" ], _, m, E),
+        sw: (0, f.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], R, /* sc-sel */ S),
+        s: (0, f.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:", ";" ], _, m, E),
+        se: (0, f.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], R)
     }));
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
@@ -188,352 +186,303 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function H(e, t) {
+    function j(e, r) {
         if (e) {
             if (typeof e === "function") {
-                e(t);
+                e(r);
             } 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 = r;
  // eslint-disable-line no-param-reassign
                         }
         }
     }
     // CONCATENATED MODULE: ./src/Resize/Resize.tsx
-    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);
-    }
-    function I() {
-        return I = 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]);
+    function q() {
+        return q = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, I.apply(null, arguments);
+        }, q.apply(null, arguments);
     }
-    function M(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function D(e, r) {
+        return A(e) || M(e, r) || H(e, r) || I();
     }
-    function B(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, G(n.key), 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 H(e, r) {
+        if (e) {
+            if ("string" == typeof e) return P(e, r);
+            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) ? P(e, r) : void 0;
         }
     }
-    function N(e, t, r) {
-        return t && B(e.prototype, t), r && B(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function P(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
+        }
+        return n;
     }
-    function K(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 M(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, i, o, a, s = [], l = !0, c = !1;
+            try {
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    l = !1;
+                } else for (;!(l = (n = o.call(t)).done) && (s.push(n.value), s.length !== r); l = !0) {
+                }
+            } catch (e) {
+                c = !0, i = e;
+            } finally {
+                try {
+                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw i;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && W(e, t);
-    }
-    function W(e, t) {
-        return W = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, W(e, t);
-    }
-    function X(e) {
-        var t = V();
-        return function() {
-            var r, n = A(e);
-            if (t) {
-                var o = A(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return Y(this, r);
-        };
-    }
-    function Y(e, t) {
-        if (t && ("object" == T(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return L(e);
-    }
-    function L(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function V() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (V = function t() {
-            return !!e;
-        })();
+            return s;
+        }
     }
     function A(e) {
-        return A = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, A(e);
+        if (Array.isArray(e)) return e;
     }
-    function F(e, t, r) {
-        return (t = G(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
-    }
-    function G(e) {
-        var t = J(e, "string");
-        return "symbol" == T(t) ? t : t + "";
+    function T(e, r) {
+        if (null == e) return {};
+        var t, n, i = N(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
+            }
+        }
+        return i;
     }
-    function J(e, t) {
-        if ("object" != T(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != T(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function N(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        return t;
     }
     /** @public */
-    /** @public */    var Q = {
-        appearance: i().oneOf([ "border", "overlay", "separator" ]),
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        keyIncrement: i().number,
-        onRequestResize: i().func.isRequired,
-        resizeHandles: i().arrayOf(i().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
-        showHandles: i().oneOf([ "always", "on-hover" ])
-    };
-    var U = {
-        appearance: "overlay",
-        keyIncrement: 10,
-        showHandles: "always"
+    /** @public */    var B = {
+        appearance: o().oneOf([ "border", "overlay", "separator" ]),
+        children: o().node,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        keyIncrement: o().number,
+        onRequestResize: o().func.isRequired,
+        resizeHandles: o().arrayOf(o().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
+        showHandles: o().oneOf([ "always", "on-hover" ])
     };
-    var Z = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
-    var ee = {
-        nw: (0, v._)("Resize northwest"),
-        n: (0, v._)("Resize north"),
-        ne: (0, v._)("Resize northeast"),
-        w: (0, v._)("Resize west"),
-        e: (0, v._)("Resize east"),
-        sw: (0, v._)("Resize southwest"),
-        s: (0, v._)("Resize south"),
-        se: (0, v._)("Resize southeast")
+    var L = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
+    var K = {
+        nw: (0, u._)("Resize northwest"),
+        n: (0, u._)("Resize north"),
+        ne: (0, u._)("Resize northeast"),
+        w: (0, u._)("Resize west"),
+        e: (0, u._)("Resize east"),
+        sw: (0, u._)("Resize southwest"),
+        s: (0, u._)("Resize south"),
+        se: (0, u._)("Resize southeast")
     };
     /**
  * Resize is a utility container with drag handles for resizing.
- */    var te =  function(e) {
-        K(r, e);
-        var t = X(r);
+ */    function W(e) {
+        var r = e.appearance, i = r === void 0 ? "overlay" : r, o = e.children, a = e.elementRef, l = e.keyIncrement, u = l === void 0 ? 10 : l, f = e.onRequestResize, v = e.resizeHandles, p = e.showHandles, h = p === void 0 ? "always" : p, w = T(e, [ "appearance", "children", "elementRef", "keyIncrement", "onRequestResize", "resizeHandles", "showHandles" ]);
         // @docs-props-type ResizePropsBase
-                function r(e) {
-            var o;
-            M(this, r);
-            o = t.call(this, e);
-            F(L(o), "handleMount", (function(e) {
-                o.setState({
-                    el: e
-                });
-                H(o.props.elementRef, e);
-            }));
-            F(L(o), "handleDragStart", (function(e, t) {
-                if (e.button > 0) {
-                    return;
-                }
-                e.preventDefault();
-                e.persist();
-                o.setState((function(r) {
-                    var n, o;
-                    return {
-                        dragDirection: t,
-                        startWidth: (n = r.el) === null || n === void 0 ? void 0 : n.offsetWidth,
-                        startHeight: (o = r.el) === null || o === void 0 ? void 0 : o.offsetHeight,
-                        startX: e.clientX,
-                        startY: e.clientY
-                    };
-                }));
-            }));
-            F(L(o), "handleDragEnd", (function() {
-                o.setState({
-                    dragDirection: undefined
-                });
-            }));
-            F(L(o), "handleDrag", (function(e) {
-                var t = o.state, r = t.dragDirection, n = t.startWidth, i = n === void 0 ? 0 : n, a = t.startHeight, s = a === void 0 ? 0 : a, c = t.startX, l = c === void 0 ? 0 : c, u = t.startY, d = u === void 0 ? 0 : u;
-                var f = (r === null || r === void 0 ? void 0 : r.match(/(w|e)$/)) ? e.clientX - l : 0;
-                var p = (r === null || r === void 0 ? void 0 : r.match(/^(s|n)/)) ? e.clientY - d : 0;
-                var v = {
-                    width: (r === null || r === void 0 ? void 0 : r.match(/w$/)) ? i - f : i + f,
-                    height: (r === null || r === void 0 ? void 0 : r.match(/^n/)) ? s - p : s + p
+                (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ i, v ]);
+        var m = (0, t.useState)(), y = D(m, 2), x = y[0], R = y[1];
+        var C = (0, t.useState)(null), O = D(C, 2), _ = O[0], E = O[1];
+        var I = (0, t.useState)(), H = D(I, 2), P = H[0], M = H[1];
+        var A = (0, t.useState)(), N = D(A, 2), B = N[0], W = N[1];
+        var V = (0, t.useState)(), X = D(V, 2), Y = X[0], F = X[1];
+        var U = (0, t.useState)(), G = D(U, 2), J = G[0], Q = G[1];
+        var Z = (0, t.useCallback)((function(e) {
+            E(e);
+            j(a, e);
+        }), [ a ]);
+        var ee = (0, t.useCallback)((function() {
+            R(undefined);
+        }), [ R ]);
+        var re = (0, t.useCallback)((function(e, r) {
+            if (e.button > 0) {
+                return;
+            }
+            e.preventDefault();
+            e.persist();
+            R(r);
+            W(_ === null || _ === void 0 ? void 0 : _.offsetWidth);
+            M(_ === null || _ === void 0 ? void 0 : _.offsetHeight);
+            F(e.clientX);
+            Q(e.clientY);
+        }), [ _ ]);
+        var te = (0, t.useMemo)((function() {
+            var e = {};
+            L.forEach((function(r) {
+                e["handleDragStart".concat(r)] = function(e) {
+                    re(e, r);
                 };
-                o.props.onRequestResize(e, v);
             }));
-            F(L(o), "handleKeyDown", (function(e, t) {
-                var r = o.props.keyIncrement;
-                var n = (0, h.keycode)(e.nativeEvent);
-                var i = t.slice(-1);
-                var a = {
-                    e: {
-                        right: 1,
-                        left: -1
-                    },
-                    w: {
-                        right: -1,
-                        left: 1
-                    }
-                };
-                var s = (i === "e" || i === "w") && (n === "right" || n === "left") ? a[i][n] : 0;
-                var c = t.charAt(0);
-                var l = {
-                    n: {
-                        down: -1,
-                        up: 1
-                    },
-                    s: {
-                        down: 1,
-                        up: -1
-                    }
-                };
-                var u = (c === "n" || c === "s") && (n === "up" || n === "down") ? l[c][n] : 0;
-                if ((s || u) && o.state.el) {
-                    e.preventDefault();
-                    var d = {
-                        width: o.state.el.offsetWidth + s * r,
-                        height: o.state.el.offsetHeight + u * r
-                    };
-                    o.props.onRequestResize(e, d);
+            return e;
+        }), [ re ]);
+        var ne = (0, t.useCallback)((function(e) {
+            var r = (x === null || x === void 0 ? void 0 : x.match(/(w|e)$/)) ? e.clientX - (Y || 0) : 0;
+            var t = (x === null || x === void 0 ? void 0 : x.match(/^(s|n)/)) ? e.clientY - (J || 0) : 0;
+            var n = {
+                width: (x === null || x === void 0 ? void 0 : x.match(/w$/)) ? (B || 0) - r : (B || 0) + r,
+                height: (x === null || x === void 0 ? void 0 : x.match(/^n/)) ? (P || 0) - t : (P || 0) + t
+            };
+            f(e, n);
+        }), [ x, f, P, B, Y, J ]);
+        var ie = (0, t.useCallback)((function(e, r) {
+            var t = (0, d.keycode)(e.nativeEvent);
+            var n = r.slice(-1);
+            var i = {
+                e: {
+                    right: 1,
+                    left: -1
+                },
+                w: {
+                    right: -1,
+                    left: 1
                 }
-            }));
-            F(L(o), "renderHandle", (function(e) {
-                var t = o.props, r = t.showHandles, i = t.appearance;
-                var a = e.length > 1;
-                var s;
-                if (a) {
-                    s =  n().createElement(_, {
-                        viewBox: "0 0 11 11",
-                        width: "11px",
-                        height: "11px"
-                    },  n().createElement(x, {
-                        d: "M0 8 L 8 0 M4 8 L 8 4"
-                    }));
-                } else if (e === "n" || e === "s") {
-                    s =  n().createElement(R, {
-                        viewBox: "0 0 14 3",
-                        width: "14px",
-                        height: "3px"
-                    },  n().createElement("rect", {
-                        width: "14",
-                        height: "1",
-                        x: "0",
-                        y: "0"
-                    }),  n().createElement("rect", {
-                        width: "14",
-                        height: "1",
-                        x: "0",
-                        y: "2"
-                    }));
-                } else if (e === "e" || e === "w") {
-                    s =  n().createElement(R, {
-                        viewBox: "0 0 3 14",
-                        width: "3px",
-                        height: "14px"
-                    },  n().createElement("rect", {
-                        width: "1",
-                        height: "14",
-                        x: "0",
-                        y: "0"
-                    }),  n().createElement("rect", {
-                        width: "1",
-                        height: "14",
-                        x: "2",
-                        y: "0"
-                    }));
+            };
+            var o = (n === "e" || n === "w") && (t === "right" || t === "left") ? i[n][t] : 0;
+            var a = r.charAt(0);
+            var s = {
+                n: {
+                    down: -1,
+                    up: 1
+                },
+                s: {
+                    down: 1,
+                    up: -1
                 }
-                
-                return n().createElement(q, {
-                    key: e,
-                    "data-test": "resize-handle-".concat(e),
-                    onMouseDown: o["handleDragStart".concat(e)],
-                    onKeyDown: o["handleKeyDown".concat(e)],
-                    $showHandles: r,
-                    $cardinalDirection: e,
-                    $isSeparator: i === "separator"
-                }, s,  n().createElement(p(), null, ee[e]));
-            }));
-            o.state = {
-                el: null
             };
-            if (false) {}
-            // Generate handlers for each direction.
-                        Z.forEach((function(e) {
-                // @ts-expect-error - dynamic function creation
-                o["handleDragStart".concat(e)] = function(t) {
-                    o.handleDragStart(t, e);
+            var l = (a === "n" || a === "s") && (t === "up" || t === "down") ? s[a][t] : 0;
+            if ((o || l) && _) {
+                e.preventDefault();
+                var c = {
+                    width: _.offsetWidth + o * u,
+                    height: _.offsetHeight + l * u
                 };
-                // @ts-expect-error - dynamic function creation
-                                o["handleKeyDown".concat(e)] = function(t) {
-                    o.handleKeyDown(t, e);
+                f(e, c);
+            }
+        }), [ _, u, f ]);
+        var oe = (0, t.useMemo)((function() {
+            var e = {};
+            L.forEach((function(r) {
+                e["handleKeyDown".concat(r)] = function(e) {
+                    ie(e, r);
                 };
             }));
-            return o;
-        }
-        N(r, [ {
-            key: "render",
-            value: function e() {
-                var t = this.props, o = t.appearance, i = t.children, a = t.resizeHandles;
-                var c = this.state, u = c.dragDirection, f = c.el;
- // Handles are inserted before and after children to optimize tab order
-                                var p = Z.slice(0, 4).filter((function(e) {
-                    return a.indexOf(e) > -1;
-                })).map(this.renderHandle);
-                var v = Z.slice(4).filter((function(e) {
-                    return a.indexOf(e) > -1;
-                })).map(this.renderHandle);
-                /* When appearance is border, determine which sides need margin.
-       * Converts ['se', 'n'] to { e: true, s: true, n: true}
-       */                var h = {};
-                if (o === "border") {
-                    a.join("").split("").filter((function(e, t, r) {
-                        return r.indexOf(e) === t;
-                    })).forEach((function(e) {
-                        h[e] = true;
-                    }));
-                }
-                
-                return n().createElement(z, I({
-                    "data-test": "resize",
-                    ref: this.handleMount
-                }, l()(this.props, s()(r.propTypes))),  n().createElement(O, {
-                    $borderSides: h
-                }, f && p, i, f && v, u &&  n().createElement(n().Fragment, null,  n().createElement(d(), {
-                    target: window,
-                    eventType: "mousemove",
-                    listener: this.handleDrag
-                }),  n().createElement(d(), {
-                    target: window,
-                    eventType: "mouseup",
-                    listener: this.handleDragEnd
-                }))));
+            return e;
+        }), [ ie ]);
+        var ae = (0, t.useCallback)((function(e) {
+            var r = e.length > 1;
+            var t;
+            if (r) {
+                t =  n().createElement(S, {
+                    viewBox: "0 0 11 11",
+                    width: "11px",
+                    height: "11px"
+                },  n().createElement(k, {
+                    d: "M0 8 L 8 0 M4 8 L 8 4"
+                }));
+            } else if (e === "n" || e === "s") {
+                t =  n().createElement(z, {
+                    viewBox: "0 0 14 3",
+                    width: "14px",
+                    height: "3px"
+                },  n().createElement("rect", {
+                    width: "14",
+                    height: "1",
+                    x: "0",
+                    y: "0"
+                }),  n().createElement("rect", {
+                    width: "14",
+                    height: "1",
+                    x: "0",
+                    y: "2"
+                }));
+            } else if (e === "e" || e === "w") {
+                t =  n().createElement(z, {
+                    viewBox: "0 0 3 14",
+                    width: "3px",
+                    height: "14px"
+                },  n().createElement("rect", {
+                    width: "1",
+                    height: "14",
+                    x: "0",
+                    y: "0"
+                }),  n().createElement("rect", {
+                    width: "1",
+                    height: "14",
+                    x: "2",
+                    y: "0"
+                }));
             }
-        } ]);
-        return r;
-    }(r.Component);
-    F(te, "propTypes", Q);
-    F(te, "defaultProps", U);
-    /* harmony default export */    const re = te;
+            
+            return n().createElement($, {
+                key: e,
+                "data-test": "resize-handle-".concat(e),
+                onKeyDown: oe["handleKeyDown".concat(e)],
+                onMouseDown: te["handleDragStart".concat(e)],
+                $cardinalDirection: e,
+                $isSeparator: i === "separator",
+                $showHandles: h
+            }, t,  n().createElement(c(), null, K[e]));
+        }), [ i, te, oe, h ]);
+        /* When appearance is border, determine which sides need margin.
+   * Converts ['se', 'n'] to { e: true, s: true, n: true}
+   */        var se = {};
+        if (i === "border") {
+            v.join("").split("").filter((function(e, r, t) {
+                return t.indexOf(e) === r;
+            })).forEach((function(e) {
+                se[e] = true;
+            }));
+        }
+        // Handles are inserted before and after children to optimize tab order
+                var le = L.slice(0, 4).filter((function(e) {
+            return v.indexOf(e) > -1;
+        })).map(ae);
+        var ce = L.slice(4).filter((function(e) {
+            return v.indexOf(e) > -1;
+        })).map(ae);
+        
+        return n().createElement(b, q({
+            "data-test": "resize",
+            ref: Z
+        }, w),  n().createElement(g, {
+            $borderSides: se
+        }, _ && le, o, _ && ce, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
+            target: window,
+            eventType: "mousemove",
+            listener: ne
+        }),  n().createElement(s(), {
+            target: window,
+            eventType: "mouseup",
+            listener: ee
+        }))));
+    }
+    W.propTypes = B;
+    /* harmony default export */    const V = W;
     // CONCATENATED MODULE: ./src/Resize/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();