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

package/popover/popover.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import FocusLock, {MoveFocusInside} from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 
-import {getOverride, getOverrideProps} from '../helpers/overrides.js';
+import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import {
   ACCESSIBILITY_TYPE,
   PLACEMENT,
@@ -17,16 +17,16 @@ import {
   ANIMATE_IN_TIME,
   POPOVER_MARGIN,
 } from './constants.js';
-import {Layer, TetherBehavior} from '../layer/index.js';
+import { Layer, TetherBehavior } from '../layer/index.js';
 import {
   Arrow as StyledArrow,
   Body as StyledBody,
   Inner as StyledInner,
   Hidden,
 } from './styled-components.js';
-import {fromPopperPlacement} from './utils.js';
+import { fromPopperPlacement } from './utils.js';
 import defaultProps from './default-props.js';
-import {useUID} from 'react-uid';
+import { useUID } from 'react-uid';
 
 import type {
   AnchorPropsT,
@@ -35,12 +35,9 @@ import type {
   SharedStylePropsArgT,
   ReactRefT,
 } from './types.js';
-import type {PopperDataObjectT, NormalizedOffsetsT} from '../layer/types.js';
+import type { PopperDataObjectT, NormalizedOffsetsT } from '../layer/types.js';
 
-class PopoverInner extends React.Component<
-  PopoverPropsT,
-  PopoverPrivateStateT,
-> {
+class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   static defaultProps: $Shape<PopoverPropsT> = defaultProps;
 
   /* eslint-disable react/sort-comp */
@@ -62,13 +59,10 @@ class PopoverInner extends React.Component<
   state = this.getDefaultState(this.props);
 
   componentDidMount() {
-    this.setState({isMounted: true});
+    this.setState({ isMounted: true });
   }
 
-  componentDidUpdate(
-    prevProps: PopoverPropsT,
-    prevState: PopoverPrivateStateT,
-  ) {
+  componentDidUpdate(prevProps: PopoverPropsT, prevState: PopoverPrivateStateT) {
     this.init(prevProps, prevState);
     if (
       this.props.autoFocus &&
@@ -76,7 +70,7 @@ class PopoverInner extends React.Component<
       this.popperRef.current !== null &&
       this.popperRef.current.getBoundingClientRect().top > 0
     ) {
-      this.setState({autoFocusAfterPositioning: true});
+      this.setState({ autoFocusAfterPositioning: true });
     }
 
     if (__DEV__) {
@@ -85,7 +79,7 @@ class PopoverInner extends React.Component<
         console.warn(
           `[baseui][Popover] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`,
+              http://baseui.design/components/popover#anchor-ref-handling-example`
         );
       }
     }
@@ -119,8 +113,8 @@ class PopoverInner extends React.Component<
   getDefaultState(props: PopoverPropsT) {
     return {
       isAnimating: false,
-      arrowOffset: {left: 0, top: 0},
-      popoverOffset: {left: 0, top: 0},
+      arrowOffset: { left: 0, top: 0 },
+      popoverOffset: { left: 0, top: 0 },
       placement: props.placement,
       isMounted: false,
       isLayerMounted: false,
@@ -130,13 +124,13 @@ class PopoverInner extends React.Component<
 
   animateIn = () => {
     if (this.props.isOpen) {
-      this.setState({isAnimating: true});
+      this.setState({ isAnimating: true });
     }
   };
 
   animateOut = () => {
     if (!this.props.isOpen) {
-      this.setState({isAnimating: true});
+      this.setState({ isAnimating: true });
       // Remove the popover from the DOM after animation finishes
       this.animateOutCompleteTimer = setTimeout(() => {
         this.setState({
@@ -196,10 +190,7 @@ class PopoverInner extends React.Component<
     this.triggerOnMouseLeaveWithDelay(e);
   };
 
-  onPopperUpdate = (
-    normalizedOffsets: NormalizedOffsetsT,
-    data: PopperDataObjectT,
-  ) => {
+  onPopperUpdate = (normalizedOffsets: NormalizedOffsetsT, data: PopperDataObjectT) => {
     const placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
     this.setState({
       arrowOffset: normalizedOffsets.arrow,
@@ -214,12 +205,9 @@ class PopoverInner extends React.Component<
   };
 
   triggerOnMouseLeaveWithDelay(e: Event) {
-    const {onMouseLeaveDelay} = this.props;
+    const { onMouseLeaveDelay } = this.props;
     if (onMouseLeaveDelay) {
-      this.onMouseLeaveTimer = setTimeout(
-        () => this.triggerOnMouseLeave(e),
-        onMouseLeaveDelay,
-      );
+      this.onMouseLeaveTimer = setTimeout(() => this.triggerOnMouseLeave(e), onMouseLeaveDelay);
       return;
     }
     this.triggerOnMouseLeave(e);
@@ -232,12 +220,9 @@ class PopoverInner extends React.Component<
   };
 
   triggerOnMouseEnterWithDelay(e: Event) {
-    const {onMouseEnterDelay} = this.props;
+    const { onMouseEnterDelay } = this.props;
     if (onMouseEnterDelay) {
-      this.onMouseEnterTimer = setTimeout(
-        () => this.triggerOnMouseEnter(e),
-        onMouseEnterDelay,
-      );
+      this.onMouseEnterTimer = setTimeout(() => this.triggerOnMouseEnter(e), onMouseEnterDelay);
       return;
     }
     this.triggerOnMouseEnter(e);
@@ -302,7 +287,7 @@ class PopoverInner extends React.Component<
   }
 
   getAnchorProps() {
-    const {isOpen} = this.props;
+    const { isOpen } = this.props;
 
     const anchorProps: AnchorPropsT = {
       'aria-haspopup': 'true',
@@ -313,9 +298,7 @@ class PopoverInner extends React.Component<
 
     const popoverId = this.getPopoverIdAttr();
     if (this.isAccessibilityTypeMenu()) {
-      const relationAttr = this.isClickTrigger()
-        ? 'aria-controls'
-        : 'aria-owns';
+      const relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
       anchorProps[relationAttr] = isOpen ? popoverId : null;
     } else if (this.isAccessibilityTypeTooltip()) {
       anchorProps.id = this.getAnchorIdAttr();
@@ -353,9 +336,9 @@ class PopoverInner extends React.Component<
     return bodyProps;
   }
 
-  getSharedProps(): $Diff<SharedStylePropsArgT, {children?: React.Node}> {
-    const {isOpen, showArrow, popoverMargin = POPOVER_MARGIN} = this.props;
-    const {isAnimating, arrowOffset, popoverOffset, placement} = this.state;
+  getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
+    const { isOpen, showArrow, popoverMargin = POPOVER_MARGIN } = this.props;
+    const { isAnimating, arrowOffset, popoverOffset, placement } = this.state;
     return {
       $showArrow: !!showArrow,
       $arrowOffset: arrowOffset,
@@ -369,12 +352,12 @@ class PopoverInner extends React.Component<
   }
 
   getAnchorFromChildren() {
-    const {children} = this.props;
+    const { children } = this.props;
     const childArray = React.Children.toArray(children);
     if (childArray.length !== 1) {
       // eslint-disable-next-line no-console
       console.error(
-        `[baseui] Exactly 1 child must be passed to Popover/Tooltip, found ${childArray.length} children`,
+        `[baseui] Exactly 1 child must be passed to Popover/Tooltip, found ${childArray.length} children`
       );
     }
     return childArray[0];
@@ -396,13 +379,9 @@ class PopoverInner extends React.Component<
   }
 
   renderPopover(renderedContent: React.Node) {
-    const {showArrow, overrides = {}} = this.props;
+    const { showArrow, overrides = {} } = this.props;
 
-    const {
-      Arrow: ArrowOverride,
-      Body: BodyOverride,
-      Inner: InnerOverride,
-    } = overrides;
+    const { Arrow: ArrowOverride, Body: BodyOverride, Inner: InnerOverride } = overrides;
 
     const Arrow = getOverride(ArrowOverride) || StyledArrow;
     const Body = getOverride(BodyOverride) || StyledBody;
@@ -436,19 +415,18 @@ class PopoverInner extends React.Component<
   }
 
   renderContent() {
-    const {content} = this.props;
+    const { content } = this.props;
     return typeof content === 'function' ? content() : content;
   }
 
   render() {
     const mountedAndOpen = this.state.isMounted && this.props.isOpen;
     const rendered = [this.renderAnchor()];
-    const renderedContent =
-      mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
+    const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
 
     const defaultPopperOptions = {
       modifiers: {
-        preventOverflow: {enabled: !this.props.ignoreBoundary, padding: 0},
+        preventOverflow: { enabled: !this.props.ignoreBoundary, padding: 0 },
       },
     };
     // Only render popover on the browser (portals aren't supported server-side)
@@ -459,12 +437,10 @@ class PopoverInner extends React.Component<
             key="new-layer"
             mountNode={this.props.mountNode}
             onEscape={this.props.onEsc}
-            onDocumentClick={
-              this.isHoverTrigger() ? undefined : this.onDocumentClick
-            }
+            onDocumentClick={this.isHoverTrigger() ? undefined : this.onDocumentClick}
             isHoverLayer={this.isHoverTrigger()}
-            onMount={() => this.setState({isLayerMounted: true})}
-            onUnmount={() => this.setState({isLayerMounted: false})}
+            onMount={() => this.setState({ isLayerMounted: true })}
+            onUnmount={() => this.setState({ isLayerMounted: false })}
           >
             <TetherBehavior
               anchorRef={this.anchorRef.current}
@@ -494,16 +470,13 @@ class PopoverInner extends React.Component<
                 </FocusLock>
               ) : (
                 <MoveFocusInside
-                  disabled={
-                    !this.props.autoFocus ||
-                    !this.state.autoFocusAfterPositioning
-                  }
+                  disabled={!this.props.autoFocus || !this.state.autoFocusAfterPositioning}
                 >
                   {this.renderPopover(renderedContent)}
                 </MoveFocusInside>
               )}
             </TetherBehavior>
-          </Layer>,
+          </Layer>
         );
       } else {
         rendered.push(<Hidden key="hidden-layer">{renderedContent}</Hidden>);
@@ -514,12 +487,11 @@ class PopoverInner extends React.Component<
 }
 
 // Remove when Popover is converted to a functional component.
-const Popover = (
-  props: PopoverPropsT & {innerRef?: ReactRefT<HTMLElement>},
-) => {
-  const {innerRef} = props;
+const Popover = (props: PopoverPropsT & { innerRef?: ReactRefT<HTMLElement> }) => {
+  const { innerRef } = props;
+  const gID = useUID();
   //$FlowExpectedError[cannot-spread-inexact]
-  return <PopoverInner id={props.id || useUID()} ref={innerRef} {...props} />;
+  return <PopoverInner id={props.id || gID} ref={innerRef} {...props} />;
 };
 
 Popover.defaultProps = defaultProps;

package/popover/stateful-container.js.flow

@@ -23,10 +23,7 @@ import type {
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulContainer extends React.Component<
-  StatefulPopoverContainerPropsT,
-  StateT,
-> {
+class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT, StateT> {
   static defaultProps: $Shape<StatefulPopoverContainerPropsT> = {
     accessibilityType: ACCESSIBILITY_TYPE.menu,
     ignoreBoundary: false,
@@ -121,7 +118,7 @@ class StatefulContainer extends React.Component<
   }
 
   internalSetState(type: StateChangeTypeT, changes: StateT) {
-    const {stateReducer} = this.props;
+    const { stateReducer } = this.props;
     if (typeof stateReducer !== 'function') {
       this.setState(changes);
       return;
@@ -140,9 +137,9 @@ class StatefulContainer extends React.Component<
    * </StatefulPopover>
    */
   renderContent = () => {
-    const {content} = this.props;
+    const { content } = this.props;
     if (typeof content === 'function') {
-      return content({close: this.onContentClose});
+      return content({ close: this.onContentClose });
     }
     return content;
   };

package/popover/stateful-popover.js.flow

@@ -6,18 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {
-  ACCESSIBILITY_TYPE,
-  PLACEMENT,
-  TRIGGER_TYPE,
-  POPOVER_MARGIN,
-} from './constants.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, POPOVER_MARGIN } from './constants.js';
 import StatefulContainer from './stateful-container.js';
 import Popover from './popover.js';
-import type {StatefulPopoverPropsT} from './types.js';
+import type { StatefulPopoverPropsT } from './types.js';
 
 function StatefulPopover(props: StatefulPopoverPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
       {(popoverProps) => <Popover {...popoverProps}>{children}</Popover>}

package/popover/styled-components.js.flow

@@ -5,25 +5,21 @@ 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 {ARROW_SIZE, ARROW_WIDTH} from './constants.js';
+import { styled } from '../styles/index.js';
+import { ARROW_SIZE, ARROW_WIDTH } from './constants.js';
 import {
   getPopoverMarginStyles,
   getArrowPositionStyles,
   getStartPosition,
   getEndPosition,
 } from './utils.js';
-import type {
-  ArrowStylePropsArgT,
-  BodyStylePropsArgT,
-  InnerStylePropsArgT,
-} from './types.js';
-import type {ThemeT} from '../styles/types.js';
+import type { ArrowStylePropsArgT, BodyStylePropsArgT, InnerStylePropsArgT } from './types.js';
+import type { ThemeT } from '../styles/types.js';
 
 /**
  * Main popover container element that gets positioned next to the anchor
  */
-export function getBodyStyles(props: BodyStylePropsArgT & {$theme: ThemeT}) {
+export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
   const {
     $isOpen,
     $isAnimating,
@@ -54,24 +50,15 @@ export function getBodyStyles(props: BodyStylePropsArgT & {$theme: ThemeT}) {
     transform:
       $isAnimating && $isOpen
         ? getEndPosition($popoverOffset)
-        : getStartPosition(
-            $popoverOffset,
-            $placement,
-            $showArrow ? ARROW_SIZE : 0,
-            $popoverMargin,
-          ),
-    ...getPopoverMarginStyles(
-      $showArrow ? ARROW_SIZE : 0,
-      $placement,
-      $popoverMargin,
-    ),
+        : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin),
+    ...getPopoverMarginStyles($showArrow ? ARROW_SIZE : 0, $placement, $popoverMargin),
     ...($isHoverTrigger
       ? {
           animationDuration: '.1s',
           animationName: {
-            '0%': {pointerEvents: 'none'},
-            '99%': {pointerEvents: 'none'},
-            '100%': {pointerEvents: 'auto'},
+            '0%': { pointerEvents: 'none' },
+            '99%': { pointerEvents: 'none' },
+            '100%': { pointerEvents: 'auto' },
           },
         }
       : {}),
@@ -83,8 +70,8 @@ export const Body = styled<BodyStylePropsArgT>('div', getBodyStyles);
 /**
  * Arrow shown between the popover and the anchor element
  */
-export function getArrowStyles(props: ArrowStylePropsArgT & {$theme: ThemeT}) {
-  const {$arrowOffset, $placement, $theme} = props;
+export function getArrowStyles(props: ArrowStylePropsArgT & { $theme: ThemeT }) {
+  const { $arrowOffset, $placement, $theme } = props;
   return {
     backgroundColor: $theme.colors.backgroundTertiary,
     boxShadow: $theme.lighting.shadow600,
@@ -104,7 +91,7 @@ export const Arrow = styled<ArrowStylePropsArgT>('div', getArrowStyles);
  * and rendering this extra element on top with a solid background
  * clips the part of the arrow that extends into the popover.
  */
-export function getInnerStyles({$theme}: {$theme: ThemeT}) {
+export function getInnerStyles({ $theme }: { $theme: ThemeT }) {
   return {
     backgroundColor: $theme.colors.backgroundTertiary,
     borderTopLeftRadius: $theme.borders.popoverBorderRadius,

package/popover/types.js.flow

@@ -7,24 +7,16 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {TetherPlacementT} from '../layer/types.js';
-import {
-  ACCESSIBILITY_TYPE,
-  STATE_CHANGE_TYPE,
-  TRIGGER_TYPE,
-} from './constants.js';
-
-export type {
-  PopperDataObjectT,
-  PopperOffsetT,
-  PopperOptionsT,
-} from '../layer/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { TetherPlacementT } from '../layer/types.js';
+import { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants.js';
+
+export type { PopperDataObjectT, PopperOffsetT, PopperOptionsT } from '../layer/types.js';
 
 export type PopoverPlacementT = TetherPlacementT;
 export type TriggerTypeT = $Keys<typeof TRIGGER_TYPE>;
 export type AccessibilityTypeT = $Keys<typeof ACCESSIBILITY_TYPE>;
-export type ReactRefT<T> = {|current: null | T|};
+export type ReactRefT<T> = {| current: null | T |};
 
 export type StateT = {
   isOpen: boolean,
@@ -35,7 +27,7 @@ export type StateChangeTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) => StateT;
 
 export type ContentRenderPropT = () => React.Node;
@@ -105,10 +97,7 @@ export type BasePopoverPropsT = {
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?:
-    | boolean
-    | FocusOptions
-    | ((returnTo: Element) => boolean | FocusOptions),
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */
@@ -158,15 +147,12 @@ export type StatefulPopoverPropsT = BasePopoverPropsT & {
 // Props for state container
 export type StatefulPopoverContainerPropsT = $Diff<
   StatefulPopoverPropsT,
-  {children: React.Node},
+  { children: React.Node }
 > & {
-  children: (props: $Diff<PopoverPropsT, {children: React.Node}>) => React.Node,
+  children: (props: $Diff<PopoverPropsT, { children: React.Node }>) => React.Node,
 };
 
-export type PopoverPropsWithoutChildrenT = $Diff<
-  PopoverPropsT,
-  {children: React.Node},
->;
+export type PopoverPropsWithoutChildrenT = $Diff<PopoverPropsT, { children: React.Node }>;
 
 export type OffsetT = {
   top: number,

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')
@@ -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.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.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);