⬆️ Upgrade "framer-motion" to "motion"

TobitSoftware · Feb 10, 2025 · 9156036 · 9156036
1 parent a9fb537
commit 9156036
Show file tree

Hide file tree

Showing 76 changed files with 4,355 additions and 2,867 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/code-highlighter/package.json b/packages/code-highlighter/package.json
@@ -76,7 +76,7 @@
     },
     "peerDependencies": {
         "chayns-api": ">=2.0.0",
-        "framer-motion": ">=10.18.0",
+        "motion": ">=12.4.1",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "styled-components": ">=5.3.11"

diff --git a/packages/color-picker/package.json b/packages/color-picker/package.json
@@ -74,7 +74,7 @@
     },
     "peerDependencies": {
         "chayns-api": ">=2.0.0",
-        "framer-motion": ">=10.18.0",
+        "motion": ">=12.4.1",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "styled-components": ">=5.3.11"

diff --git a/packages/color-picker/src/components/color-picker-popup/color-area/ColorArea.styles.ts b/packages/color-picker/src/components/color-picker-popup/color-area/ColorArea.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 
 export const StyledColorArea = styled.div`

diff --git a/packages/color-picker/src/components/color-picker-popup/color-area/ColorArea.tsx b/packages/color-picker/src/components/color-picker-popup/color-area/ColorArea.tsx
@@ -8,7 +8,7 @@ import {
 
 import { hsvToHex } from '@chayns/colors';
 import { setRefreshScrollEnabled } from 'chayns-api';
-import { useDragControls, useMotionValue } from 'framer-motion';
+import { useDragControls, useMotionValue } from 'motion/react';
 import type { Scale } from '../../../types/colorPicker';
 import {
     extractRgbValues,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -80,7 +80,7 @@
     },
     "peerDependencies": {
         "chayns-api": ">=2.0.0",
-        "framer-motion": ">=10.18.0",
+        "motion": ">=12.4.1",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "styled-components": ">=5.3.11"

diff --git a/packages/core/src/components/accordion/Accordion.styles.ts b/packages/core/src/components/accordion/Accordion.styles.ts
@@ -1,6 +1,6 @@
-import {motion} from 'framer-motion';
-import styled, {css} from 'styled-components';
-import type {WithTheme} from '../color-scheme-provider/ColorSchemeProvider';
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 
 type StyledMotionAccordionProps = WithTheme<{
     $isOpen: boolean;
@@ -14,44 +14,45 @@ type StyledMotionAccordionProps = WithTheme<{
 
 export const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`
     ${({
-           $isOpen,
-           $isWrapped,
-           $shouldForceBackground,
-           $shouldHideBackground,
-           theme,
-       }: StyledMotionAccordionProps) =>
-            ($isOpen || $shouldForceBackground) &&
-            !$isWrapped &&
-            !$shouldHideBackground &&
-            css`
-                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-                border-radius: ${theme.cardBorderRadius}px;
-                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
-            `}
+        $isOpen,
+        $isWrapped,
+        $shouldForceBackground,
+        $shouldHideBackground,
+        theme,
+    }: StyledMotionAccordionProps) =>
+        ($isOpen || $shouldForceBackground) &&
+        !$isWrapped &&
+        !$shouldHideBackground &&
+        css`
+            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            border-radius: ${theme.cardBorderRadius}px;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `}
 
-    ${({theme}: StyledMotionAccordionProps) =>
-            theme.accordionLines &&
-            css`
-                border-bottom: 1px solid transparent;
-            `}
+    ${({ theme }: StyledMotionAccordionProps) =>
+        theme.accordionLines &&
+        css`
+            border-bottom: 1px solid transparent;
+        `}
 
-    margin-bottom: ${({$isOpen, $isWrapped}: StyledMotionAccordionProps) =>
-            $isOpen && !$isWrapped ? '30px' : '0px'};
-    transition: background-color 0.3s ease,
-    border-bottom-color 0.3s ease,
-    border-radius 0.3s ease,
-    box-shadow 0.3s ease,
-    margin-bottom 0.3s ease;
+    margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>
+        $isOpen && !$isWrapped ? '30px' : '0px'};
+    transition:
+        background-color 0.3s ease,
+        border-bottom-color 0.3s ease,
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease,
+        margin-bottom 0.3s ease;
     will-change: unset !important;
 
     ${({
-           $isOpen,
-           $isWrapped,
-           $shouldForceBackground,
-           $shouldShowLines,
-           $shouldHideBottomLine,
-           theme,
-       }: StyledMotionAccordionProps) => {
+        $isOpen,
+        $isWrapped,
+        $shouldForceBackground,
+        $shouldShowLines,
+        $shouldHideBottomLine,
+        theme,
+    }: StyledMotionAccordionProps) => {
         if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
 
         if (theme.accordionLines) {
@@ -70,22 +71,22 @@ export const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionPro
 
         return undefined;
     }}
-    ${({$isParentWrapped}: StyledMotionAccordionProps) =>
-            $isParentWrapped &&
-            css`
-                padding-left: 17px;
-            `}
-    ${({$isWrapped}: StyledMotionAccordionProps) =>
-            !$isWrapped &&
-            css`
-                margin-top: 10px;
-            `}
-    ${({$isWrapped, $shouldHideBackground, theme}: StyledMotionAccordionProps) =>
-            !$isWrapped &&
-            !$shouldHideBackground &&
-            css`
-                &:hover {
-                    background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-                }
-            `};
+    ${({ $isParentWrapped }: StyledMotionAccordionProps) =>
+        $isParentWrapped &&
+        css`
+            padding-left: 17px;
+        `}
+    ${({ $isWrapped }: StyledMotionAccordionProps) =>
+        !$isWrapped &&
+        css`
+            margin-top: 10px;
+        `}
+    ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>
+        !$isWrapped &&
+        !$shouldHideBackground &&
+        css`
+            &:hover {
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            }
+        `};
 `;
diff --git a/packages/core/src/components/accordion/Accordion.tsx b/packages/core/src/components/accordion/Accordion.tsx
@@ -1,4 +1,4 @@
-import {AnimatePresence, MotionConfig} from 'framer-motion';
+import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, {
     ChangeEventHandler,
     FC,
@@ -13,14 +13,14 @@ import React, {
     type CSSProperties,
     type MouseEventHandler,
 } from 'react';
-import {useUuid} from '../../hooks/uuid';
-import {AreaContext} from '../area-provider/AreaContextProvider';
-import type {InputProps} from '../input/Input';
+import { useUuid } from '../../hooks/uuid';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import type { InputProps } from '../input/Input';
 import AccordionBody from './accordion-body/AccordionBody';
-import {AccordionGroupContext} from './accordion-group/AccordionGroup';
+import { AccordionGroupContext } from './accordion-group/AccordionGroup';
 import AccordionHead from './accordion-head/AccordionHead';
-import {AccordionWrappedContext} from './accordion-provider/AccordionContextProvider';
-import {StyledMotionAccordion} from './Accordion.styles';
+import { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';
+import { StyledMotionAccordion } from './Accordion.styles';
 
 export const AccordionContext = React.createContext<{ isWrapped?: boolean }>({
     isWrapped: undefined,
@@ -148,45 +148,45 @@ export type AccordionProps = {
 };
 
 const Accordion: FC<AccordionProps> = ({
-                                           bodyMaxHeight,
-                                           children,
-                                           icon,
-                                           isDefaultOpen = false,
-                                           isDisabled = false,
-                                           isFixed = false,
-                                           isOpened,
-                                           isTitleGreyed = false,
-                                           onBodyScroll,
-                                           onClose,
-                                           onHoverEnd,
-                                           onHoverStart,
-                                           onOpen,
-                                           onSearchChange,
-                                           rightElement,
-                                           searchPlaceholder,
-                                           searchValue,
-                                           shouldForceBackground = false,
-                                           shouldHideBackground = false,
-                                           shouldRenderClosed = false,
-                                           shouldRotateIcon = true,
-                                           shouldHideBottomLine = false,
-                                           title,
-                                           titleElement,
-                                           onTitleInputChange,
-                                           titleInputProps,
-                                           titleColor,
-                                           onBodyAnimationComplete,
-                                       }) => {
+    bodyMaxHeight,
+    children,
+    icon,
+    isDefaultOpen = false,
+    isDisabled = false,
+    isFixed = false,
+    isOpened,
+    isTitleGreyed = false,
+    onBodyScroll,
+    onClose,
+    onHoverEnd,
+    onHoverStart,
+    onOpen,
+    onSearchChange,
+    rightElement,
+    searchPlaceholder,
+    searchValue,
+    shouldForceBackground = false,
+    shouldHideBackground = false,
+    shouldRenderClosed = false,
+    shouldRotateIcon = true,
+    shouldHideBottomLine = false,
+    title,
+    titleElement,
+    onTitleInputChange,
+    titleInputProps,
+    titleColor,
+    onBodyAnimationComplete,
+}) => {
     const {
         isWrapped: groupIsWrapped,
         openAccordionUuid,
         accordionGroupUuid,
         accordionUuids,
         updateOpenAccordionUuid,
     } = useContext(AccordionGroupContext);
-    const {isWrapped: isParentWrapped} = useContext(AccordionContext);
+    const { isWrapped: isParentWrapped } = useContext(AccordionContext);
 
-    const {isWrapped: contextIsWrapped} = useContext(AccordionWrappedContext);
+    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);
     const isWrapped = useMemo(
         () => groupIsWrapped ?? contextIsWrapped,
         [contextIsWrapped, groupIsWrapped],
@@ -254,7 +254,7 @@ const Accordion: FC<AccordionProps> = ({
     useEffect(() => {
         if (isDefaultOpen) {
             if (typeof updateOpenAccordionUuid === 'function') {
-                updateOpenAccordionUuid(uuid, {shouldOnlyOpen: true});
+                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });
             } else {
                 setIsAccordionOpen(true);
             }
@@ -272,20 +272,20 @@ const Accordion: FC<AccordionProps> = ({
     }, [isOpened, updateOpenAccordionUuid, uuid]);
 
     const accordionContextProviderValue = useMemo(
-        () => ({isWrapped: isWrapped === true}),
+        () => ({ isWrapped: isWrapped === true }),
         [isWrapped],
     );
 
-    const areaContextProviderValue = useMemo(() => ({shouldChangeColor: true}), []);
+    const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);
 
-    const accordionWrappedContextProviderValue = useMemo(() => ({isWrapped: true}), []);
+    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);
     return (
         <StyledMotionAccordion
-            animate={{height: 'auto', opacity: 1}}
+            animate={{ height: 'auto', opacity: 1 }}
             data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}
             className="beta-chayns-accordion"
-            exit={{height: 0, opacity: 0}}
-            initial={{height: 0, opacity: 0}}
+            exit={{ height: 0, opacity: 0 }}
+            initial={{ height: 0, opacity: 0 }}
             $isOpen={isOpen}
             $shouldShowLines={!isLastAccordion || !isWrapped}
             $isParentWrapped={isParentWrapped}
@@ -297,7 +297,7 @@ const Accordion: FC<AccordionProps> = ({
             onMouseLeave={onHoverEnd}
         >
             <AccordionContext.Provider value={accordionContextProviderValue}>
-                <MotionConfig transition={{type: 'tween'}}>
+                <MotionConfig transition={{ type: 'tween' }}>
                     <AccordionHead
                         uuid={uuid}
                         icon={icon}

diff --git a/packages/core/src/components/accordion/accordion-body/AccordionBody.styles.ts b/packages/core/src/components/accordion/accordion-body/AccordionBody.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { BrowserName } from '../../../types/chayns';
 import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';

diff --git a/packages/core/src/components/accordion/accordion-group/AccordionGroup.tsx b/packages/core/src/components/accordion/accordion-group/AccordionGroup.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, MotionConfig } from 'framer-motion';
+import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, {
     Dispatch,
     FC,

diff --git a/packages/core/src/components/accordion/accordion-head/AccordionHead.styles.ts b/packages/core/src/components/accordion/accordion-head/AccordionHead.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { CSSProperties } from 'react';
 import styled, { css } from 'styled-components';
 import type {

diff --git a/packages/core/src/components/accordion/accordion-head/AccordionHead.tsx b/packages/core/src/components/accordion/accordion-head/AccordionHead.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { AnimatePresence, LayoutGroup } from 'motion/react';
 import React, {
     ChangeEvent,
     ChangeEventHandler,

diff --git a/packages/core/src/components/amount-control/AmountControl.styles.ts b/packages/core/src/components/amount-control/AmountControl.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { DisplayState } from './AmountControl';

diff --git a/packages/core/src/components/amount-control/AmountControl.tsx b/packages/core/src/components/amount-control/AmountControl.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, {
     ChangeEvent,
     FC,
@@ -124,7 +124,7 @@ const AmountControl: FC<AmountControlProps> = ({
      * Function that sets the amountValue to the amount
      */
     useEffect(() => {
-        if (typeof amount !== "number") {
+        if (typeof amount !== 'number') {
             return;
         }
 

diff --git a/packages/core/src/components/button/Button.styles.ts b/packages/core/src/components/button/Button.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';
 import { useTheme } from 'styled-components';
 import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';

diff --git a/packages/core/src/components/combobox/ComboBox.styles.ts b/packages/core/src/components/combobox/ComboBox.styles.ts
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { CSSProperties } from 'react';
 import styled, { css } from 'styled-components';
 import { BrowserName } from '../../types/chayns';

diff --git a/packages/core/src/components/combobox/ComboBox.tsx b/packages/core/src/components/combobox/ComboBox.tsx
@@ -1,5 +1,5 @@
 import { useDevice, useFunctions, useValues } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, {
     ChangeEventHandler,
     FC,

diff --git a/packages/core/src/components/context-menu/ContextMenu.tsx b/packages/core/src/components/context-menu/ContextMenu.tsx
@@ -1,5 +1,5 @@
 import { createDialog, DialogType } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, {
     forwardRef,
     MouseEvent,