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

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',
@@ -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:
@@ -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
     );
   });
 
@@ -340,15 +321,10 @@ function InternalTab({
     if (window.ResizeObserver) {
       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,12 +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
@@ -385,7 +360,7 @@ function InternalTab({
         setFocusVisible(false);
       }
     },
-    [focusVisible],
+    [focusVisible]
   );
 
   // Keyboard focus management
@@ -396,7 +371,7 @@ function InternalTab({
 
     // 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
@@ -455,11 +430,11 @@ function InternalTab({
       {...restProps}
       {...TabProps}
       onClick={(event) => {
-        if (typeof onChange === 'function') onChange({activeKey: key});
+        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
@@ -486,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,10 +8,10 @@ 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>;
@@ -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,

package/tabs-motion/utils.js.flow

@@ -8,18 +8,14 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {ORIENTATION, FILL} from './constants.js';
+import { ORIENTATION, FILL } from './constants.js';
 
-import type {FillT, OrientationT} from './types.js';
+import type { FillT, OrientationT } from './types.js';
 
-export const getTabId = (uid: string, key: React.Key) =>
-  `tabs-${uid}-tab-${key}`;
-export const getTabPanelId = (uid: string, key: React.Key) =>
-  `tabs-${uid}-tabpanel-${key}`;
-export const isHorizontal = (orientation: OrientationT) =>
-  orientation === ORIENTATION.horizontal;
-export const isVertical = (orientation: OrientationT) =>
-  orientation === ORIENTATION.vertical;
+export const getTabId = (uid: string, key: React.Key) => `tabs-${uid}-tab-${key}`;
+export const getTabPanelId = (uid: string, key: React.Key) => `tabs-${uid}-tabpanel-${key}`;
+export const isHorizontal = (orientation: OrientationT) => orientation === ORIENTATION.horizontal;
+export const isVertical = (orientation: OrientationT) => orientation === ORIENTATION.vertical;
 export const isRTL = (direction: string) => direction === 'rtl';
 export const isIntrinsic = (fill: FillT) => fill === FILL.intrinsic;
 export const isFixed = (fill: FillT) => fill === FILL.fixed;

package/tag/index.js.flow

@@ -5,14 +5,14 @@ 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 Tag} from './tag.js';
+export { default as Tag } from './tag.js';
 // Styled elements
 export {
   Root as StyledRoot,
   Action as StyledAction,
   Text as StyledText,
 } from './styled-components.js';
-export {KIND, VARIANT, SIZE} from './constants.js';
+export { KIND, VARIANT, SIZE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/tag/styled-components.js.flow

@@ -8,10 +8,10 @@ LICENSE file in the root directory of this source tree.
 import tint from 'polished/lib/color/tint.js';
 import shade from 'polished/lib/color/shade.js';
 
-import {styled, type ThemeT} from '../styles/index.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
-import type {SharedPropsArgT} from './types.js';
-import {colors as colorTokens} from '../tokens/index.js';
+import { styled, type ThemeT } from '../styles/index.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
+import type { SharedPropsArgT } from './types.js';
+import { colors as colorTokens } from '../tokens/index.js';
 
 export function customOnRamp(color?: string, unit?: string) {
   switch (unit) {
@@ -49,8 +49,7 @@ const COLOR_STATE = {
 };
 
 // Probably best to bake this into the theme once we hit our next major.
-const pick = (theme, light, dark) =>
-  theme.name && theme.name.includes('dark') ? dark : light;
+const pick = (theme, light, dark) => (theme.name && theme.name.includes('dark') ? dark : light);
 
 const neutralColorStates = {
   [COLOR_STATE.disabled]: (theme, color) => ({
@@ -258,26 +257,17 @@ const getColorStateFromProps = (props) => {
 
 export const Action = styled<SharedPropsArgT>(
   'span',
-  (props: SharedPropsArgT & {$theme: ThemeT}) => {
-    const {$theme, $disabled, $size = SIZE.small} = props;
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
+    const { $theme, $disabled, $size = SIZE.small } = props;
     const bottomRadiusDir: string =
-      $theme.direction === 'rtl'
-        ? 'borderBottomLeftRadius'
-        : 'borderBottomRightRadius';
+      $theme.direction === 'rtl' ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
     const topRadiusDir: string =
-      $theme.direction === 'rtl'
-        ? 'borderTopLeftRadius'
-        : 'borderTopRightRadius';
-    const marginDir: string =
-      $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      $theme.direction === 'rtl' ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+    const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
     return ({
       alignItems: 'center',
-      [bottomRadiusDir]: $theme.borders.useRoundedCorners
-        ? $theme.borders.radius400
-        : 0,
-      [topRadiusDir]: $theme.borders.useRoundedCorners
-        ? $theme.borders.radius400
-        : 0,
+      [bottomRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
+      [topRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
       cursor: $disabled ? 'not-allowed' : 'pointer',
       display: 'flex',
       [marginDir]: {
@@ -290,12 +280,12 @@ export const Action = styled<SharedPropsArgT>(
       transitionDuration: 'background-color',
       transitionTimingFunction: $theme.animation.easeOutCurve,
     }: {});
-  },
+  }
 );
 
 export const StartEnhancerContainer = styled<SharedPropsArgT>(
   'div',
-  ({$theme, $size = SIZE.small}: SharedPropsArgT & {$theme: ThemeT}) => {
+  ({ $theme, $size = SIZE.small }: SharedPropsArgT & { $theme: ThemeT }) => {
     let paddingMagnitude = $theme.sizing.scale300;
     if ($size === SIZE.medium) {
       paddingMagnitude = $theme.sizing.scale400;
@@ -303,21 +293,20 @@ export const StartEnhancerContainer = styled<SharedPropsArgT>(
       paddingMagnitude = $theme.sizing.scale600;
     }
 
-    const paddingDir: string =
-      $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+    const paddingDir: string = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
 
     return {
       alignItems: 'center',
       display: 'flex',
       [paddingDir]: paddingMagnitude,
     };
-  },
+  }
 );
 
 export const Text = styled<SharedPropsArgT>(
   'span',
-  (props: SharedPropsArgT & {$theme: ThemeT}) => {
-    const {$theme} = props;
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
+    const { $theme } = props;
 
     return {
       overflow: 'hidden',
@@ -326,12 +315,12 @@ export const Text = styled<SharedPropsArgT>(
       maxWidth: props.$theme.sizing.scale3200,
       order: $theme.direction === 'rtl' ? 1 : 0,
     };
-  },
+  }
 );
 
 export const Root = styled<SharedPropsArgT>(
   'span',
-  (props: SharedPropsArgT & {$theme: ThemeT}) => {
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
     const {
       $theme,
       $kind = KIND.primary,
@@ -350,9 +339,10 @@ export const Root = styled<SharedPropsArgT>(
       [SIZE.large]: $theme.sizing.scale600,
     }[$size];
     const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
-    const {color, backgroundColor, borderColor} = colorMap[$kind][
-      getColorStateFromProps(props)
-    ]($theme, $color);
+    const { color, backgroundColor, borderColor } = colorMap[$kind][getColorStateFromProps(props)](
+      $theme,
+      $color
+    );
     return ({
       ...{
         [SIZE.small]: $theme.typography.LabelSmall,
@@ -403,7 +393,7 @@ export const Root = styled<SharedPropsArgT>(
               boxShadow: `inset 0px 0px 100px ${pick(
                 $theme,
                 `rgba(0, 0, 0, 0.08)`,
-                `rgba(255, 255, 255, 0.2)`,
+                `rgba(255, 255, 255, 0.2)`
               )}`,
             },
       ':focus':
@@ -412,14 +402,12 @@ export const Root = styled<SharedPropsArgT>(
           : {
               boxShadow: $isFocusVisible
                 ? `0 0 0 3px ${
-                    $kind === KIND.accent
-                      ? $theme.colors.primaryA
-                      : $theme.colors.accent
+                    $kind === KIND.accent ? $theme.colors.primaryA : $theme.colors.accent
                   }`
                 : 'none',
             },
     }: {});
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/tag/tag.js.flow

@@ -6,24 +6,22 @@ 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 {
   Action as StyledAction,
   Root as StyledRoot,
   StartEnhancerContainer as StyledStartEnhancerContainer,
   Text as StyledText,
 } from './styled-components.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
-import {getTextFromChildren} from './utils.js';
-import type {PropsT, SharedPropsArgT} from './types.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
+import { getTextFromChildren } from './utils.js';
+import type { PropsT, SharedPropsArgT } from './types.js';
 import DeleteIcon from '../icon/delete.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
 // Delete requires modifying Delete's viewbox to prevent visual regressions.
-const ModifiedViewBoxDeleteIcon = (props) => (
-  <DeleteIcon viewBox="5 5 13.186 13.186" {...props} />
-);
+const ModifiedViewBoxDeleteIcon = (props) => <DeleteIcon viewBox="5 5 13.186 13.186" {...props} />;
 
 const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const {
@@ -79,11 +77,11 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const [Action, actionProps] = getOverrides(overrides.Action, StyledAction);
   const [ActionIcon, actionIconProps] = getOverrides(
     overrides.ActionIcon,
-    ModifiedViewBoxDeleteIcon,
+    ModifiedViewBoxDeleteIcon
   );
   const [StartEnhancerContainer, startEnhancerContainerProps] = getOverrides(
     overrides.StartEnhancerContainer,
-    StyledStartEnhancerContainer,
+    StyledStartEnhancerContainer
   );
   const [Text, textProps] = getOverrides(overrides.Text, StyledText);
   const clickable = typeof onClick === 'function';
@@ -132,9 +130,7 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
       data-baseweb="tag"
       aria-label={
         isButton && closeable
-          ? `${
-              typeof children === 'string' ? `${children}, ` : ''
-            }close by backspace`
+          ? `${typeof children === 'string' ? `${children}, ` : ''}close by backspace`
           : null
       }
       aria-disabled={disabled ? true : null}

package/tag/types.js.flow

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
 
 export const TagKind = Object.freeze(KIND);
 export const TagVariant = Object.freeze(VARIANT);

package/tag/utils.js.flow

@@ -15,16 +15,14 @@ const JOINABLE_TYPES = new Set(['string', 'number']);
 // text from the child of a node to use as an attribute.
 export function getTextFromChildren(children: ?React$Node) {
   const childList = React.Children.toArray(children).filter(
-    (child) => child !== null && child !== undefined,
+    (child) => child !== null && child !== undefined
   );
 
   if (!childList.length) {
     return null;
   }
 
-  const isJoinable = childList.every((child) =>
-    JOINABLE_TYPES.has(typeof child),
-  );
+  const isJoinable = childList.every((child) => JOINABLE_TYPES.has(typeof child));
 
   if (!isJoinable) {
     return null;

package/textarea/constants.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 {SIZE, ADJOINED, STATE_CHANGE_TYPE} from '../input/constants.js';
+export { SIZE, ADJOINED, STATE_CHANGE_TYPE } from '../input/constants.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/textarea/index.js.flow

@@ -5,12 +5,12 @@ 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 Textarea} from './textarea.js';
-export {default as StatefulTextarea} from './stateful-textarea.js';
-export {default as StatefulContainer} from './stateful-container.js';
+export { default as Textarea } from './textarea.js';
+export { default as StatefulTextarea } from './stateful-textarea.js';
+export { default as StatefulContainer } from './stateful-container.js';
 // Styled elements
-export {StyledTextareaContainer, StyledTextarea} from './styled-components.js';
-export {STATE_CHANGE_TYPE, SIZE} from './constants.js';
+export { StyledTextareaContainer, StyledTextarea } from './styled-components.js';
+export { STATE_CHANGE_TYPE, SIZE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/textarea/stateful-container.js.flow

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import StatefulContainer from '../input/stateful-container.js';
+
 export default StatefulContainer;
 
 declare var __DEV__: boolean;

package/textarea/stateful-textarea.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
 import Textarea from './textarea.js';
-import type {StatefulTextareaPropsT, TextareaPropsT} from './types.js';
+import type { StatefulTextareaPropsT, TextareaPropsT } from './types.js';
 
 export default function StatefulTextarea(props: StatefulTextareaPropsT) {
   return (

package/textarea/styled-components.js.flow

@@ -5,34 +5,34 @@ 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, type ThemeT} from '../styles/index.js';
+import { styled, type ThemeT } from '../styles/index.js';
 import {
   getInputStyles,
   getInputContainerStyles,
   getRootStyles,
 } from '../input/styled-components.js';
-import type {SharedStylePropsT} from './types.js';
+import type { SharedStylePropsT } from './types.js';
 
 export const StyledTextAreaRoot = styled<SharedStylePropsT>(
   'div',
-  (props: SharedStylePropsT & {$theme: ThemeT}) => {
-    return getRootStyles({$positive: false, ...props, $hasIconTrailing: false});
-  },
+  (props: SharedStylePropsT & { $theme: ThemeT }) => {
+    return getRootStyles({ $positive: false, ...props, $hasIconTrailing: false });
+  }
 );
 
 export const StyledTextareaContainer = styled<SharedStylePropsT>(
   'div',
-  (props: SharedStylePropsT & {$theme: ThemeT}) => ({
-    ...getInputContainerStyles({$positive: false, ...props}),
-  }),
+  (props: SharedStylePropsT & { $theme: ThemeT }) => ({
+    ...getInputContainerStyles({ $positive: false, ...props }),
+  })
 );
 
 export const StyledTextarea = styled<SharedStylePropsT>(
   'textarea',
-  (props: SharedStylePropsT & {$theme: ThemeT}) => ({
+  (props: SharedStylePropsT & { $theme: ThemeT }) => ({
     ...getInputStyles(props),
     resize: 'none',
-  }),
+  })
 );
 
 declare var __DEV__: boolean;

package/textarea/textarea.js.flow

@@ -6,16 +6,16 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {TextareaPropsT} from './types.js';
-import {mergeOverrides, getOverrides} from '../helpers/overrides.js';
-import {BaseInput, SIZE, CUSTOM_INPUT_TYPE} from '../input/index.js';
+import type { TextareaPropsT } from './types.js';
+import { mergeOverrides, getOverrides } from '../helpers/overrides.js';
+import { BaseInput, SIZE, CUSTOM_INPUT_TYPE } from '../input/index.js';
 import {
   StyledTextAreaRoot,
   StyledTextarea,
   StyledTextareaContainer,
 } from './styled-components.js';
 
-class Textarea extends React.Component<TextareaPropsT, {isFocused: boolean}> {
+class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
@@ -39,24 +39,24 @@ class Textarea extends React.Component<TextareaPropsT, {isFocused: boolean}> {
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({isFocused: true});
+    this.setState({ isFocused: true });
     this.props.onFocus(e);
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({isFocused: false});
+    this.setState({ isFocused: false });
     this.props.onBlur(e);
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledTextAreaRoot);
     const inputOverrides = mergeOverrides(
       {
-        Input: {component: StyledTextarea},
-        InputContainer: {component: StyledTextareaContainer},
+        Input: { component: StyledTextarea },
+        InputContainer: { component: StyledTextareaContainer },
       },
-      overrides,
+      overrides
     );
 
     return (

package/textarea/types.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import type {BaseInputPropsT, StateReducerT, StateT} from '../input/types.js';
-import {ADJOINED, SIZE} from '../input/constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { BaseInputPropsT, StateReducerT, StateT } from '../input/types.js';
+import { ADJOINED, SIZE } from '../input/constants.js';
 
 type SyntheticTextareaEvent = SyntheticEvent<HTMLTextAreaElement>;
 

package/themes/dark-theme/borders.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import sharedBorders from '../shared/borders.js';
 import deepMerge from '../../utils/deep-merge.js';
-import type {BordersT} from '../types.js';
+import type { BordersT } from '../types.js';
 
 // Override border colors for the dark theme
 const borders: BordersT = deepMerge({}, sharedBorders, {