@splunk/react-ui 4.35.0 → 4.36.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.35.0",
+  "version": "4.36.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",

package/types/src/ButtonSimple/ButtonSimple.d.ts

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { AnyTheme } from '@splunk/themes';
+import { ButtonVariant } from './ButtonSimpleStyles';
 import { ClassComponentProps } from '../utils/types';
 declare const appearances: ("default" | "flat" | "toggle" | "primary" | "secondary" | "destructive" | "subtle" | "pill")[];
 type Appearance = typeof appearances[number];
@@ -68,4 +69,5 @@ declare const ButtonSimpleWithTheme: React.ForwardRefExoticComponent<Omit<Pick<P
 }, "splunkTheme">>;
 export default ButtonSimpleWithTheme;
 export type { ButtonSimple as ButtonSimpleWithoutTheme };
+export type { ButtonVariant };
 export type { ButtonSimplePropsBase };

package/types/src/ComboBox/ComboBox.d.ts

@@ -106,8 +106,12 @@ interface ComboBoxPropsBase {
     placeholder?: string;
     /** Prepend removes rounded borders from the left side. */
     prepend?: boolean;
-    /** The size of the text input.
-     * @themeNotes Supported by the `enterprise` theme only. */
+    /**
+     * @deprecated
+     * This prop is deprecated and will be removed in the next major version.
+     * The size of the text input.
+     * @themeNotes Supported by the `enterprise` theme only.
+     */
     size?: 'small' | 'medium' | 'large';
     /** The value of the input. Only applicable in controlled mode. */
     value?: string;
@@ -118,7 +122,7 @@ interface ComboBoxPropsBase {
      */
     virtualization?: number;
 }
-declare const defaultProps: Required<Pick<ComboBoxPropsBase, 'animateLoading' | 'controlledFilter' | 'defaultPlacement' | 'disabled' | 'error' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'placeholder' | 'size'>>;
+declare const defaultProps: Required<Pick<ComboBoxPropsBase, 'animateLoading' | 'controlledFilter' | 'defaultPlacement' | 'disabled' | 'error' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'placeholder'>>;
 interface ComboBoxPropsBaseControlled extends ComboBoxPropsBase {
     defaultValue?: never;
     onChange: ComboBoxChangeHandler;
@@ -152,7 +156,7 @@ declare class ComboBox extends Component<ComboBoxProps, ComboBoxState> {
     private previousActiveIndex;
     private textInput;
     static propTypes: React.WeakValidationMap<ComboBoxProps>;
-    static defaultProps: Required<Pick<ComboBoxPropsBase, "placeholder" | "disabled" | "size" | "inline" | "error" | "defaultPlacement" | "animateLoading" | "isLoadingOptions" | "menuStyle" | "controlledFilter">>;
+    static defaultProps: Required<Pick<ComboBoxPropsBase, "placeholder" | "disabled" | "inline" | "error" | "defaultPlacement" | "animateLoading" | "isLoadingOptions" | "menuStyle" | "controlledFilter">>;
     static Option: typeof Option;
     static Divider: typeof Divider;
     static Heading: typeof Heading;