@charcoal-ui/react 6.0.0-rc.3 → 6.0.0-rc.5

package/src/components/Carousel/index.tsx

@@ -1,7 +1,9 @@
 import './index.css'
 
 import {
+  Children,
   forwardRef,
+  isValidElement,
   memo,
   useCallback,
   useImperativeHandle,
@@ -23,11 +25,6 @@ import { useCarouselScroller } from './useCarouselScroller'
 
 const getServerSnapshot = (): CarouselState => INITIAL_CAROUSEL_STATE
 
-export type CarouselItem = {
-  id: string
-  children: ReactNode
-}
-
 export type ScrollAlign = 'left' | 'center' | 'right'
 
 export type ScrollSnapType = 'none' | 'proximity' | 'mandatory'
@@ -70,7 +67,8 @@ export type CarouselProps = Readonly<{
   onResize?: (width: number) => void
   onScrollStateChange?: (canScroll: boolean) => void
   defaultScroll?: { align?: ScrollAlign; offset?: number }
-  items: CarouselItem[]
+  // 1 直接子要素 = 1 スライド（react-sandbox 互換）。
+  children: ReactNode
 }>
 
 type Direction = 'prev' | 'next'
@@ -149,6 +147,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     onResize,
     onScrollStateChange,
     defaultScroll: { align = 'left', offset = 0 } = {},
+    children,
     ...props
   }: CarouselProps,
   ref,
@@ -159,13 +158,20 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
   const snapType = scrollSnap?.type ?? (size === 'S' ? 'mandatory' : 'none')
   const snapAlign = scrollSnap?.align ?? 'center'
 
+  // 直接子要素 1 つを 1 スライドとして数える。key は子要素の key を引き継ぐ
+  // （toArray が付与する接頭辞付き key。無ければ index）。
+  const slides = Children.toArray(children)
+  const slideKeys = slides.map((slide, i) =>
+    isValidElement(slide) && slide.key != null ? slide.key : i,
+  )
+
   const scrollerRef = useRef<HTMLDivElement>(null)
   const [store] = useState(createCarouselStore)
 
   const { scrollByStep, onItemResize, resetScroll } = useCarouselScroller(
     scrollerRef,
     store,
-    props.items.length,
+    slides.length,
     { align, offset, scrollStep, onScroll, onResize, onScrollStateChange },
   )
 
@@ -217,22 +223,25 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
       aria-roledescription="carousel"
       aria-label="Carousel"
     >
-      <div className="charcoal-carousel__viewport">
+      {/* フォーカスリングは viewport に描く（理由は index.css の同セレクタ参照） */}
+      <div
+        className="charcoal-carousel__viewport"
+        data-focus-visible={scrollerFocusVisible || undefined}
+      >
         <div
           {...mergeProps(scrollerFocusProps, keyboardProps)}
           ref={scrollerRef}
           className="charcoal-carousel__scroller"
           tabIndex={0}
-          data-focus-visible={scrollerFocusVisible || undefined}
         >
-          {props.items.map((item, i) => (
+          {slides.map((slide, i) => (
             <CarouselSlide
-              key={item.id}
+              key={slideKeys[i]}
               index={i}
               store={store}
               onResize={onItemResize}
             >
-              {item.children}
+              {slide}
             </CarouselSlide>
           ))}
         </div>
@@ -260,9 +269,9 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
         data-visible={showIndicator}
         aria-hidden={!showIndicator}
       >
-        {props.items.map((item, i) => (
+        {slides.map((_, i) => (
           <CarouselIndicatorItem
-            key={item.id}
+            key={slideKeys[i]}
             index={i}
             isActive={i === activeIndex}
             onSelect={scrollToItem}

package/src/components/Carousel/useCarouselScroller.ts

@@ -1,16 +1,8 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  type RefObject,
-} from 'react'
+import { useCallback, useEffect, useRef, type RefObject } from 'react'
+import { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'
 import type { CarouselStore } from './carouselStore'
 import type { ScrollAlign, ScrollStep } from './index'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 const INTERACTION_EVENTS = ['pointerdown', 'wheel', 'touchstart'] as const
 
 export type CarouselScrollerOptions = Readonly<{
@@ -74,8 +66,12 @@ export function useCarouselScroller(
         left = maxScroll + offset
         break
     }
-    // eslint-disable-next-line react-compiler/react-compiler
-    el.scrollLeft = Math.max(0, Math.min(left, maxScroll))
+    // scrollLeft 代入は CSS の scroll-behavior: smooth の対象になり
+    // 初期位置決めがアニメーションしてしまうため、instant で確定させる。
+    el.scrollTo({
+      left: Math.max(0, Math.min(left, maxScroll)),
+      behavior: 'instant',
+    })
   }, [scrollerRef, align, offset])
 
   // canPrev/canNext: scroll で更新。onScroll もここから発火。itemCount 変化で貼り直し。

package/src/components/FieldLabel/__snapshots__/index.css.snap

@@ -3,7 +3,7 @@
   line-height: 22px;
   font-weight: bold;
   display: flow-root;
-  color: var(--charcoal-color-text-default);
+  color: var(--charcoal-color-text-default-text1);
 }
 
 .charcoal-field-label-required-text {

package/src/components/FieldLabel/index.css

@@ -3,7 +3,7 @@
   line-height: 22px;
   font-weight: bold;
   display: flow-root;
-  color: var(--charcoal-color-text-default);
+  color: var(--charcoal-color-text-default-text1);
 }
 
 .charcoal-field-label-required-text {

package/src/components/IconButton/__snapshots__/index.css.snap

@@ -54,7 +54,7 @@
 
 .charcoal-icon-button[data-variant='Default'] {
   color: var(--charcoal-color-icon-tertiary-default);
-  background-color: var(--charcoal-color-container-default-a);
+  background-color: transparent;
 }
 
 .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]), .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {

package/src/components/IconButton/index.css

@@ -56,7 +56,7 @@
 
   &[data-variant='Default'] {
     color: var(--charcoal-color-icon-tertiary-default);
-    background-color: var(--charcoal-color-container-default-a);
+    background-color: transparent;
 
     &[data-active='true']:not(:disabled):not([aria-disabled]),
     &[data-active='true'][aria-disabled='false'] {

package/src/components/Modal/__snapshots__/index.css.snap

@@ -19,6 +19,38 @@
 }
 }
 
+/* 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;
@@ -32,4 +64,3 @@
   font-weight: inherit;
   font-size: inherit;
 }
-

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<{