refactor: add support for disabling the animation globally (#2929)

* refactor: add support for disabling the animation globally

* chore(docs): disableAnimation removed from global provider

* feat(docs): nextui provider api updated, storybook preview adjusted

* chore(theme): button is scalable when disabled, tooltip animation improved

.changeset/seven-bears-vanish.md

@@ -0,0 +1,40 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/avatar": patch
+"@nextui-org/badge": patch
+"@nextui-org/breadcrumbs": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/checkbox": patch
+"@nextui-org/date-input": patch
+"@nextui-org/date-picker": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/image": patch
+"@nextui-org/input": patch
+"@nextui-org/link": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/pagination": patch
+"@nextui-org/popover": patch
+"@nextui-org/progress": patch
+"@nextui-org/radio": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/skeleton": patch
+"@nextui-org/slider": patch
+"@nextui-org/snippet": patch
+"@nextui-org/switch": patch
+"@nextui-org/table": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/react": patch
+"@nextui-org/system": patch
+"@nextui-org/theme": patch
+"@nextui-org/framer-utils": patch
+---
+
+Add support for disabling the animations globally.

apps/docs/config/routes.json

@@ -154,7 +154,8 @@
           "key": "badge",
           "title": "Badge",
           "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx"
+          "path": "/docs/components/badge.mdx",
+          "updated": true
         },
         {
           "key": "button",
@@ -334,7 +335,8 @@
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx"
+          "path": "/docs/components/skeleton.mdx",
+          "updated": true
         },
         {
           "key": "snippet",

apps/docs/content/docs/components/badge.mdx

@@ -9,7 +9,7 @@ import {badgeContent} from "@/content/components/badge";
 
 Badges are used as a small numerical value or status descriptor for UI elements.
 
-<ComponentLinks component="badge" rscCompatible />
+<ComponentLinks component="badge" />
 
 ---
 

apps/docs/content/docs/components/skeleton.mdx

@@ -9,7 +9,7 @@ import {skeletonContent} from "@/content/components/skeleton";
 
 Skeleton is a placeholder to show a loading state and the expected shape of a component.
 
-<ComponentLinks component="skeleton" rscCompatible />
+<ComponentLinks component="skeleton" />
 
 ---
 

packages/components/accordion/package.json

@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=4.0.0",
+    "framer-motion": ">=10.17.0",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },

packages/components/accordion/src/use-accordion-item.ts

@@ -1,4 +1,4 @@
-import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
+import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system";
 import {useFocusRing} from "@react-aria/focus";
 import {accordionItem} from "@nextui-org/theme";
 import {clsx, callAllHandlers, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
@@ -39,6 +39,8 @@ export type UseAccordionItemProps<T extends object = {}> = Props<T> &
   Omit<AccordionItemBaseProps, "onFocusChange">;
 
 export function useAccordionItem<T extends object = {}>(props: UseAccordionItemProps<T>) {
+  const globalContext = useProviderContext();
+
   const {ref, as, item, onFocusChange} = props;
 
   const {
@@ -55,7 +57,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
     classNames: classNamesProp = {},
     isDisabled: isDisabledProp = false,
     hideIndicator = false,
-    disableAnimation = false,
+    disableAnimation = globalContext?.disableAnimation ?? false,
     keepContentMounted = false,
     disableIndicatorAnimation = false,
     HeadingComponent = as || "h2",

packages/components/accordion/src/use-accordion.ts

@@ -1,8 +1,8 @@
-import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import type {SelectionBehavior, MultipleSelection} from "@react-types/shared";
 import type {AriaAccordionProps} from "@react-types/accordion";
 import type {AccordionGroupVariantProps} from "@nextui-org/theme";
 
+import {useProviderContext, type HTMLNextUIProps, type PropGetter} from "@nextui-org/system";
 import {ReactRef, filterDOMProps} from "@nextui-org/react-utils";
 import React, {Key, useCallback} from "react";
 import {TreeState, useTreeState} from "@react-stately/tree";
@@ -73,6 +73,8 @@ export type ValuesType<T extends object = {}> = {
 };
 
 export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
+  const globalContext = useProviderContext();
+
   const {
     ref,
     as,
@@ -97,7 +99,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
     isDisabled = false,
     showDivider = true,
     hideIndicator = false,
-    disableAnimation = false,
+    disableAnimation = globalContext?.disableAnimation ?? false,
     disableIndicatorAnimation = false,
     itemClasses,
     ...otherProps

packages/components/autocomplete/package.json

@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=4.0.0",
+    "framer-motion": ">=10.17.0",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },

packages/components/autocomplete/src/use-autocomplete.ts

@@ -1,6 +1,7 @@
 import type {AutocompleteVariantProps, SlotsToClasses, AutocompleteSlots} from "@nextui-org/theme";
+import type {DOMAttributes, HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
-import {DOMAttributes, HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {mapPropsVariants, useProviderContext} from "@nextui-org/system";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 import {autocomplete} from "@nextui-org/theme";
 import {useFilter} from "@react-aria/i18n";
@@ -120,8 +121,11 @@ export type UseAutocompleteProps<T> = Props<T> &
   AutocompleteVariantProps;
 
 export function useAutocomplete<T extends object>(originalProps: UseAutocompleteProps<T>) {
+  const globalContext = useProviderContext();
+
   const [props, variantProps] = mapPropsVariants(originalProps, autocomplete.variantKeys);
-  const disableAnimation = originalProps.disableAnimation ?? false;
+  const disableAnimation =
+    originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
 
   // TODO: Remove disableClearable prop in the next minor release.
   const isClearable =

packages/components/avatar/src/use-avatar.ts

@@ -1,7 +1,7 @@
 import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {avatar} from "@nextui-org/theme";
-import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
+import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, safeText, dataAttr} from "@nextui-org/shared-utils";
@@ -96,7 +96,8 @@ interface Props extends HTMLNextUIProps<"span"> {
 export type UseAvatarProps = Props &
   Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
 
-export function useAvatar(props: UseAvatarProps = {}) {
+export function useAvatar(originalProps: UseAvatarProps = {}) {
+  const globalContext = useProviderContext();
   const groupContext = useAvatarGroupContext();
   const isInGroup = !!groupContext;
 
@@ -124,7 +125,7 @@ export function useAvatar(props: UseAvatarProps = {}) {
     className,
     onError,
     ...otherProps
-  } = props;
+  } = originalProps;
 
   const Component = as || "span";
 
@@ -133,6 +134,8 @@ export function useAvatar(props: UseAvatarProps = {}) {
 
   const {isFocusVisible, isFocused, focusProps} = useFocusRing();
   const {isHovered, hoverProps} = useHover({isDisabled});
+  const disableAnimation =
+    originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
 
   const imageStatus = useImage({src, onError, ignoreFallback});
 
@@ -156,9 +159,19 @@ export function useAvatar(props: UseAvatarProps = {}) {
         isBordered,
         isDisabled,
         isInGroup,
+        disableAnimation,
         isInGridGroup: groupContext?.isGrid ?? false,
       }),
-    [color, radius, size, isBordered, isDisabled, isInGroup, groupContext?.isGrid],
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      disableAnimation,
+      isInGroup,
+      groupContext?.isGrid,
+    ],
   );
 
   const baseStyles = clsx(classNames?.base, className);
@@ -186,11 +199,12 @@ export function useAvatar(props: UseAvatarProps = {}) {
     (props = {}) => ({
       ref: imgRef,
       src: src,
+      disableAnimation,
       "data-loaded": dataAttr(isImgLoaded),
       className: slots.img({class: classNames?.img}),
       ...mergeProps(imgProps, props),
     }),
-    [slots, isImgLoaded, imgProps, src, imgRef],
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef],
   );
 
   return {

packages/components/badge/package.json

@@ -36,14 +36,15 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "@nextui-org/theme": ">=2.1.0",
+    "@nextui-org/system": ">=2.0.0"
   },
   "dependencies": {
-    "@nextui-org/system-rsc": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*"
   },
   "devDependencies": {
+    "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",

packages/components/badge/src/badge.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from "@nextui-org/system-rsc";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseBadgeProps, useBadge} from "./use-badge";
 

packages/components/badge/src/use-badge.ts

@@ -1,9 +1,9 @@
 import type {BadgeSlots, BadgeVariantProps, SlotsToClasses} from "@nextui-org/theme";
 import type {ReactNode} from "react";
-import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system-rsc";
+import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
 import {badge} from "@nextui-org/theme";
-import {mapPropsVariants} from "@nextui-org/system-rsc";
+import {mapPropsVariants, useProviderContext} from "@nextui-org/system";
 import {clsx, objectToDeps} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
@@ -45,6 +45,10 @@ interface Props extends HTMLNextUIProps<"span", "content"> {
 export type UseBadgeProps = Props & BadgeVariantProps;
 
 export function useBadge(originalProps: UseBadgeProps) {
+  const globalContext = useProviderContext();
+  const disableAnimation =
+    originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
+
   const [props, variantProps] = mapPropsVariants(originalProps, badge.variantKeys);
 
   const {as, children, className, content, classNames, ...otherProps} = props;
@@ -87,7 +91,7 @@ export function useBadge(originalProps: UseBadgeProps) {
     content,
     slots,
     classNames,
-    disableAnimation: originalProps?.disableAnimation,
+    disableAnimation,
     isInvisible: originalProps?.isInvisible,
     getBadgeProps,
   };

packages/components/badge/tsup.config.ts

@@ -4,4 +4,5 @@ export default defineConfig({
   clean: true,
   target: "es2019",
   format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
 });

packages/components/breadcrumbs/src/use-breadcrumbs.ts

@@ -2,7 +2,12 @@ import type {BreadcrumbsVariantProps, SlotsToClasses, BreadcrumbsSlots} from "@n
 import type {AriaBreadcrumbsProps} from "@react-types/breadcrumbs";
 
 import {Children, ReactNode, Key, ReactElement} from "react";
-import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {
+  HTMLNextUIProps,
+  mapPropsVariants,
+  PropGetter,
+  useProviderContext,
+} from "@nextui-org/system";
 import {breadcrumbs} from "@nextui-org/theme";
 import {filterDOMProps, pickChildren, ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {mergeProps} from "@react-aria/utils";
@@ -103,6 +108,11 @@ export type UseBreadcrumbsProps = Props &
   >;
 
 export function useBreadcrumbs(originalProps: UseBreadcrumbsProps) {
+  const globalContext = useProviderContext();
+
+  const disableAnimation =
+    originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
+
   const [props, variantProps] = mapPropsVariants(originalProps, breadcrumbs.variantKeys);
 
   const {
@@ -117,7 +127,6 @@ export function useBreadcrumbs(originalProps: UseBreadcrumbsProps) {
     itemsAfterCollapse = 2,
     maxItems = 8,
     hideSeparator,
-    disableAnimation,
     renderEllipsis,
     className,
     classNames,

packages/components/button/package.json

@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=4.0.0",
+    "framer-motion": ">=10.17.0",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },

packages/components/button/src/use-button-group.ts

@@ -3,7 +3,12 @@ import type {ReactRef} from "@nextui-org/react-utils";
 import type {ButtonGroupVariantProps} from "@nextui-org/theme";
 
 import {buttonGroup} from "@nextui-org/theme";
-import {HTMLNextUIProps, PropGetter, mapPropsVariants} from "@nextui-org/system";
+import {
+  HTMLNextUIProps,
+  PropGetter,
+  mapPropsVariants,
+  useProviderContext,
+} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useMemo, useCallback} from "react";
 import {objectToDeps} from "@nextui-org/shared-utils";
@@ -40,6 +45,7 @@ export type UseButtonGroupProps = Props &
   >;
 
 export function useButtonGroup(originalProps: UseButtonGroupProps) {
+  const globalContext = useProviderContext();
   const [props, variantProps] = mapPropsVariants(originalProps, buttonGroup.variantKeys);
 
   const {
@@ -51,9 +57,9 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
     variant = "solid",
     radius,
     isDisabled = false,
-    disableAnimation = false,
-    disableRipple = false,
     isIconOnly = false,
+    disableRipple = globalContext?.disableRipple ?? false,
+    disableAnimation = globalContext?.disableAnimation ?? false,
     className,
     ...otherProps
   } = props;