baseui 10.9.2 → 10.11.1

package/table/types.js.flow

@@ -8,14 +8,15 @@ 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>;
 
 export type HeadCellPropsT = {|
   /** Aria label applied to the sort button. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Additional content to fill head cell. Most likely used for a filter button. */
   children?: React.Node,
   /** Visually indicates sort direction. Displays a chevron next to column title. */

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 =>
+  (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,17 +56,15 @@ export const StyledHeadCell = withStyle<
 
 export const StyledBodyCell = withStyle<
   typeof FlexStyledBodyCell,
-  {$gridColumn?: string, $gridRow?: string, $isFocusVisible?: boolean},
->(FlexStyledBodyCell, props => {
+  { $gridColumn?: string, $gridRow?: string, $isFocusVisible?: boolean }
+>(FlexStyledBodyCell, (props) => {
   return {
     display: 'block',
     flex: 'unset',
     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',
     },
   };

package/table-semantic/index.js.flow

@@ -5,10 +5,10 @@ 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 Table} from './table.js';
-export {default as TableBuilder} from './table-builder.js';
-export {default as TableBuilderColumn} from './table-builder-column.js';
-export {DIVIDER, SIZE} from './constants.js';
+export { default as Table } from './table.js';
+export { default as TableBuilder } from './table-builder.js';
+export { default as TableBuilderColumn } from './table-builder-column.js';
+export { DIVIDER, SIZE } from './constants.js';
 // Styled elements
 export {
   StyledRoot,

package/table-semantic/styled-components.js

@@ -36,7 +36,8 @@ function sizeToCellPadding($theme, $size) {
 var StyledRoot = (0, _index.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
       $divider = _ref.$divider;
-  return _objectSpread(_objectSpread(_objectSpread({}, $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical ? (0, _index.expandBorderStyles)($theme.borders.border300) : {}), $divider === _constants.DIVIDER.horizontal ? {
+  var borderStyles = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical ? (0, _index.expandBorderStyles)($theme.borders.border300) : {};
+  return _objectSpread(_objectSpread(_objectSpread({}, borderStyles), $divider === _constants.DIVIDER.horizontal ? {
     borderBottomWidth: $theme.borders.border300.borderWidth,
     borderBottomStyle: $theme.borders.border300.borderStyle,
     borderBottomColor: $theme.borders.border300.borderColor

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

@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
 import Blank from '../icon/blank.js';
 import ChevronDown from '../icon/chevron-down.js';
 import ChevronUp from '../icon/chevron-up.js';
-import {styled, withStyle, expandBorderStyles} from '../styles/index.js';
-import {SIZE, DIVIDER} from './constants.js';
-import type {SizeT, DividerT} from './types.js';
+import { styled, withStyle, expandBorderStyles } from '../styles/index.js';
+import { SIZE, DIVIDER } from './constants.js';
+import type { SizeT, DividerT } from './types.js';
 
 function sizeToCellPadding($theme, $size) {
   if ($size === SIZE.compact) {
@@ -25,52 +25,49 @@ type StyledRootPropsT = {
   $divider?: DividerT,
 };
 
-export const StyledRoot = styled<StyledRootPropsT>(
-  'div',
-  ({$theme, $divider}) => {
-    return {
-      ...($divider === DIVIDER.grid || $divider === DIVIDER.vertical
-        ? expandBorderStyles($theme.borders.border300)
-        : {}),
-      ...($divider === DIVIDER.horizontal
-        ? {
-            borderBottomWidth: $theme.borders.border300.borderWidth,
-            borderBottomStyle: $theme.borders.border300.borderStyle,
-            borderBottomColor: $theme.borders.border300.borderColor,
-          }
-        : {}),
-      position: 'relative',
-      overflow: 'auto',
-      WebkitOverflowScrolling: 'touch',
-      backgroundColor: $theme.colors.tableBackground,
-      // Creates a stacking context so we can use z-index on the StyledTableHeadCell
-      // without affecting anything outside of this component.
-      transform: 'scale(1)',
-    };
-  },
-);
+export const StyledRoot = styled<StyledRootPropsT>('div', ({ $theme, $divider }) => {
+  const borderStyles: {} =
+    $divider === DIVIDER.grid || $divider === DIVIDER.vertical
+      ? expandBorderStyles($theme.borders.border300)
+      : {};
+  return {
+    ...borderStyles,
+    ...($divider === DIVIDER.horizontal
+      ? {
+          borderBottomWidth: $theme.borders.border300.borderWidth,
+          borderBottomStyle: $theme.borders.border300.borderStyle,
+          borderBottomColor: $theme.borders.border300.borderColor,
+        }
+      : {}),
+
+    position: 'relative',
+    overflow: 'auto',
+    WebkitOverflowScrolling: 'touch',
+    backgroundColor: $theme.colors.tableBackground,
+    // Creates a stacking context so we can use z-index on the StyledTableHeadCell
+    // without affecting anything outside of this component.
+    transform: 'scale(1)',
+  };
+});
 
 type StyledTablePropsT = {
   $width?: ?string,
 };
 
-export const StyledTable = styled<StyledTablePropsT>(
-  'table',
-  ({$theme, $width}) => {
-    return {
-      borderSpacing: '0',
-      boxSizing: 'border-box',
-      minWidth: '100%',
-      width: $width || null,
-    };
-  },
-);
+export const StyledTable = styled<StyledTablePropsT>('table', ({ $theme, $width }) => {
+  return {
+    borderSpacing: '0',
+    boxSizing: 'border-box',
+    minWidth: '100%',
+    width: $width || null,
+  };
+});
 
-export const StyledTableHead = styled<{}>('thead', ({$theme}) => {
+export const StyledTableHead = styled<{}>('thead', ({ $theme }) => {
   return {};
 });
 
-export const StyledTableHeadRow = styled<{}>('tr', ({$theme}) => {
+export const StyledTableHeadRow = styled<{}>('tr', ({ $theme }) => {
   return {};
 });
 
@@ -84,10 +81,9 @@ type StyledTableHeadCellPropsT = {
 
 export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
   'th',
-  ({$theme, $size, $divider, $isNumeric}) => {
+  ({ $theme, $size, $divider, $isNumeric }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
-    const borderVertical =
-      $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
+    const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
     const padding = sizeToCellPadding($theme, $size);
 
     return {
@@ -113,18 +109,12 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
             borderBottomWidth: $theme.borders.border300.borderWidth,
           }),
       ':not(:last-child)': {
-        [`border${borderDir}Color`]: borderVertical
-          ? $theme.borders.border300.borderColor
-          : null,
-        [`border${borderDir}Style`]: borderVertical
-          ? $theme.borders.border300.borderStyle
-          : null,
-        [`border${borderDir}Width`]: borderVertical
-          ? $theme.borders.border300.borderWidth
-          : null,
+        [`border${borderDir}Color`]: borderVertical ? $theme.borders.border300.borderColor : null,
+        [`border${borderDir}Style`]: borderVertical ? $theme.borders.border300.borderStyle : null,
+        [`border${borderDir}Width`]: borderVertical ? $theme.borders.border300.borderWidth : null,
       },
     };
-  },
+  }
 );
 
 type StyledTableHeadCellSortablePropsT = {
@@ -134,8 +124,8 @@ type StyledTableHeadCellSortablePropsT = {
 
 export const StyledTableHeadCellSortable = withStyle<
   typeof StyledTableHeadCell,
-  StyledTableHeadCellSortablePropsT,
->(StyledTableHeadCell, ({$theme, $isFocusVisible}) => {
+  StyledTableHeadCellSortablePropsT
+>(StyledTableHeadCell, ({ $theme, $isFocusVisible }) => {
   return {
     cursor: 'pointer',
     paddingRight: $theme.sizing.scale1000,
@@ -150,43 +140,34 @@ export const StyledTableHeadCellSortable = withStyle<
   };
 });
 
-export const StyledSortAscIcon = styled<typeof ChevronUp, {}>(
-  ChevronUp,
-  ({$theme}) => {
-    return {
-      position: 'absolute',
-      top: '50%',
-      right: $theme.sizing.scale500,
-      transform: 'translateY(-50%)',
-    };
-  },
-);
+export const StyledSortAscIcon = styled<typeof ChevronUp, {}>(ChevronUp, ({ $theme }) => {
+  return {
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)',
+  };
+});
 
-export const StyledSortDescIcon = styled<typeof ChevronDown, {}>(
-  ChevronDown,
-  ({$theme}) => {
-    return {
-      position: 'absolute',
-      top: '50%',
-      right: $theme.sizing.scale500,
-      transform: 'translateY(-50%)',
-    };
-  },
-);
+export const StyledSortDescIcon = styled<typeof ChevronDown, {}>(ChevronDown, ({ $theme }) => {
+  return {
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)',
+  };
+});
 
-export const StyledSortNoneIcon = styled<typeof Blank, {}>(
-  Blank,
-  ({$theme}) => {
-    return {
-      position: 'absolute',
-      top: '50%',
-      right: $theme.sizing.scale500,
-      transform: 'translateY(-50%)',
-    };
-  },
-);
+export const StyledSortNoneIcon = styled<typeof Blank, {}>(Blank, ({ $theme }) => {
+  return {
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)',
+  };
+});
 
-export const StyledTableBody = styled<{}>('tbody', ({$theme}) => {
+export const StyledTableBody = styled<{}>('tbody', ({ $theme }) => {
   return {};
 });
 
@@ -196,16 +177,13 @@ type StyledTableBodyRowPropsT = {
   $divider?: DividerT,
 };
 
-export const StyledTableBodyRow = styled<StyledTableBodyRowPropsT>(
-  'tr',
-  ({$theme}) => {
-    return {
-      ':hover': {
-        backgroundColor: $theme.colors.tableStripedBackground,
-      },
-    };
-  },
-);
+export const StyledTableBodyRow = styled<StyledTableBodyRowPropsT>('tr', ({ $theme }) => {
+  return {
+    ':hover': {
+      backgroundColor: $theme.colors.tableStripedBackground,
+    },
+  };
+});
 
 type StyledTableBodyCellPropsT = {
   $col?: {},
@@ -221,14 +199,11 @@ type StyledTableBodyCellPropsT = {
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({$theme, $size, $divider, $isNumeric, $isLastRow, $isSortable}) => {
+  ({ $theme, $size, $divider, $isNumeric, $isLastRow, $isSortable }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
-    const borderVertical =
-      $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
+    const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
     const borderHorizontal =
-      $divider === undefined ||
-      $divider === DIVIDER.horizontal ||
-      $divider === DIVIDER.grid;
+      $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
     const padding = sizeToCellPadding($theme, $size);
 
     return {
@@ -241,33 +216,21 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
       textAlign: $isNumeric ? 'right' : null,
       verticalAlign: 'top',
       borderBottomColor:
-        !$isLastRow && borderHorizontal
-          ? $theme.borders.border300.borderColor
-          : null,
+        !$isLastRow && borderHorizontal ? $theme.borders.border300.borderColor : null,
       borderBottomStyle:
-        !$isLastRow && borderHorizontal
-          ? $theme.borders.border300.borderStyle
-          : null,
+        !$isLastRow && borderHorizontal ? $theme.borders.border300.borderStyle : null,
       borderBottomWidth:
-        !$isLastRow && borderHorizontal
-          ? $theme.borders.border300.borderWidth
-          : null,
+        !$isLastRow && borderHorizontal ? $theme.borders.border300.borderWidth : null,
       ':not(:last-child)': {
-        [`border${borderDir}Color`]: borderVertical
-          ? $theme.borders.border300.borderColor
-          : null,
-        [`border${borderDir}Style`]: borderVertical
-          ? $theme.borders.border300.borderStyle
-          : null,
-        [`border${borderDir}Width`]: borderVertical
-          ? $theme.borders.border300.borderWidth
-          : null,
+        [`border${borderDir}Color`]: borderVertical ? $theme.borders.border300.borderColor : null,
+        [`border${borderDir}Style`]: borderVertical ? $theme.borders.border300.borderStyle : null,
+        [`border${borderDir}Width`]: borderVertical ? $theme.borders.border300.borderWidth : null,
       },
     };
-  },
+  }
 );
 
-export const StyledTableLoadingMessage = styled<{}>('div', ({$theme}) => {
+export const StyledTableLoadingMessage = styled<{}>('div', ({ $theme }) => {
   return {
     ...$theme.typography.ParagraphSmall,
     color: $theme.colors.contentPrimary,

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

@@ -7,11 +7,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import type {TableBuilderColumnPropsT} from './types.js';
+import type { TableBuilderColumnPropsT } from './types.js';
 
-export default class TableBuilderColumn<T> extends React.Component<
-  TableBuilderColumnPropsT<T>,
-> {
+export default class TableBuilderColumn<T> extends React.Component<TableBuilderColumnPropsT<T>> {
   // Renderless component. See TableBuilder.
 }