baseui 12.0.0 → 12.1.0

package/es/table/styled-components.js

@@ -24,6 +24,7 @@ const StyledTableElement = styled('div', ({
   };
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 export const StyledTable = withWrapper(StyledTableElement, StyledComponent => function StyledTable(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     "data-baseweb": "table-custom",
@@ -43,6 +44,7 @@ const StyledHeadElement = styled('div', ({
   };
 });
 StyledHeadElement.displayName = "StyledHeadElement";
+StyledHeadElement.displayName = 'StyledHeadElement';
 export const StyledHead = withWrapper(StyledHeadElement, StyledComponent => function StyledHead(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "row"
@@ -73,6 +75,7 @@ const StyledHeadCellElement = styled('div', ({
   };
 });
 StyledHeadCellElement.displayName = "StyledHeadCellElement";
+StyledHeadCellElement.displayName = 'StyledHeadCellElement';
 export const StyledHeadCell = withWrapper(StyledHeadCellElement, StyledComponent => function StyledHeadCell(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "columnheader"
@@ -100,6 +103,7 @@ export const StyledSortableLabel = styled('button', ({
   };
 });
 StyledSortableLabel.displayName = "StyledSortableLabel";
+StyledSortableLabel.displayName = 'StyledSortableLabel';
 const StyledBodyElement = styled('div', ({
   $width
 }) => {
@@ -112,6 +116,7 @@ const StyledBodyElement = styled('div', ({
   };
 });
 StyledBodyElement.displayName = "StyledBodyElement";
+StyledBodyElement.displayName = 'StyledBodyElement';
 export const StyledBody = withWrapper(StyledBodyElement, StyledComponent => function StyledBody(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "rowgroup"
@@ -122,6 +127,7 @@ const StyledRowElement = styled('div', {
   alignItems: 'center'
 });
 StyledRowElement.displayName = "StyledRowElement";
+StyledRowElement.displayName = 'StyledRowElement';
 export const StyledRow = withWrapper(StyledRowElement, StyledComponent => function StyledRow(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "row"
@@ -143,6 +149,7 @@ const StyledCellElement = styled('div', ({
   };
 });
 StyledCellElement.displayName = "StyledCellElement";
+StyledCellElement.displayName = 'StyledCellElement';
 export const StyledCell = withWrapper(StyledCellElement, StyledComponent => function StyledCell(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "gridcell"
@@ -187,6 +194,7 @@ export const StyledFilterButton = styled('button', props => {
   };
 });
 StyledFilterButton.displayName = "StyledFilterButton";
+StyledFilterButton.displayName = 'StyledFilterButton';
 export const StyledFilterContent = styled('div', ({
   $theme
 }) => ({ ...expandBorderStyles($theme.borders.border300),
@@ -199,6 +207,7 @@ export const StyledFilterContent = styled('div', ({
   overflow: 'auto'
 }));
 StyledFilterContent.displayName = "StyledFilterContent";
+StyledFilterContent.displayName = 'StyledFilterContent';
 export const StyledFilterHeading = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font250,
@@ -209,6 +218,7 @@ export const StyledFilterHeading = styled('div', ({
   paddingLeft: $theme.sizing.scale600
 }));
 StyledFilterHeading.displayName = "StyledFilterHeading";
+StyledFilterHeading.displayName = 'StyledFilterHeading';
 export const StyledFilterFooter = styled('div', ({
   $theme
 }) => ({
@@ -222,6 +232,7 @@ export const StyledFilterFooter = styled('div', ({
   minWidth: '216px'
 }));
 StyledFilterFooter.displayName = "StyledFilterFooter";
+StyledFilterFooter.displayName = 'StyledFilterFooter';
 export const StyledAction = styled('button', ({
   $theme
 }) => {
@@ -243,4 +254,5 @@ export const StyledAction = styled('button', ({
     }
   };
 });
-StyledAction.displayName = "StyledAction";
+StyledAction.displayName = "StyledAction";
+StyledAction.displayName = 'StyledAction';

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

@@ -20,6 +20,7 @@ const StyledTableElement = withStyle(FlexStyledTable, props => {
   };
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 export const StyledTable = withWrapper(StyledTableElement, StyledComponent => function StyledTable(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     "data-baseweb": "table-grid"
@@ -44,6 +45,7 @@ export const StyledHeadCell = withStyle(FlexStyledHeadCell, ({
   };
 });
 StyledHeadCell.displayName = "StyledHeadCell";
+StyledHeadCell.displayName = 'StyledHeadCell';
 export const StyledBodyCell = withStyle(FlexStyledBodyCell, props => {
   return {
     display: 'block',
@@ -56,4 +58,5 @@ export const StyledBodyCell = withStyle(FlexStyledBodyCell, props => {
     }
   };
 });
-StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = 'StyledBodyCell';

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);
     }