baseui 10.5.0 → 10.7.2

package/esm/select/styled-components.js

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

package/esm/snackbar/snackbar-context.js

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

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

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

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

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

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

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

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

@@ -22,32 +22,32 @@ export default (function () {
     buttonPrimaryActive: themePrimitives.primary600,
     buttonPrimarySelectedFill: themePrimitives.primary600,
     buttonPrimarySelectedText: themePrimitives.white,
-    buttonPrimarySpinnerForeground: themePrimitives.primary50,
-    buttonPrimarySpinnerBackground: themePrimitives.primary500,
+    buttonPrimarySpinnerForeground: themePrimitives.accent,
+    buttonPrimarySpinnerBackground: themePrimitives.primaryB,
     buttonSecondaryFill: themePrimitives.primary100,
     buttonSecondaryText: themePrimitives.primary,
     buttonSecondaryHover: themePrimitives.primary200,
     buttonSecondaryActive: themePrimitives.primary300,
     buttonSecondarySelectedFill: themePrimitives.primary300,
     buttonSecondarySelectedText: themePrimitives.primary,
-    buttonSecondarySpinnerForeground: themePrimitives.primary700,
-    buttonSecondarySpinnerBackground: themePrimitives.primary300,
+    buttonSecondarySpinnerForeground: themePrimitives.accent,
+    buttonSecondarySpinnerBackground: themePrimitives.primaryB,
     buttonTertiaryFill: 'transparent',
     buttonTertiaryText: themePrimitives.primary,
     buttonTertiaryHover: themePrimitives.primary50,
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
-    buttonTertiarySpinnerForeground: themePrimitives.primary700,
-    buttonTertiarySpinnerBackground: themePrimitives.primary300,
+    buttonTertiarySpinnerForeground: themePrimitives.accent,
+    buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
     buttonMinimalText: themePrimitives.primary,
     buttonMinimalHover: themePrimitives.primary50,
     buttonMinimalActive: themePrimitives.primary100,
     buttonMinimalSelectedFill: themePrimitives.primary100,
     buttonMinimalSelectedText: themePrimitives.primary,
-    buttonMinimalSpinnerForeground: themePrimitives.primary700,
-    buttonMinimalSpinnerBackground: themePrimitives.primary300,
+    buttonMinimalSpinnerForeground: themePrimitives.accent,
+    buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -93,7 +93,7 @@ export default (function () {
     linkActive: themePrimitives.primary500,
     // List
     listHeaderFill: themePrimitives.white,
-    listBodyFill: themePrimitives.mono200,
+    listBodyFill: themePrimitives.white,
     listIconFill: themePrimitives.mono500,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/esm/themes/shared/lighting.js

@@ -15,6 +15,10 @@ var lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 export default lighting;

package/esm/timepicker/timepicker.js

@@ -206,26 +206,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
       var _this$props = _this.props,
           min = _this$props.minTime,
-          max = _this$props.maxTime;
+          max = _this$props.maxTime,
+          ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
 
-      var midnight = _this.setTime(_this.props.value, 0, 0, 0);
+      var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
+
+      if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = _this.setTime(_this.props.value, 24, 0, 0);
+      if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
+        max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        _this.props.adapter.getSeconds(max) + 1);
       }
 
       var minDate = _this.props.adapter.toJsDate(min);
 
       var maxDate = _this.props.adapter.toJsDate(max);
 
-      var midnightDate = _this.props.adapter.toJsDate(midnight);
+      var midnightDate = _this.props.adapter.toJsDate(dayStart);
 
       return {
         start: (minDate - midnightDate) / 1000,
@@ -312,7 +317,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           steps: steps,
           value: this.props.nullable ? undefined : {
             id: closestStep,
-            label: this.secondsToLabel(closestStep, undefined)
+            label: this.secondsToLabel(closestStep, this.props.format)
           }
         });
 
@@ -414,7 +419,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: dateFnsAdapter
+  adapter: dateFnsAdapter,
+  ignoreMinMaxDateComponent: false
 });
 
 export default TimePicker;

package/esm/tooltip/styled-components.js

@@ -28,6 +28,10 @@ import { getEndPosition } from '../popover/utils.js';
 export var Body = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, getBodyStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     boxShadow: props.$theme.lighting.shadow400,
     color: props.$theme.colors.tooltipText,
     // Reset transition property to opacity only, and static transform
@@ -39,6 +43,10 @@ Body.displayName = "Body";
 export var Inner = styled('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, getInnerStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     paddingTop: props.$theme.sizing.scale300,
     paddingBottom: props.$theme.sizing.scale300,
     paddingLeft: props.$theme.sizing.scale600,

package/esm/tooltip/tooltip.js

@@ -62,6 +62,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         Inner: StyledInner
       }, this.props.overrides);
       return /*#__PURE__*/React.createElement(Popover, _extends({
+        autoFocus: false,
         "data-baseweb": "tooltip"
       }, this.props, {
         overrides: overrides

package/helper/helper.js

@@ -55,6 +55,7 @@ function Helper(props) {
     React.createElement(_index.Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/helper/helper.js.flow

@@ -36,6 +36,7 @@ export function Helper(props: PropsT) {
     <Popover
       data-baseweb="helper"
       {...restProps}
+      autoFocus={false}
       placement={placement}
       overrides={mergedOverrides}
     />

package/layer/layer.js

@@ -141,6 +141,14 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       if (host && host !== prevProps.host && prevProps.host === null) {
         this.addContainer(host);
       }
+
+      if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+        if (this.props.isHoverLayer) {
+          this.context.removeDocClickHandler(this.onDocumentClick);
+        } else {
+          this.context.addDocClickHandler(this.onDocumentClick);
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",

package/layer/layer.js.flow

@@ -61,9 +61,18 @@ class LayerComponent extends React.Component<
     if (mountNode) {
       return;
     }
+
     if (host && host !== prevProps.host && prevProps.host === null) {
       this.addContainer(host);
     }
+
+    if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+      if (this.props.isHoverLayer) {
+        this.context.removeDocClickHandler(this.onDocumentClick);
+      } else {
+        this.context.addDocClickHandler(this.onDocumentClick);
+      }
+    }
   }
 
   componentWillUnmount() {

package/link/index.d.ts

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

package/map-marker/index.d.ts

@@ -40,11 +40,12 @@ export interface FLOATING_MARKER_ANCHOR_TYPES {
   square: 'square';
 }
 
-export type NeedleSizeT = ValueOf<NEEDLE_SIZES>;
-export type PinHeadT = ValueOf<PINHEAD_TYPES>;
-export type PinHeadSizeT = ValueOf<PINHEAD_SIZES_SHAPES>;
-export type AnchorPositionsT = ValueOf<FLOATING_MARKER_ANCHOR_POSITIONS>;
-export type FloatingMarkerSizeT = ValueOf<FLOATING_MARKER_SIZES>;
+export type NeedleSizeT = NEEDLE_SIZES[keyof NEEDLE_SIZES];
+export type PinHeadT = PINHEAD_TYPES[keyof PINHEAD_TYPES];
+export type PinHeadSizeT = PINHEAD_SIZES_SHAPES[keyof PINHEAD_SIZES_SHAPES];
+export type AnchorPositionsT = FLOATING_MARKER_ANCHOR_POSITIONS[keyof FLOATING_MARKER_ANCHOR_POSITIONS];
+export type FloatingMarkerSizeT = FLOATING_MARKER_SIZES[keyof FLOATING_MARKER_SIZES];
+export type FloatingMarkerAnchorTypeT = FLOATING_MARKER_ANCHOR_TYPES[keyof FLOATING_MARKER_ANCHOR_TYPES];
 
 export type FixedMarkerOverridesT = {
   Root?: Override<any>;

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.5.0",
+  "version": "10.7.2",
   "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",
@@ -197,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) {