baseui 12.2.0 → 13.0.0

package/table-semantic/table-builder.js

@@ -208,7 +208,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
       var columns = React.Children.toArray(children).filter(Boolean) // @ts-expect-error todo(flow->ts): limit children to be only react elements
       .map(function (child) {
         return child.props;
-      });
+      }); // @ts-ignore
 
       function renderHeader(col, colIndex, isFocusVisible) {
         var colOverrides = col.overrides || {};
@@ -234,37 +234,32 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             ColTableHeadCellSortable = _getOverrides34[0],
             colTableHeadCellSortableProps = _getOverrides34[1];
 
-        var sortIcon = null;
-        var sortLabel = 'not sorted';
+        var SortIcon, sortIconProps, sortLabel;
 
         switch (col.id === sortColumn && sortOrder) {
           case 'ASC':
-            sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
-              size: "16px",
-              "aria-hidden": true,
-              role: "presentation"
-            }, sortAscIconProps));
+            SortIcon = SortAscIcon;
+            sortIconProps = sortAscIconProps;
             sortLabel = 'ascending sorting';
             break;
 
           case 'DESC':
-            sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
-              size: "16px",
-              "aria-hidden": true,
-              role: "presentation"
-            }, sortDescIconProps));
+            SortIcon = SortDescIcon;
+            sortIconProps = sortDescIconProps;
             sortLabel = 'descending sorting';
             break;
 
           default:
-            sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
-              size: "16px",
-              "aria-hidden": true,
-              role: "presentation"
-            }, sortNoneIconProps));
+            SortIcon = SortNoneIcon;
+            sortIconProps = sortNoneIconProps;
+            sortLabel = 'not sorted';
             break;
-        }
+        } // add background-color: inherit on container for non-Blank icons
+
 
+        var sortIconContainerStyle = SortIcon === _blank.default ? sortIconContainerProps.$style : (0, _overrides.mergeConfigurationOverrides)({
+          backgroundColor: 'inherit'
+        }, sortIconContainerProps.$style);
         return /*#__PURE__*/React.createElement(ColTableHeadCellSortable, _extends({
           key: colIndex,
           $col: col,
@@ -284,8 +279,15 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
               onSort && onSort(col.id);
             }
           }
-        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
-      }
+        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, _extends({}, sortIconContainerProps, {
+          $style: sortIconContainerStyle
+        }), /*#__PURE__*/React.createElement(SortIcon, _extends({
+          size: "16px",
+          "aria-hidden": "true",
+          role: "presentation"
+        }, sortIconProps))));
+      } // @ts-ignore
+
 
       function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
         var colOverrides = col.overrides || {};
@@ -344,6 +346,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 exports.default = TableBuilder;
 
 _defineProperty(TableBuilder, "defaultProps", {
+  // @ts-ignore
   data: [],
   loadingMessage: 'Loading...'
 });

package/table-semantic/table-builder.js.flow

@@ -21,7 +21,7 @@ import {
   StyledTableEmptyMessage,
   StyledSortIconContainer,
 } from './styled-components.js';
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeConfigurationOverrides } from '../helpers/overrides.js';
 import Blank from '../icon/blank.js';
 import ChevronDown from '../icon/chevron-down.js';
 import ChevronUp from '../icon/chevron-up.js';
@@ -158,39 +158,35 @@ export default class TableBuilder<T> extends React.Component<
         TableHeadCellSortable
       );
 
-      let sortIcon = null;
-      let sortLabel = 'not sorted';
+      let SortIcon, sortIconProps, sortLabel;
 
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
-          sortIcon = (
-            <SortAscIcon size="16px" aria-hidden={true} role="presentation" {...sortAscIconProps} />
-          );
+          SortIcon = SortAscIcon;
+          sortIconProps = sortAscIconProps;
           sortLabel = 'ascending sorting';
           break;
         case 'DESC':
-          sortIcon = (
-            <SortDescIcon
-              size="16px"
-              aria-hidden={true}
-              role="presentation"
-              {...sortDescIconProps}
-            />
-          );
+          SortIcon = SortDescIcon;
+          sortIconProps= sortDescIconProps;
           sortLabel = 'descending sorting';
           break;
         default:
-          sortIcon = (
-            <SortNoneIcon
-              size="16px"
-              aria-hidden={true}
-              role="presentation"
-              {...sortNoneIconProps}
-            />
-          );
+          SortIcon = SortNoneIcon;
+          sortIconProps = sortNoneIconProps;
+          sortLabel = 'not sorted';
           break;
       }
 
+      // add background-color: inherit on container for non-Blank icons
+      const sortIconContainerStyle =
+        SortIcon === Blank
+          ? sortIconContainerProps.$style
+          : mergeConfigurationOverrides(
+            { backgroundColor: 'inherit' },
+            sortIconContainerProps.$style
+          );
+
       return (
         <ColTableHeadCellSortable
           key={colIndex}
@@ -213,7 +209,9 @@ export default class TableBuilder<T> extends React.Component<
           {...colTableHeadCellSortableProps}
         >
           {col.header}
-          <SortIconContainer {...sortIconContainerProps}>{sortIcon}</SortIconContainer>
+          <SortIconContainer {...sortIconContainerProps} $style={sortIconContainerStyle}>
+            <SortIcon size="16px" aria-hidden="true" role="presentation" {...sortIconProps} />
+          </SortIconContainer>
         </ColTableHeadCellSortable>
       );
     }

package/table-semantic/table.js

@@ -183,7 +183,9 @@ var Table = /*#__PURE__*/function (_React$Component) {
 exports.default = Table;
 
 _defineProperty(Table, "defaultProps", {
+  // @ts-ignore
   columns: [],
+  // @ts-ignore
   data: [[]],
   loadingMessage: 'Loading...'
 });

package/table-semantic/types.d.ts

@@ -1,9 +1,9 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { SIZE, DIVIDER } from './constants';
-export declare type Size = keyof typeof SIZE;
-export declare type Divider = keyof typeof DIVIDER;
-export declare type TableOverrides = {
+export type Size = keyof typeof SIZE;
+export type Divider = keyof typeof DIVIDER;
+export type TableOverrides = {
     Root?: Override;
     Table?: Override;
     TableHead?: Override;
@@ -15,7 +15,7 @@ export declare type TableOverrides = {
     TableLoadingMessage?: Override;
     TableEmptyMessage?: Override;
 };
-export declare type TableProps = {
+export type TableProps = {
     overrides?: TableOverrides;
     columns: Array<React.ReactNode>;
     data: Array<Array<React.ReactNode>>;
@@ -26,14 +26,14 @@ export declare type TableProps = {
     emptyMessage?: React.ReactNode | (() => React.ReactNode);
     size?: Size;
 };
-export declare type BuilderOverrides = {
+export type BuilderOverrides = {
     TableHeadCellSortable?: Override;
     SortIconContainer?: Override;
     SortAscIcon?: Override;
     SortDescIcon?: Override;
     SortNoneIcon?: Override;
 } & TableOverrides;
-export declare type TableBuilderProps<RowT> = {
+export type TableBuilderProps<RowT> = {
     overrides?: BuilderOverrides;
     children?: React.ReactNode;
     data: Array<RowT>;
@@ -47,7 +47,7 @@ export declare type TableBuilderProps<RowT> = {
     emptyMessage?: React.ReactNode | (() => React.ReactNode);
     size?: Size;
 };
-export declare type ColumnOverrides = {
+export type ColumnOverrides = {
     TableHeadCell?: Override;
     TableHeadCellSortable?: Override;
     TableBodyCell?: Override;
@@ -55,7 +55,7 @@ export declare type ColumnOverrides = {
     SortDescIcon?: Override;
     SortNoneIcon?: Override;
 };
-export declare type TableBuilderColumnProps<RowT> = {
+export type TableBuilderColumnProps<RowT> = {
     overrides?: ColumnOverrides;
     children: (row: RowT, rowIndex?: number) => React.ReactNode;
     id?: string;

package/tabs/index.d.ts

@@ -6,4 +6,4 @@ export { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export { Root as StyledRoot, Tab as StyledTab, TabBar as StyledTabBar, TabContent as StyledTabContent, } from './styled-components';
 export * from './types';
 /** @deprecated use StatefulTabsState instead. To be removed in future versions.*/
-export declare type State = StatefulTabsState;
+export type State = StatefulTabsState;

package/tabs/stateful-tabs.d.ts

@@ -3,10 +3,10 @@ import type { StatefulTabsProps, StatefulTabsState, StateChangeType } from './ty
 export default class StatefulTabs extends React.Component<StatefulTabsProps, StatefulTabsState> {
     static defaultProps: Partial<StatefulTabsProps>;
     state: {
-        activeKey: any;
+        activeKey: React.Key;
     };
     onTabChange: (newState: StatefulTabsState) => void;
     internalSetState(type: StateChangeType, changes: StatefulTabsState): void;
-    getInitialKey(): any;
+    getInitialKey(): React.Key;
     render(): JSX.Element;
 }

package/tabs/stateful-tabs.js

@@ -96,8 +96,8 @@ var StatefulTabs = /*#__PURE__*/function (_React$Component) {
       if (initialState && initialState.activeKey) {
         return initialState.activeKey;
       } else {
-        return React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
-        function (child, index) {
+        // @ts-ignore
+        return React.Children.map(children, function (child, index) {
           return child.key || String(index);
         })[0];
       }

package/tabs/types.d.ts

@@ -1,30 +1,30 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
-export declare type SharedStylePropsArg = {
+export type SharedStylePropsArg = {
     $disabled?: boolean;
     $active?: boolean;
-    $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+    $orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
     $isFocusVisible?: boolean;
 };
-export declare type StatefulTabsState = {
+export type StatefulTabsState = {
     activeKey: React.Key;
 };
-export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (stateChangeType: StateChangeType, nextState: StatefulTabsState, currentState: StatefulTabsState) => StatefulTabsState;
-export declare type TabsOverrides = {
+export type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateChangeType: StateChangeType, nextState: StatefulTabsState, currentState: StatefulTabsState) => StatefulTabsState;
+export type TabsOverrides = {
     Root?: Override;
     TabBar?: Override;
     TabContent?: Override;
     Tab?: Override;
 };
-export declare type TabOverrides = {
+export type TabOverrides = {
     Tab?: Override;
 };
-export declare type OnChangeHandler = (a: {
+export type OnChangeHandler = (a: {
     activeKey: React.Key;
 }) => unknown;
-export declare type TabsProps = {
+export type TabsProps = {
     /** An array of Tab components. */
     children: Array<React.ReactElement<any>> | React.ReactElement<any>;
     /**  Key of the the tab to be selected. */
@@ -34,18 +34,18 @@ export declare type TabsProps = {
     /** Change handler that is called every time a new tab is selected */
     onChange?: OnChangeHandler;
     /** Sets the orientation of the Tab component */
-    orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+    orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
     /** Renders all tab content for SEO purposes regardless of tab active state */
     renderAll?: boolean;
     overrides?: TabsOverrides;
 };
-export declare type StatefulTabsProps = Omit<TabsProps, 'activeKey'> & {
+export type StatefulTabsProps = Omit<TabsProps, 'activeKey'> & {
     /**  Initial state of the component */
     initialState?: StatefulTabsState;
     /**  A state change handler. */
     stateReducer: StateReducer;
 };
-export declare type TabPanelProps = {
+export type TabPanelProps = {
     children?: React.ReactNode;
     /** Sets the tab to disabled */
     disabled?: boolean;
@@ -62,7 +62,7 @@ export declare type TabPanelProps = {
     /** Title of the Tab to be shown in the Tab bar */
     title?: React.ReactNode;
 };
-export declare type TabProps = TabPanelProps & {
+export type TabProps = TabPanelProps & {
     id?: string;
-    $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+    $orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
 };

package/tabs-motion/index.d.ts

@@ -7,8 +7,8 @@ export * from './tabs';
 export * from './utils';
 export * from './types';
 /** @deprecated use StatefulTabsState instead. To be removed in future versions.*/
-export declare type State = StatefulTabsState;
+export type State = StatefulTabsState;
 /** @deprecated use StatefulTabsAction instead. To be removed in future versions.*/
-export declare type Action = StatefulTabsAction;
+export type Action = StatefulTabsAction;
 /** @deprecated use StatefulTabsReducer instead. To be removed in future versions.*/
-export declare type StateReducer = StatefulTabsReducer;
+export type StateReducer = StatefulTabsReducer;

package/tabs-motion/stateful-tabs.js

@@ -41,6 +41,7 @@ var getInitialState = function getInitialState(children, initialState) {
   if (initialState && initialState.activeKey) {
     return initialState;
   } else {
+    // @ts-ignore
     var firstKey = React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
     function (child, index) {
       return child.key || String(index);

package/tabs-motion/tab.js

@@ -12,6 +12,7 @@ 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
+// @ts-ignore
 function Tab(props) {
   return null;
 }

package/tabs-motion/tabs.js

@@ -68,7 +68,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var KEYBOARD_ACTION = {
   next: 'next',
   previous: 'previous'
-};
+}; // @ts-ignore
 
 var getLayoutParams = function getLayoutParams(el, orientation) {
   if (!el) {
@@ -94,7 +94,8 @@ var getLayoutParams = function getLayoutParams(el, orientation) {
       distance: el.offsetLeft
     };
   }
-};
+}; // @ts-ignore
+
 
 var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode) {
   var _targetNode$parentNod = targetNode.parentNode.getBoundingClientRect(),
@@ -124,7 +125,8 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   }; // ignore out of bounds, the browser will manage this for us
 
   targetNode.parentNode.scroll(target.x, target.y);
-};
+}; // @ts-ignore
+
 
 function RenderEnhancer(_ref) {
   var Enhancer = _ref.Enhancer;
@@ -192,7 +194,12 @@ function Tabs(_ref2) {
   var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledEndEnhancerContainer),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       EndEnhancerContainer = _getOverrides10[0],
-      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
+      endEnhancerContainerProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.TabBar, _styledComponents.StyledTabBar),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      TabBar = _getOverrides12[0],
+      tabBarProps = _getOverrides12[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
@@ -298,10 +305,10 @@ function Tabs(_ref2) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(_styledComponents.StyledTabBar, {
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabBar, _extends({
     $hasEndEnhancer: Boolean(endEnhancer),
     $orientation: orientation
-  }, /*#__PURE__*/React.createElement(TabList, _extends({
+  }, tabBarProps), /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -414,15 +421,15 @@ function InternalTab(_ref3) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides11 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
-      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      Tab = _getOverrides12[0],
-      TabProps = _getOverrides12[1];
-
-  var _getOverrides13 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+  var _getOverrides13 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
       _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      ArtworkContainer = _getOverrides14[0],
-      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
+      Tab = _getOverrides14[0],
+      TabProps = _getOverrides14[1];
+
+  var _getOverrides15 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      ArtworkContainer = _getOverrides16[0],
+      ArtworkContainerProps = _getOverrides16[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -506,6 +513,7 @@ function InternalTab(_ref3) {
     $focusVisible: focusVisible,
     $isActive: isActive
   }, sharedStylingProps, restProps, TabProps, {
+    // @ts-ignore
     onClick: function onClick(event) {
       if (typeof onChange === 'function') onChange({
         activeKey: key
@@ -538,10 +546,10 @@ function InternalTabPanel(_ref4) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides15 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
-      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-      TabPanel = _getOverrides16[0],
-      TabPanelProps = _getOverrides16[1];
+  var _getOverrides17 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      TabPanel = _getOverrides18[0],
+      TabPanelProps = _getOverrides18[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/tabs-motion/tabs.js.flow

@@ -135,6 +135,7 @@ export function Tabs({
     overrides.EndEnhancerContainer,
     StyledEndEnhancerContainer
   );
+  const [TabBar, tabBarProps] = getOverrides(overrides.TabBar, StyledTabBar);
 
   // Count key updates
   // We disable a few things until after first mount:
@@ -236,7 +237,7 @@ export function Tabs({
 
   return (
     <Root {...sharedStylingProps} {...RootProps}>
-      <StyledTabBar $hasEndEnhancer={Boolean(endEnhancer)} $orientation={orientation}>
+      <TabBar $hasEndEnhancer={Boolean(endEnhancer)} $orientation={orientation} {...tabBarProps}>
         <TabList
           data-baseweb="tab-list"
           role="tablist"
@@ -284,7 +285,7 @@ export function Tabs({
               <RenderEnhancer Enhancer={endEnhancer} />
             </EndEnhancerContainer>
           )}
-      </StyledTabBar>
+      </TabBar>
 
       <TabBorder
         data-baseweb="tab-border"

package/tabs-motion/types.d.ts

@@ -2,34 +2,34 @@ import type * as React from 'react';
 import type { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
 import type { Override } from '../helpers/overrides';
 import type { IconProps } from '../icon';
-export declare type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION];
-export declare type Fill = typeof FILL[keyof typeof FILL];
-export declare type StateChange = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
-export declare type TabsOverrides = {
+export type Orientation = (typeof ORIENTATION)[keyof typeof ORIENTATION];
+export type Fill = (typeof FILL)[keyof typeof FILL];
+export type StateChange = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE];
+export type TabsOverrides = {
     Root?: Override;
     TabList?: Override;
     TabHighlight?: Override;
     TabBorder?: Override;
     EndEnhancerContainer?: Override;
-    StyledTabBar?: Override;
+    TabBar?: Override;
 };
-export declare type TabOverrides = {
+export type TabOverrides = {
     Tab?: Override;
     ArtworkContainer?: Override;
     TabPanel?: Override;
 };
-export declare type StatefulTabsState = {
+export type StatefulTabsState = {
     activeKey: React.Key;
 };
-export declare type StatefulTabsAction = {
+export type StatefulTabsAction = {
     type: StateChange;
     payload: React.Key;
 };
-export declare type StatefulTabsReducer = (state: StatefulTabsState, action: StatefulTabsAction) => StatefulTabsState;
-export declare type onChange = (params: {
+export type StatefulTabsReducer = (state: StatefulTabsState, action: StatefulTabsAction) => StatefulTabsState;
+export type onChange = (params: {
     activeKey: React.Key;
 }) => void;
-export declare type TabsProps = {
+export type TabsProps = {
     children: React.ReactNode;
     activeKey?: React.Key;
     disabled?: boolean;
@@ -42,11 +42,11 @@ export declare type TabsProps = {
     uid?: string;
     endEnhancer?: React.ReactNode;
 };
-export declare type StatefulTabsProps = {
+export type StatefulTabsProps = {
     initialState?: StatefulTabsState;
     stateReducer?: StatefulTabsReducer;
 } & TabsProps;
-export declare type TabProps = {
+export type TabProps = {
     title?: React.ReactNode;
     key?: React.Key;
     tabRef?: React.Ref<HTMLButtonElement>;

package/tabs-motion/types.js.flow

@@ -23,7 +23,7 @@ export type TabsOverridesT = {
   TabHighlight?: OverrideT,
   TabBorder?: OverrideT,
   EndEnhancerContainer?: OverrideT,
-  StyledTabBar?: OverrideT,
+  TabBar?: OverrideT,
 };
 
 export type TabOverridesT = {