baseui 10.9.2 → 10.11.1

package/styles/styled.js.flow

@@ -12,25 +12,24 @@ import {
   useStyletron as styletronUseStyletron,
   withWrapper as styletronWithWrapper,
 } from 'styletron-react';
-import {driver, getInitialStyle} from 'styletron-standard';
-import type {StyleObject} from 'styletron-standard';
-import type {ThemeT} from './types.js';
+import { driver, getInitialStyle } from 'styletron-standard';
+import type { StyleObject } from 'styletron-standard';
+import type { ThemeT } from './types.js';
 
-import {ThemeContext} from './theme-provider.js';
+import { ThemeContext } from './theme-provider.js';
 
-const wrapper = StyledComponent => {
+const wrapper = (StyledComponent) => {
+  // eslint-disable-next-line react/display-name
   return React.forwardRef((props, ref) => (
     <ThemeContext.Consumer>
-      {theme => <StyledComponent ref={ref} {...props} $theme={theme} />}
+      {(theme) => <StyledComponent ref={ref} {...props} $theme={theme} />}
     </ThemeContext.Consumer>
   ));
 };
 
 /* eslint-disable flowtype/generic-spacing */
-/* eslint-disable flowtype/no-weak-types */
-export type StyletronComponent<
-  Props,
-> = React.StatelessFunctionalComponent<Props> & {
+/* flowlint unclear-type:off */
+export type StyletronComponent<Props> = React.StatelessFunctionalComponent<Props> & {
   __STYLETRON__: any,
 };
 
@@ -39,52 +38,47 @@ type StyleFn<Theme> = {
 
   (string, StyleObject): StyletronComponent<{}>,
 
-  <Props>(
-    string,
-    ({$theme: Theme} & Props) => StyleObject,
-  ): StyletronComponent<Props>,
+  <Props>(string, ({ $theme: Theme } & Props) => StyleObject): StyletronComponent<Props>,
 
   <Base: React.ComponentType<any>>(
     Base,
-    StyleObject,
-  ): StyletronComponent<$Diff<React.ElementConfig<Base>, {className: any}>>,
+    StyleObject
+  ): StyletronComponent<$Diff<React.ElementConfig<Base>, { className: any }>>,
 
   <Base: React.ComponentType<any>, Props>(
     Base,
-    ({$theme: Theme} & Props) => StyleObject,
-  ): StyletronComponent<
-    $Diff<React.ElementConfig<Base>, {className: any}> & Props,
-  >,
+    ({ $theme: Theme } & Props) => StyleObject
+  ): StyletronComponent<$Diff<React.ElementConfig<Base>, { className: any }> & Props>,
 };
 
 type ExtractPropTypes = <T>(StyletronComponent<T>) => T;
 type WithStyleFn<Theme> = {
   <Base: StyletronComponent<any>, Props>(
     Base,
-    (Props & {$theme: Theme}) => StyleObject,
+    (Props & { $theme: Theme }) => StyleObject
   ): StyletronComponent<$Call<ExtractPropTypes, Base> & Props>,
 
   <Base: StyletronComponent<any>>(
     Base,
-    StyleObject,
+    StyleObject
   ): StyletronComponent<$Call<ExtractPropTypes, Base>>,
 };
 /* eslint-enable flowtype/generic-spacing */
-/* eslint-enable flowtype/no-weak-types */
+/* flowlint unclear-type:error */
 
 export function createThemedStyled<Theme>(): StyleFn<Theme> {
   return ((createStyled({
     wrapper,
     getInitialStyle,
     driver,
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
   }): any): StyleFn<Theme>);
 }
 
 export const styled = createThemedStyled<ThemeT>();
 
 export function createThemedWithStyle<Theme>(): WithStyleFn<Theme> {
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   return ((styletronWithStyle: any): WithStyleFn<Theme>);
 }
 
@@ -93,8 +87,8 @@ export const withStyle = createThemedWithStyle<ThemeT>();
 type UseStyletronFn<Theme> = () => [(StyleObject) => string, Theme];
 
 export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme> {
-  return function() {
-    // eslint-disable-next-line flowtype/no-weak-types
+  return function () {
+    // flowlint-next-line unclear-type:off
     const theme = ((React.useContext(ThemeContext): any): Theme);
     const [css] = styletronUseStyletron();
     return [css, theme];
@@ -104,25 +98,23 @@ export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme> {
 export const useStyletron = createThemedUseStyletron<ThemeT>();
 
 export function withWrapper(
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   StyledElement: StyletronComponent<any>,
   wrapperFn: (
-    // eslint-disable-next-line flowtype/no-weak-types
-    StyletronComponent<any>,
-    // eslint-disable-next-line flowtype/no-weak-types
-  ) => any => any,
+    // flowlint-next-line unclear-type:off
+    StyletronComponent<any>
+    // flowlint-next-line unclear-type:off
+  ) => (any) => any
 ) {
-  // eslint-disable-next-line flowtype/no-weak-types
-  return styletronWithWrapper<StyletronComponent<any>, any>(
-    StyledElement,
-    Styled => {
-      return React.forwardRef((props, ref) => (
-        <ThemeContext.Consumer>
-          {theme => wrapperFn(Styled)({ref: ref, ...props, $theme: theme})}
-        </ThemeContext.Consumer>
-      ));
-    },
-  );
+  // flowlint-next-line unclear-type:off
+  return styletronWithWrapper<StyletronComponent<any>, any>(StyledElement, (Styled) => {
+    // eslint-disable-next-line react/display-name
+    return React.forwardRef((props, ref) => (
+      <ThemeContext.Consumer>
+        {(theme) => wrapperFn(Styled)({ ref: ref, ...props, $theme: theme })}
+      </ThemeContext.Consumer>
+    ));
+  });
 }
 
 declare var __DEV__: boolean;

package/styles/theme-provider.js.flow

@@ -6,19 +6,15 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {LightTheme} from '../themes/index.js';
+import { LightTheme } from '../themes/index.js';
 
-import type {ThemeT} from './types.js';
+import type { ThemeT } from './types.js';
 
-export const ThemeContext: React.Context<ThemeT> = React.createContext(
-  LightTheme,
-);
+export const ThemeContext: React.Context<ThemeT> = React.createContext(LightTheme);
 
-const ThemeProvider = (props: {theme: ThemeT, children: ?React.Node}) => {
-  const {theme, children} = props;
-  return (
-    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
-  );
+const ThemeProvider = (props: { theme: ThemeT, children: ?React.Node }) => {
+  const { theme, children } = props;
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 };
 
 export default ThemeProvider;

package/styles/types.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {ComponentType} from 'react';
-import type {IconPropsT} from '../icon/types.js';
+import type { ComponentType } from 'react';
+import type { IconPropsT } from '../icon/types.js';
 
 import type {
   ColorTokensT,

package/styles/util.js.flow

@@ -6,18 +6,18 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {BorderT} from '../themes/types.js';
+import type { BorderT, Globals, LineStyle } from '../themes/types.js';
 
 export function hexToRgb(hex: string = '', alpha: string = '1') {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
     return r + r + g + g + b + b;
   });
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
         result[3],
-        16,
+        16
       )}, ${alpha})`
     : null;
 }
@@ -29,7 +29,20 @@ export const ellipsisText = {
   wordWrap: 'normal',
 };
 
-export function expandBorderStyles(borderStyles: BorderT) {
+export function expandBorderStyles(borderStyles: BorderT): {|
+  borderTopStyle: Globals | LineStyle,
+  borderTopWidth: string,
+  borderTopColor: string,
+  borderBottomWidth: string,
+  borderBottomStyle: Globals | LineStyle,
+  borderBottomColor: string,
+  borderLeftWidth: string,
+  borderLeftStyle: Globals | LineStyle,
+  borderLeftColor: string,
+  borderRightWidth: string,
+  borderRightStyle: Globals | LineStyle,
+  borderRightColor: string,
+|} {
   return {
     borderTopWidth: borderStyles.borderWidth,
     borderTopStyle: borderStyles.borderStyle,

package/table/filter.js.flow

@@ -9,10 +9,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 
-import {Button, KIND, SIZE} from '../button/index.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { Button, KIND, SIZE } from '../button/index.js';
+import { getOverrides } from '../helpers/overrides.js';
 import FilterIcon from '../icon/filter.js';
-import {StatefulPopover, PLACEMENT} from '../popover/index.js';
+import { StatefulPopover, PLACEMENT } from '../popover/index.js';
 
 import {
   StyledFilterButton,
@@ -20,30 +20,18 @@ import {
   StyledFilterHeading,
   StyledFilterFooter,
 } from './styled-components.js';
-import type {FilterProps} from './types.js';
+import type { FilterProps } from './types.js';
 
 export default function Filter(props: FilterProps) {
-  const {onSelectAll = () => {}, onReset = () => {}, overrides = {}} = props;
+  const { onSelectAll = () => {}, onReset = () => {}, overrides = {} } = props;
 
-  const [MenuButton, menuButtonProps] = getOverrides(
-    overrides.MenuButton,
-    StyledFilterButton,
-  );
+  const [MenuButton, menuButtonProps] = getOverrides(overrides.MenuButton, StyledFilterButton);
 
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledFilterContent,
-  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledFilterContent);
 
-  const [Heading, headingProps] = getOverrides(
-    overrides.Heading,
-    StyledFilterHeading,
-  );
+  const [Heading, headingProps] = getOverrides(overrides.Heading, StyledFilterHeading);
 
-  const [Footer, footerProps] = getOverrides(
-    overrides.Footer,
-    StyledFilterFooter,
-  );
+  const [Footer, footerProps] = getOverrides(overrides.Footer, StyledFilterFooter);
 
   return (
     <StatefulPopover
@@ -52,11 +40,11 @@ export default function Filter(props: FilterProps) {
       placement={PLACEMENT.bottom}
       stateReducer={(_, nextState) => {
         if (props.disabled) {
-          return {...nextState, isOpen: false};
+          return { ...nextState, isOpen: false };
         }
         return nextState;
       }}
-      content={({close}) => (
+      content={({ close }) => (
         <FocusLock
           autoFocus={false}
           // Allow focus to escape when UI is within an iframe
@@ -95,11 +83,7 @@ export default function Filter(props: FilterProps) {
       )}
       returnFocus={props.returnFocus}
     >
-      <MenuButton
-        $active={props.active}
-        $disabled={props.disabled}
-        {...menuButtonProps}
-      >
+      <MenuButton $active={props.active} $disabled={props.disabled} {...menuButtonProps}>
         <FilterIcon size={18} />
       </MenuButton>
     </StatefulPopover>

package/table/index.d.ts

@@ -14,6 +14,7 @@ export interface SortableHeadCellOverrides {
 
 export interface SortableHeadCellProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children?: React.ReactNode;
   direction: 'ASC' | 'DESC' | null;
   disabled?: boolean;

package/table/index.js.flow

@@ -5,14 +5,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {
-  default as SortableHeadCell,
-  SortableHeadCellFactory,
-} from './sortable-head-cell.js';
-export {default as Table} from './table.js';
-export {default as Filter} from './filter.js';
+export { default as SortableHeadCell, SortableHeadCellFactory } from './sortable-head-cell.js';
+export { default as Table } from './table.js';
+export { default as Filter } from './filter.js';
 // Constants
-export {SORT_DIRECTION} from './constants.js';
+export { SORT_DIRECTION } from './constants.js';
 // Styled elements
 export {
   StyledTable,

package/table/sortable-head-cell.js

@@ -81,7 +81,7 @@ var SortableHeadCellFactory = function SortableHeadCellFactory() {
     };
 
     var enableHeadClick = fillClickTarget && !disabled;
-    var ariaLabel = props.ariaLabel;
+    var ariaLabel = props['aria-label'] || props.ariaLabel;
 
     if (!ariaLabel) {
       if (typeof props.title === 'string') {

package/table/sortable-head-cell.js.flow

@@ -8,15 +8,15 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import TriangleUp from '../icon/triangle-up.js';
 import TriangleDown from '../icon/triangle-down.js';
 
-import {SORT_DIRECTION} from './constants.js';
-import {StyledHeadCell, StyledSortableLabel} from './styled-components.js';
-import type {SortDirectionT, HeadCellPropsT} from './types.js';
+import { SORT_DIRECTION } from './constants.js';
+import { StyledHeadCell, StyledSortableLabel } from './styled-components.js';
+import type { SortDirectionT, HeadCellPropsT } from './types.js';
 
-function SortDirectionIcon({direction}: {direction: SortDirectionT}) {
+function SortDirectionIcon({ direction }: { direction: SortDirectionT }) {
   switch (direction) {
     case SORT_DIRECTION.ASC:
       return <TriangleUp title="Sort ascending" />;
@@ -27,19 +27,16 @@ function SortDirectionIcon({direction}: {direction: SortDirectionT}) {
   }
 }
 export const SortableHeadCellFactory = (
-  CustomHeadCell: React.ComponentType<HeadCellPropsT> = StyledHeadCell,
+  CustomHeadCell: React.ComponentType<HeadCellPropsT> = StyledHeadCell
 ) => {
   return function SortableHeadCell(props: HeadCellPropsT) {
-    const {overrides = {}, fillClickTarget, disabled} = props;
+    const { overrides = {}, fillClickTarget, disabled } = props;
 
-    const [HeadCell, headCellProps] = getOverrides(
-      overrides.HeadCell,
-      CustomHeadCell,
-    );
+    const [HeadCell, headCellProps] = getOverrides(overrides.HeadCell, CustomHeadCell);
 
     const [SortableLabel, sortableLabelProps] = getOverrides(
       overrides.SortableLabel,
-      StyledSortableLabel,
+      StyledSortableLabel
     );
 
     const onClick = () => {
@@ -47,7 +44,7 @@ export const SortableHeadCellFactory = (
     };
     const enableHeadClick = fillClickTarget && !disabled;
 
-    let ariaLabel = props.ariaLabel;
+    let ariaLabel = props['aria-label'] || props.ariaLabel;
     if (!ariaLabel) {
       if (typeof props.title === 'string') {
         ariaLabel = `sorts table by ${props.title} column`;

package/table/styled-components.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {styled, withWrapper, expandBorderStyles} from '../styles/index.js';
+import { styled, withWrapper, expandBorderStyles } from '../styles/index.js';
 
-const StyledTableElement = styled<{}>('div', ({$theme}) => {
+const StyledTableElement = styled<{}>('div', ({ $theme }) => {
   return {
     ...expandBorderStyles($theme.borders.border300),
     backgroundColor: $theme.colors.tableBackground,
@@ -26,12 +26,10 @@ const StyledTableElement = styled<{}>('div', ({$theme}) => {
 
 export const StyledTable = withWrapper(
   StyledTableElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledTable(props) {
-      return (
-        <StyledComponent data-baseweb="table-custom" role="grid" {...props} />
-      );
-    },
+      return <StyledComponent data-baseweb="table-custom" role="grid" {...props} />;
+    }
 );
 
 type HorizontalStyleProps = {
@@ -39,63 +37,56 @@ type HorizontalStyleProps = {
   $cursor?: string,
 };
 
-const StyledHeadElement = styled<HorizontalStyleProps>(
-  'div',
-  ({$theme, $width}) => {
-    return {
-      backgroundColor: $theme.colors.tableHeadBackgroundColor,
-      boxShadow: $theme.lighting.shadow400,
-      display: 'flex',
-      flexGrow: 0,
-      width: $width ? $width : '100%',
-    };
-  },
-);
+const StyledHeadElement = styled<HorizontalStyleProps>('div', ({ $theme, $width }) => {
+  return {
+    backgroundColor: $theme.colors.tableHeadBackgroundColor,
+    boxShadow: $theme.lighting.shadow400,
+    display: 'flex',
+    flexGrow: 0,
+    width: $width ? $width : '100%',
+  };
+});
 
 export const StyledHead = withWrapper(
   StyledHeadElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledHead(props) {
       return <StyledComponent role="row" {...props} />;
-    },
+    }
 );
 
-const StyledHeadCellElement = styled<HorizontalStyleProps>(
-  'div',
-  ({$theme, $cursor}) => {
-    const borderDir: string =
-      $theme.direction === 'rtl' ? 'borderLeft' : 'borderRight';
-    return {
-      ...$theme.typography.font350,
-      ...expandBorderStyles($theme.borders.border300),
-      borderTopStyle: 'none',
-      borderBottomStyle: 'none',
-      borderLeftStyle: 'none',
-      color: $theme.colors.contentPrimary,
-      display: 'flex',
-      justifyContent: 'space-between',
-      paddingTop: $theme.sizing.scale500,
-      paddingRight: $theme.sizing.scale600,
-      paddingBottom: $theme.sizing.scale500,
-      paddingLeft: $theme.sizing.scale600,
-      cursor: $cursor ? $cursor : 'inherit',
-      width: '100%',
-      ':last-of-type': {
-        [borderDir]: 'none',
-      },
-    };
-  },
-);
+const StyledHeadCellElement = styled<HorizontalStyleProps>('div', ({ $theme, $cursor }) => {
+  const borderDir: string = $theme.direction === 'rtl' ? 'borderLeft' : 'borderRight';
+  return {
+    ...$theme.typography.font350,
+    ...expandBorderStyles($theme.borders.border300),
+    borderTopStyle: 'none',
+    borderBottomStyle: 'none',
+    borderLeftStyle: 'none',
+    color: $theme.colors.contentPrimary,
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingTop: $theme.sizing.scale500,
+    paddingRight: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale500,
+    paddingLeft: $theme.sizing.scale600,
+    cursor: $cursor ? $cursor : 'inherit',
+    width: '100%',
+    ':last-of-type': {
+      [borderDir]: 'none',
+    },
+  };
+});
 
 export const StyledHeadCell = withWrapper(
   StyledHeadCellElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledHeadCell(props) {
       return <StyledComponent role="columnheader" {...props} />;
-    },
+    }
 );
 
-export const StyledSortableLabel = styled<{}>('button', ({$theme}) => {
+export const StyledSortableLabel = styled<{}>('button', ({ $theme }) => {
   return {
     ...$theme.typography.font250,
     alignItems: 'center',
@@ -116,7 +107,7 @@ export const StyledSortableLabel = styled<{}>('button', ({$theme}) => {
   };
 });
 
-const StyledBodyElement = styled<HorizontalStyleProps>('div', ({$width}) => {
+const StyledBodyElement = styled<HorizontalStyleProps>('div', ({ $width }) => {
   return ({
     width: $width ? $width : '100%',
     overflowX: 'hidden',
@@ -127,10 +118,10 @@ const StyledBodyElement = styled<HorizontalStyleProps>('div', ({$width}) => {
 
 export const StyledBody = withWrapper(
   StyledBodyElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledBody(props) {
       return <StyledComponent role="rowgroup" {...props} />;
-    },
+    }
 );
 
 const StyledRowElement = styled('div', {
@@ -140,43 +131,40 @@ const StyledRowElement = styled('div', {
 
 export const StyledRow = withWrapper(
   StyledRowElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledRow(props) {
       return <StyledComponent role="row" {...props} />;
-    },
+    }
 );
 
-type CellStyledProps = {$striped?: boolean};
+type CellStyledProps = { $striped?: boolean };
 
-const StyledCellElement = styled<CellStyledProps>(
-  'div',
-  ({$theme, $striped}) => {
-    return {
-      ...$theme.typography.font200,
-      backgroundColor: $striped ? $theme.colors.tableStripedBackground : null,
-      color: $theme.colors.contentPrimary,
-      display: 'flex',
-      flex: 1,
-      paddingTop: $theme.sizing.scale300,
-      paddingRight: $theme.sizing.scale600,
-      paddingBottom: $theme.sizing.scale300,
-      paddingLeft: $theme.sizing.scale600,
-    };
-  },
-);
+const StyledCellElement = styled<CellStyledProps>('div', ({ $theme, $striped }) => {
+  return {
+    ...$theme.typography.font200,
+    backgroundColor: $striped ? $theme.colors.tableStripedBackground : null,
+    color: $theme.colors.contentPrimary,
+    display: 'flex',
+    flex: 1,
+    paddingTop: $theme.sizing.scale300,
+    paddingRight: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300,
+    paddingLeft: $theme.sizing.scale600,
+  };
+});
 
 export const StyledCell = withWrapper(
   StyledCellElement,
-  StyledComponent =>
+  (StyledComponent) =>
     function StyledCell(props) {
       return <StyledComponent role="gridcell" {...props} />;
-    },
+    }
 );
 
 export const StyledFilterButton = styled<{
   $disabled?: boolean,
   $active?: boolean,
-}>('button', props => {
+}>('button', (props) => {
   function getIconColor() {
     if (props.$disabled) {
       return props.$theme.colors.mono500;
@@ -215,7 +203,7 @@ export const StyledFilterButton = styled<{
   };
 });
 
-export const StyledFilterContent = styled<{}>('div', ({$theme}) => ({
+export const StyledFilterContent = styled<{}>('div', ({ $theme }) => ({
   ...expandBorderStyles($theme.borders.border300),
   backgroundColor: $theme.colors.tableFilterBackground,
   borderRightStyle: 'none',
@@ -226,7 +214,7 @@ export const StyledFilterContent = styled<{}>('div', ({$theme}) => ({
   overflow: 'auto',
 }));
 
-export const StyledFilterHeading = styled<{}>('div', ({$theme}) => ({
+export const StyledFilterHeading = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font250,
   color: $theme.colors.tableFilterHeading,
   paddingTop: $theme.sizing.scale500,
@@ -235,7 +223,7 @@ export const StyledFilterHeading = styled<{}>('div', ({$theme}) => ({
   paddingLeft: $theme.sizing.scale600,
 }));
 
-export const StyledFilterFooter = styled<{}>('div', ({$theme}) => ({
+export const StyledFilterFooter = styled<{}>('div', ({ $theme }) => ({
   backgroundColor: $theme.colors.tableFilterFooterBackground,
   paddingTop: $theme.sizing.scale300,
   paddingRight: $theme.sizing.scale100,
@@ -246,7 +234,7 @@ export const StyledFilterFooter = styled<{}>('div', ({$theme}) => ({
   minWidth: '216px',
 }));
 
-export const StyledAction = styled<{}>('button', ({$theme}) => {
+export const StyledAction = styled<{}>('button', ({ $theme }) => {
   return {
     backgroundColor: 'transparent',
     borderLeftStyle: 'none',

package/table/table.js.flow

@@ -17,9 +17,9 @@ import {
   StyledCell,
 } from './styled-components.js';
 
-import {ProgressBar} from '../progress-bar/index.js';
+import { ProgressBar } from '../progress-bar/index.js';
 
-import type {TablePropsT} from './types.js';
+import type { TablePropsT } from './types.js';
 
 export default class Table extends React.Component<TablePropsT> {
   static defaultProps = {