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

package/a11y/a11y.js.flow

@@ -10,16 +10,16 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 
-import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
-import {styled} from '../styles/index.js';
-import {ThemeContext} from '../styles/theme-provider.js';
+import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
+import { styled } from '../styles/index.js';
+import { ThemeContext } from '../styles/theme-provider.js';
 
-import type {ViolationPropsT} from './types.js';
+import type { ViolationPropsT } from './types.js';
 
 function validateNode(node) {
   return new Promise((resolve, reject) => {
-    axe.run(node, {reporter: 'v2'}, (error, results) => {
+    axe.run(node, { reporter: 'v2' }, (error, results) => {
       if (error) reject(error);
       resolve(results.violations);
     });
@@ -40,9 +40,9 @@ function segmentViolationsByNode(violations) {
   return Object.entries(nodes);
 }
 
-const ViolationContainer = styled<{$top: string, $left: string}>(
+const ViolationContainer = styled<{ $top: string, $left: string }>(
   'div',
-  ({$theme, $top, $left}) => {
+  ({ $theme, $top, $left }) => {
     return {
       backgroundColor: $theme.colors.mono100,
       boxShadow: $theme.lighting.shadow600,
@@ -51,11 +51,11 @@ const ViolationContainer = styled<{$top: string, $left: string}>(
       top: $top,
       left: $left,
     };
-  },
+  }
 );
 
 function Violation(props: ViolationPropsT) {
-  const [offset, setOffset] = React.useState({top: 0, left: 0});
+  const [offset, setOffset] = React.useState({ top: 0, left: 0 });
   const [anchor, setAnchor] = React.useState(null);
   const [popper, setPopper] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
@@ -69,10 +69,7 @@ function Violation(props: ViolationPropsT) {
     if (node) {
       setAnchor(node);
 
-      node.setAttribute(
-        'style',
-        `border: solid 1px ${theme.colors.negative300};`,
-      );
+      node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
 
       node.addEventListener('mouseenter', handleMouseEnter);
       node.addEventListener('mouseleave', handleMouseLeave);
@@ -111,7 +108,7 @@ function Violation(props: ViolationPropsT) {
   );
 }
 
-export default function A11y(props: {children: React.Node}) {
+export default function A11y(props: { children: React.Node }) {
   const [violations, setViolations] = React.useState([]);
   const [idleID, setIdleID] = React.useState(null);
   const child = React.useRef(null);

package/a11y/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as Unstable_A11y} from './a11y.js';
+export { default as Unstable_A11y } from './a11y.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/a11y/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-type NodeT = {target: string};
-type ViolationT = {description: string, nodes: NodeT};
+type NodeT = { target: string };
+type ViolationT = { description: string, nodes: NodeT };
 
 export type ViolationPropsT = {
   target: string,

package/accordion/accordion.js.flow

@@ -7,19 +7,12 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Root as StyledRoot} from './styled-components.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
-import type {
-  AccordionPropsT,
-  AccordionStateT,
-  StateChangeTypeT,
-} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Root as StyledRoot } from './styled-components.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import type { AccordionPropsT, AccordionStateT, StateChangeTypeT } from './types.js';
 
-export default class Accordion extends React.Component<
-  AccordionPropsT,
-  AccordionStateT,
-> {
+export default class Accordion extends React.Component<AccordionPropsT, AccordionStateT> {
   static defaultProps: $Shape<AccordionPropsT> = {
     accordion: true,
     disabled: false,
@@ -41,7 +34,7 @@ export default class Accordion extends React.Component<
   //flowlint-next-line unclear-type:off
   onPanelChange(key: React.Key, onChange: () => {}, ...args: Array<any>) {
     let activeKeys = this.state.expanded;
-    const {accordion} = this.props;
+    const { accordion } = this.props;
     if (accordion) {
       activeKeys = activeKeys[0] === key ? [] : [key];
     } else {
@@ -55,29 +48,22 @@ export default class Accordion extends React.Component<
         activeKeys.push(key);
       }
     }
-    const newState = {expanded: activeKeys};
+    const newState = { expanded: activeKeys };
     this.internalSetState(STATE_CHANGE_TYPE.expand, newState);
     // Call individual panel's onChange handler
     if (typeof onChange === 'function') onChange(...args);
   }
 
   internalSetState(type: StateChangeTypeT, changes: AccordionStateT) {
-    const {stateReducer, onChange} = this.props;
+    const { stateReducer, onChange } = this.props;
     const newState = stateReducer(type, changes, this.state);
     this.setState(newState);
     typeof onChange === 'function' && onChange(newState);
   }
 
   getItems() {
-    const {expanded} = this.state;
-    const {
-      accordion,
-      disabled,
-      children,
-      renderPanelContent,
-      renderAll,
-      overrides,
-    } = this.props;
+    const { expanded } = this.state;
+    const { accordion, disabled, children, renderPanelContent, renderAll, overrides } = this.props;
     // flowlint-next-line unclear-type:off
     return React.Children.map(children, (child: any, index) => {
       if (!child) return;
@@ -98,8 +84,7 @@ export default class Accordion extends React.Component<
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
-        onChange: (...args) =>
-          this.onPanelChange(key, child.props.onChange, ...args),
+        onChange: (...args) => this.onPanelChange(key, child.props.onChange, ...args),
       };
       return React.cloneElement(child, props);
     });
@@ -109,14 +94,14 @@ export default class Accordion extends React.Component<
     // TODO(v11)
     if (__DEV__ && this.props.renderPanelContent) {
       console.warn(
-        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.',
+        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.'
       );
     }
   }
 
   render() {
-    const {overrides = {}} = this.props;
-    const {Root: RootOverride} = overrides;
+    const { overrides = {} } = this.props;
+    const { Root: RootOverride } = overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     return (
       <Root

package/accordion/index.js.flow

@@ -5,13 +5,13 @@ 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 Accordion} from './accordion.js';
-export {default as Panel} from './panel.js';
-export {default as StatefulPanel} from './stateful-panel.js';
-export {default as StatefulPanelContainer} from './stateful-panel-container.js';
-export {default as StatelessAccordion} from './stateless-accordion.js';
+export { default as Accordion } from './accordion.js';
+export { default as Panel } from './panel.js';
+export { default as StatefulPanel } from './stateful-panel.js';
+export { default as StatefulPanelContainer } from './stateful-panel-container.js';
+export { default as StatelessAccordion } from './stateless-accordion.js';
 // Constants
-export {STATE_CHANGE_TYPE} from './constants.js';
+export { STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export {
   Root as StyledRoot,

package/accordion/panel.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {LocaleContext} from '../locale/index.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   PanelContainer as StyledPanelContainer,
   Header as StyledHeader,
@@ -16,9 +16,9 @@ import {
   ToggleIconGroup as StyledToggleIconGroup,
   ContentAnimationContainer as StyledContentAnimationContainer,
 } from './styled-components.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-import type {PanelPropsT} from './types.js';
+import type { PanelPropsT } from './types.js';
 
 const Panel = ({
   'aria-controls': ariaControls,
@@ -42,28 +42,28 @@ const Panel = ({
   const handleFocus = React.useCallback(
     (event: SyntheticEvent<>) => {
       if (isFocusVisible(event)) {
-        setLocalState({...localState, isFocusVisible: true});
+        setLocalState({ ...localState, isFocusVisible: true });
       }
     },
-    [localState],
+    [localState]
   );
   const handleBlur = React.useCallback(
     (event: SyntheticEvent<>) => {
       if (localState.isFocusVisible) {
-        setLocalState({...localState, isFocusVisible: false});
+        setLocalState({ ...localState, isFocusVisible: false });
       }
     },
-    [localState],
+    [localState]
   );
   const handleClick = React.useCallback(
     (e: Event) => {
       if (disabled) {
         return;
       }
-      typeof onChange === 'function' && onChange({expanded: !expanded});
+      typeof onChange === 'function' && onChange({ expanded: !expanded });
       typeof onClick === 'function' && onClick(e);
     },
-    [expanded, disabled, onChange, onClick],
+    [expanded, disabled, onChange, onClick]
   );
   const handleKeyDown = React.useCallback(
     (e: KeyboardEvent) => {
@@ -75,14 +75,14 @@ const Panel = ({
       const SPACE = 32;
 
       if (e.keyCode === ENTER || e.keyCode === SPACE) {
-        typeof onChange === 'function' && onChange({expanded: !expanded});
+        typeof onChange === 'function' && onChange({ expanded: !expanded });
         if (e.keyCode === SPACE) {
           e.preventDefault(); // prevent jumping scroll when using Space
         }
       }
       typeof onKeyDown === 'function' && onKeyDown(e);
     },
-    [expanded, disabled, onChange, onKeyDown],
+    [expanded, disabled, onChange, onKeyDown]
   );
   // flowlint-next-line unclear-type:off
   const _animateRef = React.useRef<any>(null);
@@ -108,13 +108,7 @@ const Panel = ({
         });
       }
     }
-  }, [
-    _animateRef.current,
-    expanded,
-    localState.elementHeight,
-    localState.expanded,
-    setLocalState,
-  ]);
+  }, [_animateRef.current, expanded, localState.elementHeight, localState.expanded, setLocalState]);
 
   const contentHeight = React.useMemo(() => {
     // When closing, the first render will re-query the content element for the new
@@ -132,12 +126,7 @@ const Panel = ({
     }
     // When no longer animating, set the height to auto to accommodate dynamic nested components.
     return localState.animationInProgress ? localState.elementHeight : 'auto';
-  }, [
-    expanded,
-    localState.expanded,
-    localState.animationInProgress,
-    localState.elementHeight,
-  ]);
+  }, [expanded, localState.expanded, localState.animationInProgress, localState.elementHeight]);
 
   const sharedProps = {
     $disabled: disabled,
@@ -156,23 +145,20 @@ const Panel = ({
 
   const [PanelContainer, panelContainerProps] = getOverrides(
     PanelContainerOverride,
-    StyledPanelContainer,
+    StyledPanelContainer
   );
   const [Header, headerProps] = getOverrides(HeaderOverride, StyledHeader);
   const [Content, contentProps] = getOverrides(ContentOverride, StyledContent);
   const [ContentAnimationContainer, contentAnimationProps] = getOverrides(
     ContentAnimationContainerOverride,
-    StyledContentAnimationContainer,
+    StyledContentAnimationContainer
   );
   const [ToggleIconGroup, toggleIconGroupProps] = getOverrides(
     ToggleIconGroupOverride,
-    StyledToggleIconGroup,
+    StyledToggleIconGroup
   );
 
-  const [ToggleIcon, toggleIconProps] = getOverrides(
-    ToggleIconOverride,
-    StyledToggleIcon,
-  );
+  const [ToggleIcon, toggleIconProps] = getOverrides(ToggleIconOverride, StyledToggleIcon);
 
   return (
     <LocaleContext.Consumer>
@@ -185,7 +171,7 @@ const Panel = ({
             aria-disabled={disabled || null}
             {...sharedProps}
             {...headerProps}
-            {...(ariaControls ? {'aria-controls': ariaControls} : {})}
+            {...(ariaControls ? { 'aria-controls': ariaControls } : {})}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             onFocus={forkFocus(headerProps, handleFocus)}
@@ -194,11 +180,7 @@ const Panel = ({
             {title}
             <ToggleIcon
               viewBox="0 0 24 24"
-              title={
-                localState.expanded
-                  ? locale.accordion.collapse
-                  : locale.accordion.expand
-              }
+              title={localState.expanded ? locale.accordion.collapse : locale.accordion.expand}
               size={16}
               {...toggleIconProps}
               {...sharedProps}
@@ -223,7 +205,7 @@ const Panel = ({
             $height={contentHeight}
             onTransitionEnd={() => {
               if (localState.animationInProgress) {
-                setLocalState({...localState, animationInProgress: false});
+                setLocalState({ ...localState, animationInProgress: false });
               }
             }}
           >
@@ -231,7 +213,7 @@ const Panel = ({
               ref={_animateRef}
               {...sharedProps}
               {...contentProps}
-              {...(ariaControls ? {id: ariaControls} : {})}
+              {...(ariaControls ? { id: ariaControls } : {})}
             >
               {localState.expanded ||
               renderAll ||

package/accordion/stateful-panel-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 import type {
   PanelStateT,
   StatefulPanelContainerPropsT,
@@ -17,12 +17,9 @@ import type {
 
 const defaultStateReducer: PanelStateReducerT = (type, nextState) => nextState;
 
-class StatefulPanelContainer extends React.Component<
-  StatefulPanelContainerPropsT,
-  PanelStateT,
-> {
+class StatefulPanelContainer extends React.Component<StatefulPanelContainerPropsT, PanelStateT> {
   static defaultProps = {
-    initialState: {expanded: false},
+    initialState: { expanded: false },
     stateReducer: defaultStateReducer,
     onChange: () => {},
   };
@@ -34,7 +31,7 @@ class StatefulPanelContainer extends React.Component<
 
   onChange: OnChangeHandlerT = () => {
     if (typeof this.props.onChange === 'function') {
-      this.props.onChange({expanded: !this.state.expanded});
+      this.props.onChange({ expanded: !this.state.expanded });
     }
     this.internalSetState(STATE_CHANGE_TYPE.expand, {
       expanded: !this.state.expanded,
@@ -42,14 +39,12 @@ class StatefulPanelContainer extends React.Component<
   };
 
   internalSetState(type: StateChangeTypeT, changes: PanelStateT) {
-    const {stateReducer} = this.props;
-    this.setState((prevState) =>
-      stateReducer ? stateReducer(type, changes, prevState) : changes,
-    );
+    const { stateReducer } = this.props;
+    this.setState((prevState) => (stateReducer ? stateReducer(type, changes, prevState) : changes));
   }
 
   render() {
-    const {children, initialState, stateReducer, ...restProps} = this.props;
+    const { children, initialState, stateReducer, ...restProps } = this.props;
 
     return this.props.children({
       ...restProps,

package/accordion/stateful-panel.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-panel-container.js';
 import Panel from './panel.js';
-import type {StatefulPanelPropsT} from './types.js';
+import type { StatefulPanelPropsT } from './types.js';
 
 export default function StatefulPanel(props: StatefulPanelPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
       {(componentProps) => <Panel {...componentProps}>{children}</Panel>}

package/accordion/stateless-accordion.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Root as StyledRoot} from './styled-components.js';
-import type {StatelessAccordionPropsT} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Root as StyledRoot } from './styled-components.js';
+import type { StatelessAccordionPropsT } from './types.js';
 
 function StatelessAccordion({
   accordion = true,
@@ -20,7 +20,7 @@ function StatelessAccordion({
   renderAll,
   renderPanelContent,
 }: StatelessAccordionPropsT) {
-  const {Root: RootOverrides, ...PanelOverrides} = overrides;
+  const { Root: RootOverrides, ...PanelOverrides } = overrides;
   const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
   return (
     <Root data-baseweb="accordion" {...rootProps}>
@@ -48,7 +48,7 @@ function StatelessAccordion({
                       next = [...expanded, key];
                     }
                   }
-                  onChange({key, expanded: next});
+                  onChange({ key, expanded: next });
                 }
               : onChange,
           overrides: child.props.overrides || PanelOverrides,

package/accordion/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 {getSvgStyles} from '../icon/styled-components.js';
-import type {SharedStylePropsArgT} from './types.js';
+import { styled } from '../styles/index.js';
+import { getSvgStyles } from '../icon/styled-components.js';
+import type { SharedStylePropsArgT } from './types.js';
 
 /**
  * Main component container element
@@ -24,7 +24,7 @@ export const Root = styled('ul', {
 export const PanelContainer = styled<SharedStylePropsArgT>('li', (props) => {
   const {
     $expanded,
-    $theme: {colors},
+    $theme: { colors },
   } = props;
   return {
     listStyleType: 'none',
@@ -39,7 +39,7 @@ export const Header = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $disabled,
     $isFocusVisible,
-    $theme: {colors, sizing, typography},
+    $theme: { colors, sizing, typography },
   } = props;
   return {
     ...typography.font350,
@@ -66,7 +66,7 @@ export const Header = styled<SharedStylePropsArgT>('div', (props) => {
 });
 
 export const ToggleIcon = styled<SharedStylePropsArgT>('svg', (props) => {
-  const {$theme, $disabled, $color} = props;
+  const { $theme, $disabled, $color } = props;
   return {
     ...getSvgStyles(props),
     flexShrink: 0,
@@ -76,7 +76,7 @@ export const ToggleIcon = styled<SharedStylePropsArgT>('svg', (props) => {
 });
 
 export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', (props) => {
-  const {$theme, $expanded} = props;
+  const { $theme, $expanded } = props;
   return {
     transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)',
     transformOrigin: 'center',
@@ -88,7 +88,7 @@ export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', (props) => {
 
 export const Content = styled<SharedStylePropsArgT>('div', (props) => {
   const {
-    $theme: {animation, colors, sizing, typography},
+    $theme: { animation, colors, sizing, typography },
     $expanded,
   } = props;
   return {
@@ -115,11 +115,11 @@ export const Content = styled<SharedStylePropsArgT>('div', (props) => {
 });
 
 export const ContentAnimationContainer = styled<
-  {$height: string | number} & SharedStylePropsArgT,
+  { $height: string | number } & SharedStylePropsArgT
 >('div', (props) => {
   const {
     $height,
-    $theme: {animation},
+    $theme: { animation },
   } = props;
   return {
     height: `${$height}`,

package/accordion/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 AccordionStateT = {
   expanded: Array<React.Key>,
@@ -23,13 +23,13 @@ export type StateChangeTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: AccordionStateT,
-  currentState: AccordionStateT,
+  currentState: AccordionStateT
 ) => AccordionStateT;
 
 export type PanelStateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: PanelStateT,
-  currentState: PanelStateT,
+  currentState: PanelStateT
 ) => PanelStateT;
 
 export type AccordionOverridesT = {
@@ -51,7 +51,7 @@ export type PanelOverridesT = {
   ContentAnimationContainer?: OverrideT,
 };
 
-export type OnChangeHandlerT = ({expanded: boolean}) => mixed;
+export type OnChangeHandlerT = ({ expanded: boolean }) => mixed;
 
 export type AccordionOnChangeHandlerT = ({
   expanded: Array<React.Key>,
@@ -167,14 +167,12 @@ type SharedStatefulPanelContainerPropsT = {
   onChange?: OnChangeHandlerT,
   stateReducer?: PanelStateReducerT,
 };
-export type StatefulPanelContainerPropsT =
-  SharedStatefulPanelContainerPropsT & {
-    children: (props: $Diff<PanelPropsT, {children: React.Node}>) => React.Node,
-  };
+export type StatefulPanelContainerPropsT = SharedStatefulPanelContainerPropsT & {
+  children: (props: $Diff<PanelPropsT, { children: React.Node }>) => React.Node,
+};
 
 // Props for stateful panel
-export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT &
-  SharedPanelPropsT;
+export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT & SharedPanelPropsT;
 
 export type SharedStylePropsArgT = {
   $color?: string,