baseui 10.12.1 → 11.0.2

package/list/list-item.js.flow

@@ -58,6 +58,10 @@ const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) =>
       // flowlint-next-line unclear-type:off
       ref={(ref: any)}
       $shape={props.shape || SHAPE.DEFAULT}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
+      id={props.id}
+      role={props.role}
       {...rootProps}
     >
       {Artwork && (

package/list/menu-adapter.js

@@ -29,9 +29,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(_listItem.default, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: (0, _overrides.mergeOverrides)({
       Root: {
         props: {

package/list/menu-adapter.js.flow

@@ -17,9 +17,13 @@ const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, r
     <ListItem
       ref={ref}
       sublist={props.sublist || props.$size === 'compact'}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
       artwork={props.artwork}
       artworkSize={props.artworkSize}
       endEnhancer={props.endEnhancer}
+      id={props.id}
+      role={props.role}
       overrides={mergeOverrides(
         {
           Root: {

package/list/types.js.flow

@@ -44,7 +44,11 @@ export type PropsT = {|
   shape?: ShapeT,
   children: React.Node,
   endEnhancer?: React.AbstractComponent<{}>,
+  'aria-label'?: string,
+  'aria-selected'?: boolean,
+  id?: String,
   overrides?: OverridesT,
+  role?: string,
   sublist?: boolean,
 |};
 

package/locale/index.js

@@ -31,13 +31,6 @@ exports.LocaleContext = LocaleContext;
 var LocaleProvider = function LocaleProvider(props) {
   var locale = props.locale,
       children = props.children;
-
-  if (process.env.NODE_ENV !== "production") {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn('`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead');
-    }
-  }
-
   return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     value: (0, _justExtend.default)({}, _en_US.default, locale)
   }, children);

package/locale/index.js.flow

@@ -15,13 +15,6 @@ export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
 
 const LocaleProvider = (props: { locale: $Shape<LocaleT>, children: ?React.Node }) => {
   const { locale, children } = props;
-  if (__DEV__) {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn(
-        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead'
-      );
-    }
-  }
   return (
     <LocaleContext.Provider value={extend({}, en_US, locale)}>{children}</LocaleContext.Provider>
   );

package/locale.ts

@@ -29,7 +29,6 @@ interface DatepickerLocale {
   quickSelectPlaceholder: string;
   timeSelectEndLabel: string;
   timeSelectStartLabel: string;
-  timePickerAriaLabel?: string;
   timePickerAriaLabel12Hour: string;
   timePickerAriaLabel24Hour: string;
   timezonePickerAriaLabel: string;

package/menu/index.d.ts

@@ -146,9 +146,7 @@ export const OptionList: React.FC<OptionListProps>;
 export interface OptionProfileProps extends BaseMenuPropsT {
   item: any;
   getChildMenu?: (item: any) => React.ReactNode;
-  getProfileItemLabels: (
-    item: any,
-  ) => {
+  getProfileItemLabels: (item: any) => {
     title?: string;
     subtitle?: string;
     body?: string;

package/menu/stateful-container.js

@@ -156,7 +156,6 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         _this.typeAheadChars = '';
       }, 500);
       var nextIndex = prevIndex;
-      event.preventDefault();
 
       var list = _this.getItems();
 

package/menu/stateful-container.js.flow

@@ -210,7 +210,6 @@ class MenuStatefulContainerInner extends React.Component<
     }, 500);
 
     var nextIndex = prevIndex;
-    event.preventDefault();
     var list = this.getItems();
     if (list.length === 0 || !('label' in list[0])) return;
 

package/menu/styled-components.js

@@ -106,7 +106,7 @@ var StyledOptgroupHeader = (0, _index.styled)('li', function (props) {
   var paddingX = props.$theme.sizing.scale300;
   var paddingY = props.$theme.sizing.scale200;
   return _objectSpread(_objectSpread({}, props.$theme.typography.font250), {}, {
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,

package/menu/styled-components.js.flow

@@ -92,7 +92,7 @@ export const StyledOptgroupHeader = styled<{}>('li', (props) => {
   const paddingY = props.$theme.sizing.scale200;
   return {
     ...props.$theme.typography.font250,
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,

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