@splunk/react-ui 4.35.0 → 4.36.0

package/Resize.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ G
+        default: () => /* reexport */ U
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -73,8 +73,8 @@
     const a = require("lodash/keys");
     var s =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
-    const l = require("lodash/omit");
-    var c =  e.n(l);
+    const c = require("lodash/omit");
+    var l =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
     const u = require("@splunk/react-ui/EventListener");
     var d =  e.n(u);
@@ -89,86 +89,104 @@
     const y = require("styled-components");
     var w =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
-    var b = "9px";
+    var m = "9px";
     var g = "14px";
     var S = "3px";
-    var z = "11px";
-    var R = w().div.withConfig({
+    var k = "11px";
+    var x = w().div.withConfig({
         displayName: "ResizeStyles__Styled",
         componentId: "sc-181mwes-0"
-    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], m.mixins.reset("block"));
-    var _ = w().div.withConfig({
+    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], b.mixins.reset("block"));
+    var z = w().div.withConfig({
         displayName: "ResizeStyles__StyledBorder",
         componentId: "sc-181mwes-1"
-    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], m.mixins.reset("block"), (0, 
-    m.pick)({
-        prisma: m.variables.interactiveColorBackground,
+    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], b.mixins.reset("block"), (0, 
+    b.pick)({
+        prisma: b.variables.interactiveColorBackground,
         enterprise: {
-            dark: m.variables.gray22,
-            light: m.variables.white
+            dark: b.variables.gray22,
+            light: b.variables.white
         }
     }), (function(e) {
         var t = e.$borderSides;
-        return t.n && (0, y.css)([ "border-top-width:", ";" ], b);
+        return t.n && (0, y.css)([ "border-top-width:", ";" ], m);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.e && (0, y.css)([ "border-right-width:", ";" ], b);
+        return t.e && (0, y.css)([ "border-right-width:", ";" ], m);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.s && (0, y.css)([ "border-bottom-width:", ";" ], b);
+        return t.s && (0, y.css)([ "border-bottom-width:", ";" ], m);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.w && (0, y.css)([ "border-left-width:", ";" ], b);
+        return t.w && (0, y.css)([ "border-left-width:", ";" ], m);
     }));
-    var x = w().svg.withConfig({
+    var R = w().svg.withConfig({
         displayName: "ResizeStyles__StyledCornerSvg",
         componentId: "sc-181mwes-2"
     })([ "display:block;stroke:currentColor;" ]);
-    var O = w().path.withConfig({
+    var _ = w().path.withConfig({
         displayName: "ResizeStyles__StyledCornerPath",
         componentId: "sc-181mwes-3"
     })([ "stroke-width:1.1px;" ]);
-    var k = w().svg.withConfig({
+    var O = w().svg.withConfig({
         displayName: "ResizeStyles__StyledSideSvg",
         componentId: "sc-181mwes-4"
     })([ "display:block;fill:currentColor;" ]);
-    var D = (0, y.css)([ "", ";color:", ";&:hover,&:focus{color:", ";}", "" ], m.mixins.reset("block"), (0, 
-    m.pick)({
-        prisma: m.variables.contentColorDefault,
+    var D = (0, y.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], b.mixins.reset("block"), (0, 
+    b.pick)({
+        prisma: b.variables.contentColorDefault,
         enterprise: {
-            dark: m.variables.gray92,
-            light: m.variables.borderColor
+            dark: b.variables.gray92,
+            light: b.variables.borderColor
         }
-    }), (0, m.pick)({
-        prisma: m.variables.interactiveColorPrimary,
-        enterprise: m.variables.linkColor
+    }), (0, b.pick)({
+        prisma: b.variables.interactiveColorPrimary,
+        enterprise: b.variables.linkColor
+    }), (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);
     }), (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 */
-        R);
+        x);
+    }));
+    var E = (0, y.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], D, k, k);
+    var C = (0, y.css)([ "height:100%;" ]);
+    var j = (0, y.css)([ "width:100%;display:flex;justify-content:center;" ]);
+    var $ = (0, y.css)([ "", ";position:absolute;z-index:1;", "" ], D, (function(e) {
+        var t = e.$isSeparator;
+        return t && (0, b.pickVariant)("$cardinalDirection", {
+            n: j,
+            s: j,
+            e: C,
+            w: C
+        });
     }));
-    var E = (0, y.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], D, z, z);
-    var C = (0, y.css)([ "", ";position:absolute;z-index:1;" ], D);
-    var j = w().button.withConfig({
+    var q = function e(t) {
+        var r = t.$isSeparator;
+        return r ? "0" : "calc(50% - ".concat(g, " / 2)");
+    };
+    var P = w().button.withConfig({
         displayName: "ResizeStyles__StyledResize",
         componentId: "sc-181mwes-5"
-    })([ "", "" ], (0, m.pickVariant)("$cardinalDirection", {
+    })([ "", "" ], (0, b.pickVariant)("$cardinalDirection", {
         nw: (0, y.css)([ "", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], E, 
         /* sc-sel */
-        x),
-        n: (0, y.css)([ "", ";cursor:ns-resize;top:0;left:calc(50% - ", " / 2);padding:", " 0;" ], C, g, S),
+        R),
+        n: (0, y.css)([ "", ";cursor:ns-resize;top:0;left:", ";padding:", " 0;" ], $, q, S),
         ne: (0, y.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], E, 
         /* sc-sel */
-        x),
-        w: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:calc(50% - ", " / 2);" ], C, S, g),
-        e: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:calc(50% - ", " / 2);" ], C, S, g),
+        R),
+        w: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:", ";" ], $, S, q),
+        e: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:", ";" ], $, S, q),
         sw: (0, y.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], E, 
         /* sc-sel */
-        x),
-        s: (0, y.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:calc(50% - ", " / 2);" ], C, S, g),
+        R),
+        s: (0, y.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:", ";" ], $, S, q),
         se: (0, y.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], E)
     }));
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
@@ -178,7 +196,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function q(e, t) {
+    function H(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -191,21 +209,21 @@
         }
     }
     // CONCATENATED MODULE: ./src/Resize/Resize.tsx
-    function P(e) {
+    function I(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            P = function e(t) {
+            I = function e(t) {
                 return typeof t;
             };
         } else {
-            P = function e(t) {
+            I = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return P(e);
+        return I(e);
     }
-    function H() {
-        H = Object.assign || function(e) {
+    function T() {
+        T = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -216,14 +234,14 @@
             }
             return e;
         };
-        return H.apply(this, arguments);
+        return T.apply(this, arguments);
     }
-    function $(e, t) {
+    function M(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function I(e, t) {
+    function N(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -232,12 +250,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function T(e, t, r) {
-        if (t) I(e.prototype, t);
-        if (r) I(e, r);
+    function B(e, t, r) {
+        if (t) N(e.prototype, t);
+        if (r) N(e, r);
         return e;
     }
-    function M(e, t) {
+    function K(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -248,41 +266,41 @@
                 configurable: true
             }
         });
-        if (t) N(e, t);
+        if (t) L(e, t);
     }
-    function N(e, t) {
-        N = Object.setPrototypeOf || function e(t, r) {
+    function L(e, t) {
+        L = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return N(e, t);
+        return L(e, t);
     }
-    function B(e) {
-        var t = W();
+    function W(e) {
+        var t = V();
         return function r() {
-            var n = X(e), o;
+            var n = A(e), o;
             if (t) {
-                var i = X(this).constructor;
+                var i = A(this).constructor;
                 o = Reflect.construct(n, arguments, i);
             } else {
                 o = n.apply(this, arguments);
             }
-            return K(this, o);
+            return X(this, o);
         };
     }
-    function K(e, t) {
-        if (t && (P(t) === "object" || typeof t === "function")) {
+    function X(e, t) {
+        if (t && (I(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return L(e);
+        return Y(e);
     }
-    function L(e) {
+    function Y(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function W() {
+    function V() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -293,13 +311,13 @@
             return false;
         }
     }
-    function X(e) {
-        X = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function A(e) {
+        A = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return X(e);
+        return A(e);
     }
-    function Y(e, t, r) {
+    function F(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -312,8 +330,8 @@
         }
         return e;
     }
-    var A = {
-        appearance: i().oneOf([ "border", "overlay" ]),
+    var G = {
+        appearance: i().oneOf([ "border", "overlay", "separator" ]),
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         keyIncrement: i().number,
@@ -321,28 +339,28 @@
         resizeHandles: i().arrayOf(i().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
         showHandles: i().oneOf([ "always", "on-hover" ])
     };
-    var F = {
+    var J = {
         appearance: "overlay",
         keyIncrement: 10,
         showHandles: "always"
     };
     /**
  * Resize is a utility container with drag handles for resizing.
- */    var V =  function(e) {
-        M(r, e);
-        var t = B(r);
+ */    var Q =  function(e) {
+        K(r, e);
+        var t = W(r);
         // @docs-props-type ResizePropsBase
                 function r(e) {
             var o;
-            $(this, r);
+            M(this, r);
             o = t.call(this, e);
-            Y(L(o), "handleMount", (function(e) {
+            F(Y(o), "handleMount", (function(e) {
                 o.setState({
                     el: e
                 });
-                q(o.props.elementRef, e);
+                H(o.props.elementRef, e);
             }));
-            Y(L(o), "handleDragStart", (function(e, t) {
+            F(Y(o), "handleDragStart", (function(e, t) {
                 if (e.button > 0) {
                     return;
                 }
@@ -359,14 +377,14 @@
                     };
                 }));
             }));
-            Y(L(o), "handleDragEnd", (function() {
+            F(Y(o), "handleDragEnd", (function() {
                 o.setState({
                     dragDirection: undefined
                 });
             }));
-            Y(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, l = t.startX, c = l === void 0 ? 0 : l, u = t.startY, d = u === void 0 ? 0 : u;
-                var f = (r === null || r === void 0 ? void 0 : r.match(/(w|e)$/)) ? e.clientX - c : 0;
+            F(Y(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 h = {
                     width: (r === null || r === void 0 ? void 0 : r.match(/w$/)) ? i - f : i + f,
@@ -374,7 +392,7 @@
                 };
                 o.props.onRequestResize(e, h);
             }));
-            Y(L(o), "handleKeyDown", (function(e, t) {
+            F(Y(o), "handleKeyDown", (function(e, t) {
                 var r = o.props.keyIncrement;
                 var n = (0, v.keycode)(e.nativeEvent);
                 var i = t.slice(-1);
@@ -389,8 +407,8 @@
                     }
                 };
                 var s = (i === "e" || i === "w") && (n === "right" || n === "left") ? a[i][n] : 0;
-                var l = t.charAt(0);
-                var c = {
+                var c = t.charAt(0);
+                var l = {
                     n: {
                         down: -1,
                         up: 1
@@ -400,7 +418,7 @@
                         up: -1
                     }
                 };
-                var u = (l === "n" || l === "s") && (n === "up" || n === "down") ? c[l][n] : 0;
+                var u = (c === "n" || c === "s") && (n === "up" || n === "down") ? l[c][n] : 0;
                 if ((s || u) && o.state.el) {
                     e.preventDefault();
                     var d = {
@@ -410,20 +428,20 @@
                     o.props.onRequestResize(e, d);
                 }
             }));
-            Y(L(o), "renderHandle", (function(e) {
-                var t = o.props.showHandles;
-                var i = e.length > 1;
-                var a;
-                if (i) {
-                    a =  n().createElement(x, {
+            F(Y(o), "renderHandle", (function(e) {
+                var t = o.props, i = t.showHandles, a = t.appearance;
+                var s = e.length > 1;
+                var c;
+                if (s) {
+                    c =  n().createElement(R, {
                         viewBox: "0 0 11 11",
                         width: "11px",
                         height: "11px"
-                    },  n().createElement(O, {
+                    },  n().createElement(_, {
                         d: "M0 8 L 8 0 M4 8 L 8 4"
                     }));
                 } else if (e === "n" || e === "s") {
-                    a =  n().createElement(k, {
+                    c =  n().createElement(O, {
                         viewBox: "0 0 14 3",
                         width: "14px",
                         height: "3px"
@@ -439,7 +457,7 @@
                         y: "2"
                     }));
                 } else if (e === "e" || e === "w") {
-                    a =  n().createElement(k, {
+                    c =  n().createElement(O, {
                         viewBox: "0 0 3 14",
                         width: "3px",
                         height: "14px"
@@ -456,18 +474,20 @@
                     }));
                 }
                 
-                return n().createElement(j, {
+                return n().createElement(P, {
                     key: e,
                     "data-test": "resize-handle-".concat(e),
                     onMouseDown: o["handleDragStart".concat(e)],
                     onKeyDown: o["handleKeyDown".concat(e)],
-                    $showHandles: t,
-                    $cardinalDirection: e
-                }, a,  n().createElement(p(), null, r.handleLabels[e]));
+                    $showHandles: i,
+                    $cardinalDirection: e,
+                    $isSeparator: a === "separator"
+                }, c,  n().createElement(p(), null, r.handleLabels[e]));
             }));
             o.state = {
                 el: null
             };
+            if (false) {}
  // Generate handlers for each direction.
                         r.handleOrder.forEach((function(e) {
                 // @ts-expect-error - dynamic function creation
@@ -481,11 +501,11 @@
             }));
             return o;
         }
-        T(r, [ {
+        B(r, [ {
             key: "render",
             value: function e() {
                 var t = this.props, o = t.appearance, i = t.children, a = t.resizeHandles;
-                var l = this.state, u = l.dragDirection, f = l.el;
+                var c = this.state, u = c.dragDirection, f = c.el;
  // Handles are inserted before and after children to optimize tab order
                                 var p = r.handleOrder.slice(0, 4).filter((function(e) {
                     return a.indexOf(e) > -1;
@@ -504,10 +524,10 @@
                     }));
                 }
                 
-                return n().createElement(R, H({
+                return n().createElement(x, T({
                     "data-test": "resize",
                     ref: this.handleMount
-                }, c()(this.props, s()(r.propTypes))),  n().createElement(_, {
+                }, l()(this.props, s()(r.propTypes))),  n().createElement(z, {
                     $borderSides: v
                 }, f && p, i, f && h, u &&  n().createElement(n().Fragment, null,  n().createElement(d(), {
                     target: window,
@@ -522,10 +542,10 @@
         } ]);
         return r;
     }(r.Component);
-    Y(V, "propTypes", A);
-    Y(V, "defaultProps", F);
-    Y(V, "handleOrder", [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ]);
-    Y(V, "handleLabels", {
+    F(Q, "propTypes", G);
+    F(Q, "defaultProps", J);
+    F(Q, "handleOrder", [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ]);
+    F(Q, "handleLabels", {
         nw: (0, h._)("Resize northwest"),
         n: (0, h._)("Resize north"),
         ne: (0, h._)("Resize northeast"),
@@ -535,7 +555,7 @@
         s: (0, h._)("Resize south"),
         se: (0, h._)("Resize southeast")
     });
-    /* harmony default export */    const G = V;
+    /* harmony default export */    const U = Q;
     // CONCATENATED MODULE: ./src/Resize/index.ts
     module.exports = t;
     /******/})();

package/Slider.js

@@ -113,7 +113,10 @@
     var O = function e(t) {
         var r = t.$error;
         return (0, h.pick)({
-            enterprise: h.variables.gray45,
+            enterprise: {
+                light: h.variables.gray22,
+                dark: h.variables.white
+            },
             prisma: r ? h.variables.accentColorNegative : h.variables.contentColorActive
         });
     };
@@ -125,7 +128,7 @@
         prisma: h.variables.neutral100
     });
     var $ = (0, h.pick)({
-        enterprise: h.variables.gray80,
+        enterprise: h.variables.gray60,
         prisma: h.variables.interactiveColorBorder
     });
     var _ = function e(t) {
@@ -177,7 +180,10 @@
         enterprise: "9px",
         prisma: "10px"
     }), (0, h.pick)({
-        enterprise: h.variables.gray45,
+        enterprise: {
+            light: h.variables.gray22,
+            dark: h.variables.white
+        },
         prisma: h.variables.contentColorActive
     }), (0, h.pick)({
         enterprise: "6px",