baseui 10.5.0 → 10.7.2

package/datepicker/types.js.flow

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import type {OverrideT} from '../helpers/overrides.js';
 import type {SizeT} from '../input/types.js';
-import {ORIENTATION, STATE_CHANGE_TYPE} from './constants.js';
+import {ORIENTATION, STATE_CHANGE_TYPE, DENSITY} from './constants.js';
 import type {DateIOAdapter} from './utils/types.js';
 import type {
   TimePickerPropsT as TimePickerPropsTBase,
@@ -23,6 +23,8 @@ type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/
 
 type onChangeT<T> = ({date: ?T | Array<T>}) => mixed;
 
+export type DensityT = $Keys<typeof DENSITY>;
+
 export type DatepickerOverridesT = {
   Root?: OverrideT,
   /** Override for reused Select component. QuickSelect is **not a styled  element** but a react component that can be replaced */
@@ -57,12 +59,16 @@ export type DatepickerOverridesT = {
   InputWrapper?: OverrideT,
   /** Override for reused Popover component. Popover is **not a styled  element** but a react component that can be replaced */
   Popover?: OverrideT,
+  StartDate?: OverrideT,
+  EndDate?: OverrideT,
+  InputLabel?: OverrideT,
 };
 
 export type DayPropsT<T = Date> = {
   disabled: boolean,
   date: T,
   dateLabel: ?(day: T) => React.Node,
+  density: DensityT,
   filterDate: ?(day: T) => boolean,
   highlightedDate: ?T,
   includeDates: ?Array<T>,
@@ -93,6 +99,7 @@ export type DayStateT = {
 export type WeekPropsT<T = Date> = {
   date: T,
   dateLabel: ?(date: T) => React.Node,
+  density: DensityT,
   excludeDates: ?Array<T>,
   filterDate: ?(day: T) => boolean,
   // highlighted while keyboard navigating or hovered
@@ -132,6 +139,8 @@ export type CalendarInternalState<T = Date> = {
 export type CalendarPropsT<T = Date> = {
   /** Defines if the calendar is set to be focused on an initial render. */
   autoFocusCalendar?: boolean,
+  /** Determines the density of the calendar */
+  density?: DensityT,
   /** A list of dates to disable. */
   excludeDates?: ?Array<T>,
   /** Display select for quickly choosing date ranges. `range` must be true as well. */
@@ -219,18 +228,26 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   mountNode?: HTMLElement,
   /** Called when calendar is closed */
   onClose?: () => mixed,
+  /** Called when calendar is opened */
+  onOpen?: () => mixed,
   mask?: string | null,
+  /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
+  separateRangeInputs?: boolean,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 export type SharedStylePropsT = {
   // eslint-disable-next-line flowtype/no-weak-types
   $date: any,
   $disabled: ?boolean,
+  $density: DensityT,
   $endDate: ?boolean,
   $endOfMonth: ?boolean,
   $isHighlighted: ?boolean,
   $isHovered: ?boolean,
   $isFocusVisible: ?boolean,
+  $month: ?number,
   $outsideMonth: ?boolean,
   $outsideMonthWithinRange: ?boolean,
   $peekNextMonth: ?boolean,

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFilteredMonthItems = exports.filterMonthItems = void 0;
+
+var _constants = require("../constants.js");
+
+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 _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 getDefaultMonthItems = function getDefaultMonthItems(formatMonthLabel) {
+  return _constants.DEFAULT_MONTHS.map(function (month) {
+    return {
+      id: month.toString(),
+      label: formatMonthLabel(month)
+    };
+  });
+};
+
+var filterMonthItems = function filterMonthItems(monthItems, filterList) {
+  return monthItems.map(function (month) {
+    if (!filterList.includes(Number(month.id))) {
+      return _objectSpread(_objectSpread({}, month), {}, {
+        disabled: true
+      });
+    }
+
+    return month;
+  });
+};
+
+exports.filterMonthItems = filterMonthItems;
+
+var getFilteredMonthItems = function getFilteredMonthItems(_ref) {
+  var filterMonthsList = _ref.filterMonthsList,
+      formatMonthLabel = _ref.formatMonthLabel;
+  var monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};
+
+exports.getFilteredMonthItems = getFilteredMonthItems;

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

@@ -0,0 +1,53 @@
+/*
+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.
+*/
+// @flow
+import {DEFAULT_MONTHS} from '../constants.js';
+
+export type OptionT = {
+  id: string,
+  label: string,
+  disabled?: boolean,
+};
+
+type GetMonthItemsArgsT = {
+  filterMonthsList: number[] | null,
+  formatMonthLabel: number => string,
+};
+
+const getDefaultMonthItems = (formatMonthLabel: number => string) =>
+  DEFAULT_MONTHS.map<OptionT>(month => ({
+    id: month.toString(),
+    label: formatMonthLabel(month),
+  }));
+
+export const filterMonthItems = (monthItems: OptionT[], filterList: number[]) =>
+  monthItems.map<OptionT>(month => {
+    if (!filterList.includes(Number(month.id))) {
+      return {
+        ...month,
+        disabled: true,
+      };
+    }
+    return month;
+  });
+
+export const getFilteredMonthItems = ({
+  filterMonthsList,
+  formatMonthLabel,
+}: GetMonthItemsArgsT) => {
+  let monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/datepicker/utils/date-helpers.js

@@ -51,7 +51,7 @@ var DateHelpers = function DateHelpers(_adapter) {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ'

package/datepicker/utils/date-helpers.js.flow

@@ -40,7 +40,7 @@ class DateHelpers<T> {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ',

package/datepicker/week.js

@@ -92,6 +92,7 @@ var Week = /*#__PURE__*/function (_React$Component) {
             adapter: _this.props.adapter,
             date: day,
             dateLabel: _this.props.dateLabel,
+            density: _this.props.density,
             disabled: _this.dateHelpers.isDayDisabled(day, _this.props),
             excludeDates: _this.props.excludeDates,
             filterDate: _this.props.filterDate,

package/datepicker/week.js.flow

@@ -52,6 +52,7 @@ export default class Week<T = Date> extends React.Component<WeekPropsT<T>> {
             adapter={this.props.adapter}
             date={day}
             dateLabel={this.props.dateLabel}
+            density={this.props.density}
             disabled={this.dateHelpers.isDayDisabled(day, this.props)}
             excludeDates={this.props.excludeDates}
             filterDate={this.props.filterDate}

package/dnd-list/index.js.flow

@@ -5,7 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {arrayMove, arrayRemove} from 'react-movable';
+import {arrayMove, arrayRemove} from 'react-movable';
+export {arrayMove, arrayRemove};
 export {default as StatefulList} from './stateful-list.js';
 export {default as StatefulListContainer} from './stateful-list-container.js';
 export {default as List} from './list.js';

package/dnd-list/list.js

@@ -220,8 +220,7 @@ var StatelessList = /*#__PURE__*/function (_React$Component) {
               display: 'flex'
             })
           }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(_grab.default, {
-            size: 24,
-            color: "#CCC"
+            size: 24
           })), /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), value), removable && /*#__PURE__*/React.createElement(CloseHandle, _extends({}, sharedProps, {
             onClick: function onClick(evt) {
               evt.preventDefault();

package/dnd-list/list.js.flow

@@ -136,7 +136,7 @@ class StatelessList extends React.Component<
                   style={{...props.style, display: 'flex'}}
                 >
                   <DragHandle {...sharedProps} {...dragHandleProps}>
-                    <Grab size={24} color="#CCC" />
+                    <Grab size={24} />
                   </DragHandle>
                   <Label {...sharedProps} {...labelProps}>
                     {value}

package/dnd-list/styled-components.js

@@ -94,7 +94,7 @@ var DragHandle = (0, _index.styled)('div', function (_ref4) {
 
   var $theme = _ref4.$theme;
   var marginDir = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
-  return _ref5 = {}, _defineProperty(_ref5, marginDir, $theme.sizing.scale600), _defineProperty(_ref5, "width", $theme.sizing.scale800), _defineProperty(_ref5, "display", 'flex'), _defineProperty(_ref5, "alignItems", 'center'), _ref5;
+  return _ref5 = {}, _defineProperty(_ref5, marginDir, $theme.sizing.scale600), _defineProperty(_ref5, "width", $theme.sizing.scale800), _defineProperty(_ref5, "color", '#CCC'), _defineProperty(_ref5, "display", 'flex'), _defineProperty(_ref5, "alignItems", 'center'), _ref5;
 });
 exports.DragHandle = DragHandle;
 DragHandle.displayName = "DragHandle";

package/dnd-list/styled-components.js.flow

@@ -94,6 +94,7 @@ export const DragHandle = styled<SharedStylePropsArgT>('div', ({$theme}) => {
   return {
     [marginDir]: $theme.sizing.scale600,
     width: $theme.sizing.scale800,
+    color: '#CCC',
     display: 'flex',
     alignItems: 'center',
   };

package/drawer/drawer.js

@@ -342,7 +342,8 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
           returnFocus: true,
-          autoFocus: autoFocus
+          autoFocus: autoFocus,
+          noFocusGuards: true
         }, /*#__PURE__*/React.createElement(Root, _extends({
           "data-baseweb": "drawer",
           ref: _this3.getRef('Root')

package/drawer/drawer.js.flow

@@ -253,7 +253,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus}>
+            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/app-nav-bar/user-menu.js

@@ -96,6 +96,7 @@ export default function UserMenuComponent(props) {
         close();
       }
     }, userMenuProps)),
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: () => setIsOpen(true),

package/es/button/styled-components.js

@@ -39,7 +39,7 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   },
   marginLeft: 0,

package/es/card/styled-components.js

@@ -80,7 +80,6 @@ export const Title = styled('h1', ({
   $theme
 }) => ({ ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,

package/es/combobox/combobox.js

@@ -235,7 +235,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: PLACEMENT.bottomLeft,

package/es/data-table/column-datetime.js

@@ -29,6 +29,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -326,6 +327,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],