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

package/TransitionOpen.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,16 +56,16 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
+        e.d(t, {
         default: () => /* reexport */ H
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
@@ -78,8 +78,8 @@
     const s = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
     const c = require("@splunk/ui-utils/style");
-    // CONCATENATED MODULE: external "react-spring"
-    const f = require("react-spring");
+    // CONCATENATED MODULE: external "@react-spring/web"
+    const f = require("@react-spring/web");
     // CONCATENATED MODULE: external "styled-components"
     const d = require("styled-components");
     var m =  e.n(d);
@@ -90,68 +90,87 @@
         displayName: "TransitionOpenStyles__Styled",
         componentId: "sc-1x58s0g-0"
     })([ "", ";", ";" ], p.mixins.reset("block"), (function(e) {
-        var r = e.$hideOverflow;
-        return r && (0, d.css)([ "overflow:hidden;" ]);
+        var t = e.$hideOverflow;
+        return t && (0, d.css)([ "overflow:hidden;" ]);
     }));
     var y = m()(f.animated.div).withConfig({
         displayName: "TransitionOpenStyles__StyledInner",
         componentId: "sc-1x58s0g-1"
     })([ "", ";", ";width:100%;" ], p.mixins.reset("table"), p.mixins.clearfix());
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function b(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                e(t);
+            } 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;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
     // CONCATENATED MODULE: ./src/TransitionOpen/TransitionOpen.tsx
-    function b(e) {
+    function h(e) {
         "@babel/helpers - typeof";
-        return b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return h = "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;
-        }, b(e);
+        }, h(e);
     }
-    function h() {
-        return h = 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]);
+    function g() {
+        return g = 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]);
                 }
             }
             return e;
-        }, h.apply(null, arguments);
+        }, g.apply(null, arguments);
     }
-    function g(e, r) {
-        return P(e) || w(e, r) || S(e, r) || O();
+    function O(e, t) {
+        return k(e) || P(e, t) || j(e, t) || S();
     }
-    function O() {
+    function S() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function S(e, r) {
+    function j(e, t) {
         if (e) {
-            if ("string" == typeof e) return j(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) ? j(e, r) : void 0;
+            if ("string" == typeof e) return w(e, t);
+            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) ? w(e, t) : void 0;
         }
     }
-    function j(e, r) {
-        (null == r || r > e.length) && (r = e.length);
-        for (var t = 0, n = Array(r); t < r; t++) {
-            n[t] = e[t];
+    function w(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var r = 0, n = Array(t); r < t; r++) {
+            n[r] = e[r];
         }
         return n;
     }
-    function w(e, r) {
-        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != t) {
+    function P(e, t) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
             var n, o, i, a, u = [], l = !0, s = !1;
             try {
-                if (i = (t = t.call(e)).next, 0 === r) {
-                    if (Object(t) !== t) return;
+                if (i = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
                     l = !1;
-                } else for (;!(l = (n = i.call(t)).done) && (u.push(n.value), u.length !== r); l = !0) {
+                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
@@ -159,78 +178,79 @@
             return u;
         }
     }
-    function P(e) {
+    function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function k(e, r) {
+    function F(e, t) {
         if (null == e) return {};
-        var t, n, o = F(e, r);
+        var r, n, o = C(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
         return o;
     }
-    function F(e, r) {
+    function C(e, t) {
         if (null == e) return {};
-        var t = {};
+        var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                t[n] = e[n];
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    function C(e, r) {
-        var t = Object.keys(e);
+    function x(e, t) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            r && (n = n.filter((function(r) {
-                return Object.getOwnPropertyDescriptor(e, r).enumerable;
-            }))), t.push.apply(t, n);
+            t && (n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            }))), r.push.apply(r, n);
         }
-        return t;
+        return r;
     }
-    function x(e) {
-        for (var r = 1; r < arguments.length; r++) {
-            var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? C(Object(t), !0).forEach((function(r) {
-                N(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : C(Object(t)).forEach((function(r) {
-                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    function N(e) {
+        for (var t = 1; t < arguments.length; t++) {
+            var r = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? x(Object(r), !0).forEach((function(t) {
+                T(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : x(Object(r)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function N(e, r, t) {
-        return (r = E(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
+    function T(e, t, r) {
+        return (t = E(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[r] = t, e;
+        }) : e[t] = r, e;
     }
     function E(e) {
-        var r = T(e, "string");
-        return "symbol" == b(r) ? r : r + "";
+        var t = A(e, "string");
+        return "symbol" == h(t) ? t : t + "";
     }
-    function T(e, r) {
-        if ("object" != b(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, r || "default");
-            if ("object" != b(n)) return n;
+    function A(e, t) {
+        if ("object" != h(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var n = r.call(e, t || "default");
+            if ("object" != h(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === r ? String : Number)(e);
+        return ("string" === t ? String : Number)(e);
     }
-    var A = {
+    var I = {
         animation: i().oneOf([ "slideFromTop", "slideFromRight", "slideFromBottom", "slideFromLeft", "expandHeight", "expandWidth", "none" ]),
         animateOnMount: i().bool,
         children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
         className: i().string,
         id: i().string,
         innerClassName: i().string,
@@ -244,29 +264,29 @@
         retainFocus: i().bool,
         takeFocus: i().bool
     };
-    var I = function e(r) {
-        var t;
-        switch (r) {
+    var q = function e(t) {
+        var r;
+        switch (t) {
           case "slideFromTop":
           case "slideFromBottom":
           case "expandHeight":
           case "none":
-            t = "height";
+            r = "height";
             break;
 
           case "slideFromLeft":
           case "slideFromRight":
           case "expandWidth":
-            t = "width";
+            r = "width";
             break;
 
           default:
  // Intentionally left empty.
                 }
-        return t;
+        return r;
     };
-    var q = function e(r) {
-        var t = r.animation, n = r.open, o = r.value;
+    var M = function e(t) {
+        var r = t.animation, n = t.open, o = t.value;
         var i = {
             value: n ? o : 0
         };
@@ -278,7 +298,7 @@
         };
  // Only use precision when not using transform, otherwise transform animation will break
         // Expansion doesn't require a valid value; the subsequent render animates it.
-                if (t === "expandWidth" || t === "expandHeight" || t === "none") {
+                if (r === "expandWidth" || r === "expandHeight" || r === "none") {
             return {
                 to: i,
                 config: u
@@ -288,7 +308,7 @@
                 if (!o) {
             return null;
         }
-        if (t !== "slideFromTop" && t !== "slideFromLeft") {
+        if (r !== "slideFromTop" && r !== "slideFromLeft") {
             // Return the standard transition if not using a transform.
             return {
                 to: i,
@@ -298,26 +318,26 @@
         }
         // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
         // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
-                var l = t === "slideFromTop" ? "Y" : "X";
+                var l = r === "slideFromTop" ? "Y" : "X";
         var s = "translate".concat(l, "(").concat(n ? 0 : -o, "px)");
         var c = "translate".concat(l, "(").concat(n ? -o : 0, "px)");
         return {
-            to: x({
+            to: N({
                 transform: s
             }, i),
-            from: x({
+            from: N({
                 transform: c
             }, a)
         };
     };
-    var M = function e(r) {
-        var t = r.animation, n = r.el, o = r.takeFocusProp;
+    var _ = function e(t) {
+        var r = t.animation, n = t.el, o = t.takeFocusProp;
         var i = 0;
         if (n) {
             if (o) {
                 (0, s.takeFocus)(n, "container");
             }
-            var a = I(t);
+            var a = q(r);
             switch (a) {
               case "height":
                 i = n.offsetHeight;
@@ -333,89 +353,90 @@
         }
         return i;
     };
-    var _ = {};
+    var R = {};
     var W = {};
     function D(e) {
-        var r = e.animation, o = r === void 0 ? "expandHeight" : r, i = e.animateOnMount, u = e.children, f = e.className, d = e.id, m = e.innerClassName, p = e.innerStyle, b = p === void 0 ? _ : p, O = e.onAnimationEnd, S = e.open, j = e.outerClassName, w = e.outerId, P = e.outerStyle, F = P === void 0 ? W : P, C = e.renderChildrenWhenCollapsed, E = e.retainFocus, T = e.takeFocus, A = k(e, [ "animation", "animateOnMount", "children", "className", "id", "innerClassName", "innerStyle", "onAnimationEnd", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
+        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, u = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? R : h, j = e.onAnimationEnd, w = e.open, P = e.outerClassName, k = e.outerId, C = e.outerStyle, x = C === void 0 ? W : C, E = e.renderChildrenWhenCollapsed, A = e.retainFocus, I = e.takeFocus, D = F(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
         // @docs-props-type TransitionOpenPropsBase
-                var D = l()(S);
-        var H = (0, t.useRef)(true);
-        var R = (0, t.useState)(i ? S : false), L = g(R, 2), $ = L[0], B = L[1];
-        var K = (0, t.useState)(null), U = g(K, 2), X = U[0], Y = U[1];
-        var z = (0, t.useState)(0), G = g(z, 2), J = G[0], Q = G[1];
-        (0, t.useEffect)((function() {
+                var H = l()(w);
+        var L = (0, r.useRef)(true);
+        var $ = (0, r.useState)(i ? w : false), B = O($, 2), K = B[0], U = B[1];
+        var X = (0, r.useState)(null), Y = O(X, 2), z = Y[0], G = Y[1];
+        var J = (0, r.useState)(0), Q = O(J, 2), V = Q[0], Z = Q[1];
+        (0, r.useEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
-            if (D !== undefined && S !== D) {
-                B(true);
+            if (H !== undefined && w !== H) {
+                U(true);
             }
-        }), [ S, D ]);
+        }), [ w, H ]);
         // equivalent to componentWillUnmount
-                (0, t.useEffect)((function() {
+                (0, r.useEffect)((function() {
             return function() {
-                H.current = false;
+                L.current = false;
             };
         }), []);
-        var V = (0, t.useCallback)((function(e) {
-            Y(e);
-            Q(M({
+        var ee = (0, r.useCallback)((function(e) {
+            G(e);
+            Z(_({
                 animation: o,
                 el: e,
-                takeFocusProp: T
+                takeFocusProp: I
             }));
-        }), [ o, T ]);
-        var Z = (0, t.useCallback)((function() {
-            if (H.current) {
-                B(false);
+            b(d, e);
+        }), [ o, I, d ]);
+        var te = (0, r.useCallback)((function() {
+            if (L.current) {
+                U(false);
             }
-            O === null || O === void 0 ? void 0 : O();
-        }), [ O ]);
-        var ee = (0, t.useCallback)((function(e) {
-            if (X) {
-                (0, s.handleTab)(X, e);
+            j === null || j === void 0 ? void 0 : j();
+        }), [ j ]);
+        var re = (0, r.useCallback)((function(e) {
+            if (z) {
+                (0, s.handleTab)(z, e);
             }
-        }), [ X ]);
-        var re = (0, a.useAnimation)(x(x({}, q({
+        }), [ z ]);
+        var ne = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: S,
-            value: J
+            open: w,
+            value: V
         })), {}, {
             immediate: o === "none",
-            onRest: Z
-        })), te = re.value, ne = re.transform;
-        var oe;
-        if ($ || C) {
-            oe = I(o);
+            onRest: te
+        })), oe = ne.value, ie = ne.transform;
+        var ae;
+        if (K || E) {
+            ae = q(o);
         }
         // if renderChildrenWhenCollapsed is true, we hide the content by setting the height of the wrapper to 0
-                var ie = C && !S && !$ ? 0 : te;
-        var ae = (0, t.useMemo)((function() {
-            return x(x({}, F), oe && N({}, oe, ie));
-        }), [ oe, ie, F ]);
-        var ue = (0, t.useMemo)((function() {
+                var ue = E && !w && !K ? 0 : oe;
+        var le = (0, r.useMemo)((function() {
+            return N(N({}, x), ae && T({}, ae, ue));
+        }), [ ae, ue, x ]);
+        var se = (0, r.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return x(x({}, b), {}, {
-                transform: ne
+            return N(N({}, S), {}, {
+                transform: ie
             });
-        }), [ b, ne ]);
+        }), [ S, ie ]);
         
         return n().createElement(v, {
-            $hideOverflow: !S || $ || false,
-            className: (0, c.toClassName)(f, j),
-            style: ae,
-            id: w
-        }, (S || $ || C) &&  n().createElement(y, h({
+            $hideOverflow: !w || K || false,
+            className: (0, c.toClassName)(f, P),
+            style: le,
+            id: k
+        }, (w || K || E) &&  n().createElement(y, g({
             "data-test": "transition-open"
-        }, A, {
-            ref: V,
+        }, D, {
+            ref: ee,
             tabIndex: -1,
-            className: m,
-            id: d,
-            onKeyDown: E ? ee : undefined,
-            style: ue
+            className: p,
+            id: m,
+            onKeyDown: A ? re : undefined,
+            style: se
         }), u));
     }
-    D.propTypes = A;
+    D.propTypes = I;
     /* harmony default export */    const H = D;
     // CONCATENATED MODULE: ./src/TransitionOpen/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();

package/Tree.d.ts

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

package/WaitSpinner.js

@@ -113,7 +113,7 @@
     f.pickVariant)("$size", {
         small: f.variables.contentColorDefault,
         medium: f.variables.contentColorDefault,
-        large: f.variables.interactiveColorPrimary
+        large: f.variables.contentColorAccent
     }), (function(e) {
         var t = e.$animated;
         return t && (0, l.css)([ "animation:", " ", " infinite;" ], h, p);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.4",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,16 +44,15 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "5.0.0-beta.2",
-    "@splunk/themes": "1.0.0-beta.2",
+    "@react-spring/web": "^9.7.5",
+    "@splunk/react-icons": "5.0.0-beta.4",
+    "@splunk/themes": "1.0.0-beta.4",
     "@splunk/ui-utils": "^1.8.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-markdown": "^8.0.7",
-    "react-resize-detector": "^3.2.1",
-    "react-spring": "9.2.4",
     "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
@@ -86,14 +85,13 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "axe-html-reporter": "^2.2.3",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
@@ -139,7 +137,7 @@
     "storybook": "^7.6.17",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",