baseui 11.0.1 → 11.1.0

package/datepicker/datepicker.js.flow

@@ -19,7 +19,7 @@ import {
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type { DatepickerPropsT, DateValueT, InputRoleT } from './types.js';
+import type { DatepickerPropsT, InputRoleT } from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import type { LocaleT } from '../locale/types.js';
@@ -78,7 +78,31 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     };
   }
 
-  onChange: ({ date: DateValueT<T> }) => void = (data) => {
+  handleChange: (?T | $ReadOnlyArray<?T>) => void = (date) => {
+    const onChange = this.props.onChange;
+    const onRangeChange = this.props.onRangeChange;
+
+    if (Array.isArray(date)) {
+      if (onChange && date.every(Boolean)) {
+        // flowlint-next-line unclear-type:off
+        onChange({ date: ((date: any): Array<T>) });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date: [...date] });
+      }
+    } else {
+      if (onChange) {
+        onChange({ date });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date });
+      }
+    }
+  };
+
+  onCalendarSelect: ({ +date: ?T | Array<?T> }) => void = (data) => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
@@ -150,14 +174,14 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       inputValue: this.formatDisplayValue(nextDate),
     });
 
-    this.props.onChange && this.props.onChange({ date: nextDate });
+    this.handleChange(nextDate);
   };
 
   getNullDatePlaceholder(formatString: string) {
     return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
   }
 
-  formatDate(date: DateValueT<T>, formatString: string) {
+  formatDate(date: ?T | $ReadOnlyArray<?T>, formatString: string) {
     const format = (date: T) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
@@ -180,7 +204,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
   }
 
-  formatDisplayValue: (DateValueT<T>) => string = (date: DateValueT<T>) => {
+  formatDisplayValue: (?T | $ReadOnlyArray<?T>) => string = (date) => {
     const { displayValueAtRangeIndex, formatDisplayValue, range } = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -278,12 +302,10 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ')) ||
       inputValue.length === 0
     ) {
-      if (this.props.onChange) {
-        if (this.props.range) {
-          this.props.onChange({ date: [] });
-        } else {
-          this.props.onChange({ date: null });
-        }
+      if (this.props.range) {
+        this.handleChange([]);
+      } else {
+        this.handleChange(null);
       }
     }
 
@@ -307,18 +329,15 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         endDate = parseDateString(right);
       }
 
-      const onChange = this.props.onChange;
-      if (onChange) {
-        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
+      const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
 
-        // added equal case so that times within the same day can be expressed
-        const rangeValid =
-          this.dateHelpers.isAfter(endDate, startDate) ||
-          this.dateHelpers.isEqual(startDate, endDate);
+      // added equal case so that times within the same day can be expressed
+      const rangeValid =
+        this.dateHelpers.isAfter(endDate, startDate) ||
+        this.dateHelpers.isEqual(startDate, endDate);
 
-        if (datesValid && rangeValid) {
-          onChange({ date: [startDate, endDate] });
-        }
+      if (datesValid && rangeValid) {
+        this.handleChange([startDate, endDate]);
       }
     } else {
       const dateString = this.normalizeDashes(inputValue);
@@ -333,41 +352,41 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         date = parseDateString(dateString);
       }
 
-      const { displayValueAtRangeIndex, onChange, range, value } = this.props;
-      if (date && this.dateHelpers.isValid(date) && onChange) {
+      const { displayValueAtRangeIndex, range, value } = this.props;
+      if (date && this.dateHelpers.isValid(date)) {
         if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
           let [left, right] = value;
           if (displayValueAtRangeIndex === 0) {
             left = date;
             if (!right) {
-              onChange({ date: [left] });
+              this.handleChange([left]);
             } else {
               if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                onChange({ date: [left, right] });
+                this.handleChange([left, right]);
               } else {
                 // Is resetting back to previous value appropriate? Invalid range is not
                 // communicated to the user, but if it was not reset the text value would
                 // show one value and date value another. This seems a bit better but clearly
                 // has a downside.
-                onChange({ date: [...value] });
+                this.handleChange([...value]);
               }
             }
           } else if (displayValueAtRangeIndex === 1) {
             right = date;
             if (!left) {
               // If start value is not defined, set start/end to the same day.
-              onChange({ date: [right, right] });
+              this.handleChange([right, right]);
             } else {
               if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                onChange({ date: [left, right] });
+                this.handleChange([left, right]);
               } else {
                 // See comment above about resetting dates on invalid range
-                onChange({ date: [...value] });
+                this.handleChange([...value]);
               }
             }
           }
         } else {
-          onChange({ date });
+          this.handleChange(date);
         }
       }
     }
@@ -439,8 +458,6 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         ? endDate
         : this.state.inputValue;
 
-    const onChange = (event) => this.handleInputChange(event, inputRole);
-
     return (
       <InputComponent
         aria-disabled={this.props.disabled}
@@ -459,7 +476,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         onFocus={() => this.open(inputRole)}
         onBlur={this.handleInputBlur}
         onKeyDown={this.handleKeyDown}
-        onChange={onChange}
+        onChange={(event) => this.handleInputChange(event, inputRole)}
         placeholder={placeholder}
         mask={this.getMask()}
         required={this.props.required}
@@ -499,7 +516,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   trapTabbing={true}
                   value={this.props.value}
                   {...this.props}
-                  onChange={this.onChange}
+                  onChange={this.onCalendarSelect}
                   selectedInput={this.state.selectedInput}
                   hasLockedBehavior={this.hasLockedBehavior()}
                 />

package/datepicker/index.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Option} from '../select';
-import {SIZE} from '../input';
-import {Override} from '../overrides';
-import {Locale} from '../locale';
-import {any} from 'prop-types';
+import { Option } from '../select';
+import { SIZE } from '../input';
+import { Override } from '../overrides';
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
   moveUp: 'moveUp';
   moveDown: 'moveDown';
@@ -14,18 +11,18 @@ export interface STATE_CHANGE_TYPE {
   moveRight: 'moveRight';
   mouseOver: 'mouseOver';
   mouseLeave: 'mouseLeave';
-}
+};
 
-export interface ORIENTATION {
+export declare const ORIENTATION: {
   horizontal: 'horizontal';
   vertical: 'vertical';
-}
+};
 
-export type onChange = (args: {date: Date | Date[]}) => any;
+export type onChange = (args: { date: Date | Date[] }) => any;
 export type StateReducer = (
-  stateType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  stateType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   nextState: ContainerState,
-  currentState: ContainerState,
+  currentState: ContainerState
 ) => ContainerState;
 
 export interface ContainerState {
@@ -42,10 +39,10 @@ export class StatefulContainer extends React.Component<
   StatefulContainerProps<CalendarProps | DatepickerProps>,
   ContainerState
 > {
-  onChange(data: {date: Date | Date[]}): void;
+  onChange(data: { date: Date | Date[] }): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: ContainerState,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: ContainerState
   ): void;
 }
 
@@ -70,14 +67,14 @@ export interface CalendarProps {
   maxDate?: Date;
   minDate?: Date;
   monthsShown?: number;
-  onDayClick?: (args: {date: Date; event: Event}) => any;
-  onDayMouseOver?: (args: {date: Date; event: Event}) => any;
-  onDayMouseLeave?: (args: {date: Date; event: Event}) => any;
-  onMonthChange?: (args: {date: Date}) => any;
-  onYearChange?: (args: {date: Date}) => any;
+  onDayClick?: (args: { date: Date; event: Event }) => any;
+  onDayMouseOver?: (args: { date: Date; event: Event }) => any;
+  onDayMouseLeave?: (args: { date: Date; event: Event }) => any;
+  onMonthChange?: (args: { date: Date }) => any;
+  onYearChange?: (args: { date: Date }) => any;
   onChange?: onChange;
   onQuickSelectChange?: (option?: QuickSelectOption) => any;
-  orientation?: ORIENTATION[keyof ORIENTATION];
+  orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
   overrides?: DatepickerOverrides<SharedStylePropsT>;
   peekNextMonth?: boolean;
   timeSelectStart?: boolean;
@@ -97,28 +94,25 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
   getDateInView(): Date;
   handleMonthChange(date: Date): void;
   handleYearChange(date: Date): void;
-  changeMonth({date}: {date: Date}): void;
-  changeYear({date}: {date: Date}): void;
+  changeMonth({ date }: { date: Date }): void;
+  changeYear({ date }: { date: Date }): void;
   renderCalendarHeader(date: Date, order: number): React.ReactNode;
   onKeyDown(event: KeyboardEvent): void;
   handleArrowKey(key: string): void;
   focusCalendar(): void;
   blurCalendar(): void;
   handleTabbing(event: KeyboardEvent): void;
-  onDayMouseOver(data: {event: Event; date: Date}): void;
-  onDayMouseLeave(data: {event: Event; date: Date}): void;
-  handleDateChange(data: {date: Date | Date[]}): void;
+  onDayMouseOver(data: { event: Event; date: Date }): void;
+  onDayMouseLeave(data: { event: Event; date: Date }): void;
+  handleDateChange(data: { date: Date | Date[] }): void;
   handleTimeChange(time: Date, index: number): void;
   setHighlightedDate(date: Date): void;
   renderMonths(): React.ReactNode[];
-  renderTimeSelect(
-    value: Date,
-    onChange: (...args: any) => any,
-  ): React.ReactNode;
+  renderTimeSelect(value: Date, onChange: (...args: any) => any): React.ReactNode;
   renderQuickSelect(): React.ReactNode;
 }
 
-export const StatefulCalendar: React.FC<StatefulDatepickerProps<CalendarProps>>;
+export declare const StatefulCalendar: React.FC<StatefulDatepickerProps<CalendarProps>>;
 
 export interface DatepickerOverrides<T> {
   Root?: Override<T>;
@@ -158,7 +152,7 @@ export type DatepickerProps = CalendarProps & {
   'aria-describedby'?: string;
   disabled?: boolean;
   clearable?: boolean;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   error?: boolean;
   positive?: boolean;
   placeholder?: string;
@@ -181,18 +175,12 @@ export interface DatepickerState {
   lastActiveElm?: HTMLElement;
 }
 
-declare function formatDate(
-  date: Date | Date[],
-  formatString: string,
-): string | string[];
+declare function formatDate(date: Date | Date[], formatString: string): string | string[];
 
-export {formatDate};
+export { formatDate };
 
-export class Datepicker extends React.Component<
-  DatepickerProps,
-  DatepickerState
-> {
-  onChange(data: {date: Date | Date[]}): void;
+export class Datepicker extends React.Component<DatepickerProps, DatepickerState> {
+  onChange(data: { date: Date | Date[] }): void;
   formatDate(date: Date | Date[], formatString: string): string | string[];
   formatDisplayValue(date: Date | Date[]): string;
   open(): void;
@@ -202,15 +190,13 @@ export class Datepicker extends React.Component<
   handleKeyDown(event: KeyboardEvent): void;
   focusCalendar(): void;
 }
-export {Datepicker as DatePicker};
+export { Datepicker as DatePicker };
 
 export type StatefulDatepickerProps<T> = T &
-  StatefulContainerProps<T> & {children?: (args: T) => React.ReactNode};
-export const StatefulDatepicker: React.FC<
-  StatefulDatepickerProps<DatepickerProps>
->;
+  StatefulContainerProps<T> & { children?: (args: T) => React.ReactNode };
+export declare const StatefulDatepicker: React.FC<StatefulDatepickerProps<DatepickerProps>>;
 
-export {StatefulDatepicker as StatefulDatePicker};
+export { StatefulDatepicker as StatefulDatePicker };
 
 export interface TimezonePickerProps {
   date?: Date;
@@ -218,30 +204,23 @@ export interface TimezonePickerProps {
   positive?: boolean;
   error?: boolean;
   mapLabels?: (args: Option) => React.ReactNode;
-  onChange?: (value: {id: string; label: string; offset: number}) => any;
-  overrides?: {Select?: Override<any>};
+  onChange?: (value: { id: string; label: string; offset: number }) => any;
+  overrides?: { Select?: Override<any> };
   value?: string;
 }
 export interface TimezonePickerState {
   timezones: Option[];
   value?: string;
 }
-export class TimezonePicker extends React.Component<
-  TimezonePickerProps,
-  TimezonePickerState
-> {
+export class TimezonePicker extends React.Component<TimezonePickerProps, TimezonePickerState> {
   buildTimezones(compareDate: Date): string[];
 }
 
-export const DISPLAY_FORMAT: 'L';
-export const ISO_FORMAT: 'YYYY-MM-DD';
-export const ISO_MONTH_FORMAT: 'YYYY-MM';
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
-
-export const ORIENTATION: ORIENTATION;
+export declare const DISPLAY_FORMAT: 'L';
+export declare const ISO_FORMAT: 'YYYY-MM-DD';
+export declare const ISO_MONTH_FORMAT: 'YYYY-MM';
 
-export const WEEKDAYS: [0, 1, 2, 3, 4, 5, 6];
+export declare const WEEKDAYS: [0, 1, 2, 3, 4, 5, 6];
 
 export type SharedStylePropsT = {
   $date: Date;

package/datepicker/stateful-calendar.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_calendar.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_calendar.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-calendar.js.flow

@@ -18,10 +18,17 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
     stateReducer: (type, nextState) => nextState,
     onSelect: () => {},
   };
+
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Calendar {...extendedProps} />}
+        {(extendedProps) => (
+          <Calendar
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }

package/datepicker/stateful-container.js

@@ -64,8 +64,29 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         value: date
       });
 
-      if (typeof _this.props.onChange === 'function') {
-        _this.props.onChange(data);
+      var onChange = _this.props.onChange;
+
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date: date
+          });
+        }
+      }
+
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date: date
+        });
       }
     });
 

package/datepicker/stateful-container.js.flow

@@ -14,7 +14,6 @@ import type {
   StatefulContainerPropsT,
   StateChangeTypeT,
   StateReducerT,
-  DateValueT,
 } from './types.js';
 
 type InputProps<T> = CalendarPropsT<T> | DatepickerPropsT<T>;
@@ -34,11 +33,25 @@ class StatefulContainer<T = Date> extends React.Component<PropsT<T>, ContainerSt
     this.state = { value, ...props.initialState };
   }
 
-  onChange: ({ date: DateValueT<T> }) => mixed = (data) => {
+  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);
+
+    const onChange = this.props.onChange;
+    if (onChange) {
+      if (Array.isArray(date)) {
+        if (date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({ date: ((date: any): Array<T>) });
+        }
+      } else {
+        onChange({ date });
+      }
+    }
+
+    const onRangeChange = this.props.onRangeChange;
+    if (onRangeChange) {
+      onRangeChange({ date });
     }
   };
 

package/datepicker/stateful-datepicker.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_datepicker.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_datepicker.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-datepicker.js.flow

@@ -21,7 +21,13 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Datepicker {...extendedProps} />}
+        {(extendedProps) => (
+          <Datepicker
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }