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

package/combobox/combobox.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Input, SIZE} from '../input/index.js';
-import {scrollItemIntoView} from '../menu/utils.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {useUIDSeed} from 'react-uid';
+import { Input, SIZE } from '../input/index.js';
+import { scrollItemIntoView } from '../menu/utils.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { useUIDSeed } from 'react-uid';
 
 import {
   StyledRoot,
@@ -20,7 +20,7 @@ import {
   StyledListBox,
   StyledListItem,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 const ENTER = 13;
 const ESCAPE = 27;
@@ -96,7 +96,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         selectedOptionRef.current,
         listboxRef.current,
         selectionIndex === 0,
-        selectionIndex === options.length - 1,
+        selectionIndex === options.length - 1
       );
     }
   }, [isOpen, selectedOptionRef.current, listboxRef.current]);
@@ -145,7 +145,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         onChange(mapOptionToString(clickedOption), clickedOption);
       } else {
         if (onSubmit) {
-          onSubmit({closeListbox: () => setIsOpen(false), value});
+          onSubmit({ closeListbox: () => setIsOpen(false), value });
         }
       }
     }
@@ -231,22 +231,16 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
   const [InputContainer, inputContainerProps] = getOverrides(
     overrides.InputContainer,
-    StyledInputContainer,
+    StyledInputContainer
   );
-  const [ListBox, listBoxProps] = getOverrides(
-    overrides.ListBox,
-    StyledListBox,
+  const [ListBox, listBoxProps] = getOverrides(overrides.ListBox, StyledListBox);
+  const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
+  const [OverriddenInput, { overrides: inputOverrides = {}, ...restInputProps }] = getOverrides(
+    overrides.Input,
+    Input
   );
-  const [ListItem, listItemProps] = getOverrides(
-    overrides.ListItem,
-    StyledListItem,
-  );
-  const [OverriddenInput, {overrides: inputOverrides = {}, ...restInputProps}] =
-    getOverrides(overrides.Input, Input);
-  const [
-    OverriddenPopover,
-    {overrides: popoverOverrides = {}, ...restPopoverProps},
-  ] = getOverrides(overrides.Popover, Popover);
+  const [OverriddenPopover, { overrides: popoverOverrides = {}, ...restPopoverProps }] =
+    getOverrides(overrides.Popover, Popover);
 
   return (
     <Root
@@ -319,9 +313,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         >
           <OverriddenInput
             inputRef={handleInputRef}
-            aria-activedescendant={
-              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
-            }
+            aria-activedescendant={isOpen && selectionIndex >= 0 ? activeDescendantId : undefined}
             aria-autocomplete="list"
             disabled={disabled}
             error={error}
@@ -335,7 +327,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
-            {...(isOpen ? {'aria-controls': listboxId} : {})}
+            {...(isOpen ? { 'aria-controls': listboxId } : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/index.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {SIZE} from '../input/constants.js';
+export { SIZE } from '../input/constants.js';
 
-export {default as Combobox} from './combobox.js';
+export { default as Combobox } from './combobox.js';
 export {
   StyledRoot,
   StyledInputContainer,

package/combobox/styled-components.js.flow

@@ -6,38 +6,34 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SIZE} from '../input/index.js';
-import {styled} from '../styles/index.js';
-import type {FontT} from '../themes/types.js';
+import { SIZE } from '../input/index.js';
+import { styled } from '../styles/index.js';
+import type { FontT } from '../themes/types.js';
 
 export const StyledRoot = styled('div', {});
 
 export const StyledInputContainer = styled('div', {});
 
-export const StyledListBox = styled<{|$width: string|}>(
-  'ul',
-  ({$theme, $width}) => {
-    return {
-      backgroundColor: $theme.colors.backgroundPrimary,
-      marginBlockStart: 'unset',
-      marginBlockEnd: 'unset',
-      maxHeight: '200px',
-      overflowY: 'auto',
-      outline: 'none',
-      paddingInlineStart: 'unset',
-      width: $width,
-    };
-  },
-);
+export const StyledListBox = styled<{| $width: string |}>('ul', ({ $theme, $width }) => {
+  return {
+    backgroundColor: $theme.colors.backgroundPrimary,
+    marginBlockStart: 'unset',
+    marginBlockEnd: 'unset',
+    maxHeight: '200px',
+    overflowY: 'auto',
+    outline: 'none',
+    paddingInlineStart: 'unset',
+    width: $width,
+  };
+});
 
 function buildStylesForSize(
   size,
-  theme,
+  theme
 ):
-  | {|...FontT, height: string, paddingLeft?: string|}
-  | {|...FontT, height: string, paddingRight?: string|} {
-  const paddingDir: string =
-    theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  | {| ...FontT, height: string, paddingLeft?: string |}
+  | {| ...FontT, height: string, paddingRight?: string |} {
+  const paddingDir: string = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
   switch (size) {
     case SIZE.mini:
       return {
@@ -70,7 +66,7 @@ function buildStylesForSize(
 export const StyledListItem = styled<{|
   $isSelected: boolean,
   $size: $Keys<typeof SIZE>,
-|}>('li', ({$isSelected, $theme, $size}) => {
+|}>('li', ({ $isSelected, $theme, $size }) => {
   return {
     ...buildStylesForSize($size, $theme),
     alignItems: 'center',

package/combobox/types.js.flow

@@ -8,10 +8,10 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE} from '../input/index.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE } from '../input/index.js';
 
-export type ReactRefT<T> = {|current: null | T|};
+export type ReactRefT<T> = {| current: null | T |};
 
 export type PropsT<OptionT = mixed> = {|
   // Controls if the input value will be updated while keyboard navigating. Defaults to true.
@@ -45,7 +45,7 @@ export type PropsT<OptionT = mixed> = {|
   onFocus?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
   // Called when no option is selected and the enter key is pressed. An argument to this
   // function is another function to close the listbox if needed.
-  onSubmit?: ({closeListbox: () => void, value: string}) => mixed,
+  onSubmit?: ({ closeListbox: () => void, value: string }) => mixed,
   // Data to populate list items in the dropdown menu.
   options: OptionT[],
   overrides?: {|

package/data-table/column-anchor.js.flow

@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {StyledLink} from '../link/index.js';
-import {useStyletron} from '../styles/index.js';
+import { StyledLink } from '../link/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
 
-type ValueT = {content: string, href: string};
+type ValueT = { content: string, href: string };
 
 type ReplacementElementAs = React.AbstractComponent<{|
   href: string,

package/data-table/column-boolean.js.flow

@@ -8,13 +8,13 @@ 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 {CategoricalFilter} from './column-categorical.js';
+import { CategoricalFilter } from './column-categorical.js';
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
 type OptionsT = {|
   ...SharedColumnOptionsT<boolean>,
@@ -40,19 +40,14 @@ function BooleanFilter(props) {
   let selectionString = new Set();
   if (props.filterParams && props.filterParams.selection) {
     selectionString = mapSelection(props.filterParams.selection, (i) =>
-      i
-        ? locale.datatable.booleanFilterTrue
-        : locale.datatable.booleanFilterFalse,
+      i ? locale.datatable.booleanFilterTrue : locale.datatable.booleanFilterFalse
     );
   }
 
   return (
     <CategoricalFilter
       close={props.close}
-      data={[
-        locale.datatable.booleanFilterTrue,
-        locale.datatable.booleanFilterFalse,
-      ]}
+      data={[locale.datatable.booleanFilterTrue, locale.datatable.booleanFilterFalse]}
       filterParams={
         props.filterParams
           ? {
@@ -66,7 +61,7 @@ function BooleanFilter(props) {
         props.setFilter({
           selection: mapSelection(
             params.selection,
-            (i) => i === locale.datatable.booleanFilterTrue,
+            (i) => i === locale.datatable.booleanFilterTrue
           ),
           exclude: params.exclude,
           description: params.description,

package/data-table/column-categorical.js.flow

@@ -8,20 +8,20 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button, SIZE, KIND} from '../button/index.js';
-import {ButtonGroup} from '../button-group/index.js';
-import {Checkbox, StyledLabel} from '../checkbox/index.js';
+import { Button, SIZE, KIND } from '../button/index.js';
+import { ButtonGroup } from '../button-group/index.js';
+import { Checkbox, StyledLabel } from '../checkbox/index.js';
 import Search from '../icon/search.js';
-import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
-import {useStyletron, withStyle} from '../styles/index.js';
-import {LabelSmall} from '../typography/index.js';
+import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
+import { useStyletron, withStyle } from '../styles/index.js';
+import { LabelSmall } from '../typography/index.js';
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 import FilterShell from './filter-shell.js';
-import {matchesQuery, splitByQuery, HighlightCellText} from './text-search.js';
+import { matchesQuery, splitByQuery, HighlightCellText } from './text-search.js';
 
 type OptionsT = {|
   ...SharedColumnOptionsT<string>,
@@ -50,10 +50,7 @@ function InputBefore() {
   );
 }
 
-function FilterQuickControls(props: {
-  onSelectAll: () => void,
-  onClearSelection: () => void,
-}) {
+function FilterQuickControls(props: { onSelectAll: () => void, onClearSelection: () => void }) {
   const locale = React.useContext(LocaleContext);
 
   return (
@@ -85,7 +82,7 @@ const StyledHighlightLabel = withStyle(StyledLabel, (props) => {
 });
 
 function HighlightCheckboxLabel(props) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
 
   if (!props.query) {
     return <StyledLabel {...restProps}>{children}</StyledLabel>;
@@ -118,22 +115,20 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const [selection, setSelection] = React.useState<Set<string>>(
-    props.filterParams ? props.filterParams.selection : new Set(),
+    props.filterParams ? props.filterParams.selection : new Set()
   );
   const [exclude, setExclude] = React.useState(
-    props.filterParams ? props.filterParams.exclude : false,
+    props.filterParams ? props.filterParams.exclude : false
   );
   const [query, setQuery] = React.useState('');
   const categories = React.useMemo(() => {
     return props.data.reduce((set, category) => set.add(category), new Set());
   }, [props.data]);
 
-  const checkboxStyles = css({marginBottom: theme.sizing.scale200});
+  const checkboxStyles = css({ marginBottom: theme.sizing.scale200 });
 
   const showQuery = Boolean(categories.size >= 10);
-  const filteredCategories = Array.from(categories, (c) => c).filter((c) =>
-    matchesQuery(c, query),
-  );
+  const filteredCategories = Array.from(categories, (c) => c).filter((c) => matchesQuery(c, query));
 
   return (
     <FilterShell
@@ -151,7 +146,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
       {showQuery && (
         <Input
           size={INPUT_SIZE.compact}
-          overrides={{Before: InputBefore}}
+          overrides={{ Before: InputBefore }}
           value={query}
           onChange={(event) => setQuery(event.target.value)}
           clearable
@@ -201,7 +196,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
                   setSelection(new Set(selection));
                 }}
                 overrides={{
-                  Label: {component: HighlightCheckboxLabel, props: {query}},
+                  Label: { component: HighlightCheckboxLabel, props: { query } },
                 }}
               >
                 {category}

package/data-table/column-custom.js.flow

@@ -7,13 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {
-  ColumnT,
-  RenderCellT,
-  RenderFilterT,
-  SharedColumnOptionsT,
-} from './types.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT, RenderCellT, RenderFilterT, SharedColumnOptionsT } from './types.js';
 
 // I could not re-use the ColumnT type to build this.. tried to spread the ColumnT
 // and define renderFilter, etc. to optional, but required status was maintained.
@@ -27,10 +22,10 @@ type OptionsT<ValueT, FilterParamsT> = {|
 |};
 
 function CustomColumn<ValueT, FilterParamsT>(
-  options: OptionsT<ValueT, FilterParamsT>,
+  options: OptionsT<ValueT, FilterParamsT>
 ): ColumnT<ValueT, FilterParamsT> {
   //$FlowFixMe
-  return Column({kind: COLUMNS.CUSTOM, ...options});
+  return Column({ kind: COLUMNS.CUSTOM, ...options });
 }
 
 export default CustomColumn;

package/data-table/column-datetime.js.flow

@@ -17,9 +17,9 @@ import isBefore from 'date-fns/isBefore/index.js';
 import isEqual from 'date-fns/isEqual/index.js';
 import set from 'date-fns/set/index.js';
 
-import {Button, SIZE} from '../button/index.js';
-import {ButtonGroup, MODE} from '../button-group/index.js';
-import {Checkbox} from '../checkbox/index.js';
+import { Button, SIZE } from '../button/index.js';
+import { ButtonGroup, MODE } from '../button-group/index.js';
+import { Checkbox } from '../checkbox/index.js';
 import {
   applyDateToTime,
   applyTimeToDate,
@@ -29,16 +29,16 @@ import {
   getStartOfWeek,
   addDays,
 } from '../datepicker/utils/index.js';
-import {Datepicker} from '../datepicker/index.js';
-import {TimePicker} from '../timepicker/index.js';
-import {useStyletron} from '../styles/index.js';
-import {Select, type ValueT} from '../select/index.js';
+import { Datepicker } from '../datepicker/index.js';
+import { TimePicker } from '../timepicker/index.js';
+import { useStyletron } from '../styles/index.js';
+import { Select, type ValueT } from '../select/index.js';
 
 import Column from './column.js';
-import {COLUMNS, DATETIME_OPERATIONS} from './constants.js';
+import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
 type OptionsT = {|
   ...SharedColumnOptionsT<Date>,
@@ -123,14 +123,11 @@ const QUARTERS = [0, 1, 2, 3];
 function Checks(props) {
   const [css, theme] = useStyletron();
   return (
-    <div className={css({maxHeight: '256px', overflowY: 'auto'})}>
+    <div className={css({ maxHeight: '256px', overflowY: 'auto' })}>
       {props.options.map((item) => {
         const checked = props.value.includes(item.id);
         return (
-          <div
-            key={item.id}
-            className={css({marginBottom: theme.sizing.scale200})}
-          >
+          <div key={item.id} className={css({ marginBottom: theme.sizing.scale200 })}>
             <Checkbox
               checked={checked}
               onChange={() => {
@@ -225,19 +222,12 @@ function DatetimeFilter(props) {
     return getStartOfWeek(new Date(), props.locale);
   }, [props.locale]);
   const localizedWeekdays = React.useMemo(() => {
-    return [
-      ...WEEKDAYS.slice(getDay(startOfWeek), 7),
-      ...WEEKDAYS.slice(0, getDay(startOfWeek)),
-    ];
+    return [...WEEKDAYS.slice(getDay(startOfWeek), 7), ...WEEKDAYS.slice(0, getDay(startOfWeek))];
   }, [props.locale]);
 
   const [exclude, setExclude] = React.useState(initialState.exclude);
-  const [comparatorIndex, setComparatorIndex] = React.useState(
-    initialState.comparatorIndex,
-  );
-  const [rangeOperator, setRangeOperator] = React.useState<ValueT>([
-    initialState.rangeOperator,
-  ]);
+  const [comparatorIndex, setComparatorIndex] = React.useState(initialState.comparatorIndex);
+  const [rangeOperator, setRangeOperator] = React.useState<ValueT>([initialState.rangeOperator]);
   const [categoricalOperator, setCategoricalOperator] = React.useState<ValueT>([
     initialState.categoricalOperator,
   ]);
@@ -245,21 +235,14 @@ function DatetimeFilter(props) {
   const [rangeDates, setRangeDates] = React.useState<any>(
     initialState.rangeDates.length
       ? initialState.rangeDates
-      : [
-          new Date(datesSorted[0]),
-          new Date(datesSorted[datesSorted.length - 1]),
-        ],
+      : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]
   );
 
   const [years, setYears] = React.useState<number[]>(initialState.years);
   const [halves, setHalves] = React.useState<number[]>(initialState.halves);
-  const [quarters, setQuarters] = React.useState<number[]>(
-    initialState.quarters,
-  );
+  const [quarters, setQuarters] = React.useState<number[]>(initialState.quarters);
   const [months, setMonths] = React.useState<number[]>(initialState.months);
-  const [weekdays, setWeekdays] = React.useState<number[]>(
-    initialState.weekdays,
-  );
+  const [weekdays, setWeekdays] = React.useState<number[]>(initialState.weekdays);
 
   const isRange = comparatorIndex === 0;
   const isCategorical = comparatorIndex === 1;
@@ -317,15 +300,11 @@ function DatetimeFilter(props) {
           } else if (op === DATETIME_OPERATIONS.MONTH) {
             selection = months;
             operatorLocaleLabelKey = CATEGORICAL_OPERATIONS[1].localeLabelKey;
-            description = months
-              .map((m) => getMonthInLocale(m, props.locale))
-              .join(', ');
+            description = months.map((m) => getMonthInLocale(m, props.locale)).join(', ');
           } else if (op === DATETIME_OPERATIONS.QUARTER) {
             selection = quarters;
             operatorLocaleLabelKey = CATEGORICAL_OPERATIONS[2].localeLabelKey;
-            description = quarters
-              .map((q) => getQuarterInLocale(q, props.locale))
-              .join(', ');
+            description = quarters.map((q) => getQuarterInLocale(q, props.locale)).join(', ');
           } else if (op === DATETIME_OPERATIONS.HALF) {
             selection = halves;
             operatorLocaleLabelKey = CATEGORICAL_OPERATIONS[3].localeLabelKey;
@@ -333,7 +312,7 @@ function DatetimeFilter(props) {
               .map((h) =>
                 h === 0
                   ? locale.datatable.datetimeFilterCategoricalFirstHalf
-                  : locale.datatable.datetimeFilterCategoricalSecondHalf,
+                  : locale.datatable.datetimeFilterCategoricalSecondHalf
               )
               .join(', ');
           } else if (op === DATETIME_OPERATIONS.YEAR) {
@@ -366,20 +345,14 @@ function DatetimeFilter(props) {
           onClick={(_, index) => setComparatorIndex(index)}
           overrides={{
             Root: {
-              style: ({$theme}) => ({marginBottom: $theme.sizing.scale300}),
+              style: ({ $theme }) => ({ marginBottom: $theme.sizing.scale300 }),
             },
           }}
         >
-          <Button
-            type="button"
-            overrides={{BaseButton: {style: {width: '100%'}}}}
-          >
+          <Button type="button" overrides={{ BaseButton: { style: { width: '100%' } } }}>
             {locale.datatable.datetimeFilterRange}
           </Button>
-          <Button
-            type="button"
-            overrides={{BaseButton: {style: {width: '100%'}}}}
-          >
+          <Button type="button" overrides={{ BaseButton: { style: { width: '100%' } } }}>
             {locale.datatable.datetimeFilterCategorical}
           </Button>
         </ButtonGroup>
@@ -399,19 +372,17 @@ function DatetimeFilter(props) {
               clearable={false}
             />
 
-            <div className={css({paddingTop: theme.sizing.scale600})}>
+            <div className={css({ paddingTop: theme.sizing.scale600 })}>
               {(rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME ||
                 rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && (
                 <Datepicker
                   // flowlint-next-line unclear-type:off
                   mountNode={(mountNode.current: any)}
                   value={rangeDates}
-                  onChange={({date}) => {
+                  onChange={({ date }) => {
                     if (Array.isArray(date)) {
                       if (!date.length) return;
-                      const nextDates = date.map((d, i) =>
-                        applyDateToTime(rangeDates[i], d),
-                      );
+                      const nextDates = date.map((d, i) => applyDateToTime(rangeDates[i], d));
                       setRangeDates(nextDates);
                     }
                   }}
@@ -420,13 +391,9 @@ function DatetimeFilter(props) {
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}
-                  timeSelectStart={
-                    rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME
-                  }
-                  timeSelectEnd={
-                    rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME
-                  }
-                  overrides={{TimeSelect: {props: {size: 'compact'}}}}
+                  timeSelectStart={rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME}
+                  timeSelectEnd={rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME}
+                  overrides={{ TimeSelect: { props: { size: 'compact' } } }}
                   range
                   size="compact"
                   locale={props.locale}
@@ -452,11 +419,7 @@ function DatetimeFilter(props) {
                     format="24"
                     value={rangeDates[0]}
                     onChange={(time) =>
-                      time &&
-                      setRangeDates([
-                        applyTimeToDate(rangeDates[0], time),
-                        rangeDates[1],
-                      ])
+                      time && setRangeDates([applyTimeToDate(rangeDates[0], time), rangeDates[1]])
                     }
                     creatable
                     size="compact"
@@ -472,11 +435,7 @@ function DatetimeFilter(props) {
                     format="24"
                     value={rangeDates[1]}
                     onChange={(time) =>
-                      time &&
-                      setRangeDates([
-                        rangeDates[0],
-                        applyTimeToDate(rangeDates[1], time),
-                      ])
+                      time && setRangeDates([rangeDates[0], applyTimeToDate(rangeDates[1], time)])
                     }
                     creatable
                     size="compact"
@@ -551,13 +510,11 @@ function DatetimeFilter(props) {
                   setValue={setHalves}
                   options={[
                     {
-                      label:
-                        locale.datatable.datetimeFilterCategoricalFirstHalf,
+                      label: locale.datatable.datetimeFilterCategoricalFirstHalf,
                       id: 0,
                     },
                     {
-                      label:
-                        locale.datatable.datetimeFilterCategoricalSecondHalf,
+                      label: locale.datatable.datetimeFilterCategoricalSecondHalf,
                       id: 1,
                     },
                   ]}
@@ -641,15 +598,15 @@ function DatetimeColumn(options: OptionsT): DatetimeColumnT {
           let [left, right] = params.range;
 
           if (params.operation === DATETIME_OPERATIONS.RANGE_DATE) {
-            left = set(left, {hours: 0, minutes: 0, seconds: 0});
-            right = set(right, {hours: 0, minutes: 0, seconds: 0});
-            data = set(data, {hours: 0, minutes: 0, seconds: 0});
+            left = set(left, { hours: 0, minutes: 0, seconds: 0 });
+            right = set(right, { hours: 0, minutes: 0, seconds: 0 });
+            data = set(data, { hours: 0, minutes: 0, seconds: 0 });
           }
 
           if (params.operation === DATETIME_OPERATIONS.RANGE_TIME) {
-            left = set(left, {year: 2000, month: 1, date: 1});
-            right = set(right, {year: 2000, month: 1, date: 1});
-            data = set(data, {year: 2000, month: 1, date: 1});
+            left = set(left, { year: 2000, month: 1, date: 1 });
+            right = set(right, { year: 2000, month: 1, date: 1 });
+            data = set(data, { year: 2000, month: 1, date: 1 });
           }
 
           const after = isAfter(data, left) || isEqual(data, left);
@@ -667,12 +624,7 @@ function DatetimeColumn(options: OptionsT): DatetimeColumnT {
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
     renderCell: function RenderDatetimeCell(props) {
-      return (
-        <DatetimeCell
-          value={props.value}
-          formatString={normalizedOptions.formatString}
-        />
-      );
+      return <DatetimeCell value={props.value} formatString={normalizedOptions.formatString} />;
     },
     renderFilter: function RenderDatetimeFilter(props) {
       return <DatetimeFilter {...props} locale={options.locale} />;