baseui 10.12.1 → 11.0.2

package/esm/datepicker/stateful-container.js

@@ -58,8 +58,29 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         value: date
       });
 
-      if (typeof _this.props.onChange === 'function') {
-        _this.props.onChange(data);
+      var onChange = _this.props.onChange;
+
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date: date
+          });
+        }
+      }
+
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date: date
+        });
       }
     });
 

package/esm/datepicker/stateful-datepicker.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -47,7 +49,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(StatefulContainer, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(Datepicker, extendedProps);
+        return /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/esm/datepicker/styled-components.js

@@ -1,3 +1,15 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -12,7 +24,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
  */
@@ -427,6 +439,9 @@ export var StyledDay = styled('div', function (props) {
       $outsideMonthWithinRange = props.$outsideMonthWithinRange,
       $hasDateLabel = props.$hasDateLabel,
       $density = props.$density,
+      $hasLockedBehavior = props.$hasLockedBehavior,
+      $selectedInput = props.$selectedInput,
+      $value = props.$value,
       _props$$theme4 = props.$theme,
       colors = _props$$theme4.colors,
       typography = _props$$theme4.typography,
@@ -448,6 +463,13 @@ export var StyledDay = styled('div', function (props) {
     }
   }
 
+  var _ref9 = Array.isArray($value) ? $value : [$value, null],
+      _ref10 = _slicedToArray(_ref9, 2),
+      startDate = _ref10[0],
+      endDate = _ref10[1];
+
+  var oppositeInputIsPopulated = $selectedInput === INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
+  var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
   return _objectSpread(_objectSpread(_objectSpread({}, $density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium), {}, {
     boxSizing: 'border-box',
     position: 'relative',
@@ -509,7 +531,7 @@ export var StyledDay = styled('div', function (props) {
     }, getDayStyles(code, props.$theme)[':after'] || {}), $outsideMonthWithinRange ? {
       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': _objectSpread(_objectSpread({

package/esm/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/esm/datepicker/utils/date-helpers.js

@@ -1,3 +1,15 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -223,6 +235,24 @@ var DateHelpers = function DateHelpers(_adapter) {
     return false;
   });
 
+  _defineProperty(this, "dateRangeIncludesDates", function (dateRange, dates) {
+    var _dateRange = _slicedToArray(dateRange, 2),
+        startDate = _dateRange[0],
+        endDate = _dateRange[1];
+
+    if (startDate && endDate && Array.isArray(dates) && dates.length) {
+      for (var i = 0; i < dates.length; i++) {
+        var _day = dates[i];
+
+        if (_this.isDayInRange(_day, startDate, endDate)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  });
+
   _defineProperty(this, "subDays", function (date, days) {
     return _this.adapter.addDays(date, days * -1);
   });

package/esm/datepicker/week.js

@@ -101,7 +101,9 @@ var Week = /*#__PURE__*/function (_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/esm/file-uploader/file-uploader.js

@@ -35,7 +35,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) {
@@ -88,7 +88,7 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = getOverrides(overrides.Spinner, StyledSpinnerNext),
+  var _getOverrides15 = getOverrides(overrides.Spinner, Spinner),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
       SpinnerComponent = _getOverrides16[0],
       spinnerProps = _getOverrides16[1];
@@ -153,7 +153,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: function onClick() {
           props.onRetry && props.onRetry();
         },
@@ -161,7 +161,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: function onClick() {
           props.onCancel && props.onCancel();
         },

package/esm/form-control/styled-components.js

@@ -17,7 +17,6 @@ export var Label = styled('label', function (props) {
       colors = _props$$theme.colors,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

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

@@ -16,15 +16,15 @@ export var Root = 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
   });
 });
 Root.displayName = "Root";

package/esm/helpers/overrides.js

@@ -85,8 +85,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) {
   var Component = getOverride(override) || defaultComponent;

package/esm/input/styled-components.js

@@ -120,10 +120,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/esm/layer/layer.js

@@ -198,10 +198,10 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }, children) : children;
 
       if (typeof document !== 'undefined') {
-        var 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/esm/list/list-item.js

@@ -69,7 +69,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || SHAPE.DEFAULT
+    $shape: props.shape || SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/esm/list/menu-adapter.js

@@ -11,9 +11,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(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: {
         props: {

package/esm/locale/index.js

@@ -12,13 +12,6 @@ export var LocaleContext = /*#__PURE__*/React.createContext(en_US);
 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: extend({}, en_US, locale)
   }, children);

package/esm/menu/stateful-container.js

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

package/esm/menu/styled-components.js

@@ -94,7 +94,7 @@ export var StyledOptgroupHeader = 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/esm/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/esm/modal/modal.js

@@ -52,7 +52,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';
 
@@ -76,11 +76,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,
@@ -113,10 +115,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();
       }
     });
@@ -147,18 +146,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`?');
         }
@@ -226,7 +217,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;
@@ -266,8 +257,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,
@@ -275,7 +265,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         $size: size,
         $role: role,
         $closeable: !!closeable,
-        $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
         $isFocusVisible: this.state.isFocusVisible
       };
     }
@@ -298,15 +287,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() {
@@ -317,15 +297,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 = getOverrides(RootOverride, StyledRoot),
@@ -333,59 +310,42 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
-      var _getOverrides3 = getOverrides(BackdropOverride, StyledBackdrop),
+      var _getOverrides3 = getOverrides(DialogContainerOverride, StyledDialogContainer),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-          Backdrop = _getOverrides4[0],
-          backdropProps = _getOverrides4[1];
+          DialogContainer = _getOverrides4[0],
+          dialogContainerProps = _getOverrides4[1];
 
-      var _getOverrides5 = getOverrides(DialogContainerOverride, StyledDialogContainer),
+      var _getOverrides5 = getOverrides(DialogOverride, StyledDialog),
           _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-          DialogContainer = _getOverrides6[0],
-          dialogContainerProps = _getOverrides6[1];
+          Dialog = _getOverrides6[0],
+          dialogProps = _getOverrides6[1];
 
-      var _getOverrides7 = getOverrides(DialogOverride, StyledDialog),
+      var _getOverrides7 = getOverrides(CloseOverride, StyledClose),
           _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-          Dialog = _getOverrides8[0],
-          dialogProps = _getOverrides8[1];
-
-      var _getOverrides9 = getOverrides(CloseOverride, StyledClose),
-          _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(LocaleContext.Consumer, null, function (locale) {
         return /*#__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: _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
@@ -421,8 +381,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Modal, "defaultProps", {
   animate: true,
-  // TODO(v11): remove
-  autofocus: null,
   autoFocus: true,
   focusLock: true,
   returnFocus: true,
@@ -431,8 +389,7 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default,
-  unstable_ModalBackdropScroll: false
+  size: SIZE.default
 });
 
 export default Modal;

package/esm/modal/styled-components.js

@@ -47,61 +47,29 @@ export var Root = styled('div', function (props) {
   };
 });
 Root.displayName = "Root";
-export var Backdrop = styled('div', function (props) {
+export var DialogContainer = 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);
-});
-Backdrop.displayName = "Backdrop";
-export var DialogContainer = 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);
 });
 DialogContainer.displayName = "DialogContainer";
 export var Dialog = styled('div', function (props) {

package/esm/phone-input/default-props.js

@@ -9,7 +9,7 @@ var defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: {
     label: 'United States',