baseui 10.9.1 → 10.11.0

package/datepicker/day.js.flow

@@ -6,19 +6,16 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {StyledDay, StyledDayLabel} from './styled-components.js';
+import { StyledDay, StyledDayLabel } from './styled-components.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {DayPropsT, DayStateT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
-import type {LocaleT} from '../locale/types.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { DayPropsT, DayStateT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
+import type { LocaleT } from '../locale/types.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-export default class Day<T = Date> extends React.Component<
-  DayPropsT<T>,
-  DayStateT,
-> {
+export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStateT> {
   static defaultProps = {
     disabled: false,
     highlighted: false,
@@ -35,7 +32,7 @@ export default class Day<T = Date> extends React.Component<
     value: null,
   };
 
-  dayElm: React.ElementRef<*>;
+  dayElm: React.ElementRef<typeof HTMLElement>;
 
   state = {
     isHovered: false,
@@ -51,10 +48,7 @@ export default class Day<T = Date> extends React.Component<
 
   componentDidMount() {
     if (this.dayElm && this.props.focusedCalendar) {
-      if (
-        this.props.highlighted ||
-        (!this.props.highlightedDate && this.isSelected())
-      ) {
+      if (this.props.highlighted || (!this.props.highlightedDate && this.isSelected())) {
         this.dayElm.focus();
       }
     }
@@ -62,19 +56,14 @@ export default class Day<T = Date> extends React.Component<
 
   componentDidUpdate(prevProps: DayPropsT<T>) {
     if (this.dayElm && this.props.focusedCalendar) {
-      if (
-        this.props.highlighted ||
-        (!this.props.highlightedDate && this.isSelected())
-      ) {
+      if (this.props.highlighted || (!this.props.highlightedDate && this.isSelected())) {
         this.dayElm.focus();
       }
     }
   }
 
   getDateProp: () => T = () => {
-    return this.props.date === undefined
-      ? this.dateHelpers.date()
-      : this.props.date;
+    return this.props.date === undefined ? this.dateHelpers.date() : this.props.date;
   };
 
   getMonthProp: () => number = () => {
@@ -83,8 +72,8 @@ export default class Day<T = Date> extends React.Component<
       : this.props.month;
   };
 
-  onSelect: T => void = selectedDate => {
-    const {range, value} = this.props;
+  onSelect: (T) => void = (selectedDate) => {
+    const { range, value } = this.props;
     let date;
     if (Array.isArray(value) && range) {
       if (!value.length || value.length > 1) {
@@ -97,12 +86,12 @@ export default class Day<T = Date> extends React.Component<
     } else {
       date = selectedDate;
     }
-    this.props.onSelect({date});
+    this.props.onSelect({ date });
   };
 
   onKeyDown = (event: KeyboardEvent) => {
     const date = this.getDateProp();
-    const {highlighted, disabled} = this.props;
+    const { highlighted, disabled } = this.props;
     if (event.key === 'Enter' && highlighted && !disabled) {
       event.preventDefault();
       this.onSelect(date);
@@ -111,58 +100,49 @@ export default class Day<T = Date> extends React.Component<
 
   onClick = (event: Event) => {
     const date = this.getDateProp();
-    const {disabled} = this.props;
+    const { disabled } = this.props;
     if (!disabled) {
-      this.props.onClick({event, date});
+      this.props.onClick({ event, date });
       this.onSelect(date);
     }
   };
 
   onFocus = (event: Event) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
-    this.props.onFocus({event, date: this.getDateProp()});
+    this.props.onFocus({ event, date: this.getDateProp() });
   };
 
   onBlur = (event: Event) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
-    this.props.onBlur({event, date: this.getDateProp()});
+    this.props.onBlur({ event, date: this.getDateProp() });
   };
 
   onMouseOver = (event: Event) => {
-    this.setState({isHovered: true});
-    this.props.onMouseOver({event, date: this.getDateProp()});
+    this.setState({ isHovered: true });
+    this.props.onMouseOver({ event, date: this.getDateProp() });
   };
 
   onMouseLeave = (event: Event) => {
-    this.setState({isHovered: false});
-    this.props.onMouseLeave({event, date: this.getDateProp()});
+    this.setState({ isHovered: false });
+    this.props.onMouseLeave({ event, date: this.getDateProp() });
   };
 
   isOutsideMonth = () => {
     const month = this.getMonthProp();
-    return (
-      month !== undefined &&
-      month !== this.dateHelpers.getMonth(this.getDateProp())
-    );
+    return month !== undefined && month !== this.dateHelpers.getMonth(this.getDateProp());
   };
 
   getOrderedDates: () => T[] = () => {
-    const {highlightedDate, value} = this.props;
-    if (
-      !value ||
-      !Array.isArray(value) ||
-      !value[0] ||
-      (!value[1] && !highlightedDate)
-    ) {
+    const { highlightedDate, value } = this.props;
+    if (!value || !Array.isArray(value) || !value[0] || (!value[1] && !highlightedDate)) {
       return [];
     }
     const firstValue = value[0];
-    const secondValue =
-      value.length > 1 && value[1] ? value[1] : highlightedDate;
+    const secondValue = value.length > 1 && value[1] ? value[1] : highlightedDate;
     if (!firstValue || !secondValue) {
       return [];
     }
@@ -187,49 +167,44 @@ export default class Day<T = Date> extends React.Component<
      */
     if (day > 15) {
       const firstDayOfNextMonth = this.clampToDayStart(
-        this.dateHelpers.addDays(this.dateHelpers.getEndOfMonth(date), 1),
+        this.dateHelpers.addDays(this.dateHelpers.getEndOfMonth(date), 1)
       );
       return (
-        this.dateHelpers.isOnOrBeforeDay(
-          dates[0],
-          this.dateHelpers.getEndOfMonth(date),
-        ) && this.dateHelpers.isOnOrAfterDay(dates[1], firstDayOfNextMonth)
+        this.dateHelpers.isOnOrBeforeDay(dates[0], this.dateHelpers.getEndOfMonth(date)) &&
+        this.dateHelpers.isOnOrAfterDay(dates[1], firstDayOfNextMonth)
       );
     } else {
       const lastDayOfPreviousMonth = this.clampToDayStart(
-        this.dateHelpers.subDays(this.dateHelpers.getStartOfMonth(date), 1),
+        this.dateHelpers.subDays(this.dateHelpers.getStartOfMonth(date), 1)
       );
       return (
-        this.dateHelpers.isOnOrAfterDay(
-          dates[1],
-          this.dateHelpers.getStartOfMonth(date),
-        ) && this.dateHelpers.isOnOrBeforeDay(dates[0], lastDayOfPreviousMonth)
+        this.dateHelpers.isOnOrAfterDay(dates[1], this.dateHelpers.getStartOfMonth(date)) &&
+        this.dateHelpers.isOnOrBeforeDay(dates[0], lastDayOfPreviousMonth)
       );
     }
   };
 
   isSelected() {
     const date = this.getDateProp();
-    const {value} = this.props;
+    const { value } = this.props;
     if (Array.isArray(value)) {
       return (
-        this.dateHelpers.isSameDay(date, value[0]) ||
-        this.dateHelpers.isSameDay(date, value[1])
+        this.dateHelpers.isSameDay(date, value[0]) || this.dateHelpers.isSameDay(date, value[1])
       );
     } else {
       return this.dateHelpers.isSameDay(date, value);
     }
   }
 
-  clampToDayStart: T => T = dt => {
-    const {setSeconds, setMinutes, setHours} = this.dateHelpers;
+  clampToDayStart: (T) => T = (dt) => {
+    const { setSeconds, setMinutes, setHours } = this.dateHelpers;
     return setSeconds(setMinutes(setHours(dt, 0), 0), 0);
   };
 
   // calculated for range case only
   isPseudoSelected() {
     const date = this.getDateProp();
-    const {value} = this.props;
+    const { value } = this.props;
     if (Array.isArray(value) && !value[0] && !value[1]) {
       return false;
     }
@@ -238,7 +213,7 @@ export default class Day<T = Date> extends React.Component<
       return this.dateHelpers.isDayInRange(
         this.clampToDayStart(date),
         this.clampToDayStart(value[0]),
-        this.clampToDayStart(value[1]),
+        this.clampToDayStart(value[1])
       );
     }
   }
@@ -246,7 +221,7 @@ export default class Day<T = Date> extends React.Component<
   // calculated for range case only
   isPseudoHighlighted() {
     const date = this.getDateProp();
-    const {value, highlightedDate} = this.props;
+    const { value, highlightedDate } = this.props;
     if (Array.isArray(value) && !value[0] && !value[1]) {
       return false;
     }
@@ -257,13 +232,13 @@ export default class Day<T = Date> extends React.Component<
         return this.dateHelpers.isDayInRange(
           this.clampToDayStart(date),
           this.clampToDayStart(value[0]),
-          this.clampToDayStart(highlightedDate),
+          this.clampToDayStart(highlightedDate)
         );
       } else {
         return this.dateHelpers.isDayInRange(
           this.clampToDayStart(date),
           this.clampToDayStart(highlightedDate),
-          this.clampToDayStart(value[0]),
+          this.clampToDayStart(value[0])
         );
       }
     }
@@ -271,7 +246,7 @@ export default class Day<T = Date> extends React.Component<
 
   getSharedProps() {
     const date = this.getDateProp();
-    const {value, highlightedDate, range, highlighted} = this.props;
+    const { value, highlightedDate, range, highlighted } = this.props;
     const $isHighlighted = highlighted;
     const $selected = this.isSelected();
     const $hasRangeHighlighted = !!(
@@ -319,11 +294,8 @@ export default class Day<T = Date> extends React.Component<
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,
       $pseudoHighlighted:
-        this.props.range && !$isHighlighted && !$selected
-          ? this.isPseudoHighlighted()
-          : false,
-      $pseudoSelected:
-        this.props.range && !$selected ? this.isPseudoSelected() : false,
+        this.props.range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
+      $pseudoSelected: this.props.range && !$selected ? this.isPseudoSelected() : false,
       $range: this.props.range,
       $selected,
       $startDate:
@@ -344,7 +316,7 @@ export default class Day<T = Date> extends React.Component<
       $startDate: boolean,
       $endDate: boolean,
     },
-    localeContext: LocaleT,
+    localeContext: LocaleT
   ) {
     const date = this.getDateProp();
     return `${
@@ -364,13 +336,10 @@ export default class Day<T = Date> extends React.Component<
 
   render() {
     const date = this.getDateProp();
-    const {peekNextMonth, overrides = {}} = this.props;
+    const { peekNextMonth, overrides = {} } = this.props;
     const sharedProps = this.getSharedProps();
     const [Day, dayProps] = getOverrides(overrides.Day, StyledDay);
-    const [DayLabel, dayLabelProps] = getOverrides(
-      overrides.DayLabel,
-      StyledDayLabel,
-    );
+    const [DayLabel, dayLabelProps] = getOverrides(overrides.DayLabel, StyledDayLabel);
     const dateLabel = this.props.dateLabel && this.props.dateLabel(date);
     return !peekNextMonth && sharedProps.$outsideMonth ? (
       <Day
@@ -386,16 +355,13 @@ export default class Day<T = Date> extends React.Component<
         {(locale: LocaleT) => (
           <Day
             aria-label={this.getAriaLabel(sharedProps, locale)}
-            ref={dayElm => {
+            ref={(dayElm) => {
               this.dayElm = dayElm;
             }}
             role="gridcell"
             aria-roledescription="button"
             tabIndex={
-              this.props.highlighted ||
-              (!this.props.highlightedDate && this.isSelected())
-                ? 0
-                : -1
+              this.props.highlighted || (!this.props.highlightedDate && this.isSelected()) ? 0 : -1
             }
             {...sharedProps}
             {...dayProps}

package/datepicker/index.js.flow

@@ -5,26 +5,24 @@ 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 StatefulContainer} from './stateful-container.js';
-export {default as Calendar} from './calendar.js';
-export {default as StatefulCalendar} from './stateful-calendar.js';
-export {default as Datepicker, default as DatePicker} from './datepicker.js';
+export { default as StatefulContainer } from './stateful-container.js';
+export { default as Calendar } from './calendar.js';
+export { default as StatefulCalendar } from './stateful-calendar.js';
+export { default as Datepicker, default as DatePicker } from './datepicker.js';
 export {
   default as StatefulDatepicker,
   default as StatefulDatePicker,
 } from './stateful-datepicker.js';
-export {default as TimePicker} from '../timepicker/timepicker.js';
-export {default as TimezonePicker} from '../timezonepicker/timezone-picker.js';
+export { default as TimePicker } from '../timepicker/timepicker.js';
+export { default as TimezonePicker } from '../timezonepicker/timezone-picker.js';
 // Util functions
-export {formatDate} from './utils/index.js';
+export { formatDate } from './utils/index.js';
 // Constants
-export {ORIENTATION, STATE_CHANGE_TYPE} from './constants.js';
+export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export * from './styled-components.js';
 // Flow
 export type * from './types.js';
-export type * from '../timepicker/types.js';
-export type * from '../timezonepicker/types.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/datepicker/month.js.flow

@@ -7,12 +7,12 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import Week from './week.js';
-import {StyledMonth} from './styled-components.js';
+import { StyledMonth } from './styled-components.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {MonthPropsT} from './types.js';
-import {DENSITY} from './constants.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { MonthPropsT } from './types.js';
+import { DENSITY } from './constants.js';
 
 const defaultProps = {
   dateLabel: null,
@@ -38,9 +38,7 @@ const defaultProps = {
 
 const CALENDAR_MAX_ROWS = 6;
 
-export default class CalendarMonth<T = Date> extends React.Component<
-  MonthPropsT<T>,
-> {
+export default class CalendarMonth<T = Date> extends React.Component<MonthPropsT<T>> {
   static defaultProps = defaultProps;
 
   dateHelpers: DateHelpers<T>;
@@ -54,7 +52,7 @@ export default class CalendarMonth<T = Date> extends React.Component<
     return this.props.date || this.dateHelpers.date();
   };
 
-  isWeekInMonth: T => boolean = startOfWeek => {
+  isWeekInMonth: (T) => boolean = (startOfWeek) => {
     const date = this.getDateProp();
     const endOfWeek = this.dateHelpers.addDays(startOfWeek, 6);
     return (
@@ -67,16 +65,14 @@ export default class CalendarMonth<T = Date> extends React.Component<
     const weeks = [];
     let currentWeekStart = this.dateHelpers.getStartOfWeek(
       this.dateHelpers.getStartOfMonth(this.getDateProp()),
-      this.props.locale,
+      this.props.locale
     );
     let i = 0;
     let isWithinMonth = true;
 
     while (
       isWithinMonth ||
-      (this.props.fixedHeight &&
-        this.props.peekNextMonth &&
-        i < CALENDAR_MAX_ROWS)
+      (this.props.fixedHeight && this.props.peekNextMonth && i < CALENDAR_MAX_ROWS)
     ) {
       weeks.push(
         <Week
@@ -104,7 +100,7 @@ export default class CalendarMonth<T = Date> extends React.Component<
           overrides={this.props.overrides}
           peekNextMonth={this.props.peekNextMonth}
           value={this.props.value}
-        />,
+        />
       );
       i++;
       currentWeekStart = this.dateHelpers.addWeeks(currentWeekStart, 1);
@@ -115,7 +111,7 @@ export default class CalendarMonth<T = Date> extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Month, monthProps] = getOverrides(overrides.Month, StyledMonth);
     return <Month {...monthProps}>{this.renderWeeks()}</Month>;
   }

package/datepicker/stateful-calendar.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
 import Calendar from './calendar.js';
-import type {CalendarPropsT, StatefulDatepickerPropsT} from './types.js';
+import type { CalendarPropsT, StatefulDatepickerPropsT } from './types.js';
 
 type PropsT<T> = StatefulDatepickerPropsT<CalendarPropsT<T>>;
 
@@ -21,7 +21,7 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {extendedProps => <Calendar {...extendedProps} />}
+        {(extendedProps) => <Calendar {...extendedProps} />}
       </StatefulContainer>
     );
   }

package/datepicker/stateful-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 import type {
   CalendarPropsT,
   ContainerStateT,
@@ -20,11 +20,8 @@ type InputProps<T> = CalendarPropsT<T> | DatepickerPropsT<T>;
 
 type PropsT<T> = StatefulContainerPropsT<InputProps<T>, T>;
 
-class StatefulContainer<T = Date> extends React.Component<
-  PropsT<T>,
-  ContainerStateT<T>,
-> {
-  static defaultProps: {stateReducer: StateReducerT<T>} = {
+class StatefulContainer<T = Date> extends React.Component<PropsT<T>, ContainerStateT<T>> {
+  static defaultProps: { stateReducer: StateReducerT<T> } = {
     initialState: {},
     stateReducer: (type, nextState) => nextState,
     onChange: () => {},
@@ -33,24 +30,24 @@ class StatefulContainer<T = Date> extends React.Component<
   constructor(props: PropsT<T>) {
     super(props);
     const value = props.range ? [] : (null: ?T);
-    this.state = {value, ...props.initialState};
+    this.state = { value, ...props.initialState };
   }
 
-  onChange: ({date: ?T | Array<T>}) => mixed = data => {
-    const {date} = data;
-    this.internalSetState(STATE_CHANGE_TYPE.change, {value: date});
+  onChange: ({ date: ?T | Array<T> }) => mixed = (data) => {
+    const { date } = data;
+    this.internalSetState(STATE_CHANGE_TYPE.change, { value: date });
     if (typeof this.props.onChange === 'function') {
       this.props.onChange(data);
     }
   };
 
   internalSetState(type: StateChangeTypeT, changes: ContainerStateT<T>) {
-    const {stateReducer} = this.props;
-    this.setState(prevState => stateReducer(type, changes, prevState));
+    const { stateReducer } = this.props;
+    this.setState((prevState) => stateReducer(type, changes, prevState));
   }
 
   render() {
-    const {children, initialState, stateReducer, ...restProps} = this.props;
+    const { children, initialState, stateReducer, ...restProps } = this.props;
     return this.props.children({
       ...restProps,
       value: this.state.value,

package/datepicker/stateful-datepicker.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
 import Datepicker from './datepicker.js';
-import type {StatefulDatepickerPropsT, DatepickerPropsT} from './types.js';
+import type { StatefulDatepickerPropsT, DatepickerPropsT } from './types.js';
 
 type PropsT<T> = StatefulDatepickerPropsT<DatepickerPropsT<T>, T>;
 
@@ -21,7 +21,7 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {extendedProps => <Datepicker {...extendedProps} />}
+        {(extendedProps) => <Datepicker {...extendedProps} />}
       </StatefulContainer>
     );
   }

package/datepicker/styled-components.js

@@ -240,7 +240,7 @@ function generateDayStyles(defaultCode, defaultStyle) {
   var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
   var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
   return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
-} // eslint-disable-next-line flowtype/no-weak-types
+} // flowlint-next-line unclear-type:off
 
 
 function getDayStyles(code, _ref8) {
@@ -563,7 +563,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       content: '""'
     } : {})
   } : // a hack to make flow happy, otherwise it complains about complexity
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   {});
 });
 exports.StyledDay = StyledDay;