baseui 10.9.1 → 10.11.0

package/themes/shared/typography.js.flow

@@ -5,11 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {TypographyT, FontTokensT} from '../types.js';
+import type { TypographyT, FontTokensT } from '../types.js';
 
 export const defaultFontTokens: FontTokensT = {
-  primaryFontFamily:
-    'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  primaryFontFamily: 'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
 };
 
 const monoFontFamily = '"Lucida Console", Monaco, monospace';
@@ -163,24 +162,24 @@ export default (fontTokens?: FontTokensT = defaultFontTokens): TypographyT => {
     DisplayMedium: font1350,
     DisplayLarge: font1450,
 
-    MonoParagraphXSmall: {...font100, fontFamily: monoFontFamily},
-    MonoParagraphSmall: {...font200, fontFamily: monoFontFamily},
-    MonoParagraphMedium: {...font300, fontFamily: monoFontFamily},
-    MonoParagraphLarge: {...font400, fontFamily: monoFontFamily},
-    MonoLabelXSmall: {...font150, fontFamily: monoFontFamily},
-    MonoLabelSmall: {...font250, fontFamily: monoFontFamily},
-    MonoLabelMedium: {...font350, fontFamily: monoFontFamily},
-    MonoLabelLarge: {...font450, fontFamily: monoFontFamily},
-    MonoHeadingXSmall: {...font550, fontFamily: monoFontFamily},
-    MonoHeadingSmall: {...font650, fontFamily: monoFontFamily},
-    MonoHeadingMedium: {...font750, fontFamily: monoFontFamily},
-    MonoHeadingLarge: {...font850, fontFamily: monoFontFamily},
-    MonoHeadingXLarge: {...font950, fontFamily: monoFontFamily},
-    MonoHeadingXXLarge: {...font1050, fontFamily: monoFontFamily},
-    MonoDisplayXSmall: {...font1150, fontFamily: monoFontFamily},
-    MonoDisplaySmall: {...font1250, fontFamily: monoFontFamily},
-    MonoDisplayMedium: {...font1350, fontFamily: monoFontFamily},
-    MonoDisplayLarge: {...font1450, fontFamily: monoFontFamily},
+    MonoParagraphXSmall: { ...font100, fontFamily: monoFontFamily },
+    MonoParagraphSmall: { ...font200, fontFamily: monoFontFamily },
+    MonoParagraphMedium: { ...font300, fontFamily: monoFontFamily },
+    MonoParagraphLarge: { ...font400, fontFamily: monoFontFamily },
+    MonoLabelXSmall: { ...font150, fontFamily: monoFontFamily },
+    MonoLabelSmall: { ...font250, fontFamily: monoFontFamily },
+    MonoLabelMedium: { ...font350, fontFamily: monoFontFamily },
+    MonoLabelLarge: { ...font450, fontFamily: monoFontFamily },
+    MonoHeadingXSmall: { ...font550, fontFamily: monoFontFamily },
+    MonoHeadingSmall: { ...font650, fontFamily: monoFontFamily },
+    MonoHeadingMedium: { ...font750, fontFamily: monoFontFamily },
+    MonoHeadingLarge: { ...font850, fontFamily: monoFontFamily },
+    MonoHeadingXLarge: { ...font950, fontFamily: monoFontFamily },
+    MonoHeadingXXLarge: { ...font1050, fontFamily: monoFontFamily },
+    MonoDisplayXSmall: { ...font1150, fontFamily: monoFontFamily },
+    MonoDisplaySmall: { ...font1250, fontFamily: monoFontFamily },
+    MonoDisplayMedium: { ...font1350, fontFamily: monoFontFamily },
+    MonoDisplayLarge: { ...font1450, fontFamily: monoFontFamily },
   };
 };
 

package/themes/types.js.flow

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {ResponsiveT, CSSLengthUnitT} from '../layout-grid/types.js';
+import type { ResponsiveT, CSSLengthUnitT } from '../layout-grid/types.js';
 
-type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-type LineStyle =
+export type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
+export type LineStyle =
   | 'dashed'
   | 'dotted'
   | 'double'

package/timepicker/index.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as TimePicker} from './timepicker.js';
+export { default as TimePicker } from './timepicker.js';
 // Flow
 export type * from './types.js';
 

package/timepicker/timepicker.js

@@ -379,8 +379,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var _getOverrides = (0, _overrides.getOverrides)(overrides.Select, _index2.Select),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           OverriddenSelect = _getOverrides2[0],
-          selectProps = _getOverrides2[1]; // $FlowFixMe
-
+          selectProps = _getOverrides2[1];
 
       selectProps.overrides = (0, _overrides.mergeOverrides)({
         Dropdown: {
@@ -388,8 +387,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
             maxHeight: '126px'
           }
         }
-      }, // $FlowFixMe
-      selectProps.overrides);
+      }, selectProps.overrides);
       var value = this.props.value && adapter.isValid(this.props.value) ? this.buildSelectedOption(this.props.value, this.props.format) : this.state.value;
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
         var ariaLabel;

package/timepicker/timepicker.js.flow

@@ -8,27 +8,20 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {LocaleContext} from '../locale/index.js';
-import type {OnChangeParamsT, OptionT} from '../select/index.js';
-import {filterOptions, Select} from '../select/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
+import type { OnChangeParamsT, OptionT } from '../select/index.js';
+import { filterOptions, Select } from '../select/index.js';
 import DateHelpers from '../datepicker/utils/date-helpers.js';
 import dateFnsAdapter from '../datepicker/utils/date-fns-adapter.js';
-import type {
-  TimePickerDefaultPropsT,
-  TimePickerPropsT,
-  TimePickerStateT,
-} from './types.js';
+import type { TimePickerDefaultPropsT, TimePickerPropsT, TimePickerStateT } from './types.js';
 
 const MINUTE = 60;
 const HOUR = MINUTE * 60;
 const DAY = HOUR * 24;
 const NOON = DAY / 2;
 
-class TimePicker<T = Date> extends React.Component<
-  TimePickerPropsT<T>,
-  TimePickerStateT,
-> {
+class TimePicker<T = Date> extends React.Component<TimePickerPropsT<T>, TimePickerStateT> {
   static defaultProps: TimePickerDefaultPropsT = {
     format: '12',
     step: 900,
@@ -38,7 +31,7 @@ class TimePicker<T = Date> extends React.Component<
   };
   dateHelpers: DateHelpers<T>;
 
-  state = {steps: [], value: null};
+  state = { steps: [], value: null };
 
   constructor(props: TimePickerPropsT<T>) {
     super(props);
@@ -56,7 +49,7 @@ class TimePicker<T = Date> extends React.Component<
     } else {
       const seconds = this.dateHelpers.dateToSeconds(this.props.adapter.date());
       let closestStep = NOON;
-      steps.forEach(step => {
+      steps.forEach((step) => {
         if (Math.abs(step - seconds) < Math.abs(closestStep - seconds)) {
           closestStep = step;
         }
@@ -87,15 +80,15 @@ class TimePicker<T = Date> extends React.Component<
     }
     if (formatChanged || stepChanged || minTimeChange || maxTimeChange) {
       const steps = this.buildSteps();
-      this.setState({steps});
+      this.setState({ steps });
     }
     if (prevProps.value && !this.props.value) {
-      this.setState({value: null});
+      this.setState({ value: null });
     }
   }
 
   onChange = (params: OnChangeParamsT) => {
-    this.setState({value: params.value[0]});
+    this.setState({ value: params.value[0] });
     if (params.value.length === 0) {
       if (this.props.nullable) {
         this.props.onChange && this.props.onChange(null);
@@ -111,7 +104,7 @@ class TimePicker<T = Date> extends React.Component<
 
   secondsToLabel = (seconds: number, format?: '12' | '24') => {
     let [hours, minutes] = this.dateHelpers.secondsToHourMinute(seconds);
-    const zeroPrefix = n => (n < 10 ? `0${n}` : n);
+    const zeroPrefix = (n) => (n < 10 ? `0${n}` : n);
 
     if (format === '12') {
       const isAfterNoon = seconds >= NOON;
@@ -133,10 +126,7 @@ class TimePicker<T = Date> extends React.Component<
    * Converts a time string, e.g. 10:00, to one or more possible TimePicker
    * options representing that time.
    */
-  stringToOptions: (string, format?: '12' | '24') => Array<OptionT> = (
-    str,
-    format = '12',
-  ) => {
+  stringToOptions: (string, format?: '12' | '24') => Array<OptionT> = (str, format = '12') => {
     // leading zero is optional, AM/PM is optional
     const twelveHourRegex = /^(1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]?)?$/;
     // leading zero is optional
@@ -152,7 +142,7 @@ class TimePicker<T = Date> extends React.Component<
     let hoursMinutes = [];
     switch (format) {
       case '24': {
-        hoursMinutes = [{hours, minutes}];
+        hoursMinutes = [{ hours, minutes }];
         break;
       }
       case '12':
@@ -162,22 +152,22 @@ class TimePicker<T = Date> extends React.Component<
         // if there's no AM/PM, add both AM and PM options
         if (!meridiem) {
           hoursMinutes = [
-            {hours: twelveHours, minutes},
-            {hours: twelveHours + 12, minutes},
+            { hours: twelveHours, minutes },
+            { hours: twelveHours + 12, minutes },
           ];
         } else {
           const twentyFourHours =
             meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12;
 
-          hoursMinutes = [{hours: twentyFourHours, minutes}];
+          hoursMinutes = [{ hours: twentyFourHours, minutes }];
         }
         break;
       }
     }
 
-    return hoursMinutes.map(({hours, minutes}) => {
+    return hoursMinutes.map(({ hours, minutes }) => {
       const secs = hours * 3600 + minutes * 60;
-      return {id: secs, label: this.secondsToLabel(secs, format)};
+      return { id: secs, label: this.secondsToLabel(secs, format) };
     });
   };
 
@@ -187,42 +177,29 @@ class TimePicker<T = Date> extends React.Component<
     this.props.onChange && this.props.onChange(updatedDate);
   };
 
-  setTime: (?T, number, number, number) => T = (
-    val,
-    hours,
-    minutes,
-    seconds,
-  ) => {
-    const {setSeconds, setMinutes, setHours} = this.dateHelpers;
-    const date = this.props.adapter.startOfDay(
-      this.props.adapter.date(val || undefined),
-    );
+  setTime: (?T, number, number, number) => T = (val, hours, minutes, seconds) => {
+    const { setSeconds, setMinutes, setHours } = this.dateHelpers;
+    const date = this.props.adapter.startOfDay(this.props.adapter.date(val || undefined));
     return setSeconds(setMinutes(setHours(date, hours), minutes), seconds);
   };
 
-  getTimeWindowInSeconds = (step: number): {start: number, end: number} => {
-    let {minTime: min, maxTime: max, ignoreMinMaxDateComponent} = this.props;
+  getTimeWindowInSeconds = (step: number): { start: number, end: number } => {
+    let { minTime: min, maxTime: max, ignoreMinMaxDateComponent } = this.props;
     const dayStart = this.setTime(this.props.value, 0, 0, 0);
     const dayEnd = this.setTime(this.props.value, 24, 0, 0);
 
-    if (
-      !min ||
-      (this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent)
-    ) {
+    if (!min || (this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent)) {
       min = dayStart;
     } else {
       min = this.setTime(
         this.props.value,
         this.props.adapter.getHours(min),
         this.props.adapter.getMinutes(min),
-        this.props.adapter.getSeconds(min),
+        this.props.adapter.getSeconds(min)
       );
     }
 
-    if (
-      !max ||
-      (this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent)
-    ) {
+    if (!max || (this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent)) {
       max = dayEnd;
     } else {
       max = this.setTime(
@@ -230,7 +207,7 @@ class TimePicker<T = Date> extends React.Component<
         this.props.adapter.getHours(max),
         this.props.adapter.getMinutes(max),
         // maxTime (if provided) should be inclusive, so add an extra second here
-        this.props.adapter.getSeconds(max) + 1,
+        this.props.adapter.getSeconds(max) + 1
       );
     }
 
@@ -244,14 +221,14 @@ class TimePicker<T = Date> extends React.Component<
   };
 
   buildSteps = () => {
-    const {step = 900} = this.props;
+    const { step = 900 } = this.props;
 
     const timeWindow = this.getTimeWindowInSeconds(step);
     let stepCount = (timeWindow.end - timeWindow.start) / step;
     if (__DEV__ && stepCount > 500) {
       // eslint-disable-next-line no-console
       console.warn(
-        `Provided step value (${step}) results in ${stepCount} steps. Performance may suffer when more than 500 elements are rendered.`,
+        `Provided step value (${step}) results in ${stepCount} steps. Performance may suffer when more than 500 elements are rendered.`
       );
     }
 
@@ -262,7 +239,7 @@ class TimePicker<T = Date> extends React.Component<
       if (__DEV__) {
         // eslint-disable-next-line no-console
         console.warn(
-          `Provided step value (${step}) does not spread evenly across a day. Rounding from ${previousStepCount} total steps to ${stepCount}.`,
+          `Provided step value (${step}) does not spread evenly across a day. Rounding from ${previousStepCount} total steps to ${stepCount}.`
         );
       }
     }
@@ -278,7 +255,7 @@ class TimePicker<T = Date> extends React.Component<
     options,
     filterValue,
     excludeOptions,
-    newProps,
+    newProps
   ) => {
     const result = this.stringToOptions(filterValue, this.props.format);
     if (result.length) {
@@ -287,10 +264,7 @@ class TimePicker<T = Date> extends React.Component<
     return filterOptions(options, filterValue, excludeOptions, newProps);
   };
 
-  buildSelectedOption: (T, ?'12' | '24') => OptionT = (
-    value,
-    format = '12',
-  ) => {
+  buildSelectedOption: (T, ?'12' | '24') => OptionT = (value, format = '12') => {
     const secs = this.dateHelpers.dateToSeconds(value);
     return {
       id: secs,
@@ -299,17 +273,12 @@ class TimePicker<T = Date> extends React.Component<
   };
 
   render() {
-    const {format, overrides = {}, adapter} = this.props;
+    const { format, overrides = {}, adapter } = this.props;
 
-    const [OverriddenSelect, selectProps] = getOverrides(
-      overrides.Select,
-      Select,
-    );
-    // $FlowFixMe
+    const [OverriddenSelect, selectProps] = getOverrides(overrides.Select, Select);
     selectProps.overrides = mergeOverrides(
-      {Dropdown: {style: {maxHeight: '126px'}}},
-      // $FlowFixMe
-      selectProps.overrides,
+      { Dropdown: { style: { maxHeight: '126px' } } },
+      selectProps.overrides
     );
 
     const value =
@@ -319,7 +288,7 @@ class TimePicker<T = Date> extends React.Component<
 
     return (
       <LocaleContext.Consumer>
-        {locale => {
+        {(locale) => {
           let ariaLabel;
 
           if (locale.datepicker.timePickerAriaLabel) {
@@ -339,13 +308,11 @@ class TimePicker<T = Date> extends React.Component<
               positive={this.props.positive}
               size={this.props.size}
               placeholder={this.props.placeholder || 'HH:mm'}
-              options={this.state.steps.map(n => ({
+              options={this.state.steps.map((n) => ({
                 id: n,
                 label: this.secondsToLabel(n, this.props.format),
               }))}
-              filterOptions={
-                this.props.creatable ? this.creatableFilterOptions : undefined
-              }
+              filterOptions={this.props.creatable ? this.creatableFilterOptions : undefined}
               onChange={this.onChange}
               // if value is defined, it should be an array type
               value={value ? [value] : value}

package/timepicker/types.js.flow

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 /* eslint-disable flowtype/generic-spacing */
-import type {OverrideT} from '../helpers/overrides.js';
-import type {OptionT} from '../select/index.js';
-import type {SizeT} from '../input/types.js';
-import type {DateIOAdapter} from '../datepicker/utils/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { OptionT } from '../select/index.js';
+import type { SizeT } from '../input/types.js';
+import type { DateIOAdapter } from '../datepicker/utils/types.js';
 
 export type TimePickerPropsT<T = Date> = {
   /** Render options in AM/PM format or 24 hour format. Defaults to 12 hour. */

package/timezonepicker/index.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as TimezonePicker} from './timezone-picker.js';
+export { default as TimezonePicker } from './timezone-picker.js';
 
 export type * from './types.js';
 

package/timezonepicker/timezone-picker.js

@@ -95,7 +95,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           try {
             var offset = (0, _dateFnsTz.getTimezoneOffset)(zoneName, compareDate) / 3600000;
             var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
-            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace(/_/g, ' '));
 
             if (_this.props.includeAbbreviations) {
               var abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {
@@ -107,10 +107,12 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
               }
             }
 
+            var offsetMinutes = offset * 60;
             timezones.push({
               id: zoneName,
               label: label,
-              offset: offset
+              // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+              offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
             });
           } catch (error) {
             // Ignores timezones that are not available within a user's browser/operating system
@@ -199,16 +201,13 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           OverriddenSelect = _getOverrides2[0],
           selectProps = _getOverrides2[1];
 
-      var selectOverrides = (0, _overrides.mergeOverrides)({
+      selectProps.overrides = (0, _overrides.mergeOverrides)({
         Dropdown: {
           style: {
             maxHeight: '360px'
           }
         }
-      }, // $FlowFixMe
-      selectProps.overrides); // $FlowFixMe
-
-      selectProps.overrides = selectOverrides;
+      }, selectProps.overrides);
       var options = this.state.timezones;
 
       if (this.props.mapLabels) {

package/timezonepicker/timezone-picker.js.flow

@@ -8,24 +8,17 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {format, getTimezoneOffset} from 'date-fns-tz';
+import { format, getTimezoneOffset } from 'date-fns-tz';
 
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {LocaleContext} from '../locale/index.js';
-import {Select} from '../select/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
+import { Select } from '../select/index.js';
 
-import type {
-  TimezonePickerPropsT,
-  TimezonePickerStateT,
-  TimezoneT,
-} from './types.js';
-import {zones} from './tzdata.js';
+import type { TimezonePickerPropsT, TimezonePickerStateT, TimezoneT } from './types.js';
+import { zones } from './tzdata.js';
 
-class TimezonePicker extends React.Component<
-  TimezonePickerPropsT,
-  TimezonePickerStateT,
-> {
-  state = {timezones: [], value: null};
+class TimezonePicker extends React.Component<TimezonePickerPropsT, TimezonePickerStateT> {
+  state = { timezones: [], value: null };
 
   componentDidMount() {
     const timezones = this.buildTimezones(this.props.date || new Date());
@@ -33,15 +26,15 @@ class TimezonePicker extends React.Component<
     if (__BROWSER__) {
       if (!this.props.value) {
         const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        this.setState({timezones, value: tz});
+        this.setState({ timezones, value: tz });
 
-        const option = timezones.find(o => o.id === tz);
+        const option = timezones.find((o) => o.id === tz);
         option && this.props.onChange && this.props.onChange(option);
       } else {
-        this.setState({timezones});
+        this.setState({ timezones });
       }
     } else {
-      this.setState({timezones});
+      this.setState({ timezones });
     }
   }
 
@@ -50,9 +43,9 @@ class TimezonePicker extends React.Component<
     const nextTime = this.props.date ? this.props.date.getTime() : 0;
     if (prevTime !== nextTime) {
       const timezones = this.buildTimezones(this.props.date || new Date());
-      this.setState({timezones});
+      this.setState({ timezones });
 
-      const option = timezones.find(o => o.id === this.state.value);
+      const option = timezones.find((o) => o.id === this.state.value);
       option && this.props.onChange && this.props.onChange(option);
     }
   }
@@ -64,19 +57,22 @@ class TimezonePicker extends React.Component<
         const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
 
         const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
-        let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+        let label = `(GMT${offsetFormatted}) ${zoneName.replace(/_/g, ' ')}`;
 
         if (this.props.includeAbbreviations) {
-          const abbreviation = format(compareDate, 'zzz', {timeZone: zoneName});
+          const abbreviation = format(compareDate, 'zzz', { timeZone: zoneName });
           if (abbreviation) {
             label += ` - ${abbreviation}`;
           }
         }
 
+        const offsetMinutes = offset * 60;
+
         timezones.push({
           id: zoneName,
           label,
-          offset,
+          // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+          offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1,
         });
       } catch (error) {
         // Ignores timezones that are not available within a user's browser/operating system
@@ -98,24 +94,18 @@ class TimezonePicker extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
-    const [OverriddenSelect, selectProps] = getOverrides(
-      overrides.Select,
-      Select,
-    );
-    const selectOverrides = mergeOverrides(
+    const { overrides = {} } = this.props;
+    const [OverriddenSelect, selectProps] = getOverrides(overrides.Select, Select);
+    selectProps.overrides = mergeOverrides(
       {
-        Dropdown: {style: {maxHeight: '360px'}},
+        Dropdown: { style: { maxHeight: '360px' } },
       },
-      // $FlowFixMe
-      selectProps.overrides,
+      selectProps.overrides
     );
-    // $FlowFixMe
-    selectProps.overrides = selectOverrides;
 
     let options = this.state.timezones;
     if (this.props.mapLabels) {
-      options = options.map(option => {
+      options = options.map((option) => {
         // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
         option.label = this.props.mapLabels(option);
         return option;
@@ -124,7 +114,7 @@ class TimezonePicker extends React.Component<
 
     return (
       <LocaleContext.Consumer>
-        {locale => (
+        {(locale) => (
           <OverriddenSelect
             aria-label={locale.datepicker.timezonePickerAriaLabel}
             options={options}
@@ -133,18 +123,18 @@ class TimezonePicker extends React.Component<
             error={this.props.error}
             positive={this.props.positive}
             size={this.props.size}
-            onChange={params => {
+            onChange={(params) => {
               if (params.type === 'clear') {
-                this.setState({value: ''});
+                this.setState({ value: '' });
                 this.props.onChange && this.props.onChange(null);
               } else {
-                this.setState({value: params.option.id});
+                this.setState({ value: params.option.id });
                 this.props.onChange && this.props.onChange(params.option);
               }
             }}
             value={
               this.props.value || this.state.value
-                ? [{id: this.props.value || this.state.value}]
+                ? [{ id: this.props.value || this.state.value }]
                 : null
             }
             {...selectProps}

package/timezonepicker/types.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
-import type {OptionT} from '../select/index.js';
-import type {SizeT} from '../input/types.js';
+import type { OptionT } from '../select/index.js';
+import type { SizeT } from '../input/types.js';
 
 export type TimezonePickerStateT = {
   /** List of timezones from the IANA database. */
@@ -22,6 +22,11 @@ export type TimezonePickerStateT = {
 export type TimezoneT = {
   id: string,
   label: string,
+  /**
+   * The difference, in minutes, between a UTC date, and a date in the indicated time zone.
+   * Positive values indicate hours behind UTC, negative values indicate hours ahead.
+   * This aligns with Date.getTimezoneOffset()
+   */
   offset: number,
 };
 export type TimezonePickerPropsT = {
@@ -37,10 +42,10 @@ export type TimezonePickerPropsT = {
    * Customize the option's label. Useful for translations and optionally mapping from
    * 'America/Los_Angeles' to 'Pacific Time'.
    */
-  mapLabels?: OptionT => React.Node,
+  mapLabels?: (OptionT) => React.Node,
   /** Callback for when the timezone selection changes. */
   onChange?: (value: ?TimezoneT) => mixed,
-  overrides?: {Select?: OverrideT},
+  overrides?: { Select?: OverrideT },
   /**
    * Optional value that can be provided to fully control the component. If not provided,
    * TimezonePicker will manage state internally.