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

package/progress-bar/progressbar.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {SIZE} from './constants.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { SIZE } from './constants.js';
 import {
   StyledRoot,
   StyledBarContainer,
@@ -17,17 +17,15 @@ import {
   StyledInfiniteBar,
 } from './styled-components.js';
 
-import type {ProgressBarPropsT} from './types.js';
+import type { ProgressBarPropsT } from './types.js';
 
 class ProgressBar extends React.Component<
   // flowlint-next-line unclear-type:off
-  ProgressBarPropsT & {forwardedRef: any},
+  ProgressBarPropsT & { forwardedRef: any }
 > {
   static defaultProps = {
     getProgressLabel: (value: number, maxValue: number, minValue: number) =>
-      `${Math.round(
-        ((value - minValue) / (maxValue - minValue)) * 100,
-      )}% Loaded`,
+      `${Math.round(((value - minValue) / (maxValue - minValue)) * 100)}% Loaded`,
     infinite: false,
     overrides: {},
     showLabel: false,
@@ -43,9 +41,7 @@ class ProgressBar extends React.Component<
     // TODO(v11): remove warning when switching default Spinner
     if (__DEV__) {
       if (this.props.errorMessage) {
-        console.warn(
-          'baseui:ProgressBar The `errorMessage` prop is deprecated in WAI-ARIA v1.2.',
-        );
+        console.warn('baseui:ProgressBar The `errorMessage` prop is deprecated in WAI-ARIA v1.2.');
       }
     }
   }
@@ -72,18 +68,12 @@ class ProgressBar extends React.Component<
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(
       overrides.BarContainer,
-      StyledBarContainer,
+      StyledBarContainer
     );
     const [Bar, barProps] = getOverrides(overrides.Bar, StyledBar);
-    const [BarProgress, barProgressProps] = getOverrides(
-      overrides.BarProgress,
-      StyledBarProgress,
-    );
+    const [BarProgress, barProgressProps] = getOverrides(overrides.BarProgress, StyledBarProgress);
     const [Label, labelProps] = getOverrides(overrides.Label, StyledLabel);
-    const [InfiniteBar, infiniteBarProps] = getOverrides(
-      overrides.InfiniteBar,
-      StyledInfiniteBar,
-    );
+    const [InfiniteBar, infiniteBarProps] = getOverrides(overrides.InfiniteBar, StyledInfiniteBar);
     const sharedProps = {
       $infinite: infinite,
       $size: size,
@@ -99,7 +89,7 @@ class ProgressBar extends React.Component<
         children.push(
           <Bar key={i} {...sharedProps} {...barProps}>
             <BarProgress $index={i} {...sharedProps} {...barProgressProps} />
-          </Bar>,
+          </Bar>
         );
       }
       return children;
@@ -110,9 +100,7 @@ class ProgressBar extends React.Component<
         ref={forwardedRef}
         data-baseweb="progress-bar"
         role="progressbar"
-        aria-label={
-          ariaLabel || getProgressLabel(value, maximumValue, minValue)
-        }
+        aria-label={ariaLabel || getProgressLabel(value, maximumValue, minValue)}
         aria-valuenow={infinite ? null : value}
         aria-valuemin={infinite ? null : minValue}
         aria-valuemax={infinite ? null : maximumValue}
@@ -125,11 +113,7 @@ class ProgressBar extends React.Component<
         <BarContainer {...sharedProps} {...barContainerProps}>
           {infinite ? (
             <React.Fragment>
-              <InfiniteBar
-                $isLeft={true}
-                $size={sharedProps.$size}
-                {...infiniteBarProps}
-              />
+              <InfiniteBar $isLeft={true} $size={sharedProps.$size} {...infiniteBarProps} />
               <InfiniteBar $size={sharedProps.$size} {...infiniteBarProps} />
             </React.Fragment>
           ) : (
@@ -146,13 +130,12 @@ class ProgressBar extends React.Component<
   }
 }
 
-const ForwardedProgressBar = React.forwardRef<
-  $Shape<ProgressBarPropsT>,
-  HTMLDivElement,
->((props: ProgressBarPropsT, ref) => (
-  //$FlowExpectedError[cannot-spread-inexact]
-  <ProgressBar forwardedRef={ref} {...props} />
-));
+const ForwardedProgressBar = React.forwardRef<$Shape<ProgressBarPropsT>, HTMLDivElement>(
+  (props: ProgressBarPropsT, ref) => (
+    //$FlowExpectedError[cannot-spread-inexact]
+    <ProgressBar forwardedRef={ref} {...props} />
+  )
+);
 ForwardedProgressBar.displayName = 'ProgressBar';
 export default ForwardedProgressBar;
 

package/progress-bar/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, hexToRgb, withWrapper} from '../styles/index.js';
-import {SIZE} from './constants.js';
+import { styled, hexToRgb, withWrapper } from '../styles/index.js';
+import { SIZE } from './constants.js';
 
-import type {StylePropsT, SizeT} from './types.js';
+import type { StylePropsT, SizeT } from './types.js';
 import React from 'react';
 
 function getBarHeight(size) {
@@ -26,8 +26,8 @@ export const StyledRoot = styled<StylePropsT>('div', (props) => {
 });
 
 export const StyledBarContainer = styled<StylePropsT>('div', (props) => {
-  const {$theme} = props;
-  const {sizing} = $theme;
+  const { $theme } = props;
+  const { sizing } = $theme;
   return ({
     display: 'flex',
     marginLeft: sizing.scale500,
@@ -38,8 +38,8 @@ export const StyledBarContainer = styled<StylePropsT>('div', (props) => {
 });
 
 export const StyledBar = styled<StylePropsT>('div', (props) => {
-  const {$theme, $size, $steps} = props;
-  const {colors, sizing, borders} = $theme;
+  const { $theme, $size, $steps } = props;
+  const { colors, sizing, borders } = $theme;
   const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
   return ({
     borderTopLeftRadius: borderRadius,
@@ -62,21 +62,11 @@ export const StyledBar = styled<StylePropsT>('div', (props) => {
 });
 
 export const StyledBarProgress = styled<StylePropsT>('div', (props) => {
-  const {
-    $theme,
-    $value,
-    $successValue,
-    $steps,
-    $index,
-    $maxValue,
-    $minValue = 0,
-  } = props;
+  const { $theme, $value, $successValue, $steps, $index, $maxValue, $minValue = 0 } = props;
   // making sure this doesn't break existing use that use StyledBarProgress directly
   const maxValue = $maxValue ? $maxValue : $successValue;
-  const {colors, sizing, borders} = $theme;
-  const width = `${
-    100 - (($value - $minValue) * 100) / (maxValue - $minValue)
-  }%`;
+  const { colors, sizing, borders } = $theme;
+  const width = `${100 - (($value - $minValue) * 100) / (maxValue - $minValue)}%`;
 
   const stepStates = {
     default: 'default',
@@ -128,7 +118,7 @@ export const StyledBarProgress = styled<StylePropsT>('div', (props) => {
       ? {
           transform: 'translateX(0%)',
         }
-      : {transform: 'translateX(-102%)'};
+      : { transform: 'translateX(-102%)' };
 
   return {
     borderTopLeftRadius: borderRadius,
@@ -144,75 +134,70 @@ export const StyledBarProgress = styled<StylePropsT>('div', (props) => {
   };
 });
 
-export const StyledInfiniteBar = styled<{$isLeft?: boolean, $size: SizeT}>(
-  'div',
-  (props) => {
-    const {$theme, $isLeft = false, $size = SIZE.medium} = props;
-    const {colors, sizing, borders} = $theme;
-    const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
-    const height = getBarHeight($size);
-    const animationStyles = {
-      display: 'inline-block',
-      flex: 1,
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      transitionProperty: 'background-position',
-      animationDuration: '1.5s',
-      animationIterationCount: 'infinite',
-      animationTimingFunction: $theme.animation.linearCurve,
-      backgroundSize: '300% auto',
-      backgroundRepeat: 'no-repeat',
-      backgroundPositionX: $isLeft ? '-50%' : '150%',
-      backgroundImage: `linear-gradient(${
-        $isLeft ? '90' : '270'
-      }deg, transparent 0%, ${colors.accent} 25%, ${
-        colors.accent
-      } 75%, transparent 100%)`,
-      animationName: $isLeft
-        ? {
-            '0%': {
-              backgroundPositionX: '-50%',
-            },
-            '33%': {
-              backgroundPositionX: '50%',
-            },
-            '66%': {
-              backgroundPositionX: '50%',
-            },
-            '100%': {
-              backgroundPositionX: '150%',
-            },
-          }
-        : {
-            '0%': {
-              backgroundPositionX: '150%',
-            },
-            '33%': {
-              backgroundPositionX: '50%',
-            },
-            '66%': {
-              backgroundPositionX: '50%',
-            },
-            '100%': {
-              backgroundPositionX: '-50%',
-            },
+export const StyledInfiniteBar = styled<{ $isLeft?: boolean, $size: SizeT }>('div', (props) => {
+  const { $theme, $isLeft = false, $size = SIZE.medium } = props;
+  const { colors, sizing, borders } = $theme;
+  const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
+  const height = getBarHeight($size);
+  const animationStyles = {
+    display: 'inline-block',
+    flex: 1,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    transitionProperty: 'background-position',
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: $theme.animation.linearCurve,
+    backgroundSize: '300% auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPositionX: $isLeft ? '-50%' : '150%',
+    backgroundImage: `linear-gradient(${$isLeft ? '90' : '270'}deg, transparent 0%, ${
+      colors.accent
+    } 25%, ${colors.accent} 75%, transparent 100%)`,
+    animationName: $isLeft
+      ? {
+          '0%': {
+            backgroundPositionX: '-50%',
           },
-    };
-    return {
-      ...($isLeft
-        ? {
-            borderTopLeftRadius: borderRadius,
-            borderBottomLeftRadius: borderRadius,
-          }
-        : {
-            borderTopRightRadius: borderRadius,
-            borderBottomRightRadius: borderRadius,
-          }),
-      height,
-      ...animationStyles,
-    };
-  },
-);
+          '33%': {
+            backgroundPositionX: '50%',
+          },
+          '66%': {
+            backgroundPositionX: '50%',
+          },
+          '100%': {
+            backgroundPositionX: '150%',
+          },
+        }
+      : {
+          '0%': {
+            backgroundPositionX: '150%',
+          },
+          '33%': {
+            backgroundPositionX: '50%',
+          },
+          '66%': {
+            backgroundPositionX: '50%',
+          },
+          '100%': {
+            backgroundPositionX: '-50%',
+          },
+        },
+  };
+  return {
+    ...($isLeft
+      ? {
+          borderTopLeftRadius: borderRadius,
+          borderBottomLeftRadius: borderRadius,
+        }
+      : {
+          borderTopRightRadius: borderRadius,
+          borderBottomRightRadius: borderRadius,
+        }),
+    height,
+    ...animationStyles,
+  };
+});
 
 export const StyledLabel = styled<StylePropsT>('div', (props) => {
   return {
@@ -249,7 +234,7 @@ const PROGRESS_BAR_ROUNDED_SIZES = {
 export const StyledProgressBarRoundedRoot = styled<{
   $size: SizeT,
   $inline: boolean,
-}>('div', ({$size, $inline}) => {
+}>('div', ({ $size, $inline }) => {
   return {
     width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
     height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
@@ -262,7 +247,7 @@ export const StyledProgressBarRoundedRoot = styled<{
 
 const _StyledProgressBarRoundedSvg = styled<{
   $size: SizeT,
-}>('svg', ({$size}) => {
+}>('svg', ({ $size }) => {
   return {
     width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
     height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
@@ -284,12 +269,12 @@ export const StyledProgressBarRoundedSvg = withWrapper(
           {...props}
         />
       );
-    },
+    }
 );
 
 const _StyledProgressBarRoundedTrackBackground = styled<{
   $size: SizeT,
-}>('path', ({$theme, $size}) => {
+}>('path', ({ $theme, $size }) => {
   return {
     stroke: $theme.colors.backgroundTertiary,
     strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px',
@@ -300,10 +285,8 @@ export const StyledProgressBarRoundedTrackBackground = withWrapper(
   _StyledProgressBarRoundedTrackBackground,
   (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
-      return (
-        <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />
-      );
-    },
+      return <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />;
+    }
 );
 
 const _StyledProgressBarRoundedTrackForeground = styled<{
@@ -311,7 +294,7 @@ const _StyledProgressBarRoundedTrackForeground = styled<{
   $visible: boolean,
   $pathLength: number,
   $pathProgress: number,
-}>('path', ({$theme, $size, $visible, $pathLength, $pathProgress}) => {
+}>('path', ({ $theme, $size, $visible, $pathLength, $pathProgress }) => {
   return {
     visibility: $visible ? 'visible' : 'hidden',
     stroke: $theme.colors.borderAccent,
@@ -325,15 +308,13 @@ export const StyledProgressBarRoundedTrackForeground = withWrapper(
   _StyledProgressBarRoundedTrackForeground,
   (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
-      return (
-        <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />
-      );
-    },
+      return <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />;
+    }
 );
 
 export const StyledProgressBarRoundedText = styled<{
   $size: SizeT,
-}>('div', ({$theme, $size}) => {
+}>('div', ({ $theme, $size }) => {
   return {
     color: $theme.colors.contentPrimary,
     ...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography],

package/progress-bar/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE } from './constants.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 
@@ -28,11 +28,7 @@ export type ProgressBarPropsT = {
   /** Error message for screen-reader users**/
   errorMessage?: string,
   /** The function that returns a progress bar label to display. */
-  getProgressLabel: (
-    value: number,
-    maxValue: number,
-    minValue: number,
-  ) => React.Node,
+  getProgressLabel: (value: number, maxValue: number, minValue: number) => React.Node,
   /** If set to true, there’s and infinite loading animation. */
   infinite: boolean,
   overrides?: OverridesT,

package/progress-steps/index.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as ProgressSteps} from './progress-steps.js';
-export {default as Step} from './step.js';
-export {default as NumberedStep} from './numbered-step.js';
+export { default as ProgressSteps } from './progress-steps.js';
+export { default as Step } from './step.js';
+export { default as NumberedStep } from './numbered-step.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

package/progress-steps/numbered-step.js.flow

@@ -8,7 +8,7 @@ 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 {
   StyledNumberStep,
   StyledNumberIcon,
@@ -19,7 +19,7 @@ import {
 } from './styled-components.js';
 import StyledCheckIcon from '../icon/check.js';
 
-import type {NumberedStepPropsT} from './types.js';
+import type { NumberedStepPropsT } from './types.js';
 
 function NumberedStep({
   overrides = {},
@@ -32,23 +32,14 @@ function NumberedStep({
 }: NumberedStepPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledNumberStep);
   const [Icon, iconProps] = getOverrides(overrides.Icon, StyledNumberIcon);
-  const [Tail, tailProps] = getOverrides(
-    overrides.Tail,
-    StyledNumberContentTail,
-  );
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledContent,
-  );
+  const [Tail, tailProps] = getOverrides(overrides.Tail, StyledNumberContentTail);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(
     overrides.Description,
-    StyledContentDescription,
-  );
-  const [CheckIcon, checkIconProps] = getOverrides(
-    overrides.Icon,
-    StyledCheckIcon,
+    StyledContentDescription
   );
+  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, StyledCheckIcon);
 
   const sharedProps = {
     $isCompleted: isCompleted,

package/progress-steps/progress-steps.js.flow

@@ -8,15 +8,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {StyledProgressSteps} from './styled-components.js';
-import type {ProgressStepsPropsT, StepPropsT} from './types.js';
-
-function ProgressSteps({
-  overrides = {},
-  current,
-  children,
-}: ProgressStepsPropsT) {
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledProgressSteps } from './styled-components.js';
+import type { ProgressStepsPropsT, StepPropsT } from './types.js';
+
+function ProgressSteps({ overrides = {}, current, children }: ProgressStepsPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledProgressSteps);
   const numChildren = React.Children.count(children);
   const modifiedChildren = React.Children.map(children, (child, index) => {
@@ -24,10 +20,7 @@ function ProgressSteps({
 
     const childOverrides = child.props.overrides || {};
 
-    const isActive =
-      child.props.isActive !== undefined
-        ? child.props.isActive
-        : index === current;
+    const isActive = child.props.isActive !== undefined ? child.props.isActive : index === current;
 
     return React.cloneElement(
       child,
@@ -41,7 +34,7 @@ function ProgressSteps({
           Root: overrides.StepRoot,
           ...childOverrides,
         },
-      }: StepPropsT),
+      }: StepPropsT)
     );
   });
 

package/progress-steps/step.js.flow

@@ -8,7 +8,7 @@ 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 {
   StyledStep,
   StyledIconContainer,
@@ -20,35 +20,22 @@ import {
   StyledContentDescription,
 } from './styled-components.js';
 
-import type {StepPropsT} from './types.js';
+import type { StepPropsT } from './types.js';
 
-function Step({
-  overrides = {},
-  isCompleted,
-  isActive,
-  isLast,
-  title,
-  children,
-}: StepPropsT) {
+function Step({ overrides = {}, isCompleted, isActive, isLast, title, children }: StepPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledStep);
   const [IconContainer, iconContainerProps] = getOverrides(
     overrides.IconContainer,
-    StyledIconContainer,
+    StyledIconContainer
   );
   const [Icon, iconProps] = getOverrides(overrides.Icon, StyledIcon);
-  const [InnerIcon, innerIconProps] = getOverrides(
-    overrides.InnerIcon,
-    StyledInnerIcon,
-  );
+  const [InnerIcon, innerIconProps] = getOverrides(overrides.InnerIcon, StyledInnerIcon);
   const [Tail, tailProps] = getOverrides(overrides.Tail, StyledContentTail);
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledContent,
-  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(
     overrides.Description,
-    StyledContentDescription,
+    StyledContentDescription
   );
 
   const sharedProps = {