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

package/Button.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var n = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = n => {
+            /******/ var t = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(n, {
-                a: n
+            e.d(t, {
+                a: t
             });
-            /******/            return n;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, n) => {
-            /******/ for (var r in n) {
-                /******/ if (e.o(n, r) && !e.o(t, r)) {
-                    /******/ Object.defineProperty(t, r, {
+        /******/ e.d = (n, t) => {
+            /******/ for (var r in t) {
+                /******/ if (e.o(t, r) && !e.o(n, r)) {
+                    /******/ Object.defineProperty(n, r, {
                         enumerable: true,
-                        get: n[r]
+                        get: t[r]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,422 +56,167 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(n);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ ee
+        e.d(n, {
+        default: () => /* reexport */ _
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var r =  e.n(n);
+    const t = require("react");
+    var r =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "lodash/isString"
-    const a = require("lodash/isString");
-    var l =  e.n(a);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const c = require("@splunk/react-ui/Dropdown");
+    const l = require("lodash/isString");
+    var o =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
+    const s = require("@splunk/react-icons/ArrowSquareTopRightInset");
+    var u =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
+    const c = require("@splunk/react-icons/CaretSmallDown");
+    var p =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const s = require("@splunk/react-ui/ScreenReaderContent");
-    var p =  e.n(s);
+    const d = require("@splunk/react-ui/ScreenReaderContent");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const u = require("@splunk/ui-utils/i18n");
+    const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
-    const f = require("@splunk/ui-utils/style");
+    const b = require("@splunk/ui-utils/style");
     // CONCATENATED MODULE: external "styled-components"
-    const d = require("styled-components");
-    var m =  e.n(d);
+    const m = require("styled-components");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const v = require("@splunk/react-ui/ButtonSimple");
-    var b =  e.n(v);
+    const g = require("@splunk/react-ui/ButtonSimple");
+    var h =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const y = require("@splunk/themes");
+    const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Button/ButtonStyles.ts
-    var h = m().span.withConfig({
-        displayName: "ButtonStyles__StyledIcon",
-        componentId: "eqxqs2-0"
-    })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", "" ], (0, 
-    y.pick)({
-        enterprise: "inherit",
-        prisma: {
-            comfortable: "21px",
-            compact: "16px"
-        }
-    }), (0, y.pickVariant)("$isStartIcon", {
-        true: {
-            enterprise: (0, d.css)([ "padding-right:3px;" ]),
-            prisma: (0, d.css)([ "padding-right:8px;" ])
-        }
-    }));
-    var x = m()(b()).withConfig({
+    var x = y()(h()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
-        componentId: "eqxqs2-1"
-    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{:where(:not(a)){display:inline-block;}:where(a){display:inline-flex;}", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], y.variables.lineHeight, y.variables.inputHeight, (0, 
-    y.pick)({
-        enterprise: {
-            comfortable: "5px 14px",
-            compact: "2px 14px"
-        },
-        prisma: {
-            comfortable: function e(t) {
-                var n = t.$hasPrismaIcon;
-                return n ? "7px 18px" : "9px 18px";
-            },
-            compact: function e(t) {
-                var n = t.$isMenu;
-                return n ? "5px 8px 5px 16px" : "5px 16px";
-            }
-        }
-    }), (function(e) {
-        var t = e.$inline, n = e.append, r = e.prepend;
-        return !t && !n && !r && (0, d.css)([ "width:100%;" ]);
-    }), (function(e) {
-        var t = e.$isIconOnly;
-        return t && (0, d.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
-        y.pick)({
-            enterprise: {
-                comfortable: (0, d.css)([ "padding:0 5px;" ]),
-                compact: (0, d.css)([ "padding:0 2px;" ])
-            },
-            prisma: {
-                comfortable: (0, d.css)([ "padding:0 calc(", " / 2 - 1px);" ], y.variables.inputHeight),
-                compact: (0, d.css)([ "padding:0 calc(", " / 2 - 1px);" ], y.variables.inputHeight)
-            }
-        }), y.variables.inputHeight, y.variables.inputHeight);
-    }), (function(e) {
-        var t = e.$isIconOnly;
-        return t ? null : (0, d.css)([ "width:auto;" ]);
+        componentId: "eqxqs2-0"
+    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:", ";max-width:100%;min-height:", ";line-height:20px;padding:", " ", ";", " ", " &[data-inline]{display:inline-flex;}" ], w.variables.inputHeight, w.variables.inputHeight, w.variables.spacingXSmall, w.variables.spacingSmall, (function(e) {
+        var n = e.$inline, t = e.append, r = e.prepend;
+        return !n && !t && !r && (0, m.css)([ "width:100%;" ]);
     }), (function(e) {
-        var t = e.prepend;
-        return !t && (0, d.css)([ "margin-left:", ";" ], y.variables.spacingSmall);
+        var n = e.$isIconOnly;
+        return n && (0, m.css)([ "width:", ";" ], w.variables.inputHeight);
     }));
-    var g = m().span.withConfig({
+    var S = y().span.withConfig({
         displayName: "ButtonStyles__StyledContentWrapper",
-        componentId: "eqxqs2-2"
-    })([ "display:flex;flex-direction:row;justify-content:center;align-items:center;flex:1 0 auto;max-width:100%;box-sizing:border-box;padding:", ";" ], (0, 
-    y.pick)({
-        enterprise: function e(t) {
-            var n = t.$error;
-            if (n) {
-                return "1px";
-            }
-            return (0, y.pickVariant)("$appearance", {
-                default: "0",
-                secondary: "0",
-                destructive: "1px",
-                primary: "1px",
-                pill: "0",
-                toggle: "0",
-                // === default
-                flat: "0",
-                // === default
-                subtle: "0"
-            });
-        },
-        prisma: (0, y.pickVariant)("$appearance", {
-            default: 0,
-            secondary: "1px 0",
-            primary: "1px 0",
-            destructive: "1px 0",
-            pill: "1px 0",
-            // === secondary
-            toggle: "0",
-            flat: "1px 0",
-            subtle: "1px 0"
-        })
-    }));
-    var w = m().span.withConfig({
+        componentId: "eqxqs2-1"
+    })([ "display:flex;flex-direction:row;align-items:center;justify-content:center;flex:1 0 auto;max-width:100%;gap:", ";box-sizing:border-box;" ], w.variables.spacingXSmall);
+    var O = y().span.withConfig({
         displayName: "ButtonStyles__StyledLabel",
-        componentId: "eqxqs2-3"
-    })([ "text-overflow:ellipsis;overflow:hidden;flex:0 1 auto;&:not(:last-child){padding-right:", ";}", "" ], (0, 
-    y.pick)({
-        enterprise: "3px",
-        prisma: "10px"
-    }), (function(e) {
-        var t = e.$isMenu;
-        return t && (0, d.css)([ "flex:1 1 auto;text-align:left;" ]);
-    }));
-    var S = m().span.withConfig({
-        displayName: "ButtonStyles__StyledCaretWrapper",
-        componentId: "eqxqs2-4"
-    })([ "display:inline-flex;", "" ], (0, y.pickVariant)("$disabled", {
-        false: {
-            prisma: (0, y.pickVariant)("$primary", {
-                true: (0, d.css)([ "color:", ";" ], y.variables.contentColorInverted),
-                false: (0, d.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], y.variables.contentColorDefault, /* sc-sel */ x, /* sc-sel */ x, y.variables.contentColorDefault)
-            })
-        }
+        componentId: "eqxqs2-2"
+    })([ "text-overflow:ellipsis;overflow:hidden;flex:0 1 auto;", "" ], (function(e) {
+        var n = e.$isMenu;
+        return n && (0, m.css)([ "flex:1 1 auto;text-align:start;" ]);
     }));
-    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const k = require("@splunk/react-icons/CaretSmallDown");
-    var O =  e.n(k);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-    const C = require("@splunk/react-icons/enterprise/Caret");
-    var q =  e.n(C);
-    // CONCATENATED MODULE: ./src/Button/icons/CaretSmallDown.tsx
-    var $ = function e() {
-        var t = (0, y.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
-        var o = i ? "20px" : "24px";
-        return n ?  r().createElement(q(), {
-            screenReaderText: null,
-            hideDefaultTooltip: true,
-            size: .5
-        }) :  r().createElement(O(), {
-            height: o,
-            width: o
-        });
-    };
-    /* harmony default export */    const _ = $;
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
-    const j = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var E =  e.n(j);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const P = require("@splunk/react-icons/enterprise/External");
-    var I =  e.n(P);
-    // CONCATENATED MODULE: ./src/Button/icons/External.tsx
-    function T() {
-        var e = (0, y.useSplunkTheme)(), t = e.isEnterprise;
-        return t ?  r().createElement(I(), {
-            screenReaderText: null
-        }) :  r().createElement(E(), null);
-    }
-    /* harmony default export */    const N = T;
     // CONCATENATED MODULE: ./src/Button/Button.tsx
-    function M(e) {
-        "@babel/helpers - typeof";
-        return M = "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;
-        }, M(e);
-    }
-    function B() {
-        return B = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
+    function q() {
+        return q = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var t = arguments[n];
+                for (var r in t) {
+                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
                 }
             }
             return e;
-        }, B.apply(null, arguments);
-    }
-    function R(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function D(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, K(r.key), r);
+        }, q.apply(null, arguments);
+    }
+    function C(e, n) {
+        if (null == e) return {};
+        var t, r, a = N(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (r = 0; r < i.length; r++) {
+                t = i[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            }
         }
-    }
-    function H(e, t, n) {
-        return t && D(e.prototype, t), n && D(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function V(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+        return a;
+    }
+    function N(e, n) {
+        if (null == e) return {};
+        var t = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (n.includes(r)) continue;
+                t[r] = e[r];
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && z(e, t);
-    }
-    function z(e, t) {
-        return z = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, z(e, t);
-    }
-    function W(e) {
-        var t = F();
-        return function() {
-            var n, r = G(e);
-            if (t) {
-                var i = G(this).constructor;
-                n = Reflect.construct(r, arguments, i);
-            } else n = r.apply(this, arguments);
-            return A(this, n);
-        };
-    }
-    function A(e, t) {
-        if (t && ("object" == M(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return L(e);
-    }
-    function L(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function F() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (F = function t() {
-            return !!e;
-        })();
-    }
-    function G(e) {
-        return G = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, G(e);
-    }
-    function J(e, t, n) {
-        return (t = K(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = n, e;
-    }
-    function K(e) {
-        var t = Q(e, "string");
-        return "symbol" == M(t) ? t : t + "";
-    }
-    function Q(e, t) {
-        if ("object" != M(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != M(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === t ? String : Number)(e);
+        return t;
     }
-    /** @public */    var U = {
-        action: o().string,
-        appearance: o().oneOf([ "default", "secondary", "primary", "destructive", "pill", "toggle", "flat", "subtle" ]),
-        append: o().bool,
-        children: o().node,
+    /** @public */    var k = {
+        action: i().string,
+        appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "subtle" ]),
+        append: i().bool,
+        children: i().node,
         /** @private An additional className to add to the button. */
-        classNamePrivate: o().string,
-        disabled: o().oneOfType([ o().bool, o().oneOf([ "dimmed" ]) ]),
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        icon: o().node,
-        inline: o().bool,
-        isMenu: o().bool,
-        label: o().node,
-        onClick: o().func,
-        openInNewContext: o().oneOfType([ o().bool, o().string ]),
-        prepend: o().bool,
-        selected: o().bool,
-        to: o().string,
-        value: o().any
-    };
-    var X = {
-        appearance: "default",
-        append: false,
-        disabled: false,
-        error: false,
-        inline: true,
-        isMenu: false,
-        openInNewContext: false,
-        prepend: false
+        classNamePrivate: i().string,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        /** @private */
+        error: i().bool,
+        icon: i().node,
+        inline: i().bool,
+        isMenu: i().bool,
+        label: i().node,
+        onClick: i().func,
+        openInNewContext: i().oneOfType([ i().bool, i().string ]),
+        prepend: i().bool,
+        to: i().string,
+        value: i().any
     };
-    var Y = (0, u._)("(Opens new window)");
-    var Z =  function(e) {
-        V(n, e);
-        var t = W(n);
+    var I = (0, v._)("(Opens new window)");
+    var P =  r().forwardRef((function(e, n) {
+        var a = e.action, i = e.appearance, l = i === void 0 ? "default" : i, s = e.append, c = e.children, d = e.className, v = e.classNamePrivate, m = e.disabled, y = e.error, g = e.icon, h = e.inline, w = h === void 0 ? true : h, N = e.isMenu, k = e.label, P = e.onClick, _ = e.openInNewContext, j = e.prepend, M = e.value, E = C(e, [ "action", "appearance", "append", "children", "className", "classNamePrivate", "disabled", "error", "icon", "inline", "isMenu", "label", "onClick", "openInNewContext", "prepend", "value" ]);
         // @docs-props-type ButtonPropsBase
-                function n(e) {
-            var r;
-            R(this, n);
-            r = t.call(this, e);
-            J(L(r), "component", null);
-            J(L(r), "handleClick", (function(e) {
-                var t = r.props, n = t.label, i = t.icon, o = t.value, a = t.action, l = t.onClick;
-                l === null || l === void 0 ? void 0 : l(e, {
-                    label: n,
-                    icon: i,
-                    value: o,
-                    action: a
-                });
-            }));
-            J(L(r), "handleMount", (function(e) {
-                r.component = e;
-            }));
-            if (false) {}
-            return r;
+                var T = (0, t.useCallback)((function(e) {
+            P === null || P === void 0 ? void 0 : P(e, {
+                action: a,
+                icon: g,
+                label: k,
+                value: M
+            });
+        }), [ a, g, k, P, M ]);
+        var $ = !k && o()(c);
+        var B = $ ? c : k;
+        var R = false;
+        var H;
+        if (_) {
+            R = true;
+            H = typeof _ === "string" ? _ : I;
         }
-        H(n, [ {
-            key: "focus",
-            /**
-     * Places focus on the button.
-     */
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                var t;
-                (t = this.component) === null || t === void 0 ? void 0 : t.focus();
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.props, n = t.action, i = t.appearance, o = t.append, a = t.className, c = t.classNamePrivate, s = t.disabled, u = t.error, d = t.icon, m = t.inline, v = t.isMenu, b = t.onClick, y = t.openInNewContext, k = t.prepend, O = t.to, C = t.value;
-                var q = this.props, $ = q.children, j = q.label;
-                if (!j && l()($)) {
-                    j = $;
-                    $ = null;
-                }
-                var E = false;
-                var P;
-                if (y) {
-                    E = true;
-                    P = typeof y === "string" ? y : Y;
-                }
-                var I = !!(d && !j && !v && !$);
-                var T = O && E || v || !!d;
-                
-                return r().createElement(x, B({
-                    "aria-haspopup": v || undefined,
-                    "aria-invalid": u || undefined,
-                    "data-test": "button"
-                }, this.props, {
-                    className: (0, f.toClassName)(a, c),
-                    "data-action": n,
-                    "data-inline": m || null,
-                    disabled: s,
-                    append: o,
-                    prepend: k,
-                    $inline: m,
-                    $hasPrismaIcon: T,
-                    $isIconOnly: I,
-                    $isMenu: v,
-                    value: C,
-                    onClick: b ? this.handleClick : undefined,
-                    ref: this.handleMount,
-                    openInNewContext: E,
-                    appearance: i
-                }),  r().createElement(g, {
-                    $appearance: i,
-                    $error: u
-                }, d &&  r().createElement(h, {
-                    $isStartIcon: !I
-                }, d), j &&  r().createElement(w, {
-                    "data-test": "label",
-                    $isMenu: v
-                }, j), $, v &&  r().createElement(S, {
-                    $disabled: s,
-                    $primary: i === "primary"
-                },  r().createElement(_, null)), y &&  r().createElement(h, {
-                    $isStartIcon: false
-                },  r().createElement(N, null),  r().createElement(p(), null, P))));
-            }
-        } ]);
-        return n;
-    }(n.Component);
-    J(Z, "propTypes", U);
-    J(Z, "defaultProps", X);
-    J(Z, c.legacyRefMode, true);
-    /* harmony default export */    const ee = Z;
+        var X = !!(g && !k && !N && !c);
+        
+        return r().createElement(x, q({
+            $inline: w,
+            $isIconOnly: X,
+            appearance: l,
+            append: s,
+            "aria-haspopup": N || undefined,
+            className: (0, b.toClassName)(d, v),
+            "data-action": a,
+            "data-inline": w || null,
+            "data-test": "button",
+            disabled: m,
+            error: y,
+            isMenu: N,
+            onClick: P ? T : undefined,
+            openInNewContext: R,
+            prepend: j,
+            ref: n,
+            value: M
+        }, E),  r().createElement(S, null, g, B &&  r().createElement(O, {
+            "data-test": "label",
+            $isMenu: N
+        }, B), !$ && c, N &&  r().createElement(p(), null), _ &&  r().createElement(r().Fragment, null,  r().createElement(u(), null),  r().createElement(f(), null, H))));
+    }));
+    P.propTypes = k;
+    /* harmony default export */    const _ = P;
     // CONCATENATED MODULE: ./src/Button/index.ts
-    module.exports = t;
+    module.exports = n;
     /******/})();