@charcoal-ui/react 6.0.0-rc.4 → 6.0.0-rc.6

package/src/components/Modal/index.css

@@ -20,6 +20,40 @@
   }
 }
 
+/* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。
+   transition は entering / exiting に限定し、開いたままテーマ切り替え等で
+   色や transform が変わってもアニメーションしないようにする */
+.charcoal-modal-background[data-animation] {
+  overflow: hidden;
+}
+
+.charcoal-modal-background[data-animation='entering'],
+.charcoal-modal-background[data-animation='exiting'] {
+  transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で
+   透明なオーバーレイがタップを奪い続けるのも防ぐ） */
+.charcoal-modal-background[data-animation='exited'],
+.charcoal-modal-background[data-animation='exiting'] {
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.charcoal-modal-background[data-animation='entered'] {
+  overflow: auto;
+}
+
+.charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,
+.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
+  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,
+.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
+  transform: translateY(100%);
+}
+
 .charcoal-modal-close-button {
   position: absolute;
   top: 8px;

package/src/components/Modal/index.test.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import { render, fireEvent, act, cleanup } from '@testing-library/react'
+import { OverlayProvider } from 'react-aria'
+import { vi, describe, it, expect, afterEach } from 'vitest'
+import Modal from '.'
+import { MODAL_TRANSITION_DURATION_MS } from './useTransitionPresence'
+
+const MOBILE_WIDTH = 500
+const DESKTOP_WIDTH = 1024
+
+function setWindowWidth(width: number) {
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: width,
+  })
+  fireEvent(window, new Event('resize'))
+}
+
+// jsdom は CSS transition を実行しないので transitionend を手動で発火させる
+function fireTransitionEnd(el: Element, propertyName: string) {
+  fireEvent(
+    el,
+    Object.assign(new Event('transitionend', { bubbles: true }), {
+      propertyName,
+    }),
+  )
+}
+
+function getBackground() {
+  return document.querySelector('.charcoal-modal-background')
+}
+
+function getDialog() {
+  return document.querySelector('.charcoal-modal-dialog')
+}
+
+function TestApp({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  return (
+    <OverlayProvider>
+      <button data-testid="open" onClick={() => setIsOpen(true)}>
+        open
+      </button>
+      <button data-testid="close" onClick={() => setIsOpen(false)}>
+        close
+      </button>
+      <Modal
+        title="test modal"
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        bottomSheet
+      >
+        <div>modal content</div>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+function renderModal({ defaultOpen = false } = {}) {
+  const result = render(<TestApp defaultOpen={defaultOpen} />)
+  const open = () =>
+    fireEvent.click(result.getByTestId('open', { exact: true }))
+  const close = () =>
+    fireEvent.click(result.getByTestId('close', { exact: true }))
+  return { open, close }
+}
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+  setWindowWidth(DESKTOP_WIDTH)
+})
+
+describe('Modal (bottom sheet transition)', () => {
+  it('desktop: mounts and unmounts immediately without data-animation', () => {
+    setWindowWidth(DESKTOP_WIDTH)
+    const { open, close } = renderModal()
+
+    expect(getDialog()).not.toBeInTheDocument()
+
+    open()
+    expect(getDialog()).toBeInTheDocument()
+    expect(getBackground()).not.toHaveAttribute('data-animation')
+
+    close()
+    expect(getDialog()).not.toBeInTheDocument()
+  })
+
+  it('mobile: enters via transition and settles on the dialog transform transitionend only', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open } = renderModal()
+
+    open()
+    expect(getDialog()).toBeInTheDocument()
+    expect(getBackground()).toHaveAttribute('data-animation', 'entering')
+
+    // 背景の background-color の transitionend では entered にならない
+    fireTransitionEnd(getBackground() as Element, 'background-color')
+    expect(getBackground()).toHaveAttribute('data-animation', 'entering')
+
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    expect(getBackground()).toHaveAttribute('data-animation', 'entered')
+  })
+
+  it('mobile: keeps the DOM mounted while exiting, unmounts after transitionend', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    fireTransitionEnd(getDialog() as Element, 'transform')
+
+    close()
+    expect(getBackground()).toHaveAttribute('data-animation', 'exiting')
+    expect(getDialog()).toBeInTheDocument()
+
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    expect(getDialog()).not.toBeInTheDocument()
+  })
+
+  it('mobile: closing mid-enter goes straight to exiting without unmounting', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    expect(getBackground()).toHaveAttribute('data-animation', 'entering')
+
+    // enter の transitionend を待たずに閉じる
+    close()
+    expect(getBackground()).toHaveAttribute('data-animation', 'exiting')
+    expect(getDialog()).toBeInTheDocument()
+  })
+
+  it('mobile: reopening mid-exit goes straight to entering, the element never leaves the document', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    const dialog = getDialog()
+
+    close()
+    expect(getBackground()).toHaveAttribute('data-animation', 'exiting')
+
+    // exit の transitionend を待たずに開き直す
+    open()
+    expect(getBackground()).toHaveAttribute('data-animation', 'entering')
+    // 同じ要素のまま（アンマウント → 再マウントが起きていない）
+    expect(getDialog()).toBe(dialog)
+  })
+
+  it('mobile: a stale transitionend after reopening settles to entered instead of unmounting', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    close()
+    open()
+    expect(getBackground()).toHaveAttribute('data-animation', 'entering')
+
+    // 開き直しの直後に、キャンセルされた exit 側の transitionend が届く
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    expect(getDialog()).toBeInTheDocument()
+    expect(getBackground()).toHaveAttribute('data-animation', 'entered')
+  })
+
+  it('mobile: unmounts via the timeout fallback when transitionend never fires', () => {
+    vi.useFakeTimers()
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    fireTransitionEnd(getDialog() as Element, 'transform')
+
+    close()
+    expect(getDialog()).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(MODAL_TRANSITION_DURATION_MS + 100)
+    })
+    expect(getDialog()).not.toBeInTheDocument()
+  })
+
+  it('resizing to desktop while open drops the animation, then closes immediately', () => {
+    setWindowWidth(MOBILE_WIDTH)
+    const { open, close } = renderModal()
+
+    open()
+    fireTransitionEnd(getDialog() as Element, 'transform')
+    expect(getBackground()).toHaveAttribute('data-animation', 'entered')
+
+    setWindowWidth(DESKTOP_WIDTH)
+    expect(getDialog()).toBeInTheDocument()
+    expect(getBackground()).not.toHaveAttribute('data-animation')
+
+    close()
+    expect(getDialog()).not.toBeInTheDocument()
+  })
+})

package/src/components/Modal/index.tsx

@@ -1,7 +1,6 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import type { AriaDialogProps } from 'react-aria/useDialog'
-import { animated, useTransition, easings } from '@react-spring/web'
 import Button, { ButtonProps } from '../Button'
 import IconButton, { IconButtonProps } from '../IconButton'
 import { Dialog } from './Dialog'
@@ -11,6 +10,7 @@ import {
   useCharcoalModalOverlay,
   useWindowWidth,
 } from './useCustomModalOverlay'
+import { useTransitionPresence } from './useTransitionPresence'
 
 import './index.css'
 
@@ -101,31 +101,11 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
   const transitionEnabled = isMobile && bottomSheet !== false
   const showDismiss = !isMobile || bottomSheet !== true
 
-  const transition = useTransition(isOpen, {
-    from: {
-      transform: 'translateY(100%)',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      overflow: 'hidden',
-    },
-    enter: {
-      transform: 'translateY(0%)',
-      backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    },
-    update: {
-      overflow: 'auto',
-    },
-    leave: {
-      transform: 'translateY(100%)',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      overflow: 'hidden',
-    },
-    config: transitionEnabled
-      ? { duration: 400, easing: easings.easeOutQuart }
-      : { duration: 0 },
-  })
-
   const bgRef = React.useRef<HTMLDivElement>(null)
 
+  const { isPresent, animationState, handleTransitionEnd } =
+    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)
+
   const handleClick = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       if (e.currentTarget === e.target) {
@@ -135,64 +115,54 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     [onClose],
   )
 
-  return transition(
-    ({ backgroundColor, overflow, transform }, item) =>
-      item && (
-        <Overlay portalContainer={portalContainer}>
-          {/* https://github.com/pmndrs/react-spring/issues/1515 */}
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-          <animated.div
-            className="charcoal-modal-background"
-            ref={bgRef}
-            {...underlayProps}
-            style={
-              transitionEnabled
-                ? { backgroundColor, overflow, zIndex }
-                : { zIndex }
-            }
-            data-bottom-sheet={bottomSheet}
-            onClick={handleClick}
+  if (!isPresent) {
+    return null
+  }
+
+  return (
+    <Overlay portalContainer={portalContainer}>
+      <div
+        className="charcoal-modal-background"
+        ref={bgRef}
+        {...underlayProps}
+        style={{ zIndex }}
+        data-bottom-sheet={bottomSheet}
+        data-animation={transitionEnabled ? animationState : undefined}
+        onClick={handleClick}
+        onTransitionEnd={handleTransitionEnd}
+      >
+        <ModalBackgroundContext.Provider value={bgRef.current}>
+          <Dialog
+            ref={ref}
+            {...modalProps}
+            size={size}
+            bottomSheet={bottomSheet}
+            className={className}
           >
-            <ModalBackgroundContext.Provider value={bgRef.current}>
-              {/* https://github.com/pmndrs/react-spring/issues/1515 */}
-              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-              {/* @ts-ignore */}
-              <AnimatedDialog
-                ref={ref}
-                {...modalProps}
-                style={transitionEnabled ? { transform } : {}}
-                size={size}
-                bottomSheet={bottomSheet}
-                className={className}
-              >
-                <ModalContext.Provider
-                  value={{
-                    titleProps: {},
-                    title,
-                    close: onClose,
-                    showDismiss,
-                    bottomSheet,
-                  }}
-                >
-                  {children}
-                  {isDismissable === true && (
-                    <ModalCloseButton
-                      aria-label={closeButtonAriaLabel}
-                      onClick={onClose}
-                    />
-                  )}
-                </ModalContext.Provider>
-              </AnimatedDialog>
-            </ModalBackgroundContext.Provider>
-          </animated.div>
-        </Overlay>
-      ),
+            <ModalContext.Provider
+              value={{
+                titleProps: {},
+                title,
+                close: onClose,
+                showDismiss,
+                bottomSheet,
+              }}
+            >
+              {children}
+              {isDismissable === true && (
+                <ModalCloseButton
+                  aria-label={closeButtonAriaLabel}
+                  onClick={onClose}
+                />
+              )}
+            </ModalContext.Provider>
+          </Dialog>
+        </ModalBackgroundContext.Provider>
+      </div>
+    </Overlay>
   )
 })
 
-const AnimatedDialog = animated(Dialog)
-
 export default memo(Modal)
 
 export const ModalContext = React.createContext<{

package/src/components/Modal/useTransitionPresence.ts

@@ -0,0 +1,95 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+  RefObject,
+  TransitionEvent,
+} from 'react'
+import { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'
+
+// index.css の transition-duration と一致させること
+export const MODAL_TRANSITION_DURATION_MS = 400
+
+type AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'
+
+/**
+ * アニメーション終了時の状態遷移。
+ * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない
+ */
+function settle(state: AnimationState): AnimationState {
+  if (state === 'entering') return 'entered'
+  if (state === 'exiting') return 'exited'
+  return state
+}
+
+/**
+ * CSS transition によるモーダルの開閉アニメーションを管理する。
+ * exit アニメーションが終わるまで DOM をマウントしたままにする
+ *
+ * @param isOpen モーダルを開くべきか
+ * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）
+ * @param backgroundRef 背景要素。マウント直後の layout flush に使う
+ * @param dialogRef transform をアニメーションさせる要素（ダイアログ）
+ */
+export function useTransitionPresence(
+  isOpen: boolean,
+  enabled: boolean,
+  backgroundRef: RefObject<HTMLElement>,
+  dialogRef: RefObject<HTMLElement>,
+) {
+  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。
+  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める
+  const [state, setState] = useState<AnimationState>('exited')
+
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      setState(isOpen ? 'entered' : 'exited')
+    } else if (isOpen) {
+      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。
+      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では
+      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む
+      if (backgroundRef.current) void backgroundRef.current.offsetHeight
+      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))
+    } else {
+      setState((s) => (s === 'exited' ? s : 'exiting'))
+    }
+  }, [isOpen, enabled, backgroundRef])
+
+  // safety net: transitionend が来なくても（トランジションのキャンセル、
+  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする
+  const isAnimating = state === 'entering' || state === 'exiting'
+  useEffect(() => {
+    if (!isAnimating) return
+    // transitionend と同時刻に発火して競合しないよう少し遅らせる
+    const timer = setTimeout(
+      () => setState(settle),
+      MODAL_TRANSITION_DURATION_MS + 100,
+    )
+    return () => clearTimeout(timer)
+  }, [isAnimating, state])
+
+  // 背景 div に付ける。ダイアログの transform の transitionend だけが
+  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。
+  // propertyName は index.css がアニメーションさせるプロパティと一致させること。
+  // なお enter 完了直後の close では、完了済み enter の transitionend が
+  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が
+  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している
+  const handleTransitionEnd = useCallback(
+    (e: TransitionEvent<HTMLElement>) => {
+      const isDialogSlide =
+        e.target === dialogRef.current && e.propertyName === 'transform'
+      if (isDialogSlide) {
+        setState(settle)
+      }
+    },
+    [dialogRef],
+  )
+
+  return {
+    // enabled でないときは isOpen だけで即座にマウント・アンマウントする
+    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）
+    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,
+    animationState: state,
+    handleTransitionEnd,
+  }
+}

package/src/index.ts

@@ -98,7 +98,6 @@ export {
 export {
   default as Carousel,
   type CarouselProps,
-  type CarouselItem,
   type CarouselHandlerRef,
   type ScrollAlign,
   type ScrollSnap,