baseui 10.6.0 → 10.7.0

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

@@ -153,6 +153,7 @@ function UserMenuComponent(props) {
         }
       }, userMenuProps));
     },
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: function onOpen() {

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

@@ -120,6 +120,7 @@ export default function UserMenuComponent(props: {|
           {...userMenuProps}
         />
       )}
+      autoFocus={false}
       dismissOnEsc={true}
       dismissOnClickOutside={true}
       onOpen={() => setIsOpen(true)}

package/card/styled-components.js

@@ -98,7 +98,6 @@ var Title = (0, _index.styled)('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
     color: $theme.colors.contentPrimary,
-    fontWeight: 500,
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,

package/card/styled-components.js.flow

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

package/combobox/combobox.js

@@ -306,7 +306,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: _index2.PLACEMENT.bottomLeft,

package/combobox/combobox.js.flow

@@ -258,6 +258,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       {...rootProps}
     >
       <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
+        autoFocus={false}
         isOpen={isOpen}
         overrides={popoverOverrides}
         placement={PLACEMENT.bottomLeft}

package/combobox/index.d.ts

@@ -17,11 +17,14 @@ export interface ComboboxOverrides {
   ListItem?: Override<any>;
 }
 
-export type PropsT<OptionT = unknown> = {
+export type PropsT<OptionT = any> = {
   autocomplete?: boolean;
   disabled?: boolean;
-  mapOptionToNode?: ({isSelected: boolean, option: OptionT}) => React.ReactNode;
-  mapOptionToString: (OptionT) => string;
+  mapOptionToNode?: (option: {
+    isSelected: boolean;
+    option: OptionT;
+  }) => React.ReactNode;
+  mapOptionToString: (option: OptionT) => string;
   id?: string;
   name?: string;
   inputRef?: React.Ref<HTMLInputElement>;

package/data-table/column-datetime.js

@@ -86,6 +86,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -461,6 +462,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

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

@@ -68,6 +68,7 @@ type FilterParametersT = {|
 type DatetimeColumnT = ColumnT<Date, FilterParametersT>;
 
 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}`;
 
@@ -415,6 +416,7 @@ function DatetimeFilter(props) {
                     }
                   }}
                   formatString={DATE_FORMAT}
+                  mask={MASK}
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}

package/datepicker/calendar-header.js

@@ -292,8 +292,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides = _this.props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          density = _this$props3.density;
 
       var allPrevDaysDisabled = _this.dateHelpers.monthDisabledBefore(date, _this.props);
 
@@ -343,7 +345,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $disabled: isDisabled,
         $order: _this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -358,8 +360,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides2 = _this.props.overrides,
-          overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
+      var _this$props4 = _this.props,
+          _this$props4$override = _this$props4.overrides,
+          overrides = _this$props4$override === void 0 ? {} : _this$props4$override,
+          density = _this$props4.density;
 
       var allNextDaysDisabled = _this.dateHelpers.monthDisabledAfter(date, _this.props);
 
@@ -413,7 +417,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         $order: _this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -439,10 +443,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var year = _this.dateHelpers.getYear(date);
 
-      var _this$props3 = _this.props,
-          locale = _this$props3.locale,
-          _this$props3$override = _this$props3.overrides,
-          overrides = _this$props3$override === void 0 ? {} : _this$props3$override;
+      var _this$props5 = _this.props,
+          locale = _this$props5.locale,
+          _this$props5$override = _this$props5.overrides,
+          overrides = _this$props5$override === void 0 ? {} : _this$props5$override,
+          density = _this$props5.density;
 
       var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MonthYearSelectButton, _styledComponents.StyledMonthYearSelectButton),
           _getOverrides10 = _slicedToArray(_getOverrides9, 2),
@@ -540,6 +545,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -567,7 +573,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -621,6 +628,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -648,7 +656,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))));
     });
 
@@ -685,8 +694,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props$overrides3 = this.props.overrides,
-          overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
+      var _this$props6 = this.props,
+          _this$props6$override = _this$props6.overrides,
+          overrides = _this$props6$override === void 0 ? {} : _this$props6$override,
+          density = _this$props6.density;
 
       var _getOverrides17 = (0, _overrides.getOverrides)(overrides.CalendarHeader, _styledComponents.StyledCalendarHeader),
           _getOverrides18 = _slicedToArray(_getOverrides17, 2),
@@ -707,6 +718,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(_index3.LocaleContext.Consumer, null, function (locale) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CalendarHeader, _extends({}, calendarHeaderProps, {
+            $density: _this2.props.density,
             onFocus: (0, _focusVisible.forkFocus)(calendarHeaderProps, _this2.handleFocus),
             onBlur: (0, _focusVisible.forkBlur)(calendarHeaderProps, _this2.handleBlur)
           }), _this2.renderPreviousMonthButton({
@@ -723,7 +735,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
               key: offset,
               alt: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
-            }, weekdayHeaderProps), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
+            }, weekdayHeaderProps, {
+              $density: density
+            }), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
           })));
         });
       });

package/datepicker/calendar-header.js.flow

@@ -25,7 +25,7 @@ import {
   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 type {HeaderPropsT} from './types.js';
 import type {LocaleT} from '../locale/types.js';
@@ -266,7 +266,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     theme: ThemeT,
   }) => {
     const date = this.getDateProp();
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const allPrevDaysDisabled = this.dateHelpers.monthDisabledBefore(
       date,
       this.props,
@@ -315,7 +315,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <PrevButtonIcon
-            size={'24px'}
+            size={density === DENSITY.high ? 24 : 36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...prevButtonIconProps}
           />
@@ -332,7 +332,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     theme: ThemeT,
   }) => {
     const date = this.getDateProp();
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const allNextDaysDisabled = this.dateHelpers.monthDisabledAfter(
       date,
       this.props,
@@ -388,7 +388,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <NextButtonIcon
-            size={'24px'}
+            size={density === DENSITY.high ? 24 : 36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...nextButtonIconProps}
           />
@@ -411,7 +411,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     const month = this.dateHelpers.getMonth(date);
     const year = this.dateHelpers.getYear(date);
 
-    const {locale, overrides = {}} = this.props;
+    const {locale, overrides = {}, density} = this.props;
     const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(
       overrides.MonthYearSelectButton,
       StyledMonthYearSelectButton,
@@ -496,6 +496,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
             aria-live="polite"
             type="button"
             $isFocusVisible={this.state.isFocusVisible}
+            $density={density}
             onKeyUp={event => {
               if (this.canArrowsOpenDropdown(event)) {
                 this.setState({isMonthDropdownOpen: true});
@@ -520,6 +521,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
+                size={density === DENSITY.high ? 16 : 24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>
@@ -564,6 +566,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
             aria-live="polite"
             type="button"
             $isFocusVisible={this.state.isFocusVisible}
+            $density={density}
             onKeyUp={event => {
               if (this.canArrowsOpenDropdown(event)) {
                 this.setState({isYearDropdownOpen: true});
@@ -588,6 +591,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
+                size={density === DENSITY.high ? 16 : 24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>
@@ -597,7 +601,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const [CalendarHeader, calendarHeaderProps] = getOverrides(
       overrides.CalendarHeader,
       StyledCalendarHeader,
@@ -623,6 +627,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <>
                 <CalendarHeader
                   {...calendarHeaderProps}
+                  $density={this.props.density}
                   onFocus={forkFocus(calendarHeaderProps, this.handleFocus)}
                   onBlur={forkBlur(calendarHeaderProps, this.handleBlur)}
                 >
@@ -644,6 +649,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
                           this.props.locale,
                         )}
                         {...weekdayHeaderProps}
+                        $density={density}
                       >
                         {this.dateHelpers.getWeekdayMinInLocale(
                           day,

package/datepicker/calendar.js

@@ -426,10 +426,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           "aria-roledescription": translations.ariaRoleDescCalMonth,
           "aria-multiselectable": _this.props.range || null,
           onKeyDown: _this.onKeyDown
-        }, calendarContainerProps), /*#__PURE__*/React.createElement(_month.default, {
+        }, calendarContainerProps, {
+          $density: _this.props.density
+        }), /*#__PURE__*/React.createElement(_month.default, {
           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,
@@ -711,6 +714,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(Root, _extends({
+          $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
           "aria-roledescription": "datepicker",
@@ -742,6 +746,7 @@ exports.default = Calendar;
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: _constants.DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/datepicker/calendar.js.flow

@@ -23,7 +23,7 @@ import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
 import type {CalendarPropsT, CalendarInternalState} from './types.js';
-import {ORIENTATION} from './constants.js';
+import {DENSITY, ORIENTATION} from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
   CalendarPropsT<T>,
@@ -32,6 +32,7 @@ export default class Calendar<T = Date> extends React.Component<
   static defaultProps: {adapter: DateIOAdapter<Date>} = {
     autoFocusCalendar: false,
     dateLabel: null,
+    density: DENSITY.default,
     excludeDates: null,
     filterDate: null,
     highlightedDate: null,
@@ -442,11 +443,13 @@ export default class Calendar<T = Date> extends React.Component<
           aria-multiselectable={this.props.range || null}
           onKeyDown={this.onKeyDown}
           {...calendarContainerProps}
+          $density={this.props.density}
         >
           <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}
@@ -643,6 +646,7 @@ export default class Calendar<T = Date> extends React.Component<
       <LocaleContext.Consumer>
         {locale => (
           <Root
+            $density={this.props.density}
             data-baseweb="calendar"
             role="application"
             aria-roledescription="datepicker"

package/datepicker/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
+exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -35,4 +35,9 @@ exports.STATE_CHANGE_TYPE = STATE_CHANGE_TYPE;
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 exports.WEEKDAYS = WEEKDAYS;
 var DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-exports.DEFAULT_MONTHS = DEFAULT_MONTHS;
+exports.DEFAULT_MONTHS = DEFAULT_MONTHS;
+var DENSITY = {
+  high: 'high',
+  default: 'default'
+};
+exports.DENSITY = DENSITY;

package/datepicker/constants.js.flow

@@ -28,6 +28,11 @@ 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',
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;