baseui 10.10.0 → 10.11.0

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,21 +29,21 @@ 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>,
   formatString?: string,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   locale?: any,
 |};
 
@@ -123,21 +123,18 @@ const QUARTERS = [0, 1, 2, 3];
 function Checks(props) {
   const [css, theme] = useStyletron();
   return (
-    <div className={css({maxHeight: '256px', overflowY: 'auto'})}>
-      {props.options.map(item => {
+    <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={() => {
                 if (checked) {
-                  props.setValue(prev => prev.filter(i => i !== item.id));
+                  props.setValue((prev) => prev.filter((i) => i !== item.id));
                 } else {
-                  props.setValue(prev => [...prev, item.id]);
+                  props.setValue((prev) => [...prev, item.id]);
                 }
               }}
             >
@@ -216,50 +213,36 @@ function DatetimeFilter(props) {
   }, [props.data]);
   const presentYears = React.useMemo(() => {
     const dict = {};
-    props.data.forEach(date => {
+    props.data.forEach((date) => {
       dict[getYear(date)] = true;
     });
-    return Object.keys(dict).map(n => parseInt(n));
+    return Object.keys(dict).map((n) => parseInt(n));
   }, [props.data]);
   const startOfWeek = React.useMemo(() => {
     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,
   ]);
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   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;
@@ -270,7 +253,7 @@ function DatetimeFilter(props) {
       onExcludeChange={() => setExclude(!exclude)}
       onApply={() => {
         if (isRange) {
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           const op: DatetimeOperationsT = (rangeOperator[0].id: any);
 
           let description = '';
@@ -298,7 +281,7 @@ function DatetimeFilter(props) {
         }
 
         if (isCategorical) {
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           const op: DatetimeOperationsT = (categoricalOperator[0].id: any);
 
           let selection: number[] = [];
@@ -308,7 +291,7 @@ function DatetimeFilter(props) {
             selection = weekdays;
             operatorLocaleLabelKey = CATEGORICAL_OPERATIONS[0].localeLabelKey;
             description = weekdays
-              .map(w => {
+              .map((w) => {
                 const day = addDays(startOfWeek, localizedWeekdays.indexOf(w));
 
                 return getWeekdayInLocale(day, props.locale);
@@ -317,23 +300,19 @@ 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;
             description = halves
-              .map(h =>
+              .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>
@@ -388,10 +361,10 @@ function DatetimeFilter(props) {
           <div>
             <Select
               value={rangeOperator}
-              onChange={params => setRangeOperator(params.value)}
-              // eslint-disable-next-line flowtype/no-weak-types
+              onChange={(params) => setRangeOperator(params.value)}
+              // flowlint-next-line unclear-type:off
               mountNode={(mountNode.current: any)}
-              options={RANGE_OPERATIONS.map(op => ({
+              options={RANGE_OPERATIONS.map((op) => ({
                 label: locale.datatable[op.localeLabelKey],
                 id: op.id,
               }))}
@@ -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
-                  // eslint-disable-next-line flowtype/no-weak-types
+                  // 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}
@@ -451,12 +418,8 @@ function DatetimeFilter(props) {
                   <TimePicker
                     format="24"
                     value={rangeDates[0]}
-                    onChange={time =>
-                      time &&
-                      setRangeDates([
-                        applyTimeToDate(rangeDates[0], time),
-                        rangeDates[1],
-                      ])
+                    onChange={(time) =>
+                      time && setRangeDates([applyTimeToDate(rangeDates[0], time), rangeDates[1]])
                     }
                     creatable
                     size="compact"
@@ -471,12 +434,8 @@ function DatetimeFilter(props) {
                   <TimePicker
                     format="24"
                     value={rangeDates[1]}
-                    onChange={time =>
-                      time &&
-                      setRangeDates([
-                        rangeDates[0],
-                        applyTimeToDate(rangeDates[1], time),
-                      ])
+                    onChange={(time) =>
+                      time && setRangeDates([rangeDates[0], applyTimeToDate(rangeDates[1], time)])
                     }
                     creatable
                     size="compact"
@@ -491,12 +450,12 @@ function DatetimeFilter(props) {
           <div>
             <Select
               value={categoricalOperator}
-              onChange={params => setCategoricalOperator(params.value)}
-              options={CATEGORICAL_OPERATIONS.map(op => ({
+              onChange={(params) => setCategoricalOperator(params.value)}
+              options={CATEGORICAL_OPERATIONS.map((op) => ({
                 label: locale.datatable[op.localeLabelKey],
                 id: op.id,
               }))}
-              // eslint-disable-next-line flowtype/no-weak-types
+              // flowlint-next-line unclear-type:off
               mountNode={(mountNode.current: any)}
               size="compact"
               clearable={false}
@@ -527,7 +486,7 @@ function DatetimeFilter(props) {
                 <Checks
                   value={months}
                   setValue={setMonths}
-                  options={MONTHS.map(m => ({
+                  options={MONTHS.map((m) => ({
                     label: getMonthInLocale(m, props.locale),
                     id: m,
                   }))}
@@ -538,7 +497,7 @@ function DatetimeFilter(props) {
                 <Checks
                   value={quarters}
                   setValue={setQuarters}
-                  options={QUARTERS.map(q => ({
+                  options={QUARTERS.map((q) => ({
                     label: getQuarterInLocale(q, props.locale),
                     id: q,
                   }))}
@@ -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,
                     },
                   ]}
@@ -568,7 +525,7 @@ function DatetimeFilter(props) {
                 <Checks
                   value={years}
                   setValue={setYears}
-                  options={presentYears.map(year => ({
+                  options={presentYears.map((year) => ({
                     label: year,
                     id: year,
                   }))}
@@ -614,8 +571,8 @@ function DatetimeColumn(options: OptionsT): DatetimeColumnT {
 
   return Column({
     kind: COLUMNS.DATETIME,
-    buildFilter: function(params) {
-      return function(data) {
+    buildFilter: function (params) {
+      return function (data) {
         let included = true;
         if (params.operation === DATETIME_OPERATIONS.YEAR) {
           included = params.selection.includes(getYear(data));
@@ -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} />;

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

@@ -8,23 +8,18 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button, SIZE} from '../button/index.js';
-import {ButtonGroup, MODE} from '../button-group/index.js';
-import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
-import {useStyletron} from '../styles/index.js';
+import { Button, SIZE } from '../button/index.js';
+import { ButtonGroup, MODE } from '../button-group/index.js';
+import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import Column from './column.js';
-import {
-  COLUMNS,
-  NUMERICAL_FORMATS,
-  MAX_BIN_COUNT,
-  HISTOGRAM_SIZE,
-} from './constants.js';
-import FilterShell, {type ExcludeKind} from './filter-shell.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
-import {bin, max as maxFunc, extent, scaleLinear, median, bisector} from 'd3';
-import {Slider} from '../slider/index.js';
+import { COLUMNS, NUMERICAL_FORMATS, MAX_BIN_COUNT, HISTOGRAM_SIZE } from './constants.js';
+import FilterShell, { type ExcludeKind } from './filter-shell.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
+import { bin, max as maxFunc, extent, scaleLinear, median, bisector } from 'd3';
+import { Slider } from '../slider/index.js';
 
 type NumericalFormats =
   | typeof NUMERICAL_FORMATS.DEFAULT
@@ -34,7 +29,7 @@ type NumericalFormats =
 type OptionsT = {|
   ...SharedColumnOptionsT<number>,
   format?: NumericalFormats | ((value: number) => string),
-  highlight?: number => boolean,
+  highlight?: (number) => boolean,
   precision?: number,
 |};
 
@@ -84,7 +79,7 @@ function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
 }
 
-const bisect = bisector(d => d.x0);
+const bisect = bisector((d) => d.x0);
 
 const Histogram = React.memo(function Histogram({
   data,
@@ -96,7 +91,7 @@ const Histogram = React.memo(function Histogram({
 }) {
   const [css, theme] = useStyletron();
 
-  const {bins, xScale, yScale} = React.useMemo(() => {
+  const { bins, xScale, yScale } = React.useMemo(() => {
     const bins = bin().thresholds(Math.min(data.length, MAX_BIN_COUNT))(data);
 
     const xScale = scaleLinear()
@@ -105,10 +100,10 @@ const Histogram = React.memo(function Histogram({
       .clamp(true);
 
     const yScale = scaleLinear()
-      .domain([0, maxFunc(bins, d => d.length)])
+      .domain([0, maxFunc(bins, (d) => d.length)])
       .nice()
       .range([HISTOGRAM_SIZE.height, 0]);
-    return {bins, xScale, yScale};
+    return { bins, xScale, yScale };
   }, [data]);
 
   // We need to find the index of bar which is nearest to the given single value
@@ -205,16 +200,16 @@ function NumericalFilter(props) {
   const [min, max] = React.useMemo(() => extent(props.data), [props.data]);
 
   const [lv, setLower] = React.useState<number>(() =>
-    roundToFixed(initialState.lowerValue || min, precision),
+    roundToFixed(initialState.lowerValue || min, precision)
   );
   const [uv, setUpper] = React.useState<number>(() =>
-    roundToFixed(initialState.upperValue || max, precision),
+    roundToFixed(initialState.upperValue || max, precision)
   );
 
   // We keep a separate value for the single select, to give a user the ability to toggle between
   // the range and single values without losing their previous input.
   const [sv, setSingle] = React.useState<number>(() =>
-    roundToFixed(initialState.lowerValue || median(props.data), precision),
+    roundToFixed(initialState.lowerValue || median(props.data), precision)
   );
 
   // This is the only conditional which we want to use to determine
@@ -250,7 +245,7 @@ function NumericalFilter(props) {
         .rangeRound([1, MAX_BIN_COUNT])
         // We clamp the values within our min and max even if a user enters a huge number
         .clamp(true),
-    [min, max],
+    [min, max]
   );
 
   let sliderValue = isRange
@@ -299,20 +294,20 @@ function NumericalFilter(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%'}}}}
+          overrides={{ BaseButton: { style: { width: '100%' } } }}
           aria-label={locale.datatable.numericalFilterRange}
         >
           {locale.datatable.numericalFilterRange}
         </Button>
         <Button
           type="button"
-          overrides={{BaseButton: {style: {width: '100%'}}}}
+          overrides={{ BaseButton: { style: { width: '100%' } } }}
           aria-label={locale.datatable.numericalFilterSingleValue}
         >
           {locale.datatable.numericalFilterSingleValue}
@@ -328,7 +323,7 @@ function NumericalFilter(props) {
         precision={props.options.precision}
       />
 
-      <div className={css({display: 'flex', justifyContent: 'space-between'})}>
+      <div className={css({ display: 'flex', justifyContent: 'space-between' })}>
         <Slider
           // The slider throws errors when switching between single and two values
           // when it tries to read getThumbDistance on a thumb which is not there anymore
@@ -337,7 +332,7 @@ function NumericalFilter(props) {
           min={1}
           max={MAX_BIN_COUNT}
           value={sliderValue}
-          onChange={({value}) => {
+          onChange={({ value }) => {
             if (!value) {
               return;
             }
@@ -352,10 +347,10 @@ function NumericalFilter(props) {
             }
           }}
           overrides={{
-            InnerThumb: function InnerThumb({$value, $thumbIndex}) {
+            InnerThumb: function InnerThumb({ $value, $thumbIndex }) {
               return <React.Fragment>{$value[$thumbIndex]}</React.Fragment>;
             },
-            TickBar: ({$min, $max}) => null, // we don't want the ticks
+            TickBar: ({ $min, $max }) => null, // we don't want the ticks
             ThumbValue: () => null,
             Root: {
               style: () => ({
@@ -365,7 +360,7 @@ function NumericalFilter(props) {
               }),
             },
             InnerTrack: {
-              style: ({$theme}) => {
+              style: ({ $theme }) => {
                 if (!isRange) {
                   return {
                     // For range selection we use the color as is, but when selecting the single value,
@@ -399,9 +394,9 @@ function NumericalFilter(props) {
           min={min}
           max={max}
           size={INPUT_SIZE.mini}
-          overrides={{Root: {style: {width: '100%'}}}}
+          overrides={{ Root: { style: { width: '100%' } } }}
           value={inputValueLower}
-          onChange={event => {
+          onChange={(event) => {
             if (validateInput(event.target.value)) {
               isRange
                 ? // $FlowFixMe - we know it is a number by now
@@ -419,11 +414,11 @@ function NumericalFilter(props) {
             max={max}
             size={INPUT_SIZE.mini}
             overrides={{
-              Input: {style: {textAlign: 'right'}},
-              Root: {style: {width: '100%'}},
+              Input: { style: { textAlign: 'right' } },
+              Root: { style: { width: '100%' } },
             }}
             value={inputValueUpper}
-            onChange={event => {
+            onChange={(event) => {
               if (validateInput(event.target.value)) {
                 // $FlowFixMe - we know it is a number by now
                 setUpper(event.target.value);
@@ -446,9 +441,7 @@ function NumericalCell(props) {
         ...theme.typography.MonoParagraphXSmall,
         display: 'flex',
         justifyContent: theme.direction !== 'rtl' ? 'flex-end' : 'flex-start',
-        color: props.highlight(props.value)
-          ? theme.colors.contentNegative
-          : null,
+        color: props.highlight(props.value) ? theme.colors.contentNegative : null,
         width: '100%',
       })}
     >
@@ -465,7 +458,7 @@ const defaultOptions = {
   sortable: true,
   filterable: true,
   format: NUMERICAL_FORMATS.DEFAULT,
-  highlight: (n => false: number => boolean),
+  highlight: ((n) => false: (number) => boolean),
   precision: 0,
 };
 
@@ -491,11 +484,10 @@ function NumericalColumn(options: OptionsT): NumericalColumnT {
 
   return Column({
     kind: COLUMNS.NUMERICAL,
-    buildFilter: function(params) {
-      return function(data) {
+    buildFilter: function (params) {
+      return function (data) {
         const value = roundToFixed(data, normalizedOptions.precision);
-        const included =
-          value >= params.lowerValue && value <= params.upperValue;
+        const included = value >= params.lowerValue && value <= params.upperValue;
         return params.exclude ? !included : included;
       };
     },
@@ -519,7 +511,7 @@ function NumericalColumn(options: OptionsT): NumericalColumnT {
       return <NumericalFilter {...props} options={normalizedOptions} />;
     },
     sortable: normalizedOptions.sortable,
-    sortFn: function(a, b) {
+    sortFn: function (a, b) {
       return a - b;
     },
     title: normalizedOptions.title,

package/data-table/column-row-index.js.flow

@@ -8,11 +8,11 @@ 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 Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT} from './types.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT } from './types.js';
 
 type ValueT = null;
 type FilterParametersT = {};