baseui 10.9.1 → 10.11.0

package/snackbar/snackbar-element.js.flow

@@ -9,9 +9,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button, KIND, SHAPE} from '../button/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {useStyletron} from '../styles/index.js';
+import { Button, KIND, SHAPE } from '../button/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { useStyletron } from '../styles/index.js';
 
 import {
   StyledRoot,
@@ -22,14 +22,15 @@ import {
   StyledWrapActionButtonContainer,
   StyledActionButtonContainer,
 } from './styled-components.js';
-import type {SnackbarElementPropsT} from './types.js';
+import type { SnackbarElementPropsT } from './types.js';
 
 const ActionButton = React.forwardRef(
-  ({onClick, message, overrides = {}}, ref) => {
+  // flowlint-next-line unclear-type:off
+  ({ onClick, message, overrides = {} }, ref: any) => {
     const [, theme] = useStyletron();
     const [ActionButtonContainer, actionButtonContainerProps] = getOverrides(
       overrides.ActionButtonContainer,
-      StyledActionButtonContainer,
+      StyledActionButtonContainer
     );
     return (
       <ActionButtonContainer {...actionButtonContainerProps}>
@@ -39,10 +40,8 @@ const ActionButton = React.forwardRef(
             BaseButton: {
               style: {
                 color: theme.colors.contentInversePrimary,
-                marginRight:
-                  theme.direction === 'rtl' ? null : theme.sizing.scale100,
-                marginLeft:
-                  theme.direction === 'rtl' ? theme.sizing.scale100 : null,
+                marginRight: theme.direction === 'rtl' ? null : theme.sizing.scale100,
+                marginLeft: theme.direction === 'rtl' ? theme.sizing.scale100 : null,
                 width: '100%',
                 whiteSpace: 'nowrap',
                 ':hover': {
@@ -62,8 +61,9 @@ const ActionButton = React.forwardRef(
         </Button>
       </ActionButtonContainer>
     );
-  },
+  }
 );
+ActionButton.displayName = 'ActionButton';
 
 export default function SnackbarElement({
   actionMessage,
@@ -82,7 +82,7 @@ export default function SnackbarElement({
     if (__BROWSER__) {
       if (window.ResizeObserver) {
         const observer = new window.ResizeObserver(([entry]) =>
-          setRootWidth(entry.contentRect.width),
+          setRootWidth(entry.contentRect.width)
         );
         if (rootRef.current) {
           observer.observe(rootRef.current);
@@ -98,7 +98,7 @@ export default function SnackbarElement({
     if (__BROWSER__) {
       if (window.ResizeObserver) {
         const observer = new window.ResizeObserver(([entry]) =>
-          setActionMeasureWidth(entry.contentRect.width),
+          setActionMeasureWidth(entry.contentRect.width)
         );
         if (actionMeasureRef.current) {
           observer.observe(actionMeasureRef.current);
@@ -111,28 +111,16 @@ export default function SnackbarElement({
   const wrapActionButton = actionMeasureWidth > rootWidth / 2;
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledContent,
-  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [StartEnhancerContainer, startEnhancerContainerProps] = getOverrides(
     overrides.StartEnhancerContainer,
-    StyledStartEnhancerContainer,
-  );
-  const [Spinner, spinnerProps] = getOverrides(
-    overrides.Spinner,
-    StyledSpinner,
-  );
-  const [Message, messageProps] = getOverrides(
-    overrides.Message,
-    StyledMessage,
+    StyledStartEnhancerContainer
   );
-  const [
-    WrapActionButtonContainer,
-    wrapActionButtonContainerProps,
-  ] = getOverrides(
+  const [Spinner, spinnerProps] = getOverrides(overrides.Spinner, StyledSpinner);
+  const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
+  const [WrapActionButtonContainer, wrapActionButtonContainerProps] = getOverrides(
     overrides.WrapActionButtonContainer,
-    StyledWrapActionButtonContainer,
+    StyledWrapActionButtonContainer
   );
 
   const prevFocusRef = React.useRef(null);
@@ -141,7 +129,6 @@ export default function SnackbarElement({
     if (__BROWSER__) {
       if (focus && actionButtonRef.current) {
         prevFocusRef.current = document.activeElement;
-        // $FlowFixMe
         actionButtonRef.current.focus();
       }
       return () => {

package/snackbar/styled-components.js

@@ -62,7 +62,7 @@ var StyledSpinner = (0, _index2.withStyle)(_index.StyledSpinnerNext, function (_
 });
 exports.StyledSpinner = StyledSpinner;
 StyledSpinner.displayName = "StyledSpinner";
-var StyledMessage = (0, _index2.styled)('p', // $FlowFixMe - suppressing due to webkit properties
+var StyledMessage = (0, _index2.styled)('p', //$FlowExpectedError[incompatible-shape]
 function (_ref5) {
   var _objectSpread2;
 

package/snackbar/styled-components.js.flow

@@ -7,13 +7,13 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {StyledSpinnerNext} from '../spinner/index.js';
-import {styled, withStyle} from '../styles/index.js';
+import { StyledSpinnerNext } from '../spinner/index.js';
+import { styled, withStyle } from '../styles/index.js';
 
-import {PLACEMENT} from './constants.js';
-import type {PlacementT} from './types.js';
+import { PLACEMENT } from './constants.js';
+import type { PlacementT } from './types.js';
 
-export const StyledRoot = styled<{}>('div', ({$theme}) => {
+export const StyledRoot = styled<{}>('div', ({ $theme }) => {
   return {
     backgroundColor: $theme.colors.backgroundInverseSecondary,
     borderTopLeftRadius: $theme.borders.radius400,
@@ -34,9 +34,8 @@ export const StyledContent = styled('div', {
   width: '100%',
 });
 
-export const StyledStartEnhancerContainer = styled<{}>('span', ({$theme}) => {
-  const paddingDir =
-    $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+export const StyledStartEnhancerContainer = styled<{}>('span', ({ $theme }) => {
+  const paddingDir: string = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
   return {
     alignItems: 'center',
     display: 'flex',
@@ -46,8 +45,8 @@ export const StyledStartEnhancerContainer = styled<{}>('span', ({$theme}) => {
 
 export const StyledSpinner = withStyle<
   typeof StyledSpinnerNext,
-  {$height: number, $width: number},
->(StyledSpinnerNext, ({$height, $width}) => {
+  { $height: number, $width: number }
+>(StyledSpinnerNext, ({ $height, $width }) => {
   return {
     boxSizing: 'border-box',
     height: `${$height}px`,
@@ -55,14 +54,12 @@ export const StyledSpinner = withStyle<
   };
 });
 
-export const StyledMessage = styled<{$hasSuffix: boolean}>(
+export const StyledMessage = styled<{ $hasSuffix: boolean }>(
   'p',
-  // $FlowFixMe - suppressing due to webkit properties
-  ({$theme, $hasSuffix}) => {
-    const prefixPadding =
-      $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-    const suffixPadding =
-      $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+  //$FlowExpectedError[incompatible-shape]
+  ({ $theme, $hasSuffix }) => {
+    const prefixPadding: string = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+    const suffixPadding: string = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
     return {
       ...$theme.typography.ParagraphMedium,
       '-webkit-box-orient': 'vertical',
@@ -72,11 +69,9 @@ export const StyledMessage = styled<{$hasSuffix: boolean}>(
       marginBottom: $theme.sizing.scale600,
       overflow: 'hidden',
       [prefixPadding]: $theme.sizing.scale600,
-      [suffixPadding]: $hasSuffix
-        ? $theme.sizing.scale300
-        : $theme.sizing.scale600,
+      [suffixPadding]: $hasSuffix ? $theme.sizing.scale300 : $theme.sizing.scale600,
     };
-  },
+  }
 );
 
 export const StyledWrapActionButtonContainer = styled('div', {
@@ -84,8 +79,8 @@ export const StyledWrapActionButtonContainer = styled('div', {
   justifyContent: 'flex-end',
 });
 
-export const StyledActionButtonContainer = styled<{}>('div', ({$theme}) => {
-  const marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+export const StyledActionButtonContainer = styled<{}>('div', ({ $theme }) => {
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     [marginDir]: 'auto',
   };
@@ -137,7 +132,7 @@ export const StyledPlacementContainer = styled<{
   $animating: boolean,
   $placement: PlacementT,
   $translateHeight: number,
-}>('div', ({$animating, $placement, $translateHeight, $theme}) => {
+}>('div', ({ $animating, $placement, $translateHeight, $theme }) => {
   return {
     ...placementRules($placement),
     display: 'flex',

package/snackbar/types.js.flow

@@ -9,9 +9,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
-import {DURATION, PLACEMENT} from './constants.js';
+import { DURATION, PLACEMENT } from './constants.js';
 
 export type DurationT =
   | typeof DURATION.infinite
@@ -27,7 +27,7 @@ export type PlacementT =
   | typeof PLACEMENT.bottom
   | typeof PLACEMENT.bottomRight;
 
-export type SnackbarElementOverridesT = {|
+export type SnackbarElementOverridesT = {
   Root?: OverrideT,
   Content?: OverrideT,
   StartEnhancerContainer?: OverrideT,
@@ -35,7 +35,7 @@ export type SnackbarElementOverridesT = {|
   Message?: OverrideT,
   WrapActionButtonContainer?: OverrideT,
   ActionButtonContainer?: OverrideT,
-|};
+};
 
 export type SnackbarElementPropsT = {|
   // message displayed in button
@@ -57,10 +57,10 @@ export type SnackbarElementPropsT = {|
 
 export type SnackbarProviderPropsT = {|
   children?: React.Node,
-  overrides?: {|
+  overrides?: {
     ...SnackbarElementOverridesT,
     PlacementContainer?: OverrideT,
-  |},
+  },
   // location on page where snackbar will render
   placement?: PlacementT,
   // default display duration

package/spinner/index.js.flow

@@ -13,7 +13,8 @@ import {
   StyledProgressBarRoundedTrackBackground,
   StyledProgressBarRoundedTrackForeground,
 } from '../progress-bar/index.js';
-export {default as Spinner} from './spinner.js';
+
+export { default as Spinner } from './spinner.js';
 // Styled elements
 export {
   Svg as StyledSvg,
@@ -21,7 +22,7 @@ export {
   StyledActivePath,
   StyledSpinnerNext,
 } from './styled-components.js';
-export {SIZE} from './constants.js';
+export { SIZE } from './constants.js';
 // Flow
 export type * from './types.js';
 

package/spinner/spinner.js

@@ -97,24 +97,28 @@ var Spinner = /*#__PURE__*/function (_React$Component) {
           ActivePath = _getOverrides4[0],
           activePathProps = _getOverrides4[1];
 
-      return /*#__PURE__*/React.createElement(_icon.default, _extends({
-        "aria-label": this.props['aria-label'] || 'Loading',
-        "data-baseweb": "spinner",
-        title: "Spinner",
-        viewBox: "3 3 18 18"
-      }, this.props, {
-        overrides: mergedOverrides
-      }), /*#__PURE__*/React.createElement(TrackPath, _extends({
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z",
-        $color: this.props.color
-      }, trackPathProps)), /*#__PURE__*/React.createElement(ActivePath, _extends({
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z",
-        $color: this.props.color
-      }, activePathProps)));
+      return (
+        /*#__PURE__*/
+        // $FlowExpectedError[cannot-spread-inexact]
+        React.createElement(_icon.default, _extends({
+          "aria-label": 'Loading',
+          "data-baseweb": "spinner",
+          title: "Spinner",
+          viewBox: "3 3 18 18"
+        }, this.props, {
+          overrides: mergedOverrides
+        }), /*#__PURE__*/React.createElement(TrackPath, _extends({
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z",
+          $color: this.props.color
+        }, trackPathProps)), /*#__PURE__*/React.createElement(ActivePath, _extends({
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z",
+          $color: this.props.color
+        }, activePathProps)))
+      );
     }
   }]);
 

package/spinner/spinner.js.flow

@@ -7,15 +7,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {mergeOverrides, getOverrides} from '../helpers/overrides.js';
+import { mergeOverrides, getOverrides } from '../helpers/overrides.js';
 import Icon from '../icon/icon.js';
 
-import {
-  Svg as StyledSvg,
-  StyledActivePath,
-  StyledTrackPath,
-} from './styled-components.js';
-import type {SpinnerPropsT} from './types.js';
+import { Svg as StyledSvg, StyledActivePath, StyledTrackPath } from './styled-components.js';
+import type { SpinnerPropsT } from './types.js';
 
 class Spinner extends React.Component<SpinnerPropsT> {
   static defaultProps: $Shape<SpinnerPropsT> = {
@@ -32,27 +28,21 @@ class Spinner extends React.Component<SpinnerPropsT> {
         console.warn(
           `❖ [baseui] Please consider using "StyledSpinnerNext" instead of "Spinner". ` +
             `In v11, "StyledSpinnerNext" will become the default "Spinner"` +
-            ` and the current SVG based implementation will be deprecated.`,
+            ` and the current SVG based implementation will be deprecated.`
         );
       }
     }
   }
 
   render() {
-    const {overrides = {}} = this.props;
-    const mergedOverrides = mergeOverrides({Svg: StyledSvg}, overrides);
-    const [TrackPath, trackPathProps] = getOverrides(
-      overrides.TrackPath,
-      StyledTrackPath,
-    );
-    const [ActivePath, activePathProps] = getOverrides(
-      overrides.ActivePath,
-      StyledActivePath,
-    );
-
+    const { overrides = {} } = this.props;
+    const mergedOverrides = mergeOverrides({ Svg: StyledSvg }, overrides);
+    const [TrackPath, trackPathProps] = getOverrides(overrides.TrackPath, StyledTrackPath);
+    const [ActivePath, activePathProps] = getOverrides(overrides.ActivePath, StyledActivePath);
     return (
+      // $FlowExpectedError[cannot-spread-inexact]
       <Icon
-        aria-label={this.props['aria-label'] || 'Loading'}
+        aria-label={'Loading'}
         data-baseweb="spinner"
         title="Spinner"
         viewBox="3 3 18 18"

package/spinner/styled-components.js

@@ -66,7 +66,6 @@ var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
       $borderWidth = _ref.$borderWidth,
       _ref$$size = _ref.$size,
       $size = _ref$$size === void 0 ? _constants.SIZE.medium : _ref$$size;
-  //$FlowFixMe
   var borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
@@ -87,7 +86,6 @@ var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
   }
 
   if (!boxSize) {
-    //$FlowFixMe
     boxSize = $theme.sizing[$size];
 
     if (!boxSize) {

package/spinner/styled-components.js.flow

@@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {getSvgStyles} from '../icon/styled-components.js';
-import {SIZE} from './constants.js';
-import type {StyledSpinnerNextPropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import { getSvgStyles } from '../icon/styled-components.js';
+import { SIZE } from './constants.js';
+import type { StyledSpinnerNextPropsT } from './types.js';
 
 type StylePropsT = {
   $size?: number | string,
@@ -27,8 +27,8 @@ const spin = {
 /**
  * Spinner icon overrides
  */
-export const Svg = styled<StylePropsT>('svg', props => {
-  const {$theme, $color} = props;
+export const Svg = styled<StylePropsT>('svg', (props) => {
+  const { $theme, $color } = props;
   return {
     ...getSvgStyles(props),
     fill: $color || $theme.colors.accent,
@@ -40,12 +40,12 @@ export const Svg = styled<StylePropsT>('svg', props => {
   };
 });
 
-export const StyledTrackPath = styled<StylePropsT>('path', props => ({
+export const StyledTrackPath = styled<StylePropsT>('path', (props) => ({
   fill: props.$theme.colors.spinnerTrackFill,
   opacity: 0.16,
 }));
 
-export const StyledActivePath = styled<StylePropsT>('path', props => ({
+export const StyledActivePath = styled<StylePropsT>('path', (props) => ({
   fill: props.$color || props.$theme.colors.accent,
 }));
 
@@ -53,12 +53,14 @@ export const StyledActivePath = styled<StylePropsT>('path', props => ({
 export const StyledSpinnerNext = styled<StyledSpinnerNextPropsT>(
   'i',
   ({
+    //$FlowFixMe
     $theme,
     $color = $theme.colors.contentAccent,
+    //$FlowFixMe
     $borderWidth,
+    //$FlowFixMe
     $size = SIZE.medium,
   }) => {
-    //$FlowFixMe
     let borderSize = {
       large: $theme.sizing.scale300,
       medium: $theme.sizing.scale100,
@@ -77,7 +79,6 @@ export const StyledSpinnerNext = styled<StyledSpinnerNextPropsT>(
       }
     }
     if (!boxSize) {
-      //$FlowFixMe
       boxSize = $theme.sizing[$size];
       if (!boxSize) {
         boxSize = `${parseInt($size)}px`;
@@ -107,7 +108,7 @@ export const StyledSpinnerNext = styled<StyledSpinnerNextPropsT>(
       height: boxSize,
       cursor: 'wait',
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/spinner/types.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SIZE} from './constants.js';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {SizingT} from '../themes/types.js';
+import { SIZE } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { SizingT } from '../themes/types.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 export type SpinnerPropsT = {

package/styles/__mocks__/styled.js

@@ -168,6 +168,7 @@ var withStyle = styled;
 exports.withStyle = withStyle;
 
 function withWrapper(StyledElement, wrapperFn) {
+  // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
     return wrapperFn(StyledElement)(_objectSpread(_objectSpread({
       ref: ref

package/styles/as-primary-export-hoc.js.flow

@@ -9,8 +9,8 @@ import * as React from 'react';
 
 // transforms props for native styled components adding $ symbol to avoid to supported warning
 export default function asPrimaryExport(
-  StyledComponent: React.ComponentType<*>,
-  propsTransformNames: Array<string>,
+  StyledComponent: React.ComponentType<{}>,
+  propsTransformNames: Array<string>
 ) {
   return function withStyledPropsHOC(props: {}) {
     const styledProps = Object.keys(props).reduce((acc, key) => {

package/styles/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {ThemeContext} from './theme-provider.js';
+import { ThemeContext } from './theme-provider.js';
 
 export {
   createThemedStyled,
@@ -17,8 +17,8 @@ export {
   useStyletron,
   withWrapper,
 } from './styled.js';
-export {hexToRgb, expandBorderStyles} from './util.js';
-export {default as ThemeProvider} from './theme-provider.js';
+export { hexToRgb, expandBorderStyles } from './util.js';
+export { default as ThemeProvider } from './theme-provider.js';
 export const ThemeConsumer = ThemeContext.Consumer;
 export type * from './types.js';
 

package/styles/styled.js

@@ -44,6 +44,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var wrapper = function wrapper(StyledComponent) {
+  // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
       return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -56,17 +57,17 @@ var wrapper = function wrapper(StyledComponent) {
 };
 /* eslint-disable flowtype/generic-spacing */
 
-/* eslint-disable flowtype/no-weak-types */
+/* flowlint unclear-type:off */
 
 
 /* eslint-enable flowtype/generic-spacing */
 
-/* eslint-enable flowtype/no-weak-types */
+/* flowlint unclear-type:error */
 function createThemedStyled() {
   return (0, _styletronReact.createStyled)({
     wrapper: wrapper,
     getInitialStyle: _styletronStandard.getInitialStyle,
-    driver: _styletronStandard.driver // eslint-disable-next-line flowtype/no-weak-types
+    driver: _styletronStandard.driver // flowlint-next-line unclear-type:off
 
   });
 }
@@ -75,7 +76,7 @@ var styled = createThemedStyled();
 exports.styled = styled;
 
 function createThemedWithStyle() {
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   return _styletronReact.withStyle;
 }
 
@@ -84,7 +85,7 @@ exports.withStyle = withStyle;
 
 function createThemedUseStyletron() {
   return function () {
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     var theme = React.useContext(_themeProvider.ThemeContext);
 
     var _styletronUseStyletro = (0, _styletronReact.useStyletron)(),
@@ -98,10 +99,11 @@ function createThemedUseStyletron() {
 var useStyletron = createThemedUseStyletron();
 exports.useStyletron = useStyletron;
 
-function withWrapper( // eslint-disable-next-line flowtype/no-weak-types
+function withWrapper( // flowlint-next-line unclear-type:off
 StyledElement, wrapperFn) {
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   return (0, _styletronReact.withWrapper)(StyledElement, function (Styled) {
+    // eslint-disable-next-line react/display-name
     return /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return wrapperFn(Styled)(_objectSpread(_objectSpread({