baseui 12.0.0 → 12.1.2

package/esm/table-semantic/styled-components.js

@@ -45,6 +45,8 @@ export var StyledRoot = styled('div', function (_ref) {
   });
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export var StyledTable = styled('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
@@ -56,16 +58,21 @@ export var StyledTable = styled('table', function (_ref2) {
   };
 });
 StyledTable.displayName = "StyledTable";
+StyledTable.displayName = 'StyledTable'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledTableHead = styled('thead', function (_ref3) {
   var $theme = _ref3.$theme;
   return {};
 });
 StyledTableHead.displayName = "StyledTableHead";
+StyledTableHead.displayName = 'StyledTableHead'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledTableHeadRow = styled('tr', function (_ref4) {
   var $theme = _ref4.$theme;
   return {};
 });
 StyledTableHeadRow.displayName = "StyledTableHeadRow";
+StyledTableHeadRow.displayName = 'StyledTableHeadRow';
 export var StyledTableHeadCell = styled('th', function (_ref5) {
   var _notLastChild;
 
@@ -86,7 +93,6 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
     textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
-    verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
   }, $divider === DIVIDER.clean ? {} : {
@@ -98,6 +104,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
   });
 });
 StyledTableHeadCell.displayName = "StyledTableHeadCell";
+StyledTableHeadCell.displayName = 'StyledTableHeadCell';
 export var StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, function (_ref6) {
   var $theme = _ref6.$theme,
       $isFocusVisible = _ref6.$isFocusVisible;
@@ -115,6 +122,7 @@ export var StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, function
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+StyledTableHeadCellSortable.displayName = 'StyledTableHeadCellSortable';
 export var StyledSortIconContainer = styled('span', function (_ref7) {
   var $theme = _ref7.$theme;
   return {
@@ -125,9 +133,10 @@ export var StyledSortIconContainer = styled('span', function (_ref7) {
     right: $theme.sizing.scale500,
     transform: 'translateY(-50%)'
   };
-}); // No longer used, but will maintain for some time to support existing usage
-
+});
 StyledSortIconContainer.displayName = "StyledSortIconContainer";
+StyledSortIconContainer.displayName = 'StyledSortIconContainer'; // No longer used, but will maintain for some time to support existing usage
+
 export var StyledSortAscIcon = styled(ChevronUp, function (_ref8) {
   var $theme = _ref8.$theme;
   return {
@@ -138,6 +147,7 @@ export var StyledSortAscIcon = styled(ChevronUp, function (_ref8) {
   };
 });
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
+StyledSortAscIcon.displayName = 'StyledSortAscIcon';
 export var StyledSortDescIcon = styled(ChevronDown, function (_ref9) {
   var $theme = _ref9.$theme;
   return {
@@ -148,6 +158,7 @@ export var StyledSortDescIcon = styled(ChevronDown, function (_ref9) {
   };
 });
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
+StyledSortDescIcon.displayName = 'StyledSortDescIcon';
 export var StyledSortNoneIcon = styled(Blank, function (_ref10) {
   var $theme = _ref10.$theme;
   return {
@@ -158,11 +169,14 @@ export var StyledSortNoneIcon = styled(Blank, function (_ref10) {
   };
 });
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
+StyledSortNoneIcon.displayName = 'StyledSortNoneIcon'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledTableBody = styled('tbody', function (_ref11) {
   var $theme = _ref11.$theme;
   return {};
 });
 StyledTableBody.displayName = "StyledTableBody";
+StyledTableBody.displayName = 'StyledTableBody';
 export var StyledTableBodyRow = styled('tr', function (_ref12) {
   var $theme = _ref12.$theme;
   return {
@@ -172,6 +186,7 @@ export var StyledTableBodyRow = styled('tr', function (_ref12) {
   };
 });
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
+StyledTableBodyRow.displayName = 'StyledTableBodyRow';
 export var StyledTableBodyCell = styled('td', function (_ref13) {
   var _notLastChild2;
 
@@ -200,6 +215,7 @@ export var StyledTableBodyCell = styled('td', function (_ref13) {
   });
 });
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
+StyledTableBodyCell.displayName = 'StyledTableBodyCell';
 export var StyledTableLoadingMessage = styled('div', function (_ref14) {
   var $theme = _ref14.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
@@ -208,4 +224,5 @@ export var StyledTableLoadingMessage = styled('div', function (_ref14) {
   });
 });
 StyledTableLoadingMessage.displayName = "StyledTableLoadingMessage";
+StyledTableLoadingMessage.displayName = 'StyledTableLoadingMessage';
 export var StyledTableEmptyMessage = StyledTableLoadingMessage;

package/esm/tabs/stateful-tabs.js

@@ -96,6 +96,7 @@ var StatefulTabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props3 = this.props,
           initialState = _this$props3.initialState,
           stateReducer = _this$props3.stateReducer,

package/esm/tabs/styled-components.js

@@ -20,6 +20,7 @@ export var Root = styled('div', function (props) {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export var Tab = styled('div', function (props) {
   var $disabled = props.$disabled,
       $active = props.$active,
@@ -60,6 +61,7 @@ export var Tab = styled('div', function (props) {
   return style;
 });
 Tab.displayName = "Tab";
+Tab.displayName = 'Tab';
 export var TabBar = styled('div', function (props) {
   var $orientation = props.$orientation,
       _props$$theme2 = props.$theme,
@@ -74,6 +76,7 @@ export var TabBar = styled('div', function (props) {
   };
 });
 TabBar.displayName = "TabBar";
+TabBar.displayName = 'TabBar';
 export var TabContent = styled('div', function (props) {
   var $active = props.$active,
       _props$$theme3 = props.$theme,
@@ -87,4 +90,5 @@ export var TabContent = styled('div', function (props) {
     paddingBottom: sizing.scale500
   });
 });
-TabContent.displayName = "TabContent";
+TabContent.displayName = "TabContent";
+TabContent.displayName = 'TabContent';

package/esm/tabs/tabs.js

@@ -78,7 +78,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           orientation = _this$props.orientation,
           children = _this$props.children,
           _this$props$overrides = _this$props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       var tabs = React.Children.map(children, function (child, index) {
         if (!child) return;
         var key = child.key || String(index);
@@ -116,7 +117,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var _getOverrides = getOverrides(TabContentOverride, StyledTabContent),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           TabContent = _getOverrides2[0],
-          tabContentProps = _getOverrides2[1];
+          tabContentProps = _getOverrides2[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
       var tabs = React.Children.map(children, function (child, index) {
         if (!child) return;

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

@@ -30,16 +30,27 @@ export var StyledRoot = styled('div', function (_ref) {
   return style;
 });
 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;
+StyledRoot.displayName = 'StyledRoot';
+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)) {
@@ -75,16 +86,17 @@ export var StyledTabList = styled('div', function (_ref2) {
   return style;
 });
 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;
+StyledTabList.displayName = 'StyledTabList';
+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',
@@ -145,10 +157,22 @@ export var StyledTab = styled('button', function (_ref3) {
   return style;
 });
 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;
+StyledTab.displayName = 'StyledTab';
+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'
   };
@@ -162,10 +186,11 @@ export var StyledArtworkContainer = styled('div', function (_ref4) {
   return style;
 });
 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;
+StyledArtworkContainer.displayName = 'StyledArtworkContainer';
+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'
@@ -180,16 +205,17 @@ export var StyledTabBorder = styled('div', function (_ref5) {
   return style;
 });
 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;
+StyledTabBorder.displayName = 'StyledTabBorder';
+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',
@@ -223,10 +249,11 @@ export var StyledTabHighlight = styled('div', function (_ref6) {
   return style;
 });
 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;
+StyledTabHighlight.displayName = 'StyledTabHighlight';
+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
@@ -242,4 +269,5 @@ export var StyledTabPanel = styled('div', function (_ref7) {
 
   return style;
 });
-StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = 'StyledTabPanel';

package/esm/tabs-motion/tab.js

@@ -4,6 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Tab(props) {
   return null;
 }

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),
@@ -393,7 +421,8 @@ function InternalTab(_ref2) {
       setFocusVisible(true);
     }
   }, []);
-  var handleBlur = React.useCallback(function (event) {
+  var handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function (event) {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -479,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;
@@ -495,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/esm/tag/styled-components.js

@@ -279,6 +279,7 @@ export var Action = styled('span', function (props) {
   }, _defineProperty(_ref, bottomRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, topRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, "cursor", $disabled ? 'not-allowed' : 'pointer'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, marginDir, (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, '8px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, '12px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, '16px'), _SIZE$small$SIZE$medi)[$size]), _defineProperty(_ref, "outline", 'none'), _defineProperty(_ref, "transitionProperty", 'all'), _defineProperty(_ref, "transitionDuration", 'background-color'), _defineProperty(_ref, "transitionTimingFunction", $theme.animation.easeOutCurve), _ref;
 });
 Action.displayName = "Action";
+Action.displayName = 'Action';
 export var StartEnhancerContainer = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,
@@ -298,6 +299,7 @@ export var StartEnhancerContainer = styled('div', function (_ref2) {
   }, paddingDir, paddingMagnitude);
 });
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
+StartEnhancerContainer.displayName = 'StartEnhancerContainer';
 export var Text = styled('span', function (props) {
   var $theme = props.$theme;
   return {
@@ -309,6 +311,7 @@ export var Text = styled('span', function (props) {
   };
 });
 Text.displayName = "Text";
+Text.displayName = 'Text';
 export var Root = styled('span', function (props) {
   var _SIZE$small$SIZE$medi2, _SIZE$small$SIZE$medi3, _SIZE$small$SIZE$medi4;
 
@@ -374,4 +377,5 @@ export var Root = styled('span', function (props) {
     }
   });
 });
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/esm/tag/tag.js

@@ -77,7 +77,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleBlur(event) {
     if (focusVisible !== false) {
@@ -160,7 +161,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
-  return /*#__PURE__*/React.createElement(Root, _extends({
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({
     ref: ref,
     "data-baseweb": "tag",
     "aria-label": isButton && closeable ? "".concat(typeof children === 'string' ? "".concat(children, ", ") : '', "close by backspace") : null,

package/esm/textarea/styled-components.js

@@ -13,22 +13,27 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components';
 export var StyledTextAreaRoot = styled('div', function (props) {
-  return getRootStyles(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread({}, getRootStyles(_objectSpread(_objectSpread({
     $positive: false
   }, props), {}, {
     $hasIconTrailing: false
-  }));
+  }))), {}, {
+    width: props.$resize ? 'fit-content' : '100%'
+  });
 });
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
+StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
 export var StyledTextareaContainer = styled('div', function (props) {
-  return _objectSpread({}, getInputContainerStyles(_objectSpread({
+  return getInputContainerStyles(_objectSpread({
     $positive: false
-  }, props)));
+  }, props));
 });
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
+StyledTextareaContainer.displayName = 'StyledTextareaContainer';
 export var StyledTextarea = styled('textarea', function (props) {
   return _objectSpread(_objectSpread({}, getInputStyles(props)), {}, {
-    resize: 'none'
+    resize: props.$resize || 'none'
   });
 });
-StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = 'StyledTextarea';