baseui 12.0.0 → 12.1.2

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

@@ -41,6 +41,8 @@ export const StyledRoot = styled('div', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledTable = styled('table', ({
   $theme,
   $width
@@ -53,18 +55,23 @@ export const StyledTable = styled('table', ({
   };
 });
 StyledTable.displayName = "StyledTable";
+StyledTable.displayName = 'StyledTable'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledTableHead = styled('thead', ({
   $theme
 }) => {
   return {};
 });
 StyledTableHead.displayName = "StyledTableHead";
+StyledTableHead.displayName = 'StyledTableHead'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledTableHeadRow = styled('tr', ({
   $theme
 }) => {
   return {};
 });
 StyledTableHeadRow.displayName = "StyledTableHeadRow";
+StyledTableHeadRow.displayName = 'StyledTableHeadRow';
 export const StyledTableHeadCell = styled('th', ({
   $theme,
   $size,
@@ -84,7 +91,6 @@ export const StyledTableHeadCell = styled('th', ({
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
     textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
-    verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1,
     ...($divider === DIVIDER.clean ? {} : {
@@ -100,6 +106,7 @@ export const StyledTableHeadCell = styled('th', ({
   };
 });
 StyledTableHeadCell.displayName = "StyledTableHeadCell";
+StyledTableHeadCell.displayName = 'StyledTableHeadCell';
 export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
   $theme,
   $isFocusVisible
@@ -118,6 +125,7 @@ export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+StyledTableHeadCellSortable.displayName = 'StyledTableHeadCellSortable';
 export const StyledSortIconContainer = styled('span', ({
   $theme
 }) => {
@@ -129,9 +137,10 @@ export const StyledSortIconContainer = styled('span', ({
     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 const StyledSortAscIcon = styled(ChevronUp, ({
   $theme
 }) => {
@@ -143,6 +152,7 @@ export const StyledSortAscIcon = styled(ChevronUp, ({
   };
 });
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
+StyledSortAscIcon.displayName = 'StyledSortAscIcon';
 export const StyledSortDescIcon = styled(ChevronDown, ({
   $theme
 }) => {
@@ -154,6 +164,7 @@ export const StyledSortDescIcon = styled(ChevronDown, ({
   };
 });
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
+StyledSortDescIcon.displayName = 'StyledSortDescIcon';
 export const StyledSortNoneIcon = styled(Blank, ({
   $theme
 }) => {
@@ -165,12 +176,15 @@ export const StyledSortNoneIcon = styled(Blank, ({
   };
 });
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
+StyledSortNoneIcon.displayName = 'StyledSortNoneIcon'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledTableBody = styled('tbody', ({
   $theme
 }) => {
   return {};
 });
 StyledTableBody.displayName = "StyledTableBody";
+StyledTableBody.displayName = 'StyledTableBody';
 export const StyledTableBodyRow = styled('tr', ({
   $theme
 }) => {
@@ -181,6 +195,7 @@ export const StyledTableBodyRow = styled('tr', ({
   };
 });
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
+StyledTableBodyRow.displayName = 'StyledTableBodyRow';
 export const StyledTableBodyCell = styled('td', ({
   $theme,
   $size,
@@ -212,6 +227,7 @@ export const StyledTableBodyCell = styled('td', ({
   };
 });
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
+StyledTableBodyCell.displayName = 'StyledTableBodyCell';
 export const StyledTableLoadingMessage = styled('div', ({
   $theme
 }) => {
@@ -221,4 +237,5 @@ export const StyledTableLoadingMessage = styled('div', ({
   };
 });
 StyledTableLoadingMessage.displayName = "StyledTableLoadingMessage";
+StyledTableLoadingMessage.displayName = 'StyledTableLoadingMessage';
 export const StyledTableEmptyMessage = StyledTableLoadingMessage;

package/es/tabs/stateful-tabs.js

@@ -49,6 +49,7 @@ export default class StatefulTabs extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       initialState,
       stateReducer,

package/es/tabs/styled-components.js

@@ -16,6 +16,7 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const Tab = styled('div', props => {
   const {
     $disabled,
@@ -58,6 +59,7 @@ export const Tab = styled('div', props => {
   return style;
 });
 Tab.displayName = "Tab";
+Tab.displayName = 'Tab';
 export const TabBar = styled('div', props => {
   const {
     $orientation,
@@ -75,6 +77,7 @@ export const TabBar = styled('div', props => {
   };
 });
 TabBar.displayName = "TabBar";
+TabBar.displayName = 'TabBar';
 export const TabContent = styled('div', props => {
   const {
     $active,
@@ -91,4 +94,5 @@ export const TabContent = styled('div', props => {
     paddingBottom: sizing.scale500
   };
 });
-TabContent.displayName = "TabContent";
+TabContent.displayName = "TabContent";
+TabContent.displayName = 'TabContent';

package/es/tabs/tabs.js

@@ -31,7 +31,8 @@ export default class Tabs extends React.Component {
       orientation,
       children,
       overrides = {}
-    } = this.props;
+    } = this.props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     const tabs = React.Children.map(children, (child, index) => {
       if (!child) return;
       const key = child.key || String(index);
@@ -64,7 +65,8 @@ export default class Tabs extends React.Component {
     const {
       TabContent: TabContentOverride
     } = overrides;
-    const [TabContent, tabContentProps] = getOverrides(TabContentOverride, StyledTabContent);
+    const [TabContent, tabContentProps] = getOverrides(TabContentOverride, StyledTabContent); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     const tabs = React.Children.map(children, (child, index) => {
       if (!child) return;
       const key = child.key || String(index);

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

@@ -24,6 +24,15 @@ export const StyledRoot = styled('div', ({
   return style;
 });
 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,
@@ -32,7 +41,8 @@ export const StyledTabList = styled('div', ({
   const style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -68,11 +78,13 @@ export const StyledTabList = styled('div', ({
   return style;
 });
 StyledTabList.displayName = "StyledTabList";
+StyledTabList.displayName = 'StyledTabList';
 export const StyledTab = styled('button', ({
   $theme,
   $orientation = ORIENTATION.horizontal,
   $fill = FILL.intrinsic,
   $focusVisible = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   $isActive = false
 }) => {
   const style = {
@@ -135,6 +147,20 @@ export const StyledTab = styled('button', ({
   return style;
 });
 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
@@ -152,6 +178,7 @@ export const StyledArtworkContainer = styled('div', ({
   return style;
 });
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
+StyledArtworkContainer.displayName = 'StyledArtworkContainer';
 export const StyledTabBorder = styled('div', ({
   $theme,
   $orientation = ORIENTATION.horizontal
@@ -170,6 +197,7 @@ export const StyledTabBorder = styled('div', ({
   return style;
 });
 StyledTabBorder.displayName = "StyledTabBorder";
+StyledTabBorder.displayName = 'StyledTabBorder';
 export const StyledTabHighlight = styled('div', ({
   $theme,
   $orientation = ORIENTATION.horizontal,
@@ -210,6 +238,7 @@ export const StyledTabHighlight = styled('div', ({
   return style;
 });
 StyledTabHighlight.displayName = "StyledTabHighlight";
+StyledTabHighlight.displayName = 'StyledTabHighlight';
 export const StyledTabPanel = styled('div', ({
   $theme,
   $pad = true
@@ -229,4 +258,5 @@ export const StyledTabPanel = styled('div', ({
 
   return style;
 });
-StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = 'StyledTabPanel';

package/es/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/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"
@@ -314,7 +338,8 @@ function InternalTab({
       setFocusVisible(true);
     }
   }, []);
-  const handleBlur = React.useCallback(event => {
+  const handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  event => {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }

package/es/tag/styled-components.js

@@ -57,16 +57,19 @@ const COLOR_STATE = {
 const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
 
 const neutralColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNeutralFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNeutralOutlinedFont,
     backgroundColor: null,
@@ -74,16 +77,19 @@ const neutralColorStates = {
   })
 };
 const primaryColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPrimaryFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPrimaryOutlinedFont,
     backgroundColor: null,
@@ -91,16 +97,19 @@ const primaryColorStates = {
   })
 };
 const accentColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagAccentFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagAccentOutlinedFont,
     backgroundColor: null,
@@ -108,16 +117,19 @@ const accentColorStates = {
   })
 };
 const positiveColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPositiveFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPositiveOutlinedFont,
     backgroundColor: null,
@@ -125,16 +137,19 @@ const positiveColorStates = {
   })
 };
 const warningColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagWarningFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagWarningOutlinedFont,
     backgroundColor: null,
@@ -142,16 +157,19 @@ const warningColorStates = {
   })
 };
 const negativeColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNegativeFontDisabled,
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedDisabled
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNegativeOutlinedFont,
     backgroundColor: null,
@@ -159,16 +177,19 @@ const negativeColorStates = {
   })
 };
 const orangeColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.orange200, colorTokens.orange600),
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange700)
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.orange400, colorTokens.orange500),
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.orange400, colorTokens.orange300),
     backgroundColor: null,
@@ -176,16 +197,19 @@ const orangeColorStates = {
   })
 };
 const purpleColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.purple200, colorTokens.purple600),
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple700)
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.purple400, colorTokens.purple500),
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.purple400, colorTokens.purple300),
     backgroundColor: null,
@@ -193,16 +217,19 @@ const purpleColorStates = {
   })
 };
 const brownColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.brown200, colorTokens.brown600),
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown700)
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.brown400, colorTokens.brown500),
     borderColor: null
   }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.brown400, colorTokens.brown300),
     backgroundColor: null,
@@ -277,6 +304,7 @@ export const Action = styled('span', props => {
   };
 });
 Action.displayName = "Action";
+Action.displayName = 'Action';
 export const StartEnhancerContainer = styled('div', ({
   $theme,
   $size = SIZE.small
@@ -297,6 +325,7 @@ export const StartEnhancerContainer = styled('div', ({
   };
 });
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
+StartEnhancerContainer.displayName = 'StartEnhancerContainer';
 export const Text = styled('span', props => {
   const {
     $theme
@@ -310,6 +339,7 @@ export const Text = styled('span', props => {
   };
 });
 Text.displayName = "Text";
+Text.displayName = 'Text';
 export const Root = styled('span', props => {
   const {
     $theme,
@@ -384,4 +414,5 @@ export const Root = styled('span', props => {
     }
   };
 });
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/es/tag/tag.js

@@ -30,7 +30,9 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     isFocused = false,
     isHovered = false,
     kind = KIND.primary,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionClick = event => {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionKeyDown = event => {},
     onClick = null,
     onKeyDown = null,
@@ -45,7 +47,8 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleBlur(event) {
     if (focusVisible !== false) {
@@ -112,7 +115,8 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   }[size]; // Capitalize for JSX
 
   const 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 ? `${typeof children === 'string' ? `${children}, ` : ''}close by backspace` : null,

package/es/textarea/styled-components.js

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