baseui 10.12.1 → 11.0.0

package/es/datepicker/day.js

@@ -15,6 +15,7 @@ import DateHelpers from './utils/date-helpers.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { LocaleContext } from '../locale/index.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
+import { INPUT_ROLE } from './constants.js';
 export default class Day extends React.Component {
   constructor(props) {
     super(props);
@@ -41,22 +42,46 @@ export default class Day extends React.Component {
         range,
         value
       } = this.props;
-      let date;
+      let nextDate;
+
+      if (Array.isArray(value) && range && this.props.hasLockedBehavior) {
+        const currentDate = this.props.value;
+        let nextStartDate = null;
+        let nextEndDate = null;
+
+        if (this.props.selectedInput === INPUT_ROLE.startDate) {
+          nextStartDate = selectedDate;
+          nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
+        } else if (this.props.selectedInput === INPUT_ROLE.endDate) {
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          nextEndDate = selectedDate;
+        }
+
+        nextDate = [nextStartDate];
 
-      if (Array.isArray(value) && range) {
-        if (!value.length || value.length > 1) {
-          date = [selectedDate];
-        } else if (this.dateHelpers.isAfter(selectedDate, value[0])) {
-          date = [value[0], selectedDate];
+        if (nextEndDate) {
+          nextDate.push(nextEndDate);
+        }
+      } else if (Array.isArray(value) && range && !this.props.hasLockedBehavior) {
+        const [start, end] = value; // Starting a new range
+
+        if (!start && !end || start && end) {
+          nextDate = [selectedDate, null]; // EndDate needs a StartDate, SelectedDate comes before EndDate
+        } else if (!start && end && this.dateHelpers.isAfter(end, selectedDate)) {
+          nextDate = [selectedDate, end]; // EndDate needs a StartDate, but SelectedDate comes after EndDate
+        } else if (!start && end && this.dateHelpers.isAfter(selectedDate, end)) {
+          nextDate = [end, selectedDate]; // StartDate needs an EndDate, SelectedDate comes after StartDate
+        } else if (start && !end && this.dateHelpers.isAfter(selectedDate, start)) {
+          nextDate = [start, selectedDate];
         } else {
-          date = [selectedDate, value[0]];
+          nextDate = [selectedDate, start];
         }
       } else {
-        date = selectedDate;
+        nextDate = selectedDate;
       }
 
       this.props.onSelect({
-        date
+        date: nextDate
       });
     });
 
@@ -233,13 +258,16 @@ export default class Day extends React.Component {
       value
     } = this.props;
 
-    if (Array.isArray(value) && !value[0] && !value[1]) {
-      return false;
-    } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+    if (Array.isArray(value)) {
+      const [start, end] = value;
 
+      if (!start && !end) {
+        return false;
+      }
 
-    if (Array.isArray(value) && value.length > 1) {
-      return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(value[1]));
+      if (start && end) {
+        return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(end));
+      }
     }
   } // calculated for range case only
 
@@ -251,16 +279,27 @@ export default class Day extends React.Component {
       highlightedDate
     } = this.props;
 
-    if (Array.isArray(value) && !value[0] && !value[1]) {
-      return false;
-    } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+    if (Array.isArray(value)) {
+      const [start, end] = value;
 
+      if (!start && !end) {
+        return false;
+      }
 
-    if (Array.isArray(value) && highlightedDate && value[0] && !value[1]) {
-      if (this.dateHelpers.isAfter(highlightedDate, value[0])) {
-        return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(highlightedDate));
-      } else {
-        return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(value[0]));
+      if (highlightedDate && start && !end) {
+        if (this.dateHelpers.isAfter(highlightedDate, start)) {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(highlightedDate));
+        } else {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(start));
+        }
+      }
+
+      if (highlightedDate && !start && end) {
+        if (this.dateHelpers.isAfter(highlightedDate, end)) {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(end), this.clampToDayStart(highlightedDate));
+        } else {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(end));
+        }
       }
     }
   }
@@ -271,22 +310,23 @@ export default class Day extends React.Component {
       value,
       highlightedDate,
       range,
-      highlighted
+      highlighted,
+      peekNextMonth
     } = this.props;
     const $isHighlighted = highlighted;
     const $selected = this.isSelected();
-    const $hasRangeHighlighted = !!(Array.isArray(value) && range && value.length === 1 && highlightedDate && !this.dateHelpers.isSameDay(value[0], highlightedDate));
-    const $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
-    const $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
+    const $hasRangeHighlighted = !!(Array.isArray(value) && range && highlightedDate && (value[0] && !value[1] && !this.dateHelpers.isSameDay(value[0], highlightedDate) || !value[0] && value[1] && !this.dateHelpers.isSameDay(value[1], highlightedDate)));
+    const $outsideMonth = !peekNextMonth && this.isOutsideMonth();
+    const $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !peekNextMonth && this.isOutsideOfMonthButWithinRange());
     return {
       $date: date,
       $density: this.props.density,
       $disabled: this.props.disabled,
-      $endDate: Array.isArray(value) && this.props.range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
+      $endDate: Array.isArray(value) && !!(value[0] && value[1]) && range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
       $hasDateLabel: !!this.props.dateLabel,
       $hasRangeHighlighted,
-      $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]),
-      $hasRangeSelected: Array.isArray(value) ? value.length === 2 : false,
+      $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && (value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]) || value[1] && this.dateHelpers.isAfter(highlightedDate, value[1])),
+      $hasRangeSelected: Array.isArray(value) ? !!(value[0] && value[1]) : false,
       $highlightedDate: highlightedDate,
       $isHighlighted,
       $isHovered: this.state.isHovered,
@@ -296,12 +336,15 @@ export default class Day extends React.Component {
       $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
-      $peekNextMonth: this.props.peekNextMonth,
-      $pseudoHighlighted: this.props.range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
-      $pseudoSelected: this.props.range && !$selected ? this.isPseudoSelected() : false,
-      $range: this.props.range,
+      $peekNextMonth: peekNextMonth,
+      $pseudoHighlighted: range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
+      $pseudoSelected: range && !$selected ? this.isPseudoSelected() : false,
+      $range: range,
       $selected,
-      $startDate: Array.isArray(this.props.value) && this.props.value.length > 1 && this.props.range && $selected ? this.dateHelpers.isSameDay(date, this.props.value[0]) : false
+      $startDate: Array.isArray(value) && value[0] && value[1] && range && $selected ? this.dateHelpers.isSameDay(date, value[0]) : false,
+      $hasLockedBehavior: this.props.hasLockedBehavior,
+      $selectedInput: this.props.selectedInput,
+      $value: this.props.value
     };
   }
 

package/es/datepicker/month.js

@@ -82,7 +82,9 @@ export default class CalendarMonth extends React.Component {
           onChange: this.props.onChange,
           overrides: this.props.overrides,
           peekNextMonth: this.props.peekNextMonth,
-          value: this.props.value
+          value: this.props.value,
+          hasLockedBehavior: this.props.hasLockedBehavior,
+          selectedInput: this.props.selectedInput
         }));
         i++;
         currentWeekStart = this.dateHelpers.addWeeks(currentWeekStart, 1); // It will break on the next week if the week is out of the month

package/es/datepicker/styled-components.js

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
-import { ORIENTATION, DENSITY } from './constants.js';
+import { ORIENTATION, DENSITY, INPUT_ROLE } from './constants.js';
 /**
  * Main component container element
  */
@@ -447,6 +447,9 @@ export const StyledDay = styled('div', props => {
     $outsideMonthWithinRange,
     $hasDateLabel,
     $density,
+    $hasLockedBehavior,
+    $selectedInput,
+    $value,
     $theme: {
       colors,
       typography,
@@ -470,6 +473,9 @@ export const StyledDay = styled('div', props => {
     }
   }
 
+  const [startDate, endDate] = Array.isArray($value) ? $value : [$value, null];
+  const oppositeInputIsPopulated = $selectedInput === INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
+  const shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
   return { ...($density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium),
     boxSizing: 'border-box',
     position: 'relative',
@@ -533,7 +539,7 @@ export const StyledDay = styled('div', props => {
         content: null
       } : {})
     },
-    ...($range ? {
+    ...(shouldHighlightRange ? {
       // :before pseudo element defines a grey background style that extends
       // the selected/highlighted day's circle and spans through a range
       ':before': {

package/es/datepicker/types.js

@@ -7,4 +7,4 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';
+import { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants.js';

package/es/datepicker/utils/date-helpers.js

@@ -201,6 +201,22 @@ class DateHelpers {
       return false;
     });
 
+    _defineProperty(this, "dateRangeIncludesDates", (dateRange, dates) => {
+      const [startDate, endDate] = dateRange;
+
+      if (startDate && endDate && Array.isArray(dates) && dates.length) {
+        for (let i = 0; i < dates.length; i++) {
+          const day = dates[i];
+
+          if (this.isDayInRange(day, startDate, endDate)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    });
+
     _defineProperty(this, "subDays", (date, days) => {
       return this.adapter.addDays(date, days * -1);
     });

package/es/datepicker/week.js

@@ -56,7 +56,9 @@ export default class Week extends React.Component {
             onMouseLeave: this.props.onDayMouseLeave,
             overrides: this.props.overrides,
             peekNextMonth: this.props.peekNextMonth,
-            value: this.props.value
+            value: this.props.value,
+            hasLockedBehavior: this.props.hasLockedBehavior,
+            selectedInput: this.props.selectedInput
           })
         );
       }));

package/es/file-uploader/file-uploader.js

@@ -13,7 +13,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, StyledFileDragAndDrop, StyledContentMessage, StyledContentSeparator, StyledErrorMessage, StyledHiddenInput } from './styled-components.js';
 
 function prependStyleProps(styleProps) {
@@ -35,7 +35,7 @@ function FileUploader(props) {
   const [ErrorMessage, errorMessageProps] = getOverrides(overrides.ErrorMessage, StyledErrorMessage);
   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);
   return /*#__PURE__*/React.createElement(Dropzone, _extends({}, props, {
     disabled: props.disabled || afterFileDrop
@@ -90,7 +90,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: KIND.minimal,
+      kind: KIND.tertiary,
       onClick: () => {
         props.onRetry && props.onRetry();
       },
@@ -98,7 +98,7 @@ function FileUploader(props) {
       "aria-describedby": props['aria-describedby'],
       "aria-errormessage": props.errorMessage
     }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       onClick: () => {
         props.onCancel && props.onCancel();
       },

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

@@ -18,7 +18,7 @@ export const Root = styled('nav', props => {
       font300
     },
     colors: {
-      border
+      borderOpaque
     }
   } = $theme;
   return { ...font300,
@@ -27,8 +27,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
   };
 });
 Root.displayName = "Root";

package/es/helpers/overrides.js

@@ -77,8 +77,7 @@ export function toObjectOverride(override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 
 export function getOverrides(override, defaultComponent) {
   const Component = getOverride(override) || defaultComponent;

package/es/input/styled-components.js

@@ -123,10 +123,10 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
 
   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/es/layer/layer.js

@@ -161,10 +161,10 @@ class LayerComponent extends React.Component {
     }, children) : children;
 
     if (typeof document !== 'undefined') {
-      const portalContainer = mountNode || container;
-
-      if (portalContainer) {
-        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, portalContainer);
+      if (mountNode) {
+        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, mountNode);
+      } else if (container) {
+        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, container);
       }
 
       return null;

package/es/locale/index.js

@@ -14,13 +14,6 @@ const LocaleProvider = props => {
     locale,
     children
   } = props;
-
-  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: extend({}, en_US, locale)
   }, children);

package/es/menu/stateful-container.js

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

package/es/menu/styled-components.js

@@ -87,7 +87,7 @@ export const StyledOptgroupHeader = styled('li', props => {
   const paddingX = props.$theme.sizing.scale300;
   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/es/modal/index.js

@@ -8,4 +8,4 @@ export { default as Modal } from './modal.js';
 export { default as ModalButton } from './modal-button.js';
 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, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';
+export { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';

package/es/modal/modal.js

@@ -18,7 +18,7 @@ import { LocaleContext } from '../locale/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 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 { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components.js';
 import { CloseIcon } from './close-icon.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
@@ -30,11 +30,13 @@ class Modal extends React.Component {
 
     _defineProperty(this, "animateStartTimer", void 0);
 
+    _defineProperty(this, "dialogContainerRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "lastFocus", null);
 
     _defineProperty(this, "lastMountNodeOverflowStyle", null);
 
-    _defineProperty(this, "_refs", {});
+    _defineProperty(this, "rootRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(this, "state", {
       isVisible: false,
@@ -67,10 +69,7 @@ class Modal extends React.Component {
     });
 
     _defineProperty(this, "onDocumentClick", 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();
       }
     });
@@ -97,25 +96,10 @@ class Modal extends React.Component {
   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
-        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
-
-
+      // $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`?');
       }
@@ -177,7 +161,7 @@ class Modal extends React.Component {
   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;
@@ -214,8 +198,7 @@ class Modal extends React.Component {
       isOpen,
       size,
       role,
-      closeable,
-      unstable_ModalBackdropScroll
+      closeable
     } = this.props;
     return {
       $animate: animate,
@@ -224,7 +207,6 @@ class Modal extends React.Component {
       $size: size,
       $role: role,
       $closeable: !!closeable,
-      $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
       $isFocusVisible: this.state.isFocusVisible
     };
   }
@@ -250,21 +232,11 @@ class Modal extends React.Component {
     return typeof children === 'function' ? children() : children;
   }
 
-  getRef(component) {
-    if (!this._refs[component]) {
-      this._refs[component] = /*#__PURE__*/React.createRef();
-    }
-
-    return this._refs[component];
-  }
-
   renderModal() {
     const {
       overrides = {},
       closeable,
       role,
-      unstable_ModalBackdropScroll,
-      autofocus,
       autoFocus,
       focusLock,
       returnFocus
@@ -273,47 +245,32 @@ class Modal extends React.Component {
       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);
     const [Dialog, dialogProps] = getOverrides(DialogOverride, StyledDialog);
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
     const sharedProps = this.getSharedProps();
     const 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.
-        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 /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(FocusLock, {
       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: this.getRef('Root')
-    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(Backdrop, _extends({}, unstable_ModalBackdropScroll ? {} : {
-      ref: this.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: this.rootRef
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // flowlint-next-line unclear-type:off
+    , _extends({
+      ref: this.dialogContainerRef
+    }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
       tabIndex: -1,
       "aria-modal": true,
       "aria-label": "dialog",
-      role: role,
-      ref: this.getRef('Dialog')
+      role: role
     }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
       "aria-label": locale.modal.close,
       onClick: this.onCloseClick
@@ -345,8 +302,6 @@ class Modal extends React.Component {
 
 _defineProperty(Modal, "defaultProps", {
   animate: true,
-  // TODO(v11): remove
-  autofocus: null,
   autoFocus: true,
   focusLock: true,
   returnFocus: true,
@@ -355,8 +310,7 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default,
-  unstable_ModalBackdropScroll: false
+  size: SIZE.default
 });
 
 export default Modal;