baseui 11.0.1 → 11.0.2

package/datepicker/types.js.flow

@@ -27,10 +27,6 @@ import type { OptionT } from '../select/index.js';
 // flowlint-next-line unclear-type:off
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-export type DateValueT<T> = ?T | Array<?T>;
-
-type onChangeT<T> = ({ date: DateValueT<T> }) => mixed;
-
 export type DensityT = $Keys<typeof DENSITY>;
 
 export type DatepickerOverridesT = {
@@ -92,13 +88,13 @@ export type DayPropsT<T = Date> = {
   month: ?number,
   onBlur: ({ event: Event, date: T }) => mixed,
   onFocus: ({ event: Event, date: T }) => mixed,
-  onSelect: ({ date: DateValueT<T> }) => mixed,
+  onSelect: ({ date: T | Array<?T> }) => mixed,
   onClick: ({ event: Event, date: T }) => mixed,
   onMouseOver: ({ event: Event, date: T }) => mixed,
   onMouseLeave: ({ event: Event, date: T }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | $ReadOnlyArray<?T>,
 };
 
 export type DayStateT = {
@@ -127,15 +123,16 @@ export type WeekPropsT<T = Date> = {
   onDayFocus: ({ date: T, event: Event }) => mixed,
   onDayMouseOver: ({ date: T, event: Event }) => mixed,
   onDayMouseLeave: ({ date: T, event: Event }) => mixed,
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | $ReadOnlyArray<?T>,
   hasLockedBehavior: boolean,
   selectedInput?: InputRoleT,
 };
 
-export type MonthPropsT<T = Date> = WeekPropsT<T> & {
+export type MonthPropsT<T = Date> = {
+  ...WeekPropsT<T>,
   fixedHeight?: boolean,
 };
 
@@ -193,7 +190,7 @@ export type CalendarPropsT<T = Date> = {
   /** Event handler that is called when the current rendered month's year is changed. */
   onYearChange?: ({ date: T }) => mixed,
   /** Event handler that is called when a new date is selected. */
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   /** Event handler that is called when a selection is made using the quick select menu. */
   onQuickSelectChange?: (option?: QuickSelectOption<T>) => mixed,
   /** Sets the orientation of the calendar when multiple months are displayed */
@@ -208,7 +205,7 @@ export type CalendarPropsT<T = Date> = {
   /** Defines if tabbing inside the calendar is circled within it. */
   trapTabbing?: boolean,
   /** Currently selected date. */
-  value?: DateValueT<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
   fixedHeight?: boolean,
   /** Determines whether user clicked startDate or endDate input to trigger calendar open */
   selectedInput?: InputRoleT,
@@ -225,7 +222,8 @@ export type QuickSelectOption<T> = {
   endDate?: T,
 };
 
-export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
+export type DatepickerPropsT<T = Date> = {
+  ...CalendarPropsT<T>,
   'aria-label'?: string,
   'aria-labelledby'?: string,
   'aria-describedby'?: ?string,
@@ -238,14 +236,18 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   required?: boolean,
   clearable?: boolean,
   displayValueAtRangeIndex?: number,
-  formatDisplayValue?: (date: DateValueT<T>, formatString: string) => string,
+  formatDisplayValue?: (date: ?T | $ReadOnlyArray<?T>, formatString: string) => string,
   formatString: string,
   /** Where to mount the popover */
   mountNode?: HTMLElement,
+  /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */
+  onChange?: ({ +date: ?T | Array<T> }) => mixed,
   /** Called when calendar is closed */
   onClose?: () => mixed,
   /** Called when calendar is opened */
   onOpen?: () => mixed,
+  /** When single picker, fn is always called. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   mask?: string | null,
   /** Determines whether startDate and endDate should be updated independently of eachother */
   rangedCalendarBehavior?: RangedCalendarBehaviorT,
@@ -253,6 +255,7 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   separateRangeInputs?: boolean,
   startDateLabel?: string,
   endDateLabel?: string,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type SharedStylePropsT = {
@@ -289,7 +292,7 @@ export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type ContainerStateT<T = Date> = {
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type NavigationContainerStateT<T = Date> = {
@@ -310,46 +313,21 @@ export type StateReducerT<T = Date> = (
   currentState: ContainerStateT<T>
 ) => ContainerStateT<T>;
 
-export type NavigationContainerStateReducerT<T = Date> = (
-  stateType: StateChangeTypeT,
-  nextState: NavigationContainerStateT<T>,
-  currentState: NavigationContainerStateT<T>
-) => NavigationContainerStateT<T>;
-
 export type StatefulContainerPropsT<PropsT, T = Date> = {
   children: (PropsT) => React.Node,
   /** Initial state of an uncontrolled datepicker component. */
   initialState: ContainerStateT<T>,
   /** A state change handler. */
   stateReducer: StateReducerT<T>,
-  /** Event handler that is called when a date/time is selected. */
-  onChange?: onChangeT<T>,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */
+  onChange?: ({ +date: ?T | Array<T> }) => mixed,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   adapter?: DateIOAdapter<T>,
   /** Should the date value be stored as an array or single value. */
   range?: boolean,
 };
 
-// This type is seemingly not used anywhere
-export type NavigationContainerPropsT<T = Date> = {
-  children: (CalendarPropsT<T>) => React.Node,
-  range?: boolean,
-  highlightedDate?: ?Date,
-  /** Day's `mouseover` event handler. */
-  onDayMouseOver: (params: { date: Date, event: Event }) => mixed,
-  /** Day's `mouseleave` event handler. */
-  onDayMouseLeave: (params: { date: Date, event: Event }) => mixed,
-  /** Event handler that is called when a new date is selected. */
-  onChange: onChangeT<T>,
-  /** Event handler that is called when the current rendered month is changed. */
-  onMonthChange?: ({ date: T }) => mixed,
-  /** Event handler that is called when the current rendered year is changed. */
-  onYearChange?: ({ date: T }) => mixed,
-  /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
-  stateReducer: NavigationContainerStateReducerT<T>,
-  trapTabbing: boolean,
-};
-
 export type StatefulDatepickerPropsT<PropsT, T = Date> = $Diff<
   StatefulContainerPropsT<PropsT, T>,
   {

package/es/datepicker/calendar.js

@@ -252,11 +252,11 @@ export default class Calendar extends React.Component {
       const {
         onChange = params => {}
       } = this.props;
-      let updatedDate = data.date; // We'll need to update the date in time values of internal state
-
-      const newTimeState = [...this.state.time]; // Apply the currently selected time values (saved in state) to the updated date
+      let updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        const newTimeState = [...this.state.time];
         const start = data.date[0] ? this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
         const end = data.date[1] ? this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
         newTimeState[0] = start;
@@ -266,16 +266,21 @@ export default class Calendar extends React.Component {
           newTimeState[1] = end;
         } else {
           updatedDate = [start];
-        }
+        } // Update the date in time values of internal state
+
+
+        this.setState({
+          time: newTimeState
+        });
       } else if (!Array.isArray(this.props.value) && data.date) {
-        newTimeState[0] = this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        const newTimeState = this.dateHelpers.applyDateToTime(this.state.time[0], data.date);
+        updatedDate = newTimeState; // Update the date in time values of internal state
 
+        this.setState({
+          time: [newTimeState]
+        });
+      }
 
-      this.setState({
-        time: newTimeState
-      });
       onChange({
         date: updatedDate
       });

package/es/datepicker/datepicker.js

@@ -45,7 +45,39 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "dateHelpers", void 0);
 
-    _defineProperty(this, "onChange", data => {
+    _defineProperty(this, "handleChange", 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
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: [...date]
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "onCalendarSelect", data => {
       let isOpen = false;
       let isPseudoFocused = false;
       let calendarFocused = false;
@@ -114,9 +146,7 @@ export default class Datepicker extends React.Component {
         }),
         inputValue: this.formatDisplayValue(nextDate)
       });
-      this.props.onChange && this.props.onChange({
-        date: nextDate
-      });
+      this.handleChange(nextDate);
     });
 
     _defineProperty(this, "formatDisplayValue", date => {
@@ -218,16 +248,10 @@ export default class Datepicker extends React.Component {
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (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);
         }
       }
 
@@ -253,18 +277,12 @@ export default class Datepicker extends React.Component {
           endDate = parseDateString(right);
         }
 
-        const onChange = this.props.onChange;
+        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
-        if (onChange) {
-          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);
+        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);
@@ -280,12 +298,11 @@ export default class Datepicker extends React.Component {
 
         const {
           displayValueAtRangeIndex,
-          onChange,
           range,
           value
         } = this.props;
 
-        if (date && this.dateHelpers.isValid(date) && onChange) {
+        if (date && this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             let [left, right] = value;
 
@@ -293,22 +310,16 @@ export default class Datepicker extends React.Component {
               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) {
@@ -316,26 +327,18 @@ export default class Datepicker extends React.Component {
 
               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);
           }
         }
       }
@@ -427,9 +430,6 @@ export default class Datepicker extends React.Component {
     const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
     const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
     const value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
-
-    const onChange = event => this.handleInputChange(event, inputRole);
-
     return /*#__PURE__*/React.createElement(InputComponent, _extends({
       "aria-disabled": this.props.disabled,
       "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
@@ -444,7 +444,7 @@ export default class Datepicker extends React.Component {
       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,
@@ -477,7 +477,7 @@ export default class Datepicker extends React.Component {
         trapTabbing: true,
         value: this.props.value
       }, this.props, {
-        onChange: this.onChange,
+        onChange: this.onCalendarSelect,
         selectedInput: this.state.selectedInput,
         hasLockedBehavior: this.hasLockedBehavior()
       }))

package/es/datepicker/stateful-calendar.js

@@ -1,3 +1,5 @@
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Calendar from './calendar.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }

package/es/datepicker/stateful-container.js

@@ -20,9 +20,29 @@ class StatefulContainer extends React.Component {
       this.internalSetState(STATE_CHANGE_TYPE.change, {
         value: date
       });
+      const onChange = this.props.onChange;
 
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(data);
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date
+          });
+        }
+      }
+
+      const onRangeChange = this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date
+        });
       }
     });
 

package/es/datepicker/stateful-datepicker.js

@@ -1,3 +1,5 @@
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Datepicker from './datepicker.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }

package/es/snackbar/snackbar-context.js

@@ -87,7 +87,7 @@ export default function SnackbarProvider({
     setTimeout(() => {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/esm/datepicker/calendar.js

@@ -315,12 +315,12 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleDateChange", function (data) {
       var _this$props$onChange = _this.props.onChange,
           onChange = _this$props$onChange === void 0 ? function (params) {} : _this$props$onChange;
-      var updatedDate = data.date; // We'll need to update the date in time values of internal state
-
-      var newTimeState = _toConsumableArray(_this.state.time); // Apply the currently selected time values (saved in state) to the updated date
-
+      var updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        var newTimeState = _toConsumableArray(_this.state.time);
+
         var start = data.date[0] ? _this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
         var end = data.date[1] ? _this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
         newTimeState[0] = start;
@@ -330,16 +330,21 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           newTimeState[1] = end;
         } else {
           updatedDate = [start];
-        }
+        } // Update the date in time values of internal state
+
+
+        _this.setState({
+          time: newTimeState
+        });
       } else if (!Array.isArray(_this.props.value) && data.date) {
-        newTimeState[0] = _this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        var _newTimeState = _this.dateHelpers.applyDateToTime(_this.state.time[0], data.date);
 
+        updatedDate = _newTimeState; // Update the date in time values of internal state
 
-      _this.setState({
-        time: newTimeState
-      });
+        _this.setState({
+          time: [_newTimeState]
+        });
+      }
 
       onChange({
         date: updatedDate