baseui 10.10.0 → 10.12.0

package/modal/modal.js.flow

@@ -10,10 +10,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 
-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 { 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,
@@ -21,7 +21,7 @@ import {
   DialogContainer as StyledDialogContainer,
   Close as StyledClose,
 } from './styled-components.js';
-import {CloseIcon} from './close-icon.js';
+import { CloseIcon } from './close-icon.js';
 
 import type {
   ModalPropsT,
@@ -30,7 +30,7 @@ import type {
   CloseSourceT,
   ElementRefT,
 } from './types.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class Modal extends React.Component<ModalPropsT, ModalStateT> {
   static defaultProps: $Shape<ModalPropsT> = {
@@ -53,7 +53,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   animateStartTimer: ?AnimationFrameID;
   lastFocus: ?HTMLElement = null;
   lastMountNodeOverflowStyle: ?string = null;
-  _refs: {[string]: ElementRefT} = {};
+  _refs: { [string]: ElementRefT } = {};
 
   state = {
     isVisible: false,
@@ -62,7 +62,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   };
 
   componentDidMount() {
-    this.setState({mounted: true});
+    this.setState({ mounted: true });
     // TODO(v11)
     if (__DEV__) {
       if (!this.props.unstable_ModalBackdropScroll) {
@@ -81,7 +81,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
       // $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`?',
+          'The property `closable` is not supported on the Modal. Did you mean `closeable`?'
         );
       }
     }
@@ -93,7 +93,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   }
 
   componentDidUpdate(prevProps: ModalPropsT, prevState: ModalStateT) {
-    const {isOpen} = this.props;
+    const { isOpen } = this.props;
     if (
       // If isOpen is changing *or* we just mounted and modal should be open
       isOpen !== prevProps.isOpen ||
@@ -109,13 +109,13 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
@@ -195,7 +195,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
 
     // eslint-disable-next-line cup/no-undef
     this.animateStartTimer = requestAnimationFrame(() => {
-      this.setState({isVisible: true});
+      this.setState({ isVisible: true });
     });
   }
 
@@ -219,15 +219,8 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     });
   };
 
-  getSharedProps(): $Diff<SharedStylePropsArgT, {children?: React.Node}> {
-    const {
-      animate,
-      isOpen,
-      size,
-      role,
-      closeable,
-      unstable_ModalBackdropScroll,
-    } = this.props;
+  getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
+    const { animate, isOpen, size, role, closeable, unstable_ModalBackdropScroll } = this.props;
     return {
       $animate: animate,
       $isVisible: this.state.isVisible,
@@ -241,17 +234,17 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   }
 
   getMountNode(): HTMLElement {
-    const {mountNode} = this.props;
+    const { mountNode } = this.props;
     if (mountNode) {
       return mountNode;
     }
     // Flow thinks body could be null (cast through any)
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     return ((document.body: any): HTMLBodyElement);
   }
 
   getChildren() {
-    const {children} = this.props;
+    const { children } = this.props;
     return typeof children === 'function' ? children() : children;
   }
 
@@ -283,13 +276,10 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     } = overrides;
 
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
-    const [Backdrop, backdropProps] = getOverrides(
-      BackdropOverride,
-      StyledBackdrop,
-    );
+    const [Backdrop, backdropProps] = getOverrides(BackdropOverride, StyledBackdrop);
     const [DialogContainer, dialogContainerProps] = getOverrides(
       DialogContainerOverride,
-      StyledDialogContainer,
+      StyledDialogContainer
     );
     const [Dialog, dialogProps] = getOverrides(DialogOverride, StyledDialog);
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
@@ -300,14 +290,12 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     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.`,
+        The property "autofocus" will be removed in a future major version.`
       );
     }
 
     // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-    // $FlowFixMe
     if (dialogContainerProps.ref) {
-      // $FlowFixMe
       this._refs.DialogContainer = dialogContainerProps.ref;
     }
     const dialogContainerConditionalProps = unstable_ModalBackdropScroll
@@ -318,7 +306,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
 
     return (
       <LocaleContext.Consumer>
-        {locale => (
+        {(locale) => (
           <FocusLock
             disabled={!focusLock}
             // Allow focus to escape when UI is within an iframe
@@ -326,12 +314,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
             returnFocus={returnFocus}
             autoFocus={autofocus !== null ? autofocus : autoFocus}
           >
-            <Root
-              data-baseweb="modal"
-              ref={this.getRef('Root')}
-              {...sharedProps}
-              {...rootProps}
-            >
+            <Root data-baseweb="modal" ref={this.getRef('Root')} {...sharedProps} {...rootProps}>
               <Backdrop
                 {...(unstable_ModalBackdropScroll
                   ? {}

package/modal/styled-components.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {SIZE, SIZE_WIDTHS} from './constants.js';
-import type {SharedStylePropsArgT, SizePropT} from './types.js';
+import { styled } from '../styles/index.js';
+import { SIZE, SIZE_WIDTHS } from './constants.js';
+import type { SharedStylePropsArgT, SizePropT } from './types.js';
 
 type SizeStyleT = {|
   maxWidth: string | number,
@@ -34,8 +34,8 @@ function getSizeStyles($size: SizePropT): SizeStyleT {
   return styles;
 }
 
-export const Root = styled<SharedStylePropsArgT>('div', props => {
-  const {$isOpen} = props;
+export const Root = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $isOpen } = props;
   return {
     position: 'fixed',
     overflow: 'auto',
@@ -47,14 +47,8 @@ export const Root = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const Backdrop = styled<SharedStylePropsArgT>('div', props => {
-  const {
-    $animate,
-    $isOpen,
-    $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll,
-  } = props;
+export const Backdrop = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
   if ($unstable_ModalBackdropScroll) {
     return {};
   }
@@ -80,14 +74,8 @@ export const Backdrop = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const DialogContainer = styled<SharedStylePropsArgT>('div', props => {
-  const {
-    $animate,
-    $isOpen,
-    $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll,
-  } = props;
+export const DialogContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
   return {
     display: 'flex',
     alignItems: 'center',
@@ -115,8 +103,8 @@ export const DialogContainer = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const Dialog = styled<SharedStylePropsArgT>('div', props => {
-  const {$animate, $isOpen, $isVisible, $size, $theme} = props;
+export const Dialog = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animate, $isOpen, $isVisible, $size, $theme } = props;
   return ({
     position: 'relative',
     backgroundColor: $theme.colors.backgroundPrimary,
@@ -151,8 +139,8 @@ export const Dialog = styled<SharedStylePropsArgT>('div', props => {
   }: {});
 });
 
-export const Close = styled<SharedStylePropsArgT>('button', props => {
-  const {$theme, $isFocusVisible} = props;
+export const Close = styled<SharedStylePropsArgT>('button', (props) => {
+  const { $theme, $isFocusVisible } = props;
   const dir: string = $theme.direction === 'rtl' ? 'left' : 'right';
   return {
     // Reset button styles
@@ -199,11 +187,9 @@ export const Close = styled<SharedStylePropsArgT>('button', props => {
   };
 });
 
-export const ModalHeader = styled<{}>('div', ({$theme}) => {
-  const marginStartDir: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-  const marginEndDir: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const ModalHeader = styled<{}>('div', ({ $theme }) => {
+  const marginStartDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  const marginEndDir: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
 
   return {
     ...$theme.typography.font550,
@@ -216,7 +202,7 @@ export const ModalHeader = styled<{}>('div', ({$theme}) => {
   };
 });
 
-export const ModalBody = styled<{}>('div', ({$theme}) => ({
+export const ModalBody = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font200,
   color: $theme.colors.contentSecondary,
   marginTop: $theme.sizing.scale600,
@@ -225,7 +211,7 @@ export const ModalBody = styled<{}>('div', ({$theme}) => ({
   marginBottom: $theme.sizing.scale700,
 }));
 
-export const ModalFooter = styled<{}>('div', ({$theme}) => ({
+export const ModalFooter = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font200,
   marginTop: $theme.sizing.scale700,
   marginLeft: $theme.sizing.scale800,

package/modal/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE, ROLE, CLOSE_SOURCE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 export type SizePropT = SizeT | number | string;
@@ -26,8 +26,8 @@ export type OverridesT = {
   Close?: OverrideT,
 };
 
-// eslint-disable-next-line flowtype/no-weak-types
-export type ElementRefT = {current: React.ElementRef<any> | null};
+// flowlint-next-line unclear-type:off
+export type ElementRefT = { current: React.ElementRef<any> | null };
 
 // Props shared by all flavors of modal
 export type ModalPropsT = {
@@ -48,10 +48,7 @@ export type ModalPropsT = {
    * Optionally, can pass focus options instead of `true` to control the focus
    * more precisely (ie. `{ preventScroll: true }`)
    */
-  returnFocus?:
-    | boolean
-    | FocusOptions
-    | ((returnTo: Element) => boolean | FocusOptions),
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions),
   /** Modal content. The children-as-function API may be preferable
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),
@@ -78,10 +75,7 @@ export type ModalPropsT = {
   unstable_ModalBackdropScroll?: boolean,
 };
 
-export type ModalPropsWithoutChildrenT = $Diff<
-  ModalPropsT,
-  {children: ?React.Node},
->;
+export type ModalPropsWithoutChildrenT = $Diff<ModalPropsT, { children: ?React.Node }>;
 
 export type ModalStateT = {
   isVisible: boolean,

package/notification/index.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as Notification} from './notification.js';
-export {KIND} from '../toast/index.js';
+export { default as Notification } from './notification.js';
+export { KIND } from '../toast/index.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/notification/notification.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {Toast, TYPE} from '../toast/index.js';
-import type {ToastPropsT, ToastPropsShapeT} from '../toast/types.js';
+import { Toast, TYPE } from '../toast/index.js';
+import type { ToastPropsT, ToastPropsShapeT } from '../toast/types.js';
 
 export default class Notification extends React.Component<ToastPropsT> {
   static defaultProps: ToastPropsShapeT = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.10.0",
+  "version": "10.12.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,13 +81,13 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.3.0",
+    "@ladle/react": "^0.10.2",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
     "@types/babel__code-frame": "^7.0.1",
     "@types/babel__core": "^7.1.3",
     "@types/babel__generator": "^7.0.2",
@@ -111,7 +111,7 @@
     "@zeit/next-mdx": "^1.2.0",
     "axe-core": "^4.2.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.0",
+    "babel-eslint": "10.1.0",
     "babel-jest": "^24.0.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-transform-define": "^1.3.0",
@@ -124,23 +124,27 @@
     "core-js": "^2.5.7",
     "cross-env": "^6.0.0",
     "email-validator": "^2.0.4",
-    "eslint": "^6.0.0",
-    "eslint-config-uber-universal-stage-3": "^3.0.0",
-    "eslint-plugin-cup": "^2.0.0",
-    "eslint-plugin-flowtype": "^4.0.0",
-    "eslint-plugin-header": "^3.0.0",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-jsx-a11y": "^6.1.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.10.0",
+    "eslint": "7.18.0",
+    "eslint-config-uber-universal-stage-3": "^3.0.2",
+    "eslint-plugin-cup": "2.0.3",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-header": "3.0.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "23.20.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "3.0.0",
     "extract-react-types": "^0.26.0",
     "extract-react-types-loader": "^0.3.13",
-    "flow-bin": "^0.110.0",
+    "flow-bin": "0.131.0",
     "globby": "^10.0.1",
     "husky": "^3.0.0",
     "isomorphic-fetch": "^2.2.1",
-    "jest": "^26.6.0",
+    "jest": "25.5.3",
     "jest-circus": "^26.6.1",
+    "jest-environment-jsdom": "26.6.0",
+    "jest-environment-jsdom-global": "1.2.1",
     "jest-image-snapshot": "^2.11.0",
     "jest-matcher-utils": "^26.6.1",
     "jest-puppeteer": "^5.0.4",
@@ -157,17 +161,17 @@
     "node-fetch": "^2.6.1",
     "now": "16.5.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.18.2",
+    "prettier": "^2.5.1",
     "pretty-proptypes": "^1.0.5",
     "pretty-quick": "^1.4.1",
     "prism-react-renderer": "^1.0.1",
     "puppeteer": "^9.1.1",
     "query-string": "^6.14.0",
     "raw-loader": "^3.1.0",
-    "react": "^16.9.0",
+    "react": "^17.0.2",
     "react-codesandboxer": "^3.1.5",
     "react-compare-image": "^2.0.3",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
     "react-map-gl": "^5.3.19",
@@ -216,8 +220,8 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0 < 18",
-    "react-dom": ">= 16.8.0 < 18",
+    "react": ">= 16.8.0 < 19",
+    "react-dom": ">= 16.8.0 < 19",
     "styletron-react": ">=5.2.2 < 7"
   },
   "resolutions": {

package/pagination/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "SIZE", {
+  enumerable: true,
+  get: function get() {
+    return _index.SIZE;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {
@@ -21,12 +27,6 @@ Object.defineProperty(exports, "StatefulContainer", {
     return _statefulContainer.default;
   }
 });
-Object.defineProperty(exports, "SIZE", {
-  enumerable: true,
-  get: function get() {
-    return _index.SIZE;
-  }
-});
 Object.defineProperty(exports, "StyledRoot", {
   enumerable: true,
   get: function get() {
@@ -52,14 +52,14 @@ Object.defineProperty(exports, "STATE_CHANGE_TYPE", {
   }
 });
 
+var _index = require("../input/index.js");
+
 var _pagination = _interopRequireDefault(require("./pagination.js"));
 
 var _statefulPagination = _interopRequireDefault(require("./stateful-pagination.js"));
 
 var _statefulContainer = _interopRequireDefault(require("./stateful-container.js"));
 
-var _index = require("../input/index.js");
-
 var _styledComponents = require("./styled-components.js");
 
 var _constants = require("./constants.js");

package/pagination/index.js.flow

@@ -5,18 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as Pagination} from './pagination.js';
-export {default as StatefulPagination} from './stateful-pagination.js';
-export {default as StatefulContainer} from './stateful-container.js';
-import {SIZE} from '../input/index.js';
-export {SIZE};
-export {
-  StyledRoot,
-  StyledMaxLabel,
-  StyledDropdownContainer,
-} from './styled-components.js';
+import { SIZE } from '../input/index.js';
+
+export { default as Pagination } from './pagination.js';
+export { default as StatefulPagination } from './stateful-pagination.js';
+export { default as StatefulContainer } from './stateful-container.js';
+export { SIZE };
+export { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-components.js';
 // Constants
-export {STATE_CHANGE_TYPE} from './constants.js';
+export { STATE_CHANGE_TYPE } from './constants.js';
 // Flow
 export type * from './types.js';