baseui 0.0.0-next-e8c3307 → 0.0.0-next-6acb60a

package/es/datepicker/calendar-header.js

@@ -9,11 +9,12 @@ 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';
@@ -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,17 +63,73 @@ 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", () => {
       if (this.props.onMonthChange) {
         // $FlowFixMe
@@ -176,7 +228,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) {
@@ -231,7 +283,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
@@ -262,7 +314,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,10 +325,10 @@ 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 = {}
       } = this.props;
       const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton);
@@ -294,79 +346,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 +385,79 @@ 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,
+        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'
+            }
+          }
+        }
+      })))), /*#__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))
@@ -389,7 +468,7 @@ export default class CalendarHeader extends React.Component {
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -401,11 +480,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: {
@@ -414,11 +493,32 @@ export default class CalendarHeader extends React.Component {
             }
           }
         }
-      }))));
+      })))));
     });
 
     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() {

package/es/datepicker/constants.js

@@ -20,4 +20,5 @@ 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];

package/es/datepicker/utils/calendar-header-helpers.js

@@ -0,0 +1,34 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { DEFAULT_MONTHS } from '../constants.js';
+
+const getDefaultMonthItems = formatMonthLabel => DEFAULT_MONTHS.map(month => ({
+  id: month.toString(),
+  label: formatMonthLabel(month)
+}));
+
+export const filterMonthItems = (monthItems, filterList) => monthItems.map(month => {
+  if (!filterList.includes(Number(month.id))) {
+    return { ...month,
+      disabled: true
+    };
+  }
+
+  return month;
+});
+export const getFilteredMonthItems = ({
+  filterMonthsList,
+  formatMonthLabel
+}) => {
+  let monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};

package/es/drawer/drawer.js

@@ -252,7 +252,8 @@ class Drawer extends React.Component {
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
       return /*#__PURE__*/React.createElement(FocusLock, {
         returnFocus: true,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        noFocusGuards: true
       }, /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "drawer",
         ref: this.getRef('Root')

package/es/popover/stateful-container.js

@@ -25,6 +25,10 @@ class StatefulContainer extends React.Component {
         this.props.onBlur(e);
       }
 
+      if (this.props.focusLock || this.props.autoFocus) {
+        return;
+      }
+
       this.close();
     });
 

package/es/snackbar/snackbar-context.js

@@ -31,6 +31,15 @@ export function useSnackbar() {
     dequeue: context.dequeue
   };
 }
+
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider({
   children,
   overrides = {},
@@ -46,10 +55,6 @@ export default function SnackbarProvider({
 
   function enqueue(elementProps, duration = defaultDuration) {
     setSnackbars(prev => {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [...prev, {
         elementProps,
         duration
@@ -57,6 +62,13 @@ export default function SnackbarProvider({
     });
   }
 
+  const prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(() => {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(prev => {

package/es/themes/dark-theme/color-component-tokens.js

@@ -91,7 +91,7 @@ export default ((themePrimitives = colorTokens) => ({
   linkActive: themePrimitives.primary300,
   // List
   listHeaderFill: themePrimitives.mono600,
-  listBodyFill: themePrimitives.mono700,
+  listBodyFill: themePrimitives.mono800,
   listIconFill: themePrimitives.mono100,
   listBorder: themePrimitives.mono500,
   // ProgressSteps

package/es/themes/light-theme/color-component-tokens.js

@@ -20,32 +20,32 @@ export default ((themePrimitives = colorTokens) => ({
   buttonPrimaryActive: themePrimitives.primary600,
   buttonPrimarySelectedFill: themePrimitives.primary600,
   buttonPrimarySelectedText: themePrimitives.white,
-  buttonPrimarySpinnerForeground: themePrimitives.primary50,
-  buttonPrimarySpinnerBackground: themePrimitives.primary500,
+  buttonPrimarySpinnerForeground: themePrimitives.accent,
+  buttonPrimarySpinnerBackground: themePrimitives.primaryB,
   buttonSecondaryFill: themePrimitives.primary100,
   buttonSecondaryText: themePrimitives.primary,
   buttonSecondaryHover: themePrimitives.primary200,
   buttonSecondaryActive: themePrimitives.primary300,
   buttonSecondarySelectedFill: themePrimitives.primary300,
   buttonSecondarySelectedText: themePrimitives.primary,
-  buttonSecondarySpinnerForeground: themePrimitives.primary700,
-  buttonSecondarySpinnerBackground: themePrimitives.primary300,
+  buttonSecondarySpinnerForeground: themePrimitives.accent,
+  buttonSecondarySpinnerBackground: themePrimitives.primaryB,
   buttonTertiaryFill: 'transparent',
   buttonTertiaryText: themePrimitives.primary,
   buttonTertiaryHover: themePrimitives.primary50,
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
-  buttonTertiarySpinnerForeground: themePrimitives.primary700,
-  buttonTertiarySpinnerBackground: themePrimitives.primary300,
+  buttonTertiarySpinnerForeground: themePrimitives.accent,
+  buttonTertiarySpinnerBackground: themePrimitives.primary100,
   buttonMinimalFill: 'transparent',
   buttonMinimalText: themePrimitives.primary,
   buttonMinimalHover: themePrimitives.primary50,
   buttonMinimalActive: themePrimitives.primary100,
   buttonMinimalSelectedFill: themePrimitives.primary100,
   buttonMinimalSelectedText: themePrimitives.primary,
-  buttonMinimalSpinnerForeground: themePrimitives.primary700,
-  buttonMinimalSpinnerBackground: themePrimitives.primary300,
+  buttonMinimalSpinnerForeground: themePrimitives.accent,
+  buttonMinimalSpinnerBackground: themePrimitives.primary100,
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -91,7 +91,7 @@ export default ((themePrimitives = colorTokens) => ({
   linkActive: themePrimitives.primary500,
   // List
   listHeaderFill: themePrimitives.white,
-  listBodyFill: themePrimitives.mono200,
+  listBodyFill: themePrimitives.white,
   listIconFill: themePrimitives.mono500,
   listBorder: themePrimitives.mono500,
   // ProgressSteps