baseui 10.3.0 → 10.7.0

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

@@ -0,0 +1,177 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import {styled} from '../styles/index.js';
+import {
+  FLOATING_MARKER_ANCHOR_POSITIONS,
+  xSmallPinheadDimension,
+} from './constants.js';
+
+import type {AnchorPositionsT} from './types.js';
+
+export const getAnchorTransform = (
+  anchor: AnchorPositionsT,
+  anchorSize: number,
+) =>
+  ({
+    [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.topRight]: `translate(-100%, ${anchorSize}px)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`,
+  }[anchor]);
+
+export const DragShadowContainer = styled<{
+  $height: number,
+  $width: number,
+  $dragging: boolean,
+}>('div', ({$theme, $height, $width, $dragging}) => ({
+  width: `${$width}px`,
+  height: `${$height}px`,
+  opacity: $dragging ? 1 : 0,
+  visibility: $dragging ? 'visible' : 'hidden',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  position: 'relative',
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const DragShadow = styled<{
+  $background: string,
+  $width: number,
+}>('div', ({$theme, $background, $width}) => ({
+  background: $background,
+  borderRadius: '50%',
+  width: `${$width}px`,
+  height: `${4}px`,
+  position: 'absolute',
+  bottom: 0,
+}));
+
+export const Needle = styled<{
+  $background?: string,
+  $height: number,
+}>('div', ({$theme, $background, $height}) => ({
+  background: $background,
+  width: '4px',
+  height: `${$height}px`,
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const FloatingMarkerRoot = styled<{}>('div', () => ({
+  position: 'relative',
+  height: `${xSmallPinheadDimension.height}px`,
+  width: `${xSmallPinheadDimension.height}px`,
+}));
+
+export const FloatingMarkerPinHeadContainer = styled<{
+  $anchor: AnchorPositionsT,
+  $anchorSize: number,
+}>('div', ({$theme, $anchor, $anchorSize}) => ({
+  position: 'absolute',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  transform: getAnchorTransform($anchor, $anchorSize),
+}));
+
+export const FloatingMarkerAnchorContainer = styled<{}>('div', () => ({
+  position: 'absolute',
+}));
+
+export const FixedMarkerRoot = styled<{}>('div', () => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+}));
+
+export const FixedMarkerDragContainer = styled<{
+  $translateAmount: number,
+  $performTranslate: boolean,
+}>('div', ({$theme, $translateAmount, $performTranslate}) => {
+  return {
+    transform: `translateY(${
+      $performTranslate ? '0px' : `${$translateAmount}px`
+    })`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+  };
+});
+
+export const OuterXSmallAnchor = styled<{
+  $round: boolean,
+  $background: string,
+  $size: number,
+}>('div', ({$theme, $round, $background, $size}) => ({
+  background: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const InnerXSmallAnchor = styled<{
+  $round: boolean,
+  $color: string,
+  $size: number,
+}>('div', ({$round, $color, $size}) => ({
+  background: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+}));
+
+export const PinHead = styled<{
+  $height: number,
+  $background: string,
+  $gridTemplateColumns: string,
+  $type: string,
+  $forceCircle: boolean,
+}>(
+  'div',
+  ({
+    $theme,
+    $height,
+    $background,
+    $gridTemplateColumns,
+    $type,
+    $forceCircle,
+  }) => {
+    const sharedStyles = {
+      fixed: {
+        padding: '0px 12px',
+        borderRadius: `${$height}px`,
+      },
+      floating: {
+        padding: '0px 8px',
+      },
+    };
+
+    return {
+      background: $background,
+      height: `${$height}px`,
+      display: 'grid',
+      gridTemplateColumns: $gridTemplateColumns,
+      gap: '8px',
+      boxShadow: $theme.lighting.shadow600,
+      whiteSpace: 'nowrap',
+      ...sharedStyles[$type],
+      ...($forceCircle && {
+        width: `${$height}px`,
+        display: 'flex',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+      }),
+    };
+  },
+);
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+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); }
+
+var React = _interopRequireWildcard(require("react"));
+
+var _constants = require("./constants.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+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; }

package/map-marker/types.js.flow

@@ -0,0 +1,114 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+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 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 PinHeadSizeT = $Values<typeof PINHEAD_SIZES_SHAPES>;
+
+export type FloatingMarkerSizeT = $Values<typeof FLOATING_MARKER_SIZES>;
+
+/* eslint-disable flowtype/generic-spacing*/
+export type FloatingMarkerAnchorTypeT = $Values<
+  typeof FLOATING_MARKER_ANCHOR_TYPES,
+>;
+
+export type NeedlePropsT = {
+  size: NeedleSizeT,
+  background?: string,
+  overrides: FixedMarkerOverridesT,
+};
+
+export type ItemPropsT = {
+  children?: React.Node,
+  color?: string,
+  size?: number,
+};
+
+export type FixedMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  Needle?: OverrideT,
+  DragShadow?: OverrideT,
+  DragShadowContainer?: OverrideT,
+  DragContainer?: OverrideT,
+};
+
+export type FixedMarkerPropsT = {
+  size?: PinHeadSizeT,
+  needle?: NeedleSizeT,
+  label?: string,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  dragging?: boolean,
+  overrides?: FixedMarkerOverridesT,
+};
+
+export type FloatingMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  AnchorContainer?: OverrideT,
+};
+
+export type FloatingMarkerPropsT = {
+  color?: string,
+  background?: string,
+  label?: string,
+  anchor?: AnchorPositionsT,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  size?: FloatingMarkerSizeT,
+  overrides?: FloatingMarkerOverridesT,
+};
+
+export type PinHeadPropsT = {
+  size?: PinHeadSizeT,
+  label?: string,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  type?: PinHeadT,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  overrides?: FloatingMarkerOverridesT | FixedMarkerOverridesT,
+};
+
+export type DragShadowPropsT = {
+  background: string,
+  dragging: boolean,
+  height: number,
+  overrides: FixedMarkerOverridesT,
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

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

@@ -55,6 +55,7 @@ function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(_nestedMenus.NestedMenuContext.Consumer, null, function (ctx) {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

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

@@ -48,6 +48,7 @@ export default function MaybeChildMenu(props: PropsT) {
         return (
           <PopoverOverride
             focusLock={false}
+            autoFocus={false}
             isOpen={props.isOpen}
             renderAll={props.renderAll}
             content={ChildMenu}

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/modal/index.d.ts

@@ -47,7 +47,7 @@ export interface ModalProps {
   autofocus?: boolean;
   autoFocus?: boolean;
   focusLock?: boolean;
-  returnFocus?: boolean | FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
   children?: React.ReactNode;
   closeable?: boolean;
   isOpen?: boolean;

package/modal/types.js.flow

@@ -48,7 +48,10 @@ export type ModalPropsT = {
    * Optionally, can pass focus options instead of `true` to control the focus
    * more precisely (ie. `{ preventScroll: true }`)
    */
-  returnFocus?: boolean | FocusOptions,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Modal content. The children-as-function API may be preferable
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.3.0",
+  "version": "10.7.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",
@@ -170,6 +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-markdown": "^4.0.3",
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",
@@ -196,10 +197,11 @@
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
+    "mockdate": "^3.0.5",
     "polished": "^3.2.0",
     "popper.js": "^1.16.0",
     "react-dropzone": "^9.0.0",
-    "react-focus-lock": "^2.2.1",
+    "react-focus-lock": "^2.7.1",
     "react-input-mask": "^2.0.4",
     "react-is": "^16.8.6",
     "react-movable": "^2.5.4",

package/popover/index.d.ts

@@ -96,7 +96,8 @@ export interface BasePopoverProps {
   accessibilityType?: ACCESSIBILITY_TYPE[keyof ACCESSIBILITY_TYPE];
   focusLock?: boolean;
   autoFocus?: boolean;
-  returnFocus?: boolean;
+  focusOptions?: FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => (boolean | FocusOptions));
   'data-baseweb'?: string;
   id?: string;
   ignoreBoundary?: boolean;

package/popover/popover.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _reactFocusLock = _interopRequireWildcard(require("react-focus-lock"));
 
 var _overrides = require("../helpers/overrides.js");
 
@@ -213,7 +213,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -529,9 +529,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,
-            returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
-            autoFocus: this.state.autoFocusAfterPositioning
-          }, this.renderPopover(renderedContent)))));
+            returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+            autoFocus: this.state.autoFocusAfterPositioning,
+            focusOptions: this.props.focusOptions
+          }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {
             key: "hidden-layer"

package/popover/popover.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable react/no-find-dom-node */
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, {MoveFocusInside} from 'react-focus-lock';
 
 import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {
@@ -73,7 +73,6 @@ class PopoverInner extends React.Component<
     this.init(prevProps, prevState);
     if (
       this.props.autoFocus &&
-      this.props.focusLock &&
       !this.state.autoFocusAfterPositioning &&
       this.popperRef.current !== null &&
       this.popperRef.current.getBoundingClientRect().top > 0
@@ -475,10 +474,18 @@ class PopoverInner extends React.Component<
                 disabled={!this.props.focusLock}
                 noFocusGuards={false}
                 // see popover-focus-loop.scenario.js for why hover cannot return focus
-                returnFocus={this.props.returnFocus && !this.isHoverTrigger()}
+                returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
                 autoFocus={this.state.autoFocusAfterPositioning}
+                focusOptions={this.props.focusOptions}
               >
-                {this.renderPopover(renderedContent)}
+                {!this.props.focusLock &&
+                this.state.autoFocusAfterPositioning ? (
+                  <MoveFocusInside>
+                    {this.renderPopover(renderedContent)}
+                  </MoveFocusInside>
+                ) : (
+                  this.renderPopover(renderedContent)
+                )}
               </FocusLock>
             </TetherBehavior>
           </Layer>,

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();
     });
 
@@ -208,7 +212,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
           returnFocus = _this$props.returnFocus,
           showArrow = _this$props.showArrow,
           triggerType = _this$props.triggerType,
-          popoverMargin = _this$props.popoverMargin;
+          popoverMargin = _this$props.popoverMargin,
+          focusOptions = _this$props.focusOptions;
       var popoverProps = {
         accessibilityType: accessibilityType,
         autoFocus: autoFocus,
@@ -231,7 +236,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         returnFocus: returnFocus,
         showArrow: showArrow,
         triggerType: triggerType,
-        popoverMargin: popoverMargin
+        popoverMargin: popoverMargin,
+        focusOptions: focusOptions
       };
 
       if (dismissOnClickOutside) {

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();
   };
 
@@ -168,6 +171,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     } = this.props;
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
@@ -193,6 +197,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     };
 
     if (dismissOnClickOutside) {

package/popover/types.js.flow

@@ -83,6 +83,8 @@ export type BasePopoverPropsT = {
   onClick?: (e: Event) => mixed,
   /** Handler for 'Esc' keypress events */
   onFocus?: (e: Event) => mixed,
+  /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */
+  focusOptions?: FocusOptions,
   /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: Event) => mixed,
   /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */
@@ -104,7 +106,10 @@ export type BasePopoverPropsT = {
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?: boolean,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */

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}
       >