baseui 0.0.0-next-6cf31f1 → 0.0.0-next-aed3abd

package/combobox/combobox.js

@@ -306,7 +306,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: _index2.PLACEMENT.bottomLeft,

package/combobox/combobox.js.flow

@@ -258,6 +258,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       {...rootProps}
     >
       <OverriddenPopover
+        // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+        // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+        // Select Component does the same thing
+        autoFocus={false}
         isOpen={isOpen}
         overrides={popoverOverrides}
         placement={PLACEMENT.bottomLeft}

package/es/combobox/combobox.js

@@ -235,7 +235,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: PLACEMENT.bottomLeft,

package/es/popover/popover.js

@@ -451,8 +451,9 @@ 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(),
-          autoFocus: this.state.autoFocusAfterPositioning
+          returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+          autoFocus: this.state.autoFocusAfterPositioning,
+          focusOptions: this.props.focusOptions
         }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/es/popover/stateful-container.js

@@ -162,7 +162,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     } = this.props;
     const popoverProps = {
       accessibilityType,
@@ -186,7 +187,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     };
 
     if (dismissOnClickOutside) {

package/esm/combobox/combobox.js

@@ -292,7 +292,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: PLACEMENT.bottomLeft,

package/esm/popover/popover.js

@@ -514,8 +514,9 @@ 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
+            returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+            autoFocus: this.state.autoFocusAfterPositioning,
+            focusOptions: this.props.focusOptions
           }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/esm/popover/stateful-container.js

@@ -206,7 +206,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,
@@ -229,7 +230,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         returnFocus: returnFocus,
         showArrow: showArrow,
         triggerType: triggerType,
-        popoverMargin: popoverMargin
+        popoverMargin: popoverMargin,
+        focusOptions: focusOptions
       };
 
       if (dismissOnClickOutside) {

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": "0.0.0-next-6cf31f1",
+  "version": "0.0.0-next-aed3abd",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -201,7 +201,7 @@
     "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

@@ -529,8 +529,9 @@ 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
+            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, {

package/popover/popover.js.flow

@@ -474,8 +474,9 @@ 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.props.focusLock &&
                 this.state.autoFocusAfterPositioning ? (

package/popover/stateful-container.js

@@ -212,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,
@@ -235,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

@@ -171,6 +171,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     } = this.props;
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
@@ -196,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. */