@splunk/react-ui 4.35.0 → 4.37.0

package/TabBar.js

@@ -74,20 +74,20 @@
     const o = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var s =  e.n(l);
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const c = require("@splunk/themes");
+    const s = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var u = s().div.withConfig({
+    var u = c().div.withConfig({
         displayName: "TabBarStyles__Styled",
         componentId: "sc-1t85fen-0"
-    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], c.mixins.reset("flex"), (0, 
-    c.pick)({
-        enterprise: c.variables.borderLightColor,
-        prisma: c.variables.neutral200
-    }), (0, c.pickVariant)("$layout", {
+    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], s.mixins.reset("flex"), (0, 
+    s.pick)({
+        enterprise: s.variables.borderLightColor,
+        prisma: s.variables.neutral200
+    }), (0, s.pickVariant)("$layout", {
         horizontal: {
-            prisma: (0, c.pickVariant)("$withUnderline", {
+            prisma: (0, s.pickVariant)("$withUnderline", {
                 /* context appearance is only supported for Prisma */
                 true: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
             }),
@@ -121,10 +121,10 @@
     const O = require("@splunk/react-ui/Clickable");
     var T =  e.n(O);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var I = (0, c.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
+    var I = (0, s.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
     });
-    var j = (0, c.pickVariant)("$layout", {
+    var j = (0, s.pickVariant)("$layout", {
         horizontal: {
             enterprise: (0, l.css)([ "height:3px;" ])
         },
@@ -132,25 +132,25 @@
             enterprise: (0, l.css)([ "width:3px;" ])
         }
     });
-    var z = s()(T()).withConfig({
+    var z = c()(T()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
     })([ "flex:0 1 auto;display:flow-root;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";&::after{display:block;content:attr(data-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]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";", "}" ], (0, 
-    c.pick)({
+    s.pick)({
         enterprise: "24px",
         prisma: "20px"
-    }), c.variables.contentColorDefault, c.variables.fontWeightBold, (0, c.pickVariant)("$layout", {
-        horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, c.pick)({
-            enterprise: (0, c.pickVariant)("$hasMenu", {
+    }), s.variables.contentColorDefault, s.variables.fontWeightBold, (0, s.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, s.pick)({
+            enterprise: (0, s.pickVariant)("$hasMenu", {
                 true: "3px 4px 3px 16px",
                 false: "3px 20px"
             }),
             prisma: {
-                comfortable: (0, c.pickVariant)("$hasMenu", {
+                comfortable: (0, s.pickVariant)("$hasMenu", {
                     true: "0px 8px 0px 16px",
                     false: "0px 20px"
                 }),
-                compact: (0, c.pickVariant)("$hasMenu", {
+                compact: (0, s.pickVariant)("$hasMenu", {
                     true: "0px 8px 0px 12px",
                     false: "0 16px"
                 })
@@ -161,48 +161,48 @@
                 var t = e.$icon;
                 return t && (0, l.css)([ "text-align:center;" ]);
             })),
-            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, c.pick)({
+            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, s.pick)({
                 comfortable: "0 20px",
                 compact: "0 16px"
             }))
         }
-    }), (0, c.pick)({
-        enterprise: (0, l.css)([ "font-weight:", ";" ], c.variables.fontWeightBold),
-        prisma: (0, l.css)([ "color:", ";font-weight:", ";" ], c.variables.contentColorActive, c.variables.fontWeightBold)
-    }), (0, c.pick)({
+    }), (0, s.pick)({
+        enterprise: (0, l.css)([ "font-weight:", ";" ], s.variables.fontWeightBold),
+        prisma: (0, l.css)([ "color:", ";font-weight:", ";" ], s.variables.contentColorActive, s.variables.fontWeightBold)
+    }), (0, s.pick)({
         enterprise: "normal",
-        prisma: c.variables.fontWeightSemiBold
-    }), I, I, c.variables.focusShadowInset, (0, c.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
+        prisma: s.variables.fontWeightSemiBold
+    }), I, I, s.variables.focusShadowInset, (0, s.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
     }));
-    var M = s().div.withConfig({
+    var E = c().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
     })([ "position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}[aria-selected='false'][aria-haspopup='true'] > &&{", "}" ], (0, 
-    c.pick)({
-        enterprise: (0, l.css)([ "background:", ";" ], c.variables.borderLightColor)
-    }), (0, c.pickVariant)("$layout", {
+    s.pick)({
+        enterprise: (0, l.css)([ "background:", ";" ], s.variables.borderLightColor)
+    }), (0, s.pickVariant)("$layout", {
         horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;" ], (0, 
-        c.pick)({
+        s.pick)({
             enterprise: "calc(100% - 20px * 2)",
             prisma: {
                 comfortable: "calc(100% - 20px * 2)",
                 compact: "calc(100% - 16px * 2)"
             }
-        }), (0, c.pick)({
+        }), (0, s.pick)({
             enterprise: (0, l.css)([ "bottom:-1px;" ])
         })),
         vertical: {
             enterprise: (0, l.css)([ "width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;" ]),
             prisma: (0, l.css)([ "width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;" ])
         }
-    }), (0, c.pick)({
-        enterprise: c.variables.accentColor,
-        prisma: c.variables.contentColorActive
-    }), (0, c.pickVariant)("$layout", {
+    }), (0, s.pick)({
+        enterprise: s.variables.accentColor,
+        prisma: s.variables.contentColorActive
+    }), (0, s.pickVariant)("$layout", {
         horizontal: {
             enterprise: (0, l.css)([ "height:3px;" ]),
-            prisma: (0, c.pickVariant)("$withUnderline", {
+            prisma: (0, s.pickVariant)("$withUnderline", {
                 // context appearance is only supported for Prisma
                 true: (0, l.css)([ "height:1px;" ])
             })
@@ -214,22 +214,22 @@
     }), 
     /* sc-sel */
     z, j, j);
-    var _ = s().span.withConfig({
+    var M = c().span.withConfig({
         displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
-    })([ "display:inline-block;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{", "}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], c.variables.borderRadius, (0, 
-    c.pickVariant)("$active", {
+    })([ "display:inline-block;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{", "}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], s.variables.borderRadius, (0, 
+    s.pickVariant)("$active", {
         false: (0, l.css)([ "visibility:hidden;" ])
-    }), (0, c.pick)({
+    }), (0, s.pick)({
         enterprise: (0, l.css)([ "color:", ";background-color:", ";border-color:", ";" ], (0, 
-        c.pick)({
-            light: c.variables.linkColor,
-            dark: c.variables.white
-        }), c.variables.backgroundColorHover, (0, c.pick)({
-            light: c.variables.gray60,
-            dark: c.variables.borderColor
+        s.pick)({
+            light: s.variables.linkColor,
+            dark: s.variables.white
+        }), s.variables.backgroundColorHover, (0, s.pick)({
+            light: s.variables.gray60,
+            dark: s.variables.borderColor
         })),
-        prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], c.variables.interactiveColorOverlayHover, c.variables.interactiveColorBorderHover, c.variables.hoverShadow)
+        prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], s.variables.interactiveColorOverlayHover, s.variables.interactiveColorBorderHover, s.variables.hoverShadow)
     }), 
     /* sc-sel */
     z, 
@@ -237,56 +237,56 @@
     z, 
     /* sc-sel */
     z);
-    var E = s().span.withConfig({
+    var _ = c().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "", ";" ], (0, c.pickVariant)("$iconSize", {
+    })([ "", ";" ], (0, s.pickVariant)("$iconSize", {
         inline: (0, l.css)([ "", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
-        c.pick)({
+        s.pick)({
             prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
-        }), (0, c.pick)({
+        }), (0, s.pick)({
             enterprise: "0.4em",
             prisma: "8px"
         })),
         small: (0, l.css)([ "font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;" ]),
         large: (0, l.css)([ "font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;" ])
     }));
-    var P = s().div.withConfig({
+    var P = c().div.withConfig({
         displayName: "TabStyles__StyledLabelAndMenuContainer",
         componentId: "sc-1ry8mzj-4"
     })([ "display:flex;align-items:center;justify-content:center;gap:8px;" ]);
-    var $ = s().div.withConfig({
+    var $ = c().div.withConfig({
         displayName: "TabStyles__StyledLabel",
         componentId: "sc-1ry8mzj-5"
     })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
-    c.pick)({
+    s.pick)({
         enterprise: "0",
         prisma: {
             comfortable: "16px 0",
             compact: "10px 0"
         }
     }));
-    var D = s().span.withConfig({
+    var R = c().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-6"
-    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], c.variables.contentColorDefault, (0, 
-    c.pick)({
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], s.variables.contentColorDefault, (0, 
+    s.pick)({
         enterprise: "inherit",
         prisma: "10px"
-    }), (0, c.pick)({
+    }), (0, s.pick)({
         enterprise: "0.4em 0.3em",
         prisma: "0.4em 0.6em"
-    }), (0, c.pick)({
+    }), (0, s.pick)({
         enterprise: "0",
         prisma: "0.3em"
-    }), (0, c.pick)({
+    }), (0, s.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
-        prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
-    }), c.variables.contentColorDisabled);
-    var R = s().div.withConfig({
+        prisma: (0, l.css)([ "background:", ";" ], s.variables.neutral100)
+    }), s.variables.contentColorDisabled);
+    var D = c().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
-    })([ "padding:8px;font-size:", ";" ], c.variables.fontSizeSmall);
+    })([ "padding:8px;font-size:", ";" ], s.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
     var q = function e() {
         return undefined;
@@ -579,7 +579,7 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.active, i = t.ariaControls, a = t.count, o = t.disabled, l = t.icon, s = t.label, c = t.tabId, u = t.maxCount, p = t.splunkTheme, v = t.to, h = t.tooltip, m = t.menu, x = t.tabKey, w = U(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip", "menu", "tabKey" ]);
+                var t = this.props, r = t.active, i = t.ariaControls, a = t.count, o = t.disabled, l = t.icon, c = t.label, s = t.tabId, u = t.maxCount, p = t.splunkTheme, v = t.to, h = t.tooltip, m = t.menu, x = t.tabKey, w = U(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip", "menu", "tabKey" ]);
                 var C = this.state, O = C.anchor, T = C.open;
                 var I = this.context, j = I.appearance, q = I.disabled, A = I.iconSize, V = I.layout, B = I.width, F = I.onMenuOpen, W = I.onMenuClose, L = I.isMenuOpen, H = I.focusedTabKey;
                 var Y = w.style;
@@ -590,7 +590,7 @@
                     width: B
                 } : Y;
                 var Z = p.isEnterprise;
-                var ee = s ? s.toString() : "";
+                var ee = c ? c.toString() : "";
                 var te = a === 0 || a ? "".concat(a === null || a === void 0 ? void 0 : a.toString()) : "";
  // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
                                 var re;
@@ -602,7 +602,7 @@
                     re = "".concat(ee, "    ").concat(te);
                 }
                 var ie = H === x && L && !!m;
-                var ae =  n().createElement(_, {
+                var ae =  n().createElement(M, {
                     $active: r,
                     "data-test": "menu-toggle",
                     tabIndex: -1,
@@ -635,7 +635,7 @@
                     "aria-describedby": m ? this.menuDescription : undefined,
                     "aria-haspopup": ie,
                     "data-test": "tab",
-                    "data-test-tab-id": c,
+                    "data-test-tab-id": s,
                     "data-test-popover-id": h ? this.popoverId : undefined,
                     $layout: Q,
                     $icon: l && J !== "inline" ? true : undefined,
@@ -656,15 +656,15 @@
                 }), oe( n().createElement($, {
                     "data-test": "label",
                     $withUnderline: j === "navigation"
-                }, l &&  n().createElement(E, {
+                }, l &&  n().createElement(_, {
                     $iconSize: J
-                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
+                }, l), c, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(R, {
                     "data-test": "count",
                     disabled: G
                 }, u ? K(a, u) : a)), !!m &&  n().createElement(S(), {
                     "aria-hidden": true,
                     id: this.menuDescription
-                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(M, {
+                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(E, {
                     $layout: Q,
                     $withUnderline: j === "navigation"
                 }), !o && h &&  n().createElement(k(), {
@@ -679,7 +679,7 @@
                     id: this.popoverId,
                     open: !!O && T,
                     align: "center"
-                },  n().createElement(R, null, h)), h &&  n().createElement(S(), {
+                },  n().createElement(D, null, h)), h &&  n().createElement(S(), {
                     "aria-hidden": "true",
                     id: this.ariaId
                 }, h));
@@ -690,12 +690,12 @@
     re(ae, "propTypes", ne);
     re(ae, "defaultProps", ie);
     re(ae, "contextType", V);
-    var oe = (0, c.withSplunkTheme)(ae);
+    var oe = (0, s.withSplunkTheme)(ae);
     oe.propTypes = ae.propTypes;
     /* harmony default export */    const le = oe;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function se(e, t, r) {
+    function ce(e, t, r) {
         for (var n = 0; n < e.length; n += 1) {
             var i;
             var a = (n + r) % e.length;
@@ -705,7 +705,7 @@
         }
         return e[t];
     }
-    function ce(e, t, r) {
+    function se(e, t, r) {
         for (var n = e.length; n > 0; n -= 1) {
             var i;
             var a = (n + r) % e.length;
@@ -819,40 +819,46 @@
         tabWidth: a().number
     };
     function ke(e) {
-        var t = e.activeTabId, i = e.autoActivate, a = e.appearance, l = a === void 0 ? "navigation" : a, s = e.children, c = e.disabled, p = c === void 0 ? false : c, 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 = ye(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
+        var t = e.activeTabId, i = e.autoActivate, a = e.appearance, l = a === void 0 ? "navigation" : a, c = e.children, s = e.disabled, p = 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 = ye(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
                 var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], S = k[1];
         var C = (0, r.useState)(0), O = pe(C, 2), T = O[0], I = O[1];
-        var j = (0, r.useRef)([]);
-        var z = h === "vertical" ? "down" : "right";
-        var M = h === "vertical" ? "up" : "left";
-        var _ = (0, r.useCallback)((function(e, t) {
+        var j = (0, r.useRef)(T);
+        j.current = T;
+        var z = (0, r.useRef)("");
+        var E = (0, r.useRef)([]);
+        var M = h === "vertical" ? "down" : "right";
+        var _ = h === "vertical" ? "up" : "left";
+        var P = (0, r.useCallback)((function(e, t) {
             var r = t.tabKey, n = t.tabId;
             if (r != null) {
                 I(r);
             }
+            if (n != null) {
+                z.current = n;
+            }
             if (i) {
                 y === null || y === void 0 ? void 0 : y(e, {
                     selectedTabId: n
                 });
             }
         }), [ i, y ]);
-        var E = (0, r.useCallback)((function(e, t) {
+        var $ = (0, r.useCallback)((function(e, t) {
             y === null || y === void 0 ? void 0 : y(e, {
                 selectedTabId: t.tabId
             });
         }), [ y ]);
-        var P = (0, r.useMemo)((function() {
+        var R = (0, r.useMemo)((function() {
             var e = 0;
  // reset tabRefs since children are changed
-                        j.current = [];
-            return r.Children.toArray(s).filter(r.isValidElement).map((function(i) {
+                        E.current = [];
+            return r.Children.toArray(c).filter(r.isValidElement).map((function(i) {
                 // <TabBar> allows non-<Tab> children, pass them through without any modification
                 if (typeof i.type === "string" || i.type.name !== le.name) {
                     return i;
                 }
                 var a =  n().createRef();
-                j.current.push(a);
+                E.current.push(a);
                 var o = {
                     active: t === i.props.tabId,
                     tabKey: e,
@@ -862,25 +868,34 @@
                 
                 return (0, r.cloneElement)(i, o);
             }));
-        }), [ t, s ]);
-        var $ = m && m > ge ? m : null;
-        var D = (0, r.useCallback)((function(e) {
+        }), [ t, c ]);
+        (0, r.useEffect)((function() {
+            R.forEach((function(e, t) {
+                // if the focused tab has changed order in the tab bar,
+                //   then we want to update the focusedTabKey to the new position of the focused tab
+                if (z.current != null && z.current === e.props.tabId && j.current !== t) {
+                    I(t);
+                }
+            }));
+        }), [ R ]);
+        var D = m && m > ge ? m : null;
+        var q = (0, r.useCallback)((function(e) {
             var t = (0, o.keycode)(e.nativeEvent);
             var r;
-            if (t === z) {
-                r = se(j.current, T, T + 1);
-            } else if (t === M) {
-                r = ce(j.current, T, T - 1);
+            if (t === M) {
+                r = ce(E.current, T, T + 1);
+            } else if (t === _) {
+                r = se(E.current, T, T - 1);
             } else if (t === "home") {
-                r = se(j.current, T, 0);
+                r = ce(E.current, T, 0);
             } else if (t === "end") {
-                r = ce(j.current, T, j.current.length - 1);
+                r = se(E.current, T, E.current.length - 1);
             } else if (h === "horizontal" && e.shiftKey && t === "f10") {
                 S((function(e) {
                     if (e) {
                         var t;
                         // if we're closing, we want to shift focus to the tab
-                                                var r = j.current[T];
+                                                var r = E.current[T];
                         r === null || r === void 0 ? void 0 : (t = r.current) === null || t === void 0 ? void 0 : t.focus();
                     }
                     return !e;
@@ -893,33 +908,33 @@
                 (n = r.current) === null || n === void 0 ? void 0 : n.focus();
                 e.preventDefault();
             }
-        }), [ T, h, z, M ]);
-        var R = (0, r.useCallback)((function(e) {
+        }), [ T, h, M, _ ]);
+        var A = (0, r.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
             S(true);
         }), []);
-        var q = (0, r.useCallback)((function(e) {
+        var K = (0, r.useCallback)((function(e) {
             var t = e.event;
             // prevent content clicks/enter key from changing the active tab
                         t === null || t === void 0 ? void 0 : t.stopPropagation();
             S(false);
         }), []);
-        var A = (0, r.useMemo)((function() {
+        var B = (0, r.useMemo)((function() {
             return {
                 appearance: l,
                 disabled: p,
                 iconSize: v,
                 layout: h,
-                onClick: E,
-                onFocus: _,
-                width: $,
-                onMenuOpen: R,
-                onMenuClose: q,
+                onClick: $,
+                onFocus: P,
+                width: D,
+                onMenuOpen: A,
+                onMenuClose: K,
                 isMenuOpen: w,
                 focusedTabKey: T
             };
-        }), [ l, p, T, v, w, h, q, R, E, _, $ ]);
+        }), [ l, p, T, v, w, h, K, A, $, P, D ]);
         
         return n().createElement(u, ue({
             "data-tab-layout": h,
@@ -929,10 +944,10 @@
             ref: d,
             $layout: h,
             $withUnderline: l === "navigation",
-            onKeyDown: D
+            onKeyDown: q
         }, g),  n().createElement(V.Provider, {
-            value: A
-        }, P));
+            value: B
+        }, R));
     }
     ke.propTypes = xe;
     ke.Tab = le;

package/TextArea.js

@@ -76,8 +76,8 @@
     const s = require("lodash/has");
     var c =  e.n(s);
     // CONCATENATED MODULE: external "lodash/keys"
-    const d = require("lodash/keys");
-    var p =  e.n(d);
+    const p = require("lodash/keys");
+    var d =  e.n(p);
     // CONCATENATED MODULE: external "lodash/noop"
     const u = require("lodash/noop");
     var f =  e.n(u);
@@ -269,9 +269,11 @@
     var V = M()(H).withConfig({
         displayName: "TextAreaStyles__StyledTextAreaShadow",
         componentId: "gfy8yp-5"
-    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", ";" ], (function(e) {
+    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", "" ], (function(e) {
         var t = e.$startAdornmentWidth, r = e.$endAdornmentWidth;
-        return (0, T.css)([ "width:calc( 100% - ", " - ", " );" ], t || B, r || z);
+        var n = t ? "".concat(t, "px") : B;
+        var a = r ? "".concat(r, "px") : z;
+        return (0, T.css)([ "width:calc(100% - ", " - ", ");" ], n, a);
     }));
     var K = (0, k.pick)({
         enterprise: {
@@ -423,9 +425,9 @@
             var l = parseInt(o, 10);
             var s = parseInt(i.getPropertyValue("padding-top"), 10);
             var c = parseInt(i.getPropertyValue("padding-bottom"), 10);
-            var d = parseInt(i.getPropertyValue("border-top-width"), 10);
-            var p = parseInt(i.getPropertyValue("border-bottom-width"), 10);
-            var u = a.scrollHeight + d + p + 1;
+            var p = parseInt(i.getPropertyValue("border-top-width"), 10);
+            var d = parseInt(i.getPropertyValue("border-bottom-width"), 10);
+            var u = a.scrollHeight + p + d + 1;
  // need one extra.
             /* eslint-disable no-restricted-globals */
             // Leverage the global `isNaN` here for IE support, rather than Number.isNaN.
@@ -434,11 +436,11 @@
                 return false;
             }
             /* eslint-enable no-restricted-globals */            if (r >= n) {
-                var f = r * l + s + c + d + p + 1;
+                var f = r * l + s + c + p + d + 1;
  // need one extra.
                                 u = Math.min(f, u);
             }
-            var h = n * l + s + c + d + p + 1;
+            var h = n * l + s + c + p + d + 1;
  // need one extra.
                         u = Math.max(h, u);
             if (t !== u) {
@@ -495,7 +497,7 @@
         return oe.apply(this, arguments);
     }
     function le(e) {
-        return pe(e) || de(e) || ce(e) || se();
+        return de(e) || pe(e) || ce(e) || se();
     }
     function se() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -508,10 +510,10 @@
         if (r === "Map" || r === "Set") return Array.from(e);
         if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return ue(e, t);
     }
-    function de(e) {
+    function pe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function pe(e) {
+    function de(e) {
         if (Array.isArray(e)) return ue(e);
     }
     function ue(e, t) {
@@ -868,14 +870,14 @@
             Ie(Se(a), "renderEndAdornment", (function() {
                 var e;
                 var t = a.props, r = t.appearance, i = t.endAdornment, o = t.disabled, l = t.canClear, s = t.splunkTheme;
-                var c = s.isPrisma, d = s.isEnterprise;
+                var c = s.isPrisma, p = s.isEnterprise;
                 if (i) {
                     return a.renderAdornment(i, "end");
                 }
-                var p = a.context;
-                var u = (e = p.labelAttrs) === null || e === void 0 ? void 0 : e.text;
+                var d = a.context;
+                var u = (e = d.labelAttrs) === null || e === void 0 ? void 0 : e.text;
                 var f = u ? (0, S._)("Clear ".concat(u, " text field")) : (0, S._)("Clear text field");
-                if (d && r === "search") {
+                if (p && r === "search") {
                     /* Both icons are rendered, and StyledBox toggles visibility based on :focus-within */
                     return a.renderAdornment( n().createElement(n().Fragment, null,  n().createElement(Q, {
                         "aria-label": f,
@@ -965,7 +967,7 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, d = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
+                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, p = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
                 var D = he(he({}, b()(_, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
@@ -973,7 +975,7 @@
                     "aria-labelledby": k,
                     "aria-invalid": y || undefined
                 });
-                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(p()(D))));
+                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(d()(D))));
                 var W = this.getDisplayValue();
                 var N = {
                     className: (0, A.toClassName)(c, x),
@@ -1016,7 +1018,7 @@
                 
                 return n().createElement(R, oe({
                     tabIndex: -1,
-                    className: (0, A.toClassName)(c, d),
+                    className: (0, A.toClassName)(c, p),
                     "data-test": "text-area",
                     "data-test-value": W,
                     elementRef: m,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.35.0",
+  "version": "4.37.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -15,6 +15,7 @@
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "lint": "yarn run eslint && yarn run stylelint",
+    "lint:quiet": "yarn run eslint --quiet && yarn run stylelint",
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
     "storybook": "sb dev -p 6006",
@@ -63,7 +64,7 @@
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "1.0.0-beta.13",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.17",
+    "@splunk/react-docs": "1.0.0-beta.18",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",