baseui 10.10.0 → 10.12.0

package/data-table/filter-shell.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button, SIZE as BUTTON_SIZE} from '../button/index.js';
-import {Checkbox, STYLE_TYPE} from '../checkbox/index.js';
-import {useStyletron} from '../styles/index.js';
-import {LocaleContext} from '../locale/index.js';
-import {FILTER_SHELL_WIDTH} from './constants.js';
+import { Button, SIZE as BUTTON_SIZE } from '../button/index.js';
+import { Checkbox, STYLE_TYPE } from '../checkbox/index.js';
+import { useStyletron } from '../styles/index.js';
+import { LocaleContext } from '../locale/index.js';
+import { FILTER_SHELL_WIDTH } from './constants.js';
 
 export type ExcludeKind = 'value' | 'range';
 
@@ -48,7 +48,7 @@ function FilterShell(props: PropsT) {
         paddingLeft: theme.sizing.scale600,
         width: FILTER_SHELL_WIDTH,
       })}
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
         props.onApply();
       }}

package/data-table/header-cell.js.flow

@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Checkbox} from '../checkbox/index.js';
-import {useStyletron} from '../styles/index.js';
+import { Checkbox } from '../checkbox/index.js';
+import { useStyletron } from '../styles/index.js';
 import ChevronDown from '../icon/chevron-down.js';
 import ChevronUp from '../icon/chevron-up.js';
 
-import {SORT_DIRECTIONS} from './constants.js';
-import type {SortDirectionsT} from './types.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { SORT_DIRECTIONS } from './constants.js';
+import type { SortDirectionsT } from './types.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
 type HeaderCellPropsT = {|
   index: number,
@@ -24,142 +24,132 @@ type HeaderCellPropsT = {|
   isSelectable: boolean,
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
-  onMouseEnter: number => void,
-  onMouseLeave: number => void,
+  onMouseEnter: (number) => void,
+  onMouseLeave: (number) => void,
   onSelectAll: () => void,
   onSelectNone: () => void,
-  onSort: number => void,
+  onSort: (number) => void,
   sortable: boolean,
   sortDirection: SortDirectionsT,
   title: string,
 |};
 
-const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>(
-  (props, ref) => {
-    const [css, theme] = useStyletron();
-    const [focusVisible, setFocusVisible] = React.useState(false);
-    const checkboxRef = React.useRef(null);
+const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>((props, ref) => {
+  const [css, theme] = useStyletron();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const checkboxRef = React.useRef(null);
 
-    const handleFocus = (event: SyntheticEvent<>) => {
-      if (isFocusVisible(event)) {
-        setFocusVisible(true);
-      }
-    };
+  const handleFocus = (event: SyntheticEvent<>) => {
+    if (isFocusVisible(event)) {
+      setFocusVisible(true);
+    }
+  };
 
-    const handleBlur = (event: SyntheticEvent<>) => {
-      if (focusVisible !== false) {
-        setFocusVisible(false);
-      }
-    };
+  const handleBlur = (event: SyntheticEvent<>) => {
+    if (focusVisible !== false) {
+      setFocusVisible(false);
+    }
+  };
 
-    const backgroundColor = props.isHovered
-      ? theme.colors.backgroundSecondary
-      : theme.colors.backgroundPrimary;
+  const backgroundColor = props.isHovered
+    ? theme.colors.backgroundSecondary
+    : theme.colors.backgroundPrimary;
 
-    return (
+  return (
+    <div
+      ref={ref}
+      role="button"
+      tabIndex="0"
+      className={css({
+        ...theme.typography.font350,
+        alignItems: 'center',
+        backgroundColor,
+        boxSizing: 'border-box',
+        color: theme.colors.contentPrimary,
+        cursor: props.sortable ? 'pointer' : null,
+        display: props.isMeasured ? 'inline-flex' : 'flex',
+        flexGrow: 1,
+        height: '100%',
+        paddingLeft: theme.sizing.scale500,
+        paddingRight: theme.sizing.scale500,
+        flexWrap: 'nowrap',
+        whiteSpace: 'nowrap',
+        outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
+        outlineOffset: '-3px',
+      })}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      onKeyUp={(event) => {
+        if (event.key === 'Enter') {
+          props.onSort(props.index);
+        }
+      }}
+      onClick={(event) => {
+        // Avoid column sort if select-all checkbox click.
+        if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
+          return;
+        }
+        if (props.sortable) {
+          props.onSort(props.index);
+        }
+      }}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {props.isSelectable && (
+        <span ref={checkboxRef}>
+          <Checkbox
+            onChange={(e) => {
+              if (props.isSelectedAll || props.isSelectedIndeterminate) {
+                props.onSelectNone();
+              } else {
+                props.onSelectAll();
+              }
+            }}
+            checked={props.isSelectedAll || props.isSelectedIndeterminate}
+            isIndeterminate={props.isSelectedIndeterminate}
+          />
+        </span>
+      )}
+      {props.title}
       <div
-        ref={ref}
-        role="button"
-        tabIndex="0"
         className={css({
-          ...theme.typography.font350,
+          position: 'relative',
+          width: '100%',
+          display: 'flex',
           alignItems: 'center',
-          backgroundColor,
-          boxSizing: 'border-box',
-          color: theme.colors.contentPrimary,
-          cursor: props.sortable ? 'pointer' : null,
-          display: props.isMeasured ? 'inline-flex' : 'flex',
-          flexGrow: 1,
-          height: '100%',
-          paddingLeft: theme.sizing.scale500,
-          paddingRight: theme.sizing.scale500,
-          flexWrap: 'nowrap',
-          whiteSpace: 'nowrap',
-          outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
-          outlineOffset: '-3px',
         })}
-        onMouseEnter={props.onMouseEnter}
-        onMouseLeave={props.onMouseLeave}
-        onKeyUp={event => {
-          if (event.key === 'Enter') {
-            props.onSort(props.index);
-          }
-        }}
-        onClick={event => {
-          // Avoid column sort if select-all checkbox click.
-          if (
-            checkboxRef.current &&
-            checkboxRef.current.contains(event.target)
-          ) {
-            return;
-          }
-          if (props.sortable) {
-            props.onSort(props.index);
-          }
-        }}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
       >
-        {props.isSelectable && (
-          <span ref={checkboxRef}>
-            <Checkbox
-              onChange={e => {
-                if (props.isSelectedAll || props.isSelectedIndeterminate) {
-                  props.onSelectNone();
-                } else {
-                  props.onSelectAll();
+        {(props.isHovered || props.sortDirection) && props.sortable && (
+          <div
+            style={{
+              backgroundColor,
+              display: 'flex',
+              alignItems: 'center',
+              position: 'absolute',
+              right: -4,
+            }}
+          >
+            {props.sortDirection === SORT_DIRECTIONS.DESC && (
+              <ChevronDown
+                color={
+                  props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
                 }
-              }}
-              checked={props.isSelectedAll || props.isSelectedIndeterminate}
-              isIndeterminate={props.isSelectedIndeterminate}
-            />
-          </span>
+              />
+            )}
+            {(props.sortDirection === SORT_DIRECTIONS.ASC || !props.sortDirection) && (
+              <ChevronUp
+                color={
+                  props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
+                }
+              />
+            )}
+          </div>
         )}
-        {props.title}
-        <div
-          className={css({
-            position: 'relative',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          })}
-        >
-          {(props.isHovered || props.sortDirection) && props.sortable && (
-            <div
-              style={{
-                backgroundColor,
-                display: 'flex',
-                alignItems: 'center',
-                position: 'absolute',
-                right: -4,
-              }}
-            >
-              {props.sortDirection === SORT_DIRECTIONS.DESC && (
-                <ChevronDown
-                  color={
-                    props.sortDirection
-                      ? theme.colors.contentPrimary
-                      : theme.colors.contentSecondary
-                  }
-                />
-              )}
-              {(props.sortDirection === SORT_DIRECTIONS.ASC ||
-                !props.sortDirection) && (
-                <ChevronUp
-                  color={
-                    props.sortDirection
-                      ? theme.colors.contentPrimary
-                      : theme.colors.contentSecondary
-                  }
-                />
-              )}
-            </div>
-          )}
-        </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 HeaderCell.displayName = 'HeaderCell';
 
 export default HeaderCell;

package/data-table/index.js.flow

@@ -6,31 +6,22 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {DataTable} from './data-table.js';
-export {StatefulContainer} from './stateful-container.js';
-export {StatefulDataTable} from './stateful-data-table.js';
-export {DataTable as Unstable_DataTable} from './data-table.js';
-export {
-  StatefulContainer as Unstable_StatefulContainer,
-} from './stateful-container.js';
-export {
-  StatefulDataTable as Unstable_StatefulDataTable,
-} from './stateful-data-table.js';
-export {default as AnchorColumn} from './column-anchor.js';
-export {default as BooleanColumn} from './column-boolean.js';
-export {default as CategoricalColumn} from './column-categorical.js';
-export {default as CustomColumn} from './column-custom.js';
-export {default as DatetimeColumn} from './column-datetime.js';
-export {default as NumericalColumn} from './column-numerical.js';
-export {default as RowIndexColumn} from './column-row-index.js';
-export {default as StringColumn} from './column-string.js';
+export { DataTable } from './data-table.js';
+export { StatefulContainer } from './stateful-container.js';
+export { StatefulDataTable } from './stateful-data-table.js';
+export { DataTable as Unstable_DataTable } from './data-table.js';
+export { StatefulContainer as Unstable_StatefulContainer } from './stateful-container.js';
+export { StatefulDataTable as Unstable_StatefulDataTable } from './stateful-data-table.js';
+export { default as AnchorColumn } from './column-anchor.js';
+export { default as BooleanColumn } from './column-boolean.js';
+export { default as CategoricalColumn } from './column-categorical.js';
+export { default as CustomColumn } from './column-custom.js';
+export { default as DatetimeColumn } from './column-datetime.js';
+export { default as NumericalColumn } from './column-numerical.js';
+export { default as RowIndexColumn } from './column-row-index.js';
+export { default as StringColumn } from './column-string.js';
 
-export {
-  COLUMNS,
-  DATETIME_OPERATIONS,
-  NUMERICAL_FORMATS,
-  SORT_DIRECTIONS,
-} from './constants.js';
+export { COLUMNS, DATETIME_OPERATIONS, NUMERICAL_FORMATS, SORT_DIRECTIONS } from './constants.js';
 
 export type * from './types.js';
 

package/data-table/measure-column-widths.js.flow

@@ -8,21 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {useStyletron} from '../styles/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import HeaderCell from './header-cell.js';
-import type {ColumnT, RowT} from './types.js';
-import {useRef} from 'react';
+import type { ColumnT, RowT } from './types.js';
+import { useRef } from 'react';
 
 // Measures the column header + sampled data
-function MeasureColumn({
-  sampleIndexes,
-  column,
-  columnIndex,
-  rows,
-  isSelectable,
-  onLayout,
-}) {
+function MeasureColumn({ sampleIndexes, column, columnIndex, rows, isSelectable, onLayout }) {
   const [css] = useStyletron();
 
   const ref = useRef();
@@ -54,7 +47,7 @@ function MeasureColumn({
         onMouseLeave={() => {}}
         onSelectAll={() => {}}
         onSelectNone={() => {}}
-        onSort={i => {}}
+        onSort={(i) => {}}
         sortable={column.sortable}
         sortDirection={null}
         title={column.title}
@@ -124,8 +117,7 @@ export default function MeasureColumnWidths({
     return new Map();
   }, []);
 
-  const sampleSize =
-    rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
+  const sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
 
   const sampleIndexes = React.useMemo<number[]>(() => {
@@ -138,9 +130,9 @@ export default function MeasureColumnWidths({
         Math.max(
           columns[columnIndex].minWidth || 0,
           widthMap.get(columnIndex) || 0,
-          dimensions.width + 1,
+          dimensions.width + 1
         ),
-        columns[columnIndex].maxWidth || Infinity,
+        columns[columnIndex].maxWidth || Infinity
       );
 
       if (nextWidth !== widthMap.get(columnIndex)) {
@@ -157,7 +149,7 @@ export default function MeasureColumnWidths({
         onWidthsChange(Array.from(widthMap.values()));
       }
     },
-    [columns, finishedMeasurementCount, onWidthsChange],
+    [columns, finishedMeasurementCount, onWidthsChange]
   );
 
   const hiddenStyle = css({

package/data-table/stateful-container.js.flow

@@ -8,19 +8,16 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {SORT_DIRECTIONS} from './constants.js';
-import type {ColumnT, StatefulContainerPropsT} from './types.js';
+import { SORT_DIRECTIONS } from './constants.js';
+import type { ColumnT, StatefulContainerPropsT } from './types.js';
 
 function useDuplicateColumnTitleWarning(columns: ColumnT<>[]) {
   React.useEffect(() => {
     if (__DEV__) {
-      const titles = columns.reduce(
-        (set, column) => set.add(column.title),
-        new Set(),
-      );
+      const titles = columns.reduce((set, column) => set.add(column.title), new Set());
       if (titles.size < columns.length) {
         console.warn(
-          'BaseWeb DataTable: Column titles must be unique else will result in non-deterministic filtering.',
+          'BaseWeb DataTable: Column titles must be unique else will result in non-deterministic filtering.'
         );
       }
     }
@@ -29,9 +26,7 @@ function useDuplicateColumnTitleWarning(columns: ColumnT<>[]) {
 
 function useSortParameters(initialSortIndex = -1, initialSortDirection = null) {
   const [sortIndex, setSortIndex] = React.useState(initialSortIndex);
-  const [sortDirection, setSortDirection] = React.useState(
-    initialSortDirection,
-  );
+  const [sortDirection, setSortDirection] = React.useState(initialSortDirection);
 
   function handleSort(columnIndex) {
     if (columnIndex === sortIndex) {
@@ -54,11 +49,9 @@ export function StatefulContainer(props: StatefulContainerPropsT) {
   useDuplicateColumnTitleWarning(props.columns);
   const [sortIndex, sortDirection, handleSort] = useSortParameters(
     props.initialSortIndex,
-    props.initialSortDirection,
-  );
-  const [filters, setFilters] = React.useState(
-    props.initialFilters || new Map(),
+    props.initialSortDirection
   );
+  const [filters, setFilters] = React.useState(props.initialFilters || new Map());
   const [textQuery, setTextQuery] = React.useState('');
 
   function handleFilterAdd(title, filterParams) {
@@ -77,21 +70,19 @@ export function StatefulContainer(props: StatefulContainerPropsT) {
   }
 
   const [selectedRowIds, setSelectedRowIds] = React.useState(
-    props.initialSelectedRowIds || new Set(),
+    props.initialSelectedRowIds || new Set()
   );
   function handleSelectChange(next) {
     setSelectedRowIds(next);
 
     const selectionCallback = props.onSelectionChange;
     if (selectionCallback) {
-      selectionCallback(props.rows.filter(r => next.has(r.id)));
+      selectionCallback(props.rows.filter((r) => next.has(r.id)));
     }
   }
   function handleSelectMany(incomingRows) {
     // only adds rows that are visible in the table
-    handleSelectChange(
-      new Set([...selectedRowIds, ...incomingRows.map(r => r.id)]),
-    );
+    handleSelectChange(new Set([...selectedRowIds, ...incomingRows.map((r) => r.id)]));
   }
   function handleSelectNone() {
     handleSelectChange(new Set());
@@ -106,12 +97,12 @@ export function StatefulContainer(props: StatefulContainerPropsT) {
   }
 
   const handleIncludedRowsChange = React.useCallback(
-    rows => {
+    (rows) => {
       if (props.onIncludedRowsChange) {
         props.onIncludedRowsChange(rows);
       }
     },
-    [props.onIncludedRowsChange],
+    [props.onIncludedRowsChange]
   );
 
   const handleRowHighlightChange = React.useCallback(
@@ -120,7 +111,7 @@ export function StatefulContainer(props: StatefulContainerPropsT) {
         props.onRowHighlightChange(rowIndex, row);
       }
     },
-    [props.rowHighlightIndex],
+    [props.rowHighlightIndex]
   );
 
   return props.children({

package/data-table/stateful-data-table.js.flow

@@ -16,19 +16,19 @@ import {
   KIND as BUTTON_KINDS,
 } from '../button/index.js';
 import Search from '../icon/search.js';
-import {Input, SIZE as INPUT_SIZES} from '../input/index.js';
-import {Popover} from '../popover/index.js';
-import {useStyletron} from '../styles/index.js';
-import {Tag} from '../tag/index.js';
+import { Input, SIZE as INPUT_SIZES } from '../input/index.js';
+import { Popover } from '../popover/index.js';
+import { useStyletron } from '../styles/index.js';
+import { Tag } from '../tag/index.js';
 import FilterMenu from './filter-menu.js';
-import {DataTable} from './data-table.js';
-import {StatefulContainer} from './stateful-container.js';
-import type {StatefulDataTablePropsT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import { DataTable } from './data-table.js';
+import { StatefulContainer } from './stateful-container.js';
+import type { StatefulDataTablePropsT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
 function useResizeObserver(
-  ref: {current: HTMLElement | null},
-  callback: (ResizeObserverEntry[], ResizeObserver) => mixed,
+  ref: { current: HTMLElement | null },
+  callback: (ResizeObserverEntry[], ResizeObserver) => mixed
 ) {
   React.useLayoutEffect(() => {
     if (__BROWSER__) {
@@ -53,7 +53,7 @@ function QueryInput(props) {
   }, [value]);
 
   return (
-    <div className={css({width: '375px', marginBottom: theme.sizing.scale500})}>
+    <div className={css({ width: '375px', marginBottom: theme.sizing.scale500 })}>
       <Input
         aria-label={locale.datatable.searchAriaLabel}
         overrides={{
@@ -72,7 +72,7 @@ function QueryInput(props) {
           },
         }}
         size={INPUT_SIZES.compact}
-        onChange={event => setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
         value={value}
         clearable
       />
@@ -83,13 +83,13 @@ function QueryInput(props) {
 function FilterTag(props) {
   const [, theme] = useStyletron();
   const [isOpen, setIsOpen] = React.useState(false);
-  const columnIndex = props.columns.findIndex(c => c.title === props.title);
+  const columnIndex = props.columns.findIndex((c) => c.title === props.title);
   const column = props.columns[columnIndex];
   if (!column) {
     return null;
   }
 
-  const data = props.rows.map(r => column.mapDataToValue(r.data));
+  const data = props.rows.map((r) => column.mapDataToValue(r.data));
   const Filter = column.renderFilter;
 
   return (
@@ -104,9 +104,7 @@ function FilterTag(props) {
           close={() => setIsOpen(false)}
           data={data}
           filterParams={props.filter}
-          setFilter={filterParams =>
-            props.onFilterAdd(props.title, filterParams)
-          }
+          setFilter={(filterParams) => props.onFilterAdd(props.title, filterParams)}
         />
       )}
     >
@@ -151,7 +149,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
   const [css, theme] = useStyletron();
   const headlineRef = React.useRef(null);
   const [headlineHeight, setHeadlineHeight] = React.useState(64);
-  useResizeObserver(headlineRef, entries => {
+  useResizeObserver(headlineRef, (entries) => {
     setHeadlineHeight(entries[0].contentRect.height);
   });
 
@@ -195,7 +193,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
         textQuery,
       }) => (
         <React.Fragment>
-          <div className={css({height: `${headlineHeight}px`})}>
+          <div className={css({ height: `${headlineHeight}px` })}>
             <div ref={headlineRef}>
               {!selectedRowIds.size && (
                 <div
@@ -242,14 +240,12 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
                     paddingBottom: theme.sizing.scale400,
                   }}
                 >
-                  {props.batchActions.map(action => {
+                  {props.batchActions.map((action) => {
                     function onClick(event) {
                       action.onClick({
                         clearSelection: onSelectNone,
                         event,
-                        selection: props.rows.filter(r =>
-                          selectedRowIds.has(r.id),
-                        ),
+                        selection: props.rows.filter((r) => selectedRowIds.has(r.id)),
                       });
                     }
 
@@ -259,7 +255,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
                         <Button
                           key={action.label}
                           overrides={{
-                            BaseButton: {props: {'aria-label': action.label}},
+                            BaseButton: { props: { 'aria-label': action.label } },
                           }}
                           onClick={onClick}
                           kind={BUTTON_KINDS.tertiary}
@@ -286,9 +282,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
             </div>
           </div>
 
-          <div
-            style={{width: '100%', height: `calc(100% - ${headlineHeight}px)`}}
-          >
+          <div style={{ width: '100%', height: `calc(100% - ${headlineHeight}px)` }}>
             <DataTable
               batchActions={props.batchActions}
               columns={props.columns}

package/data-table/text-search.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {useStyletron} from '../styles/index.js';
+import { useStyletron } from '../styles/index.js';
 
 export function matchesQuery(text: string, query: string): boolean {
   return text.toLowerCase().includes(query.toLowerCase());
@@ -45,7 +45,7 @@ export function splitByQuery(text: string, query: string): string[] {
   return substrings;
 }
 
-export function HighlightCellText(props: {text: string, query: string}) {
+export function HighlightCellText(props: { text: string, query: string }) {
   const [css, theme] = useStyletron();
 
   if (!props.query) {
@@ -57,7 +57,7 @@ export function HighlightCellText(props: {text: string, query: string}) {
       {splitByQuery(props.text, props.query).map((el, i) => {
         if (matchesQuery(el, props.query)) {
           return (
-            <span className={css({...theme.typography.font150})} key={i}>
+            <span className={css({ ...theme.typography.font150 })} key={i}>
               {el}
             </span>
           );