@splunk/react-ui 4.39.0 → 4.41.0

package/TabBar.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ se,
+        Tab: () => /* reexport */ ce,
         default: () => /* reexport */ Ce
     });
     // CONCATENATED MODULE: external "react"
@@ -74,20 +74,20 @@
     const a = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var c =  e.n(l);
+    var s =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var u = c().div.withConfig({
+    var u = s().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 ", ";}", ";" ], s.mixins.reset("flex"), (0, 
-    s.pick)({
-        enterprise: s.variables.borderLightColor,
-        prisma: s.variables.neutral200
-    }), (0, s.pickVariant)("$layout", {
+    })([ "", " 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", {
         horizontal: {
-            prisma: (0, s.pickVariant)("$withUnderline", {
+            prisma: (0, c.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, s.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
+    var I = (0, c.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
     });
-    var j = (0, s.pickVariant)("$layout", {
+    var j = (0, c.pickVariant)("$layout", {
         horizontal: {
             enterprise: (0, l.css)([ "height:3px;" ])
         },
@@ -132,25 +132,25 @@
             enterprise: (0, l.css)([ "width:3px;" ])
         }
     });
-    var z = c()(T()).withConfig({
+    var P = s()(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, 
-    s.pick)({
+    c.pick)({
         enterprise: "24px",
         prisma: "20px"
-    }), 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", {
+    }), 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", {
                 true: "3px 4px 3px 16px",
                 false: "3px 20px"
             }),
             prisma: {
-                comfortable: (0, s.pickVariant)("$hasMenu", {
+                comfortable: (0, c.pickVariant)("$hasMenu", {
                     true: "0px 8px 0px 16px",
                     false: "0px 20px"
                 }),
-                compact: (0, s.pickVariant)("$hasMenu", {
+                compact: (0, c.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, s.pick)({
+            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, c.pick)({
                 comfortable: "0 20px",
                 compact: "0 16px"
             }))
         }
-    }), (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)({
+    }), (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)({
         enterprise: "normal",
-        prisma: s.variables.fontWeightSemiBold
-    }), I, I, s.variables.focusShadowInset, (0, s.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
+        prisma: c.variables.fontWeightSemiBold
+    }), I, I, c.variables.focusShadowInset, (0, c.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
     }));
-    var E = c().div.withConfig({
+    var z = s().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, 
-    s.pick)({
-        enterprise: (0, l.css)([ "background:", ";" ], s.variables.borderLightColor)
-    }), (0, s.pickVariant)("$layout", {
+    c.pick)({
+        enterprise: (0, l.css)([ "background:", ";" ], c.variables.borderLightColor)
+    }), (0, c.pickVariant)("$layout", {
         horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;" ], (0, 
-        s.pick)({
+        c.pick)({
             enterprise: "calc(100% - 20px * 2)",
             prisma: {
                 comfortable: "calc(100% - 20px * 2)",
                 compact: "calc(100% - 16px * 2)"
             }
-        }), (0, s.pick)({
+        }), (0, c.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, s.pick)({
-        enterprise: s.variables.accentColor,
-        prisma: s.variables.contentColorActive
-    }), (0, s.pickVariant)("$layout", {
+    }), (0, c.pick)({
+        enterprise: c.variables.accentColor,
+        prisma: c.variables.contentColorActive
+    }), (0, c.pickVariant)("$layout", {
         horizontal: {
             enterprise: (0, l.css)([ "height:3px;" ]),
-            prisma: (0, s.pickVariant)("$withUnderline", {
+            prisma: (0, c.pickVariant)("$withUnderline", {
                 // context appearance is only supported for Prisma
                 true: (0, l.css)([ "height:1px;" ])
             })
@@ -211,85 +211,88 @@
             enterprise: (0, l.css)([ "width:3px;" ]),
             prisma: (0, l.css)([ "width:1px;" ])
         }
-    }), /* sc-sel */ z, j, j);
-    var M = c().span.withConfig({
+    }), /* sc-sel */ P, j, j);
+    var E = s().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;}" ], s.variables.borderRadius, (0, 
-    s.pickVariant)("$active", {
+    })([ "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", {
         false: (0, l.css)([ "visibility:hidden;" ])
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: (0, l.css)([ "color:", ";background-color:", ";border-color:", ";" ], (0, 
-        s.pick)({
-            light: s.variables.linkColor,
-            dark: s.variables.white
-        }), s.variables.backgroundColorHover, (0, s.pick)({
-            light: s.variables.gray60,
-            dark: s.variables.borderColor
+        c.pick)({
+            light: c.variables.linkColor,
+            dark: c.variables.white
+        }), c.variables.backgroundColorHover, (0, c.pick)({
+            light: c.variables.gray60,
+            dark: c.variables.borderColor
         })),
-        prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], s.variables.interactiveColorOverlayHover, s.variables.interactiveColorBorderHover, s.variables.hoverShadow)
-    }), /* sc-sel */ z, /* sc-sel */ z, /* sc-sel */ z);
-    var _ = c().span.withConfig({
+        prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], c.variables.interactiveColorOverlayHover, c.variables.interactiveColorBorderHover, c.variables.hoverShadow)
+    }), /* sc-sel */ P, /* sc-sel */ P, /* sc-sel */ P);
+    var M = s().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "", ";" ], (0, s.pickVariant)("$iconSize", {
-        inline: (0, l.css)([ "", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
-        s.pick)({
-            prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
-        }), (0, s.pick)({
+    })([ "", " ", ";" ], (0, c.pickVariant)("$iconPosition", {
+        above: (0, l.css)([ "display:block;text-align:center;" ]),
+        left: (0, l.css)([ "text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
+        c.pick)({
             enterprise: "0.4em",
             prisma: "8px"
+        }))
+    }), (0, c.pickVariant)("$iconSize", {
+        inline: (0, l.css)([ "", "" ], (0, c.pick)({
+            prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
         })),
-        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;" ])
+        small: (0, l.css)([ "font-size:24px;height:24px;padding:4px 0;" ]),
+        large: (0, l.css)([ "font-size:48px;height:48px;padding:8px 0 0;" ])
     }));
-    var P = c().div.withConfig({
+    var _ = s().div.withConfig({
         displayName: "TabStyles__StyledLabelAndMenuContainer",
         componentId: "sc-1ry8mzj-4"
     })([ "display:flex;align-items:center;justify-content:center;gap:8px;" ]);
-    var $ = c().div.withConfig({
+    var $ = s().div.withConfig({
         displayName: "TabStyles__StyledLabel",
         componentId: "sc-1ry8mzj-5"
     })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
-    s.pick)({
+    c.pick)({
         enterprise: "0",
         prisma: {
             comfortable: "16px 0",
             compact: "10px 0"
         }
     }));
-    var D = c().span.withConfig({
+    var D = s().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:", ";}" ], s.variables.contentColorDefault, (0, 
-    s.pick)({
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], c.variables.contentColorDefault, (0, 
+    c.pick)({
         enterprise: "inherit",
         prisma: "10px"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: "0.4em 0.3em",
         prisma: "0.4em 0.6em"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: "0",
         prisma: "0.3em"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
-        prisma: (0, l.css)([ "background:", ";" ], s.variables.neutral100)
-    }), s.variables.contentColorDisabled);
-    var R = c().div.withConfig({
+        prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
+    }), c.variables.contentColorDisabled);
+    var R = s().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
-    })([ "padding:8px;font-size:", ";" ], s.variables.fontSizeSmall);
+    })([ "padding:8px;font-size:", ";" ], c.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
     var q = function e() {
         return undefined;
     };
-    var A =  (0, r.createContext)({
+    var V =  (0, r.createContext)({
         onMenuOpen: q,
         onMenuClose: q,
         isMenuOpen: false
     });
-    A.displayName = "TabBar";
-    /* harmony default export */    const V = A;
+    V.displayName = "TabBar";
+    /* harmony default export */    const A = V;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
     var K = function e(t, r) {
@@ -551,69 +554,71 @@
         }, {
             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, 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, o = t.count, a = 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 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, N = I.onMenuOpen, W = I.onMenuClose, L = I.isMenuOpen, H = I.focusedTabKey;
-                var Y = w.style;
-                var G = q || a || false;
-                var J = A || "inline";
-                var Q = V || "horizontal";
-                var X = B ? {
-                    width: B
-                } : Y;
-                var Z = p.isEnterprise;
-                var ee = c ? c.toString() : "";
-                var te = 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 re;
-                if (Z) {
-                    // countValue needs unicode space for width to not change after it's clicked.
-                    var ne = te ? "(".concat(te, ")  ") : "";
-                    re = "".concat(ee, " ").concat(ne);
-                } else {
-                    re = "".concat(ee, "    ").concat(te);
+                var I = this.context, j = I.appearance, q = I.disabled, V = I.iconPosition, A = V === void 0 ? "above" : V, B = I.iconSize, N = I.layout, W = N === void 0 ? "horizontal" : N, L = I.width, H = I.onMenuOpen, Y = I.onMenuClose, G = I.isMenuOpen, J = I.focusedTabKey;
+                var Q = w.style;
+                var X = q || a || false;
+                var Z = L ? {
+                    width: L
+                } : Q;
+                var ee = p.isEnterprise;
+                var te = "";
+                // SUI-6877: if the label isn't a string, don't attempt to do this since it'll just be wrong
+                                if (s && typeof s === "string") {
+                    var re = s ? s.toString() : "";
+                    var ne = o === 0 || o ? "".concat(o === null || o === void 0 ? void 0 : o.toString()) : "";
+                    // titleValue is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
+                                        if (ee) {
+                        // countValue needs unicode space for width to not change after it's clicked.
+                        var ie = ne ? "(".concat(ne, ")  ") : "";
+                        te = "".concat(re, " ").concat(ie);
+                    } else {
+                        te = "".concat(re, "    ").concat(ne);
+                    }
                 }
-                var ie = H === x && L && !!m;
-                var oe =  n().createElement(M, {
+                var oe = J === x && G && !!m;
+                var ae =  n().createElement(E, {
                     $active: r,
                     "data-test": "menu-toggle",
                     tabIndex: -1,
                     onFocus: this.handleFocusMenuToggle
-                }, Z ?  n().createElement(g(), {
+                }, ee ?  n().createElement(g(), {
                     size: 1.1
                 }) :  n().createElement(b(), null));
-                var ae = function e(t) {
+                var le = function e(t) {
                     // if there is no menu, or if we are not in horizontal, do not render menu container
-                    if (!m || Q !== "horizontal") {
+                    if (!m || W !== "horizontal") {
                         return t;
                     }
                     
-                    return n().createElement(P, null, t,  n().createElement(y(), {
-                        toggle: oe,
+                    return n().createElement(_, null, t,  n().createElement(y(), {
+                        toggle: ae,
                         align: "center",
-                        onRequestOpen: N,
-                        onRequestClose: W,
-                        open: ie
+                        onRequestOpen: H,
+                        onRequestClose: Y,
+                        open: oe
                     }, m));
                 };
                 
                 // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
                 // eslint-disable-next-line
                 // @ts-ignore-next-line
-                return n().createElement(z, F({
+                return n().createElement(P, F({
                     "aria-controls": i,
                     "aria-selected": r,
                     "aria-labelledby": this.ariaId,
                     "aria-describedby": m ? this.menuDescription : undefined,
-                    "aria-haspopup": ie,
+                    "aria-haspopup": oe,
                     "data-test": "tab",
-                    "data-test-tab-id": s,
+                    "data-test-tab-id": c,
                     "data-test-popover-id": h ? this.popoverId : undefined,
-                    $layout: Q,
-                    $icon: l && J !== "inline" ? true : undefined,
-                    disabled: G,
-                    style: X,
-                    elementRef: this.handleMount
+                    $layout: W,
+                    $icon: l && B !== "inline" ? true : undefined,
+                    disabled: X,
+                    style: Z,
+                    elementRef: this.handleMount,
+                    "data-title": te
                 }, d()(w, "elementRef"), {
                     onClick: this.handleClick,
                     onFocus: this.handleFocus,
@@ -622,22 +627,22 @@
                     onMouseLeave: this.handleTooltipClose,
                     role: "tab",
                     tabIndex: r ? undefined : -1,
-                    "data-title": re,
                     to: v,
                     $hasMenu: !!m
-                }), ae( n().createElement($, {
+                }), le( n().createElement($, {
                     "data-test": "label",
                     $withUnderline: j === "navigation"
-                }, l &&  n().createElement(_, {
-                    $iconSize: J
-                }, l), c, !m && (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
+                }, l &&  n().createElement(M, {
+                    $iconPosition: A,
+                    $iconSize: B
+                }, l), s, !m && (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
                     "data-test": "count",
-                    disabled: G
+                    disabled: X
                 }, u ? K(o, u) : o)), !!m &&  n().createElement(S(), {
                     "aria-hidden": true,
                     id: this.menuDescription
-                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(E, {
-                    $layout: Q,
+                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(z, {
+                    $layout: W,
                     $withUnderline: j === "navigation"
                 }), !a && h &&  n().createElement(k(), {
                     role: "tooltip",
@@ -647,7 +652,7 @@
                     },
                     appearance: "inverted",
                     closeReasons: [ "offScreen", "escapeKey" ],
-                    defaultPlacement: Q === "vertical" ? "right" : "above",
+                    defaultPlacement: W === "vertical" ? "right" : "above",
                     id: this.popoverId,
                     open: !!O && T,
                     align: "center"
@@ -661,10 +666,10 @@
     }(r.Component);
     re(le, "propTypes", oe);
     re(le, "defaultProps", ae);
-    re(le, "contextType", V);
-    var ce = (0, s.withSplunkTheme)(le);
-    ce.propTypes = le.propTypes;
-    /* harmony default export */    const se = ce;
+    re(le, "contextType", A);
+    var se = (0, c.withSplunkTheme)(le);
+    se.propTypes = le.propTypes;
+    /* harmony default export */    const ce = se;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
     function ue(e, t, r) {
@@ -722,20 +727,20 @@
     function ye(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var n, i, o, a, l = [], c = !0, s = !1;
+            var n, i, o, a, l = [], s = !0, c = !1;
             try {
                 if (o = (r = r.call(e)).next, 0 === t) {
                     if (Object(r) !== r) return;
-                    c = !1;
-                } else for (;!(c = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); c = !0) {
+                    s = !1;
+                } else for (;!(s = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); s = !0) {
                 }
             } catch (e) {
-                s = !0, i = e;
+                c = !0, i = e;
             } finally {
                 try {
-                    if (!c && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!s && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
-                    if (s) throw i;
+                    if (c) throw i;
                 }
             }
             return l;
@@ -776,30 +781,42 @@
         /** @private */
         disabled: o().bool,
         elementRef: o().oneOfType([ o().func, o().object ]),
+        iconPosition: o().oneOf([ "above", "left" ]),
         iconSize: o().oneOf([ "inline", "small", "large" ]),
         layout: o().oneOf([ "horizontal", "vertical" ]),
         onChange: o().func,
         tabWidth: o().number
     };
     function Se(e) {
-        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, 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 = ge(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
+        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, s = e.children, c = e.disabled, p = c === void 0 ? false : c, d = e.elementRef, f = e.iconPosition, v = e.iconSize, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = ge(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconPosition", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
                 var x = (0, r.useState)(false), k = fe(x, 2), w = k[0], S = k[1];
         var C = (0, r.useState)(0), O = fe(C, 2), T = O[0], I = O[1];
         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.useRef)("");
+        var z = (0, r.useRef)([]);
+        var E = h === "vertical" ? "down" : "right";
+        var M = h === "vertical" ? "up" : "left";
+        if (false) {}
+        var _ = f;
+        var $;
         if (false) {}
-        var P = (0, r.useCallback)((function(e, t) {
+        if (_ == null) {
+            $ = v;
+            if (v != null) {
+                _ = v === "inline" ? "left" : "above";
+            } else {
+                _ = "left";
+            }
+        } else if (false) {}
+        var D = (0, r.useCallback)((function(e, t) {
             var r = t.tabKey, n = t.tabId;
             if (r != null) {
                 I(r);
             }
             if (n != null) {
-                z.current = n;
+                P.current = n;
             }
             if (i) {
                 y === null || y === void 0 ? void 0 : y(e, {
@@ -807,22 +824,22 @@
                 });
             }
         }), [ i, y ]);
-        var $ = (0, r.useCallback)((function(e, t) {
+        var R = (0, r.useCallback)((function(e, t) {
             y === null || y === void 0 ? void 0 : y(e, {
                 selectedTabId: t.tabId
             });
         }), [ y ]);
-        var D = (0, r.useMemo)((function() {
+        var q = (0, r.useMemo)((function() {
             var e = 0;
             // reset tabRefs since children are changed
-                        E.current = [];
-            return r.Children.toArray(c).filter(r.isValidElement).map((function(i) {
+                        z.current = [];
+            return r.Children.toArray(s).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 !== se.name) {
+                if (typeof i.type === "string" || i.type.name !== ce.name) {
                     return i;
                 }
                 var o =  n().createRef();
-                E.current.push(o);
+                z.current.push(o);
                 var a = {
                     active: t === i.props.tabId,
                     tabKey: e,
@@ -832,34 +849,34 @@
                 
                 return (0, r.cloneElement)(i, a);
             }));
-        }), [ t, c ]);
+        }), [ t, s ]);
         (0, r.useEffect)((function() {
-            D.forEach((function(e, t) {
+            q.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) {
+                if (P.current != null && P.current === e.props.tabId && j.current !== t) {
                     I(t);
                 }
             }));
-        }), [ D ]);
-        var R = m && m > ke ? m : null;
-        var q = (0, r.useCallback)((function(e) {
+        }), [ q ]);
+        var V = m && m > ke ? m : null;
+        var K = (0, r.useCallback)((function(e) {
             var t = (0, a.keycode)(e.nativeEvent);
             var r;
-            if (t === M) {
-                r = ue(E.current, T, T + 1);
-            } else if (t === _) {
-                r = pe(E.current, T, T - 1);
+            if (t === E) {
+                r = ue(z.current, T, T + 1);
+            } else if (t === M) {
+                r = pe(z.current, T, T - 1);
             } else if (t === "home") {
-                r = ue(E.current, T, 0);
+                r = ue(z.current, T, 0);
             } else if (t === "end") {
-                r = pe(E.current, T, E.current.length - 1);
+                r = pe(z.current, T, z.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 = E.current[T];
+                                                var r = z.current[T];
                         r === null || r === void 0 ? void 0 : (t = r.current) === null || t === void 0 ? void 0 : t.focus();
                     }
                     return !e;
@@ -872,33 +889,34 @@
                 (n = r.current) === null || n === void 0 ? void 0 : n.focus();
                 e.preventDefault();
             }
-        }), [ T, h, M, _ ]);
-        var A = (0, r.useCallback)((function(e) {
+        }), [ T, h, E, M ]);
+        var B = (0, r.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
             S(true);
         }), []);
-        var K = (0, r.useCallback)((function(e) {
+        var N = (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 B = (0, r.useMemo)((function() {
+        var F = (0, r.useMemo)((function() {
             return {
                 appearance: l,
                 disabled: p,
-                iconSize: v,
+                iconPosition: _,
+                iconSize: $,
                 layout: h,
-                onClick: $,
-                onFocus: P,
-                width: R,
-                onMenuOpen: A,
-                onMenuClose: K,
+                onClick: R,
+                onFocus: D,
+                width: V,
+                onMenuOpen: B,
+                onMenuClose: N,
                 isMenuOpen: w,
                 focusedTabKey: T
             };
-        }), [ l, p, T, v, w, h, K, A, $, P, R ]);
+        }), [ l, p, T, _, $, w, h, N, B, R, D, V ]);
         
         return n().createElement(u, de({
             "data-tab-layout": h,
@@ -908,13 +926,13 @@
             ref: d,
             $layout: h,
             $withUnderline: l === "navigation",
-            onKeyDown: q
-        }, g),  n().createElement(V.Provider, {
-            value: B
-        }, D));
+            onKeyDown: K
+        }, g),  n().createElement(A.Provider, {
+            value: F
+        }, q));
     }
     Se.propTypes = we;
-    Se.Tab = se;
+    Se.Tab = ce;
     /* harmony default export */    const Ce = Se;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;