baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/system-banner/system-banner.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemBanner = SystemBanner;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _banner = require("../banner");
+
+var _styledComponents = require("./styled-components");
+
+var _overrides = require("../helpers/overrides");
+
+var _excluded = ["artworkIcon", "primaryAction", "secondaryAction", "overrides"],
+    _excluded2 = ["Root", "LeadingContent", "TrailingIconButton", "MessageContent"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function SystemBanner(props) {
+  var artworkIcon = props.artworkIcon,
+      primaryAction = props.primaryAction,
+      secondaryAction = props.secondaryAction,
+      _props$overrides = props.overrides,
+      overrides = _props$overrides === void 0 ? {} : _props$overrides,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var Root = overrides.Root,
+      LeadingContent = overrides.LeadingContent,
+      TrailingIconButton = overrides.TrailingIconButton,
+      MessageContent = overrides.MessageContent,
+      restOverrides = _objectWithoutProperties(overrides, _excluded2);
+
+  var hasSinglePrimaryAction = (primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick) && !secondaryAction;
+  var hasTwoActions = (primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick) && (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.onClick);
+  var hasTrailingIcon = hasSinglePrimaryAction && primaryAction.icon;
+  var systemBannerRootOverrides = {
+    component: _styledComponents.StyledRoot,
+    props: hasSinglePrimaryAction ? {
+      $isButton: true,
+      $as: 'button',
+      onClick: primaryAction.onClick,
+      'aria-label': primaryAction.label
+    } : {}
+  };
+  var systemBannerLeadingContentOverrides = {
+    component: _styledComponents.StyledLeadingContent
+  };
+  var styledTrailingIconButtonOverrides = {
+    component: _styledComponents.StyledTrailingIconButton,
+    props: {
+      $as: 'div'
+    }
+  };
+  var systemBannerMessageContentOverrides = {
+    component: _styledComponents.StyledMessageContent,
+    props: {
+      $as: 'button',
+      onClick: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick,
+      'aria-label': primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.label
+    }
+  };
+
+  var systemBannerOverrides = _objectSpread({
+    Root: (0, _overrides.mergeOverride)(systemBannerRootOverrides, Root || {}),
+    LeadingContent: (0, _overrides.mergeOverride)(systemBannerLeadingContentOverrides, LeadingContent || {}),
+    TrailingIconButton: hasTrailingIcon ? (0, _overrides.mergeOverride)(styledTrailingIconButtonOverrides, TrailingIconButton || {}) : {},
+    MessageContent: hasTwoActions ? (0, _overrides.mergeOverride)(systemBannerMessageContentOverrides, MessageContent || {}) : {}
+  }, restOverrides);
+
+  return /*#__PURE__*/React.createElement(_banner.Banner, _extends({
+    action: secondaryAction ? _objectSpread({
+      onClick: null
+    }, secondaryAction) : hasTrailingIcon ? {
+      icon: primaryAction.icon,
+      onClick: null,
+      label: null
+    } : null,
+    hierarchy: _banner.HIERARCHY.high,
+    overrides: systemBannerOverrides
+  }, artworkIcon ? {
+    artwork: {
+      icon: artworkIcon,
+      type: _banner.ARTWORK_TYPE.icon
+    }
+  } : {}, restProps));
+}

package/system-banner/types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { ArtworkIcon, BannerProps, BannerOverrides } from '../banner';
+export type SystemBannerOverrides = BannerOverrides;
+export type SystemBannerProps = Omit<BannerProps, 'artwork' | 'hierarchy' | 'action'> & {
+    artworkIcon?: ArtworkIcon;
+    primaryAction?: {
+        icon?: ArtworkIcon;
+        onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
+        label: string;
+    };
+    secondaryAction?: {
+        icon?: ArtworkIcon;
+        onClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
+        label: string;
+    };
+    overrides?: SystemBannerOverrides;
+};

package/system-banner/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/table/styled-components.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTable: import("styletron-react").StyletronComponent<"div", {}>;
-declare type HorizontalStyleProps = {
+type HorizontalStyleProps = {
     $width?: string;
     $cursor?: string;
 };
@@ -8,7 +8,7 @@ export declare const StyledHeadCell: import("styletron-react").StyletronComponen
 export declare const StyledSortableLabel: import("styletron-react").StyletronComponent<"button", {}>;
 export declare const StyledBody: import("styletron-react").StyletronComponent<"div", HorizontalStyleProps>;
 export declare const StyledRow: import("styletron-react").StyletronComponent<"div", {}>;
-declare type CellStyledProps = {
+type CellStyledProps = {
     $striped?: boolean;
 };
 export declare const StyledCell: import("styletron-react").StyletronComponent<"div", CellStyledProps>;

package/table/styled-components.js

@@ -156,6 +156,7 @@ var StyledRow = (0, _styles.withWrapper)(StyledRowElement, function (StyledCompo
   };
 });
 exports.StyledRow = StyledRow;
+// @ts-ignore
 var StyledCellElement = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme,
       $striped = _ref6.$striped;

package/table/table.js

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

package/table/types.d.ts

@@ -1,12 +1,12 @@
 import type * as React from 'react';
 import type { SORT_DIRECTION } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type SortDirection = keyof typeof SORT_DIRECTION | undefined | null;
-export declare type HeadCellOverrides = {
+export type SortDirection = keyof typeof SORT_DIRECTION | undefined | null;
+export type HeadCellOverrides = {
     HeadCell?: Override;
     SortableLabel?: Override;
 };
-export declare type HeadCellProps = {
+export type HeadCellProps = {
     /** Aria label applied to the sort button. */
     ariaLabel?: string;
     'aria-label'?: string;
@@ -24,7 +24,7 @@ export declare type HeadCellProps = {
     /** FillClickTarget enable click to sort on whitespace in a header cell. */
     fillClickTarget?: boolean;
 };
-export declare type TableProps = {
+export type TableProps = {
     /** Table columns. Data passed to each header cell. */
     columns: Array<string | React.ReactNode>;
     /** Table rows. Data passed to each row and cell */
@@ -34,13 +34,13 @@ export declare type TableProps = {
     /** Renders the table in a loading state. Not implemented, yet. */
     isLoading?: boolean;
 };
-export declare type FilterOverrides = {
+export type FilterOverrides = {
     MenuButton?: Override;
     Content?: Override;
     Heading?: Override;
     Footer?: Override;
 };
-export declare type FilterProps = {
+export type FilterProps = {
     /** Displays the filter icon in an active state. */
     active?: boolean;
     /** Arbitrary content to display in the filter popover. You will likely want to add checkboxes

package/table-semantic/styled-components.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 import type { Size, Divider } from './types';
-declare type StyledRootProps = {
+type StyledRootProps = {
     $divider?: Divider;
 };
 export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", StyledRootProps>;
-declare type StyledTableProps = {
+type StyledTableProps = {
     $width?: string | null;
 };
 export declare const StyledTable: import("styletron-react").StyletronComponent<"table", StyledTableProps>;
 export declare const StyledTableHead: import("styletron-react").StyletronComponent<"thead", {}>;
 export declare const StyledTableHeadRow: import("styletron-react").StyletronComponent<"tr", {}>;
-declare type StyledTableHeadCellProps = {
+type StyledTableHeadCellProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;
@@ -44,13 +44,13 @@ export declare const StyledSortNoneIcon: import("styletron-react").StyletronComp
     overrides?: import("../icon").IconOverrides;
 } & import("../icon").StyledComponentArgs & import("react").RefAttributes<SVGSVGElement>>, {}>;
 export declare const StyledTableBody: import("styletron-react").StyletronComponent<"tbody", {}>;
-declare type StyledTableBodyRowProps = {
+type StyledTableBodyRowProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;
 };
 export declare const StyledTableBodyRow: import("styletron-react").StyletronComponent<"tr", StyledTableBodyRowProps>;
-declare type StyledTableBodyCellProps = {
+type StyledTableBodyCellProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;

package/table-semantic/styled-components.js

@@ -23,6 +23,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 function sizeToCellPadding($theme, $size) {
   if ($size === _constants.SIZE.compact) {
     return $theme.sizing.scale500;
@@ -55,6 +56,7 @@ exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 var StyledTable = (0, _styles.styled)('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
@@ -89,8 +91,7 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider,
-      $isNumeric = _ref5.$isNumeric;
+      $divider = _ref5.$divider;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -103,7 +104,7 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
     whiteSpace: 'nowrap',
     zIndex: 1
   }, $divider === _constants.DIVIDER.clean ? {} : {
@@ -122,7 +123,6 @@ var StyledTableHeadCellSortable = (0, _styles.withStyle)(StyledTableHeadCell, fu
       $isFocusVisible = _ref6.$isFocusVisible;
   return {
     cursor: 'pointer',
-    paddingRight: $theme.sizing.scale1000,
     outline: 'none',
     ':focus': {
       outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
@@ -206,22 +206,22 @@ var StyledTableBodyRow = (0, _styles.styled)('tr', function (_ref12) {
 exports.StyledTableBodyRow = StyledTableBodyRow;
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
 StyledTableBodyRow.displayName = 'StyledTableBodyRow';
-var StyledTableBodyCell = (0, _styles.styled)('td', function (_ref13) {
+var StyledTableBodyCell = (0, _styles.styled)('td', // @ts-ignore
+function (_ref13) {
   var _notLastChild2;
 
   var $theme = _ref13.$theme,
       $size = _ref13.$size,
       $divider = _ref13.$divider,
       $isNumeric = _ref13.$isNumeric,
-      $isLastRow = _ref13.$isLastRow,
-      $isSortable = _ref13.$isSortable;
+      $isLastRow = _ref13.$isLastRow;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
+    paddingRight: padding,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

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

@@ -81,7 +81,7 @@ type StyledTableHeadCellPropsT = {
 
 export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
   'th',
-  ({ $theme, $size, $divider, $isNumeric }) => {
+  ({ $theme, $size, $divider }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
     const padding = sizeToCellPadding($theme, $size);
@@ -96,7 +96,7 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
       paddingLeft: padding,
       backgroundColor: $theme.colors.tableHeadBackgroundColor,
       color: $theme.colors.contentPrimary,
-      textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
+      textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
       verticalAlign: 'top',
       whiteSpace: 'nowrap',
       zIndex: 1,
@@ -128,7 +128,6 @@ export const StyledTableHeadCellSortable = withStyle<
 >(StyledTableHeadCell, ({ $theme, $isFocusVisible }) => {
   return {
     cursor: 'pointer',
-    paddingRight: $theme.sizing.scale1000,
     outline: 'none',
     ':focus': {
       outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
@@ -211,7 +210,7 @@ type StyledTableBodyCellPropsT = {
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({ $theme, $size, $divider, $isNumeric, $isLastRow, $isSortable }) => {
+  ({ $theme, $size, $divider, $isNumeric, $isLastRow }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
     const borderHorizontal =
@@ -221,7 +220,7 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
     return {
       ...$theme.typography.font200,
       paddingTop: padding,
-      paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
+      paddingRight: padding,
       paddingBottom: padding,
       paddingLeft: padding,
       color: $theme.colors.contentPrimary,

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