baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

package/styles/styled.js.flow

@@ -12,11 +12,11 @@ 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) => {
   // eslint-disable-next-line react/display-name
@@ -29,44 +29,38 @@ const wrapper = (StyledComponent) => {
 
 /* eslint-disable flowtype/generic-spacing */
 /* flowlint unclear-type:off */
-export type StyletronComponent<Props> =
-  React.StatelessFunctionalComponent<Props> & {
-    __STYLETRON__: any,
-  };
+export type StyletronComponent<Props> = React.StatelessFunctionalComponent<Props> & {
+  __STYLETRON__: any,
+};
 
 type StyleFn<Theme> = {
   (string): StyletronComponent<{}>,
 
   (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 */
@@ -108,22 +102,19 @@ export function withWrapper(
   StyledElement: StyletronComponent<any>,
   wrapperFn: (
     // flowlint-next-line unclear-type:off
-    StyletronComponent<any>,
+    StyletronComponent<any>
     // flowlint-next-line unclear-type:off
-  ) => (any) => any,
+  ) => (any) => any
 ) {
   // 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>
-      ));
-    },
-  );
+  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,18 +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,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {BorderT, Globals, LineStyle} 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;
@@ -17,7 +17,7 @@ export function hexToRgb(hex: string = '', alpha: string = '1') {
   return result
     ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
         result[3],
-        16,
+        16
       )}, ${alpha})`
     : null;
 }

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.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.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 = () => {

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,
@@ -28,10 +28,8 @@ export const StyledTable = withWrapper(
   StyledTableElement,
   (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) =>
     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) =>
     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',
@@ -130,7 +121,7 @@ export const StyledBody = withWrapper(
   (StyledComponent) =>
     function StyledBody(props) {
       return <StyledComponent role="rowgroup" {...props} />;
-    },
+    }
 );
 
 const StyledRowElement = styled('div', {
@@ -143,34 +134,31 @@ export const StyledRow = withWrapper(
   (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) =>
     function StyledCell(props) {
       return <StyledComponent role="gridcell" {...props} />;
-    },
+    }
 );
 
 export const StyledFilterButton = styled<{
@@ -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 = {

package/table/types.js.flow

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {SORT_DIRECTION} from './constants.js';
-import type {OverrideT} from '../helpers/overrides.js';
+import { SORT_DIRECTION } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type SortDirectionT = ?$Keys<typeof SORT_DIRECTION>;
 

package/table-grid/index.js.flow

@@ -6,14 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {SORT_DIRECTION} from '../table/index.js';
+export { SORT_DIRECTION } from '../table/index.js';
 
-export {
-  StyledTable,
-  StyledHeadCell,
-  StyledBodyCell,
-} from './styled-components.js';
-export {SortableHeadCell} from './sortable-head-cell.js';
+export { StyledTable, StyledHeadCell, StyledBodyCell } from './styled-components.js';
+export { SortableHeadCell } from './sortable-head-cell.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

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

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SortableHeadCellFactory} from '../table/index.js';
-import {StyledHeadCell} from './styled-components.js';
+import { SortableHeadCellFactory } from '../table/index.js';
+import { StyledHeadCell } from './styled-components.js';
 
 export const SortableHeadCell = SortableHeadCellFactory(StyledHeadCell);
 

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

@@ -7,39 +7,39 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {withStyle, withWrapper} from '../styles/index.js';
+import { withStyle, withWrapper } from '../styles/index.js';
 import {
   StyledTable as FlexStyledTable,
   StyledHeadCell as FlexStyledHeadCell,
   StyledCell as FlexStyledBodyCell,
 } from '../table/index.js';
 
-const StyledTableElement = withStyle<
-  typeof FlexStyledTable,
-  {$gridTemplateColumns: string},
->(FlexStyledTable, (props) => {
-  return {
-    display: 'grid',
-    gridTemplateColumns: props.$gridTemplateColumns,
-    flexDirection: 'unset',
-    // Creates a stacking context so we can use z-index on the StyledHeadCell
-    // without affecting anything outside of this component.
-    transform: 'scale(1)',
-  };
-});
+const StyledTableElement = withStyle<typeof FlexStyledTable, { $gridTemplateColumns: string }>(
+  FlexStyledTable,
+  (props) => {
+    return {
+      display: 'grid',
+      gridTemplateColumns: props.$gridTemplateColumns,
+      flexDirection: 'unset',
+      // Creates a stacking context so we can use z-index on the StyledHeadCell
+      // without affecting anything outside of this component.
+      transform: 'scale(1)',
+    };
+  }
+);
 
 export const StyledTable = withWrapper(
   StyledTableElement,
   (StyledComponent) =>
     function StyledTable(props) {
       return <StyledComponent data-baseweb="table-grid" {...props} />;
-    },
+    }
 );
 
 export const StyledHeadCell = withStyle<
   typeof FlexStyledHeadCell,
-  {$sticky?: boolean, $isFocusVisible?: boolean},
->(FlexStyledHeadCell, ({$sticky = true, $isFocusVisible, $theme}) => {
+  { $sticky?: boolean, $isFocusVisible?: boolean }
+>(FlexStyledHeadCell, ({ $sticky = true, $isFocusVisible, $theme }) => {
   return {
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     boxShadow: $theme.lighting.shadow400,
@@ -56,7 +56,7 @@ export const StyledHeadCell = withStyle<
 
 export const StyledBodyCell = withStyle<
   typeof FlexStyledBodyCell,
-  {$gridColumn?: string, $gridRow?: string, $isFocusVisible?: boolean},
+  { $gridColumn?: string, $gridRow?: string, $isFocusVisible?: boolean }
 >(FlexStyledBodyCell, (props) => {
   return {
     display: 'block',
@@ -64,9 +64,7 @@ export const StyledBodyCell = withStyle<
     gridColumn: props.$gridColumn || null,
     gridRow: props.$gridRow || null,
     ':focus': {
-      outline: props.$isFocusVisible
-        ? `3px solid ${props.$theme.colors.accent}`
-        : 'none',
+      outline: props.$isFocusVisible ? `3px solid ${props.$theme.colors.accent}` : 'none',
       outlineOffset: '-3px',
     },
   };