baseui 10.10.0 → 10.11.0

package/dnd-list/list.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   Root as StyledRoot,
   List as StyledList,
@@ -15,52 +15,43 @@ import {
   CloseHandle as StyledCloseHandle,
   Label as StyledLabel,
 } from './styled-components.js';
-import {List as MovableList} from 'react-movable';
+import { List as MovableList } from 'react-movable';
 import Grab from '../icon/grab.js';
 import Delete from '../icon/delete.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
-import {Layer} from '../layer/index.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+import { Layer } from '../layer/index.js';
 
-import type {ListPropsT, SharedStylePropsArgT} from './types.js';
+import type { ListPropsT, SharedStylePropsArgT } from './types.js';
 
-const ItemLayer = ({
-  children,
-  dragged,
-}: {
-  children: React.Node,
-  dragged: boolean,
-}) => {
+const ItemLayer = ({ children, dragged }: { children: React.Node, dragged: boolean }) => {
   if (!dragged) {
     return children;
   }
   return <Layer>{children}</Layer>;
 };
 
-class StatelessList extends React.Component<
-  ListPropsT,
-  {isFocusVisible: boolean},
-> {
+class StatelessList extends React.Component<ListPropsT, { isFocusVisible: boolean }> {
   static defaultProps: $Shape<ListPropsT> = {
     items: [],
     onChange: () => {},
   };
 
-  state = {isFocusVisible: false};
+  state = { isFocusVisible: false };
 
   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 });
     }
   };
 
   render() {
-    const {overrides = {}, items, onChange, removable} = this.props;
+    const { overrides = {}, items, onChange, removable } = this.props;
     const {
       Root: RootOverride,
       List: ListOverride,
@@ -72,14 +63,8 @@ class StatelessList extends React.Component<
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     const [List, listProps] = getOverrides(ListOverride, StyledList);
     const [Item, itemProps] = getOverrides(ItemOverride, StyledItem);
-    const [DragHandle, dragHandleProps] = getOverrides(
-      DragHandleOverride,
-      StyledDragHandle,
-    );
-    const [CloseHandle, closeHandleProps] = getOverrides(
-      CloseHandleOverride,
-      StyledCloseHandle,
-    );
+    const [DragHandle, dragHandleProps] = getOverrides(DragHandleOverride, StyledDragHandle);
+    const [CloseHandle, closeHandleProps] = getOverrides(CloseHandleOverride, StyledCloseHandle);
     const [Label, labelProps] = getOverrides(LabelOverride, StyledLabel);
     const isRemovable = this.props.removable || false;
     const isRemovableByMove = this.props.removableByMove || false;
@@ -95,24 +80,12 @@ class StatelessList extends React.Component<
           removableByMove={isRemovableByMove}
           values={items}
           onChange={onChange}
-          renderList={({children, props, isDragged}) => (
-            <List
-              $isRemovable={isRemovable}
-              $isDragged={isDragged}
-              ref={props.ref}
-              {...listProps}
-            >
+          renderList={({ children, props, isDragged }) => (
+            <List $isRemovable={isRemovable} $isDragged={isDragged} ref={props.ref} {...listProps}>
               {children}
             </List>
           )}
-          renderItem={({
-            value,
-            props,
-            isDragged,
-            isSelected,
-            isOutOfBounds,
-            index,
-          }) => {
+          renderItem={({ value, props, isDragged, isSelected, isOutOfBounds, index }) => {
             const sharedProps: SharedStylePropsArgT = {
               $isRemovable: isRemovable,
               $isRemovableByMove: isRemovableByMove,
@@ -133,7 +106,7 @@ class StatelessList extends React.Component<
                   onKeyDown={props.onKeyDown}
                   onWheel={props.onWheel}
                   {...itemProps}
-                  style={{...props.style, display: 'flex'}}
+                  style={{ ...props.style, display: 'flex' }}
                 >
                   <DragHandle {...sharedProps} {...dragHandleProps}>
                     <Grab size={24} />
@@ -144,7 +117,7 @@ class StatelessList extends React.Component<
                   {removable && (
                     <CloseHandle
                       {...sharedProps}
-                      onClick={evt => {
+                      onClick={(evt) => {
                         evt.preventDefault();
                         onChange &&
                           onChange({

package/dnd-list/stateful-list-container.js.flow

@@ -12,16 +12,13 @@ import type {
   StateChangeTypeT,
   StateReducerT,
 } from './types.js';
-import {arrayMove, arrayRemove} from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulListContainer extends React.Component<
-  StatefulComponentContainerPropsT,
-  StateT,
-> {
+class StatefulListContainer extends React.Component<StatefulComponentContainerPropsT, StateT> {
   static defaultProps: $Shape<StatefulComponentContainerPropsT> = {
-    initialState: {items: []},
+    initialState: { items: [] },
     stateReducer: defaultStateReducer,
     onChange: () => {},
   };
@@ -50,16 +47,16 @@ class StatefulListContainer extends React.Component<
       newIndex,
       targetRect,
     });
-    this.internalSetState('change', {items: newItemsState});
+    this.internalSetState('change', { items: newItemsState });
   };
 
   internalSetState(type: StateChangeTypeT, changes: StateT) {
-    const {stateReducer} = this.props;
-    this.setState(prevState => stateReducer(type, changes, prevState));
+    const { stateReducer } = this.props;
+    this.setState((prevState) => stateReducer(type, changes, prevState));
   }
 
   render() {
-    const {children, initialState, stateReducer, ...restProps} = this.props;
+    const { children, initialState, stateReducer, ...restProps } = this.props;
 
     return this.props.children({
       ...restProps,

package/dnd-list/stateful-list.js.flow

@@ -8,20 +8,20 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulListContainer from './stateful-list-container.js';
 import List from './list.js';
-import type {StatefulListPropsT, StateReducerT} from './types.js';
+import type { StatefulListPropsT, StateReducerT } from './types.js';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
 function StatefulList(props: StatefulListPropsT) {
   return (
     <StatefulListContainer {...props}>
-      {componentProps => <List {...componentProps} />}
+      {(componentProps) => <List {...componentProps} />}
     </StatefulListContainer>
   );
 }
 
 StatefulList.defaultProps = {
-  initialState: {items: []},
+  initialState: { items: [] },
   stateReducer: defaultStateReducer,
 };
 

package/dnd-list/styled-components.js.flow

@@ -5,20 +5,20 @@ 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 type {SharedStylePropsArgT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { SharedStylePropsArgT } from './types.js';
 
 /**
  * Main component container element
  */
-export const Root = styled<SharedStylePropsArgT>('div', ({$theme}) => {
+export const Root = styled<SharedStylePropsArgT>('div', ({ $theme }) => {
   return {
     width: '100%',
   };
 });
 Root.displayName = 'StyledRoot';
 
-export const List = styled<SharedStylePropsArgT>('ul', ({$isDragged}) => {
+export const List = styled<SharedStylePropsArgT>('ul', ({ $isDragged }) => {
   return ({
     paddingLeft: 0,
     cursor: $isDragged ? 'grabbing' : null,
@@ -29,7 +29,7 @@ List.displayName = 'StyledList';
 
 export const Item = styled<SharedStylePropsArgT>(
   'li',
-  ({$isDragged, $isSelected, $theme, $isFocusVisible}) => {
+  ({ $isDragged, $isSelected, $theme, $isFocusVisible }) => {
     return ({
       ':hover':
         !$isDragged && !$isSelected
@@ -75,22 +75,17 @@ export const Item = styled<SharedStylePropsArgT>(
       borderBottomStyle: 'solid',
       borderLeftStyle: 'solid',
       borderRightStyle: 'solid',
-      borderTopColor:
-        $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderBottomColor:
-        $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderLeftColor:
-        $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderRightColor:
-        $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
+      borderTopColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
+      borderBottomColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
+      borderLeftColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
+      borderRightColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
     }: {});
-  },
+  }
 );
 List.displayName = 'StyledItem';
 
-export const DragHandle = styled<SharedStylePropsArgT>('div', ({$theme}) => {
-  const marginDir: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const DragHandle = styled<SharedStylePropsArgT>('div', ({ $theme }) => {
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     [marginDir]: $theme.sizing.scale600,
     width: $theme.sizing.scale800,
@@ -101,36 +96,32 @@ export const DragHandle = styled<SharedStylePropsArgT>('div', ({$theme}) => {
 });
 DragHandle.displayName = 'StyledDragHandle';
 
-export const CloseHandle = styled<SharedStylePropsArgT>(
-  'button',
-  ({$theme, $isFocusVisible}) => {
-    const marginDir: string =
-      $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return {
-      borderLeftStyle: 'none',
-      borderTopStyle: 'none',
-      borderRightStyle: 'none',
-      borderBottomStyle: 'none',
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      overflow: 'visible',
-      cursor: 'pointer',
-      backgroundColor: 'transparent',
-      [marginDir]: $theme.sizing.scale600,
-      width: $theme.sizing.scale800,
-      display: 'flex',
-      alignItems: 'center',
-      ':focus': {
-        outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
-      },
-    };
-  },
-);
+export const CloseHandle = styled<SharedStylePropsArgT>('button', ({ $theme, $isFocusVisible }) => {
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    borderLeftStyle: 'none',
+    borderTopStyle: 'none',
+    borderRightStyle: 'none',
+    borderBottomStyle: 'none',
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    overflow: 'visible',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    [marginDir]: $theme.sizing.scale600,
+    width: $theme.sizing.scale800,
+    display: 'flex',
+    alignItems: 'center',
+    ':focus': {
+      outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+    },
+  };
+});
 CloseHandle.displayName = 'StyledCloseHandle';
 
-export const Label = styled<SharedStylePropsArgT>('div', ({$theme}) => ({
+export const Label = styled<SharedStylePropsArgT>('div', ({ $theme }) => ({
   flexGrow: 1,
   ...$theme.typography.font300,
 }));

package/dnd-list/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 {STATE_CHANGE_TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 
 export type StateT = {
   items: Array<React.Node>,
@@ -19,7 +19,7 @@ export type StateChangeTypeT = $Values<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) => StateT;
 
 export type OverridesT = {
@@ -42,7 +42,7 @@ export type ListPropsT = {|
   /** Items (labels) to be rendered */
   items: Array<React.Node>,
   /** Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case) */
-  onChange: ({oldIndex: number, newIndex: number}) => mixed,
+  onChange: ({ oldIndex: number, newIndex: number }) => mixed,
   overrides?: OverridesT,
 |};
 
@@ -69,10 +69,10 @@ export type StatefulListPropsT = {|
 // Props for stateful container
 export type StatefulComponentContainerPropsT = $Diff<
   StatefulListPropsT,
-  {children: ChildrenT},
+  { children: ChildrenT }
 > & {
   initialState?: StateT,
-  children: (props: $Diff<ListPropsT, {children: ChildrenT}>) => React.Node,
+  children: (props: $Diff<ListPropsT, { children: ChildrenT }>) => React.Node,
 };
 
 export type SharedStylePropsArgT = {

package/drawer/close-icon.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import Delete from '../icon/delete.js';
 
-export function CloseIcon(props: {title: string}) {
+export function CloseIcon(props: { title: string }) {
   return <Delete size="inherit" color="inherit" title={props.title} />;
 }
 

package/drawer/constants.js.flow

@@ -5,8 +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 type { AnchorT, AnchorPropT, SizeT, SizePropT } from './types.js';
 
-export const SIZE = {
+export const SIZE: { [key: SizeT]: SizePropT } = {
   default: 'default',
   full: 'full',
   auto: 'auto',
@@ -24,7 +25,7 @@ export const CLOSE_SOURCE = {
   escape: 'escape',
 };
 
-export const ANCHOR = {
+export const ANCHOR: { [key: AnchorT]: AnchorPropT } = {
   left: 'left',
   right: 'right',
   top: 'top',

package/drawer/drawer.js

@@ -205,7 +205,7 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       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;

package/drawer/drawer.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, CLOSE_SOURCE, ANCHOR} from './constants.js';
+import { LocaleContext } from '../locale/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Layer } from '../layer/index.js';
+import { SIZE, CLOSE_SOURCE, ANCHOR } from './constants.js';
 import {
   StyledRoot,
   StyledBackdrop,
@@ -22,7 +22,7 @@ import {
   StyledClose,
   Hidden,
 } from './styled-components.js';
-import {CloseIcon} from './close-icon.js';
+import { CloseIcon } from './close-icon.js';
 
 import type {
   DrawerPropsT,
@@ -31,7 +31,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 Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   static defaultProps: $Shape<DrawerPropsT> = {
@@ -50,7 +50,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   animateStartTimer: ?AnimationFrameID;
   lastFocus: ?HTMLElement = null;
   lastMountNodeOverflowStyle: ?string = null;
-  _refs: {[string]: ElementRefT} = {};
+  _refs: { [string]: ElementRefT } = {};
 
   state = {
     isVisible: false,
@@ -59,7 +59,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   };
 
   componentDidMount() {
-    this.setState({mounted: true});
+    this.setState({ mounted: true });
   }
 
   componentWillUnmount() {
@@ -68,7 +68,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   }
 
   componentDidUpdate(prevProps: DrawerPropsT, prevState: DrawerStateT) {
-    const {isOpen} = this.props;
+    const { isOpen } = this.props;
     if (
       // If isOpen is changing *or* we just mounted and drawer should be open
       isOpen !== prevProps.isOpen ||
@@ -84,13 +84,13 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
 
   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 });
     }
   };
 
@@ -114,12 +114,12 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   }
 
   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);
   }
 
@@ -171,7 +171,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
 
     // eslint-disable-next-line cup/no-undef
     this.animateStartTimer = requestAnimationFrame(() => {
-      this.setState({isVisible: true});
+      this.setState({ isVisible: true });
     });
   }
 
@@ -195,8 +195,8 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
     });
   };
 
-  getSharedProps(): $Diff<SharedStylePropsArgT, {children?: React.Node}> {
-    const {animate, isOpen, size, closeable, anchor, showBackdrop} = this.props;
+  getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
+    const { animate, isOpen, size, closeable, anchor, showBackdrop } = this.props;
     return {
       $animating: animate,
       $isVisible: this.state.isVisible,
@@ -210,7 +210,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   }
 
   getChildren() {
-    const {children} = this.props;
+    const { children } = this.props;
     return typeof children === 'function' ? children() : children;
   }
 
@@ -222,7 +222,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   }
 
   renderDrawer(renderedContent: React.Node) {
-    const {overrides = {}, closeable, autoFocus} = this.props;
+    const { overrides = {}, closeable, autoFocus } = this.props;
 
     const {
       Root: RootOverride,
@@ -233,25 +233,19 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
     } = overrides;
 
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
-    const [Backdrop, backdropProps] = getOverrides(
-      BackdropOverride,
-      StyledBackdrop,
-    );
+    const [Backdrop, backdropProps] = getOverrides(BackdropOverride, StyledBackdrop);
     const [DrawerContainer, drawerContainerProps] = getOverrides(
       DrawerContainerOverride,
-      StyledDrawerContainer,
-    );
-    const [DrawerBody, drawerBodyProps] = getOverrides(
-      DrawerBodyOverride,
-      StyledDrawerBody,
+      StyledDrawerContainer
     );
+    const [DrawerBody, drawerBodyProps] = getOverrides(DrawerBodyOverride, StyledDrawerBody);
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
 
     const sharedProps = this.getSharedProps();
 
     return (
       <LocaleContext.Consumer>
-        {locale => {
+        {(locale) => {
           return (
             <FocusLock
               // Allow focus to escape when UI is within an iframe
@@ -260,17 +254,8 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
               autoFocus={autoFocus}
               noFocusGuards={true}
             >
-              <Root
-                data-baseweb="drawer"
-                ref={this.getRef('Root')}
-                {...sharedProps}
-                {...rootProps}
-              >
-                <Backdrop
-                  onClick={this.onBackdropClick}
-                  {...sharedProps}
-                  {...backdropProps}
-                />
+              <Root data-baseweb="drawer" ref={this.getRef('Root')} {...sharedProps} {...rootProps}>
+                <Backdrop onClick={this.onBackdropClick} {...sharedProps} {...backdropProps} />
                 <DrawerContainer {...sharedProps} {...drawerContainerProps}>
                   <DrawerBody {...sharedProps} {...drawerBodyProps}>
                     {renderedContent}
@@ -297,11 +282,9 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
   }
 
   render() {
-    const mountedAndOpen =
-      this.state.mounted && (this.props.isOpen || this.state.isVisible);
+    const mountedAndOpen = this.state.mounted && (this.props.isOpen || this.state.isVisible);
 
-    const renderedContent =
-      mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+    const renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
 
     if (renderedContent) {
       if (mountedAndOpen) {

package/drawer/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 Drawer} from './drawer.js';
-export {SIZE, SIZE_DIMENSION, ANCHOR, CLOSE_SOURCE} from './constants.js';
+export { default as Drawer } from './drawer.js';
+export { SIZE, SIZE_DIMENSION, ANCHOR, CLOSE_SOURCE } from './constants.js';
 export * from './styled-components.js';
 export type * from './types.js';