baseui 10.10.0 → 10.11.0

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,20 +24,14 @@ 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;
-    // eslint-disable-next-line flowtype/no-weak-types
+    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,20 +52,10 @@ 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,
-    );
-    // eslint-disable-next-line flowtype/no-weak-types
+    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;
       const key = child.key || String(index);
@@ -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,11 +40,11 @@ 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. */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   children: React.ChildrenArray<React.Element<any>>,
   /**  Key of the the tab to be selected. */
   activeKey: React.Key,
@@ -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 handleChange = React.useCallback(params => {
-    const {activeKey} = params;
-    dispatch({type: STATE_CHANGE_TYPE.change, payload: activeKey});
+  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 });
     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;

package/tabs-motion/tabs.js.flow

@@ -10,11 +10,11 @@ LICENSE file in the root directory of this source tree.
 /* global window */
 
 import * as React from 'react';
-import {useUID} from 'react-uid';
-import {useStyletron} from '../styles/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
-import {ORIENTATION, FILL} from './constants.js';
+import { useUID } from 'react-uid';
+import { useStyletron } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+import { ORIENTATION, FILL } from './constants.js';
 import {
   StyledRoot,
   StyledTabList,
@@ -24,15 +24,9 @@ import {
   StyledTabBorder,
   StyledTabPanel,
 } from './styled-components.js';
-import {
-  getTabId,
-  getTabPanelId,
-  isVertical,
-  isHorizontal,
-  isRTL,
-} from './utils.js';
+import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils.js';
 
-import type {TabsPropsT} from './types.js';
+import type { TabsPropsT } from './types.js';
 
 const KEYBOARD_ACTION = {
   next: 'next',
@@ -65,7 +59,7 @@ const getLayoutParams = (el, orientation) => {
   }
 };
 
-const scrollParentToCentreTarget = targetNode => {
+const scrollParentToCentreTarget = (targetNode) => {
   const {
     x: parentX,
     y: parentY,
@@ -85,7 +79,7 @@ const scrollParentToCentreTarget = targetNode => {
     y: childY - parentY + childHeight / 2,
   };
   // aim for the centre of the child to be the centre of the parent
-  const {scrollLeft, scrollTop} = targetNode.parentNode;
+  const { scrollLeft, scrollTop } = targetNode.parentNode;
   const target = {
     x: scrollLeft + childCentre.x - parentWidth / 2,
     y: scrollTop + childCentre.y - parentHeight / 2,
@@ -119,14 +113,8 @@ export function Tabs({
   } = overrides;
   const [Root, RootProps] = getOverrides(RootOverrides, StyledRoot);
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
-  const [TabHighlight, TabHighlightProps] = getOverrides(
-    TabHighlightOverrides,
-    StyledTabHighlight,
-  );
-  const [TabBorder, TabBorderProps] = getOverrides(
-    TabBorderOverrides,
-    StyledTabBorder,
-  );
+  const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
+  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
 
   // Count key updates
   // We disable a few things until after first mount:
@@ -191,7 +179,7 @@ export function Tabs({
   // TODO(WPT-6473): move to universal keycode aliases
   const [, theme] = useStyletron();
   const parseKeyDown = React.useCallback(
-    event => {
+    (event) => {
       if (isHorizontal(orientation)) {
         if (isRTL(theme.direction)) {
           switch (event.keyCode) {
@@ -223,7 +211,7 @@ export function Tabs({
         }
       }
     },
-    [orientation, theme.direction],
+    [orientation, theme.direction]
   );
 
   return (
@@ -309,14 +297,7 @@ function InternalTab({
 }) {
   const key = childKey || String(childIndex);
   const isActive = key == activeKey;
-  const {
-    artwork: Artwork,
-    overrides = {},
-    tabRef,
-    onClick,
-    title,
-    ...restProps
-  } = props;
+  const { artwork: Artwork, overrides = {}, tabRef, onClick, title, ...restProps } = props;
 
   // A way to share our internal activeTabRef via the "tabRef" prop.
   const ref = React.useRef();
@@ -326,11 +307,11 @@ function InternalTab({
 
   // Track tab dimensions in a ref after each render
   // This is used to compare params when the resize observer fires
-  const tabLayoutParams = React.useRef({length: 0, distance: 0});
+  const tabLayoutParams = React.useRef({ length: 0, distance: 0 });
   React.useEffect(() => {
     tabLayoutParams.current = getLayoutParams(
       isActive ? activeTabRef.current : ref.current,
-      orientation,
+      orientation
     );
   });
 
@@ -338,17 +319,12 @@ function InternalTab({
   // placement changes for a tab so we listen for resize updates in each tab.
   React.useEffect(() => {
     if (window.ResizeObserver) {
-      const observer = new window.ResizeObserver(entries => {
+      const observer = new window.ResizeObserver((entries) => {
         if (entries[0] && entries[0].target) {
-          const tabLayoutParamsAfterResize = getLayoutParams(
-            entries[0].target,
-            orientation,
-          );
+          const tabLayoutParamsAfterResize = getLayoutParams(entries[0].target, orientation);
           if (
-            tabLayoutParamsAfterResize.length !==
-              tabLayoutParams.current.length ||
-            tabLayoutParamsAfterResize.distance !==
-              tabLayoutParams.current.distance
+            tabLayoutParamsAfterResize.length !== tabLayoutParams.current.length ||
+            tabLayoutParamsAfterResize.distance !== tabLayoutParams.current.distance
           ) {
             updateHighlight();
           }
@@ -364,14 +340,11 @@ function InternalTab({
   React.useEffect(updateHighlight, [title]);
 
   // Collect overrides
-  const {
-    Tab: TabOverrides,
-    ArtworkContainer: ArtworkContainerOverrides,
-  } = overrides;
+  const { Tab: TabOverrides, ArtworkContainer: ArtworkContainerOverrides } = overrides;
   const [Tab, TabProps] = getOverrides(TabOverrides, StyledTab);
   const [ArtworkContainer, ArtworkContainerProps] = getOverrides(
     ArtworkContainerOverrides,
-    StyledArtworkContainer,
+    StyledArtworkContainer
   );
 
   // Keyboard focus styling
@@ -387,18 +360,18 @@ function InternalTab({
         setFocusVisible(false);
       }
     },
-    [focusVisible],
+    [focusVisible]
   );
 
   // Keyboard focus management
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = React.useCallback((event) => {
     // WAI-ARIA 1.1
     // https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
     // We use directional keys to iterate focus through Tabs.
 
     // Find all tabs eligible for focus
     const availableTabs = [...event.target.parentNode.childNodes].filter(
-      node => !node.disabled && node.getAttribute('role') === 'tab',
+      (node) => !node.disabled && node.getAttribute('role') === 'tab'
     );
 
     // Exit early if there are no other tabs available
@@ -456,12 +429,12 @@ function InternalTab({
       {...sharedStylingProps}
       {...restProps}
       {...TabProps}
-      onClick={event => {
-        if (typeof onChange === 'function') onChange({activeKey: key});
+      onClick={(event) => {
+        if (typeof onChange === 'function') onChange({ activeKey: key });
         if (typeof onClick === 'function') onClick(event);
       }}
-      onFocus={forkFocus({...restProps, ...TabProps}, handleFocus)}
-      onBlur={forkBlur({...restProps, ...TabProps}, handleBlur)}
+      onFocus={forkFocus({ ...restProps, ...TabProps }, handleFocus)}
+      onBlur={forkBlur({ ...restProps, ...TabProps }, handleBlur)}
     >
       {Artwork ? (
         <ArtworkContainer
@@ -488,12 +461,9 @@ function InternalTabPanel({
 }) {
   const key = childKey || String(childIndex);
   const isActive = key == activeKey;
-  const {overrides = {}, children} = props;
-  const {TabPanel: TabPanelOverrides} = overrides;
-  const [TabPanel, TabPanelProps] = getOverrides(
-    TabPanelOverrides,
-    StyledTabPanel,
-  );
+  const { overrides = {}, children } = props;
+  const { TabPanel: TabPanelOverrides } = overrides;
+  const [TabPanel, TabPanelProps] = getOverrides(TabPanelOverrides, StyledTabPanel);
   return (
     <TabPanel
       data-baseweb="tab-panel"

package/tabs-motion/types.js.flow

@@ -8,27 +8,27 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {ORIENTATION, FILL, STATE_CHANGE_TYPE} from './constants.js';
+import { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants.js';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import type {IconPropsT} from '../icon/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { IconPropsT } from '../icon/types.js';
 
 export type OrientationT = $Values<typeof ORIENTATION>;
 export type FillT = $Values<typeof FILL>;
 export type StateChangeT = $Values<typeof STATE_CHANGE_TYPE>;
 
-export type TabsOverridesT = {|
+export type TabsOverridesT = {
   Root?: OverrideT,
   TabList?: OverrideT,
   TabHighlight?: OverrideT,
   TabBorder?: OverrideT,
-|};
+};
 
-export type TabOverridesT = {|
+export type TabOverridesT = {
   Tab?: OverrideT,
   ArtworkContainer?: OverrideT,
   TabPanel?: OverrideT,
-|};
+};
 
 export type StatefulTabsStateT = {|
   activeKey: React.Key,
@@ -41,10 +41,10 @@ export type StatefulTabsActionT = {|
 
 export type StatefulTabsReducerT = (
   state: StatefulTabsStateT,
-  action: StatefulTabsActionT,
+  action: StatefulTabsActionT
 ) => StatefulTabsStateT;
 
-export type onChangeT = (params: {activeKey: React.Key}) => void;
+export type onChangeT = (params: { activeKey: React.Key }) => void;
 
 export type TabsPropsT = {|
   children: React.Node,