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

package/SplitButton.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 = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            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 = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: t[n]
+                        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,405 +56,232 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(n);
     // EXPORTS
-        e.d(r, {
-        Item: () => /* reexport */ K,
-        default: () => /* reexport */ Y
+        e.d(n, {
+        Item: () => /* reexport */ P,
+        default: () => /* reexport */ T
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronDown"
-    const a = require("@splunk/react-icons/enterprise/ChevronDown");
-    var l =  e.n(a);
+    const a = require("prop-types");
+    var i =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
+    const l = require("@splunk/react-icons/CaretSmallDown");
+    var o =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const c = require("@splunk/react-ui/Dropdown");
     var u =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
     const s = require("@splunk/react-ui/Menu");
-    var p =  e.n(s);
+    var d =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const f = require("@splunk/ui-utils/i18n");
+    const p = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const d = require("styled-components");
-    var v =  e.n(d);
+    const f = require("styled-components");
+    var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const b = require("@splunk/react-ui/Button");
     var y =  e.n(b);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const h = require("@splunk/react-ui/Box");
-    var m =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const g = require("@splunk/themes");
+    const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SplitButton/SplitButtonStyles.ts
-    var O = v()(y()).withConfig({
-        displayName: "SplitButtonStyles__StyledButton",
+    var g = v()(y()).withConfig({
+        displayName: "SplitButtonStyles__StyledToggle",
         componentId: "sc-9igsyh-0"
-    })([ "", "" ], (0, g.pick)({
-        prisma: function e(r) {
-            var t = r.appearance;
-            return t === "default" && (0, d.css)([ "&:first-child{border-right:1px solid ", ";}" ], g.variables.interactiveColorBorder);
-        }
-    }));
-    var w = v()(m()).withConfig({
-        displayName: "SplitButtonStyles__StyledSeparator",
-        componentId: "sc-9igsyh-1"
-    })([ "width:", ";height:", ";background-color:", ";" ], (0, g.pick)({
-        prisma: (0, g.pickVariant)("$appearance", {
-            primary: "2px",
-            destructive: "2px"
-        }),
-        enterprise: "1px"
-    }), g.variables.inputHeight, (0, g.pickVariant)("$appearance", {
-        primary: {
-            enterprise: g.variables.white,
-            prisma: {
-                light: g.variables.white,
-                dark: g.variables.black
-            }
-        },
-        destructive: {
-            enterprise: {
-                light: g.variables.white,
-                dark: g.variables.black
-            },
-            prisma: {
-                light: g.variables.white,
-                dark: g.variables.black
-            }
-        }
-    }));
-    var k = v().div.withConfig({
+    })([ "min-width:0;width:24px;" ]);
+    var h = v().div.withConfig({
         displayName: "SplitButtonStyles__StyledDiv",
-        componentId: "sc-9igsyh-2"
-    })([ "", " ", "" ], g.mixins.reset("inline-flex"), (function(e) {
-        var r = e.$inline;
-        return !r && (0, d.css)([ "width:100%;" ]);
+        componentId: "sc-9igsyh-1"
+    })([ "", " ", " ", "" ], m.mixins.reset("inline-flex"), (function(e) {
+        var n = e.$appearance;
+        return (n === "primary" || n === "destructive") && (0, f.css)([ "gap:1px;" ]);
+    }), (function(e) {
+        var n = e.$inline;
+        return !n && (0, f.css)([ "width:100%;" ]);
     }));
     // 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;
-        }
-    };
+    const O = require("lodash/omit");
+    var S =  e.n(O);
     // CONCATENATED MODULE: ./src/SplitButton/Item.tsx
-    function _(e) {
-        "@babel/helpers - typeof";
-        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;
-        }, _(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) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+    function k() {
+        return k = 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;
-        }, C.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
-    function E(e, r) {
+    function w(e, n) {
         if (null == e) return {};
-        var t, n, i = T(e, r);
+        var r, t, a = C(e, n);
         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]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function T(e, r) {
+    function C(e, n) {
         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 t;
-    }
-    function R(e, r) {
-        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
-    }
-    function q(e, r) {
-        for (var t = 0; t < r.length; t++) {
-            var n = r[t];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, A(n.key), n);
-        }
-    }
-    function I(e, r, t) {
-        return r && q(e.prototype, r), t && q(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function x(e, r) {
-        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(r && r.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), r && B(e, r);
-    }
-    function B(e, r) {
-        return B = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-            return e.__proto__ = r, e;
-        }, B(e, r);
-    }
-    function M(e) {
-        var r = $();
-        return function() {
-            var t, n = D(e);
-            if (r) {
-                var i = D(this).constructor;
-                t = Reflect.construct(n, arguments, i);
-            } else t = n.apply(this, arguments);
-            return H(this, t);
-        };
-    }
-    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);
-    }
-    function N(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function $() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return ($ = function r() {
-            return !!e;
-        })();
-    }
-    function D(e) {
-        return D = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, D(e);
-    }
-    function V(e, r, t) {
-        return (r = A(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[r] = t, e;
-    }
-    function A(e) {
-        var r = z(e, "string");
-        return "symbol" == _(r) ? r : r + "";
-    }
-    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" != _(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === r ? String : Number)(e);
+        return r;
     }
-    var F = {
-        appearance: o().oneOf([ "default", "primary", "destructive" ]),
-        children: o().node,
-        disabled: o().bool,
-        isMain: o().bool,
-        onClick: o().func
-    };
-    var G = {
-        appearance: "default"
+    /** @public */    var j = {
+        appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary" ]),
+        children: i().node,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        icon: i().node,
+        isMain: i().bool,
+        onClick: i().func
     };
     /**
- * 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 J =  function(e) {
-        x(t, e);
-        var r = M(t);
-        function t() {
-            var e;
-            R(this, t);
-            for (var i = arguments.length, o = new Array(i), a = 0; a < i; a++) {
-                o[a] = arguments[a];
+ * An item within a `SplitButton`.
+ */    function E(e) {
+        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.disabled, l = e.elementRef, o = e.icon, c = e.isMain, u = e.children, s = e.onClick, p = w(e, [ "appearance", "disabled", "elementRef", "icon", "isMain", "children", "onClick" ]);
+        // @docs-props-type ItemPropsBase
+                var f = (0, r.useCallback)((function(e) {
+            if (!i) {
+                s === null || s === void 0 ? void 0 : s(e, {});
             }
-            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);
-                }
-            }));
-            return e;
-        }
- // @docs-props-type ItemPropsBase
-                I(t, [ {
-            key: "scrollIntoViewIfNeeded",
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                P(this.itemRef.current);
-            }
-            /**
-     * Place focus on the item.
-     */
-            // eslint-disable-next-line react/no-unused-class-component-methods
-                }, {
-            key: "focus",
-            value: function e() {
-                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.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, C({
-                        onClick: this.handleClick,
-                        disabled: t,
-                        append: true,
-                        appearance: a
-                    }, l), o);
-                }
-                
-                return n().createElement(p().Item, C({
-                    elementRef: this.itemRef,
-                    onClick: this.handleClick,
-                    disabled: t
-                }, j()(l, [ "role" ])), o);
+        }), [ i, s ]);
+        var v = (0, r.useCallback)((function(e, n) {
+            var r = n.action, t = n.icon, a = n.label, l = n.value;
+            if (!i) {
+                s === null || s === void 0 ? void 0 : s(e, {
+                    action: r,
+                    icon: t,
+                    label: a,
+                    value: l
+                });
             }
-        } ]);
-        return t;
-    }(t.PureComponent);
-    V(J, "propTypes", F);
-    V(J, "defaultProps", G);
-    /* harmony default export */    const K = J;
+        }), [ i, s ]);
+        if (c) {
+            
+            return t().createElement(y(), k({
+                appearance: a,
+                append: true,
+                disabled: i,
+                elementRef: l,
+                icon: o,
+                onClick: v
+            }, p), u);
+        }
+        
+        return t().createElement(d().Item, k({
+            disabled: i,
+            elementRef: l,
+            onClick: f,
+            startAdornment: o
+        }, S()(p, [ "role" ])), u);
+    }
+    E.propTypes = j;
+    /* harmony default export */    const P = E;
     // CONCATENATED MODULE: ./src/SplitButton/SplitButton.tsx
-    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) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+    function q() {
+        return q = 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;
-        }, L.apply(null, arguments);
+        }, q.apply(null, arguments);
     }
-    function Q(e, r) {
+    function _(e, n) {
         if (null == e) return {};
-        var t, n, i = U(e, r);
+        var r, t, a = M(e, n);
         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]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function U(e, r) {
+    function M(e, n) {
         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];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return t;
+        return r;
     }
-    var W = {
-        appearance: o().oneOf([ "default", "primary", "destructive" ]),
-        children: o().node,
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        onClick: o().func,
-        inline: o().bool
+    var R = {
+        appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary" ]),
+        children: i().node,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        onClick: i().func,
+        inline: i().bool
     };
-    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" ]);
+    function I(e) {
+        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.children, l = e.disabled, c = e.elementRef, s = e.inline, f = s === void 0 ? true : s, v = e.onClick, b = _(e, [ "appearance", "children", "disabled", "elementRef", "inline", "onClick" ]);
  // @docs-props-type SplitButtonPropsBase
-                var y = t.Children.toArray(o).filter(t.isValidElement);
-        var h = 0;
+                var y = r.Children.toArray(i).filter(r.isValidElement);
         var m = 0;
-        y.forEach((function(e, r) {
-            var t = e.props, n = t.disabled, i = t.isMain;
-            if (i) {
-                h = r;
+        var O = 0;
+        y.forEach((function(e, n) {
+            var r = e.props, t = r.disabled, a = r.isMain;
+            if (a) {
+                m = n;
             }
-            if (n) {
-                m += 1;
+            if (t) {
+                O += 1;
             }
         }));
-        var g =  (0, t.cloneElement)(y[h], {
+        var S =  (0, r.cloneElement)(y[m], {
             isMain: true,
-            appearance: i,
-            disabled: a || y[h].props.disabled
+            appearance: a,
+            disabled: l || y[m].props.disabled
         });
         // Remove mainButton from array of dropdown items
-                y.splice(h, 1);
-        var S = y;
-        var j =  n().createElement(O, {
+                y.splice(m, 1);
+        var k = y;
+        var w =  t().createElement(g, {
             prepend: true,
-            disabled: a || m === S.length,
-            appearance: i,
+            disabled: l || O === k.length,
+            appearance: a,
             "data-test": "split-button-toggle",
-            "aria-label": (0, f._)("Open more options"),
-            icon:  n().createElement(l(), null)
+            "aria-label": (0, p._)("Open more options"),
+            icon:  t().createElement(o(), null)
         });
         
-        return n().createElement(k, L({
-            "aria-label": (0, f._)("Split button"),
-            "data-inline": d || null,
+        return t().createElement(h, q({
+            "aria-label": (0, p._)("Split button"),
+            "data-inline": f || null,
             "data-test": "split-button-container",
-            $inline: d,
+            $inline: f,
             ref: c,
             role: "group",
-            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))));
+            onClick: l ? undefined : v,
+            $appearance: a
+        }, b), S,  t().createElement("div", null,  t().createElement(u(), {
+            toggle: w
+        },  t().createElement(d(), null, k))));
     }
-    X.propTypes = W;
-    X.Item = K;
-    /* harmony default export */    const Y = X;
+    I.propTypes = R;
+    I.Item = P;
+    /* harmony default export */    const T = I;
     // CONCATENATED MODULE: ./src/SplitButton/index.ts
-    module.exports = r;
+    module.exports = n;
     /******/})();