baseui 10.5.0 → 10.7.2

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

@@ -25,6 +25,10 @@ class StatefulContainer extends React.Component {
         this.props.onBlur(e);
       }
 
+      if (this.props.focusLock || this.props.autoFocus) {
+        return;
+      }
+
       this.close();
     });
 
@@ -158,7 +162,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     } = this.props;
     const popoverProps = {
       accessibilityType,
@@ -182,7 +187,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     };
 
     if (dismissOnClickOutside) {

package/es/rating/emoticon-rating.js

@@ -144,7 +144,9 @@ class EmoticonRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "emoticon-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/rating/star-rating.js

@@ -147,7 +147,9 @@ class StarRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "star-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/select/select-component.js

@@ -105,7 +105,7 @@ class Select extends React.Component {
       isPseudoFocused: false
     });
 
-    _defineProperty(this, "isMounted", false);
+    _defineProperty(this, "isItMounted", false);
 
     _defineProperty(this, "handleTouchOutside", event => {
       if (containsNode(this.dropdown.current, event.target)) return;
@@ -238,7 +238,7 @@ class Select extends React.Component {
         this.props.onBlur(event);
       }
 
-      if (this.isMounted) {
+      if (this.isItMounted) {
         this.setState({
           isFocused: false,
           isOpen: false,
@@ -565,7 +565,7 @@ class Select extends React.Component {
       this.focus();
     }
 
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {
@@ -601,7 +601,7 @@ class Select extends React.Component {
       document.removeEventListener('click', this.handleClickOutside);
     }
 
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -797,7 +797,6 @@ class Select extends React.Component {
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-      size: 16,
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
@@ -971,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/select/styled-components.js

@@ -375,31 +375,61 @@ function getSvgStyles({
 export const StyledSelectArrow = styled('svg', props => {
   const {
     $theme,
-    $disabled
+    $disabled,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export const StyledClearIcon = styled('svg', props => {
   const {
-    $theme
+    $theme,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";

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/table-semantic/styled-components.js

@@ -67,7 +67,8 @@ StyledTableHeadRow.displayName = "StyledTableHeadRow";
 export const StyledTableHeadCell = styled('th', ({
   $theme,
   $size,
-  $divider
+  $divider,
+  $isNumeric
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -81,7 +82,7 @@ export const StyledTableHeadCell = styled('th', ({
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1,
@@ -170,7 +171,8 @@ export const StyledTableBodyCell = styled('td', ({
   $size,
   $divider,
   $isNumeric,
-  $isLastRow
+  $isLastRow,
+  $isSortable
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -178,7 +180,7 @@ export const StyledTableBodyCell = styled('td', ({
   const padding = sizeToCellPadding($theme, $size);
   return { ...$theme.typography.font200,
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/es/table-semantic/table-builder.js

@@ -79,6 +79,7 @@ export default class TableBuilder extends React.Component {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           $size: size
         }, tableHeadCellProps, colTableHeadCellProps), col.header);
       }
@@ -117,6 +118,7 @@ export default class TableBuilder extends React.Component {
         $col: col,
         $colIndex: colIndex,
         $divider: divider,
+        $isNumeric: col.numeric,
         role: "button",
         tabIndex: "0",
         "aria-label": `${col.tableHeadAriaLabel || col.header}, ${sortLabel}`,
@@ -143,6 +145,7 @@ export default class TableBuilder extends React.Component {
         $rowIndex: rowIndex,
         $isNumeric: col.numeric,
         $isLastRow: rowIndex === lastRowindex,
+        $isSortable: col.sortable,
         $size: size
       }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
     }

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

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/styled-components.js

@@ -21,6 +21,10 @@ import { getEndPosition } from '../popover/utils.js';
  */
 export const Body = styled('div', props => ({ ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   boxShadow: props.$theme.lighting.shadow400,
   color: props.$theme.colors.tooltipText,
   // Reset transition property to opacity only, and static transform
@@ -30,6 +34,10 @@ export const Body = styled('div', props => ({ ...getBodyStyles(props),
 Body.displayName = "Body";
 export const Inner = styled('div', props => ({ ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   paddingTop: props.$theme.sizing.scale300,
   paddingBottom: props.$theme.sizing.scale300,
   paddingLeft: props.$theme.sizing.scale600,

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/button/styled-components.js

@@ -45,7 +45,7 @@ export var BaseButton = styled('button', function (_ref) {
     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/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],