baseui 10.12.1 → 11.0.0

package/modal/modal.js.flow

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

package/modal/styled-components.js

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

package/modal/styled-components.js.flow

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

package/modal/types.js.flow

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.12.1",
+  "version": "11.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -14,7 +14,7 @@
   "module": "./esm/index.js",
   "repository": "uber/baseweb",
   "scripts": {
-    "lint:code": "eslint ./ --fix --cache",
+    "lint:code": "eslint ./ --cache",
     "lint:markdown": "markdownlint -c ./.markdownlint.json proposals",
     "lint": "yarn lint:code && yarn lint:markdown",
     "pretest": "yarn build:documentation-site-files",

package/phone-input/default-props.js

@@ -17,7 +17,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',

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

@@ -11,7 +11,7 @@ const 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', id: 'US', dialCode: '+1' },
   disabled: false,

package/phone-input/index.d.ts

@@ -335,7 +335,6 @@ export interface PhoneInputProps extends InputProps {
   overrides?: PhoneInputOverrides;
 }
 export const PhoneInput: React.FC<PhoneInputProps>;
-export const PhoneInputNext: React.FC<PhoneInputProps>;
 
 export interface PhoneInputLiteProps extends PhoneInputProps {
   countries: {[key: string]: Country};

package/phone-input/index.js

@@ -8,13 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   PhoneInput: true,
   PhoneInputLite: true,
-  PhoneInputNext: true,
   StatefulPhoneInput: true,
-  StatefulPhoneInputNext: true,
   StatefulPhoneInputContainer: true,
   CountryPicker: true,
-  CountrySelect: true,
-  CountrySelectDropdown: true,
   Flag: true,
   StyledFlag: true
 };
@@ -30,24 +26,12 @@ Object.defineProperty(exports, "PhoneInputLite", {
     return _phoneInputLite.default;
   }
 });
-Object.defineProperty(exports, "PhoneInputNext", {
-  enumerable: true,
-  get: function get() {
-    return _phoneInputNext.default;
-  }
-});
 Object.defineProperty(exports, "StatefulPhoneInput", {
   enumerable: true,
   get: function get() {
     return _statefulPhoneInput.default;
   }
 });
-Object.defineProperty(exports, "StatefulPhoneInputNext", {
-  enumerable: true,
-  get: function get() {
-    return _statefulPhoneInputNext.default;
-  }
-});
 Object.defineProperty(exports, "StatefulPhoneInputContainer", {
   enumerable: true,
   get: function get() {
@@ -60,18 +44,6 @@ Object.defineProperty(exports, "CountryPicker", {
     return _countryPicker.default;
   }
 });
-Object.defineProperty(exports, "CountrySelect", {
-  enumerable: true,
-  get: function get() {
-    return _countrySelect.default;
-  }
-});
-Object.defineProperty(exports, "CountrySelectDropdown", {
-  enumerable: true,
-  get: function get() {
-    return _countrySelectDropdown.default;
-  }
-});
 Object.defineProperty(exports, "Flag", {
   enumerable: true,
   get: function get() {
@@ -89,20 +61,12 @@ var _phoneInput = _interopRequireDefault(require("./phone-input.js"));
 
 var _phoneInputLite = _interopRequireDefault(require("./phone-input-lite.js"));
 
-var _phoneInputNext = _interopRequireDefault(require("./phone-input-next.js"));
-
 var _statefulPhoneInput = _interopRequireDefault(require("./stateful-phone-input.js"));
 
-var _statefulPhoneInputNext = _interopRequireDefault(require("./stateful-phone-input-next.js"));
-
 var _statefulPhoneInputContainer = _interopRequireDefault(require("./stateful-phone-input-container.js"));
 
 var _countryPicker = _interopRequireDefault(require("./country-picker.js"));
 
-var _countrySelect = _interopRequireDefault(require("./country-select.js"));
-
-var _countrySelectDropdown = _interopRequireDefault(require("./country-select-dropdown.js"));
-
 var _flag = _interopRequireWildcard(require("./flag.js"));
 
 var _constants = require("./constants.js");

package/phone-input/index.js.flow

@@ -8,13 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 export { default as PhoneInput } from './phone-input.js';
 export { default as PhoneInputLite } from './phone-input-lite.js';
-export { default as PhoneInputNext } from './phone-input-next.js';
 export { default as StatefulPhoneInput } from './stateful-phone-input.js';
-export { default as StatefulPhoneInputNext } from './stateful-phone-input-next.js';
 export { default as StatefulPhoneInputContainer } from './stateful-phone-input-container.js';
 export { default as CountryPicker } from './country-picker.js';
-export { default as CountrySelect } from './country-select.js';
-export { default as CountrySelectDropdown } from './country-select-dropdown.js';
 export { default as Flag, StyledFlag } from './flag.js';
 export * from './constants.js';
 export type * from './types.js';