baseui 12.1.3 → 13.0.0

package/datepicker/datepicker.d.ts

@@ -4,7 +4,7 @@ import DateHelpers from './utils/date-helpers';
 import type { Locale } from '../locale';
 import type { ChangeEvent } from 'react';
 export declare const DEFAULT_DATE_FORMAT = "yyyy/MM/dd";
-declare type DatepickerState = {
+type DatepickerState = {
     calendarFocused: boolean;
     isOpen: boolean;
     selectedInput: InputRole | undefined | null;
@@ -40,6 +40,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     normalizeDashes: (inputValue: string) => string;
     hasLockedBehavior: () => boolean;
     componentDidUpdate(prevProps: DatepickerProps<T>): void;
+    getPlaceholder: () => string;
     renderInputComponent(locale: Locale, inputRole?: InputRole): JSX.Element;
     render(): JSX.Element;
 }

package/datepicker/datepicker.js

@@ -85,7 +85,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 exports.DEFAULT_DATE_FORMAT = DEFAULT_DATE_FORMAT;
-var INPUT_DELIMITER = '–';
+var INPUT_DELIMITER = '–'; // @ts-ignore
 
 var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
   var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -120,7 +120,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Datepicker);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); // @ts-ignore
 
     _defineProperty(_assertThisInitialized(_this), "calendar", void 0);
 
@@ -167,7 +167,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       if (Array.isArray(nextDate) && _this.props.range) {
         if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
-          isPseudoFocused = true;
+          isPseudoFocused = true; // @ts-ignore
+
           calendarFocused = null;
         } else if (nextDate[0] && nextDate[1]) {
           var _nextDate = nextDate,
@@ -223,6 +224,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         if (onlyTimeChanged(prevValue, nextDate)) {
           isOpen = true;
         }
+      } // If nextDate is an array but the datepicker is not ranged, we assign
+      // nextDate directly to the Date value to avoid formatting issues
+
+
+      if (Array.isArray(nextDate) && !_this.props.range) {
+        nextDate = nextDate[0];
       }
 
       _this.setState(_objectSpread(_objectSpread({
@@ -241,7 +248,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           displayValueAtRangeIndex = _this$props.displayValueAtRangeIndex,
           formatDisplayValue = _this$props.formatDisplayValue,
-          range = _this$props.range;
+          range = _this$props.range; // @ts-ignore
 
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
@@ -333,7 +340,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, inputRole) {
       var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, inputRole) : event.currentTarget.value;
 
-      var mask = _this.getMask();
+      var mask = _this.getMask(); // @ts-ignore
+
 
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
@@ -347,7 +355,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         inputValue: inputValue
-      });
+      }); // @ts-ignore
+
 
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -387,8 +396,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _formatString = _this.props.formatString; // Prevent early parsing of value.
         // Eg 25.12.2 will be transformed to 25.12.0002 formatted from date to string
+        // @ts-ignore
 
         if (dateString.replace(/(\s)*/g, '').length < _formatString.replace(/(\s)*/g, '').length) {
+          // @ts-ignore
           date = null;
         } else {
           date = parseDateString(dateString);
@@ -446,7 +457,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       if (!_this.state.isOpen && event.keyCode === 40) {
         _this.open();
-      } else if (_this.state.isOpen && event.key === 'ArrowDown') {
+      } else if (_this.state.isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
         // next line prevents the page jump on the initial arrowDown
         event.preventDefault();
 
@@ -476,6 +487,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.props.rangedCalendarBehavior === _constants.RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getPlaceholder", function () {
+      return _this.props.placeholder || _this.props.placeholder === '' ? _this.props.placeholder : _this.props.range && !_this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
+    });
+
     _this.dateHelpers = new _dateHelpers.default(props.adapter);
     _this.state = {
       calendarFocused: false,
@@ -544,7 +559,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputComponent = _getOverrides2[0],
           inputProps = _getOverrides2[1];
 
-      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
+      var inputLabel = this.props['aria-label'] || "".concat(this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel);
 
       var _split = (this.state.inputValue || '').split(" ".concat(INPUT_DELIMITER, " ")),
           _split2 = _slicedToArray(_split, 2),
@@ -556,7 +571,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.INPUT_ROLE.endDate ? endDate : this.state.inputValue;
       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),
+        "aria-label": inputLabel,
         error: this.props.error,
         positive: this.props.positive,
         "aria-describedby": this.props['aria-describedby'],
@@ -569,11 +584,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           return _this3.open(inputRole);
         },
         onBlur: this.handleInputBlur,
-        onKeyDown: this.handleKeyDown,
+        onKeyDown: this.handleKeyDown // @ts-ignore
+        ,
         onChange: function onChange(event) {
           return _this3.handleInputChange(event, inputRole);
         },
-        placeholder: placeholder,
+        placeholder: this.getPlaceholder(),
         mask: this.getMask(),
         required: this.props.required,
         clearable: this.props.clearable
@@ -617,6 +633,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputLabel = _getOverrides12[0],
           inputLabelProps = _getOverrides12[1];
 
+      var singleDateFormatString = this.props.formatString || DEFAULT_DATE_FORMAT;
+      var formatString = this.props.range && !this.props.separateRangeInputs ? "".concat(singleDateFormatString, " ").concat(INPUT_DELIMITER, " ").concat(singleDateFormatString) : singleDateFormatString;
       return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
@@ -640,6 +658,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
           $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
         }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, _constants.INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, _constants.INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+          // @ts-ignore
           id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
@@ -654,7 +673,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clip: 'rect(0, 0, 0, 0)',
             clipPath: 'inset(100%)'
           }
-        }, locale.datepicker.screenReaderMessageInput), /*#__PURE__*/React.createElement("p", {
+        }, (0, _i18nInterpolation.default)(locale.datepicker.screenReaderMessageInput, {
+          formatString: formatString
+        })), /*#__PURE__*/React.createElement("p", {
           "aria-live": "assertive",
           style: {
             position: 'fixed',
@@ -692,6 +713,7 @@ exports.default = Datepicker;
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: _dateFnsAdapter.default

package/datepicker/day.js

@@ -70,6 +70,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Day);
 
+  // @ts-ignore
   function Day(props) {
     var _this;
 
@@ -106,10 +107,14 @@ var Day = /*#__PURE__*/function (_React$Component) {
         var nextEndDate = null;
 
         if (_this.props.selectedInput === _constants.INPUT_ROLE.startDate) {
-          nextStartDate = selectedDate;
+          // @ts-ignore
+          nextStartDate = selectedDate; // @ts-ignore
+
           nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
         } else if (_this.props.selectedInput === _constants.INPUT_ROLE.endDate) {
-          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          // @ts-ignore
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null; // @ts-ignore
+
           nextEndDate = selectedDate;
         }
 
@@ -460,7 +465,8 @@ var Day = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_Day, _extends({
-          "aria-label": _this2.getAriaLabel(sharedProps, locale),
+          "aria-label": _this2.getAriaLabel(sharedProps, locale) // @ts-ignore
+          ,
           ref: function ref(dayElm) {
             _this2.dayElm = dayElm;
           },
@@ -501,5 +507,6 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: function onMouseLeave() {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });

package/datepicker/index.d.ts

@@ -12,4 +12,4 @@ export * from '../timezonepicker';
 export * from './types';
 export type { DatepickerLocale } from './locale';
 /** @deprecated use SharedStyleProps instead. To be removed in future versions.*/
-export declare type SharedStylePropsT = SharedStyleProps;
+export type SharedStylePropsT = SharedStyleProps;

package/datepicker/index.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 export { default as StatefulContainer } from './stateful-container.js';
 export { default as Calendar } from './calendar.js';
 export { default as StatefulCalendar } from './stateful-calendar.js';
+//$FlowFixMe
 export { default as Datepicker, default as DatePicker } from './datepicker.js';
 export {
   default as StatefulDatepicker,

package/datepicker/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type DatepickerLocale = {
+export type DatepickerLocale = {
     ariaLabel: string;
     ariaLabelRange: string;
     ariaLabelCalendar: string;

package/datepicker/locale.js

@@ -24,7 +24,7 @@ var locale = {
   pastSixMonths: 'Past 6 Months',
   pastYear: 'Past Year',
   pastTwoYears: 'Past 2 Years',
-  screenReaderMessageInput: 'Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
+  screenReaderMessageInput: 'Date format is ${formatString}. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.',
   selectedDate: 'Selected date is ${date}.',
   selectedDateRange: 'Selected date range is from ${startDate} to ${endDate}.',
   selectSecondDatePrompt: 'Select the second date.',

package/datepicker/month.js

@@ -62,15 +62,24 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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; }
 
 var defaultProps = {
+  // @ts-ignore
   dateLabel: null,
   density: _constants.DENSITY.high,
+  // @ts-ignore
   excludeDates: null,
+  // @ts-ignore
   filterDate: null,
+  // @ts-ignore
   highlightDates: null,
+  // @ts-ignore
   includeDates: null,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
+  // @ts-ignore
   month: null,
   adapter: _dateFnsAdapter.default,
   onDayClick: function onDayClick() {},
@@ -80,6 +89,7 @@ var defaultProps = {
   onDayMouseLeave: function onDayMouseLeave() {},
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   value: null
 };
 var CALENDAR_MAX_ROWS = 6;
@@ -119,7 +129,10 @@ var CalendarMonth = /*#__PURE__*/function (_React$Component) {
       var isWithinMonth = true;
 
       while (isWithinMonth || _this.props.fixedHeight && _this.props.peekNextMonth && i < CALENDAR_MAX_ROWS) {
-        weeks.push( /*#__PURE__*/React.createElement(_week.default, {
+        weeks.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(_week.default, {
           adapter: _this.props.adapter,
           date: currentWeekStart,
           dateLabel: _this.props.dateLabel,

package/datepicker/stateful-calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CalendarProps, StatefulDatepickerProps } from './types';
-declare type DatepickerProps<T> = StatefulDatepickerProps<CalendarProps<T>> & Omit<CalendarProps<T>, keyof StatefulDatepickerProps<CalendarProps<T>>>;
+type DatepickerProps<T> = StatefulDatepickerProps<CalendarProps<T>> & Omit<CalendarProps<T>, keyof StatefulDatepickerProps<CalendarProps<T>>>;
 declare class StatefulComponent<T = Date> extends React.Component<DatepickerProps<T>> {
     static defaultProps: DatepickerProps<unknown>;
     render(): JSX.Element;

package/datepicker/stateful-container.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { CalendarProps, ContainerState, DatepickerProps, StatefulContainerProps, StateChangeType, StateReducer } from './types';
-declare type InputProps<T> = CalendarProps<T> | DatepickerProps<T>;
-declare type Props<T> = StatefulContainerProps<InputProps<T>, T>;
+type InputProps<T> = CalendarProps<T> | DatepickerProps<T>;
+type Props<T> = StatefulContainerProps<InputProps<T>, T>;
 declare class StatefulContainer<T = Date> extends React.Component<Props<T>, ContainerState<T>> {
     static defaultProps: {
         stateReducer: StateReducer<unknown>;

package/datepicker/stateful-container.js

@@ -57,7 +57,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, StatefulContainer);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); // @ts-ignore
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
       var date = data.date;
@@ -102,7 +102,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(StatefulContainer, [{
     key: "internalSetState",
     value: function internalSetState(type, changes) {
-      var stateReducer = this.props.stateReducer;
+      var stateReducer = this.props.stateReducer; // @ts-ignore
+
       this.setState(function (prevState) {
         return stateReducer(type, changes, prevState);
       });

package/datepicker/stateful-datepicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { StatefulDatepickerProps, DatepickerProps } from './types';
-declare type Props<T> = StatefulDatepickerProps<DatepickerProps<T>, T> & Omit<DatepickerProps<T>, keyof StatefulDatepickerProps<DatepickerProps<T>, T>>;
+type Props<T> = StatefulDatepickerProps<DatepickerProps<T>, T> & Omit<DatepickerProps<T>, keyof StatefulDatepickerProps<DatepickerProps<T>, T>>;
 declare class StatefulComponent<T = Date> extends React.Component<Props<T>> {
     static defaultProps: Props<any>;
     render(): JSX.Element;

package/datepicker/styled-components.d.ts

@@ -21,8 +21,12 @@ export declare const StyledCalendarHeader: import("styletron-react").StyletronCo
 export declare const StyledMonthHeader: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledMonthYearSelectButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
 export declare const StyledMonthYearSelectIconContainer: import("styletron-react").StyletronComponent<"span", {}>;
-export declare const StyledPrevButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
-export declare const StyledNextButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
+export declare const StyledPrevButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps & {
+    $isTrailing: boolean;
+}>;
+export declare const StyledNextButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps & {
+    $isTrailing: boolean;
+}>;
 export declare const StyledMonth: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledWeek: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledDay: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;