baseui 10.3.0 → 10.7.0

package/es/datepicker/calendar-header.js

@@ -9,17 +9,18 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import ArrowRight from '../icon/arrow-right.js';
-import ArrowLeft from '../icon/arrow-left.js';
-import TriangleDown from '../icon/triangle-down.js';
+import ChevronRight from '../icon/chevron-right.js';
+import ChevronLeft from '../icon/chevron-left.js';
+import ChevronDown from '../icon/chevron-down.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
+import { getFilteredMonthItems } from './utils/calendar-header-helpers.js';
 import { StatefulMenu } from '../menu/index.js';
 import { Popover } from '../popover/index.js';
 import { LocaleContext } from '../locale/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 import { StyledCalendarHeader, StyledPrevButton, StyledNextButton, StyledMonthHeader, StyledWeekdayHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer } from './styled-components.js';
-import { ORIENTATION, WEEKDAYS } from './constants.js';
+import { ORIENTATION, WEEKDAYS, DENSITY } from './constants.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
@@ -38,10 +39,6 @@ const DIRECTION = {
   PREVIOUS: 'previous'
 };
 
-function yearMonthToId(year, month) {
-  return `${year}-${month}`;
-}
-
 function idToYearMonth(id) {
   return id.split('-').map(Number);
 }
@@ -52,14 +49,13 @@ export default class CalendarHeader extends React.Component {
 
     _defineProperty(this, "dateHelpers", void 0);
 
-    _defineProperty(this, "items", void 0);
+    _defineProperty(this, "monthItems", void 0);
 
-    _defineProperty(this, "minYear", void 0);
-
-    _defineProperty(this, "maxYear", void 0);
+    _defineProperty(this, "yearItems", void 0);
 
     _defineProperty(this, "state", {
-      isMonthYearDropdownOpen: false,
+      isMonthDropdownOpen: false,
+      isYearDropdownOpen: false,
       isFocusVisible: false
     });
 
@@ -67,15 +63,71 @@ export default class CalendarHeader extends React.Component {
       return this.props.date || this.dateHelpers.date();
     });
 
-    _defineProperty(this, "handleYearChange", ({
-      value
-    }) => {
-      if (this.props.onYearChange) {
-        // $FlowFixMe
-        this.props.onYearChange({
-          date: this.dateHelpers.setYear(this.getDateProp(), value[0].id)
-        });
+    _defineProperty(this, "getYearItems", () => {
+      const date = this.getDateProp();
+      const maxDate = this.props.maxDate;
+      const minDate = this.props.minDate;
+      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
+      const selectedMonth = this.dateHelpers.getMonth(date); // TODO: this logic can be optimized to only run when minDate / maxDate change
+
+      this.yearItems = Array.from({
+        length: maxYear - minYear + 1
+      }, (_, i) => minYear + i).map(year => ({
+        id: year.toString(),
+        label: year.toString()
+      }));
+      const monthOfMaxDate = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH;
+      const monthOfMinDate = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      const maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, (x, i) => i); // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      const minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, (x, i) => i + monthOfMinDate);
+
+      if (selectedMonth > maxYearMonths[maxYearMonths.length - 1]) {
+        const lastIdx = this.yearItems.length - 1;
+        this.yearItems[lastIdx] = { ...this.yearItems[lastIdx],
+          disabled: true
+        };
       }
+
+      if (selectedMonth < minYearMonths[0]) {
+        this.yearItems[0] = { ...this.yearItems[0],
+          disabled: true
+        };
+      }
+    });
+
+    _defineProperty(this, "getMonthItems", () => {
+      const date = this.getDateProp();
+      const year = this.dateHelpers.getYear(date);
+      const maxDate = this.props.maxDate;
+      const minDate = this.props.minDate;
+      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
+      const monthOfMaxDate = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      const maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, (x, i) => i);
+      const monthOfMinDate = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      const minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, (x, i) => i + monthOfMinDate);
+      const maxMinYearMonthsIntersection = maxYearMonths.filter(year => minYearMonths.includes(year));
+      const filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null;
+
+      const formatMonthLabel = month => this.dateHelpers.getMonthInLocale(month, this.props.locale);
+
+      this.monthItems = getFilteredMonthItems({
+        filterMonthsList,
+        formatMonthLabel
+      });
     });
 
     _defineProperty(this, "increaseMonth", () => {
@@ -153,7 +205,8 @@ export default class CalendarHeader extends React.Component {
     }) => {
       const date = this.getDateProp();
       const {
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const allPrevDaysDisabled = this.dateHelpers.monthDisabledBefore(date, this.props);
       let isDisabled = false;
@@ -176,7 +229,7 @@ export default class CalendarHeader extends React.Component {
       }
 
       const [PrevButton, prevButtonProps] = getOverrides(overrides.PrevButton, StyledPrevButton);
-      const [PrevButtonIcon, prevButtonIconProps] = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ArrowRight : ArrowLeft);
+      const [PrevButtonIcon, prevButtonIconProps] = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ChevronRight : ChevronLeft);
       let clickHandler = this.decreaseMonth;
 
       if (allPrevDaysDisabled) {
@@ -193,7 +246,7 @@ export default class CalendarHeader extends React.Component {
         $disabled: isDisabled,
         $order: this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: density === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -208,7 +261,8 @@ export default class CalendarHeader extends React.Component {
     }) => {
       const date = this.getDateProp();
       const {
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const allNextDaysDisabled = this.dateHelpers.monthDisabledAfter(date, this.props);
       let isDisabled = false;
@@ -231,7 +285,7 @@ export default class CalendarHeader extends React.Component {
       }
 
       const [NextButton, nextButtonProps] = getOverrides(overrides.NextButton, StyledNextButton);
-      const [NextButtonIcon, nextButtonIconProps] = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ArrowLeft : ArrowRight);
+      const [NextButtonIcon, nextButtonIconProps] = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ChevronLeft : ChevronRight);
       let clickHandler = this.increaseMonth; // The other option is to always provide a click handler and let customers
       // override its functionality based on the `$allPrevDaysDisabled` prop
       // in a custom NextButton component override
@@ -252,7 +306,7 @@ export default class CalendarHeader extends React.Component {
         $isFocusVisible: this.state.isFocusVisible,
         $order: this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: density === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -262,7 +316,7 @@ export default class CalendarHeader extends React.Component {
     });
 
     _defineProperty(this, "canArrowsOpenDropdown", event => {
-      if (!this.state.isMonthYearDropdownOpen) {
+      if (!this.state.isMonthDropdownOpen && !this.state.isYearDropdownOpen) {
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
           return true;
         }
@@ -273,11 +327,12 @@ export default class CalendarHeader extends React.Component {
 
     _defineProperty(this, "renderMonthYearDropdown", () => {
       const date = this.getDateProp();
+      const month = this.dateHelpers.getMonth(date);
+      const year = this.dateHelpers.getYear(date);
       const {
         locale,
-        maxDate,
-        minDate,
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton);
       const [MonthYearSelectIconContainer, monthYearSelectIconContainerProps] = getOverrides(overrides.MonthYearSelectIconContainer, StyledMonthYearSelectIconContainer);
@@ -294,79 +349,38 @@ export default class CalendarHeader extends React.Component {
       menuProps && menuProps.overrides); // $FlowFixMe
 
       menuProps.overrides = menuOverrides;
-      const defaultMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
-      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
-      const maxDateMonth = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... maxDateMonth]
-
-      const maxYearMonths = Array.from({
-        length: maxDateMonth + 1
-      }, (x, i) => i);
-      const minDateMonth = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [minDateMonth, ...., 10, 11]
-
-      const minYearMonths = Array.from({
-        length: 12 - minDateMonth
-      }, (x, i) => i + minDateMonth);
-
-      if (this.maxYear !== maxYear || this.minYear !== minYear) {
-        this.maxYear = maxYear;
-        this.minYear = minYear;
-        this.items = [];
-
-        for (let i = minYear; i <= maxYear; i++) {
-          let months;
-
-          if (i === minYear && i === maxYear) {
-            months = maxYearMonths.filter(month => minYearMonths.includes(month));
-          } else if (i === minYear) {
-            months = minYearMonths;
-          } else if (i === maxYear) {
-            months = maxYearMonths;
-          } else {
-            months = defaultMonths;
-          }
-
-          months.forEach(month => {
-            this.items.push({
-              id: yearMonthToId(i, month),
-              label: `${this.dateHelpers.getMonthInLocale(month, locale)} ${i}`
-            });
-          });
-        }
-      }
-
-      const initialIndex = this.items.findIndex(item => {
-        return item.id === yearMonthToId(this.dateHelpers.getYear(date), this.dateHelpers.getMonth(date));
-      });
-      const monthYearTitle = `${this.dateHelpers.getMonthInLocale(this.dateHelpers.getMonth(date), locale)} ${this.dateHelpers.getYear(date)}`;
-      return this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, monthYearTitle) : /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+      const initialMonthIndex = this.monthItems.findIndex(month => month.id === this.dateHelpers.getMonth(date).toString());
+      const initialYearIndex = this.yearItems.findIndex(year => year.id === this.dateHelpers.getYear(date).toString());
+      const monthTitle = `${this.dateHelpers.getMonthInLocale(this.dateHelpers.getMonth(date), locale)}`;
+      const yearTitle = `${this.dateHelpers.getYear(date)}`;
+      return this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, `${monthTitle} ${yearTitle}`) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         autoFocus: true,
         focusLock: true,
-        isOpen: this.state.isMonthYearDropdownOpen,
+        isOpen: this.state.isMonthDropdownOpen,
         onClick: () => {
           this.setState(prev => ({
-            isMonthYearDropdownOpen: !prev.isMonthYearDropdownOpen
+            isMonthDropdownOpen: !prev.isMonthDropdownOpen
           }));
         },
         onClickOutside: () => this.setState({
-          isMonthYearDropdownOpen: false
+          isMonthDropdownOpen: false
         }),
         onEsc: () => this.setState({
-          isMonthYearDropdownOpen: false
+          isMonthDropdownOpen: false
         }),
         content: () => /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
           initialState: {
-            highlightedIndex: initialIndex,
+            highlightedIndex: initialMonthIndex,
             isFocused: true
           },
-          items: this.items,
+          items: this.monthItems,
           onItemSelect: ({
             item,
             event
           }) => {
             event.preventDefault();
-            const [year, month] = idToYearMonth(item.id);
+            const month = idToYearMonth(item.id);
             const updatedDate = this.dateHelpers.set(date, {
               year,
               month
@@ -374,11 +388,81 @@ export default class CalendarHeader extends React.Component {
             this.props.onMonthChange && this.props.onMonthChange({
               date: updatedDate
             });
+            this.setState({
+              isMonthDropdownOpen: false
+            });
+          }
+        }, menuProps))
+      }, popoverProps), /*#__PURE__*/React.createElement(MonthYearSelectButton, _extends({
+        "aria-live": "polite",
+        type: "button",
+        $isFocusVisible: this.state.isFocusVisible,
+        $density: density,
+        onKeyUp: event => {
+          if (this.canArrowsOpenDropdown(event)) {
+            this.setState({
+              isMonthDropdownOpen: true
+            });
+          }
+        },
+        onKeyDown: event => {
+          if (this.canArrowsOpenDropdown(event)) {
+            // disables page scroll
+            event.preventDefault();
+          }
+
+          if (event.key === 'Tab') {
+            this.setState({
+              isMonthDropdownOpen: false
+            });
+          }
+        }
+      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
+        title: "",
+        overrides: {
+          Svg: {
+            props: {
+              role: 'presentation'
+            }
+          }
+        },
+        size: density === DENSITY.high ? 16 : 24
+      })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+        placement: "bottom",
+        focusLock: true,
+        isOpen: this.state.isYearDropdownOpen,
+        onClick: () => {
+          this.setState(prev => ({
+            isYearDropdownOpen: !prev.isYearDropdownOpen
+          }));
+        },
+        onClickOutside: () => this.setState({
+          isYearDropdownOpen: false
+        }),
+        onEsc: () => this.setState({
+          isYearDropdownOpen: false
+        }),
+        content: () => /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
+          initialState: {
+            highlightedIndex: initialYearIndex,
+            isFocused: true
+          },
+          items: this.yearItems,
+          onItemSelect: ({
+            item,
+            event
+          }) => {
+            event.preventDefault();
+            const year = idToYearMonth(item.id);
+            const updatedDate = this.dateHelpers.set(date, {
+              year,
+              month
+            });
             this.props.onYearChange && this.props.onYearChange({
               date: updatedDate
             });
             this.setState({
-              isMonthYearDropdownOpen: false
+              isYearDropdownOpen: false
             });
           }
         }, menuProps))
@@ -386,10 +470,11 @@ export default class CalendarHeader extends React.Component {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: this.state.isFocusVisible,
+        $density: density,
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -401,11 +486,11 @@ export default class CalendarHeader extends React.Component {
 
           if (event.key === 'Tab') {
             this.setState({
-              isMonthYearDropdownOpen: false
+              isYearDropdownOpen: false
             });
           }
         }
-      }, monthYearSelectButtonProps), monthYearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(TriangleDown, {
+      }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
           Svg: {
@@ -413,23 +498,47 @@ export default class CalendarHeader extends React.Component {
               role: 'presentation'
             }
           }
-        }
-      }))));
+        },
+        size: density === DENSITY.high ? 16 : 24
+      })))));
     });
 
     this.dateHelpers = new DateHelpers(props.adapter);
-    this.items = [];
+    this.monthItems = [];
+    this.yearItems = [];
+  }
+
+  componentDidMount() {
+    this.getYearItems();
+    this.getMonthItems();
+  }
+
+  componentDidUpdate(prevProps) {
+    const selectedMonthDidChange = this.dateHelpers.getMonth(this.props.date) !== this.dateHelpers.getMonth(prevProps.date);
+    const selectedYearDidChange = this.dateHelpers.getYear(this.props.date) !== this.dateHelpers.getYear(prevProps.date);
+
+    if (selectedMonthDidChange) {
+      // re-calculate yearItems
+      this.getYearItems();
+    }
+
+    if (selectedYearDidChange) {
+      // re-calculate monthItems
+      this.getMonthItems();
+    }
   }
 
   render() {
     const {
-      overrides = {}
+      overrides = {},
+      density
     } = this.props;
     const [CalendarHeader, calendarHeaderProps] = getOverrides(overrides.CalendarHeader, StyledCalendarHeader);
     const [MonthHeader, monthHeaderProps] = getOverrides(overrides.MonthHeader, StyledMonthHeader);
     const [WeekdayHeader, weekdayHeaderProps] = getOverrides(overrides.WeekdayHeader, StyledWeekdayHeader);
     const startOfWeek = this.dateHelpers.getStartOfWeek(this.getDateProp(), this.props.locale);
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarHeader, _extends({}, calendarHeaderProps, {
+      $density: this.props.density,
       onFocus: forkFocus(calendarHeaderProps, this.handleFocus),
       onBlur: forkBlur(calendarHeaderProps, this.handleBlur)
     }), this.renderPreviousMonthButton({
@@ -445,7 +554,9 @@ export default class CalendarHeader extends React.Component {
       return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
         key: offset,
         alt: this.dateHelpers.getWeekdayInLocale(day, this.props.locale)
-      }, weekdayHeaderProps), this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale));
+      }, weekdayHeaderProps, {
+        $density: density
+      }), this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale));
     })))));
   }
 

package/es/datepicker/calendar.js

@@ -19,7 +19,7 @@ import { StyledCalendarContainer, StyledMonthContainer, StyledRoot, StyledSelect
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import { ORIENTATION } from './constants.js';
+import { DENSITY, ORIENTATION } from './constants.js';
 export default class Calendar extends React.Component {
   constructor(props) {
     super(props);
@@ -329,10 +329,13 @@ export default class Calendar extends React.Component {
           "aria-roledescription": translations.ariaRoleDescCalMonth,
           "aria-multiselectable": this.props.range || null,
           onKeyDown: this.onKeyDown
-        }, calendarContainerProps), /*#__PURE__*/React.createElement(Month, {
+        }, calendarContainerProps, {
+          $density: this.props.density
+        }), /*#__PURE__*/React.createElement(Month, {
           adapter: this.props.adapter,
           date: monthDate,
           dateLabel: this.props.dateLabel,
+          density: this.props.density,
           excludeDates: this.props.excludeDates,
           filterDate: this.props.filterDate,
           highlightedDate: this.state.highlightedDate,
@@ -571,6 +574,7 @@ export default class Calendar extends React.Component {
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [startDate, endDate] = [].concat(this.props.value);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
+      $density: this.props.density,
       "data-baseweb": "calendar",
       role: "application",
       "aria-roledescription": "datepicker",
@@ -593,6 +597,7 @@ export default class Calendar extends React.Component {
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/es/datepicker/constants.js

@@ -20,4 +20,9 @@ export const STATE_CHANGE_TYPE = Object.freeze({
   mouseOver: 'mouseOver',
   mouseLeave: 'mouseLeave'
 });
-export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export const DENSITY = {
+  high: 'high',
+  default: 'default'
+};