refactor: unified disabled state handling across components

.changeset/cold-avocados-visit.md

@@ -0,0 +1,10 @@
+---
+"@yamada-ui/close-button": patch
+"@yamada-ui/pagination": patch
+"@yamada-ui/calendar": patch
+"@yamada-ui/button": patch
+"@yamada-ui/ripple": patch
+"@yamada-ui/tabs": patch
+---
+
+Unify disabled state handling.

packages/components/button/src/button.tsx

@@ -96,9 +96,14 @@ export const Button = forwardRef<ButtonProps, "button">(
       ...rest
     } = omitThemeProps(mergedProps)
 
+    const trulyDisabled = isDisabled || isLoading
+
     const { ref: buttonRef, type: defaultType } = useButtonType(as)
     const ref = useMergeRefs(customRef, buttonRef)
-    const { onPointerDown, ...rippleProps } = useRipple(rest)
+    const { onPointerDown, ...rippleProps } = useRipple({
+      ...rest,
+      isDisabled: disableRipple || trulyDisabled,
+    })
 
     const css: CSSUIObject = useMemo(() => {
       const _focus =
@@ -141,7 +146,7 @@ export const Button = forwardRef<ButtonProps, "button">(
         as={as}
         className={cx("ui-button", className)}
         type={type ?? defaultType}
-        disabled={isDisabled || isLoading}
+        disabled={trulyDisabled}
         data-active={dataAttr(isActive)}
         data__loading={dataAttr(isLoading)}
         __css={css}
@@ -166,10 +171,7 @@ export const Button = forwardRef<ButtonProps, "button">(
           <Loading className="ui-button__loading--end" {...loadingProps} />
         ) : null}
 
-        <Ripple
-          isDisabled={disableRipple || isDisabled || isLoading}
-          {...rippleProps}
-        />
+        <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />
       </ui.button>
     )
   },

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

@@ -1110,6 +1110,7 @@ export const useYearList = () => {
         yearRefs.current.set(index, createRef<HTMLButtonElement>())
 
         return {
+          isDisabled,
           ref: mergeRefs(ref, yearRefs.current.get(index)),
           ...props,
           tabIndex: isControlled
@@ -1296,6 +1297,7 @@ export const useMonthList = () => {
       monthRefs.current.set(value, createRef<HTMLButtonElement>())
 
       return {
+        isDisabled,
         ref: mergeRefs(ref, monthRefs.current.get(value)),
         ...props,
         tabIndex: isControlled
@@ -1596,6 +1598,7 @@ export const useMonth = () => {
         isSelected,
         isWeekend,
         isOutside,
+        isDisabled,
         style,
         ref: mergeRefs(ref, !isOutside ? dayRefs.current.get(key) : undefined),
         ...props,

packages/components/close-button/src/close-button.tsx

@@ -33,7 +33,10 @@ export const CloseButton = forwardRef<CloseButtonProps, "button">(
     const [styles, mergedProps] = useComponentStyle("CloseButton", props)
     const { className, children, isDisabled, __css, disableRipple, ...rest } =
       omitThemeProps(mergedProps)
-    const { onPointerDown, ...rippleProps } = useRipple(rest)
+    const { onPointerDown, ...rippleProps } = useRipple({
+      ...rest,
+      isDisabled: disableRipple || isDisabled,
+    })
 
     const css: CSSUIObject = {
       position: "relative",

packages/components/pagination/src/pagination-item.tsx

@@ -61,7 +61,10 @@ export const PaginationItem: FC<PaginationItemProps> = ({
   ...rest
 }) => {
   const styles = usePaginationContext()
-  const { onPointerDown, ...rippleProps } = useRipple(rest)
+  const { onPointerDown, ...rippleProps } = useRipple({
+    ...rest,
+    isDisabled: disableRipple || isDisabled,
+  })
 
   children ??= iconMap[page] ?? page
 

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

@@ -11,38 +11,47 @@ export type RippleOptions = {
 }
 
 export type UseRippleProps<T extends any = HTMLElement> = {
+  disabled?: boolean
+  isDisabled?: boolean
   onPointerDown?: PointerEventHandler<T>
 }
 
-export const useRipple = <T extends any = HTMLElement>(
-  props: UseRippleProps<T>,
-) => {
+export const useRipple = <T extends any = HTMLElement>({
+  disabled,
+  isDisabled,
+  ...rest
+}: UseRippleProps<T>) => {
   const [ripples, setRipples] = useState<RippleOptions[]>([])
 
-  const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {
-    const trigger = ev.currentTarget as unknown as Element
-
-    const size = Math.max(trigger.clientWidth, trigger.clientHeight)
-    const rect = trigger.getBoundingClientRect()
-
-    setRipples((prev) => [
-      ...prev,
-      {
-        key: createId(prev.length.toString()),
-        size,
-        x: ev.clientX - rect.x - size / 2,
-        y: ev.clientY - rect.y - size / 2,
-      },
-    ])
-  }, [])
+  const onPointerDown: PointerEventHandler<T> = useCallback(
+    (ev) => {
+      if (disabled || isDisabled) return setRipples([])
+
+      const trigger = ev.currentTarget as unknown as Element
+
+      const size = Math.max(trigger.clientWidth, trigger.clientHeight)
+      const rect = trigger.getBoundingClientRect()
+
+      setRipples((prev) => [
+        ...prev,
+        {
+          key: createId(prev.length.toString()),
+          size,
+          x: ev.clientX - rect.x - size / 2,
+          y: ev.clientY - rect.y - size / 2,
+        },
+      ])
+    },
+    [disabled, isDisabled],
+  )
 
   const onClear = useCallback((key: Key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key))
   }, [])
 
   return {
     ripples,
-    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),
+    onPointerDown: handlerAll(onPointerDown, rest.onPointerDown),
     onClear,
   }
 }

packages/components/tabs/src/tab.tsx

@@ -51,7 +51,10 @@ export const Tab = forwardRef<TabProps, "button">(
       clickOnSpace,
       onClick: handlerAll(props.onClick, () => setSelectedIndex(index)),
     })
-    const { onPointerDown, ...rippleProps } = useRipple(rest)
+    const { onPointerDown, ...rippleProps } = useRipple({
+      ...rest,
+      isDisabled: disableRipple || isDisabled,
+    })
 
     const css: CSSUIObject = {
       position: "relative",