baseui 10.12.0 → 11.0.1

package/modal/index.d.ts

@@ -32,22 +32,22 @@ export interface SharedStylePropsArg {
   $size?: SIZE[keyof SIZE];
   $role?: ROLE[keyof ROLE];
   $closeable?: boolean;
-  $unstable_ModalBackdropScroll?: boolean;
 }
 
 export interface ModalOverrides {
   Root?: Override<SharedStylePropsArg>;
-  Backdrop?: Override<SharedStylePropsArg>;
   Dialog?: Override<SharedStylePropsArg>;
   DialogContainer?: Override<SharedStylePropsArg>;
   Close?: Override<SharedStylePropsArg>;
 }
 export interface ModalProps {
   animate?: boolean;
-  autofocus?: boolean;
   autoFocus?: boolean;
   focusLock?: boolean;
-  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions);
   children?: React.ReactNode;
   closeable?: boolean;
   isOpen?: boolean;
@@ -56,7 +56,6 @@ export interface ModalProps {
   overrides?: ModalOverrides;
   role?: ROLE[keyof ROLE];
   size?: SIZE[keyof SIZE];
-  unstable_ModalBackdropScroll?: boolean;
 }
 export interface ModalState {
   isVisible: boolean;
@@ -92,7 +91,6 @@ export class ModalButton extends React.Component<
 export class FocusOnce extends React.Component<{children: React.ReactNode}> {}
 
 export const StyledRoot: StyletronComponent<any>;
-export const StyledBackdrop: StyletronComponent<any>;
 export const StyledDialog: StyletronComponent<any>;
 export const StyledDialogContainer: StyletronComponent<any>;
 export const StyledClose: StyletronComponent<any>;

package/modal/index.js

@@ -45,12 +45,6 @@ Object.defineProperty(exports, "StyledRoot", {
     return _styledComponents.Root;
   }
 });
-Object.defineProperty(exports, "StyledBackdrop", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.Backdrop;
-  }
-});
 Object.defineProperty(exports, "StyledDialog", {
   enumerable: true,
   get: function get() {

package/modal/index.js.flow

@@ -11,7 +11,6 @@ export { default as FocusOnce } from './focus-once.js';
 export { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
 export {
   Root as StyledRoot,
-  Backdrop as StyledBackdrop,
   Dialog as StyledDialog,
   DialogContainer as StyledDialogContainer,
   Close as StyledClose,

package/modal/modal.js

@@ -87,11 +87,13 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "animateStartTimer", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "dialogContainerRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "lastFocus", null);
 
     _defineProperty(_assertThisInitialized(_this), "lastMountNodeOverflowStyle", null);
 
-    _defineProperty(_assertThisInitialized(_this), "_refs", {});
+    _defineProperty(_assertThisInitialized(_this), "rootRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       isVisible: false,
@@ -124,10 +126,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (e) {
-      if (e.target && e.target instanceof HTMLElement && ( // Handles modal closure when unstable_ModalBackdropScroll is set to true
-      e.target.contains(_this.getRef('DialogContainer').current) || // Handles modal closure when unstable_ModalBackdropScroll is set to false
-      // $FlowFixMe
-      e.target.contains(_this.getRef('DeprecatedBackdrop').current))) {
+      if (e.target && e.target instanceof HTMLElement && e.target.contains(_this.dialogContainerRef.current)) {
         _this.onBackdropClick();
       }
     });
@@ -158,18 +157,10 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       this.setState({
         mounted: true
-      }); // TODO(v11)
+      });
 
       if (process.env.NODE_ENV !== "production") {
-        if (!this.props.unstable_ModalBackdropScroll) {
-          console.warn("Consider setting 'unstable_ModalBackdropScroll' prop to true\n        to prepare for the next major version upgrade. 'unstable_ModalBackdropScroll'\n        prop will be removed in the next major version but implemented as the default behavior.");
-        }
-
-        if (this.props.overrides && this.props.overrides.Backdrop) {
-          console.warn("Backdrop element will be removed in the next major version in favor of\n        DialogContainer element that will have the backdrop styles and backdrop click handle.\n        Consider setting 'unstable_ModalBackdropScroll' prop to true that will apply backdrop\n        styles to DialogContainer enable modal scrolling while cursor in over the backdrop.\n        Then pass backdrop overrides to DialogContainer instead. Tha will help you with\n        the next major version upgrade.");
-        } // $FlowFixMe: flow complains that this prop doesn't exist
-
-
+        // $FlowFixMe: flow complains that this prop doesn't exist
         if (this.props.closable) {
           console.warn('The property `closable` is not supported on the Modal. Did you mean `closeable`?');
         }
@@ -237,7 +228,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
       // Sometimes scroll starts past zero, possibly due to animation
       // Reset scroll to 0 (other libraries do this as well)
-      var rootRef = this.getRef('Root').current;
+      var rootRef = this.rootRef.current;
 
       if (rootRef) {
         rootRef.scrollTop = 0;
@@ -277,8 +268,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           isOpen = _this$props.isOpen,
           size = _this$props.size,
           role = _this$props.role,
-          closeable = _this$props.closeable,
-          unstable_ModalBackdropScroll = _this$props.unstable_ModalBackdropScroll;
+          closeable = _this$props.closeable;
       return {
         $animate: animate,
         $isVisible: this.state.isVisible,
@@ -286,7 +276,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         $size: size,
         $role: role,
         $closeable: !!closeable,
-        $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
         $isFocusVisible: this.state.isFocusVisible
       };
     }
@@ -309,15 +298,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       var children = this.props.children;
       return typeof children === 'function' ? children() : children;
     }
-  }, {
-    key: "getRef",
-    value: function getRef(component) {
-      if (!this._refs[component]) {
-        this._refs[component] = /*#__PURE__*/React.createRef();
-      }
-
-      return this._refs[component];
-    }
   }, {
     key: "renderModal",
     value: function renderModal() {
@@ -328,15 +308,12 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
           closeable = _this$props2.closeable,
           role = _this$props2.role,
-          unstable_ModalBackdropScroll = _this$props2.unstable_ModalBackdropScroll,
-          autofocus = _this$props2.autofocus,
           autoFocus = _this$props2.autoFocus,
           focusLock = _this$props2.focusLock,
           returnFocus = _this$props2.returnFocus;
       var RootOverride = overrides.Root,
           DialogOverride = overrides.Dialog,
           DialogContainerOverride = overrides.DialogContainer,
-          BackdropOverride = overrides.Backdrop,
           CloseOverride = overrides.Close;
 
       var _getOverrides = (0, _overrides.getOverrides)(RootOverride, _styledComponents.Root),
@@ -344,59 +321,42 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
-      var _getOverrides3 = (0, _overrides.getOverrides)(BackdropOverride, _styledComponents.Backdrop),
+      var _getOverrides3 = (0, _overrides.getOverrides)(DialogContainerOverride, _styledComponents.DialogContainer),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-          Backdrop = _getOverrides4[0],
-          backdropProps = _getOverrides4[1];
+          DialogContainer = _getOverrides4[0],
+          dialogContainerProps = _getOverrides4[1];
 
-      var _getOverrides5 = (0, _overrides.getOverrides)(DialogContainerOverride, _styledComponents.DialogContainer),
+      var _getOverrides5 = (0, _overrides.getOverrides)(DialogOverride, _styledComponents.Dialog),
           _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-          DialogContainer = _getOverrides6[0],
-          dialogContainerProps = _getOverrides6[1];
+          Dialog = _getOverrides6[0],
+          dialogProps = _getOverrides6[1];
 
-      var _getOverrides7 = (0, _overrides.getOverrides)(DialogOverride, _styledComponents.Dialog),
+      var _getOverrides7 = (0, _overrides.getOverrides)(CloseOverride, _styledComponents.Close),
           _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-          Dialog = _getOverrides8[0],
-          dialogProps = _getOverrides8[1];
-
-      var _getOverrides9 = (0, _overrides.getOverrides)(CloseOverride, _styledComponents.Close),
-          _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-          Close = _getOverrides10[0],
-          closeProps = _getOverrides10[1];
+          Close = _getOverrides8[0],
+          closeProps = _getOverrides8[1];
 
       var sharedProps = this.getSharedProps();
       var children = this.getChildren();
-
-      if (autofocus === false && process.env.NODE_ENV !== "production") {
-        console.warn("The prop \"autofocus\" is deprecated in favor of \"autoFocus\" to be consistent across the project.\n        The property \"autofocus\" will be removed in a future major version.");
-      } // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-
-
-      if (dialogContainerProps.ref) {
-        this._refs.DialogContainer = dialogContainerProps.ref;
-      }
-
-      var dialogContainerConditionalProps = unstable_ModalBackdropScroll ? {
-        ref: this.getRef('DialogContainer')
-      } : {};
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
           disabled: !focusLock // Allow focus to escape when UI is within an iframe
           ,
           crossFrame: false,
           returnFocus: returnFocus,
-          autoFocus: autofocus !== null ? autofocus : autoFocus
+          autoFocus: autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({
-          "data-baseweb": "modal",
-          ref: _this3.getRef('Root')
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(Backdrop, _extends({}, unstable_ModalBackdropScroll ? {} : {
-          ref: _this3.getRef('DeprecatedBackdrop')
-        }, sharedProps, backdropProps)), /*#__PURE__*/React.createElement(DialogContainer, _extends({}, dialogContainerConditionalProps, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
+          "data-baseweb": "modal" // flowlint-next-line unclear-type:off
+          ,
+          ref: _this3.rootRef
+        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // flowlint-next-line unclear-type:off
+        , _extends({
+          ref: _this3.dialogContainerRef
+        }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
           tabIndex: -1,
           "aria-modal": true,
           "aria-label": "dialog",
-          role: role,
-          ref: _this3.getRef('Dialog')
+          role: role
         }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
           "aria-label": locale.modal.close,
           onClick: _this3.onCloseClick
@@ -432,8 +392,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Modal, "defaultProps", {
   animate: true,
-  // TODO(v11): remove
-  autofocus: null,
   autoFocus: true,
   focusLock: true,
   returnFocus: true,
@@ -442,8 +400,7 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: _constants.ROLE.dialog,
-  size: _constants.SIZE.default,
-  unstable_ModalBackdropScroll: false
+  size: _constants.SIZE.default
 });
 
 var _default = Modal;

package/modal/modal.js.flow

@@ -16,27 +16,18 @@ import { Layer } from '../layer/index.js';
 import { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
 import {
   Root as StyledRoot,
-  Backdrop as StyledBackdrop,
   Dialog as StyledDialog,
   DialogContainer as StyledDialogContainer,
   Close as StyledClose,
 } from './styled-components.js';
 import { CloseIcon } from './close-icon.js';
 
-import type {
-  ModalPropsT,
-  ModalStateT,
-  SharedStylePropsArgT,
-  CloseSourceT,
-  ElementRefT,
-} from './types.js';
+import type { ModalPropsT, ModalStateT, SharedStylePropsArgT, CloseSourceT } from './types.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class Modal extends React.Component<ModalPropsT, ModalStateT> {
   static defaultProps: $Shape<ModalPropsT> = {
     animate: true,
-    // TODO(v11): remove
-    autofocus: null,
     autoFocus: true,
     focusLock: true,
     returnFocus: true,
@@ -46,14 +37,14 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     overrides: {},
     role: ROLE.dialog,
     size: SIZE.default,
-    unstable_ModalBackdropScroll: false,
   };
 
   animateOutTimer: ?TimeoutID;
   animateStartTimer: ?AnimationFrameID;
+  dialogContainerRef = React.createRef<HTMLElement>();
   lastFocus: ?HTMLElement = null;
   lastMountNodeOverflowStyle: ?string = null;
-  _refs: { [string]: ElementRefT } = {};
+  rootRef = React.createRef<HTMLElement>();
 
   state = {
     isVisible: false,
@@ -63,21 +54,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
 
   componentDidMount() {
     this.setState({ mounted: true });
-    // TODO(v11)
     if (__DEV__) {
-      if (!this.props.unstable_ModalBackdropScroll) {
-        console.warn(`Consider setting 'unstable_ModalBackdropScroll' prop to true
-        to prepare for the next major version upgrade. 'unstable_ModalBackdropScroll'
-        prop will be removed in the next major version but implemented as the default behavior.`);
-      }
-      if (this.props.overrides && this.props.overrides.Backdrop) {
-        console.warn(`Backdrop element will be removed in the next major version in favor of
-        DialogContainer element that will have the backdrop styles and backdrop click handle.
-        Consider setting 'unstable_ModalBackdropScroll' prop to true that will apply backdrop
-        styles to DialogContainer enable modal scrolling while cursor in over the backdrop.
-        Then pass backdrop overrides to DialogContainer instead. Tha will help you with
-        the next major version upgrade.`);
-      }
       // $FlowFixMe: flow complains that this prop doesn't exist
       if (this.props.closable) {
         console.warn(
@@ -149,11 +126,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     if (
       e.target &&
       e.target instanceof HTMLElement &&
-      // Handles modal closure when unstable_ModalBackdropScroll is set to true
-      (e.target.contains(this.getRef('DialogContainer').current) ||
-        // Handles modal closure when unstable_ModalBackdropScroll is set to false
-        // $FlowFixMe
-        e.target.contains(this.getRef('DeprecatedBackdrop').current))
+      e.target.contains(this.dialogContainerRef.current)
     ) {
       this.onBackdropClick();
     }
@@ -183,7 +156,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   didOpen() {
     // Sometimes scroll starts past zero, possibly due to animation
     // Reset scroll to 0 (other libraries do this as well)
-    const rootRef = this.getRef('Root').current;
+    const rootRef = this.rootRef.current;
     if (rootRef) {
       rootRef.scrollTop = 0;
     }
@@ -220,7 +193,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   };
 
   getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
-    const { animate, isOpen, size, role, closeable, unstable_ModalBackdropScroll } = this.props;
+    const { animate, isOpen, size, role, closeable } = this.props;
     return {
       $animate: animate,
       $isVisible: this.state.isVisible,
@@ -228,7 +201,6 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
       $size: size,
       $role: role,
       $closeable: !!closeable,
-      $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
       $isFocusVisible: this.state.isFocusVisible,
     };
   }
@@ -248,35 +220,17 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     return typeof children === 'function' ? children() : children;
   }
 
-  getRef(component: string): ElementRefT {
-    if (!this._refs[component]) {
-      this._refs[component] = React.createRef();
-    }
-    return this._refs[component];
-  }
-
   renderModal() {
-    const {
-      overrides = {},
-      closeable,
-      role,
-      unstable_ModalBackdropScroll,
-      autofocus,
-      autoFocus,
-      focusLock,
-      returnFocus,
-    } = this.props;
+    const { overrides = {}, closeable, role, autoFocus, focusLock, returnFocus } = this.props;
 
     const {
       Root: RootOverride,
       Dialog: DialogOverride,
       DialogContainer: DialogContainerOverride,
-      Backdrop: BackdropOverride,
       Close: CloseOverride,
     } = overrides;
 
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
-    const [Backdrop, backdropProps] = getOverrides(BackdropOverride, StyledBackdrop);
     const [DialogContainer, dialogContainerProps] = getOverrides(
       DialogContainerOverride,
       StyledDialogContainer
@@ -287,23 +241,6 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     const sharedProps = this.getSharedProps();
     const children = this.getChildren();
 
-    if (autofocus === false && __DEV__) {
-      console.warn(
-        `The prop "autofocus" is deprecated in favor of "autoFocus" to be consistent across the project.
-        The property "autofocus" will be removed in a future major version.`
-      );
-    }
-
-    // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-    if (dialogContainerProps.ref) {
-      this._refs.DialogContainer = dialogContainerProps.ref;
-    }
-    const dialogContainerConditionalProps = unstable_ModalBackdropScroll
-      ? {
-          ref: this.getRef('DialogContainer'),
-        }
-      : {};
-
     return (
       <LocaleContext.Consumer>
         {(locale) => (
@@ -312,20 +249,18 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
             // Allow focus to escape when UI is within an iframe
             crossFrame={false}
             returnFocus={returnFocus}
-            autoFocus={autofocus !== null ? autofocus : autoFocus}
+            autoFocus={autoFocus}
           >
-            <Root data-baseweb="modal" ref={this.getRef('Root')} {...sharedProps} {...rootProps}>
-              <Backdrop
-                {...(unstable_ModalBackdropScroll
-                  ? {}
-                  : {
-                      ref: this.getRef('DeprecatedBackdrop'),
-                    })}
-                {...sharedProps}
-                {...backdropProps}
-              />
+            <Root
+              data-baseweb="modal"
+              // flowlint-next-line unclear-type:off
+              ref={(this.rootRef: any)}
+              {...sharedProps}
+              {...rootProps}
+            >
               <DialogContainer
-                {...dialogContainerConditionalProps}
+                // flowlint-next-line unclear-type:off
+                ref={(this.dialogContainerRef: any)}
                 {...sharedProps}
                 {...dialogContainerProps}
               >
@@ -334,7 +269,6 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
                   aria-modal
                   aria-label="dialog"
                   role={role}
-                  ref={this.getRef('Dialog')}
                   {...sharedProps}
                   {...dialogProps}
                 >

package/modal/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Close = exports.Dialog = exports.DialogContainer = exports.Backdrop = exports.Root = void 0;
+exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Close = exports.Dialog = exports.DialogContainer = exports.Root = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -50,62 +50,29 @@ var Root = (0, _index.styled)('div', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-var Backdrop = (0, _index.styled)('div', function (props) {
+var DialogContainer = (0, _index.styled)('div', function (props) {
   var $animate = props.$animate,
       $isOpen = props.$isOpen,
       $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
-
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-
-  return _objectSpread({
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
+      $theme = props.$theme;
+  var animationRules = {
     transitionProperty: 'opacity',
     transitionDuration: $theme.animation.timing400,
     transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null);
-});
-exports.Backdrop = Backdrop;
-Backdrop.displayName = "Backdrop";
-var DialogContainer = (0, _index.styled)('div', function (props) {
-  var $animate = props.$animate,
-      $isOpen = props.$isOpen,
-      $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
+  };
   return _objectSpread({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
-    userSelect: 'none'
-  }, $unstable_ModalBackdropScroll ? _objectSpread({
+    userSelect: 'none',
     pointerEvents: 'auto',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
-    transitionProperty: 'opacity',
-    transitionDuration: $theme.animation.timing400,
-    transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null) : {});
+  }, $animate ? animationRules : null);
 });
 exports.DialogContainer = DialogContainer;
 DialogContainer.displayName = "DialogContainer";

package/modal/styled-components.js.flow

@@ -47,59 +47,27 @@ export const Root = styled<SharedStylePropsArgT>('div', (props) => {
   };
 });
 
-export const Backdrop = styled<SharedStylePropsArgT>('div', (props) => {
-  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-  return {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0,
-    ...($animate
-      ? {
-          transitionProperty: 'opacity',
-          transitionDuration: $theme.animation.timing400,
-          transitionTimingFunction: $theme.animation.easeOutCurve,
-        }
-      : null),
+export const DialogContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animate, $isOpen, $isVisible, $theme } = props;
+  const animationRules = {
+    transitionProperty: 'opacity',
+    transitionDuration: $theme.animation.timing400,
+    transitionTimingFunction: $theme.animation.easeOutCurve,
   };
-});
 
-export const DialogContainer = styled<SharedStylePropsArgT>('div', (props) => {
-  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
   return {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
     userSelect: 'none',
-    ...($unstable_ModalBackdropScroll
-      ? {
-          pointerEvents: 'auto',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          // Remove grey highlight
-          WebkitTapHighlightColor: 'transparent',
-          opacity: $isVisible && $isOpen ? 1 : 0,
-          ...($animate
-            ? {
-                transitionProperty: 'opacity',
-                transitionDuration: $theme.animation.timing400,
-                transitionTimingFunction: $theme.animation.easeOutCurve,
-              }
-            : null),
-        }
-      : {}),
+    pointerEvents: 'auto',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    opacity: $isVisible && $isOpen ? 1 : 0,
+    ...($animate ? animationRules : null),
   };
 });
 

package/modal/types.js.flow

@@ -20,15 +20,11 @@ export type CloseSourceT = $Keys<typeof CLOSE_SOURCE>;
 
 export type OverridesT = {
   Root?: OverrideT,
-  Backdrop?: OverrideT,
   Dialog?: OverrideT,
   DialogContainer?: OverrideT,
   Close?: OverrideT,
 };
 
-// flowlint-next-line unclear-type:off
-export type ElementRefT = { current: React.ElementRef<any> | null };
-
 // Props shared by all flavors of modal
 export type ModalPropsT = {
   /** Sets whether the Modal should be displayed by easing in and out */
@@ -37,7 +33,6 @@ export type ModalPropsT = {
    * If false, the modal container itself will receive focus.
    * Moving focus into a newly opened modal is important for accessibility purposes, so please be careful!
    */
-  autofocus: boolean | null,
   autoFocus: boolean,
   /** If true, focus will be locked to elements within the modal.
    */
@@ -53,7 +48,7 @@ export type ModalPropsT = {
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),
   /** Whether the modal should be closeable by the user
-   *  (either via escape, backdrop click, etc). You can set this to
+   *  (either via escape, dialog container click, etc). You can set this to
    * false if your modal has an action that the user must take before closing.*/
   closeable: boolean,
   isOpen: boolean,
@@ -70,9 +65,6 @@ export type ModalPropsT = {
   /** Controls the size of the modal (primarily width).
    * Can be a SIZE constant or css width property value. */
   size: SizePropT,
-  /** Make modal scrollable while cursor is over the modal's backdrop.
-   * Will be removed and implemented as the default behavior in the next major version */
-  unstable_ModalBackdropScroll?: boolean,
 };
 
 export type ModalPropsWithoutChildrenT = $Diff<ModalPropsT, { children: ?React.Node }>;
@@ -90,7 +82,6 @@ export type SharedStylePropsArgT = {
   $size: SizePropT,
   $role: RolePropT,
   $closeable: boolean,
-  $unstable_ModalBackdropScroll?: boolean,
   $isFocusVisible: boolean,
 };