@splunk/react-ui 4.21.1 → 4.22.0

package/TabBar.js

@@ -61,8 +61,8 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ L,
-        default: () => /* reexport */ te
+        Tab: () => /* reexport */ Y,
+        default: () => /* reexport */ re
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -93,19 +93,16 @@
             }),
             enterprise: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
         },
-        vertical: {
-            enterprise: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ]),
-            prisma: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ])
-        }
+        vertical: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ])
     }));
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
     const u = require("@splunk/react-ui/Popover");
     var d =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const f = require("@splunk/react-ui/ScreenReaderContent");
-    var b =  e.n(f);
+    var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const v = require("@splunk/ui-utils/id");
+    const b = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const h = require("@splunk/react-ui/Clickable");
     var y =  e.n(h);
@@ -113,11 +110,11 @@
     var m = c()(y()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
-    })([ "flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";", " &:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}" ], (0, 
+    })([ "flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}" ], (0, 
     s.pick)({
         enterprise: "24px",
         prisma: "20px"
-    }), s.variables.contentColorDefault, (0, s.pickVariant)("$layout", {
+    }), s.variables.contentColorDefault, s.variables.fontWeightBold, (0, s.pickVariant)("$layout", {
         horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, s.pick)({
             enterprise: "3px 20px",
             prisma: {
@@ -141,8 +138,6 @@
     }), (0, s.pick)({
         enterprise: "normal",
         prisma: s.variables.fontWeightSemiBold
-    }), (0, s.pick)({
-        prisma: (0, l.css)([ "&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}" ], s.variables.fontWeightBold)
     }), (0, s.pick)({
         prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
     }), s.variables.focusShadowInset, (0, s.pick)({
@@ -217,16 +212,19 @@
             compact: "10px 0"
         }
     }));
-    var w = c().div.withConfig({
+    var w = c().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-4"
-    })([ "", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}" ], s.mixins.reset("inlne-block"), s.variables.contentColorDefault, (0, 
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{background:", ";color:", ";}" ], s.variables.contentColorDefault, (0, 
     s.pick)({
         enterprise: "inherit",
         prisma: "10px"
+    }), (0, s.pick)({
+        enterprise: "0.4em 0.3em",
+        prisma: "0.4em 0.6em"
     }), (0, s.pick)({
         enterprise: "0",
-        prisma: "8px"
+        prisma: "0.3em"
     }), (0, s.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
         prisma: (0, l.css)([ "background:", ";" ], s.variables.neutral100)
@@ -241,7 +239,7 @@
     /* harmony default export */    const C = S;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var I = function e(t, r) {
+    var T = function e(t, r) {
         if (t > r) {
             return "".concat(r, "+");
         }
@@ -254,7 +252,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function j(e, t) {
+    function I(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -267,18 +265,18 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function T(e) {
+    function j(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            T = function e(t) {
+            j = function e(t) {
                 return typeof t;
             };
         } else {
-            T = function e(t) {
+            j = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return T(e);
+        return j(e);
     }
     function z() {
         z = Object.assign || function(e) {
@@ -374,7 +372,7 @@
         };
     }
     function K(e, t) {
-        if (t && (T(t) === "object" || typeof t === "function")) {
+        if (t && (j(t) === "object" || typeof t === "function")) {
             return t;
         }
         return V(e);
@@ -427,6 +425,8 @@
         label: o().oneOfType([ o().string, o().element ]),
         /** @private Maximum count number in tab label */
         maxCount: o().number,
+        /** @private */
+        splunkTheme: o().object,
         tabId: o().string,
         /** @private. The internal key of the tab */
         tabKey: o().number,
@@ -450,7 +450,7 @@
                 n.setState({
                     anchor: e
                 });
-                j(n.props.elementRef, e);
+                I(n.props.elementRef, e);
             }));
             N(V(n), "handleTooltipOpen", (function() {
                 n.setState({
@@ -486,8 +486,8 @@
                     tabKey: i
                 });
             }));
-            n.popoverId = (0, v.createDOMID)("popover");
-            n.ariaId = (0, v.createDOMID)("aria-id");
+            n.popoverId = (0, b.createDOMID)("popover");
+            n.ariaId = (0, b.createDOMID)("aria-id");
             n.state = {
                 open: false,
                 anchor: null
@@ -503,16 +503,28 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.active, i = t.ariaControls, o = t.count, a = t.disabled, l = t.icon, c = t.label, s = t.tabId, p = t.maxCount, u = t.to, f = t.tooltip, v = _(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "to", "tooltip" ]);
-                var h = this.state, y = h.anchor, S = h.open;
-                var C = this.context, j = C.appearance, T = C.disabled, E = C.iconSize, P = C.layout, $ = C.width;
-                var R = v.style;
-                var D = T || a || false;
-                var M = E || "inline";
-                var q = P || "horizontal";
-                var K = $ ? {
-                    width: $
-                } : R;
+                var t = this.props, r = t.active, i = t.ariaControls, o = t.count, a = t.disabled, l = t.icon, c = t.label, s = t.tabId, p = t.maxCount, u = t.splunkTheme, f = t.to, b = t.tooltip, h = _(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip" ]);
+                var y = this.state, S = y.anchor, C = y.open;
+                var I = this.context, j = I.appearance, E = I.disabled, P = I.iconSize, $ = I.layout, R = I.width;
+                var D = h.style;
+                var M = E || a || false;
+                var q = P || "inline";
+                var K = $ || "horizontal";
+                var V = R ? {
+                    width: R
+                } : D;
+                var A = u.isEnterprise;
+                var B = c ? c.toString() : "";
+                var N = o === 0 || o ? "".concat(o === null || o === void 0 ? void 0 : o.toString()) : "";
+ // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
+                                var W;
+                if (A) {
+                    // countValue needs unicode space for width to not change after it's clicked.
+                    var F = N ? "(".concat(N, ")  ") : "";
+                    W = "".concat(B, " ").concat(F);
+                } else {
+                    W = "".concat(B, "    ").concat(N);
+                }
                 
                 // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
                 // eslint-disable-next-line
@@ -523,13 +535,13 @@
                     "aria-labelledby": this.ariaId,
                     "data-test": "tab",
                     "data-test-tab-id": s,
-                    "data-test-popover-id": f ? this.popoverId : undefined,
-                    $layout: q,
-                    $icon: l && M !== "inline" ? true : undefined,
-                    disabled: D,
+                    "data-test-popover-id": b ? this.popoverId : undefined,
+                    $layout: K,
+                    $icon: l && q !== "inline" ? true : undefined,
+                    disabled: M,
                     elementRef: this.handleMount,
-                    style: K
-                }, v, {
+                    style: V
+                }, h, {
                     onClick: this.handleClick,
                     onFocus: this.handleFocus,
                     onMouseEnter: this.handleTooltipOpen,
@@ -537,34 +549,35 @@
                     onMouseLeave: this.handleTooltipClose,
                     role: "tab",
                     tabIndex: r ? undefined : -1,
-                    to: u
+                    title: W,
+                    to: f
                 }),  n().createElement(k, {
                     "data-test": "label",
                     $withUnderline: j === "navigation"
                 }, l &&  n().createElement(x, {
-                    $iconSize: M
-                }, l), c, (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(b(), null, " "),  n().createElement(w, {
+                    $iconSize: q
+                }, l), c, (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(v(), null, " "),  n().createElement(w, {
                     "data-test": "count",
-                    disabled: D
-                }, p ? I(o, p) : o))),  n().createElement(g, {
-                    $layout: q,
+                    disabled: M
+                }, p ? T(o, p) : o))),  n().createElement(g, {
+                    $layout: K,
                     $withUnderline: j === "navigation"
-                }), !a && f &&  n().createElement(d(), {
+                }), !a && b &&  n().createElement(d(), {
                     role: "tooltip",
-                    anchor: y,
+                    anchor: S,
                     animationConfig: {
                         tension: 400
                     },
                     appearance: "inverted",
                     closeReasons: [ "offScreen", "escapeKey" ],
-                    defaultPlacement: q === "vertical" ? "right" : "above",
+                    defaultPlacement: K === "vertical" ? "right" : "above",
                     id: this.popoverId,
-                    open: !!y && S,
+                    open: !!S && C,
                     align: "center"
-                },  n().createElement(O, null, f)), f &&  n().createElement(b(), {
+                },  n().createElement(O, null, b)), b &&  n().createElement(v(), {
                     "aria-hidden": "true",
                     id: this.ariaId
-                }, f));
+                }, b));
             }
         } ]);
         return r;
@@ -572,10 +585,12 @@
     N(U, "propTypes", W);
     N(U, "defaultProps", F);
     N(U, "contextType", C);
-    /* harmony default export */    const L = U;
+    var L = (0, s.withSplunkTheme)(U);
+    L.propTypes = U.propTypes;
+    /* harmony default export */    const Y = L;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function Y(e, t, r) {
+    function G(e, t, r) {
         for (var n = 0; n < e.length; n += 1) {
             var i;
             var o = (n + r) % e.length;
@@ -585,7 +600,7 @@
         }
         return e[t];
     }
-    function G(e, t, r) {
+    function H(e, t, r) {
         for (var n = e.length; n > 0; n -= 1) {
             var i;
             var o = (n + r) % e.length;
@@ -596,8 +611,8 @@
         return e[t];
     }
     // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-    function H() {
-        H = Object.assign || function(e) {
+    function J() {
+        J = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -608,11 +623,11 @@
             }
             return e;
         };
-        return H.apply(this, arguments);
+        return J.apply(this, arguments);
     }
-    function J(e, t) {
+    function Q(e, t) {
         if (e == null) return {};
-        var r = Q(e, t);
+        var r = X(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -625,7 +640,7 @@
         }
         return r;
     }
-    function Q(e, t) {
+    function X(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -637,8 +652,8 @@
         }
         return r;
     }
-    var X = 50;
-    /** @public */    var Z = {
+    var Z = 50;
+    /** @public */    var ee = {
         autoActivate: o().bool,
         activeTabId: o().string,
         appearance: o().oneOf([ "navigation", "context" ]),
@@ -651,8 +666,8 @@
         onChange: o().func,
         tabWidth: o().number
     };
-    function ee(e) {
-        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, c = e.children, s = e.disabled, u = s === void 0 ? false : s, d = e.elementRef, f = e.iconSize, b = f === void 0 ? "inline" : f, v = e.layout, h = v === void 0 ? "horizontal" : v, y = e.onChange, m = e.tabWidth, g = J(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
+    function te(e) {
+        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, c = e.children, s = e.disabled, u = s === void 0 ? false : s, d = e.elementRef, f = e.iconSize, v = f === void 0 ? "inline" : f, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = Q(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
                 var x = (0, r.useRef)(0);
         var k = [];
@@ -673,40 +688,40 @@
                 });
             }
         };
-        var I = function e(t, r) {
+        var T = function e(t, r) {
             y === null || y === void 0 ? void 0 : y(t, {
                 selectedTabId: r.tabId
             });
         };
-        var j = 0;
-        var T = r.Children.toArray(c).filter(r.isValidElement).map((function(e) {
+        var I = 0;
+        var j = r.Children.toArray(c).filter(r.isValidElement).map((function(e) {
             // <TabBar> allows non-<Tab> children, pass them through without any modification
-            if (typeof e.type === "string" || e.type.name !== L.name) {
+            if (typeof e.type === "string" || e.type.name !== Y.name) {
                 return e;
             }
             var i =  n().createRef();
             k.push(i);
             var o = {
                 active: t === e.props.tabId,
-                tabKey: j,
+                tabKey: I,
                 ref: i
             };
-            j += 1;
+            I += 1;
             
             return (0, r.cloneElement)(e, o);
         }));
-        var z = m && m > X ? m : null;
+        var z = m && m > Z ? m : null;
         var _ = function e(t) {
             var r = (0, a.keycode)(t.nativeEvent);
             var n;
             if (r === w) {
-                n = Y(k, x.current, x.current + 1);
+                n = G(k, x.current, x.current + 1);
             } else if (r === O) {
-                n = G(k, x.current, x.current - 1);
+                n = H(k, x.current, x.current - 1);
             } else if (r === "home") {
-                n = Y(k, x.current, 0);
+                n = G(k, x.current, 0);
             } else if (r === "end") {
-                n = G(k, x.current, k.length - 1);
+                n = H(k, x.current, k.length - 1);
             }
             if (n != null) {
                 var i;
@@ -715,7 +730,7 @@
             }
         };
         
-        return n().createElement(p, H({
+        return n().createElement(p, J({
             "data-tab-layout": h,
             "data-test-active-tab-id": t,
             "data-test": "tab-bar",
@@ -728,17 +743,17 @@
             value: {
                 appearance: l,
                 disabled: u,
-                iconSize: b,
+                iconSize: v,
                 layout: h,
-                onClick: I,
+                onClick: T,
                 onFocus: S,
                 width: z
             }
-        }, T));
+        }, j));
     }
-    ee.propTypes = Z;
-    ee.Tab = L;
-    /* harmony default export */    const te = ee;
+    te.propTypes = ee;
+    te.Tab = Y;
+    /* harmony default export */    const re = te;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();