baseui 10.8.0 → 10.9.2

package/map-marker/types.js.flow

@@ -13,15 +13,18 @@ import {
   FLOATING_MARKER_SIZES,
   PINHEAD_TYPES,
   FLOATING_MARKER_ANCHOR_TYPES,
+  BADGE_ENHANCER_SIZES,
+  LABEL_ENHANCER_POSITIONS,
+  KIND,
 } from './constants.js';
 import type {OverrideT} from '../helpers/overrides.js';
 
-export type PinHeadT = $Values<typeof PINHEAD_TYPES>;
-
 export type AnchorPositionsT = $Values<typeof FLOATING_MARKER_ANCHOR_POSITIONS>;
 
 export type NeedleSizeT = $Values<typeof NEEDLE_SIZES>;
 
+export type PinHeadT = $Values<typeof PINHEAD_TYPES>;
+
 export type PinHeadSizeT = $Values<typeof PINHEAD_SIZES_SHAPES>;
 
 export type FloatingMarkerSizeT = $Values<typeof FLOATING_MARKER_SIZES>;
@@ -31,17 +34,11 @@ export type FloatingMarkerAnchorTypeT = $Values<
   typeof FLOATING_MARKER_ANCHOR_TYPES,
 >;
 
-export type NeedlePropsT = {
-  size: NeedleSizeT,
-  background?: string,
-  overrides: FixedMarkerOverridesT,
-};
+export type BadgeEnhancerSizeT = $Values<typeof BADGE_ENHANCER_SIZES>;
 
-export type ItemPropsT = {
-  children?: React.Node,
-  color?: string,
-  size?: number,
-};
+export type LabelEnhancerPositionT = $Values<typeof LABEL_ENHANCER_POSITIONS>;
+
+export type KindT = $Values<typeof KIND>;
 
 export type FixedMarkerOverridesT = {
   Root?: OverrideT,
@@ -54,19 +51,63 @@ export type FixedMarkerOverridesT = {
   DragShadow?: OverrideT,
   DragShadowContainer?: OverrideT,
   DragContainer?: OverrideT,
+  BadgeEnhancer?: OverrideT,
+  LabelEnhancer?: OverrideT,
+  LabelEnhancerContainer?: OverrideT,
+};
+
+export type NeedlePropsT = {
+  size: NeedleSizeT,
+  background?: string,
+  overrides: FixedMarkerOverridesT,
 };
 
-export type FixedMarkerPropsT = {
+export type ItemPropsT = {
+  children?: React.Node,
+  color?: string,
+  size?: number,
+};
+
+export type LabelEnhancerT = {|
+  labelEnhancerContent?: string,
+  labelEnhancerPosition?: LabelEnhancerPositionT,
+|};
+
+export type LabelEhancerComponentT = {
+  ...LabelEnhancerT,
+  needleHeight: number,
+  size: PinHeadSizeT,
+  overrides?: FixedMarkerOverridesT,
+};
+
+export type BadgeEnhancerT = {|
+  badgeEnhancerSize?: BadgeEnhancerSizeT | null,
+  badgeEnhancerContent?: React.AbstractComponent<{|size: number|}>,
+|};
+
+export type BadgeEnhancerComponentT = {
+  ...BadgeEnhancerT,
+  pinHeadSize: PinHeadSizeT,
+  markerType: PinHeadT,
+  overrides: FixedMarkerOverridesT,
+};
+export type BadgePositionT = {
+  x: number,
+  y: number,
+};
+
+export type FixedMarkerPropsT = {|
   size?: PinHeadSizeT,
   needle?: NeedleSizeT,
   label?: string,
   startEnhancer?: React.AbstractComponent<{|size: number|}>,
   endEnhancer?: React.AbstractComponent<{|size: number|}>,
-  color?: string,
-  background?: string,
+  kind?: KindT,
   dragging?: boolean,
   overrides?: FixedMarkerOverridesT,
-};
+  ...BadgeEnhancerT,
+  ...LabelEnhancerT,
+|};
 
 export type FloatingMarkerOverridesT = {
   Root?: OverrideT,
@@ -76,11 +117,16 @@ export type FloatingMarkerOverridesT = {
   PinHeadContent?: OverrideT,
   PinHeadContainer?: OverrideT,
   AnchorContainer?: OverrideT,
+  Needle?: OverrideT,
+  DragShadow?: OverrideT,
+  DragShadowContainer?: OverrideT,
+  DragContainer?: OverrideT,
+  BadgeEnhancer?: OverrideT,
+  LabelEnhancer?: OverrideT,
+  LabelEnhancerContainer?: OverrideT,
 };
 
 export type FloatingMarkerPropsT = {
-  color?: string,
-  background?: string,
   label?: string,
   anchor?: AnchorPositionsT,
   endEnhancer?: React.AbstractComponent<{|size: number|}>,
@@ -95,11 +141,14 @@ export type PinHeadPropsT = {
   label?: string,
   endEnhancer?: React.AbstractComponent<{|size: number|}>,
   startEnhancer?: React.AbstractComponent<{|size: number|}>,
-  color?: string,
-  background?: string,
+  color: string,
+  background: string,
   type?: PinHeadT,
   anchorType?: FloatingMarkerAnchorTypeT,
+  needle?: NeedleSizeT,
   overrides?: FloatingMarkerOverridesT | FixedMarkerOverridesT,
+  ...BadgeEnhancerT,
+  ...LabelEnhancerT,
 };
 
 export type DragShadowPropsT = {

package/menu/index.d.ts

@@ -69,7 +69,6 @@ export interface RenderItemProps {
   id?: string;
   isFocused?: boolean;
   isHighlighted?: boolean;
-  resetMenu?: () => any;
 }
 
 export type OnItemSelect = (args: {
@@ -108,6 +107,8 @@ export interface StatefulContainerProps {
   removeMenuFromNesting?: (ref: React.Ref<HTMLElement>) => void;
   getParentMenu?: (ref: React.Ref<HTMLElement>) => void;
   getChildMenu?: (ref: React.Ref<HTMLElement>) => void;
+  nestedMenuHoverIndex?: nubmer;
+  isNestedMenuVisible?: (ref: React.Ref<HTMLElement>) => boolean;
 }
 export interface StatefulContainerState {
   activedescendantId?: string;
@@ -131,7 +132,6 @@ export interface OptionListProps extends BaseMenuPropsT {
     ChildMenuPopover?: Override<any>;
   };
   renderHrefAsAnchor?: boolean;
-  resetMenu?: () => void;
   $isHighlighted?: boolean;
   $isFocused?: boolean;
   renderAll?: boolean;
@@ -148,7 +148,11 @@ export interface OptionProfileProps extends BaseMenuPropsT {
   getChildMenu?: (item: any) => React.ReactNode;
   getProfileItemLabels: (
     item: any,
-  ) => {title?: string; subtitle?: string; body?: string};
+  ) => {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+  };
   getProfileItemImg: (item: any) => string | React.ComponentType<any>;
   getProfileItemImgText: (item: any) => string;
   overrides?: {
@@ -161,7 +165,6 @@ export interface OptionProfileProps extends BaseMenuPropsT {
     ProfileBody?: Override<any>;
     ChildMenuPopover?: Override<any>;
   };
-  resetMenu?: () => void;
   $isHighlighted?: boolean;
 }
 export const OptionProfile: React.FC<OptionProfileProps>;
@@ -200,6 +203,8 @@ export class NestedMenus extends React.Component<
   findMenuIndexByRef(ref: React.Ref<HTMLElement>): number;
   getParentMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
   getChildMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
+  nestedMenuHoverIndex: number;
+  isNestedMenuVisible(ref: React.Ref<HTMLElement>): boolean;
 }
 
 export const StyledEmptyState: StyletronComponent<any>;

package/menu/maybe-child-menu.js

@@ -70,8 +70,6 @@ function MaybeChildMenu(props) {
       overrides: (0, _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/menu/maybe-child-menu.js.flow

@@ -64,8 +64,6 @@ export default function MaybeChildMenu(props: PropsT) {
               {
                 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/menu/nested-menus.js

@@ -13,6 +13,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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."); }
@@ -52,6 +54,10 @@ var NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   mountRef: {
     current: null
   }
@@ -83,16 +89,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])
@@ -103,10 +139,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
@@ -130,6 +183,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;
   }
 
@@ -142,6 +201,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/menu/nested-menus.js.flow

@@ -12,6 +12,7 @@ import * as React from 'react';
 import type {NestedMenuRefT, NestedMenuContextT} from './types.js';
 
 type StateT = {
+  nestedMenuHoverIndex: number,
   menus: NestedMenuRefT[],
 };
 type PropsT = {
@@ -24,6 +25,8 @@ export const NestedMenuContext: React.Context<NestedMenuContextT> = React.create
     removeMenuFromNesting: () => {},
     getParentMenu: () => {},
     getChildMenu: () => {},
+    nestedMenuHoverIndex: -1,
+    isNestedMenuVisible: () => false,
     mountRef: {current: null},
   },
 );
@@ -37,14 +40,40 @@ function isSame(a: ?HTMLElement, b: ?HTMLElement) {
 }
 
 export default class NestedMenus extends React.Component<PropsT, StateT> {
-  state = {menus: []};
+  state = {menus: [], nestedMenuHoverIndex: -1};
   mountRef = (React.createRef(): {current: HTMLElement | null});
+  mouseLeaveTimeoueId = null;
+
+  handleMenuMouseLeave = (event: MouseEvent) => {
+    this.mouseLeaveTimeoueId = setTimeout(() => {
+      this.setState({nestedMenuHoverIndex: -1});
+    }, 200);
+  };
+
+  handleMenuMouseEnter = (event: MouseEvent) => {
+    if (__BROWSER__) {
+      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});
+    }
+  };
 
   addMenuToNesting = (ref: NestedMenuRefT) => {
     // 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]};
       });
@@ -53,9 +82,18 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
 
   removeMenuFromNesting = (ref: NestedMenuRefT) => {
     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};
     });
   };
@@ -74,6 +112,11 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
     return this.state.menus[index];
   };
 
+  isNestedMenuVisible = (ref: NestedMenuRefT): boolean => {
+    const index = this.findMenuIndexByRef(ref);
+    return index <= this.state.nestedMenuHoverIndex;
+  };
+
   render() {
     return (
       <NestedMenuContext.Provider
@@ -82,6 +125,8 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
           removeMenuFromNesting: this.removeMenuFromNesting,
           getParentMenu: this.getParentMenu,
           getChildMenu: this.getChildMenu,
+          isNestedMenuVisible: this.isNestedMenuVisible,
+          nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
           mountRef: this.mountRef,
         }}
       >

package/menu/stateful-container.js

@@ -77,6 +77,10 @@ var DEFAULT_PROPS = {
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   forceHighlight: false
 };
 
@@ -283,17 +287,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(_constants.STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (event) {});
 
     _defineProperty(_assertThisInitialized(_this), "getRequiredItemProps", function (item, index) {
       var itemRef = _this.refList[index];
@@ -404,11 +398,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);
@@ -434,6 +430,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/menu/stateful-container.js.flow

@@ -37,6 +37,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false,
 };
 
@@ -99,11 +101,16 @@ class MenuStatefulContainerInner extends React.Component<
       if (this.keyboardControlNode)
         this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
     }
-    this.props.removeMenuFromNesting &&
+
+    if (this.props.removeMenuFromNesting) {
       this.props.removeMenuFromNesting(rootRef);
+    }
   }
 
-  componentDidUpdate(_: mixed, prevState: StatefulContainerStateT) {
+  componentDidUpdate(
+    prevProps: StatefulContainerPropsT,
+    prevState: StatefulContainerStateT,
+  ) {
     if (__BROWSER__) {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode)
@@ -135,6 +142,15 @@ 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
@@ -342,17 +358,7 @@ class MenuStatefulContainerInner extends React.Component<
     });
   };
 
-  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,
-      });
-    }
-  };
+  handleMouseLeave = (event: SyntheticMouseEvent<HTMLElement>) => {};
 
   getRequiredItemProps: GetRequiredItemPropsFnT = (item, index) => {
     let itemRef = this.refList[index];

package/menu/types.js.flow

@@ -136,6 +136,8 @@ export type StatefulContainerPropsT = {
   getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
     current: HTMLElement | null,
   },
+  nestedMenuHoverIndex?: number,
+  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
   forceHighlight: boolean,
 };
 
@@ -171,7 +173,7 @@ export type SharedStatelessPropsT = {
   ariaLabel?: string,
   getRequiredItemProps?: GetRequiredItemPropsFnT,
   isFocused?: boolean,
-  handleMouseLeave?: () => mixed,
+  handleMouseLeave?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
   /** Index of highlighted menu item. */
   highlightedIndex?: number,
   /** List of menu items. */
@@ -215,6 +217,8 @@ export type StatefulMenuPropsT = {
   getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
     current: HTMLElement | null,
   },
+  nestedMenuHoverIndex?: number,
+  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
 } & MenuPropsT;
 
 export type StatefulMenuProfilePropsT = StatefulContainerPropsT &
@@ -300,6 +304,8 @@ export type NestedMenuContextT = {|
   removeMenuFromNesting: (ref: NestedMenuRefT) => void,
   getParentMenu: (ref: NestedMenuRefT) => ?NestedMenuRefT,
   getChildMenu: (ref: NestedMenuRefT) => ?NestedMenuRefT,
+  nestedMenuHoverIndex: number,
+  isNestedMenuVisible: (ref: NestedMenuRefT) => boolean,
   mountRef: NestedMenuRefT,
 |};
 

package/modal/modal.js

@@ -383,7 +383,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       } : {};
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
-          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/modal/modal.js.flow

@@ -321,6 +321,8 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
         {locale => (
           <FocusLock
             disabled={!focusLock}
+            // Allow focus to escape when UI is within an iframe
+            crossFrame={false}
             returnFocus={returnFocus}
             autoFocus={autofocus !== null ? autofocus : autoFocus}
           >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.8.0",
+  "version": "10.9.2",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -170,7 +170,7 @@
     "react-dom": "^16.9.0",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
-    "react-map-gl": "^6.1.17",
+    "react-map-gl": "^5.3.19",
     "react-markdown": "^4.0.3",
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",
@@ -194,6 +194,7 @@
     "@date-io/date-fns": "^2.6.2",
     "card-validator": "^6.2.0",
     "date-fns": "^2.6.0",
+    "date-fns-tz": "^1.2.2",
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
@@ -211,8 +212,7 @@
     "react-virtualized": "^9.21.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
-    "resize-observer-polyfill": "^1.5.1",
-    "timezone-support": "^2.0.2"
+    "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "react": ">= 16.8.0 < 18",

package/popover/popover.js

@@ -530,10 +530,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(_reactFocusLock.MoveFocusInside, {
-            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+            disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
           }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {