baseui 11.0.1 → 11.1.0

package/card/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface CardOverrides {
   Action?: Override<any>;
@@ -14,20 +14,22 @@ export interface CardOverrides {
 export interface CardProps {
   readonly action?: React.ReactNode;
   readonly children?: React.ReactNode;
-  readonly hasThumbnail?: (props: {readonly thumbnail?: string}) => boolean;
-  readonly headerImage?: string | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+  readonly hasThumbnail?: (props: { readonly thumbnail?: string }) => boolean;
+  readonly headerImage?:
+    | string
+    | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
   readonly overrides?: CardOverrides;
   readonly thumbnail?: string;
   readonly title?: React.ReactNode;
 }
-export const Card: React.FC<CardProps>;
-export type hasThumbnail = (props: {readonly thumbnail?: string}) => boolean;
+export declare const Card: React.FC<CardProps>;
+export type hasThumbnail = (props: { readonly thumbnail?: string }) => boolean;
 
-export const StyledAction: StyletronComponent<any>;
-export const StyledBody: StyletronComponent<any>;
-export const StyledContents: StyletronComponent<any>;
-export const StyledHeaderImage: StyletronComponent<any>;
-export const StyledThumbnail: StyletronComponent<any>;
-export const StyledTitle: StyletronComponent<any>;
-export const StyledRoot: StyletronComponent<any>;
-export const StyledWrapper: StyletronComponent<any>;
+export declare const StyledAction: StyletronComponent<any>;
+export declare const StyledBody: StyletronComponent<any>;
+export declare const StyledContents: StyletronComponent<any>;
+export declare const StyledHeaderImage: StyletronComponent<any>;
+export declare const StyledThumbnail: StyletronComponent<any>;
+export declare const StyledTitle: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledWrapper: StyletronComponent<any>;

package/checkbox/index.d.ts

@@ -2,34 +2,34 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface STATE_TYPE {
+export declare const STATE_TYPE: {
   change: 'CHANGE';
-}
-export interface STYLE_TYPE {
+};
+export declare const STYLE_TYPE: {
   default: 'default';
   toggle: 'toggle';
   toggle_round: 'toggle';
-}
+};
 
-export interface LABEL_PLACEMENT {
+export declare const LABEL_PLACEMENT: {
   top: 'top';
   right: 'right';
   bottom: 'bottom';
   left: 'left';
-}
+};
 
 type initialState = {
   checked?: boolean;
   isIndeterminate?: boolean;
 };
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledCheckmark: StyletronComponent<any>;
-export const StyledLabel: StyletronComponent<any>;
-export const StyledInput: StyletronComponent<any>;
-export const StyledToggle: StyletronComponent<any>;
-export const StyledToggleInner: StyletronComponent<any>;
-export const StyledToggleTrack: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledCheckmark: StyletronComponent<any>;
+export declare const StyledLabel: StyletronComponent<any>;
+export declare const StyledInput: StyletronComponent<any>;
+export declare const StyledToggle: StyletronComponent<any>;
+export declare const StyledToggleInner: StyletronComponent<any>;
+export declare const StyledToggleTrack: StyletronComponent<any>;
 
 export type StateReducer = (
   stateType: string,
@@ -51,7 +51,7 @@ export interface StatefulContainerProps {
   autoFocus?: boolean;
 }
 
-export const StatefulContainer: React.FC<StatefulContainerProps>;
+export declare const StatefulContainer: React.FC<StatefulContainerProps>;
 
 export interface StatefulCheckboxProps {
   overrides?: CheckboxOverrides;
@@ -64,7 +64,7 @@ export interface StatefulCheckboxProps {
   children?: React.ReactNode;
   initialState?: initialState;
   autoFocus?: boolean;
-  checkmarkType?: STYLE_TYPE[keyof STYLE_TYPE];
+  checkmarkType?: typeof STYLE_TYPE[keyof typeof STYLE_TYPE];
   onChange?: React.FormEventHandler<HTMLInputElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;
@@ -72,7 +72,7 @@ export interface StatefulCheckboxProps {
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 
-export const StatefulCheckbox: React.FC<StatefulCheckboxProps>;
+export declare const StatefulCheckbox: React.FC<StatefulCheckboxProps>;
 
 export interface CheckboxOverrides {
   Checkmark?: Override<any>;
@@ -101,7 +101,7 @@ export interface CheckboxProps {
   value?: string;
   isIndeterminate?: boolean;
   labelPlacement?: 'top' | 'right' | 'bottom' | 'left';
-  checkmarkType?: STYLE_TYPE[keyof STYLE_TYPE];
+  checkmarkType?: typeof STYLE_TYPE[keyof typeof STYLE_TYPE];
   title?: string;
   ariaLabel?: string;
   'aria-label'?: string;
@@ -128,7 +128,3 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   onFocus(event: React.FocusEvent<HTMLInputElement>): void;
   onBlur(event: React.FocusEvent<HTMLInputElement>): void;
 }
-
-export const STATE_TYPE: STATE_TYPE;
-export const STYLE_TYPE: STYLE_TYPE;
-export const LABEL_PLACEMENT: LABEL_PLACEMENT;

package/combobox/index.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
-export interface SIZE {
+export declare const SIZE: {
   compact: 'compact';
   default: 'default';
   large: 'large';
   mini: 'mini';
-}
+};
 
 export interface ComboboxOverrides {
   Root?: Override<any>;
@@ -20,10 +20,7 @@ export interface ComboboxOverrides {
 export type PropsT<OptionT = any> = {
   autocomplete?: boolean;
   disabled?: boolean;
-  mapOptionToNode?: (option: {
-    isSelected: boolean;
-    option: OptionT;
-  }) => React.ReactNode;
+  mapOptionToNode?: (option: { isSelected: boolean; option: OptionT }) => React.ReactNode;
   mapOptionToString: (option: OptionT) => string;
   id?: string;
   name?: string;
@@ -31,12 +28,11 @@ export type PropsT<OptionT = any> = {
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => any;
   onChange?: (value: string, option: OptionT | null) => any;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => any;
-  onSubmit?: (params: {closeListbox: () => void; value: string}) => any;
+  onSubmit?: (params: { closeListbox: () => void; value: string }) => any;
   options: OptionT[];
   overrides?: ComboboxOverrides;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   value: string;
 };
 
-export const Combobox: React.FC<PropsT>;
-export const SIZE: SIZE;
+export declare const Combobox: React.FC<PropsT>;

package/data-table/index.d.ts

@@ -10,7 +10,7 @@ export function CustomColumn<ValueT, FilterParamsT>(options: any): any;
 export function NumericalColumn(options: any): any;
 export function StringColumn(options: any): any;
 
-export interface COLUMNS {
+export declare const COLUMNS: {
   ANCHOR: 'ANCHOR';
   CATEGORICAL: 'CATEGORICAL';
   DATETIME: 'DATETIME';
@@ -18,23 +18,20 @@ export interface COLUMNS {
   BOOLEAN: 'BOOLEAN';
   STRING: 'STRING';
   CUSTOM: 'CUSTOM';
-}
-export const COLUMNS: COLUMNS;
+};
 
-export interface NUMERICAL_FORMATS {
+export declare const NUMERICAL_FORMATS: {
   DEFAULT: 'DEFAULT';
   ACCOUNTING: 'ACCOUNTING';
   PERCENTAGE: 'PERCENTAGE';
-}
-export const NUMERICAL_FORMATS: NUMERICAL_FORMATS;
+};
 
-export interface SORT_DIRECTIONS {
+export declare const SORT_DIRECTIONS: {
   ASC: 'ASC';
   DESC: 'DESC';
-}
-export const SORT_DIRECTIONS: SORT_DIRECTIONS;
+};
 
-export type SortDirectionsT = SORT_DIRECTIONS['ASC'] | SORT_DIRECTIONS['DESC'] | null;
+export type SortDirectionsT = typeof SORT_DIRECTIONS[keyof typeof SORT_DIRECTIONS] | null;
 export type ColumnT = any;
 export type RowT = {
   id: number | string;

package/datepicker/calendar.js

@@ -333,12 +333,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;
@@ -348,16 +348,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

package/datepicker/calendar.js.flow

@@ -22,7 +22,7 @@ import {
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import type { CalendarPropsT, CalendarInternalState, DateValueT } from './types.js';
+import type { CalendarPropsT, CalendarInternalState } from './types.js';
 import { DENSITY, ORIENTATION } from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
@@ -134,7 +134,7 @@ export default class Calendar<T = Date> extends React.Component<
     return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
   }
 
-  getSingleDate(value: DateValueT<T>): ?T {
+  getSingleDate(value: ?T | $ReadOnlyArray<?T>): ?T {
     // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
@@ -339,13 +339,13 @@ export default class Calendar<T = Date> extends React.Component<
 
   /** Responsible for merging time values into date values. Note: the 'Day' component
    * determines how the days themselves change when a new day is selected. */
-  handleDateChange: ({ date: DateValueT<T> }) => void = (data) => {
+  handleDateChange: ({ +date: ?T | Array<?T> }) => void = (data) => {
     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
     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;
@@ -359,13 +359,16 @@ export default class Calendar<T = Date> extends React.Component<
       } 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];
+      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] });
     }
 
-    // Update the date in time values of internal state
-    this.setState({ time: newTimeState });
     onChange({ date: updatedDate });
   };
 

package/datepicker/datepicker.js

@@ -37,6 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,10 +49,6 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.it
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 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); } }
@@ -126,7 +126,39 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
+      var onChange = _this.props.onChange;
+      var 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: _toConsumableArray(date)
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: date
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (data) {
       var isOpen = false;
       var isPseudoFocused = false;
       var calendarFocused = false;
@@ -203,9 +235,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: _this.formatDisplayValue(nextDate)
       }));
 
-      _this.props.onChange && _this.props.onChange({
-        date: nextDate
-      });
+      _this.handleChange(nextDate);
     });
 
     _defineProperty(_assertThisInitialized(_this), "formatDisplayValue", function (date) {
@@ -309,16 +339,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var 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);
         }
       }
 
@@ -349,19 +373,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = parseDateString(right);
         }
 
-        var onChange = _this.props.onChange;
-
-        if (onChange) {
-          var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
+        var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
 
-          var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
+        var 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 {
         var dateString = _this.normalizeDashes(inputValue);
@@ -379,11 +397,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _this$props3 = _this.props,
             displayValueAtRangeIndex = _this$props3.displayValueAtRangeIndex,
-            _onChange = _this$props3.onChange,
             range = _this$props3.range,
             value = _this$props3.value;
 
-        if (date && _this.dateHelpers.isValid(date) && _onChange) {
+        if (date && _this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             var _value = _slicedToArray(value, 2),
                 _left = _value[0],
@@ -393,22 +410,16 @@ var Datepicker = /*#__PURE__*/function (_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: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -416,26 +427,18 @@ var Datepicker = /*#__PURE__*/function (_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: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             }
           } else {
-            _onChange({
-              date: date
-            });
+            _this.handleChange(date);
           }
         }
       }
@@ -552,11 +555,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = _split2$2 === void 0 ? '' : _split2$2;
 
       var value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.INPUT_ROLE.endDate ? endDate : this.state.inputValue;
-
-      var onChange = function onChange(event) {
-        return _this3.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),
@@ -573,7 +571,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         },
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
-        onChange: onChange,
+        onChange: function onChange(event) {
+          return _this3.handleInputChange(event, inputRole);
+        },
         placeholder: placeholder,
         mask: this.getMask(),
         required: this.props.required,
@@ -633,7 +633,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange,
+            onChange: _this4.onCalendarSelect,
             selectedInput: _this4.state.selectedInput,
             hasLockedBehavior: _this4.hasLockedBehavior()
           }))