baseui 10.7.4 → 10.9.1

package/esm/map-marker/styled-components.js

@@ -11,13 +11,13 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, xSmallPinheadDimension } from './constants.js';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants.js';
 export var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
   var _FLOATING_MARKER_ANCH;
 
   return (_FLOATING_MARKER_ANCH = {}, _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.none, ""), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topLeft, "translate(".concat(anchorSize, "px, ").concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topRight, "translate(-100%, ".concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft, "translate(".concat(anchorSize, "px, -100%)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight, "translate(-100%, -100%)"), _FLOATING_MARKER_ANCH)[anchor];
 };
-export var DragShadowContainer = styled('div', function (_ref) {
+export var StyledDragShadowContainer = styled('div', function (_ref) {
   var $theme = _ref.$theme,
       $height = _ref.$height,
       $width = _ref.$width,
@@ -32,86 +32,87 @@ export var DragShadowContainer = styled('div', function (_ref) {
     boxShadow: $theme.lighting.shadow600
   };
 });
-DragShadowContainer.displayName = "DragShadowContainer";
-export var DragShadow = styled('div', function (_ref2) {
+StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+export var StyledDragShadow = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $background = _ref2.$background,
       $width = _ref2.$width;
   return {
-    background: $background,
+    backgroundColor: $background,
     borderRadius: '50%',
     width: "".concat($width, "px"),
-    height: "".concat(4, "px"),
+    height: '4px',
     position: 'absolute',
     bottom: 0
   };
 });
-DragShadow.displayName = "DragShadow";
-export var Needle = styled('div', function (_ref3) {
+StyledDragShadow.displayName = "StyledDragShadow";
+export var StyledNeedle = styled('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $background = _ref3.$background,
       $height = _ref3.$height;
   return {
-    background: $background,
+    backgroundColor: $background,
     width: '4px',
     height: "".concat($height, "px"),
     boxShadow: $theme.lighting.shadow600
   };
 });
-Needle.displayName = "Needle";
-export var FloatingMarkerRoot = styled('div', function () {
+StyledNeedle.displayName = "StyledNeedle";
+export var StyledFloatingMarkerRoot = styled('div', function (_ref4) {
+  var $size = _ref4.$size;
   return {
     position: 'relative',
-    height: "".concat(xSmallPinheadDimension.height, "px"),
-    width: "".concat(xSmallPinheadDimension.height, "px")
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px")
   };
 });
-FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
-export var FloatingMarkerPinHeadContainer = styled('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      $anchor = _ref4.$anchor,
-      $anchorSize = _ref4.$anchorSize;
+StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+export var StyledFloatingMarkerPinHeadContainer = styled('div', function (_ref5) {
+  var $theme = _ref5.$theme,
+      $anchor = _ref5.$anchor,
+      $anchorSize = _ref5.$anchorSize;
   return {
     position: 'absolute',
     transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
     transform: getAnchorTransform($anchor, $anchorSize)
   };
 });
-FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
-export var FloatingMarkerAnchorContainer = styled('div', function () {
+StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+export var StyledFloatingMarkerAnchorContainer = styled('div', function () {
   return {
     position: 'absolute'
   };
 });
-FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
-export var FixedMarkerRoot = styled('div', function () {
+StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+export var StyledFixedMarkerRoot = styled('div', function () {
   return {
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-FixedMarkerRoot.displayName = "FixedMarkerRoot";
-export var FixedMarkerDragContainer = styled('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      $translateAmount = _ref5.$translateAmount,
-      $performTranslate = _ref5.$performTranslate;
+StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+export var StyledFixedMarkerDragContainer = styled('div', function (_ref6) {
+  var $theme = _ref6.$theme,
+      $translateAmount = _ref6.$translateAmount,
+      $performTranslate = _ref6.$performTranslate;
   return {
-    transform: "translateY(".concat($performTranslate ? '0px' : "".concat($translateAmount, "px"), ")"),
+    transform: "translateY(".concat($performTranslate ? "".concat($translateAmount, "px") : '0px', ")"),
     transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
-export var OuterXSmallAnchor = styled('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      $round = _ref6.$round,
-      $background = _ref6.$background,
-      $size = _ref6.$size;
+StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+export var StyledOuterXXSmallAnchor = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      $round = _ref7.$round,
+      $background = _ref7.$background,
+      $size = _ref7.$size;
   return {
-    background: $background,
+    backgroundColor: $background,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -121,26 +122,55 @@ export var OuterXSmallAnchor = styled('div', function (_ref6) {
     boxShadow: $theme.lighting.shadow600
   };
 });
-OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
-export var InnerXSmallAnchor = styled('div', function (_ref7) {
-  var $round = _ref7.$round,
-      $color = _ref7.$color,
-      $size = _ref7.$size;
+StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+export var StyledInnerXXSmallAnchor = styled('div', function (_ref8) {
+  var $round = _ref8.$round,
+      $color = _ref8.$color,
+      $size = _ref8.$size;
+  return {
+    backgroundColor: $color,
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px"),
+    borderRadius: $round ? '50%' : 0
+  };
+});
+StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+export var StyledOuterXSmallAnchor = styled('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      $round = _ref9.$round,
+      $background = _ref9.$background,
+      $size = _ref9.$size;
+  return {
+    backgroundColor: $background,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px"),
+    borderRadius: $round ? '50%' : 0,
+    boxShadow: $theme.lighting.shadow600
+  };
+});
+StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+export var StyledInnerXSmallAnchor = styled('div', function (_ref10) {
+  var $round = _ref10.$round,
+      $color = _ref10.$color,
+      $size = _ref10.$size;
   return {
-    background: $color,
+    backgroundColor: $color,
     height: "".concat($size, "px"),
     width: "".concat($size, "px"),
     borderRadius: $round ? '50%' : 0
   };
 });
-InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
-export var PinHead = styled('div', function (_ref8) {
-  var $theme = _ref8.$theme,
-      $height = _ref8.$height,
-      $background = _ref8.$background,
-      $gridTemplateColumns = _ref8.$gridTemplateColumns,
-      $type = _ref8.$type,
-      $forceCircle = _ref8.$forceCircle;
+StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+export var StyledPinHead = styled('div', function (_ref11) {
+  var $theme = _ref11.$theme,
+      $height = _ref11.$height,
+      $background = _ref11.$background,
+      $gridTemplateColumns = _ref11.$gridTemplateColumns,
+      $type = _ref11.$type,
+      $forceCircle = _ref11.$forceCircle;
   var sharedStyles = {
     fixed: {
       padding: '0px 12px',
@@ -151,7 +181,7 @@ export var PinHead = styled('div', function (_ref8) {
     }
   };
   return _objectSpread(_objectSpread({
-    background: $background,
+    backgroundColor: $background,
     height: "".concat($height, "px"),
     display: 'grid',
     gridTemplateColumns: $gridTemplateColumns,
@@ -165,4 +195,105 @@ export var PinHead = styled('div', function (_ref8) {
     boxSizing: 'border-box'
   });
 });
-PinHead.displayName = "PinHead";
+StyledPinHead.displayName = "StyledPinHead";
+export var StyledStrokedLabelContainer = styled('div', function (_ref12) {
+  var $position = _ref12.$position,
+      $theme = _ref12.$theme,
+      $labelOffset = _ref12.$labelOffset;
+  var staticLabelOffset = 4;
+  var positions = {
+    top: {
+      left: "calc(50% + ".concat(staticLabelOffset, "px)"),
+      bottom: '100%',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    bottom: {
+      left: '50%',
+      top: "calc(100% + ".concat(staticLabelOffset, "px + ").concat($labelOffset, "px)"),
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    right: {
+      left: "calc(100% + ".concat(staticLabelOffset, "px)"),
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    left: {
+      right: "calc(100% + ".concat(staticLabelOffset, "px)"),
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      textAlign: 'right'
+    },
+    none: {}
+  };
+  return _objectSpread({
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    pointerEvents: 'none',
+    display: 'flex'
+  }, positions[$position]);
+});
+StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+export var StyledStrokedLabel = styled('div', function (_ref13) {
+  var $theme = _ref13.$theme,
+      $size = _ref13.$size;
+  var strokeWidth = 1.5;
+  var strokeColor = $theme.colors.backgroundPrimary;
+  var textShadow = "-".concat(strokeWidth, "px -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    0 -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px 0 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    0 ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n   -").concat(strokeWidth, "px ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n   -").concat(strokeWidth, "px 0 0 ").concat(strokeColor);
+  return _objectSpread(_objectSpread({
+    display: 'flex'
+  }, $theme.typography[LABEL_SIZES[$size]]), {}, {
+    color: $theme.colors.primaryA,
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
+    textShadow: textShadow,
+    pointerEvents: 'auto',
+    width: 'max-content',
+    maxWidth: '200px'
+  });
+});
+StyledStrokedLabel.displayName = "StyledStrokedLabel";
+export var StyledBadgeEnhancerRoot = styled('div', function (_ref14) {
+  var $theme = _ref14.$theme,
+      $size = _ref14.$size,
+      $position = _ref14.$position;
+  var x = $position.x,
+      y = $position.y;
+  return _objectSpread(_objectSpread({
+    position: 'absolute'
+  }, $theme.typography.LabelSmall), {}, {
+    backgroundColor: $theme.colors.backgroundAccent,
+    color: $theme.colors.primaryB,
+    boxSizing: 'border-box',
+    right: 0,
+    transform: "translate(calc(100% + ".concat(x, "px), ").concat(y, "px)"),
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all")
+  }, BADGE_ENHANCER_STYLES[$size]);
+});
+StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+export var RelativeContainer = styled('div', function () {
+  return {
+    position: 'relative'
+  };
+});
+RelativeContainer.displayName = "RelativeContainer";
+export var StyledContentItem = styled('div', function (_ref15) {
+  var $theme = _ref15.$theme,
+      $color = _ref15.$color,
+      $height = _ref15.$height,
+      $size = _ref15.$size;
+  return _objectSpread(_objectSpread({}, $theme.typography[LABEL_SIZES[$size]]), {}, {
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: "".concat($height, "px"),
+    height: "".concat($height, "px"),
+    color: $color
+  });
+});
+StyledContentItem.displayName = "StyledContentItem";

package/esm/map-marker/types.js

@@ -5,4 +5,4 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES } from './constants.js';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants.js';

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

@@ -59,8 +59,6 @@ export default function MaybeChildMenu(props) {
       overrides: mergeOverrides({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/esm/menu/nested-menus.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -46,6 +48,10 @@ export var NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   mountRef: {
     current: null
   }
@@ -76,16 +82,46 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(_assertThisInitialized(_this), "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "mouseLeaveTimeoueId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseLeave", function (event) {
+      _this.mouseLeaveTimeoueId = setTimeout(function () {
+        _this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseEnter", function (event) {
+      if (typeof document !== 'undefined') {
+        clearTimeout(_this.mouseLeaveTimeoueId);
+
+        var index = _this.state.menus.findIndex(function (m) {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+
+        _this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "addMenuToNesting", function (ref) {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      var element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', _this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', _this.handleMenuMouseLeave);
+
         _this.setState(function (state) {
           return {
             menus: [].concat(_toConsumableArray(state.menus), [ref])
@@ -96,10 +132,27 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "removeMenuFromNesting", function (ref) {
       _this.setState(function (state) {
+        var _iterator = _createForOfIteratorHelper(_this.state.menus),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var r = _step.value;
+
+            if (r.current && isSame(r.current, ref.current)) {
+              var element = r.current;
+              element.removeEventListener('mouseenter', _this.handleMenuMouseEnter);
+              element.removeEventListener('mouseleave', _this.handleMenuMouseLeave);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
         var nextMenus = state.menus.filter(function (r) {
-          return r.current;
-        }).filter(function (r) {
-          return !isSame(r.current, ref.current);
+          return r.current && !isSame(r.current, ref.current);
         });
         return {
           menus: nextMenus
@@ -123,6 +176,12 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
       return _this.state.menus[index];
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isNestedMenuVisible", function (ref) {
+      var index = _this.findMenuIndexByRef(ref);
+
+      return index <= _this.state.nestedMenuHoverIndex;
+    });
+
     return _this;
   }
 
@@ -135,6 +194,8 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
           removeMenuFromNesting: this.removeMenuFromNesting,
           getParentMenu: this.getParentMenu,
           getChildMenu: this.getChildMenu,
+          isNestedMenuVisible: this.isNestedMenuVisible,
+          nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
           mountRef: this.mountRef
         }
       }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/esm/menu/stateful-container.js

@@ -70,6 +70,10 @@ var DEFAULT_PROPS = {
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   forceHighlight: false
 };
 
@@ -276,17 +280,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      var rootRef = _this.props.rootRef ? _this.props.rootRef : _this.rootRef;
-
-      var childMenu = _this.props.getChildMenu && _this.props.getChildMenu(rootRef);
-
-      if (!_this.props.forceHighlight && !childMenu) {
-        _this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (event) {});
 
     _defineProperty(_assertThisInitialized(_this), "getRequiredItemProps", function (item, index) {
       var itemRef = _this.refList[index];
@@ -397,11 +391,13 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
       }
 
-      this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+      if (this.props.removeMenuFromNesting) {
+        this.props.removeMenuFromNesting(rootRef);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (typeof document !== 'undefined') {
         if (!prevState.isFocused && this.state.isFocused) {
           if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -427,6 +423,12 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
           highlightedIndex: 0
         });
       }
+
+      if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+        this.setState({
+          highlightedIndex: -1
+        });
+      }
     } // One array to hold all of list item refs
 
   }, {

package/esm/modal/modal.js

@@ -372,7 +372,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       } : {};
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
-          disabled: !focusLock,
+          disabled: !focusLock // Allow focus to escape when UI is within an iframe
+          ,
+          crossFrame: false,
           returnFocus: returnFocus,
           autoFocus: autofocus !== null ? autofocus : autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({

package/esm/popover/popover.js

@@ -515,10 +515,12 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,
             returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
-            autoFocus: this.state.autoFocusAfterPositioning,
+            autoFocus: this.state.autoFocusAfterPositioning // Allow focus to escape when UI is within an iframe
+            ,
+            crossFrame: false,
             focusOptions: this.props.focusOptions
           }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
-            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+            disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
           }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/esm/progress-bar/index.js

@@ -8,4 +8,4 @@ export { default as ProgressBar } from './progressbar.js';
 export { default as ProgressBarRounded } from './progressbar-rounded.js';
 export { SIZE } from './constants.js'; // Styled elements
 
-export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow
+export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledInfiniteBar, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow

package/esm/progress-bar/progressbar.js

@@ -14,6 +14,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -80,9 +84,16 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           steps = _this$props.steps,
           successValue = _this$props.successValue,
+          minValue = _this$props.minValue,
+          maxValue = _this$props.maxValue,
           showLabel = _this$props.showLabel,
           infinite = _this$props.infinite,
-          errorMessage = _this$props.errorMessage;
+          errorMessage = _this$props.errorMessage,
+          forwardedRef = _this$props.forwardedRef,
+          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]); // fallback on successValue (and it's default) if maxValue is not set by user
+
+
+      var maximumValue = maxValue !== 100 ? maxValue : successValue;
 
       var _getOverrides = getOverrides(overrides.Root, StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
@@ -118,7 +129,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         $infinite: infinite,
         $size: size,
         $steps: steps,
-        $successValue: successValue,
+        $successValue: maximumValue,
+        $minValue: minValue,
+        $maxValue: maximumValue,
         $value: value
       };
 
@@ -140,20 +153,21 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/role-supports-aria-props
         React.createElement(Root, _extends({
+          ref: forwardedRef,
           "data-baseweb": "progress-bar",
           role: "progressbar",
-          "aria-label": ariaLabel || getProgressLabel(value, successValue),
+          "aria-label": ariaLabel || getProgressLabel(value, maximumValue, minValue),
           "aria-valuenow": infinite ? null : value,
-          "aria-valuemin": infinite ? null : 0,
-          "aria-valuemax": infinite ? null : successValue,
+          "aria-valuemin": infinite ? null : minValue,
+          "aria-valuemax": infinite ? null : maximumValue,
           "aria-invalid": errorMessage ? true : null,
           "aria-errormessage": errorMessage
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+        }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
           $isLeft: true,
           $size: sharedProps.$size
         }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
           $size: sharedProps.$size
-        }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, successValue)))
+        }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
       );
     }
   }]);
@@ -162,8 +176,8 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(ProgressBar, "defaultProps", {
-  getProgressLabel: function getProgressLabel(value, successValue) {
-    return "".concat(Math.round(value / successValue * 100), "% Loaded");
+  getProgressLabel: function getProgressLabel(value, maxValue, minValue) {
+    return "".concat(Math.round((value - minValue) / (maxValue - minValue) * 100), "% Loaded");
   },
   infinite: false,
   overrides: {},
@@ -171,7 +185,15 @@ _defineProperty(ProgressBar, "defaultProps", {
   size: SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   value: 0
 });
 
-export default ProgressBar;
+var ForwardedProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    forwardedRef: ref
+  }, props));
+});
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;