baseui 0.0.0-next-0b9fd6a → 0.0.0-next-e0f9354

package/badge/styled-components.js

@@ -24,19 +24,19 @@ function getColorStyles(_ref) {
       $hierarchy = _ref.$hierarchy,
       $color = _ref.$color;
   var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, _constants.COLOR.accent, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundAccent
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.primary, {
     color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundInversePrimary
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.positive, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.negative, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.warning, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentOnColorInverse,
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
     color: $theme.colors.contentAccent,

package/badge/styled-components.js.flow

@@ -16,7 +16,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent,
       },
       [COLOR.primary]: {
@@ -24,15 +24,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
         backgroundColor: $theme.colors.backgroundInversePrimary,
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive,
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative,
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning,
       },
     },

package/es/badge/styled-components.js

@@ -15,7 +15,7 @@ function getColorStyles({
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent
       },
       [COLOR.primary]: {
@@ -23,15 +23,15 @@ function getColorStyles({
         backgroundColor: $theme.colors.backgroundInversePrimary
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning
       }
     },

package/es/select/default-props.js

@@ -28,7 +28,7 @@ const defaultProps = {
   ignoreCase: true,
   isLoading: false,
   labelKey: 'label',
-  maxDropdownHeight: '900px',
+  maxDropdownHeight: '40vh',
   multi: false,
   onBlur: () => {},
   onBlurResetsInput: true,

package/es/tabs-motion/styled-components.js

@@ -25,6 +25,14 @@ export const StyledRoot = styled('div', ({
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
+export const StyledTabBar = styled('div', ({
+  $hasEndEnhancer,
+  $orientation
+}) => $hasEndEnhancer || !isHorizontal($orientation) ? {
+  display: 'flex'
+} : {});
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
 export const StyledTabList = styled('div', ({
   $theme,
   $fill = FILL.intrinsic,
@@ -33,7 +41,8 @@ export const StyledTabList = styled('div', ({
   const style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -139,6 +148,19 @@ export const StyledTab = styled('button', ({
 });
 StyledTab.displayName = "StyledTab";
 StyledTab.displayName = 'StyledTab';
+export const StyledEndEnhancerContainer = styled('div', ({
+  $theme
+}) => {
+  const marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    [marginDirection]: $theme.sizing.scale600
+  };
+});
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
 export const StyledArtworkContainer = styled('div', ({
   $theme,
   $orientation = ORIENTATION.horizontal

package/es/tabs-motion/tabs.js

@@ -9,12 +9,13 @@ LICENSE file in the root directory of this source tree.
 
 /* global window */
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 import { ORIENTATION, FILL } from './constants';
-import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel } from './styled-components';
+import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel, StyledEndEnhancerContainer, StyledTabBar } from './styled-components';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils';
 const KEYBOARD_ACTION = {
   next: 'next',
@@ -78,6 +79,20 @@ const scrollParentToCentreTarget = targetNode => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
+function RenderEnhancer({
+  Enhancer
+}) {
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -88,7 +103,8 @@ export function Tabs({
   orientation = ORIENTATION.horizontal,
   overrides = {},
   renderAll = false,
-  uid: customUid = null
+  uid: customUid = null,
+  endEnhancer
 }) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -103,7 +119,8 @@ export function Tabs({
   const [Root, RootProps] = getOverrides(RootOverrides, StyledRoot);
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
-  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder); // Count key updates
+  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer); // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -196,7 +213,10 @@ export function Tabs({
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -224,7 +244,11 @@ export function Tabs({
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"

package/esm/badge/styled-components.js

@@ -22,19 +22,19 @@ function getColorStyles(_ref) {
       $hierarchy = _ref.$hierarchy,
       $color = _ref.$color;
   var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, COLOR.accent, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundAccent
   }), _defineProperty(_HIERARCHY$primary, COLOR.primary, {
     color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundInversePrimary
   }), _defineProperty(_HIERARCHY$primary, COLOR.positive, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, COLOR.negative, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, COLOR.warning, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentOnColorInverse,
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, COLOR.accent, {
     color: $theme.colors.contentAccent,

package/esm/select/default-props.js

@@ -28,7 +28,7 @@ var defaultProps = {
   ignoreCase: true,
   isLoading: false,
   labelKey: 'label',
-  maxDropdownHeight: '900px',
+  maxDropdownHeight: '40vh',
   multi: false,
   onBlur: function onBlur() {},
   onBlurResetsInput: true,

package/esm/tabs-motion/styled-components.js

@@ -31,16 +31,26 @@ export var StyledRoot = styled('div', function (_ref) {
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
-export var StyledTabList = styled('div', function (_ref2) {
-  var $theme = _ref2.$theme,
-      _ref2$$fill = _ref2.$fill,
-      $fill = _ref2$$fill === void 0 ? FILL.intrinsic : _ref2$$fill,
-      _ref2$$orientation = _ref2.$orientation,
-      $orientation = _ref2$$orientation === void 0 ? ORIENTATION.horizontal : _ref2$$orientation;
+export var StyledTabBar = styled('div', function (_ref2) {
+  var $hasEndEnhancer = _ref2.$hasEndEnhancer,
+      $orientation = _ref2.$orientation;
+  return $hasEndEnhancer || !isHorizontal($orientation) ? {
+    display: 'flex'
+  } : {};
+});
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
+export var StyledTabList = styled('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$fill = _ref3.$fill,
+      $fill = _ref3$$fill === void 0 ? FILL.intrinsic : _ref3$$fill,
+      _ref3$$orientation = _ref3.$orientation,
+      $orientation = _ref3$$orientation === void 0 ? ORIENTATION.horizontal : _ref3$$orientation;
   var style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -77,16 +87,16 @@ export var StyledTabList = styled('div', function (_ref2) {
 });
 StyledTabList.displayName = "StyledTabList";
 StyledTabList.displayName = 'StyledTabList';
-export var StyledTab = styled('button', function (_ref3) {
-  var $theme = _ref3.$theme,
-      _ref3$$orientation = _ref3.$orientation,
-      $orientation = _ref3$$orientation === void 0 ? ORIENTATION.horizontal : _ref3$$orientation,
-      _ref3$$fill = _ref3.$fill,
-      $fill = _ref3$$fill === void 0 ? FILL.intrinsic : _ref3$$fill,
-      _ref3$$focusVisible = _ref3.$focusVisible,
-      $focusVisible = _ref3$$focusVisible === void 0 ? false : _ref3$$focusVisible,
-      _ref3$$isActive = _ref3.$isActive,
-      $isActive = _ref3$$isActive === void 0 ? false : _ref3$$isActive;
+export var StyledTab = styled('button', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$orientation = _ref4.$orientation,
+      $orientation = _ref4$$orientation === void 0 ? ORIENTATION.horizontal : _ref4$$orientation,
+      _ref4$$fill = _ref4.$fill,
+      $fill = _ref4$$fill === void 0 ? FILL.intrinsic : _ref4$$fill,
+      _ref4$$focusVisible = _ref4.$focusVisible,
+      $focusVisible = _ref4$$focusVisible === void 0 ? false : _ref4$$focusVisible,
+      _ref4$$isActive = _ref4.$isActive,
+      $isActive = _ref4$$isActive === void 0 ? false : _ref4$$isActive;
 
   var style = _objectSpread({
     cursor: 'pointer',
@@ -148,10 +158,21 @@ export var StyledTab = styled('button', function (_ref3) {
 });
 StyledTab.displayName = "StyledTab";
 StyledTab.displayName = 'StyledTab';
-export var StyledArtworkContainer = styled('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      _ref4$$orientation = _ref4.$orientation,
-      $orientation = _ref4$$orientation === void 0 ? ORIENTATION.horizontal : _ref4$$orientation;
+export var StyledEndEnhancerContainer = styled('div', function (_ref5) {
+  var $theme = _ref5.$theme;
+  var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  }, marginDirection, $theme.sizing.scale600);
+});
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
+export var StyledArtworkContainer = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      _ref7$$orientation = _ref7.$orientation,
+      $orientation = _ref7$$orientation === void 0 ? ORIENTATION.horizontal : _ref7$$orientation;
   var style = {
     display: 'flex'
   };
@@ -166,10 +187,10 @@ export var StyledArtworkContainer = styled('div', function (_ref4) {
 });
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
 StyledArtworkContainer.displayName = 'StyledArtworkContainer';
-export var StyledTabBorder = styled('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      _ref5$$orientation = _ref5.$orientation,
-      $orientation = _ref5$$orientation === void 0 ? ORIENTATION.horizontal : _ref5$$orientation;
+export var StyledTabBorder = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme,
+      _ref8$$orientation = _ref8.$orientation,
+      $orientation = _ref8$$orientation === void 0 ? ORIENTATION.horizontal : _ref8$$orientation;
   var style = {
     backgroundColor: $theme.colors.borderOpaque,
     position: 'relative'
@@ -185,16 +206,16 @@ export var StyledTabBorder = styled('div', function (_ref5) {
 });
 StyledTabBorder.displayName = "StyledTabBorder";
 StyledTabBorder.displayName = 'StyledTabBorder';
-export var StyledTabHighlight = styled('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      _ref6$$orientation = _ref6.$orientation,
-      $orientation = _ref6$$orientation === void 0 ? ORIENTATION.horizontal : _ref6$$orientation,
-      _ref6$$length = _ref6.$length,
-      $length = _ref6$$length === void 0 ? 0 : _ref6$$length,
-      _ref6$$distance = _ref6.$distance,
-      $distance = _ref6$$distance === void 0 ? 0 : _ref6$$distance,
-      _ref6$$animate = _ref6.$animate,
-      $animate = _ref6$$animate === void 0 ? false : _ref6$$animate;
+export var StyledTabHighlight = styled('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      _ref9$$orientation = _ref9.$orientation,
+      $orientation = _ref9$$orientation === void 0 ? ORIENTATION.horizontal : _ref9$$orientation,
+      _ref9$$length = _ref9.$length,
+      $length = _ref9$$length === void 0 ? 0 : _ref9$$length,
+      _ref9$$distance = _ref9.$distance,
+      $distance = _ref9$$distance === void 0 ? 0 : _ref9$$distance,
+      _ref9$$animate = _ref9.$animate,
+      $animate = _ref9$$animate === void 0 ? false : _ref9$$animate;
   var style = {
     backgroundColor: $theme.colors.borderSelected,
     position: 'absolute',
@@ -229,10 +250,10 @@ export var StyledTabHighlight = styled('div', function (_ref6) {
 });
 StyledTabHighlight.displayName = "StyledTabHighlight";
 StyledTabHighlight.displayName = 'StyledTabHighlight';
-export var StyledTabPanel = styled('div', function (_ref7) {
-  var $theme = _ref7.$theme,
-      _ref7$$pad = _ref7.$pad,
-      $pad = _ref7$$pad === void 0 ? true : _ref7$$pad;
+export var StyledTabPanel = styled('div', function (_ref10) {
+  var $theme = _ref10.$theme,
+      _ref10$$pad = _ref10.$pad,
+      $pad = _ref10$$pad === void 0 ? true : _ref10$$pad;
   var style = {
     flexGrow: 1,
     // only used in vertical orientation

package/esm/tabs-motion/tabs.js

@@ -43,12 +43,13 @@ LICENSE file in the root directory of this source tree.
 
 /* global window */
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 import { ORIENTATION, FILL } from './constants';
-import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel } from './styled-components';
+import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel, StyledEndEnhancerContainer, StyledTabBar } from './styled-components';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils';
 var KEYBOARD_ACTION = {
   next: 'next',
@@ -111,25 +112,40 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-export function Tabs(_ref) {
-  var _ref$activeKey = _ref.activeKey,
-      activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? FILL.intrinsic : _ref$fill,
-      _ref$activateOnFocus = _ref.activateOnFocus,
-      activateOnFocus = _ref$activateOnFocus === void 0 ? true : _ref$activateOnFocus,
-      onChange = _ref.onChange,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? ORIENTATION.horizontal : _ref$orientation,
-      _ref$overrides = _ref.overrides,
-      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      _ref$renderAll = _ref.renderAll,
-      renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll,
-      _ref$uid = _ref.uid,
-      customUid = _ref$uid === void 0 ? null : _ref$uid;
+function RenderEnhancer(_ref) {
+  var Enhancer = _ref.Enhancer;
+
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
+export function Tabs(_ref2) {
+  var _ref2$activeKey = _ref2.activeKey,
+      activeKey = _ref2$activeKey === void 0 ? '0' : _ref2$activeKey,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      children = _ref2.children,
+      _ref2$fill = _ref2.fill,
+      fill = _ref2$fill === void 0 ? FILL.intrinsic : _ref2$fill,
+      _ref2$activateOnFocus = _ref2.activateOnFocus,
+      activateOnFocus = _ref2$activateOnFocus === void 0 ? true : _ref2$activateOnFocus,
+      onChange = _ref2.onChange,
+      _ref2$orientation = _ref2.orientation,
+      orientation = _ref2$orientation === void 0 ? ORIENTATION.horizontal : _ref2$orientation,
+      _ref2$overrides = _ref2.overrides,
+      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides,
+      _ref2$renderAll = _ref2.renderAll,
+      renderAll = _ref2$renderAll === void 0 ? false : _ref2$renderAll,
+      _ref2$uid = _ref2.uid,
+      customUid = _ref2$uid === void 0 ? null : _ref2$uid,
+      endEnhancer = _ref2.endEnhancer;
   // Create unique id prefix for this tabs component
   var generatedUid = useUID();
   var uid = customUid || generatedUid; // Unpack overrides
@@ -157,7 +173,12 @@ export function Tabs(_ref) {
   var _getOverrides7 = getOverrides(TabBorderOverrides, StyledTabBorder),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       TabBorder = _getOverrides8[0],
-      TabBorderProps = _getOverrides8[1]; // Count key updates
+      TabBorderProps = _getOverrides8[1];
+
+  var _getOverrides9 = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      EndEnhancerContainer = _getOverrides10[0],
+      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -263,7 +284,10 @@ export function Tabs(_ref) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -291,7 +315,11 @@ export function Tabs(_ref) {
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"
@@ -308,20 +336,20 @@ export function Tabs(_ref) {
   }));
 }
 
-function InternalTab(_ref2) {
-  var childKey = _ref2.childKey,
-      childIndex = _ref2.childIndex,
-      activeKey = _ref2.activeKey,
-      orientation = _ref2.orientation,
-      activeTabRef = _ref2.activeTabRef,
-      updateHighlight = _ref2.updateHighlight,
-      parseKeyDown = _ref2.parseKeyDown,
-      activateOnFocus = _ref2.activateOnFocus,
-      uid = _ref2.uid,
-      disabled = _ref2.disabled,
-      sharedStylingProps = _ref2.sharedStylingProps,
-      onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded);
+function InternalTab(_ref3) {
+  var childKey = _ref3.childKey,
+      childIndex = _ref3.childIndex,
+      activeKey = _ref3.activeKey,
+      orientation = _ref3.orientation,
+      activeTabRef = _ref3.activeTabRef,
+      updateHighlight = _ref3.updateHighlight,
+      parseKeyDown = _ref3.parseKeyDown,
+      activateOnFocus = _ref3.activateOnFocus,
+      uid = _ref3.uid,
+      disabled = _ref3.disabled,
+      sharedStylingProps = _ref3.sharedStylingProps,
+      onChange = _ref3.onChange,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -372,15 +400,15 @@ function InternalTab(_ref2) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides9 = getOverrides(TabOverrides, StyledTab),
-      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Tab = _getOverrides10[0],
-      TabProps = _getOverrides10[1];
-
-  var _getOverrides11 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+  var _getOverrides11 = getOverrides(TabOverrides, StyledTab),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      ArtworkContainer = _getOverrides12[0],
-      ArtworkContainerProps = _getOverrides12[1]; // Keyboard focus styling
+      Tab = _getOverrides12[0],
+      TabProps = _getOverrides12[1];
+
+  var _getOverrides13 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      ArtworkContainer = _getOverrides14[0],
+      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -480,14 +508,14 @@ function InternalTab(_ref2) {
   })) : null, title ? title : key);
 }
 
-function InternalTabPanel(_ref3) {
-  var childKey = _ref3.childKey,
-      childIndex = _ref3.childIndex,
-      activeKey = _ref3.activeKey,
-      uid = _ref3.uid,
-      sharedStylingProps = _ref3.sharedStylingProps,
-      renderAll = _ref3.renderAll,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+function InternalTabPanel(_ref4) {
+  var childKey = _ref4.childKey,
+      childIndex = _ref4.childIndex,
+      activeKey = _ref4.activeKey,
+      uid = _ref4.uid,
+      sharedStylingProps = _ref4.sharedStylingProps,
+      renderAll = _ref4.renderAll,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -496,10 +524,10 @@ function InternalTabPanel(_ref3) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides13 = getOverrides(TabPanelOverrides, StyledTabPanel),
-      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      TabPanel = _getOverrides14[0],
-      TabPanelProps = _getOverrides14[1];
+  var _getOverrides15 = getOverrides(TabPanelOverrides, StyledTabPanel),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      TabPanel = _getOverrides16[0],
+      TabPanelProps = _getOverrides16[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-0b9fd6a",
+  "version": "0.0.0-next-e0f9354",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/select/default-props.js

@@ -39,7 +39,7 @@ var defaultProps = {
   ignoreCase: true,
   isLoading: false,
   labelKey: 'label',
-  maxDropdownHeight: '900px',
+  maxDropdownHeight: '40vh',
   multi: false,
   onBlur: function onBlur() {},
   onBlurResetsInput: true,

package/tabs-motion/styled-components.d.ts

@@ -2,6 +2,10 @@ import type { Orientation, Fill } from './types';
 export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
 }>;
+export declare const StyledTabBar: import("styletron-react").StyletronComponent<"div", {
+    $hasEndEnhancer: boolean;
+    $orientation: Orientation;
+}>;
 export declare const StyledTabList: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
     $fill?: Fill;
@@ -12,6 +16,7 @@ export declare const StyledTab: import("styletron-react").StyletronComponent<"bu
     $focusVisible?: boolean;
     $isActive?: boolean;
 }>;
+export declare const StyledEndEnhancerContainer: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const StyledArtworkContainer: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
 }>;

package/tabs-motion/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTabPanel = exports.StyledTabList = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledTab = exports.StyledRoot = exports.StyledArtworkContainer = void 0;
+exports.StyledTabPanel = exports.StyledTabList = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledTabBar = exports.StyledTab = exports.StyledRoot = exports.StyledEndEnhancerContainer = exports.StyledArtworkContainer = void 0;
 
 var _styles = require("../styles");
 
@@ -36,16 +36,27 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
-var StyledTabList = (0, _styles.styled)('div', function (_ref2) {
-  var $theme = _ref2.$theme,
-      _ref2$$fill = _ref2.$fill,
-      $fill = _ref2$$fill === void 0 ? _constants.FILL.intrinsic : _ref2$$fill,
-      _ref2$$orientation = _ref2.$orientation,
-      $orientation = _ref2$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$$orientation;
+var StyledTabBar = (0, _styles.styled)('div', function (_ref2) {
+  var $hasEndEnhancer = _ref2.$hasEndEnhancer,
+      $orientation = _ref2.$orientation;
+  return $hasEndEnhancer || !(0, _utils.isHorizontal)($orientation) ? {
+    display: 'flex'
+  } : {};
+});
+exports.StyledTabBar = StyledTabBar;
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
+var StyledTabList = (0, _styles.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$fill = _ref3.$fill,
+      $fill = _ref3$$fill === void 0 ? _constants.FILL.intrinsic : _ref3$$fill,
+      _ref3$$orientation = _ref3.$orientation,
+      $orientation = _ref3$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref3$$orientation;
   var style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if ((0, _utils.isHorizontal)($orientation)) {
@@ -83,16 +94,16 @@ var StyledTabList = (0, _styles.styled)('div', function (_ref2) {
 exports.StyledTabList = StyledTabList;
 StyledTabList.displayName = "StyledTabList";
 StyledTabList.displayName = 'StyledTabList';
-var StyledTab = (0, _styles.styled)('button', function (_ref3) {
-  var $theme = _ref3.$theme,
-      _ref3$$orientation = _ref3.$orientation,
-      $orientation = _ref3$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref3$$orientation,
-      _ref3$$fill = _ref3.$fill,
-      $fill = _ref3$$fill === void 0 ? _constants.FILL.intrinsic : _ref3$$fill,
-      _ref3$$focusVisible = _ref3.$focusVisible,
-      $focusVisible = _ref3$$focusVisible === void 0 ? false : _ref3$$focusVisible,
-      _ref3$$isActive = _ref3.$isActive,
-      $isActive = _ref3$$isActive === void 0 ? false : _ref3$$isActive;
+var StyledTab = (0, _styles.styled)('button', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$orientation = _ref4.$orientation,
+      $orientation = _ref4$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref4$$orientation,
+      _ref4$$fill = _ref4.$fill,
+      $fill = _ref4$$fill === void 0 ? _constants.FILL.intrinsic : _ref4$$fill,
+      _ref4$$focusVisible = _ref4.$focusVisible,
+      $focusVisible = _ref4$$focusVisible === void 0 ? false : _ref4$$focusVisible,
+      _ref4$$isActive = _ref4.$isActive,
+      $isActive = _ref4$$isActive === void 0 ? false : _ref4$$isActive;
 
   var style = _objectSpread({
     cursor: 'pointer',
@@ -155,10 +166,22 @@ var StyledTab = (0, _styles.styled)('button', function (_ref3) {
 exports.StyledTab = StyledTab;
 StyledTab.displayName = "StyledTab";
 StyledTab.displayName = 'StyledTab';
-var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      _ref4$$orientation = _ref4.$orientation,
-      $orientation = _ref4$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref4$$orientation;
+var StyledEndEnhancerContainer = (0, _styles.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme;
+  var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  }, marginDirection, $theme.sizing.scale600);
+});
+exports.StyledEndEnhancerContainer = StyledEndEnhancerContainer;
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
+var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      _ref7$$orientation = _ref7.$orientation,
+      $orientation = _ref7$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref7$$orientation;
   var style = {
     display: 'flex'
   };
@@ -174,10 +197,10 @@ var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref4) {
 exports.StyledArtworkContainer = StyledArtworkContainer;
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
 StyledArtworkContainer.displayName = 'StyledArtworkContainer';
-var StyledTabBorder = (0, _styles.styled)('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      _ref5$$orientation = _ref5.$orientation,
-      $orientation = _ref5$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref5$$orientation;
+var StyledTabBorder = (0, _styles.styled)('div', function (_ref8) {
+  var $theme = _ref8.$theme,
+      _ref8$$orientation = _ref8.$orientation,
+      $orientation = _ref8$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref8$$orientation;
   var style = {
     backgroundColor: $theme.colors.borderOpaque,
     position: 'relative'
@@ -194,16 +217,16 @@ var StyledTabBorder = (0, _styles.styled)('div', function (_ref5) {
 exports.StyledTabBorder = StyledTabBorder;
 StyledTabBorder.displayName = "StyledTabBorder";
 StyledTabBorder.displayName = 'StyledTabBorder';
-var StyledTabHighlight = (0, _styles.styled)('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      _ref6$$orientation = _ref6.$orientation,
-      $orientation = _ref6$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref6$$orientation,
-      _ref6$$length = _ref6.$length,
-      $length = _ref6$$length === void 0 ? 0 : _ref6$$length,
-      _ref6$$distance = _ref6.$distance,
-      $distance = _ref6$$distance === void 0 ? 0 : _ref6$$distance,
-      _ref6$$animate = _ref6.$animate,
-      $animate = _ref6$$animate === void 0 ? false : _ref6$$animate;
+var StyledTabHighlight = (0, _styles.styled)('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      _ref9$$orientation = _ref9.$orientation,
+      $orientation = _ref9$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref9$$orientation,
+      _ref9$$length = _ref9.$length,
+      $length = _ref9$$length === void 0 ? 0 : _ref9$$length,
+      _ref9$$distance = _ref9.$distance,
+      $distance = _ref9$$distance === void 0 ? 0 : _ref9$$distance,
+      _ref9$$animate = _ref9.$animate,
+      $animate = _ref9$$animate === void 0 ? false : _ref9$$animate;
   var style = {
     backgroundColor: $theme.colors.borderSelected,
     position: 'absolute',
@@ -239,10 +262,10 @@ var StyledTabHighlight = (0, _styles.styled)('div', function (_ref6) {
 exports.StyledTabHighlight = StyledTabHighlight;
 StyledTabHighlight.displayName = "StyledTabHighlight";
 StyledTabHighlight.displayName = 'StyledTabHighlight';
-var StyledTabPanel = (0, _styles.styled)('div', function (_ref7) {
-  var $theme = _ref7.$theme,
-      _ref7$$pad = _ref7.$pad,
-      $pad = _ref7$$pad === void 0 ? true : _ref7$$pad;
+var StyledTabPanel = (0, _styles.styled)('div', function (_ref10) {
+  var $theme = _ref10.$theme,
+      _ref10$$pad = _ref10.$pad,
+      $pad = _ref10$$pad === void 0 ? true : _ref10$$pad;
   var style = {
     flexGrow: 1,
     // only used in vertical orientation

package/tabs-motion/styled-components.js.flow

@@ -29,6 +29,16 @@ export const StyledRoot = styled<{ $orientation?: OrientationT }>(
   }
 );
 
+export const StyledTabBar = styled<{ $hasEndEnhancer: boolean, $orientation: OrientationT }>(
+  'div',
+  ({ $hasEndEnhancer, $orientation }) =>
+    $hasEndEnhancer || !isHorizontal($orientation)
+      ? {
+          display: 'flex',
+        }
+      : {}
+);
+
 export const StyledTabList = styled<{
   $orientation?: OrientationT,
   $fill?: FillT,
@@ -37,6 +47,7 @@ export const StyledTabList = styled<{
     position: 'relative',
     display: 'flex',
     flexWrap: 'nowrap',
+    flexGrow: 1,
   };
   if (isHorizontal($orientation)) {
     style.flexDirection = 'row';
@@ -137,6 +148,16 @@ export const StyledTab = styled<{
   }
 );
 
+export const StyledEndEnhancerContainer = styled<{}>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    [marginDirection]: $theme.sizing.scale600,
+  };
+});
+
 export const StyledArtworkContainer = styled<{ $orientation?: OrientationT }>(
   'div',
   ({ $theme, $orientation = ORIENTATION.horizontal }) => {

package/tabs-motion/tabs.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { TabsProps } from './types';
-export declare function Tabs({ activeKey, disabled, children, fill, activateOnFocus, onChange, orientation, overrides, renderAll, uid: customUid, }: TabsProps): JSX.Element;
+export declare function Tabs({ activeKey, disabled, children, fill, activateOnFocus, onChange, orientation, overrides, renderAll, uid: customUid, endEnhancer, }: TabsProps): JSX.Element;

package/tabs-motion/tabs.js

@@ -9,6 +9,8 @@ exports.Tabs = Tabs;
 
 var React = _interopRequireWildcard(require("react"));
 
+var ReactIs = _interopRequireWildcard(require("react-is"));
+
 var _reactUid = require("react-uid");
 
 var _styles = require("../styles");
@@ -124,25 +126,40 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-function Tabs(_ref) {
-  var _ref$activeKey = _ref.activeKey,
-      activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? _constants.FILL.intrinsic : _ref$fill,
-      _ref$activateOnFocus = _ref.activateOnFocus,
-      activateOnFocus = _ref$activateOnFocus === void 0 ? true : _ref$activateOnFocus,
-      onChange = _ref.onChange,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref$orientation,
-      _ref$overrides = _ref.overrides,
-      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      _ref$renderAll = _ref.renderAll,
-      renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll,
-      _ref$uid = _ref.uid,
-      customUid = _ref$uid === void 0 ? null : _ref$uid;
+function RenderEnhancer(_ref) {
+  var Enhancer = _ref.Enhancer;
+
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
+function Tabs(_ref2) {
+  var _ref2$activeKey = _ref2.activeKey,
+      activeKey = _ref2$activeKey === void 0 ? '0' : _ref2$activeKey,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      children = _ref2.children,
+      _ref2$fill = _ref2.fill,
+      fill = _ref2$fill === void 0 ? _constants.FILL.intrinsic : _ref2$fill,
+      _ref2$activateOnFocus = _ref2.activateOnFocus,
+      activateOnFocus = _ref2$activateOnFocus === void 0 ? true : _ref2$activateOnFocus,
+      onChange = _ref2.onChange,
+      _ref2$orientation = _ref2.orientation,
+      orientation = _ref2$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$orientation,
+      _ref2$overrides = _ref2.overrides,
+      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides,
+      _ref2$renderAll = _ref2.renderAll,
+      renderAll = _ref2$renderAll === void 0 ? false : _ref2$renderAll,
+      _ref2$uid = _ref2.uid,
+      customUid = _ref2$uid === void 0 ? null : _ref2$uid,
+      endEnhancer = _ref2.endEnhancer;
   // Create unique id prefix for this tabs component
   var generatedUid = (0, _reactUid.useUID)();
   var uid = customUid || generatedUid; // Unpack overrides
@@ -170,7 +187,12 @@ function Tabs(_ref) {
   var _getOverrides7 = (0, _overrides.getOverrides)(TabBorderOverrides, _styledComponents.StyledTabBorder),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       TabBorder = _getOverrides8[0],
-      TabBorderProps = _getOverrides8[1]; // Count key updates
+      TabBorderProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledEndEnhancerContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      EndEnhancerContainer = _getOverrides10[0],
+      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -276,7 +298,10 @@ function Tabs(_ref) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(_styledComponents.StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -304,7 +329,11 @@ function Tabs(_ref) {
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === _constants.ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"
@@ -321,20 +350,20 @@ function Tabs(_ref) {
   }));
 }
 
-function InternalTab(_ref2) {
-  var childKey = _ref2.childKey,
-      childIndex = _ref2.childIndex,
-      activeKey = _ref2.activeKey,
-      orientation = _ref2.orientation,
-      activeTabRef = _ref2.activeTabRef,
-      updateHighlight = _ref2.updateHighlight,
-      parseKeyDown = _ref2.parseKeyDown,
-      activateOnFocus = _ref2.activateOnFocus,
-      uid = _ref2.uid,
-      disabled = _ref2.disabled,
-      sharedStylingProps = _ref2.sharedStylingProps,
-      onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded);
+function InternalTab(_ref3) {
+  var childKey = _ref3.childKey,
+      childIndex = _ref3.childIndex,
+      activeKey = _ref3.activeKey,
+      orientation = _ref3.orientation,
+      activeTabRef = _ref3.activeTabRef,
+      updateHighlight = _ref3.updateHighlight,
+      parseKeyDown = _ref3.parseKeyDown,
+      activateOnFocus = _ref3.activateOnFocus,
+      uid = _ref3.uid,
+      disabled = _ref3.disabled,
+      sharedStylingProps = _ref3.sharedStylingProps,
+      onChange = _ref3.onChange,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -385,15 +414,15 @@ function InternalTab(_ref2) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides9 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
-      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Tab = _getOverrides10[0],
-      TabProps = _getOverrides10[1];
-
-  var _getOverrides11 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+  var _getOverrides11 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      ArtworkContainer = _getOverrides12[0],
-      ArtworkContainerProps = _getOverrides12[1]; // Keyboard focus styling
+      Tab = _getOverrides12[0],
+      TabProps = _getOverrides12[1];
+
+  var _getOverrides13 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      ArtworkContainer = _getOverrides14[0],
+      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -493,14 +522,14 @@ function InternalTab(_ref2) {
   })) : null, title ? title : key);
 }
 
-function InternalTabPanel(_ref3) {
-  var childKey = _ref3.childKey,
-      childIndex = _ref3.childIndex,
-      activeKey = _ref3.activeKey,
-      uid = _ref3.uid,
-      sharedStylingProps = _ref3.sharedStylingProps,
-      renderAll = _ref3.renderAll,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+function InternalTabPanel(_ref4) {
+  var childKey = _ref4.childKey,
+      childIndex = _ref4.childIndex,
+      activeKey = _ref4.activeKey,
+      uid = _ref4.uid,
+      sharedStylingProps = _ref4.sharedStylingProps,
+      renderAll = _ref4.renderAll,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -509,10 +538,10 @@ function InternalTabPanel(_ref3) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides13 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
-      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      TabPanel = _getOverrides14[0],
-      TabPanelProps = _getOverrides14[1];
+  var _getOverrides15 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      TabPanel = _getOverrides16[0],
+      TabPanelProps = _getOverrides16[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/tabs-motion/tabs.js.flow

@@ -10,6 +10,7 @@ LICENSE file in the root directory of this source tree.
 /* global window */
 
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
@@ -23,6 +24,8 @@ import {
   StyledTabHighlight,
   StyledTabBorder,
   StyledTabPanel,
+  StyledEndEnhancerContainer,
+  StyledTabBar,
 } from './styled-components.js';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils.js';
 
@@ -88,6 +91,18 @@ const scrollParentToCentreTarget = (targetNode) => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
+function RenderEnhancer({ Enhancer }) {
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+  if (ReactIs.isValidElementType(Enhancer)) {
+    // $FlowFixMe
+    return <Enhancer />;
+  }
+  // $FlowFixMe
+  return Enhancer;
+}
+
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -99,6 +114,7 @@ export function Tabs({
   overrides = {},
   renderAll = false,
   uid: customUid = null,
+  endEnhancer,
 }: TabsPropsT) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -115,6 +131,10 @@ export function Tabs({
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
   const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+    overrides.EndEnhancerContainer,
+    StyledEndEnhancerContainer
+  );
 
   // Count key updates
   // We disable a few things until after first mount:
@@ -216,45 +236,56 @@ export function Tabs({
 
   return (
     <Root {...sharedStylingProps} {...RootProps}>
-      <TabList
-        data-baseweb="tab-list"
-        role="tablist"
-        aria-orientation={orientation}
-        {...sharedStylingProps}
-        {...TabListProps}
-      >
-        {React.Children.map(children, (child, index) => {
-          if (!child) return;
-          return (
-            <InternalTab
-              childKey={child.key}
-              childIndex={index}
-              activeKey={activeKey}
-              orientation={orientation}
-              activeTabRef={activeTabRef}
-              updateHighlight={updateHighlight}
-              parseKeyDown={parseKeyDown}
-              activateOnFocus={activateOnFocus}
-              uid={uid}
-              disabled={disabled}
-              sharedStylingProps={sharedStylingProps}
-              onChange={onChange}
-              {...child.props}
-            />
-          );
-        })}
-        <TabHighlight
-          data-baseweb="tab-highlight"
-          $length={highlightLayout.length}
-          $distance={highlightLayout.distance}
-          // This avoids the tab sliding in from the side on mount
-          $animate={keyUpdated > 1}
-          aria-hidden="true"
-          role="presentation"
+      <StyledTabBar $hasEndEnhancer={Boolean(endEnhancer)} $orientation={orientation}>
+        <TabList
+          data-baseweb="tab-list"
+          role="tablist"
+          aria-orientation={orientation}
           {...sharedStylingProps}
-          {...TabHighlightProps}
-        />
-      </TabList>
+          {...TabListProps}
+        >
+          {React.Children.map(children, (child, index) => {
+            if (!child) return;
+            return (
+              <InternalTab
+                childKey={child.key}
+                childIndex={index}
+                activeKey={activeKey}
+                orientation={orientation}
+                activeTabRef={activeTabRef}
+                updateHighlight={updateHighlight}
+                parseKeyDown={parseKeyDown}
+                activateOnFocus={activateOnFocus}
+                uid={uid}
+                disabled={disabled}
+                sharedStylingProps={sharedStylingProps}
+                onChange={onChange}
+                {...child.props}
+              />
+            );
+          })}
+          <TabHighlight
+            data-baseweb="tab-highlight"
+            $length={highlightLayout.length}
+            $distance={highlightLayout.distance}
+            // This avoids the tab sliding in from the side on mount
+            $animate={keyUpdated > 1}
+            aria-hidden="true"
+            role="presentation"
+            {...sharedStylingProps}
+            {...TabHighlightProps}
+          />
+        </TabList>
+
+        {orientation === ORIENTATION.horizontal &&
+          endEnhancer !== null &&
+          endEnhancer !== undefined && (
+            <EndEnhancerContainer {...endEnhancerContainerProps} $orientation={orientation}>
+              <RenderEnhancer Enhancer={endEnhancer} />
+            </EndEnhancerContainer>
+          )}
+      </StyledTabBar>
+
       <TabBorder
         data-baseweb="tab-border"
         aria-hidden="true"

package/tabs-motion/types.d.ts

@@ -10,6 +10,8 @@ export declare type TabsOverrides = {
     TabList?: Override;
     TabHighlight?: Override;
     TabBorder?: Override;
+    EndEnhancerContainer?: Override;
+    StyledTabBar?: Override;
 };
 export declare type TabOverrides = {
     Tab?: Override;
@@ -38,6 +40,7 @@ export declare type TabsProps = {
     overrides?: TabsOverrides;
     renderAll?: boolean;
     uid?: string;
+    endEnhancer?: React.ReactNode;
 };
 export declare type StatefulTabsProps = {
     initialState?: StatefulTabsState;

package/tabs-motion/types.js.flow

@@ -22,6 +22,8 @@ export type TabsOverridesT = {
   TabList?: OverrideT,
   TabHighlight?: OverrideT,
   TabBorder?: OverrideT,
+  EndEnhancerContainer?: OverrideT,
+  StyledTabBar?: OverrideT,
 };
 
 export type TabOverridesT = {
@@ -57,6 +59,7 @@ export type TabsPropsT = {|
   overrides?: TabsOverridesT,
   renderAll?: boolean,
   uid?: string,
+  endEnhancer?: React.Node | React.AbstractComponent<{}>,
 |};
 
 export type StatefulTabsPropsT = {|