baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

package/toast/toast.js.flow

@@ -7,15 +7,15 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* global document */
 import * as React from 'react';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteIcon from '../icon/delete.js';
 import {
   Body as StyledBody,
   CloseIconSvg as StyledCloseIcon,
   InnerContainer as StyledInnerContainer,
 } from './styled-components.js';
-import {KIND, TYPE} from './constants.js';
-import {LocaleContext} from '../locale/index.js';
+import { KIND, TYPE } from './constants.js';
+import { LocaleContext } from '../locale/index.js';
 
 import type {
   ToastPropsT,
@@ -23,8 +23,8 @@ import type {
   ToastPrivateStateT,
   SharedStylePropsArgT,
 } from './types.js';
-import type {OverridesT} from '../icon/index.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import type { OverridesT } from '../icon/index.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   static defaultProps: ToastPropsShapeT = {
@@ -46,7 +46,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   autoHideTimeout: ?TimeoutID;
   animateInTimer: ?TimeoutID;
   animateOutCompleteTimer: ?TimeoutID;
-  closeRef: ?{current: ?mixed};
+  closeRef: ?{ current: ?mixed };
   previouslyFocusedElement: ?HTMLElement;
 
   state = {
@@ -75,7 +75,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
       this.previouslyFocusedElement = document.activeElement;
       // $FlowFixMe: CloseIcon is `mixed` type so doesn't like `focus` call.
       this.closeRef.current.focus();
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   }
 
@@ -94,13 +94,13 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
 
   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 });
     }
   };
 
@@ -109,19 +109,12 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
       if (this.autoHideTimeout) {
         clearTimeout(this.autoHideTimeout);
       }
-      this.autoHideTimeout = setTimeout(
-        this.dismiss,
-        this.props.autoHideDuration,
-      );
+      this.autoHideTimeout = setTimeout(this.dismiss, this.props.autoHideDuration);
     }
   }
 
   clearTimeout() {
-    [
-      this.autoHideTimeout,
-      this.animateInTimer,
-      this.animateOutCompleteTimer,
-    ].forEach((timerId) => {
+    [this.autoHideTimeout, this.animateInTimer, this.animateOutCompleteTimer].forEach((timerId) => {
       if (timerId) {
         clearTimeout(timerId);
       }
@@ -131,15 +124,15 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   animateIn = () => {
     // Defer to next event loop
     this.animateInTimer = setTimeout(() => {
-      this.setState({isVisible: true});
+      this.setState({ isVisible: true });
     }, 0);
   };
 
   animateOut = (callback: () => mixed = () => {}) => {
-    this.setState({isVisible: false});
+    this.setState({ isVisible: false });
     // Remove the toast from the DOM after animation finishes
     this.animateOutCompleteTimer = setTimeout(() => {
-      this.setState({isRendered: false});
+      this.setState({ isRendered: false });
       callback();
     }, 600);
   };
@@ -176,8 +169,8 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   };
 
   getSharedProps(): $Shape<SharedStylePropsArgT> {
-    const {kind, notificationType, closeable} = this.props;
-    const {isRendered, isVisible} = this.state;
+    const { kind, notificationType, closeable } = this.props;
+    const { isRendered, isVisible } = this.state;
     return {
       $kind: kind,
       $type: notificationType,
@@ -188,8 +181,8 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   }
 
   render() {
-    const {children, closeable} = this.props;
-    const {isRendered} = this.state;
+    const { children, closeable } = this.props;
+    const { isRendered } = this.state;
     const {
       Body: BodyOverride,
       CloseIcon: CloseIconOverride,
@@ -200,18 +193,15 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
 
     const [InnerContainer, innerContainerProps] = getOverrides(
       InnerContainerOverride,
-      StyledInnerContainer,
+      StyledInnerContainer
     );
 
-    const [CloseIcon, closeIconProps] = getOverrides(
-      CloseIconOverride,
-      StyledCloseIcon,
-    );
+    const [CloseIcon, closeIconProps] = getOverrides(CloseIconOverride, StyledCloseIcon);
 
     const closeIconOverrides: OverridesT = mergeOverrides(
-      {Svg: {component: CloseIcon}},
+      { Svg: { component: CloseIcon } },
       // $FlowFixMe
-      {Svg: CloseIconOverride},
+      { Svg: CloseIconOverride }
     );
 
     const sharedProps = this.getSharedProps();
@@ -234,9 +224,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
             onMouseLeave={this.onMouseLeave}
           >
             <InnerContainer {...sharedProps} {...innerContainerProps}>
-              {typeof children === 'function'
-                ? children({dismiss: this.dismiss})
-                : children}
+              {typeof children === 'function' ? children({ dismiss: this.dismiss }) : children}
             </InnerContainer>
             {closeable ? (
               <DeleteIcon

package/toast/toaster.js.flow

@@ -9,8 +9,8 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {KIND, PLACEMENT} from './constants.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { KIND, PLACEMENT } from './constants.js';
 import {
   Root as StyledRoot,
   Body as StyledBody,
@@ -29,7 +29,7 @@ let toasterRef: ?React.ElementRef<typeof ToasterContainer> = null;
 
 export class ToasterContainer extends React.Component<
   $Shape<ToasterPropsT>,
-  ToasterContainerStateT,
+  ToasterContainerStateT
 > {
   static defaultProps: ToasterPropsT = {
     autoFocus: false,
@@ -58,13 +58,13 @@ export class ToasterContainer extends React.Component<
   toastId: number = 0;
 
   componentDidMount() {
-    this.setState({isMounted: true});
+    this.setState({ isMounted: true });
   }
 
-  getToastProps = (props: ToastPropsT): ToastPropsT & {key: React.Key} => {
-    const {autoFocus, autoHideDuration, closeable} = this.props;
+  getToastProps = (props: ToastPropsT): ToastPropsT & { key: React.Key } => {
+    const { autoFocus, autoHideDuration, closeable } = this.props;
     const key: React.Key = props.key || `toast-${this.toastId++}`;
-    return {autoFocus, autoHideDuration, closeable, ...props, key};
+    return { autoFocus, autoHideDuration, closeable, ...props, key };
   };
 
   show = (props: ToastPropsT = {}): React.Key => {
@@ -73,14 +73,14 @@ export class ToasterContainer extends React.Component<
       return props.key;
     }
     const toastProps = this.getToastProps(props);
-    this.setState(({toasts}) => {
-      return {toasts: [...toasts, toastProps]};
+    this.setState(({ toasts }) => {
+      return { toasts: [...toasts, toastProps] };
     });
     return toastProps.key;
   };
 
   update = (key: React.Key, props: ToastPropsT): void => {
-    this.setState(({toasts}) => {
+    this.setState(({ toasts }) => {
       const updatedToasts = toasts.map((toast) => {
         if (toast.key === key) {
           const updatedToastProps = {
@@ -91,7 +91,7 @@ export class ToasterContainer extends React.Component<
             }),
             key,
             ...(this.props.resetAutoHideTimerOnUpdate
-              ? {__updated: (parseInt(toast.__updated) || 0) + 1}
+              ? { __updated: (parseInt(toast.__updated) || 0) + 1 }
               : {}),
           };
           return updatedToastProps;
@@ -122,7 +122,7 @@ export class ToasterContainer extends React.Component<
 
   internalOnClose = (key: React.Key) => {
     delete this.dismissHandlers[key];
-    this.setState(({toasts}) => ({
+    this.setState(({ toasts }) => ({
       toasts: toasts.filter((t) => {
         return !(t.key === key);
       }),
@@ -136,8 +136,8 @@ export class ToasterContainer extends React.Component<
     };
   };
 
-  renderToast = (toastProps: ToastPropsT & {key: React.Key}): React.Node => {
-    const {onClose, children, key, ...restProps} = toastProps;
+  renderToast = (toastProps: ToastPropsT & { key: React.Key }): React.Node => {
+    const { onClose, children, key, ...restProps } = toastProps;
 
     const {
       ToastBody: BodyOverride,
@@ -154,12 +154,9 @@ export class ToasterContainer extends React.Component<
         Body: BodyOverride || {},
         CloseIcon: CloseIconOverride || {},
         InnerContainer: InnerContainerOverride || {},
-      },
-    );
-    const toastOverrides = mergeOverrides(
-      globalToastOverrides,
-      toastProps.overrides,
+      }
     );
+    const toastOverrides = mergeOverrides(globalToastOverrides, toastProps.overrides);
 
     return (
       <Toast
@@ -168,7 +165,7 @@ export class ToasterContainer extends React.Component<
         key={key}
         onClose={this.getOnCloseHandler(key, onClose)}
       >
-        {({dismiss}) => {
+        {({ dismiss }) => {
           this.dismissHandlers[key] = dismiss;
           // $FlowFixMe
           return children;
@@ -178,7 +175,7 @@ export class ToasterContainer extends React.Component<
   };
 
   getSharedProps = () => {
-    const {placement} = this.props;
+    const { placement } = this.props;
     return {
       $placement: placement,
     };
@@ -187,7 +184,7 @@ export class ToasterContainer extends React.Component<
   render() {
     const sharedProps = this.getSharedProps();
 
-    const {Root: RootOverride} = this.props.overrides;
+    const { Root: RootOverride } = this.props.overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
 
     const toastsLength = this.state.toasts.length;
@@ -225,44 +222,29 @@ const toaster = {
   getRef: function (): ?React.ElementRef<typeof ToasterContainer> {
     return toasterRef;
   },
-  show: function (
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): ?React.Key {
+  show: function (children: React.Node, props: ToastPropsShapeT = {}): ?React.Key {
     // toasts can not be added until Toaster is mounted
     // no SSR for the `toaster.show()`
     const toasterInstance = this.getRef();
     if (toasterInstance) {
-      return toasterInstance.show({...props, children});
+      return toasterInstance.show({ ...props, children });
     } else if (__DEV__) {
       throw new Error(
-        'Please make sure to add the ToasterContainer to your application, and it is mounted, before adding toasts! You can find more information here: https://baseweb.design/components/toast',
+        'Please make sure to add the ToasterContainer to your application, and it is mounted, before adding toasts! You can find more information here: https://baseweb.design/components/toast'
       );
     }
   },
-  info: function (
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.info});
+  info: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.info });
   },
-  positive: function (
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.positive});
+  positive: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.positive });
   },
-  warning: function (
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.warning});
+  warning: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.warning });
   },
-  negative: function (
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.negative});
+  negative: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.negative });
   },
   update: function (key: React.Key, props: $Shape<ToastPropsT>): void {
     const toasterInstance = this.getRef();

package/toast/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {KIND, PLACEMENT, TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { KIND, PLACEMENT, TYPE } from './constants.js';
 
 export type KindTypeT = $Values<typeof KIND>;
 export type NotificationTypeT = $Values<typeof TYPE>;
@@ -33,7 +33,7 @@ export type OverridesT = {
   InnerContainer?: OverrideT,
 };
 
-export type ComponentRenderPropT = (props: {dismiss: () => void}) => React.Node;
+export type ComponentRenderPropT = (props: { dismiss: () => void }) => React.Node;
 
 export type ChildT = React.Node;
 
@@ -82,7 +82,7 @@ export type ToastPropsT = {
 };
 
 export type ToastPropsShapeT = $Shape<
-  $Diff<ToastPropsT, {children: ChildrenT | ComponentRenderPropT}>,
+  $Diff<ToastPropsT, { children: ChildrenT | ComponentRenderPropT }>
 >;
 
 export type ToasterOverridesT = {

package/tokens/colors.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {ColorTokensT} from './types.js';
+import type { ColorTokensT } from './types.js';
 
 const colors: ColorTokensT = {
   white: '#FFFFFF',

package/tokens/index.js.flow

@@ -5,7 +5,7 @@ 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 colors} from './colors.js';
+export { default as colors } from './colors.js';
 
 export type * from './types.js';
 

package/tooltip/default-props.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
-import {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from './constants.js';
-import type {BaseTooltipPropsT} from './types.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants.js';
+import type { BaseTooltipPropsT } from './types.js';
 
 const baseDefaultProps: $Shape<BaseTooltipPropsT> = {
   accessibilityType: ACCESSIBILITY_TYPE.tooltip,

package/tooltip/index.js.flow

@@ -5,16 +5,11 @@ 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 StatefulTooltip} from './stateful-tooltip.js';
-export {default as StatefulContainer} from './stateful-tooltip-container.js';
-export {default as Tooltip} from './tooltip.js';
+export { default as StatefulTooltip } from './stateful-tooltip.js';
+export { default as StatefulContainer } from './stateful-tooltip-container.js';
+export { default as Tooltip } from './tooltip.js';
 // Constants
-export {
-  ACCESSIBILITY_TYPE,
-  PLACEMENT,
-  TRIGGER_TYPE,
-  STATE_CHANGE_TYPE,
-} from './constants.js';
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export {
   Arrow as StyledArrow,

package/tooltip/stateful-tooltip-container.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {StatefulContainer as StatefulPopoverContainer} from '../popover/index.js';
+import { StatefulContainer as StatefulPopoverContainer } from '../popover/index.js';
 import baseDefaultProps from './default-props.js';
-import type {StatefulTooltipContainerPropsT} from './types.js';
+import type { StatefulTooltipContainerPropsT } from './types.js';
 
 class StatefulContainer extends React.Component<StatefulTooltipContainerPropsT> {
   static defaultProps: $Shape<StatefulTooltipContainerPropsT> = {

package/tooltip/stateful-tooltip.js.flow

@@ -8,10 +8,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-tooltip-container.js';
 import Tooltip from './tooltip.js';
-import type {StatefulTooltipPropsT} from './types.js';
+import type { StatefulTooltipPropsT } from './types.js';
 
 function StatefulTooltip(props: StatefulTooltipPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
       {(tooltipProps) => <Tooltip {...tooltipProps}>{children}</Tooltip>}

package/tooltip/styled-components.js.flow

@@ -5,14 +5,10 @@ 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 {
-  getBodyStyles,
-  getArrowStyles,
-  getInnerStyles,
-} from '../popover/styled-components.js';
-import {getEndPosition} from '../popover/utils.js';
-import type {SharedStylePropsArgT} from '../popover/types.js';
+import { styled } from '../styles/index.js';
+import { getBodyStyles, getArrowStyles, getInnerStyles } from '../popover/styled-components.js';
+import { getEndPosition } from '../popover/utils.js';
+import type { SharedStylePropsArgT } from '../popover/types.js';
 
 /**
  * We want to reuse the default Popover styles and add our overrides

package/tooltip/tooltip.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable react/no-find-dom-node */
 import * as React from 'react';
-import {Popover} from '../popover/index.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import { Popover } from '../popover/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 import baseDefaultProps from './default-props.js';
-import type {TooltipPropsT} from './types.js';
+import type { TooltipPropsT } from './types.js';
 import {
   Arrow as StyledArrow,
   Body as StyledBody,
@@ -29,15 +29,10 @@ class Tooltip extends React.Component<TooltipPropsT> {
         Body: StyledBody,
         Inner: StyledInner,
       },
-      this.props.overrides,
+      this.props.overrides
     );
     return (
-      <Popover
-        autoFocus={false}
-        data-baseweb="tooltip"
-        {...this.props}
-        overrides={overrides}
-      />
+      <Popover autoFocus={false} data-baseweb="tooltip" {...this.props} overrides={overrides} />
     );
   }
 }

package/tree-view/index.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as TreeView} from './tree-view.js';
-export {default as StatefulTreeView} from './stateful-tree-view.js';
+export { default as TreeView } from './tree-view.js';
+export { default as StatefulTreeView } from './stateful-tree-view.js';
 
 export type * from './types.js';
 
@@ -18,9 +18,9 @@ export {
   StyledIconContainer,
 } from './styled-components.js';
 
-export {default as TreeLabel} from './tree-label.js';
-export {default as TreeLabelInteractable} from './tree-label-interactable.js';
-export {toggleIsExpanded} from './utils.js';
+export { default as TreeLabel } from './tree-label.js';
+export { default as TreeLabelInteractable } from './tree-label-interactable.js';
+export { toggleIsExpanded } from './utils.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/tree-view/stateful-container.js.flow

@@ -6,16 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {StatefulContainerPropsT, TreeNodeT} from './types.js';
+import type { StatefulContainerPropsT, TreeNodeT } from './types.js';
 
 type StateType = {|
   data: TreeNodeT<>[],
 |};
 
-const findSiblings = (
-  node: TreeNodeT<>,
-  children: TreeNodeT<>[],
-): ?(TreeNodeT<>[]) => {
+const findSiblings = (node: TreeNodeT<>, children: TreeNodeT<>[]): ?(TreeNodeT<>[]) => {
   if (children.indexOf(node) !== -1) {
     return children;
   }
@@ -30,19 +27,16 @@ const findSiblings = (
   return null;
 };
 
-export default class StatefulContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateType,
-> {
+export default class StatefulContainer extends React.Component<StatefulContainerPropsT, StateType> {
   state: StateType;
 
   constructor(props: StatefulContainerPropsT) {
     super(props);
-    this.state = {data: this.props.data};
+    this.state = { data: this.props.data };
   }
 
   onToggle = (node: TreeNodeT<>) => {
-    const {onToggle, singleExpanded} = this.props;
+    const { onToggle, singleExpanded } = this.props;
     this.setState(
       (prevState) => {
         const shouldExpand = !node.isExpanded;
@@ -57,23 +51,23 @@ export default class StatefulContainer extends React.Component<
           }
         }
         node.isExpanded = shouldExpand;
-        return {data: prevState.data};
+        return { data: prevState.data };
       },
       () => {
         onToggle && onToggle(node);
-      },
+      }
     );
   };
 
   render() {
-    const {children, ...restProps} = this.props;
-    const {onToggle} = this;
+    const { children, ...restProps } = this.props;
+    const { onToggle } = this;
     return children(
       Object.freeze({
         ...restProps,
         ...this.state,
         onToggle,
-      }),
+      })
     );
   }
 }

package/tree-view/stateful-tree-view.js.flow

@@ -10,7 +10,7 @@ import * as React from 'react';
 
 import StatefulContainer from './stateful-container.js';
 import TreeView from './tree-view.js';
-import type {TreeViewPropsT} from './types.js';
+import type { TreeViewPropsT } from './types.js';
 
 export default function StatefulTreeView(props: TreeViewPropsT) {
   return (