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

package/tabs/index.js.flow

@@ -5,11 +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 Tabs} from './tabs.js';
-export {default as StatefulTabs} from './stateful-tabs.js';
-export {default as Tab} from './tab.js';
+export { default as Tabs } from './tabs.js';
+export { default as StatefulTabs } from './stateful-tabs.js';
+export { default as Tab } from './tab.js';
 // Constants
-export {ORIENTATION, STATE_CHANGE_TYPE} from './constants.js';
+export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export {
   Root as StyledRoot,

package/tabs/stateful-tabs.js.flow

@@ -7,17 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import Tabs from './tabs.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
-import type {
-  StatefulTabsPropsT,
-  StatefulTabsStateT,
-  StateChangeTypeT,
-} from './types.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import type { StatefulTabsPropsT, StatefulTabsStateT, StateChangeTypeT } from './types.js';
 
-export default class StatefulTabs extends React.Component<
-  StatefulTabsPropsT,
-  StatefulTabsStateT,
-> {
+export default class StatefulTabs extends React.Component<StatefulTabsPropsT, StatefulTabsStateT> {
   static defaultProps: $Shape<StatefulTabsPropsT> = {
     disabled: false,
     onChange: () => {},
@@ -34,33 +27,24 @@ export default class StatefulTabs extends React.Component<
   };
 
   internalSetState(type: StateChangeTypeT, changes: StatefulTabsStateT) {
-    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);
   }
 
   getInitialKey() {
-    const {initialState, children} = this.props;
+    const { initialState, children } = this.props;
     if (initialState && initialState.activeKey) {
       return initialState.activeKey;
     } else {
-      return React.Children.map(
-        children,
-        (child, index) => child.key || String(index),
-      )[0];
+      return React.Children.map(children, (child, index) => child.key || String(index))[0];
     }
   }
 
   render() {
-    const {initialState, stateReducer, ...restProps} = this.props;
-    return (
-      <Tabs
-        {...restProps}
-        activeKey={this.state.activeKey}
-        onChange={this.onTabChange}
-      />
-    );
+    const { initialState, stateReducer, ...restProps } = this.props;
+    return <Tabs {...restProps} activeKey={this.state.activeKey} onChange={this.onTabChange} />;
   }
 }
 

package/tabs/styled-components.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
-import {styled} from '../styles/index.js';
-import {ORIENTATION} from './constants.js';
-import type {SharedStylePropsArgT} from './types.js';
+import { styled } from '../styles/index.js';
+import { ORIENTATION } from './constants.js';
+import type { SharedStylePropsArgT } from './types.js';
 
 // $FlowFixMe https://github.com/facebook/flow/issues/7745
 export const Root = styled<SharedStylePropsArgT>('div', (props) => {
-  const {$orientation} = props;
+  const { $orientation } = props;
   return {
     display: 'flex',
     flexDirection: $orientation === ORIENTATION.vertical ? 'row' : 'column',
@@ -25,7 +25,7 @@ export const Tab = styled<SharedStylePropsArgT>('div', (props) => {
     $active,
     $orientation,
     $isFocusVisible,
-    $theme: {colors, sizing, typography},
+    $theme: { colors, sizing, typography },
   } = props;
   let style = {
     ...typography.font200,
@@ -64,7 +64,7 @@ export const Tab = styled<SharedStylePropsArgT>('div', (props) => {
 export const TabBar = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $orientation,
-    $theme: {colors, sizing},
+    $theme: { colors, sizing },
   } = props;
   return {
     display: 'flex',
@@ -79,7 +79,7 @@ export const TabBar = styled<SharedStylePropsArgT>('div', (props) => {
 export const TabContent = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $active,
-    $theme: {sizing, typography},
+    $theme: { sizing, typography },
   } = props;
   return {
     ...typography.font300,

package/tabs/tab.js.flow

@@ -6,16 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Tab as StyledTab} from './styled-components.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Tab as StyledTab } from './styled-components.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-import type {TabPropsT, SharedStylePropsArgT} from './types.js';
+import type { TabPropsT, SharedStylePropsArgT } from './types.js';
 
-class TabComponent extends React.Component<
-  TabPropsT,
-  {isFocusVisible: boolean},
-> {
+class TabComponent extends React.Component<TabPropsT, { isFocusVisible: boolean }> {
   static defaultProps = {
     disabled: false,
     expanded: false,
@@ -25,22 +22,22 @@ class TabComponent extends React.Component<
     title: '',
   };
 
-  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 });
     }
   };
 
   onClick = (e: Event) => {
-    const {disabled, onSelect, onClick} = this.props;
+    const { disabled, onSelect, onClick } = this.props;
     if (disabled) {
       return;
     }
@@ -50,7 +47,7 @@ class TabComponent extends React.Component<
   };
 
   onKeyDown = (e: KeyboardEvent) => {
-    const {disabled, onSelect, onKeyDown} = this.props;
+    const { disabled, onSelect, onKeyDown } = this.props;
     if (disabled) {
       return;
     }
@@ -64,7 +61,7 @@ class TabComponent extends React.Component<
   };
 
   getSharedProps(): SharedStylePropsArgT {
-    const {disabled, active, $orientation} = this.props;
+    const { disabled, active, $orientation } = this.props;
     return {
       $disabled: disabled,
       $active: active,
@@ -73,9 +70,9 @@ class TabComponent extends React.Component<
   }
 
   render() {
-    const {active, disabled, id, overrides = {}, children} = this.props;
+    const { active, disabled, id, overrides = {}, children } = this.props;
     const sharedProps = this.getSharedProps();
-    const {Tab: TabOverride} = overrides;
+    const { Tab: TabOverride } = overrides;
     const [Tab, tabProps] = getOverrides(TabOverride, StyledTab);
 
     return (

package/tabs/tabs.js.flow

@@ -6,14 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import {
   Root as StyledRoot,
   TabBar as StyledTabBar,
   TabContent as StyledTabContent,
 } from './styled-components.js';
-import type {TabsPropsT, SharedStylePropsArgT} from './types.js';
-import {ORIENTATION} from './constants.js';
+import type { TabsPropsT, SharedStylePropsArgT } from './types.js';
+import { ORIENTATION } from './constants.js';
 
 export default class Tabs extends React.Component<TabsPropsT> {
   static defaultProps: $Shape<TabsPropsT> = {
@@ -24,19 +24,13 @@ export default class Tabs extends React.Component<TabsPropsT> {
     renderAll: false,
   };
 
-  onChange({activeKey}: {activeKey: string}) {
-    const {onChange} = this.props;
-    typeof onChange === 'function' && onChange({activeKey});
+  onChange({ activeKey }: { activeKey: string }) {
+    const { onChange } = this.props;
+    typeof onChange === 'function' && onChange({ activeKey });
   }
 
   getTabs() {
-    const {
-      activeKey,
-      disabled,
-      orientation,
-      children,
-      overrides = {},
-    } = this.props;
+    const { activeKey, disabled, orientation, children, overrides = {} } = this.props;
     // flowlint-next-line unclear-type:off
     const tabs = React.Children.map(children, (child: any, index) => {
       if (!child) return;
@@ -48,7 +42,7 @@ export default class Tabs extends React.Component<TabsPropsT> {
         active: key === activeKey,
         disabled: disabled || child.props.disabled,
         $orientation: orientation,
-        onSelect: () => this.onChange({activeKey: key}),
+        onSelect: () => this.onChange({ activeKey: key }),
         children: child.props.title,
         overrides: mergeOverrides(overrides, child.props.overrides || {}),
       });
@@ -58,19 +52,9 @@ export default class Tabs extends React.Component<TabsPropsT> {
   }
 
   getPanels() {
-    const {
-      activeKey,
-      disabled,
-      orientation,
-      children,
-      overrides = {},
-      renderAll,
-    } = this.props;
-    const {TabContent: TabContentOverride} = overrides;
-    const [TabContent, tabContentProps] = getOverrides(
-      TabContentOverride,
-      StyledTabContent,
-    );
+    const { activeKey, disabled, orientation, children, overrides = {}, renderAll } = this.props;
+    const { TabContent: TabContentOverride } = overrides;
+    const [TabContent, tabContentProps] = getOverrides(TabContentOverride, StyledTabContent);
     // flowlint-next-line unclear-type:off
     const tabs = React.Children.map(children, (child: any, index) => {
       if (!child) return;
@@ -87,12 +71,7 @@ export default class Tabs extends React.Component<TabsPropsT> {
       };
 
       return (
-        <TabContent
-          role="tabpanel"
-          {...sharedProps}
-          {...tabContentProps}
-          {...props}
-        >
+        <TabContent role="tabpanel" {...sharedProps} {...tabContentProps} {...props}>
           {renderAll ? child.props.children : null}
           {isActive && !renderAll ? child.props.children : null}
         </TabContent>
@@ -102,7 +81,7 @@ export default class Tabs extends React.Component<TabsPropsT> {
   }
 
   getSharedProps(): SharedStylePropsArgT {
-    const {disabled, orientation} = this.props;
+    const { disabled, orientation } = this.props;
     return {
       $disabled: disabled,
       $orientation: orientation,
@@ -111,8 +90,8 @@ export default class Tabs extends React.Component<TabsPropsT> {
 
   render() {
     const sharedProps = this.getSharedProps();
-    const {overrides = {}} = this.props;
-    const {Root: RootOverride, TabBar: TabBarOverride} = overrides;
+    const { overrides = {} } = this.props;
+    const { Root: RootOverride, TabBar: TabBarOverride } = overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     const [TabBar, tabBarProps] = getOverrides(TabBarOverride, StyledTabBar);
 

package/tabs/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 {ORIENTATION, STATE_CHANGE_TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 
 export type SharedStylePropsArgT = {
   $disabled?: boolean,
@@ -26,7 +26,7 @@ export type StateChangeTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: StatefulTabsStateT,
-  currentState: StatefulTabsStateT,
+  currentState: StatefulTabsStateT
 ) => StatefulTabsStateT;
 
 export type TabsOverridesT = {
@@ -40,7 +40,7 @@ export type TabOverridesT = {
   Tab?: OverrideT,
 };
 
-export type OnChangeHandlerT = ({activeKey: React.Key}) => mixed;
+export type OnChangeHandlerT = ({ activeKey: React.Key }) => mixed;
 
 export type TabsPropsT = {
   /** An array of Tab components. */
@@ -59,7 +59,7 @@ export type TabsPropsT = {
   overrides?: TabsOverridesT,
 };
 
-export type StatefulTabsPropsT = $Diff<TabsPropsT, {activeKey: React.Key}> & {
+export type StatefulTabsPropsT = $Diff<TabsPropsT, { activeKey: React.Key }> & {
   /**  Initial state of the component */
   initialState?: StatefulTabsStateT,
   /**  A state change handler. */

package/tabs-motion/stateful-tabs.js.flow

@@ -8,33 +8,23 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {Tabs} from './tabs.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import { Tabs } from './tabs.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 
-import type {
-  StatefulTabsPropsT,
-  StatefulTabsStateT,
-  StatefulTabsReducerT,
-} from './types.js';
+import type { StatefulTabsPropsT, StatefulTabsStateT, StatefulTabsReducerT } from './types.js';
 
-const getInitialState = (
-  children: React.Node,
-  initialState?: StatefulTabsStateT,
-) => {
+const getInitialState = (children: React.Node, initialState?: StatefulTabsStateT) => {
   if (initialState && initialState.activeKey) {
     return initialState;
   } else {
-    const firstKey = React.Children.map(
-      children,
-      (child, index) => child.key || String(index),
-    )[0];
-    return {activeKey: firstKey};
+    const firstKey = React.Children.map(children, (child, index) => child.key || String(index))[0];
+    return { activeKey: firstKey };
   }
 };
 
 const defaultStateReducer: StatefulTabsReducerT = (state, action) => {
   if (action.type === STATE_CHANGE_TYPE.change) {
-    return {activeKey: action.payload};
+    return { activeKey: action.payload };
   }
   return state;
 };
@@ -47,13 +37,10 @@ export function StatefulTabs(props: StatefulTabsPropsT) {
     onChange,
     ...restProps
   } = props;
-  const [state, dispatch] = React.useReducer(
-    stateReducer,
-    getInitialState(children, initialState),
-  );
+  const [state, dispatch] = React.useReducer(stateReducer, getInitialState(children, initialState));
   const handleChange = React.useCallback((params) => {
-    const {activeKey} = params;
-    dispatch({type: STATE_CHANGE_TYPE.change, payload: activeKey});
+    const { activeKey } = params;
+    dispatch({ type: STATE_CHANGE_TYPE.change, payload: activeKey });
     if (typeof onChange === 'function') onChange(params);
   }, []);
   return (

package/tabs-motion/styled-components.js.flow

@@ -7,22 +7,16 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
-import {ORIENTATION, FILL} from './constants.js';
-import {
-  isHorizontal,
-  isVertical,
-  isRTL,
-  isIntrinsic,
-  isFixed,
-} from './utils.js';
+import { styled } from '../styles/index.js';
+import { ORIENTATION, FILL } from './constants.js';
+import { isHorizontal, isVertical, isRTL, isIntrinsic, isFixed } from './utils.js';
 
-import type {StyleObject} from 'styletron-standard';
-import type {OrientationT, FillT} from './types.js';
+import type { StyleObject } from 'styletron-standard';
+import type { OrientationT, FillT } from './types.js';
 
-export const StyledRoot = styled<{$orientation?: OrientationT}>(
+export const StyledRoot = styled<{ $orientation?: OrientationT }>(
   'div',
-  ({$theme, $orientation = ORIENTATION.horizontal}) => {
+  ({ $theme, $orientation = ORIENTATION.horizontal }) => {
     const style: StyleObject = {
       // Creates a stacking context so we can use z-index on the TabHighlight
       // without affecting anything outside of this element.
@@ -32,48 +26,45 @@ export const StyledRoot = styled<{$orientation?: OrientationT}>(
       style.display = 'flex';
     }
     return style;
-  },
+  }
 );
 
 export const StyledTabList = styled<{
   $orientation?: OrientationT,
   $fill?: FillT,
-}>(
-  'div',
-  ({$theme, $fill = FILL.intrinsic, $orientation = ORIENTATION.horizontal}) => {
-    const style: StyleObject = {
-      position: 'relative',
-      display: 'flex',
-      flexWrap: 'nowrap',
-    };
-    if (isHorizontal($orientation)) {
-      style.flexDirection = 'row';
-      style.paddingBottom = '5px';
-      style.marginBottom = '-5px';
+}>('div', ({ $theme, $fill = FILL.intrinsic, $orientation = ORIENTATION.horizontal }) => {
+  const style: StyleObject = {
+    position: 'relative',
+    display: 'flex',
+    flexWrap: 'nowrap',
+  };
+  if (isHorizontal($orientation)) {
+    style.flexDirection = 'row';
+    style.paddingBottom = '5px';
+    style.marginBottom = '-5px';
+  } else {
+    style.flexDirection = 'column';
+    if (isRTL($theme.direction)) {
+      style.paddingLeft = '5px';
+      style.marginLeft = '-5px';
     } else {
-      style.flexDirection = 'column';
-      if (isRTL($theme.direction)) {
-        style.paddingLeft = '5px';
-        style.marginLeft = '-5px';
-      } else {
-        style.paddingRight = '5px';
-        style.marginRight = '-5px';
-      }
+      style.paddingRight = '5px';
+      style.marginRight = '-5px';
     }
-    if (isIntrinsic($fill)) {
-      style['::-webkit-scrollbar'] = {display: 'none'};
-      // $FlowFixMe: property missing in StyleObject
-      style['-ms-overflow-style'] = 'none';
-      style.scrollbarWidth = 'none';
-      if (isHorizontal($orientation)) {
-        style.overflowX = 'scroll';
-      } else {
-        style.overflowY = 'scroll';
-      }
+  }
+  if (isIntrinsic($fill)) {
+    style['::-webkit-scrollbar'] = { display: 'none' };
+    // $FlowFixMe: property missing in StyleObject
+    style['-ms-overflow-style'] = 'none';
+    style.scrollbarWidth = 'none';
+    if (isHorizontal($orientation)) {
+      style.overflowX = 'scroll';
+    } else {
+      style.overflowY = 'scroll';
     }
-    return style;
-  },
-);
+  }
+  return style;
+});
 
 export const StyledTab = styled<{
   $orientation?: OrientationT,
@@ -143,12 +134,12 @@ export const StyledTab = styled<{
       style.justifyContent = 'flex-end';
     }
     return style;
-  },
+  }
 );
 
-export const StyledArtworkContainer = styled<{$orientation?: OrientationT}>(
+export const StyledArtworkContainer = styled<{ $orientation?: OrientationT }>(
   'div',
-  ({$theme, $orientation = ORIENTATION.horizontal}) => {
+  ({ $theme, $orientation = ORIENTATION.horizontal }) => {
     const style: StyleObject = {
       display: 'flex',
     };
@@ -158,12 +149,12 @@ export const StyledArtworkContainer = styled<{$orientation?: OrientationT}>(
       style.marginRight = $theme.sizing.scale300;
     }
     return style;
-  },
+  }
 );
 
-export const StyledTabBorder = styled<{$orientation?: OrientationT}>(
+export const StyledTabBorder = styled<{ $orientation?: OrientationT }>(
   'div',
-  ({$theme, $orientation = ORIENTATION.horizontal}) => {
+  ({ $theme, $orientation = ORIENTATION.horizontal }) => {
     const style: StyleObject = {
       backgroundColor: $theme.colors.borderOpaque,
       position: 'relative',
@@ -174,7 +165,7 @@ export const StyledTabBorder = styled<{$orientation?: OrientationT}>(
       style.width = '5px';
     }
     return style;
-  },
+  }
 );
 
 export const StyledTabHighlight = styled<{
@@ -218,25 +209,22 @@ export const StyledTabHighlight = styled<{
       style.transitionTimingFunction = $theme.animation.easeInOutQuinticCurve;
     }
     return style;
-  },
+  }
 );
 
-export const StyledTabPanel = styled<{$pad: boolean}>(
-  'div',
-  ({$theme, $pad = true}) => {
-    const style: StyleObject = {
-      flexGrow: 1, // only used in vertical orientation
-      outline: 'none',
-    };
-    if ($pad) {
-      style.paddingTop = $theme.sizing.scale600;
-      style.paddingRight = $theme.sizing.scale600;
-      style.paddingBottom = $theme.sizing.scale600;
-      style.paddingLeft = $theme.sizing.scale600;
-    }
-    return style;
-  },
-);
+export const StyledTabPanel = styled<{ $pad: boolean }>('div', ({ $theme, $pad = true }) => {
+  const style: StyleObject = {
+    flexGrow: 1, // only used in vertical orientation
+    outline: 'none',
+  };
+  if ($pad) {
+    style.paddingTop = $theme.sizing.scale600;
+    style.paddingRight = $theme.sizing.scale600;
+    style.paddingBottom = $theme.sizing.scale600;
+    style.paddingLeft = $theme.sizing.scale600;
+  }
+  return style;
+});
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/tabs-motion/tab.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import type {TabPropsT} from './types.js';
+import type { TabPropsT } from './types.js';
 
 export function Tab(props: TabPropsT) {
   return null;