baseui 10.6.0 → 10.7.0

package/es/datepicker/styled-components.js

@@ -6,19 +6,47 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
-import { ORIENTATION } from './constants.js';
+import { ORIENTATION, DENSITY } from './constants.js';
 /**
  * Main component container element
  */
 
-export const StyledInputWrapper = styled('div', () => ({
+export const StyledInputWrapper = styled('div', props => {
+  const {
+    $separateRangeInputs
+  } = props;
+  return {
+    width: '100%',
+    ...($separateRangeInputs ? {
+      display: 'flex',
+      justifyContent: 'center'
+    } : {})
+  };
+});
+StyledInputWrapper.displayName = "StyledInputWrapper";
+export const StyledInputLabel = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300
+}));
+StyledInputLabel.displayName = "StyledInputLabel";
+export const StyledStartDate = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300
+}));
+StyledStartDate.displayName = "StyledStartDate";
+export const StyledEndDate = styled('div', ({
+  $theme
+}) => ({
   width: '100%'
 }));
 /**
  * Main component container element
  */
 
-StyledInputWrapper.displayName = "StyledInputWrapper";
+StyledEndDate.displayName = "StyledEndDate";
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {
@@ -53,13 +81,14 @@ export const StyledCalendarContainer = styled('div', props => {
   const {
     $theme: {
       sizing
-    }
+    },
+    $density
   } = props;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
@@ -78,18 +107,20 @@ StyledSelectorContainer.displayName = "StyledSelectorContainer";
 export const StyledCalendarHeader = styled('div', props => {
   const {
     $theme: {
+      typography,
       borders,
       colors,
       sizing
-    }
+    },
+    $density
   } = props;
-  return {
+  return { ...($density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge),
     color: colors.calendarHeaderForeground,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: sizing.scale500,
-    paddingBottom: sizing.scale500,
+    paddingTop: sizing.scale600,
+    paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale600,
     paddingRight: sizing.scale600,
     backgroundColor: colors.calendarHeaderBackground,
@@ -98,7 +129,7 @@ export const StyledCalendarHeader = styled('div', props => {
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: `calc(${sizing.scale800} + ${sizing.scale0})`
+    minHeight: $density === DENSITY.high ? `calc(${sizing.scale800} + ${sizing.scale0})` : sizing.scale950
   };
 });
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
@@ -111,19 +142,27 @@ export const StyledMonthHeader = styled('div', props => {
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
 export const StyledMonthYearSelectButton = styled('button', props => {
-  return { ...props.$theme.typography.font200,
+  const {
+    $theme: {
+      typography,
+      colors
+    },
+    $isFocusVisible,
+    $density
+  } = props;
+  return { ...($density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge),
     alignItems: 'center',
     backgroundColor: 'transparent',
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderTopWidth: 0,
     borderBottomWidth: 0,
-    color: props.$theme.colors.calendarHeaderForeground,
+    color: colors.calendarHeaderForeground,
     cursor: 'pointer',
     display: 'flex',
     outline: 'none',
     ':focus': {
-      boxShadow: props.$isFocusVisible ? `0 0 0 3px ${props.$theme.colors.accent}` : 'none'
+      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none'
     }
   };
 });
@@ -145,6 +184,7 @@ function getArrowBtnStyle({
 }) {
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -156,8 +196,6 @@ function getArrowBtnStyle({
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -186,7 +224,7 @@ export const StyledWeek = styled('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 StyledWeek.displayName = "StyledWeek";
@@ -408,26 +446,45 @@ export const StyledDay = styled('div', props => {
     $outsideMonth,
     $outsideMonthWithinRange,
     $hasDateLabel,
+    $density,
     $theme: {
       colors,
+      typography,
       sizing
     }
   } = props;
   const code = getDayStateCode(props);
-  return {
+  let height;
+
+  if ($hasDateLabel) {
+    if ($density === DENSITY.high) {
+      height = '60px';
+    } else {
+      height = '70px';
+    }
+  } else {
+    if ($density === DENSITY.high) {
+      height = '40px';
+    } else {
+      height = '48px';
+    }
+  }
+
+  return { ...($density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium),
     boxSizing: 'border-box',
     position: 'relative',
     cursor: $disabled || !$peekNextMonth && $outsideMonth ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: $hasDateLabel ? '60px' : sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: height,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: $density === DENSITY.high ? sizing.scale700 : sizing.scale900,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
-    paddingLeft: sizing.scale200,
-    paddingRight: sizing.scale200,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -448,10 +505,10 @@ export const StyledDay = styled('div', props => {
       display: 'inline-block',
       boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -467,10 +524,10 @@ export const StyledDay = styled('div', props => {
       borderBottomColor: colors.borderSelected,
       borderRightColor: colors.borderSelected,
       borderLeftColor: colors.borderSelected,
-      borderTopLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderTopRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
+      borderTopLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderTopRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
       ...(getDayStyles(code, props.$theme)[':after'] || {}),
       ...($outsideMonthWithinRange ? {
         content: null
@@ -532,18 +589,23 @@ StyledDayLabel.displayName = "StyledDayLabel";
 export const StyledWeekdayHeader = styled('div', props => {
   const {
     $theme: {
+      typography,
+      colors,
       sizing
-    }
+    },
+    $density
   } = props;
-  return {
+  return { ...typography.LabelMedium,
+    color: colors.contentTertiary,
     boxSizing: 'border-box',
     position: 'relative',
     cursor: 'default',
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: $density === DENSITY.high ? '40px' : '48px',
     textAlign: 'center',
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: sizing.scale900,
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale200,
@@ -552,7 +614,6 @@ export const StyledWeekdayHeader = styled('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
   };
 });

package/es/datepicker/types.js

@@ -7,4 +7,4 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';

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

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

package/es/datepicker/week.js

@@ -34,6 +34,7 @@ export default class Week extends 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/es/dnd-list/list.js

@@ -127,8 +127,7 @@ class StatelessList extends React.Component {
             display: 'flex'
           }
         }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(Grab, {
-          size: 24,
-          color: "#CCC"
+          size: 24
         })), /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), value), removable && /*#__PURE__*/React.createElement(CloseHandle, _extends({}, sharedProps, {
           onClick: evt => {
             evt.preventDefault();

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

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

package/es/helper/helper.js

@@ -35,6 +35,7 @@ export function Helper(props) {
     React.createElement(Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/es/layer/layer.js

@@ -94,6 +94,14 @@ class LayerComponent extends React.Component {
     if (host && host !== prevProps.host && prevProps.host === null) {
       this.addContainer(host);
     }
+
+    if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+      if (this.props.isHoverLayer) {
+        this.context.removeDocClickHandler(this.onDocumentClick);
+      } else {
+        this.context.addDocClickHandler(this.onDocumentClick);
+      }
+    }
   }
 
   componentWillUnmount() {

package/es/menu/maybe-child-menu.js

@@ -28,6 +28,7 @@ export default function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(NestedMenuContext.Consumer, null, ctx => {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/es/popover/popover.js

@@ -13,7 +13,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
 import { Layer, TetherBehavior } from '../layer/index.js';
@@ -156,7 +156,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+    if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
       this.setState({
         autoFocusAfterPositioning: true
       });
@@ -451,9 +451,10 @@ class PopoverInner extends React.Component {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,
-          returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
-          autoFocus: this.state.autoFocusAfterPositioning
-        }, this.renderPopover(renderedContent)))));
+          returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+          autoFocus: this.state.autoFocusAfterPositioning,
+          focusOptions: this.props.focusOptions
+        }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {
           key: "hidden-layer"

package/es/popover/stateful-container.js

@@ -162,7 +162,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     } = this.props;
     const popoverProps = {
       accessibilityType,
@@ -186,7 +187,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     };
 
     if (dismissOnClickOutside) {

package/es/select/select-component.js

@@ -970,6 +970,7 @@ class Select extends React.Component {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
+      autoFocus: false,
       focusLock: false,
       mountNode: this.props.mountNode,
       onEsc: () => this.closeMenu(),

package/es/themes/shared/lighting.js

@@ -15,6 +15,10 @@ const lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 export default lighting;

package/es/timepicker/timepicker.js

@@ -152,24 +152,28 @@ class TimePicker extends React.Component {
     _defineProperty(this, "getTimeWindowInSeconds", step => {
       let {
         minTime: min,
-        maxTime: max
+        maxTime: max,
+        ignoreMinMaxDateComponent
       } = this.props;
-      let midnight = this.setTime(this.props.value, 0, 0, 0);
+      const dayStart = this.setTime(this.props.value, 0, 0, 0);
+      const dayEnd = this.setTime(this.props.value, 24, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      if (!min || this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = this.setTime(this.props.value, this.props.adapter.getHours(min), this.props.adapter.getMinutes(min), this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = this.setTime(this.props.value, 24, 0, 0);
+      if (!max || this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = this.props.adapter.setSeconds(this.props.adapter.date(max), this.props.adapter.getSeconds(max) + step);
+        max = this.setTime(this.props.value, this.props.adapter.getHours(max), this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        this.props.adapter.getSeconds(max) + 1);
       }
 
       const minDate = this.props.adapter.toJsDate(min);
       const maxDate = this.props.adapter.toJsDate(max);
-      const midnightDate = this.props.adapter.toJsDate(midnight);
+      const midnightDate = this.props.adapter.toJsDate(dayStart);
       return {
         start: (minDate - midnightDate) / 1000,
         end: (maxDate - midnightDate) / 1000
@@ -248,7 +252,7 @@ class TimePicker extends React.Component {
         steps: steps,
         value: this.props.nullable ? undefined : {
           id: closestStep,
-          label: this.secondsToLabel(closestStep, undefined)
+          label: this.secondsToLabel(closestStep, this.props.format)
         }
       });
 
@@ -337,7 +341,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: dateFnsAdapter
+  adapter: dateFnsAdapter,
+  ignoreMinMaxDateComponent: false
 });
 
 export default TimePicker;

package/es/tooltip/tooltip.js

@@ -24,6 +24,7 @@ class Tooltip extends React.Component {
       Inner: StyledInner
     }, this.props.overrides);
     return /*#__PURE__*/React.createElement(Popover, _extends({
+      autoFocus: false,
       "data-baseweb": "tooltip"
     }, this.props, {
       overrides: overrides

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

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

package/esm/card/styled-components.js

@@ -90,7 +90,6 @@ export var Title = 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/esm/combobox/combobox.js

@@ -292,7 +292,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/esm/data-table/column-datetime.js

@@ -55,6 +55,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 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);
 
@@ -430,6 +431,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],