baseui 10.8.0 → 10.9.2

package/es/map-marker/pin-head.js

@@ -7,33 +7,11 @@ 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 { useStyletron, styled } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
-import { InnerXSmallAnchor as StyledInnerXSmallAnchor, OuterXSmallAnchor as StyledOuterXSmallAnchor, PinHead as StyledPinHead } from './styled-components.js';
-import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES } from './constants.js';
-export const _ContentItem = styled('div', ({
-  $theme,
-  $color,
-  $height,
-  $size
-}) => {
-  const match = {
-    [PINHEAD_SIZES_SHAPES.xSmallCircle]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.xSmallSquare]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.small]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.medium]: 'LabelMedium',
-    [PINHEAD_SIZES_SHAPES.large]: 'LabelLarge'
-  };
-  return { ...$theme.typography[match[$size]],
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'center',
-    lineHeight: `${$height}px`,
-    height: `${$height}px`,
-    color: $color
-  };
-});
-_ContentItem.displayName = "_ContentItem";
+import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledContentItem } from './styled-components.js';
+import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES, NEEDLE_HEIGHTS, NEEDLE_SIZES } from './constants.js';
+import BadgeEnhancer from './badge-enhancer.js';
+import LabelEnhancer from './label-enhancer.js';
 
 const PinHead = ({
   size = PINHEAD_SIZES_SHAPES.medium,
@@ -44,17 +22,13 @@ const PinHead = ({
   background,
   type = PINHEAD_TYPES.fixed,
   anchorType,
+  needle = NEEDLE_SIZES.none,
+  labelEnhancerContent,
+  labelEnhancerPosition,
+  badgeEnhancerSize,
+  badgeEnhancerContent,
   overrides = {}
 }) => {
-  const [, theme] = useStyletron();
-  const {
-    colors: {
-      backgroundPrimary,
-      primaryA
-    }
-  } = theme;
-  color = color || backgroundPrimary;
-  background = background || primaryA;
   const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
   const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
   const forceCircle = activeElements.length === 1 && !label;
@@ -63,13 +37,35 @@ const PinHead = ({
     icon
   } = PINHEAD_DIMENSIONS[size];
   const [PinHead, pinHeadProps] = getOverrides(overrides.PinHead, StyledPinHead);
-  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, _ContentItem);
+  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, StyledContentItem);
+  const [InnerXXSmallAnchor, innerXXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor);
+  const [OuterXXSmallAnchor, outerXXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor);
   const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor);
   const [OuterXSmallAnchor, outerXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor);
+  const badge = /*#__PURE__*/React.createElement(BadgeEnhancer, {
+    markerType: type,
+    pinHeadSize: size,
+    badgeEnhancerSize: badgeEnhancerSize,
+    badgeEnhancerContent: badgeEnhancerContent,
+    overrides: overrides
+  });
+
+  if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xxSmallCircle || size === PINHEAD_SIZES_SHAPES.xxSmallSquare)) {
+    const round = size === PINHEAD_SIZES_SHAPES.xxSmallCircle;
+    return /*#__PURE__*/React.createElement(OuterXXSmallAnchor, _extends({
+      $round: round,
+      $background: background,
+      $size: height
+    }, outerXXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXXSmallAnchor, _extends({
+      $color: color,
+      $round: round,
+      $size: icon
+    }, innerXXSmallAnchorProps)));
+  }
 
   if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xSmallSquare || size === PINHEAD_SIZES_SHAPES.xSmallCircle)) {
     const round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
-    return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
+    return /*#__PURE__*/React.createElement(RelativeContainer, null, badge, /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
       $round: round,
       $background: background,
       $size: height
@@ -77,10 +73,16 @@ const PinHead = ({
       $color: color,
       $round: round,
       $size: icon
-    }, innerXSmallAnchorProps)));
+    }, innerXSmallAnchorProps))));
   }
 
-  return /*#__PURE__*/React.createElement(PinHead, _extends({
+  return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(LabelEnhancer, {
+    labelEnhancerContent: labelEnhancerContent,
+    labelEnhancerPosition: labelEnhancerPosition,
+    needleHeight: NEEDLE_HEIGHTS[needle],
+    size: size,
+    overrides: overrides
+  }), badge, /*#__PURE__*/React.createElement(PinHead, _extends({
     $background: background,
     $height: height,
     $gridTemplateColumns: gridTemplateColumns,
@@ -102,7 +104,7 @@ const PinHead = ({
     $size: size
   }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
-  })));
+  }))));
 };
 
 export default PinHead;

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

@@ -5,7 +5,7 @@ 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 const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -13,7 +13,7 @@ export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
   [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`
 })[anchor];
-export const DragShadowContainer = styled('div', ({
+export const StyledDragShadowContainer = styled('div', ({
   $theme,
   $height,
   $width,
@@ -27,38 +27,40 @@ export const DragShadowContainer = styled('div', ({
   position: 'relative',
   boxShadow: $theme.lighting.shadow600
 }));
-DragShadowContainer.displayName = "DragShadowContainer";
-export const DragShadow = styled('div', ({
+StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+export const StyledDragShadow = styled('div', ({
   $theme,
   $background,
   $width
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   borderRadius: '50%',
   width: `${$width}px`,
-  height: `${4}px`,
+  height: '4px',
   position: 'absolute',
   bottom: 0
 }));
-DragShadow.displayName = "DragShadow";
-export const Needle = styled('div', ({
+StyledDragShadow.displayName = "StyledDragShadow";
+export const StyledNeedle = styled('div', ({
   $theme,
   $background,
   $height
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   width: '4px',
   height: `${$height}px`,
   boxShadow: $theme.lighting.shadow600
 }));
-Needle.displayName = "Needle";
-export const FloatingMarkerRoot = styled('div', () => ({
+StyledNeedle.displayName = "StyledNeedle";
+export const StyledFloatingMarkerRoot = styled('div', ({
+  $size
+}) => ({
   position: 'relative',
-  height: `${xSmallPinheadDimension.height}px`,
-  width: `${xSmallPinheadDimension.height}px`
+  height: `${$size}px`,
+  width: `${$size}px`
 }));
-FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
-export const FloatingMarkerPinHeadContainer = styled('div', ({
+StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   $theme,
   $anchor,
   $anchorSize
@@ -67,38 +69,65 @@ export const FloatingMarkerPinHeadContainer = styled('div', ({
   transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
   transform: getAnchorTransform($anchor, $anchorSize)
 }));
-FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
-export const FloatingMarkerAnchorContainer = styled('div', () => ({
+StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
   position: 'absolute'
 }));
-FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
-export const FixedMarkerRoot = styled('div', () => ({
+StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+export const StyledFixedMarkerRoot = styled('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
 }));
-FixedMarkerRoot.displayName = "FixedMarkerRoot";
-export const FixedMarkerDragContainer = styled('div', ({
+StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+export const StyledFixedMarkerDragContainer = styled('div', ({
   $theme,
   $translateAmount,
   $performTranslate
 }) => {
   return {
-    transform: `translateY(${$performTranslate ? '0px' : `${$translateAmount}px`})`,
+    transform: `translateY(${$performTranslate ? `${$translateAmount}px` : '0px'})`,
     transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
-export const OuterXSmallAnchor = styled('div', ({
+StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+export const StyledOuterXXSmallAnchor = styled('div', ({
+  $theme,
+  $round,
+  $background,
+  $size
+}) => ({
+  backgroundColor: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600
+}));
+StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+export const StyledInnerXXSmallAnchor = styled('div', ({
+  $round,
+  $color,
+  $size
+}) => ({
+  backgroundColor: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0
+}));
+StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+export const StyledOuterXSmallAnchor = styled('div', ({
   $theme,
   $round,
   $background,
   $size
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -107,19 +136,19 @@ export const OuterXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0,
   boxShadow: $theme.lighting.shadow600
 }));
-OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
-export const InnerXSmallAnchor = styled('div', ({
+StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+export const StyledInnerXSmallAnchor = styled('div', ({
   $round,
   $color,
   $size
 }) => ({
-  background: $color,
+  backgroundColor: $color,
   height: `${$size}px`,
   width: `${$size}px`,
   borderRadius: $round ? '50%' : 0
 }));
-InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
-export const PinHead = styled('div', ({
+StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+export const StyledPinHead = styled('div', ({
   $theme,
   $height,
   $background,
@@ -137,7 +166,7 @@ export const PinHead = styled('div', ({
     }
   };
   return {
-    background: $background,
+    backgroundColor: $background,
     height: `${$height}px`,
     display: 'grid',
     gridTemplateColumns: $gridTemplateColumns,
@@ -153,4 +182,120 @@ export const PinHead = styled('div', ({
     })
   };
 });
-PinHead.displayName = "PinHead";
+StyledPinHead.displayName = "StyledPinHead";
+export const StyledStrokedLabelContainer = styled('div', ({
+  $position,
+  $theme,
+  $labelOffset
+}) => {
+  const staticLabelOffset = 4;
+  const positions = {
+    top: {
+      left: `calc(50% + ${staticLabelOffset}px)`,
+      bottom: '100%',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    bottom: {
+      left: '50%',
+      top: `calc(100% + ${staticLabelOffset}px + ${$labelOffset}px)`,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    right: {
+      left: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    left: {
+      right: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      textAlign: 'right'
+    },
+    none: {}
+  };
+  return {
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    pointerEvents: 'none',
+    display: 'flex',
+    ...positions[$position]
+  };
+});
+StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+export const StyledStrokedLabel = styled('div', ({
+  $theme,
+  $size
+}) => {
+  const strokeWidth = 1.5;
+  const strokeColor = $theme.colors.backgroundPrimary;
+  const textShadow = `-${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    0 -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px 0 0 ${strokeColor},
+    ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+    0 ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px 0 0 ${strokeColor}`;
+  return {
+    display: 'flex',
+    ...$theme.typography[LABEL_SIZES[$size]],
+    color: $theme.colors.primaryA,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    textShadow,
+    pointerEvents: 'auto',
+    width: 'max-content',
+    maxWidth: '200px'
+  };
+});
+StyledStrokedLabel.displayName = "StyledStrokedLabel";
+export const StyledBadgeEnhancerRoot = styled('div', ({
+  $theme,
+  $size,
+  $position
+}) => {
+  const {
+    x,
+    y
+  } = $position;
+  return {
+    position: 'absolute',
+    ...$theme.typography.LabelSmall,
+    backgroundColor: $theme.colors.backgroundAccent,
+    color: $theme.colors.primaryB,
+    boxSizing: 'border-box',
+    right: 0,
+    transform: `translate(calc(100% + ${x}px), ${y}px)`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    ...BADGE_ENHANCER_STYLES[$size]
+  };
+});
+StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+export const RelativeContainer = styled('div', () => {
+  return {
+    position: 'relative'
+  };
+});
+RelativeContainer.displayName = "RelativeContainer";
+export const StyledContentItem = styled('div', ({
+  $theme,
+  $color,
+  $height,
+  $size
+}) => {
+  return { ...$theme.typography[LABEL_SIZES[$size]],
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: `${$height}px`,
+    height: `${$height}px`,
+    color: $color
+  };
+});
+StyledContentItem.displayName = "StyledContentItem";

package/es/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/es/menu/maybe-child-menu.js

@@ -43,8 +43,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/es/menu/nested-menus.js

@@ -12,6 +12,8 @@ export const NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   mountRef: {
     current: null
   }
@@ -30,16 +32,43 @@ export default class NestedMenus extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(this, "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(this, "mouseLeaveTimeoueId", null);
+
+    _defineProperty(this, "handleMenuMouseLeave", event => {
+      this.mouseLeaveTimeoueId = setTimeout(() => {
+        this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(this, "handleMenuMouseEnter", event => {
+      if (typeof document !== 'undefined') {
+        clearTimeout(this.mouseLeaveTimeoueId);
+        const index = this.state.menus.findIndex(m => {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+        this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(this, "addMenuToNesting", 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) {
+      const element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', this.handleMenuMouseLeave);
         this.setState(state => {
           return {
             menus: [...state.menus, ref]
@@ -50,7 +79,17 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
-        const nextMenus = state.menus.filter(r => r.current).filter(r => !isSame(r.current, ref.current));
+        for (const r of this.state.menus) {
+          if (r.current && isSame(r.current, ref.current)) {
+            const element = r.current;
+            element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
+            element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
+          }
+        }
+
+        const nextMenus = state.menus.filter(r => {
+          return r.current && !isSame(r.current, ref.current);
+        });
         return {
           menus: nextMenus
         };
@@ -70,6 +109,11 @@ export default class NestedMenus extends React.Component {
       const index = this.findMenuIndexByRef(ref) + 1;
       return this.state.menus[index];
     });
+
+    _defineProperty(this, "isNestedMenuVisible", ref => {
+      const index = this.findMenuIndexByRef(ref);
+      return index <= this.state.nestedMenuHoverIndex;
+    });
   }
 
   render() {
@@ -79,6 +123,8 @@ export default class NestedMenus extends 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/es/menu/stateful-container.js

@@ -34,6 +34,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false
 };
 
@@ -223,16 +225,7 @@ class MenuStatefulContainerInner extends React.Component {
       });
     });
 
-    _defineProperty(this, "handleMouseLeave", () => {
-      const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
-      const childMenu = this.props.getChildMenu && this.props.getChildMenu(rootRef);
-
-      if (!this.props.forceHighlight && !childMenu) {
-        this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(this, "handleMouseLeave", event => {});
 
     _defineProperty(this, "getRequiredItemProps", (item, index) => {
       let itemRef = this.refList[index];
@@ -339,10 +332,12 @@ class MenuStatefulContainerInner extends 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);
+    }
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (typeof document !== 'undefined') {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -368,6 +363,12 @@ class MenuStatefulContainerInner extends 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/es/modal/modal.js

@@ -300,7 +300,9 @@ class Modal extends React.Component {
       ref: this.getRef('DialogContainer')
     } : {};
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__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/es/popover/popover.js

@@ -452,10 +452,12 @@ class PopoverInner extends 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/es/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