@splunk/react-ui 4.32.0 → 4.34.0

package/Button.js

@@ -73,9 +73,9 @@
     const o = require("lodash/isString");
     var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const c = require("@splunk/react-ui/Dropdown");
+    const s = require("@splunk/react-ui/Dropdown");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
-    const s = require("@splunk/ui-utils/style");
+    const c = require("@splunk/ui-utils/style");
     // CONCATENATED MODULE: external "styled-components"
     const p = require("styled-components");
     var u =  e.n(p);
@@ -85,26 +85,26 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Button/ButtonStyles.ts
-    var v = u().span.withConfig({
+    var y = u().span.withConfig({
         displayName: "ButtonStyles__StyledIcon",
         componentId: "eqxqs2-0"
-    })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", ";" ], (0, 
+    })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", "" ], (0, 
     m.pick)({
         enterprise: "inherit",
         prisma: {
             comfortable: "21px",
             compact: "16px"
         }
-    }), (0, m.pickVariant)("$isIconOnly", {
-        false: {
+    }), (0, m.pickVariant)("$isStartIcon", {
+        true: {
             enterprise: (0, p.css)([ "padding-right:3px;" ]),
             prisma: (0, p.css)([ "padding-right:8px;" ])
         }
     }));
-    var y = u()(d()).withConfig({
+    var v = u()(d()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
         componentId: "eqxqs2-1"
-    })([ "text-align:center;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]{display:inline-block;vertical-align:middle;", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], m.variables.lineHeight, m.variables.inputHeight, (0, 
+    })([ "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;}vertical-align:middle;", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], m.variables.lineHeight, m.variables.inputHeight, (0, 
     m.pick)({
         enterprise: {
             comfortable: "5px 14px",
@@ -125,15 +125,15 @@
         return !t && !n && !r && (0, p.css)([ "width:100%;" ]);
     }), (function(e) {
         var t = e.$isIconOnly;
-        return t && (0, p.css)([ "box-sizing:border-box;padding:", ";width:", ";min-width:", ";" ], (0, 
+        return t && (0, p.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
         m.pick)({
             enterprise: {
-                comfortable: "0 5px",
-                compact: "0 2px"
+                comfortable: (0, p.css)([ "padding:0 5px;" ]),
+                compact: (0, p.css)([ "padding:0 2px;" ])
             },
             prisma: {
-                comfortable: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight),
-                compact: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight)
+                comfortable: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight),
+                compact: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight)
             }
         }), m.variables.inputHeight, m.variables.inputHeight);
     }), (function(e) {
@@ -141,15 +141,12 @@
         return t ? null : (0, p.css)([ "width:auto;" ]);
     }), (function(e) {
         var t = e.prepend;
-        return !t && (0, p.css)([ "margin-left:", ";" ], (0, m.pick)({
-            enterprise: m.variables.spacingHalf,
-            prisma: m.variables.spacingSmall
-        }));
+        return !t && (0, p.css)([ "margin-left:", ";" ], m.variables.spacingSmall);
     }));
     var b = u().span.withConfig({
         displayName: "ButtonStyles__StyledContentWrapper",
         componentId: "eqxqs2-2"
-    })([ "display:flex;flex-direction:row;justify-content:center;align-items:center;max-width:100%;padding:", ";" ], (0, 
+    })([ "display:flex;flex-direction:row;justify-content:center;align-items:center;flex:1 0 auto;max-width:100%;box-sizing:border-box;padding:", ";" ], (0, 
     m.pick)({
         enterprise: function e(t) {
             var n = t.$error;
@@ -164,7 +161,9 @@
                 pill: "0",
                 toggle: "0",
                 // === default
-                flat: "0"
+                flat: "0",
+                // === default
+                subtle: "0"
             });
         },
         prisma: (0, m.pickVariant)("$appearance", {
@@ -175,7 +174,8 @@
             pill: "1px 0",
             // === secondary
             toggle: "0",
-            flat: "1px 0"
+            flat: "1px 0",
+            subtle: "1px 0"
         })
     }));
     var h = u().span.withConfig({
@@ -198,9 +198,9 @@
                 true: (0, p.css)([ "color:", ";" ], m.variables.contentColorInverted),
                 false: (0, p.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], m.variables.contentColorDefault, 
                 /* sc-sel */
-                y, 
+                v, 
                 /* sc-sel */
-                y, m.variables.contentColorDefault)
+                v, m.variables.contentColorDefault)
             })
         }
     }));
@@ -208,13 +208,13 @@
     const g = require("@splunk/react-icons/CaretSmallDown");
     var w =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-    const k = require("@splunk/react-icons/enterprise/Caret");
-    var S =  e.n(k);
+    const S = require("@splunk/react-icons/enterprise/Caret");
+    var k =  e.n(S);
     // CONCATENATED MODULE: ./src/Button/icons/CaretSmallDown.tsx
     var O = function e() {
         var t = (0, m.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
         var a = i ? "20px" : "24px";
-        return n ?  r().createElement(S(), {
+        return n ?  r().createElement(k(), {
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
@@ -226,27 +226,20 @@
     /* harmony default export */    const C = O;
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
     const q = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var _ =  e.n(q);
+    var $ =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const $ = require("@splunk/react-icons/enterprise/External");
-    var I =  e.n($);
+    const _ = require("@splunk/react-icons/enterprise/External");
+    var I =  e.n(_);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const E = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Button/icons/External.tsx
     var P = (0, E._)("Open externally");
     function j() {
-        var e = (0, m.useSplunkTheme)(), t = e.isEnterprise, n = e.isCompact;
-        var i = n ? "20px" : "24px";
+        var e = (0, m.useSplunkTheme)(), t = e.isEnterprise;
         return t ?  r().createElement(I(), {
-            screenReaderText: P,
-            size: .8,
-            style: {
-                verticalAlign: "baseline"
-            }
-        }) :  r().createElement(_(), {
-            "aria-label": P,
-            height: i,
-            width: i
+            screenReaderText: P
+        }) :  r().createElement($(), {
+            "aria-label": P
         },  r().createElement("title", null, P));
     }
     /* harmony default export */    const N = j;
@@ -327,16 +320,16 @@
             } else {
                 i = r.apply(this, arguments);
             }
-            return A(this, i);
+            return W(this, i);
         };
     }
-    function A(e, t) {
+    function W(e, t) {
         if (t && (M(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return W(e);
+        return A(e);
     }
-    function W(e) {
+    function A(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -374,7 +367,7 @@
     }
     var J = {
         action: a().string,
-        appearance: a().oneOf([ "default", "secondary", "primary", "destructive", "pill", "toggle", "flat" ]),
+        appearance: a().oneOf([ "default", "secondary", "primary", "destructive", "pill", "toggle", "flat", "subtle" ]),
         append: a().bool,
         children: a().node,
         /** @private An additional className to add to the button. */
@@ -401,8 +394,7 @@
         inline: true,
         isMenu: false,
         openInNewContext: false,
-        prepend: false,
-        selected: false
+        prepend: false
     };
     var Q =  function(e) {
         H(n, e);
@@ -412,8 +404,8 @@
             var r;
             R(this, n);
             r = t.call(this, e);
-            G(W(r), "component", null);
-            G(W(r), "handleClick", (function(e) {
+            G(A(r), "component", null);
+            G(A(r), "handleClick", (function(e) {
                 var t = r.props, n = t.label, i = t.icon, a = t.value, o = t.action, l = t.onClick;
                 l === null || l === void 0 ? void 0 : l(e, {
                     label: n,
@@ -422,7 +414,7 @@
                     action: o
                 });
             }));
-            G(W(r), "handleMount", (function(e) {
+            G(A(r), "handleMount", (function(e) {
                 r.component = e;
             }));
             if (false) {}
@@ -440,26 +432,26 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, c = t.classNamePrivate, p = t.disabled, u = t.error, f = t.icon, d = t.inline, m = t.isMenu, g = t.onClick, w = t.openInNewContext, k = t.prepend, S = t.to, O = t.value;
-                var q = this.props, _ = q.children, $ = q.label;
-                if (!$ && l()(_)) {
-                    $ = _;
-                    _ = null;
+                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, s = t.classNamePrivate, p = t.disabled, u = t.error, f = t.icon, d = t.inline, m = t.isMenu, g = t.onClick, w = t.openInNewContext, S = t.prepend, k = t.to, O = t.value;
+                var q = this.props, $ = q.children, _ = q.label;
+                if (!_ && l()($)) {
+                    _ = $;
+                    $ = null;
                 }
-                var I = !!(f && !$ && !m && !_);
-                var E = S && w || m || !!f;
+                var I = !!(f && !_ && !m && !$);
+                var E = k && w || m || !!f;
                 
-                return r().createElement(y, T({
+                return r().createElement(v, T({
                     "aria-haspopup": m || undefined,
                     "aria-invalid": u || undefined,
                     "data-test": "button"
                 }, this.props, {
-                    className: (0, s.toClassName)(o, c),
+                    className: (0, c.toClassName)(o, s),
                     "data-action": n,
                     "data-inline": d || null,
                     disabled: p,
                     append: a,
-                    prepend: k,
+                    prepend: S,
                     $inline: d,
                     $hasPrismaIcon: E,
                     $isIconOnly: I,
@@ -472,22 +464,24 @@
                 }),  r().createElement(b, {
                     $appearance: i,
                     $error: u
-                }, f &&  r().createElement(v, {
-                    $isIconOnly: I
-                }, f), $ &&  r().createElement(h, {
+                }, f &&  r().createElement(y, {
+                    $isStartIcon: !I
+                }, f), _ &&  r().createElement(h, {
                     "data-test": "label",
                     $isMenu: m
-                }, $), _, m &&  r().createElement(x, {
+                }, _), $, m &&  r().createElement(x, {
                     $disabled: p,
                     $primary: i === "primary"
-                },  r().createElement(C, null)), w &&  r().createElement(N, null)));
+                },  r().createElement(C, null)), w &&  r().createElement(y, {
+                    $isStartIcon: false
+                },  r().createElement(N, null))));
             }
         } ]);
         return n;
     }(n.Component);
     G(Q, "propTypes", J);
     G(Q, "defaultProps", K);
-    G(Q, c.legacyRefMode, true);
+    G(Q, s.legacyRefMode, true);
     /* harmony default export */    const U = Q;
     // CONCATENATED MODULE: ./src/Button/index.ts
     module.exports = t;

package/ButtonGroup.js

@@ -68,23 +68,20 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var i =  e.n(o);
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
-    const a = require("styled-components");
-    var l =  e.n(a);
+    const i = require("styled-components");
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const u = require("@splunk/react-ui/Box");
     var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroupStyles.ts
-    var s = l()(p()).withConfig({
+    var s = a()(p()).withConfig({
         displayName: "ButtonGroupStyles__StyledBox",
         componentId: "sc-14fs2xs-0"
-    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], (0, c.pick)({
-        enterprise: c.variables.spacingHalf,
-        prisma: c.variables.spacingSmall
-    }));
+    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], c.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroup.tsx
     function f() {
         f = Object.assign || function(e) {
@@ -102,12 +99,12 @@
     }
     function d(e, r) {
         if (e == null) return {};
-        var t = v(e, r);
+        var t = y(e, r);
         var n, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                n = i[o];
+            var l = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < l.length; o++) {
+                n = l[o];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -115,28 +112,28 @@
         }
         return t;
     }
-    function v(e, r) {
+    function y(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var o, i;
-        for (i = 0; i < n.length; i++) {
-            o = n[i];
+        var o, l;
+        for (l = 0; l < n.length; l++) {
+            o = n[l];
             if (r.indexOf(o) >= 0) continue;
             t[o] = e[o];
         }
         return t;
     }
-    var y = {
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+    var v = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
         /** @private */
-        flex: i().bool
+        flex: l().bool
     };
     function b(e) {
         var r = e.children, o = d(e, [ "children" ]);
         // @docs-props-type ButtonGroupPropsBase
-                var i = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
+                var l = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
             var o = n.length;
             
             return (0, t.cloneElement)(e, {
@@ -152,9 +149,9 @@
             flex: true,
             "data-test": "button-group",
             role: "menubar"
-        }, o), i);
+        }, o), l);
     }
-    b.propTypes = y;
+    b.propTypes = v;
     /* harmony default export */    const m = b;
     // CONCATENATED MODULE: ./src/ButtonGroup/index.ts
     module.exports = r;