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

package/SplitButton.js

@@ -61,8 +61,8 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Item: () => /* reexport */ J,
-        default: () => /* reexport */ X
+        Item: () => /* reexport */ K,
+        default: () => /* reexport */ Y
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -83,17 +83,17 @@
     const f = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const d = require("styled-components");
-    var b =  e.n(d);
+    var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const v = require("@splunk/react-ui/Button");
-    var y =  e.n(v);
+    const b = require("@splunk/react-ui/Button");
+    var y =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const m = require("@splunk/react-ui/Box");
-    var h =  e.n(m);
+    const h = require("@splunk/react-ui/Box");
+    var m =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
     const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SplitButton/SplitButtonStyles.ts
-    var O = b()(y()).withConfig({
+    var O = v()(y()).withConfig({
         displayName: "SplitButtonStyles__StyledButton",
         componentId: "sc-9igsyh-0"
     })([ "", "" ], (0, g.pick)({
@@ -102,7 +102,7 @@
             return t === "default" && (0, d.css)([ "&:first-child{border-right:1px solid ", ";}" ], g.variables.interactiveColorBorder);
         }
     }));
-    var w = b()(h()).withConfig({
+    var w = v()(m()).withConfig({
         displayName: "SplitButtonStyles__StyledSeparator",
         componentId: "sc-9igsyh-1"
     })([ "width:", ";height:", ";background-color:", ";" ], (0, g.pick)({
@@ -130,27 +130,45 @@
             }
         }
     }));
-    var k = b()(h()).withConfig({
-        displayName: "SplitButtonStyles__StyledBox",
+    var k = v().div.withConfig({
+        displayName: "SplitButtonStyles__StyledDiv",
         componentId: "sc-9igsyh-2"
-    })([ "", " [data-inline] + &{margin-left:", ";}" ], (function(e) {
+    })([ "", " ", "" ], g.mixins.reset("inline-flex"), (function(e) {
         var r = e.$inline;
         return !r && (0, d.css)([ "width:100%;" ]);
-    }), g.variables.spacingSmall);
+    }));
     // CONCATENATED MODULE: external "lodash/omit"
     const S = require("lodash/omit");
     var j =  e.n(S);
+    // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
+    // A utility that attempts to move an element into view by scrolling it's derived parent.
+    var P = function e(r) {
+        if (!r) {
+            return;
+        }
+        var t = r.offsetParent;
+        if (!t) {
+            return;
+        }
+        // Below the bottom of the container.
+                if (t.scrollTop + t.clientHeight < r.offsetTop + r.clientHeight) {
+            t.scrollTop = r.offsetTop + r.clientHeight - t.clientHeight;
+            // Above the top of the container.
+                } else if (t.scrollTop > r.offsetTop) {
+            t.scrollTop = r.offsetTop;
+        }
+    };
     // CONCATENATED MODULE: ./src/SplitButton/Item.tsx
-    function P(e) {
+    function _(e) {
         "@babel/helpers - typeof";
-        return P = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return _ = "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;
-        }, P(e);
+        }, _(e);
     }
-    function _() {
-        return _ = Object.assign ? Object.assign.bind() : function(e) {
+    function C() {
+        return C = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -158,11 +176,11 @@
                 }
             }
             return e;
-        }, _.apply(null, arguments);
+        }, C.apply(null, arguments);
     }
-    function C(e, r) {
+    function E(e, r) {
         if (null == e) return {};
-        var t, n, i = E(e, r);
+        var t, n, i = T(e, r);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
@@ -171,7 +189,7 @@
         }
         return i;
     }
-    function E(e, r) {
+    function T(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -182,7 +200,7 @@
         }
         return t;
     }
-    function I(e, r) {
+    function R(e, r) {
         if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
     }
     function q(e, r) {
@@ -192,7 +210,7 @@
             Object.defineProperty(e, A(n.key), n);
         }
     }
-    function B(e, r, t) {
+    function I(e, r, t) {
         return r && q(e.prototype, r), t && q(e, t), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
@@ -207,26 +225,26 @@
             }
         }), Object.defineProperty(e, "prototype", {
             writable: !1
-        }), r && M(e, r);
+        }), r && B(e, r);
     }
-    function M(e, r) {
-        return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
+    function B(e, r) {
+        return B = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
             return e.__proto__ = r, e;
-        }, M(e, r);
+        }, B(e, r);
     }
-    function T(e) {
-        var r = V();
+    function M(e) {
+        var r = $();
         return function() {
-            var t, n = $(e);
+            var t, n = D(e);
             if (r) {
-                var i = $(this).constructor;
+                var i = D(this).constructor;
                 t = Reflect.construct(n, arguments, i);
             } else t = n.apply(this, arguments);
-            return R(this, t);
+            return H(this, t);
         };
     }
-    function R(e, r) {
-        if (r && ("object" == P(r) || "function" == typeof r)) return r;
+    function H(e, r) {
+        if (r && ("object" == _(r) || "function" == typeof r)) return r;
         if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
         return N(e);
     }
@@ -234,20 +252,20 @@
         if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         return e;
     }
-    function V() {
+    function $() {
         try {
             var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
         } catch (e) {}
-        return (V = function r() {
+        return ($ = function r() {
             return !!e;
         })();
     }
-    function $(e) {
-        return $ = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function D(e) {
+        return D = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, $(e);
+        }, D(e);
     }
-    function D(e, r, t) {
+    function V(e, r, t) {
         return (r = A(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
@@ -256,45 +274,45 @@
         }) : e[r] = t, e;
     }
     function A(e) {
-        var r = H(e, "string");
-        return "symbol" == P(r) ? r : r + "";
+        var r = z(e, "string");
+        return "symbol" == _(r) ? r : r + "";
     }
-    function H(e, r) {
-        if ("object" != P(e) || !e) return e;
+    function z(e, r) {
+        if ("object" != _(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var n = t.call(e, r || "default");
-            if ("object" != P(n)) return n;
+            if ("object" != _(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    var z = {
+    var F = {
         appearance: o().oneOf([ "default", "primary", "destructive" ]),
         children: o().node,
         disabled: o().bool,
         isMain: o().bool,
         onClick: o().func
     };
-    var F = {
+    var G = {
         appearance: "default"
     };
     /**
  * An item within a `SplitButton`. This inherits from
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
- */    var G =  function(e) {
+ */    var J =  function(e) {
         x(t, e);
-        var r = T(t);
+        var r = M(t);
         function t() {
             var e;
-            I(this, t);
-            for (var n = arguments.length, i = new Array(n), o = 0; o < n; o++) {
-                i[o] = arguments[o];
+            R(this, t);
+            for (var i = arguments.length, o = new Array(i), a = 0; a < i; a++) {
+                o[a] = arguments[a];
             }
-            e = r.call.apply(r, [ this ].concat(i));
-            D(N(e), "item", null);
-            D(N(e), "handleClick", (function(r) {
+            e = r.call.apply(r, [ this ].concat(o));
+            V(N(e), "itemRef",  n().createRef());
+            V(N(e), "handleClick", (function(r) {
                 var t = e.props, n = t.disabled, i = t.onClick;
                 if (!n) {
                     i === null || i === void 0 ? void 0 : i(r);
@@ -303,12 +321,11 @@
             return e;
         }
  // @docs-props-type ItemPropsBase
-                B(t, [ {
+                I(t, [ {
             key: "scrollIntoViewIfNeeded",
             // eslint-disable-next-line react/no-unused-class-component-methods
             value: function e() {
-                var r;
-                (r = this.item) === null || r === void 0 ? void 0 : r.scrollIntoViewIfNeeded();
+                P(this.itemRef.current);
             }
             /**
      * Place focus on the item.
@@ -317,41 +334,38 @@
                 }, {
             key: "focus",
             value: function e() {
-                var r;
-                (r = this.item) === null || r === void 0 ? void 0 : r.focus();
+                var r, t;
+                (r = this.itemRef) === null || r === void 0 ? void 0 : (t = r.current) === null || t === void 0 ? void 0 : t.focus();
             }
         }, {
             key: "render",
             value: function e() {
-                var r = this;
-                var t = this.props, i = t.disabled, o = t.isMain, a = t.children, l = t.appearance, c = C(t, [ "disabled", "isMain", "children", "appearance" ]);
-                if (o) {
+                var r = this.props, t = r.disabled, i = r.isMain, o = r.children, a = r.appearance, l = E(r, [ "disabled", "isMain", "children", "appearance" ]);
+                if (i) {
                     
-                    return n().createElement(O, _({
+                    return n().createElement(O, C({
                         onClick: this.handleClick,
-                        disabled: i,
+                        disabled: t,
                         append: true,
-                        appearance: l
-                    }, c), a);
+                        appearance: a
+                    }, l), o);
                 }
                 
-                return n().createElement(p().Item, _({
-                    ref: function e(t) {
-                        r.item = t;
-                    },
+                return n().createElement(p().Item, C({
+                    elementRef: this.itemRef,
                     onClick: this.handleClick,
-                    disabled: i
-                }, j()(c, [ "role" ])), a);
+                    disabled: t
+                }, j()(l, [ "role" ])), o);
             }
         } ]);
         return t;
     }(t.PureComponent);
-    D(G, "propTypes", z);
-    D(G, "defaultProps", F);
-    /* harmony default export */    const J = G;
+    V(J, "propTypes", F);
+    V(J, "defaultProps", G);
+    /* harmony default export */    const K = J;
     // CONCATENATED MODULE: ./src/SplitButton/SplitButton.tsx
-    function K() {
-        return K = Object.assign ? Object.assign.bind() : function(e) {
+    function L() {
+        return L = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -359,11 +373,11 @@
                 }
             }
             return e;
-        }, K.apply(null, arguments);
+        }, L.apply(null, arguments);
     }
-    function L(e, r) {
+    function Q(e, r) {
         if (null == e) return {};
-        var t, n, i = Q(e, r);
+        var t, n, i = U(e, r);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
@@ -372,7 +386,7 @@
         }
         return i;
     }
-    function Q(e, r) {
+    function U(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -383,7 +397,7 @@
         }
         return t;
     }
-    var U = {
+    var W = {
         appearance: o().oneOf([ "default", "primary", "destructive" ]),
         children: o().node,
         disabled: o().bool,
@@ -391,58 +405,56 @@
         onClick: o().func,
         inline: o().bool
     };
-    function W(e) {
-        var r = e.appearance, i = r === void 0 ? "default" : r, o = e.children, a = e.disabled, c = e.elementRef, s = e.inline, d = s === void 0 ? true : s, b = e.onClick, v = L(e, [ "appearance", "children", "disabled", "elementRef", "inline", "onClick" ]);
+    function X(e) {
+        var r = e.appearance, i = r === void 0 ? "default" : r, o = e.children, a = e.disabled, c = e.elementRef, s = e.inline, d = s === void 0 ? true : s, v = e.onClick, b = Q(e, [ "appearance", "children", "disabled", "elementRef", "inline", "onClick" ]);
  // @docs-props-type SplitButtonPropsBase
                 var y = t.Children.toArray(o).filter(t.isValidElement);
-        var m = 0;
         var h = 0;
+        var m = 0;
         y.forEach((function(e, r) {
             var t = e.props, n = t.disabled, i = t.isMain;
             if (i) {
-                m = r;
+                h = r;
             }
             if (n) {
-                h += 1;
+                m += 1;
             }
         }));
-        var g =  (0, t.cloneElement)(y[m], {
+        var g =  (0, t.cloneElement)(y[h], {
             isMain: true,
             appearance: i,
-            disabled: a || y[m].props.disabled
+            disabled: a || y[h].props.disabled
         });
         // Remove mainButton from array of dropdown items
-                y.splice(m, 1);
+                y.splice(h, 1);
         var S = y;
         var j =  n().createElement(O, {
             prepend: true,
-            disabled: a || h === S.length,
+            disabled: a || m === S.length,
             appearance: i,
             "data-test": "split-button-toggle",
             "aria-label": (0, f._)("Open more options"),
             icon:  n().createElement(l(), null)
         });
         
-        return n().createElement(k, K({
+        return n().createElement(k, L({
             "aria-label": (0, f._)("Split button"),
             "data-inline": d || null,
             "data-test": "split-button-container",
-            elementRef: c,
             $inline: d,
-            inline: true,
-            flex: true,
+            ref: c,
             role: "group",
-            onClick: a ? undefined : b
-        }, v), g, i !== "default" &&  n().createElement(w, {
+            onClick: a ? undefined : v
+        }, b), g, i !== "default" &&  n().createElement(w, {
             inline: true,
             $appearance: i
         }),  n().createElement("div", null,  n().createElement(u(), {
             toggle: j
         },  n().createElement(p(), null, S))));
     }
-    W.propTypes = U;
-    W.Item = J;
-    /* harmony default export */    const X = W;
+    X.propTypes = W;
+    X.Item = K;
+    /* harmony default export */    const Y = X;
     // CONCATENATED MODULE: ./src/SplitButton/index.ts
     module.exports = r;
     /******/})();

package/StaticContent.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var n = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(n, {
-                a: n
+            e.d(r, {
+                a: r
             });
-            /******/            return n;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, n) => {
-            /******/ for (var t in n) {
-                /******/ if (e.o(n, t) && !e.o(r, t)) {
-                    /******/ Object.defineProperty(r, t, {
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: n[t]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,102 +56,86 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(n);
     // EXPORTS
-        e.d(r, {
+        e.d(n, {
         default: () => /* reexport */ y
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var t =  e.n(n);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var a =  e.n(i);
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "styled-components"
     const o = require("styled-components");
-    var l =  e.n(o);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const s = require("@splunk/react-ui/Box");
-    var c =  e.n(s);
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const p = require("@splunk/themes");
+    const s = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/StaticContent/StaticContentStyles.ts
-    var u = l()(c()).withConfig({
-        displayName: "StaticContentStyles__StyledBox",
+    var u = a().div.withConfig({
+        displayName: "StaticContentStyles__StyledDiv",
         componentId: "sxqyrp-0"
-    })([ "", ";position:relative;margin:0;font-weight:", ";word-wrap:break-word;min-height:", ";padding:", ";[data-inline] + &[data-inline]{margin-left:", ";}" ], p.mixins.reset("flex"), p.variables.fontWeightSemiBold, p.variables.inputHeight, (0, 
-    p.pick)({
-        enterprise: {
-            comfortable: "6px 7px",
-            compact: "4px 5px"
-        },
-        prisma: {
-            comfortable: "10px 0",
-            compact: "6px 0"
-        }
-    }), (0, p.pick)({
-        enterprise: p.variables.spacingXSmall,
-        prisma: p.variables.spacingLarge
-    }));
+    })([ "", " position:relative;margin:0;font-weight:", ";word-wrap:break-word;min-height:", ";padding:0 ", ";align-items:center;" ], (function(e) {
+        var n = e.$inline;
+        return n ? s.mixins.reset("inline-flex") : s.mixins.reset("flex");
+    }), s.variables.fontWeightSemiBold, s.variables.inputHeight, s.variables.spacingXSmall);
     // CONCATENATED MODULE: ./src/StaticContent/StaticContent.tsx
-    function f() {
-        return f = Object.assign ? Object.assign.bind() : function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var n = arguments[r];
-                for (var t in n) {
-                    ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    function c() {
+        return c = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
-        }, f.apply(null, arguments);
+        }, c.apply(null, arguments);
     }
-    function d(e, r) {
+    function f(e, n) {
         if (null == e) return {};
-        var n, t, i = m(e, r);
+        var r, t, i = p(e, n);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < a.length; t++) {
-                n = a[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (i[n] = e[n]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < l.length; t++) {
+                r = l[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
             }
         }
         return i;
     }
-    function m(e, r) {
+    function p(e, n) {
         if (null == e) return {};
-        var n = {};
+        var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (r.includes(t)) continue;
-                n[t] = e[t];
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return n;
+        return r;
     }
-    var v = {
-        children: a().node,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        inline: a().bool,
-        size: a().oneOf([ "small", "medium" ])
+    var d = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        inline: l().bool
     };
     /**
  * This component is intended for use in a control group, either to display a static value or
  * between two controls.
- */    function b(e) {
-        var r = e.children, i = e.inline, a = i === void 0 ? false : i, o = e.size, l = d(e, [ "children", "inline", "size" ]);
+ */    function v(e) {
+        var n = e.children, r = e.elementRef, i = e.inline, l = i === void 0 ? false : i, o = f(e, [ "children", "elementRef", "inline" ]);
         // @docs-props-type StaticContentPropsBase
-                (0, n.useEffect)((function() {
-            if (false) {}
-        }), [ o ]);
-        
-        return t().createElement(u, f({
+                
+        return t().createElement(u, c({
             "data-test": "static-content",
-            inline: a
-        }, l), r);
+            $inline: l,
+            ref: r
+        }, o),  t().createElement("span", null, n));
     }
-    b.propTypes = v;
-    /* harmony default export */    const y = b;
+    v.propTypes = d;
+    /* harmony default export */    const y = v;
     // CONCATENATED MODULE: ./src/StaticContent/index.ts
-    module.exports = r;
+    module.exports = n;
     /******/})();