baseui 10.9.1 → 10.11.0

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>
           );

package/data-table/types.js.flow

@@ -8,12 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {COLUMNS, SORT_DIRECTIONS} from './constants.js';
+import { COLUMNS, SORT_DIRECTIONS } from './constants.js';
 
-export type SortDirectionsT =
-  | typeof SORT_DIRECTIONS.ASC
-  | typeof SORT_DIRECTIONS.DESC
-  | null;
+export type SortDirectionsT = typeof SORT_DIRECTIONS.ASC | typeof SORT_DIRECTIONS.DESC | null;
 
 export type ColumnsT =
   | typeof COLUMNS.ANCHOR
@@ -30,7 +27,7 @@ export type SharedColumnOptionsT<ValueT> = {|
   cellBlockAlign?: 'start' | 'center' | 'end',
   fillWidth?: boolean,
   filterable?: boolean,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   mapDataToValue: (data: any) => ValueT,
   maxWidth?: number,
   minWidth?: number,
@@ -52,24 +49,24 @@ export type RenderFilterT<ValueT, FilterParamsT> = React.AbstractComponent<{|
   close: () => void,
   data: ValueT[],
   filterParams?: FilterParamsT,
-  setFilter: FilterParamsT => void,
+  setFilter: (FilterParamsT) => void,
 |}>;
 
-// eslint-disable-next-line flowtype/no-weak-types
+// flowlint-next-line unclear-type:off
 export type ColumnT<ValueT = any, FilterParamsT = any> = {|
   ...SharedColumnOptionsT<ValueT>,
   kind: ColumnsT,
   sortable: boolean,
   renderCell: RenderCellT<ValueT>,
   renderFilter: RenderFilterT<ValueT, FilterParamsT>,
-  buildFilter: FilterParamsT => ValueT => boolean,
+  buildFilter: (FilterParamsT) => (ValueT) => boolean,
   textQueryFilter?: (string, ValueT) => boolean,
   sortFn: (ValueT, ValueT) => number,
 |};
 
 export type RowT = {
   id: number | string,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   data: any,
 };
 
@@ -80,13 +77,13 @@ export type BatchActionT = {|
     event: SyntheticEvent<HTMLButtonElement>,
     selection: RowT[],
   }) => mixed,
-  renderIcon?: React.AbstractComponent<{|size: number|}>,
+  renderIcon?: React.AbstractComponent<{| size: number |}>,
 |};
 
 export type RowActionT = {|
   label: string,
-  onClick: ({event: SyntheticEvent<HTMLButtonElement>, row: RowT}) => mixed,
-  renderIcon: React.AbstractComponent<{|size: number|}>,
+  onClick: ({ event: SyntheticEvent<HTMLButtonElement>, row: RowT }) => mixed,
+  renderIcon: React.AbstractComponent<{| size: number |}>,
   renderButton?: React.AbstractComponent<{||}>,
 |};
 
@@ -95,20 +92,20 @@ export type StatefulDataTablePropsT = {|
   columns: ColumnT<>[],
   emptyMessage?: string | React.AbstractComponent<{||}>,
   filterable?: boolean,
-  initialFilters?: Map<string, {description: string}>,
+  initialFilters?: Map<string, { description: string }>,
   initialSelectedRowIds?: Set<number | string>,
   initialSortIndex?: number,
   initialSortDirection?: SortDirectionsT,
   loading?: boolean,
   loadingMessage?: string | React.AbstractComponent<{||}>,
-  onFilterAdd?: (string, {description: string}) => mixed,
-  onFilterRemove?: string => mixed,
+  onFilterAdd?: (string, { description: string }) => mixed,
+  onFilterRemove?: (string) => mixed,
   onIncludedRowsChange?: (rows: RowT[]) => void,
   onRowHighlightChange?: (rowIndex: number, row: RowT) => void,
   onSelectionChange?: (RowT[]) => mixed,
   resizableColumnWidths?: boolean,
   rows: RowT[],
-  rowActions?: RowActionT[] | (RowT => RowActionT[]),
+  rowActions?: RowActionT[] | ((RowT) => RowActionT[]),
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,
@@ -117,7 +114,7 @@ export type StatefulDataTablePropsT = {|
 export type DataTablePropsT = {|
   ...StatefulDataTablePropsT,
   emptyMessage?: string | React.AbstractComponent<{||}>,
-  filters?: Map<string, {description: string}>,
+  filters?: Map<string, { description: string }>,
   loading?: boolean,
   loadingMessage?: string | React.AbstractComponent<{||}>,
   onIncludedRowsChange?: (rows: RowT[]) => void,
@@ -137,8 +134,8 @@ export type DataTablePropsT = {|
 export type StatefulContainerPropsT = {|
   ...StatefulDataTablePropsT,
   children: ({|
-    filters: Map<string, {description: string}>,
-    onFilterAdd: (title: string, filterParams: {description: string}) => void,
+    filters: Map<string, { description: string }>,
+    onFilterAdd: (title: string, filterParams: { description: string }) => void,
     onFilterRemove: (title: string) => void,
     onIncludedRowsChange: (rows: RowT[]) => void,
     onRowHighlightChange: (rowIndex: number, row: RowT) => void,

package/datepicker/calendar-header.js

@@ -113,7 +113,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, CalendarHeader);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); //$FlowFixMe
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
@@ -257,7 +257,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           monthsShown = _this$props2.monthsShown,
           order = _this$props2.order;
 
-      if (monthsShown && _this.isMultiMonthHorizontal()) {
+      if (!!monthsShown && _this.isMultiMonthHorizontal()) {
         if (direction === DIRECTION.NEXT) {
           var isLastMonth = order === monthsShown - 1;
           return !isLastMonth;
@@ -469,17 +469,14 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           OverriddenStatefulMenu = _getOverrides16[0],
           menuProps = _getOverrides16[1];
 
-      var menuOverrides = (0, _overrides.mergeOverrides)({
+      menuProps.overrides = (0, _overrides.mergeOverrides)({
         List: {
           style: {
             height: 'auto',
             maxHeight: '257px'
           }
         }
-      }, // $FlowFixMe
-      menuProps && menuProps.overrides); // $FlowFixMe
-
-      menuProps.overrides = menuOverrides;
+      }, menuProps && menuProps.overrides);
 
       var initialMonthIndex = _this.monthItems.findIndex(function (month) {
         return month.id === _this.dateHelpers.getMonth(date).toString();