baseui 12.1.3 → 13.0.0

package/esm/datepicker/calendar.js

@@ -68,12 +68,15 @@ import dateFnsAdapter from './utils/date-fns-adapter';
 import DateHelpers from './utils/date-helpers';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { DENSITY, ORIENTATION } from './constants';
+import { Button, KIND } from '../button';
+import { ButtonDock } from '../button-dock';
 
 var Calendar = /*#__PURE__*/function (_React$Component) {
   _inherits(Calendar, _React$Component);
 
   var _super = _createSuper(Calendar);
 
+  // @ts-ignore
   function Calendar(props) {
     var _this;
 
@@ -88,9 +91,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getDateInView", function () {
       var _this$props = _this.props,
           highlightedDate = _this$props.highlightedDate,
-          value = _this$props.value;
+          value = _this$props.value; // @ts-ignore
+
+      var minDate = _this.dateHelpers.getEffectiveMinDate(_this.props); // @ts-ignore
 
-      var minDate = _this.dateHelpers.getEffectiveMinDate(_this.props);
 
       var maxDate = _this.dateHelpers.getEffectiveMaxDate(_this.props);
 
@@ -412,10 +416,15 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
         var monthDate = _this.dateHelpers.addMonths(_this.state.date, i);
 
-        var monthKey = "month-".concat(i);
+        var monthKey = "month-".concat(i); // @ts-ignore
+
         monthSubComponents.push(_this.renderCalendarHeader(monthDate, i));
-        monthSubComponents.push( /*#__PURE__*/React.createElement(CalendarContainer, _extends({
-          key: monthKey,
+        monthSubComponents.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(CalendarContainer, _extends({
+          key: monthKey // @ts-ignore
+          ,
           ref: function ref(calendar) {
             _this.calendar = calendar;
           },
@@ -452,7 +461,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           fixedHeight: _this.props.fixedHeight,
           hasLockedBehavior: !!_this.props.hasLockedBehavior,
           selectedInput: _this.props.selectedInput
-        })));
+        }))); // @ts-ignore
+
         monthList.push( /*#__PURE__*/React.createElement("div", {
           key: "month-component-".concat(i)
         }, monthSubComponents));
@@ -528,7 +538,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           label: locale.datepicker.quickSelectLabel
         }, quickSelectFormControlProps), /*#__PURE__*/React.createElement(QuickSelect, _extends({
           "aria-label": locale.datepicker.quickSelectAriaLabel,
-          labelKey: "id",
+          labelKey: "id" // @ts-ignore
+          ,
           onChange: function onChange(params) {
             if (!params.option) {
               _this.setState({
@@ -594,19 +605,74 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    var _this$props3 = _this.props,
-        _highlightedDate = _this$props3.highlightedDate,
-        _value = _this$props3.value,
-        adapter = _this$props3.adapter;
+    _defineProperty(_assertThisInitialized(_this), "renderActionBar", function () {
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          primaryButton = _this$props3.primaryButton,
+          secondaryButton = _this$props3.secondaryButton;
+
+      var _getOverrides17 = getOverrides(overrides.ButtonDock, ButtonDock),
+          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+          ButtonDockComponent = _getOverrides18[0],
+          buttonDockProps = _getOverrides18[1];
+
+      var _getOverrides19 = getOverrides(overrides.PrimaryButton, Button),
+          _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+          PrimaryButtonComponent = _getOverrides20[0],
+          primaryButtonProps = _getOverrides20[1];
+
+      var _getOverrides21 = getOverrides(overrides.SecondaryButton, Button),
+          _getOverrides22 = _slicedToArray(_getOverrides21, 2),
+          SecondaryButtonComponent = _getOverrides22[0],
+          secondaryButtonProps = _getOverrides22[1];
+
+      var primaryButtonComponent = primaryButton != null ? /*#__PURE__*/React.createElement(PrimaryButtonComponent, _extends({
+        onClick: function onClick() {
+          return primaryButton.onClick();
+        }
+      }, primaryButtonProps), primaryButton.label) : null;
+      var secondaryButtonComponent = secondaryButton != null ? /*#__PURE__*/React.createElement(SecondaryButtonComponent, _extends({
+        onClick: function onClick() {
+          return secondaryButton.onClick();
+        },
+        kind: KIND.tertiary
+      }, secondaryButtonProps), secondaryButton.label) : null;
+
+      if (primaryButtonComponent || secondaryButtonComponent) {
+        return /*#__PURE__*/React.createElement(ButtonDockComponent, _extends({
+          primaryAction: primaryButtonComponent,
+          dismissiveAction: secondaryButtonComponent,
+          overrides: mergeOverrides({
+            ActionSubContainer: {
+              style: {
+                flexDirection: 'row-reverse'
+              }
+            }
+          }, buttonDockProps.overrides)
+        }, buttonDockProps));
+      }
+
+      return null;
+    });
+
+    var _this$props4 = _this.props,
+        _highlightedDate = _this$props4.highlightedDate,
+        _value = _this$props4.value,
+        adapter = _this$props4.adapter; // @ts-ignore
+
     _this.dateHelpers = new DateHelpers(adapter);
 
-    var dateInView = _this.getDateInView();
+    var dateInView = _this.getDateInView(); // @ts-ignore
+
 
     var _time = [];
 
     if (Array.isArray(_value)) {
+      // @ts-ignore
       _time = _toConsumableArray(_value);
     } else if (_value) {
+      // @ts-ignore
       _time = [_value];
     }
 
@@ -616,6 +682,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       date: dateInView,
       quickSelectId: null,
       rootElement: null,
+      // @ts-ignore
       time: _time
     };
     return _this;
@@ -701,10 +768,11 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       var _this$props$overrides3 = this.props.overrides,
           overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
 
-      var _getOverrides17 = getOverrides(overrides.Root, StyledRoot),
-          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
-          Root = _getOverrides18[0],
-          rootProps = _getOverrides18[1];
+      var _getOverrides23 = getOverrides(overrides.Root, StyledRoot),
+          _getOverrides24 = _slicedToArray(_getOverrides23, 2),
+          Root = _getOverrides24[0],
+          rootProps = _getOverrides24[1]; // @ts-ignore
+
 
       var _concat = [].concat(this.props.value),
           _concat2 = _slicedToArray(_concat, 2),
@@ -716,7 +784,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
-          "aria-roledescription": "datepicker",
+          "aria-roledescription": "date picker" // @ts-ignore
+          ,
           ref: function ref(root) {
             if (root && root instanceof HTMLElement && !_this2.state.rootElement) {
               _this2.setState({
@@ -728,11 +797,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           onKeyDown: _this2.props.trapTabbing ? _this2.handleTabbing : null
         }, rootProps), _this2.renderMonths({
           ariaRoleDescCalMonth: locale.datepicker.ariaRoleDescriptionCalendarMonth
-        }), _this2.props.timeSelectStart && _this2.renderTimeSelect(startDate, function (time) {
+        }), _this2.props.timeSelectStart && _this2.renderTimeSelect(startDate, // @ts-ignore
+        function (time) {
           return _this2.handleTimeChange(time, 0);
-        }, locale.datepicker.timeSelectStartLabel), _this2.props.timeSelectEnd && _this2.props.range && _this2.renderTimeSelect(endDate, function (time) {
+        }, locale.datepicker.timeSelectStartLabel), _this2.props.timeSelectEnd && _this2.props.range && _this2.renderTimeSelect(endDate, // @ts-ignore
+        function (time) {
           return _this2.handleTimeChange(time, 1);
-        }, locale.datepicker.timeSelectEndLabel), _this2.renderQuickSelect());
+        }, locale.datepicker.timeSelectEndLabel), _this2.renderQuickSelect(), _this2.renderActionBar());
       });
     }
   }]);
@@ -762,6 +833,7 @@ _defineProperty(Calendar, "defaultProps", {
   orientation: ORIENTATION.horizontal,
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   adapter: dateFnsAdapter,
   value: null,
   trapTabbing: false

package/esm/datepicker/datepicker.js

@@ -66,7 +66,7 @@ import DateHelpers from './utils/date-helpers';
 import dateFnsAdapter from './utils/date-fns-adapter';
 import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants';
 export var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-var INPUT_DELIMITER = '–';
+var INPUT_DELIMITER = '–'; // @ts-ignore
 
 var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
   var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -101,7 +101,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);
 
@@ -148,7 +148,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,
@@ -204,6 +205,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({
@@ -222,7 +229,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);
 
@@ -314,7 +321,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);
 
@@ -328,7 +336,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         inputValue: inputValue
-      });
+      }); // @ts-ignore
+
 
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -368,8 +377,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);
@@ -427,7 +438,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();
 
@@ -457,6 +468,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.props.rangedCalendarBehavior === 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(props.adapter);
     _this.state = {
       calendarFocused: false,
@@ -525,7 +540,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),
@@ -537,7 +552,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === 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'],
@@ -550,11 +565,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
@@ -598,6 +614,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(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           accessibilityType: ACCESSIBILITY_TYPE.none,
@@ -621,6 +639,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, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, 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',
@@ -635,7 +654,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clip: 'rect(0, 0, 0, 0)',
             clipPath: 'inset(100%)'
           }
-        }, locale.datepicker.screenReaderMessageInput), /*#__PURE__*/React.createElement("p", {
+        }, getInterpolatedString(locale.datepicker.screenReaderMessageInput, {
+          formatString: formatString
+        })), /*#__PURE__*/React.createElement("p", {
           "aria-live": "assertive",
           style: {
             position: 'fixed',
@@ -671,6 +692,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: dateFnsAdapter

package/esm/datepicker/day.js

@@ -56,6 +56,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Day);
 
+  // @ts-ignore
   function Day(props) {
     var _this;
 
@@ -92,10 +93,14 @@ var Day = /*#__PURE__*/function (_React$Component) {
         var nextEndDate = null;
 
         if (_this.props.selectedInput === 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 === 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;
         }
 
@@ -446,7 +451,8 @@ var Day = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       React.createElement(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;
           },
@@ -485,6 +491,7 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: function onMouseLeave() {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });
 

package/esm/datepicker/locale.js

@@ -17,7 +17,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/esm/datepicker/month.js

@@ -48,15 +48,24 @@ import DateHelpers from './utils/date-helpers';
 import { getOverrides } from '../helpers/overrides';
 import { DENSITY } from './constants';
 var defaultProps = {
+  // @ts-ignore
   dateLabel: null,
   density: 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,
   onDayClick: function onDayClick() {},
@@ -66,6 +75,7 @@ var defaultProps = {
   onDayMouseLeave: function onDayMouseLeave() {},
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   value: null
 };
 var CALENDAR_MAX_ROWS = 6;
@@ -105,7 +115,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, {
+        weeks.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Week, {
           adapter: _this.props.adapter,
           date: currentWeekStart,
           dateLabel: _this.props.dateLabel,

package/esm/datepicker/stateful-container.js

@@ -51,7 +51,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;
@@ -96,7 +96,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);
       });