baseui 10.5.0 → 10.6.0

package/esm/select/styled-components.js

@@ -326,25 +326,49 @@ function getSvgStyles(_ref4) {
 }
 
 export var StyledSelectArrow = styled('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.mini, 16), _defineProperty(_sizes, SIZE.compact, 16), _defineProperty(_sizes, SIZE.default, 20), _defineProperty(_sizes, SIZE.large, 24), _sizes);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export var StyledClearIcon = styled('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, SIZE.mini, 15), _defineProperty(_sizes2, SIZE.compact, 15), _defineProperty(_sizes2, SIZE.default, 18), _defineProperty(_sizes2, SIZE.large, 22), _sizes2);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledClearIcon.displayName = "StyledClearIcon";

package/esm/snackbar/snackbar-context.js

@@ -61,6 +61,15 @@ export function useSnackbar() {
     dequeue: context.dequeue
   };
 }
+
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider(_ref) {
   var children = _ref.children,
       _ref$overrides = _ref.overrides,
@@ -95,10 +104,6 @@ export default function SnackbarProvider(_ref) {
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
     setSnackbars(function (prev) {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
@@ -106,6 +111,13 @@ export default function SnackbarProvider(_ref) {
     });
   }
 
+  var prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(function () {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(function (prev) {

package/esm/table-semantic/styled-components.js

@@ -70,7 +70,8 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider;
+      $divider = _ref5.$divider,
+      $isNumeric = _ref5.$isNumeric;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -83,7 +84,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
     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
@@ -164,14 +165,15 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
       $size = _ref12.$size,
       $divider = _ref12.$divider,
       $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow;
+      $isLastRow = _ref12.$isLastRow,
+      $isSortable = _ref12.$isSortable;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

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

@@ -200,6 +200,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             $col: col,
             $colIndex: colIndex,
             $divider: divider,
+            $isNumeric: col.numeric,
             $size: size
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
@@ -242,6 +243,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           role: "button",
           tabIndex: "0",
           "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -275,6 +277,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
           $isLastRow: rowIndex === lastRowindex,
+          $isSortable: col.sortable,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }

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

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

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

@@ -22,32 +22,32 @@ export default (function () {
     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,
@@ -93,7 +93,7 @@ export default (function () {
     linkActive: themePrimitives.primary500,
     // List
     listHeaderFill: themePrimitives.white,
-    listBodyFill: themePrimitives.mono200,
+    listBodyFill: themePrimitives.white,
     listIconFill: themePrimitives.mono500,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/esm/tooltip/styled-components.js

@@ -28,6 +28,10 @@ import { getEndPosition } from '../popover/utils.js';
 export var Body = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, 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
@@ -39,6 +43,10 @@ Body.displayName = "Body";
 export var Inner = styled('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, 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/link/index.d.ts

@@ -6,6 +6,7 @@ export interface LinkProps
     React.AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
   > {
+  animateUnderline?: boolean;
   target?: '_self' | '_blank' | '_parent' | '_top';
 }
 

package/menu/index.d.ts

@@ -123,6 +123,7 @@ export interface OptionListProps extends BaseMenuPropsT {
   item: any;
   getItemLabel: (item: any) => React.ReactNode;
   getChildMenu?: (item: any) => React.ReactNode;
+  onMouseDown?: (event: MouseEvent) => any;
   onMouseEnter?: (event: MouseEvent) => any;
   size?: OPTION_LIST_SIZE[keyof OPTION_LIST_SIZE];
   overrides?: {
@@ -133,6 +134,12 @@ export interface OptionListProps extends BaseMenuPropsT {
   resetMenu?: () => void;
   $isHighlighted?: boolean;
   $isFocused?: boolean;
+  renderAll?: boolean;
+  $disabled?: boolean;
+  'aria-disabled'?: boolean;
+  'aria-selected'?: boolean;
+  id?: string;
+  role?: string;
 }
 export const OptionList: React.FC<OptionListProps>;
 

package/menu/types.js.flow

@@ -234,6 +234,8 @@ export type OptionListPropsT = {
   getChildMenu?: (item: ItemT) => React.Node,
   onClick?: (event: MouseEvent) => mixed,
   /** Callback used to change highlighted index in stateful menu. */
+  onMouseDown?: (event: MouseEvent) => mixed,
+  /** Callback used to change highlighted index in stateful menu. */
   onMouseEnter?: (event: MouseEvent) => mixed,
   /** Renders UI in defined scale. */
   size?: $Keys<typeof OPTION_LIST_SIZE>,
@@ -251,6 +253,16 @@ export type OptionListPropsT = {
   $isFocused?: boolean,
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,
+  /** Is the item disabled */
+  $disabled?: boolean,
+  /** Is the item disabled */
+  'aria-disabled'?: boolean,
+  /** Is the item selected */
+  'aria-selected'?: boolean,
+  /** Id of the item */
+  id?: string,
+  /** Accessibility role of the item */
+  role?: string,
 };
 
 export type OptionProfilePropsT = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.2.0",
+    "@ladle/react": "^0.3.0",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",

package/popover/stateful-container.js

@@ -70,6 +70,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(e);
       }
 
+      if (_this.props.focusLock || _this.props.autoFocus) {
+        return;
+      }
+
       _this.close();
     });
 

package/popover/stateful-container.js.flow

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

package/rating/emoticon-rating.js

@@ -222,8 +222,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/emoticon-rating.js.flow

@@ -135,7 +135,10 @@ class EmoticonRating extends React.Component<
       <Root
         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}
       >

package/rating/star-rating.js

@@ -225,8 +225,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/star-rating.js.flow

@@ -133,7 +133,10 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
       <Root
         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}
       >

package/select/select-component.js

@@ -180,7 +180,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -328,7 +328,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -682,7 +682,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -718,7 +718,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
@@ -947,7 +947,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,

package/select/select-component.js.flow

@@ -117,13 +117,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
     isPseudoFocused: false,
   };
 
-  isMounted: boolean = false;
+  isItMounted: boolean = false;
 
   componentDidMount() {
     if (this.props.autoFocus) {
       this.focus();
     }
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {methodsRef} = this.props;
@@ -157,7 +157,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       document.removeEventListener('touchstart', this.handleTouchOutside);
       document.removeEventListener('click', this.handleClickOutside);
     }
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -319,7 +319,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.props.onBlur(event);
     }
 
-    if (this.isMounted) {
+    if (this.isItMounted) {
       this.setState({
         isFocused: false,
         isOpen: false,
@@ -793,7 +793,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
     return (
       <ClearIcon
-        size={16}
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}

package/select/styled-components.js

@@ -342,26 +342,50 @@ function getSvgStyles(_ref4) {
 }
 
 var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 16), _defineProperty(_sizes, _constants.SIZE.compact, 16), _defineProperty(_sizes, _constants.SIZE.default, 20), _defineProperty(_sizes, _constants.SIZE.large, 24), _sizes);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
 var StyledClearIcon = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 15), _defineProperty(_sizes2, _constants.SIZE.compact, 15), _defineProperty(_sizes2, _constants.SIZE.default, 18), _defineProperty(_sizes2, _constants.SIZE.large, 22), _sizes2);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledClearIcon = StyledClearIcon;

package/select/styled-components.js.flow

@@ -425,22 +425,50 @@ function getSvgStyles({$theme}) {
 }
 
 export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled} = props;
+  const {$theme, $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',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 
 export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme} = props;
+  const {$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',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 

package/snackbar/snackbar-context.js

@@ -81,6 +81,14 @@ function useSnackbar() {
   };
 }
 
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 function SnackbarProvider(_ref) {
   var children = _ref.children,
       _ref$overrides = _ref.overrides,
@@ -115,10 +123,6 @@ function SnackbarProvider(_ref) {
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
     setSnackbars(function (prev) {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
@@ -126,6 +130,13 @@ function SnackbarProvider(_ref) {
     });
   }
 
+  var prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(function () {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(function (prev) {

package/snackbar/snackbar-context.js.flow

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