fix(clerk-js): Remove animations and @formkit/auto-animate library

Author: octoper

package-lock.json

@@ -56,7 +56,6 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@floating-ui/react": "0.25.4",
-    "@formkit/auto-animate": "^0.8.1",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "browser-tabs-lock": "1.2.15",

packages/clerk-js/package.json

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Animated } from '../elements';
-
 type WizardProps = React.PropsWithChildren<{
   step: number;
 }>;
@@ -28,5 +26,5 @@ export const useWizard = (params: UseWizardProps = {}) => {
 export const Wizard = (props: WizardProps) => {
   const { step, children } = props;
 
-  return <Animated>{React.Children.toArray(children)[step]}</Animated>;
+  return React.Children.toArray(children)[step];
 };

packages/clerk-js/src/ui/common/Wizard.tsx

@@ -4,7 +4,6 @@ import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
-  Animated,
   Card,
   Header,
   Tab,
@@ -63,43 +62,39 @@ export const OrganizationMembers = withCardStateProvider(() => {
         elementId={descriptors.profilePage.setId('organizationMembers')}
         gap={4}
       >
-        <Action.Root animate={false}>
-          <Animated asChild>
-            <Header.Root
-              contentSx={{
-                [mqu.md]: {
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                },
-              }}
-            >
-              <Header.Title
-                localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
-                textVariant='h2'
-              />
-              {canManageMemberships && (
-                <Action.Trigger value='invite'>
-                  <InviteMembersButton
-                    sx={{
-                      display: 'none',
-                      [mqu.md]: {
-                        display: 'inline-flex',
-                      },
-                    }}
-                  />
-                </Action.Trigger>
-              )}
-            </Header.Root>
-          </Animated>
+        <Action.Root>
+          <Header.Root
+            contentSx={{
+              [mqu.md]: {
+                flexDirection: 'row',
+                width: '100%',
+                justifyContent: 'space-between',
+              },
+            }}
+          >
+            <Header.Title
+              localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
+              textVariant='h2'
+            />
+            {canManageMemberships && (
+              <Action.Trigger value='invite'>
+                <InviteMembersButton
+                  sx={{
+                    display: 'none',
+                    [mqu.md]: {
+                      display: 'inline-flex',
+                    },
+                  }}
+                />
+              </Action.Trigger>
+            )}
+          </Header.Root>
           {canReadMemberships && (
-            <Animated>
-              <Action.Open value='invite'>
-                <Action.Card>
-                  <InviteMembersScreen />
-                </Action.Card>
-              </Action.Open>
-            </Animated>
+            <Action.Open value='invite'>
+              <Action.Card>
+                <InviteMembersScreen />
+              </Action.Card>
+            </Action.Open>
           )}
           <Tabs>
             <TabsList>
@@ -118,22 +113,20 @@ export const OrganizationMembers = withCardStateProvider(() => {
               )}
             </TabsList>
             {canManageMemberships && (
-              <Animated asChild>
-                <Flex
-                  justify='end'
-                  sx={{
-                    width: '100%',
-                    marginLeft: 'auto',
-                    [mqu.md]: {
-                      display: 'none',
-                    },
-                  }}
-                >
-                  <Action.Trigger value='invite'>
-                    <InviteMembersButton />
-                  </Action.Trigger>
-                </Flex>
-              </Animated>
+              <Flex
+                justify='end'
+                sx={{
+                  width: '100%',
+                  marginLeft: 'auto',
+                  [mqu.md]: {
+                    display: 'none',
+                  },
+                }}
+              >
+                <Action.Trigger value='invite'>
+                  <InviteMembersButton />
+                </Action.Trigger>
+              </Flex>
             )}
             <TabPanels>
               {canReadMemberships && (

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -2,9 +2,7 @@ import { createContextAndHook } from '@clerk/shared/react';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useState } from 'react';
 
-import { Animated } from '..';
-
-type ActionRootProps = PropsWithChildren<{ animate?: boolean }>;
+type ActionRootProps = PropsWithChildren;
 
 export const [ActionContext, useActionContext, _] = createContextAndHook<{
   active: string | null;
@@ -13,7 +11,7 @@ export const [ActionContext, useActionContext, _] = createContextAndHook<{
 }>('ActionContext');
 
 export const ActionRoot = (props: ActionRootProps) => {
-  const { animate = true, children } = props;
+  const { children } = props;
   const [active, setActive] = useState<string | null>(null);
 
   const close = useCallback(() => {
@@ -26,9 +24,5 @@ export const ActionRoot = (props: ActionRootProps) => {
 
   const body = <ActionContext.Provider value={{ value: { active, open, close } }}>{children}</ActionContext.Provider>;
 
-  if (animate) {
-    return <Animated>{body}</Animated>;
-  }
-
   return body;
 };

packages/clerk-js/src/ui/elements/Action/ActionRoot.tsx

@@ -7,7 +7,7 @@ import type { ElementDescriptor, ElementId } from '../customizables/elementDescr
 import { Plus } from '../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { mqu } from '../styledSystem';
-import { Animated, ArrowBlockButton, Menu, MenuItem, MenuList, MenuTrigger } from '.';
+import { ArrowBlockButton, Menu, MenuItem, MenuList, MenuTrigger } from '.';
 
 type ProfileSectionProps = Omit<PropsOfComponent<typeof Flex>, 'title'> & {
   title: LocalizationKey;
@@ -99,18 +99,16 @@ const ProfileSectionItemList = (props: ProfileSectionItemListProps) => {
   const { children, id, ...rest } = props;
 
   return (
-    <Animated asChild>
-      <Col
-        elementDescriptor={descriptors.profileSectionItemList}
-        elementId={descriptors.profileSectionItemList.setId(id)}
-        sx={t => ({
-          gap: t.space.$0x5,
-        })}
-        {...rest}
-      >
-        {children}
-      </Col>
-    </Animated>
+    <Col
+      elementDescriptor={descriptors.profileSectionItemList}
+      elementId={descriptors.profileSectionItemList.setId(id)}
+      sx={t => ({
+        gap: t.space.$0x5,
+      })}
+      {...rest}
+    >
+      {children}
+    </Col>
   );
 };
 

packages/clerk-js/src/ui/elements/Animated.tsx

@@ -56,4 +56,3 @@ export * from './withAvatarShimmer';
 export * from './Card';
 export * from './ProfileCard';
 export * from './Gauge';
-export * from './Animated';