baseui 10.11.1 → 11.0.0

package/file-uploader/file-uploader.js

@@ -105,7 +105,7 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.StyledSpinnerNext),
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.Spinner),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
       SpinnerComponent = _getOverrides16[0],
       spinnerProps = _getOverrides16[1];
@@ -170,7 +170,7 @@ function FileUploader(props) {
           marginBottom: theme.sizing.scale300
         }
       }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: _index3.KIND.minimal,
+        kind: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onRetry && props.onRetry();
         },
@@ -178,7 +178,7 @@ function FileUploader(props) {
         "aria-describedby": props['aria-describedby'],
         "aria-errormessage": props.errorMessage
       }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: _index3.KIND.minimal,
+        kind: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onCancel && props.onCancel();
         },

package/file-uploader/file-uploader.js.flow

@@ -14,7 +14,7 @@ import { useStyletron } from '../styles/index.js';
 import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { ProgressBar } from '../progress-bar/index.js';
-import { StyledSpinnerNext, SIZE as SPINNER_SIZE } from '../spinner/index.js';
+import { Spinner, SIZE as SPINNER_SIZE } from '../spinner/index.js';
 
 import {
   StyledRoot,
@@ -58,7 +58,7 @@ function FileUploader(props: PropsT) {
   const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
   const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
 
-  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, StyledSpinnerNext);
+  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
 
   const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
 
@@ -160,7 +160,7 @@ function FileUploader(props: PropsT) {
                       )}
                       {props.errorMessage ? (
                         <ButtonComponent
-                          kind={KIND.minimal}
+                          kind={KIND.tertiary}
                           onClick={() => {
                             props.onRetry && props.onRetry();
                           }}
@@ -172,7 +172,7 @@ function FileUploader(props: PropsT) {
                         </ButtonComponent>
                       ) : (
                         <ButtonComponent
-                          kind={KIND.minimal}
+                          kind={KIND.tertiary}
                           onClick={() => {
                             props.onCancel && props.onCancel();
                           }}

package/header-navigation/styled-components.js

@@ -19,15 +19,15 @@ var Root = (0, _index.styled)('nav', function (props) {
   var $theme = props.$theme;
   var scale500 = $theme.sizing.scale500,
       font300 = $theme.typography.font300,
-      border = $theme.colors.border;
+      borderOpaque = $theme.colors.borderOpaque;
   return _objectSpread(_objectSpread({}, font300), {}, {
     display: 'flex',
     paddingBottom: scale500,
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: "".concat(border),
-    backgroundColor: $theme.colors.headerNavigationFill
+    borderBottomColor: "".concat(borderOpaque),
+    backgroundColor: $theme.colors.backgroundPrimary
   });
 });
 exports.Root = Root;

package/header-navigation/styled-components.js.flow

@@ -13,7 +13,7 @@ export const Root = styled<{}>('nav', (props) => {
   const {
     sizing: { scale500 },
     typography: { font300 },
-    colors: { border },
+    colors: { borderOpaque },
   } = $theme;
   return {
     ...font300,
@@ -22,8 +22,8 @@ export const Root = styled<{}>('nav', (props) => {
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: `${border}`,
-    backgroundColor: $theme.colors.headerNavigationFill,
+    borderBottomColor: `${borderOpaque}`,
+    backgroundColor: $theme.colors.backgroundPrimary,
   };
 });
 

package/helpers/overrides.js

@@ -101,8 +101,7 @@ function toObjectOverride(override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 
 
 function getOverrides(override, defaultComponent) {

package/helpers/overrides.js.flow

@@ -97,7 +97,7 @@ export function toObjectOverride<T>(override: OverrideT): OverrideObjectT {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 export function getOverrides<T>(
   override: Object,
   defaultComponent: React.ComponentType<any>

package/input/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_CHANGE_TYPE {
   change: 'change';
@@ -123,10 +123,7 @@ export class Input extends React.Component<InputProps, InternalState> {
   onBlur(e: React.FocusEvent<HTMLInputElement>): void;
 }
 
-export class BaseInput extends React.Component<
-  BaseInputProps<HTMLInputElement>,
-  InternalState
-> {
+export class BaseInput extends React.Component<BaseInputProps<HTMLInputElement>, InternalState> {
   onFocus(e: React.FocusEvent<HTMLInputElement>): void;
   onBlur(e: React.FocusEvent<HTMLInputElement>): void;
 }
@@ -144,13 +141,12 @@ export interface StatefulContainerProps {
   stateReducer?: (
     stateType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
     nextState: State,
-    currentState: State,
+    currentState: State
   ) => State;
   onChange?: React.FormEventHandler<HTMLInputElement>;
 }
 
-export type StatefulInputProps = InputProps &
-  StatefulContainerProps & {children?: never};
+export type StatefulInputProps = InputProps & StatefulContainerProps & { children?: never };
 
 export const StatefulInput: React.FC<StatefulInputProps>;
 export const StatefulContainer: React.FC<StatefulContainerProps>;

package/input/styled-components.js

@@ -129,10 +129,10 @@ function getRootColors($disabled, $isFocused, $error) {
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/input/styled-components.js.flow

@@ -164,10 +164,10 @@ function getRootColors(
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive,
     };
   }

package/layer/layer.js

@@ -207,10 +207,10 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }, children) : children;
 
       if (typeof document !== 'undefined') {
-        var portalContainer = mountNode || container;
-
-        if (portalContainer) {
-          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, portalContainer);
+        if (mountNode) {
+          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, mountNode);
+        } else if (container) {
+          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, container);
         }
 
         return null;

package/layer/layer.js.flow

@@ -124,9 +124,10 @@ class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT>
     // Only adding an additional wrapper when a layer has z-index to be set
     const childrenToRender = zIndex ? <Container $zIndex={zIndex}>{children}</Container> : children;
     if (__BROWSER__) {
-      const portalContainer = mountNode || container;
-      if (portalContainer) {
-        return ReactDOM.createPortal(childrenToRender, portalContainer);
+      if (mountNode) {
+        return ReactDOM.createPortal(childrenToRender, mountNode);
+      } else if (container) {
+        return ReactDOM.createPortal(childrenToRender, container);
       }
       return null;
     }

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;