baseui 10.9.2 → 10.11.1

package/esm/utils/deep-merge.js

@@ -7,7 +7,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-/* eslint-disable flowtype/no-weak-types */
+/* flowlint unclear-type:off */
 export default function deepMerge(target) {
   target = target || {};
   var len = arguments.length <= 1 ? 0 : arguments.length - 1;
@@ -34,7 +34,7 @@ export default function deepMerge(target) {
 
   return target;
 }
-/* eslint-enable flowtype/no-weak-types */
+/* flowlint unclear-type:error */
 
 /* eslint-disable-next-line flowtype/no-weak-types */
 

package/esm/utils/deprecated-component.js

@@ -6,11 +6,11 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import * as React from 'react'; // eslint-disable-next-line flowtype/no-weak-types
+import * as React from 'react'; // flowlint-next-line unclear-type:off
 
 export default function (Component, displayName) {
-  // eslint-disable-next-line flowtype/no-weak-types
-  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+  // flowlint-next-line unclear-type:off
+  var DeprecatedComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (process.env.NODE_ENV !== "production") {
       console.warn("We have stabilized the ".concat(displayName, " component, so you can drop the \"Unstable_\" prefix from your imports. We will remove the \"Unstable_\" exports soon, so please make these changes as soon as possible!"));
     }
@@ -19,4 +19,6 @@ export default function (Component, displayName) {
       ref: ref
     }));
   });
+  DeprecatedComponent.displayName = 'DeprecatedComponent';
+  return DeprecatedComponent;
 }

package/file-uploader/file-uploader.js.flow

@@ -9,12 +9,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import Dropzone from 'react-dropzone';
 
-import {LocaleContext} from '../locale/index.js';
-import {useStyletron} from '../styles/index.js';
-import {Button, KIND, SHAPE, SIZE as BUTTON_SIZE} from '../button/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ProgressBar} from '../progress-bar/index.js';
-import {StyledSpinnerNext, SIZE as SPINNER_SIZE} from '../spinner/index.js';
+import { LocaleContext } from '../locale/index.js';
+import { useStyletron } from '../styles/index.js';
+import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ProgressBar } from '../progress-bar/index.js';
+import { StyledSpinnerNext, SIZE as SPINNER_SIZE } from '../spinner/index.js';
 
 import {
   StyledRoot,
@@ -24,7 +24,7 @@ import {
   StyledErrorMessage,
   StyledHiddenInput,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 function prependStyleProps(styleProps) {
   return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
@@ -34,51 +34,38 @@ function prependStyleProps(styleProps) {
 }
 
 function FileUploader(props: PropsT) {
-  const {overrides = {}} = props;
+  const { overrides = {} } = props;
   const [, theme] = useStyletron();
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
   const [FileDragAndDrop, fileDragAndDropProps] = getOverrides(
     overrides.FileDragAndDrop,
-    StyledFileDragAndDrop,
+    StyledFileDragAndDrop
   );
   const [ContentMessage, contentMessageProps] = getOverrides(
     overrides.ContentMessage,
-    StyledContentMessage,
+    StyledContentMessage
   );
 
   const [ContentSeparator, contentSeparatorProps] = getOverrides(
     overrides.ContentSeparator,
-    StyledContentSeparator,
+    StyledContentSeparator
   );
   const [ErrorMessage, errorMessageProps] = getOverrides(
     overrides.ErrorMessage,
-    StyledErrorMessage,
-  );
-  const [HiddenInput, hiddenInputProps] = getOverrides(
-    overrides.HiddenInput,
-    StyledHiddenInput,
-  );
-  const [ButtonComponent, buttonProps] = getOverrides(
-    overrides.ButtonComponent,
-    Button,
+    StyledErrorMessage
   );
+  const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
+  const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
 
-  const [SpinnerComponent, spinnerProps] = getOverrides(
-    overrides.Spinner,
-    StyledSpinnerNext,
-  );
+  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, StyledSpinnerNext);
 
-  const afterFileDrop = !!(
-    props.progressAmount ||
-    props.progressMessage ||
-    props.errorMessage
-  );
+  const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
 
   return (
     <Dropzone {...props} disabled={props.disabled || afterFileDrop}>
-      {renderProps => {
-        const {getRootProps, getInputProps, open, ...styleProps} = renderProps;
+      {(renderProps) => {
+        const { getRootProps, getInputProps, open, ...styleProps } = renderProps;
 
         const prefixedStyledProps = prependStyleProps({
           ...styleProps,
@@ -90,18 +77,14 @@ function FileUploader(props: PropsT) {
           onClick?: (SyntheticEvent<HTMLElement>) => void,
           tabIndex: string,
         } = {
-          ...(props.disableClick ? {onClick: evt => evt.preventDefault()} : {}),
+          ...(props.disableClick ? { onClick: (evt) => evt.preventDefault() } : {}),
           tabIndex: '-1',
         };
 
         return (
           <LocaleContext.Consumer>
-            {locale => (
-              <Root
-                data-baseweb="file-uploader"
-                {...prefixedStyledProps}
-                {...rootProps}
-              >
+            {(locale) => (
+              <Root data-baseweb="file-uploader" {...prefixedStyledProps} {...rootProps}>
                 <FileDragAndDrop
                   {...getRootProps(getRootPropsArgs)}
                   {...prefixedStyledProps}
@@ -109,17 +92,11 @@ function FileUploader(props: PropsT) {
                 >
                   {!afterFileDrop && (
                     <React.Fragment>
-                      <ContentMessage
-                        {...prefixedStyledProps}
-                        {...contentMessageProps}
-                      >
+                      <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
                         {locale.fileuploader.dropFilesToUpload}
                       </ContentMessage>
                       {/* TODO(v11): ContentSeparator potentially can be removed in the next major version */}
-                      <ContentSeparator
-                        {...prefixedStyledProps}
-                        {...contentSeparatorProps}
-                      >
+                      <ContentSeparator {...prefixedStyledProps} {...contentSeparatorProps}>
                         {locale.fileuploader.or}
                       </ContentSeparator>
                       <ButtonComponent
@@ -131,7 +108,7 @@ function FileUploader(props: PropsT) {
                         role="button"
                         overrides={{
                           BaseButton: {
-                            style: ({$theme}) => ({
+                            style: ({ $theme }) => ({
                               marginTop: $theme.sizing.scale500,
                             }),
                           },
@@ -157,7 +134,7 @@ function FileUploader(props: PropsT) {
                           value={props.progressAmount}
                           overrides={{
                             BarProgress: {
-                              style: ({$theme}) => ({
+                              style: ({ $theme }) => ({
                                 backgroundColor: props.errorMessage
                                   ? $theme.colors.negative
                                   : $theme.colors.accent,
@@ -168,23 +145,16 @@ function FileUploader(props: PropsT) {
                       ) : props.errorMessage ? null : (
                         <SpinnerComponent
                           $size={SPINNER_SIZE.medium}
-                          $style={{marginBottom: theme.sizing.scale300}}
+                          $style={{ marginBottom: theme.sizing.scale300 }}
                           {...spinnerProps}
                         />
                       )}
-                      {(props.errorMessage || props.progressMessage) &&
-                      props.errorMessage ? (
-                        <ErrorMessage
-                          {...prefixedStyledProps}
-                          {...errorMessageProps}
-                        >
+                      {(props.errorMessage || props.progressMessage) && props.errorMessage ? (
+                        <ErrorMessage {...prefixedStyledProps} {...errorMessageProps}>
                           {props.errorMessage}
                         </ErrorMessage>
                       ) : (
-                        <ContentMessage
-                          {...prefixedStyledProps}
-                          {...contentMessageProps}
-                        >
+                        <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
                           {props.progressMessage}
                         </ContentMessage>
                       )}
@@ -209,7 +179,7 @@ function FileUploader(props: PropsT) {
                           aria-describedby={props['aria-describedby']}
                           overrides={{
                             BaseButton: {
-                              style: ({$theme}) => ({
+                              style: ({ $theme }) => ({
                                 color: $theme.colors.contentNegative,
                               }),
                             },

package/file-uploader/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as FileUploader} from './file-uploader.js';
+export { default as FileUploader } from './file-uploader.js';
 
 // Styled elements
 export {

package/file-uploader/styled-components.js.flow

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import type {StylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StylePropsT } from './types.js';
 
-export const StyledFileDragAndDrop = styled<StylePropsT>('div', props => {
+export const StyledFileDragAndDrop = styled<StylePropsT>('div', (props) => {
   const borderColor = props.$isDragActive
     ? props.$theme.colors.borderAccent
     : props.$theme.colors.fileUploaderBorderColorDefault;
@@ -51,11 +51,9 @@ export const StyledFileDragAndDrop = styled<StylePropsT>('div', props => {
 
 export const StyledContentMessage = styled<StylePropsT>(
   'div',
-  ({$theme, $afterFileDrop, $isDragActive}) =>
+  ({ $theme, $afterFileDrop, $isDragActive }) =>
     ({
-      ...($afterFileDrop
-        ? $theme.typography.LabelMedium
-        : $theme.typography.LabelSmall),
+      ...($afterFileDrop ? $theme.typography.LabelMedium : $theme.typography.LabelSmall),
       color: $afterFileDrop
         ? $theme.colors.contentPrimary
         : $isDragActive
@@ -63,23 +61,23 @@ export const StyledContentMessage = styled<StylePropsT>(
         : null,
       marginTop: $afterFileDrop ? $theme.sizing.scale100 : null,
       marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null,
-    }: {}),
+    }: {})
 );
 
 export const StyledContentSeparator = StyledContentMessage;
 
 export const StyledErrorMessage = styled<StylePropsT>(
   'div',
-  props =>
+  (props) =>
     ({
       ...props.$theme.typography.LabelMedium,
       color: props.$theme.colors.negative,
       marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
       marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
-    }: {}),
+    }: {})
 );
 
-export const StyledRoot = styled<StylePropsT>('div', props => ({
+export const StyledRoot = styled<StylePropsT>('div', (props) => ({
   ...props.$theme.typography.font300,
   color: props.$theme.colors.fileUploaderMessageColor,
 }));

package/file-uploader/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type StylePropsT = {|
   $afterFileDrop: boolean,
@@ -17,7 +17,7 @@ export type StylePropsT = {|
   $isFocused: boolean,
 |};
 
-export type OverridesT = {|
+export type OverridesT = {
   Root?: OverrideT,
   FileDragAndDrop?: OverrideT,
   ContentMessage?: OverrideT,
@@ -27,7 +27,7 @@ export type OverridesT = {|
   ErrorMessage?: OverrideT,
   ButtonComponent?: OverrideT,
   Spinner?: OverrideT,
-|};
+};
 
 export type PropsT = {|
   // react-dropzone: https://github.com/react-dropzone/react-dropzone/blob/master/typings/react-dropzone.d.ts
@@ -67,22 +67,20 @@ export type PropsT = {|
 export type DropFilesEventHandlerT = (
   accepted: File[],
   rejected: File[],
-  event: SyntheticDragEvent<HTMLElement>,
+  event: SyntheticDragEvent<HTMLElement>
 ) => mixed;
 
 type DropFileEventHandlerT = (
   acceptedOrRejected: File[],
-  event: SyntheticDragEvent<HTMLElement>,
+  event: SyntheticDragEvent<HTMLElement>
 ) => mixed;
 
 type DataTransferEventT =
   | SyntheticDragEvent<HTMLElement>
   | SyntheticInputEvent<HTMLInputElement>
-  | SyntheticDragEvent<*>
-  | SyntheticEvent<*>;
-type GetDataTransferItemsT = (
-  event: DataTransferEventT,
-) => Promise<Array<File | DataTransferItem>>;
+  | SyntheticDragEvent<any> //flowlint-line unclear-type:off
+  | SyntheticEvent<any>; //flowlint-line unclear-type:off
+type GetDataTransferItemsT = (event: DataTransferEventT) => Promise<Array<File | DataTransferItem>>;
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/flex-grid/flex-grid-item.js

@@ -72,7 +72,9 @@ var flexGridItemMediaQueryStyle = function flexGridItemMediaQueryStyle(_ref) {
     // Subtract .5px to avoid rounding issues on IE/Edge
     // See https://github.com/uber/baseweb/pull/1748
     width: "calc(".concat(widthCalc, " - .5px)")
-  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
+  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ( //flowlint-line sketchy-number-and:off
+  (itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && ( //flowlint-line sketchy-number-and:off
+  ~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
 };
 
 exports.flexGridItemMediaQueryStyle = flexGridItemMediaQueryStyle;
@@ -171,9 +173,9 @@ var FlexGridItem = function FlexGridItem(_ref4) {
     }
   };
   var blockOverrides = overrides ? (0, _overrides.mergeOverrides)(flexGridItemOverrides, overrides) : flexGridItemOverrides;
-  return /*#__PURE__*/React.createElement(_index.Block // coerced to any because because of how react components are typed.
+  return /*#__PURE__*/React.createElement(_index.Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     as: as,

package/flex-grid/flex-grid-item.js.flow

@@ -8,13 +8,13 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Block} from '../block/index.js';
-import {mergeOverrides} from '../helpers/overrides.js';
-import {getMediaQueries, getMediaQuery} from '../helpers/responsive-helpers.js';
-import type {FlexGridItemPropsT} from './types.js';
-import type {ResponsiveT, ScaleT} from '../block/index.js';
-import type {StyleOverrideT} from '../helpers/overrides.js';
-import type {ThemeT} from '../styles/index.js';
+import { Block } from '../block/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
+import { getMediaQueries, getMediaQuery } from '../helpers/responsive-helpers.js';
+import type { FlexGridItemPropsT } from './types.js';
+import type { ResponsiveT, ScaleT } from '../block/index.js';
+import type { StyleOverrideT } from '../helpers/overrides.js';
+import type { ThemeT } from '../styles/index.js';
 
 export const flexGridItemMediaQueryStyle = ({
   $theme,
@@ -37,38 +37,32 @@ export const flexGridItemMediaQueryStyle = ({
   const colGapUnit = colGap.match(/[a-zA-Z]+/)[0];
   const rowGap = $theme.sizing[flexGridRowGap] || flexGridRowGap || '0px';
   const rowGapQuantity = parseFloat(rowGap);
-  const widthCalc = `(100% - ${(colCount - 1) *
-    colGapQuantity}${colGapUnit}) / ${colCount}`;
-  const marginDirection: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+  const widthCalc = `(100% - ${(colCount - 1) * colGapQuantity}${colGapUnit}) / ${colCount}`;
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return Object.freeze({
     // Subtract .5px to avoid rounding issues on IE/Edge
     // See https://github.com/uber/baseweb/pull/1748
     width: `calc(${widthCalc} - .5px)`,
     // Add colGap except at end of row
     [marginDirection]:
-      colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0),
+      colGapQuantity && //flowlint-line sketchy-number-and:off
+      ((itemIndex + 1) % colCount !== 0 ? colGap : 0),
     // Add rowGap except at end of column
     marginBottom:
-      rowGapQuantity &&
-      (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount)
-        ? rowGap
-        : 0),
+      rowGapQuantity && //flowlint-line sketchy-number-and:off
+      (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0),
     // Add space to make up for missing columns if last row ends early
     ...(itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0
       ? {
-          [marginDirection]: `calc(${colCount -
-            (itemIndex % colCount) -
-            1} * (${colGap} + ${widthCalc}))`,
+          [marginDirection]: `calc(${
+            colCount - (itemIndex % colCount) - 1
+          } * (${colGap} + ${widthCalc}))`,
         }
       : {}),
   });
 };
 
-export const getResponsiveValue = <T>(
-  responsive?: ResponsiveT<T>,
-  i: number,
-): ?T => {
+export const getResponsiveValue = <T>(responsive?: ResponsiveT<T>, i: number): ?T => {
   if (!responsive) {
     return null;
   }
@@ -93,14 +87,14 @@ export const flexGridItemStyle = ({
   $flexGridItemCount?: number,
   $theme: ThemeT,
 }): StyleOverrideT => {
-  const baseFlexGridItemStyle = {flexGrow: 1};
+  const baseFlexGridItemStyle = { flexGrow: 1 };
   const mediaQueries = getMediaQueries($theme.breakpoints);
 
   // Get the length of the longest responsive array
   const maxResponsiveLength = Math.max(
-    ...[$flexGridColumnCount, $flexGridColumnGap, $flexGridRowGap].map(r =>
-      Array.isArray(r) ? r.length : 0,
-    ),
+    ...[$flexGridColumnCount, $flexGridColumnGap, $flexGridRowGap].map((r) =>
+      Array.isArray(r) ? r.length : 0
+    )
   );
 
   // No media queries for non-responsive FlexGrids
@@ -125,13 +119,11 @@ export const flexGridItemStyle = ({
   // - {mobile, small, medium}
   // - {mobile, small, medium, large}
   return [...Array(maxResponsiveLength).keys()].reduce((acc, i) => {
-    const [
-      flexGridColumnCountValue,
-      flexGridColumnGapValue,
-      flexGridRowGapValue,
-    ] = [$flexGridColumnCount, $flexGridColumnGap, $flexGridRowGap].map(r =>
-      getResponsiveValue(r, i),
-    );
+    const [flexGridColumnCountValue, flexGridColumnGapValue, flexGridRowGapValue] = [
+      $flexGridColumnCount,
+      $flexGridColumnGap,
+      $flexGridRowGap,
+    ].map((r) => getResponsiveValue(r, i));
     const mediaQuery =
       i === 0
         ? // Custom media query needed so :nth-child styles don't conflict
@@ -162,7 +154,8 @@ const FlexGridItem = ({
   flexGridItemIndex,
   flexGridItemCount,
   ...restProps
-}): React.Node => {
+}: // flowlint-next-line unclear-type:off
+FlexGridItemPropsT & { forwardedRef: any }): React.Node => {
   const flexGridItemOverrides = {
     Block: {
       style: flexGridItemStyle,
@@ -173,9 +166,9 @@ const FlexGridItem = ({
     : flexGridItemOverrides;
   return (
     <Block
-      // coerced to any because because of how react components are typed.
+      // coerced to any because of how react components are typed.
       // cannot guarantee an html element
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(forwardedRef: any)}
       as={as}
       overrides={blockOverrides}
@@ -193,9 +186,7 @@ const FlexGridItem = ({
 };
 
 const FlexGridItemComponent = React.forwardRef<FlexGridItemPropsT, HTMLElement>(
-  (props: FlexGridItemPropsT, ref) => (
-    <FlexGridItem {...props} forwardedRef={ref} />
-  ),
+  (props: FlexGridItemPropsT, ref) => <FlexGridItem {...props} forwardedRef={ref} />
 );
 FlexGridItemComponent.displayName = 'FlexGridItem';
 export default FlexGridItemComponent;

package/flex-grid/flex-grid.js

@@ -42,15 +42,20 @@ var BaseFlexGrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       flexWrap = _ref.flexWrap,
       restProps = _objectWithoutProperties(_ref, ["display", "flexWrap"]);
 
-  return /*#__PURE__*/React.createElement(_index.Block, _extends({
-    display: display || 'flex',
-    flexWrap: flexWrap || flexWrap === false ? flexWrap : true,
-    "data-baseweb": "flex-grid"
-  }, restProps, {
-    ref: ref
-  }));
+  return (
+    /*#__PURE__*/
+    //$FlowFixMe
+    React.createElement(_index.Block, _extends({
+      display: display || 'flex',
+      flexWrap: flexWrap || flexWrap === false ? flexWrap : true,
+      "data-baseweb": "flex-grid"
+    }, restProps, {
+      ref: ref
+    }))
+  );
 });
 exports.BaseFlexGrid = BaseFlexGrid;
+BaseFlexGrid.displayName = 'BaseFlexGrid';
 
 var FlexGrid = function FlexGrid(_ref2) {
   var forwardedRef = _ref2.forwardedRef,
@@ -67,9 +72,9 @@ var FlexGrid = function FlexGrid(_ref2) {
       FlexGrid = _getOverrides2[0],
       flexGridProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(FlexGrid // coerced to any because because of how react components are typed.
+  return /*#__PURE__*/React.createElement(FlexGrid // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     as: as

package/flex-grid/flex-grid.js.flow

@@ -8,14 +8,15 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Block} from '../block/index.js';
-import {flattenFragments} from '../helpers/react-helpers.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {BlockPropsT} from '../block/types.js';
-import type {FlexGridPropsT} from './types.js';
+import { Block } from '../block/index.js';
+import { flattenFragments } from '../helpers/react-helpers.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { BlockPropsT } from '../block/types.js';
+import type { FlexGridPropsT } from './types.js';
 
 export const BaseFlexGrid = React.forwardRef<BlockPropsT, HTMLElement>(
-  ({display, flexWrap, ...restProps}, ref) => (
+  ({ display, flexWrap, ...restProps }, ref) => (
+    //$FlowFixMe
     <Block
       display={display || 'flex'}
       flexWrap={flexWrap || flexWrap === false ? flexWrap : true}
@@ -23,8 +24,9 @@ export const BaseFlexGrid = React.forwardRef<BlockPropsT, HTMLElement>(
       {...restProps}
       ref={ref}
     />
-  ),
+  )
 );
+BaseFlexGrid.displayName = 'BaseFlexGrid';
 
 const FlexGrid = ({
   forwardedRef,
@@ -36,43 +38,42 @@ const FlexGrid = ({
   flexGridRowGap,
   ...restProps
 }): React.Node => {
-  const [FlexGrid, flexGridProps] = getOverrides(
-    overrides && overrides.Block,
-    BaseFlexGrid,
-  );
+  const [FlexGrid, flexGridProps] = getOverrides(overrides && overrides.Block, BaseFlexGrid);
   return (
     <FlexGrid
-      // coerced to any because because of how react components are typed.
+      // coerced to any because of how react components are typed.
       // cannot guarantee an html element
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(forwardedRef: any)}
       as={as}
       {...restProps}
       {...flexGridProps}
     >
-      {// flatten fragments so FlexGrid correctly iterates over fragments’ children
-      flattenFragments(children).map(
-        (
-          child: React.Node,
-          flexGridItemIndex: number,
-          {length: flexGridItemCount}: React.Node[],
-        ) => {
-          // $FlowFixMe https://github.com/facebook/flow/issues/4864
-          return React.cloneElement(child, {
-            flexGridColumnCount,
-            flexGridColumnGap,
-            flexGridRowGap,
-            flexGridItemIndex,
-            flexGridItemCount,
-          });
-        },
-      )}
+      {
+        // flatten fragments so FlexGrid correctly iterates over fragments’ children
+        flattenFragments(children).map(
+          (
+            child: React.Node,
+            flexGridItemIndex: number,
+            { length: flexGridItemCount }: React.Node[]
+          ) => {
+            // $FlowFixMe https://github.com/facebook/flow/issues/4864
+            return React.cloneElement(child, {
+              flexGridColumnCount,
+              flexGridColumnGap,
+              flexGridRowGap,
+              flexGridItemIndex,
+              flexGridItemCount,
+            });
+          }
+        )
+      }
     </FlexGrid>
   );
 };
 
 const FlexGridComponent = React.forwardRef<FlexGridPropsT, HTMLElement>(
-  (props: FlexGridPropsT, ref) => <FlexGrid {...props} forwardedRef={ref} />,
+  (props: FlexGridPropsT, ref) => <FlexGrid {...props} forwardedRef={ref} />
 );
 FlexGridComponent.displayName = 'FlexGrid';
 export default FlexGridComponent;

package/flex-grid/index.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as FlexGrid} from './flex-grid.js';
-export {default as FlexGridItem} from './flex-grid-item.js';
+export { default as FlexGrid } from './flex-grid.js';
+export { default as FlexGridItem } from './flex-grid-item.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;