baseui 10.9.2 → 10.11.1

package/popover/utils.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 /* eslint-disable import/prefer-default-export */
-import {ARROW_SIZE, PLACEMENT} from './constants.js';
-import type {OffsetT, PopoverPlacementT} from './types.js';
+import { ARROW_SIZE, PLACEMENT } from './constants.js';
+import type { OffsetT, PopoverPlacementT } from './types.js';
 
 const OPPOSITE_POSITIONS = {
   top: 'bottom',
@@ -45,9 +45,7 @@ export function capitalize(str: string): string {
  * Opposite of function above, converts from Popper.js placement
  * to our placement prop
  */
-export function fromPopperPlacement(
-  placement: string,
-): PopoverPlacementT | null {
+export function fromPopperPlacement(placement: string): PopoverPlacementT | null {
   const popoverPlacement: string = placement
     .replace(/(top|bottom)-start$/, '$1Left')
     .replace(/(top|bottom)-end$/, '$1Right')
@@ -64,7 +62,7 @@ export function splitPlacement(placement: PopoverPlacementT): string[] {
   return (matches: string[])
     .slice(1, 3)
     .filter(Boolean)
-    .map(s => s.toLowerCase());
+    .map((s) => s.toLowerCase());
 }
 
 /**
@@ -74,7 +72,7 @@ export function splitPlacement(placement: PopoverPlacementT): string[] {
 export function getPopoverMarginStyles(
   arrowSize: number,
   placement: PopoverPlacementT,
-  popoverMargin: number,
+  popoverMargin: number
 ) {
   const [position] = splitPlacement(placement);
   const opposite = getOppositePosition(position);
@@ -94,9 +92,9 @@ export function getStartPosition(
   offset: OffsetT,
   placement: PopoverPlacementT,
   arrowSize: number,
-  popoverMargin: number,
+  popoverMargin: number
 ) {
-  offset = {...offset};
+  offset = { ...offset };
   const [position] = splitPlacement(placement);
   const margin = (arrowSize > 0 ? arrowSize : popoverMargin) * 2;
   if (isVerticalPosition(position)) {
@@ -117,19 +115,14 @@ export function getEndPosition(offset: OffsetT) {
 /**
  * Returns top/left styles to position the popover arrow
  */
-export function getArrowPositionStyles(
-  offsets: OffsetT,
-  placement: PopoverPlacementT,
-) {
+export function getArrowPositionStyles(offsets: OffsetT, placement: PopoverPlacementT) {
   const [position] = splitPlacement(placement);
   const oppositePosition = getOppositePosition(position);
   if (!oppositePosition) {
     return null;
   }
 
-  const alignmentProperty: string = isVerticalPosition(position)
-    ? 'left'
-    : 'top';
+  const alignmentProperty: string = isVerticalPosition(position) ? 'left' : 'top';
   return {
     [alignmentProperty]: `${offsets[alignmentProperty]}px`,
     [oppositePosition]: `-${ARROW_SIZE - 2}px`,

package/progress-bar/index.d.ts

@@ -17,6 +17,7 @@ export interface ProgressBarOverrides {
 }
 export interface ProgressBarProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children?: React.ReactNode;
   getProgressLabel?: (value: number, successValue: number) => React.ReactNode;
   infinite?: boolean;

package/progress-bar/index.js.flow

@@ -5,9 +5,9 @@ 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 ProgressBar} from './progressbar.js';
-export {default as ProgressBarRounded} from './progressbar-rounded.js';
-export {SIZE} from './constants.js';
+export { default as ProgressBar } from './progressbar.js';
+export { default as ProgressBarRounded } from './progressbar-rounded.js';
+export { SIZE } from './constants.js';
 // Styled elements
 export {
   StyledRoot,

package/progress-bar/progressbar-rounded.js

@@ -140,28 +140,31 @@ function ProgressBarRounded(_ref) {
     loop();
   }, [progress]); // We want *only* `progress` to trigger this effect
 
-  return /*#__PURE__*/React.createElement(Root, _extends({
-    "data-baseweb": "progressbar-rounded",
-    role: "progressbar",
-    "aria-valuenow": progress,
-    "aria-valuemin": 0,
-    "aria-valuemax": 1,
-    $size: size,
-    $inline: inline
-  }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
-    $size: size
-  }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
-    $size: size
-  }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground // $FlowFixMe
-  , _extends({
-    ref: pathRef,
-    $size: size,
-    $visible: !!pathRef.current,
-    $pathLength: pathLength,
-    $pathProgress: pathProgress
-  }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
-    $size: size
-  }, textProps), roundTo(Math.min(progress * 100, 100)), "%"));
+  return (
+    /*#__PURE__*/
+    // $FlowExpectedError[cannot-spread-inexact]
+    React.createElement(Root, _extends({
+      "data-baseweb": "progressbar-rounded",
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 1,
+      $size: size,
+      $inline: inline
+    }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
+      $size: size
+    }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
+      $size: size
+    }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground, _extends({
+      ref: pathRef,
+      $size: size,
+      $visible: !!pathRef.current,
+      $pathLength: pathLength,
+      $pathProgress: pathProgress
+    }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
+      $size: size
+    }, textProps), roundTo(Math.min(progress * 100, 100)), "%"))
+  );
 }
 
 var _default = ProgressBarRounded;

package/progress-bar/progressbar-rounded.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* global window */
 import * as React from 'react';
-import {SIZE} from './constants.js';
+import { SIZE } from './constants.js';
 import {
   StyledProgressBarRoundedRoot,
   StyledProgressBarRoundedSvg,
@@ -15,8 +15,8 @@ import {
   StyledProgressBarRoundedTrackForeground,
   StyledProgressBarRoundedText,
 } from './styled-components.js';
-import {useOverrides} from '../helpers/overrides.js';
-import type {ProgressBarRoundedPropsT} from './types.js';
+import { useOverrides } from '../helpers/overrides.js';
+import type { ProgressBarRoundedPropsT } from './types.js';
 
 const defaults = {
   Root: StyledProgressBarRoundedRoot,
@@ -81,9 +81,8 @@ function ProgressBarRounded({
       let animationTimeElapsed = now - animationTimeStarted;
       // Move out of state - might need to reverse calculate the path progress for interruped animations
       let currentPathProgress = Math.min(
-        (progress - pathProgress) * (animationTimeElapsed / animationDuration) +
-          pathProgress,
-        1,
+        (progress - pathProgress) * (animationTimeElapsed / animationDuration) + pathProgress,
+        1
       );
       currentPathProgress = Math.max(currentPathProgress, 0);
       setPathProgress(currentPathProgress);
@@ -95,6 +94,7 @@ function ProgressBarRounded({
   }, [progress]); // We want *only* `progress` to trigger this effect
 
   return (
+    // $FlowExpectedError[cannot-spread-inexact]
     <Root
       data-baseweb="progressbar-rounded"
       role="progressbar"
@@ -106,10 +106,12 @@ function ProgressBarRounded({
       {...restProps}
       {...rootProps}
     >
+      {/* $FlowExpectedError[cannot-spread-inexact] */}
       <Svg $size={size} {...restProps} {...svgProps}>
+        {/* $FlowExpectedError[cannot-spread-inexact] */}
         <TrackBackground $size={size} {...trackBackgroundProps} />
+        {/* $FlowExpectedError[cannot-spread-inexact] */}
         <TrackForeground
-          // $FlowFixMe
           ref={pathRef}
           $size={size}
           $visible={!!pathRef.current}
@@ -118,6 +120,7 @@ function ProgressBarRounded({
           {...trackForegroundProps}
         />
       </Svg>
+      {/* $FlowExpectedError[cannot-spread-inexact] */}
       <Text $size={size} {...textProps}>
         {roundTo(Math.min(progress * 100, 100))}%
       </Text>

package/progress-bar/progressbar.js

@@ -84,7 +84,6 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          ariaLabel = _this$props.ariaLabel,
           _this$props$overrides = _this$props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides,
           getProgressLabel = _this$props.getProgressLabel,
@@ -98,8 +97,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           infinite = _this$props.infinite,
           errorMessage = _this$props.errorMessage,
           forwardedRef = _this$props.forwardedRef,
-          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]); // fallback on successValue (and it's default) if maxValue is not set by user
+          restProps = _objectWithoutProperties(_this$props, ["overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]);
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel; // fallback on successValue (and it's default) if maxValue is not set by user
 
       var maximumValue = maxValue !== 100 ? maxValue : successValue;
 
@@ -199,9 +199,13 @@ _defineProperty(ProgressBar, "defaultProps", {
 });
 
 var ForwardedProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
-    forwardedRef: ref
-  }, props));
+  return (
+    /*#__PURE__*/
+    //$FlowExpectedError[cannot-spread-inexact]
+    React.createElement(ProgressBar, _extends({
+      forwardedRef: ref
+    }, props))
+  );
 });
 ForwardedProgressBar.displayName = 'ProgressBar';
 var _default = ForwardedProgressBar;

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<
-  // eslint-disable-next-line flowtype/no-weak-types
-  ProgressBarPropsT & {forwardedRef: any},
+  // flowlint-next-line unclear-type:off
+  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,16 +41,13 @@ 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.');
       }
     }
   }
 
   render() {
     const {
-      ariaLabel,
       overrides = {},
       getProgressLabel,
       value,
@@ -67,23 +62,18 @@ class ProgressBar extends React.Component<
       forwardedRef,
       ...restProps
     } = this.props;
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     // fallback on successValue (and it's default) if maxValue is not set by user
     const maximumValue = maxValue !== 100 ? maxValue : successValue;
     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,12 +130,12 @@ class ProgressBar extends React.Component<
   }
 }
 
-const ForwardedProgressBar = React.forwardRef<
-  $Shape<ProgressBarPropsT>,
-  HTMLDivElement,
->((props: ProgressBarPropsT, ref) => (
-  <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;