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

package/Resize.js

@@ -83,42 +83,42 @@
     const f = require("styled-components");
     var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const p = require("@splunk/themes");
+    const h = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
-    var h = "9px";
+    var p = "9px";
     var w = "14px";
-    var m = "3px";
-    var y = "11px";
+    var y = "3px";
+    var m = "11px";
     var b = v().div.withConfig({
         displayName: "ResizeStyles__Styled",
         componentId: "sc-181mwes-0"
-    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], p.mixins.reset("block"));
+    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], h.mixins.reset("block"));
     var g = v().div.withConfig({
         displayName: "ResizeStyles__StyledBorder",
         componentId: "sc-181mwes-1"
-    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], p.mixins.reset("block"), (0, 
-    p.pick)({
+    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], h.mixins.reset("block"), (0, 
+    h.pick)({
         // TODO(SUI-6298): Should use a semantically correct token
         prisma: {
             light: "#eeeeee",
             dark: "#272a2f"
         },
         enterprise: {
-            dark: p.variables.gray22,
-            light: p.variables.white
+            dark: h.variables.gray22,
+            light: h.variables.white
         }
     }), (function(e) {
         var r = e.$borderSides;
-        return r.n && (0, f.css)([ "border-top-width:", ";" ], h);
+        return r.n && (0, f.css)([ "border-top-width:", ";" ], p);
     }), (function(e) {
         var r = e.$borderSides;
-        return r.e && (0, f.css)([ "border-right-width:", ";" ], h);
+        return r.e && (0, f.css)([ "border-right-width:", ";" ], p);
     }), (function(e) {
         var r = e.$borderSides;
-        return r.s && (0, f.css)([ "border-bottom-width:", ";" ], h);
+        return r.s && (0, f.css)([ "border-bottom-width:", ";" ], p);
     }), (function(e) {
         var r = e.$borderSides;
-        return r.w && (0, f.css)([ "border-left-width:", ";" ], h);
+        return r.w && (0, f.css)([ "border-left-width:", ";" ], p);
     }));
     var S = v().svg.withConfig({
         displayName: "ResizeStyles__StyledCornerSvg",
@@ -132,34 +132,31 @@
         displayName: "ResizeStyles__StyledSideSvg",
         componentId: "sc-181mwes-4"
     })([ "display:block;fill:currentColor;" ]);
-    var x = (0, f.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], p.mixins.reset("block"), (0, 
-    p.pick)({
-        prisma: p.variables.contentColorDefault,
+    var x = (0, f.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], h.mixins.reset("block"), (0, 
+    h.pick)({
+        prisma: h.variables.contentColorDefault,
         enterprise: {
-            dark: p.variables.gray92,
-            light: p.variables.borderColor
+            dark: h.variables.gray92,
+            light: h.variables.borderColor
         }
-    }), (0, p.pick)({
-        prisma: p.variables.interactiveColorPrimary,
-        enterprise: p.variables.contentColorLink
-    }), (function(e) {
+    }), h.variables.contentColorAccent, (function(e) {
         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);
+        return r && n && (0, f.css)([ "background-color:", ";&:active{background-color:", ";}" ], h.variables.borderColorWeak, h.variables.borderColorStrong);
     }), (function(e) {
         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 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 = (0, f.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], x, m, m);
+    var O = (0, f.css)([ "height:100%;" ]);
+    var _ = (0, f.css)([ "width:100%;display:flex;justify-content:center;" ]);
+    var C = (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
+        return r && (0, h.pickVariant)("$cardinalDirection", {
+            n: _,
+            s: _,
+            e: O,
+            w: O
         });
     }));
     var E = function e(r) {
@@ -169,14 +166,14 @@
     var $ = v().button.withConfig({
         displayName: "ResizeStyles__StyledResize",
         componentId: "sc-181mwes-5"
-    })([ "", "" ], (0, p.pickVariant)("$cardinalDirection", {
+    })([ "", "" ], (0, h.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),
+        n: (0, f.css)([ "", ";cursor:ns-resize;top:0;left:", ";padding:", " 0;" ], C, E, y),
         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),
+        w: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:", ";" ], C, y, E),
+        e: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:", ";" ], C, y, 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),
+        s: (0, f.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:", ";" ], C, y, E),
         se: (0, f.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], R)
     }));
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
@@ -211,26 +208,26 @@
         }, q.apply(null, arguments);
     }
     function D(e, r) {
-        return A(e) || M(e, r) || H(e, r) || I();
+        return A(e) || P(e, r) || H(e, r) || I();
     }
     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);
+            if ("string" == typeof e) return M(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;
+            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) ? M(e, r) : void 0;
         }
     }
-    function P(e, r) {
+    function M(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 M(e, r) {
+    function P(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;
@@ -287,8 +284,8 @@
         resizeHandles: o().arrayOf(o().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
         showHandles: o().oneOf([ "always", "on-hover" ])
     };
-    var L = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
-    var K = {
+    var K = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
+    var L = {
         nw: (0, u._)("Resize northwest"),
         n: (0, u._)("Resize north"),
         ne: (0, u._)("Resize northeast"),
@@ -301,14 +298,14 @@
     /**
  * Resize is a utility container with drag handles for resizing.
  */    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" ]);
+        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, h = e.showHandles, p = h === void 0 ? "always" : h, w = T(e, [ "appearance", "children", "elementRef", "keyIncrement", "onRequestResize", "resizeHandles", "showHandles" ]);
         // @docs-props-type ResizePropsBase
                 (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 y = (0, t.useState)(), m = D(y, 2), x = m[0], R = m[1];
+        var O = (0, t.useState)(null), _ = D(O, 2), C = _[0], E = _[1];
+        var I = (0, t.useState)(), H = D(I, 2), M = H[0], P = 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];
@@ -326,14 +323,14 @@
             e.preventDefault();
             e.persist();
             R(r);
-            W(_ === null || _ === void 0 ? void 0 : _.offsetWidth);
-            M(_ === null || _ === void 0 ? void 0 : _.offsetHeight);
+            W(C === null || C === void 0 ? void 0 : C.offsetWidth);
+            P(C === null || C === void 0 ? void 0 : C.offsetHeight);
             F(e.clientX);
             Q(e.clientY);
-        }), [ _ ]);
+        }), [ C ]);
         var te = (0, t.useMemo)((function() {
             var e = {};
-            L.forEach((function(r) {
+            K.forEach((function(r) {
                 e["handleDragStart".concat(r)] = function(e) {
                     re(e, r);
                 };
@@ -345,10 +342,10 @@
             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
+                height: (x === null || x === void 0 ? void 0 : x.match(/^n/)) ? (M || 0) - t : (M || 0) + t
             };
             f(e, n);
-        }), [ x, f, P, B, Y, J ]);
+        }), [ x, f, M, B, Y, J ]);
         var ie = (0, t.useCallback)((function(e, r) {
             var t = (0, d.keycode)(e.nativeEvent);
             var n = r.slice(-1);
@@ -375,18 +372,18 @@
                 }
             };
             var l = (a === "n" || a === "s") && (t === "up" || t === "down") ? s[a][t] : 0;
-            if ((o || l) && _) {
+            if ((o || l) && C) {
                 e.preventDefault();
                 var c = {
-                    width: _.offsetWidth + o * u,
-                    height: _.offsetHeight + l * u
+                    width: C.offsetWidth + o * u,
+                    height: C.offsetHeight + l * u
                 };
                 f(e, c);
             }
-        }), [ _, u, f ]);
+        }), [ C, u, f ]);
         var oe = (0, t.useMemo)((function() {
             var e = {};
-            L.forEach((function(r) {
+            K.forEach((function(r) {
                 e["handleKeyDown".concat(r)] = function(e) {
                     ie(e, r);
                 };
@@ -445,9 +442,9 @@
                 onMouseDown: te["handleDragStart".concat(e)],
                 $cardinalDirection: e,
                 $isSeparator: i === "separator",
-                $showHandles: h
-            }, t,  n().createElement(c(), null, K[e]));
-        }), [ i, te, oe, h ]);
+                $showHandles: p
+            }, t,  n().createElement(c(), null, L[e]));
+        }), [ i, te, oe, p ]);
         /* When appearance is border, determine which sides need margin.
    * Converts ['se', 'n'] to { e: true, s: true, n: true}
    */        var se = {};
@@ -459,10 +456,10 @@
             }));
         }
         // Handles are inserted before and after children to optimize tab order
-                var le = L.slice(0, 4).filter((function(e) {
+                var le = K.slice(0, 4).filter((function(e) {
             return v.indexOf(e) > -1;
         })).map(ae);
-        var ce = L.slice(4).filter((function(e) {
+        var ce = K.slice(4).filter((function(e) {
             return v.indexOf(e) > -1;
         })).map(ae);
         
@@ -471,7 +468,7 @@
             ref: Z
         }, w),  n().createElement(g, {
             $borderSides: se
-        }, _ && le, o, _ && ce, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
+        }, C && le, o, C && ce, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
             target: window,
             eventType: "mousemove",
             listener: ne

package/Scroll.js

@@ -144,8 +144,8 @@
         // CONCATENATED MODULE: external "lodash/omit"
         const v = require("lodash/omit");
         var y =  r.n(v);
-        // CONCATENATED MODULE: external "react-spring"
-        const m = require("react-spring");
+        // CONCATENATED MODULE: external "@react-spring/web"
+        const m = require("@react-spring/web");
         // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
         const b = require("@splunk/react-ui/EventListener");
         var g =  r.n(b);