@charcoal-ui/react 6.0.0-rc.1 → 6.0.0-rc.2

package/src/components/Carousel/index.tsx

@@ -0,0 +1,278 @@
+import './index.css'
+
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+import { mergeProps, useFocusRing, useKeyboard } from 'react-aria'
+import { useClassNames } from '../../_lib/useClassNames'
+import IconButton from '../IconButton'
+import { CarouselItem as CarouselSlide } from './CarouselItem'
+import {
+  createCarouselStore,
+  INITIAL_CAROUSEL_STATE,
+  type CarouselState,
+} from './carouselStore'
+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'
+
+export type ScrollSnapAlign = 'center' | 'start'
+
+export type ScrollSnap = Readonly<{
+  type?: ScrollSnapType
+  align?: ScrollSnapAlign
+}>
+
+export type ScrollStepContext = Readonly<{
+  clientWidth: number
+  scrollWidth: number
+  scrollLeft: number
+  direction: 'prev' | 'next'
+}>
+
+export type ScrollStep = number | ((ctx: ScrollStepContext) => number)
+
+// 命令的 API。ref 経由で初期位置へのリセットを公開する（react-sandbox 互換）。
+export type CarouselHandlerRef = {
+  resetScroll: () => void
+}
+
+export type CarouselProps = Readonly<{
+  className?: string
+  hasGradient?: boolean
+  fullWidth?: boolean
+  navigationButtons?: boolean
+  indicator?: boolean
+  size?: 'S' | 'M'
+  // 進む量。number は clientWidth に対する比率、function は進む px を直接返す。
+  scrollStep?: ScrollStep
+  // スクロールスナップ。未指定時は size 基準（M=none / S=mandatory）、align=center。
+  // M の none は sandbox 同等に 0.75×表示幅ちょうど進む（スナップで着地を吸着しない）。
+  scrollSnap?: ScrollSnap
+  // react-sandbox 互換のコールバック。
+  onScroll?: (left: number) => void
+  onResize?: (width: number) => void
+  onScrollStateChange?: (canScroll: boolean) => void
+  defaultScroll?: { align?: ScrollAlign; offset?: number }
+  items: CarouselItem[]
+}>
+
+type Direction = 'prev' | 'next'
+
+const DEFAULT_SCROLL_STEP = 0.75
+
+const NAV_ICON = {
+  prev: '24/Prev',
+  next: '24/Next',
+} as const
+
+type NavigationButtonProps = Readonly<{
+  direction: Direction
+  canScroll: boolean
+  onScroll: (direction: Direction) => void
+}>
+
+const CarouselNavigationButton = ({
+  direction,
+  canScroll,
+  onScroll,
+}: NavigationButtonProps) => {
+  const handleClick = useCallback(() => {
+    onScroll(direction)
+  }, [onScroll, direction])
+  return (
+    <IconButton
+      variant="Overlay"
+      size="S"
+      icon={NAV_ICON[direction]}
+      aria-label={direction === 'prev' ? 'Previous' : 'Next'}
+      disabled={!canScroll}
+      onClick={handleClick}
+      className="charcoal-carousel__navigation__item"
+      data-direction={direction}
+      data-hidden={!canScroll}
+    />
+  )
+}
+
+type IndicatorItemProps = Readonly<{
+  index: number
+  isActive: boolean
+  onSelect: (index: number) => void
+}>
+
+const CarouselIndicatorItem = ({
+  index,
+  isActive,
+  onSelect,
+}: IndicatorItemProps) => {
+  const handleClick = useCallback(() => {
+    onSelect(index)
+  }, [onSelect, index])
+  return (
+    <button
+      className="charcoal-carousel__indicator__item"
+      data-active={isActive}
+      aria-current={isActive || undefined}
+      aria-label={`Go to slide ${index + 1}`}
+      onClick={handleClick}
+    />
+  )
+}
+
+const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
+  {
+    size = 'M',
+    navigationButtons,
+    indicator,
+    hasGradient = false,
+    fullWidth = false,
+    scrollStep = DEFAULT_SCROLL_STEP,
+    scrollSnap,
+    onScroll,
+    onResize,
+    onScrollStateChange,
+    defaultScroll: { align = 'left', offset = 0 } = {},
+    ...props
+  }: CarouselProps,
+  ref,
+) {
+  const className = useClassNames('charcoal-carousel', props.className)
+  const showNavigationButtons = navigationButtons ?? size === 'M'
+  const showIndicator = indicator ?? size === 'S'
+  const snapType = scrollSnap?.type ?? (size === 'S' ? 'mandatory' : 'none')
+  const snapAlign = scrollSnap?.align ?? 'center'
+
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const [store] = useState(createCarouselStore)
+
+  const { scrollByStep, onItemResize, resetScroll } = useCarouselScroller(
+    scrollerRef,
+    store,
+    props.items.length,
+    { align, offset, scrollStep, onScroll, onResize, onScrollStateChange },
+  )
+
+  useImperativeHandle(ref, () => ({ resetScroll }), [resetScroll])
+
+  const { activeIndex, canPrev, canNext } = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    getServerSnapshot,
+  )
+
+  const scrollToItem = useCallback(
+    (index: number) => store.dispatch({ type: 'requestScroll', index }),
+    [store],
+  )
+
+  // ←/→ でスクロール。コンテナにフォーカスがある時のみ。
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        scrollByStep('next')
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        scrollByStep('prev')
+      } else {
+        e.continuePropagation()
+      }
+    },
+  })
+
+  const {
+    focusProps: scrollerFocusProps,
+    isFocusVisible: scrollerFocusVisible,
+  } = useFocusRing()
+
+  return (
+    <div
+      className={className}
+      data-size={size}
+      data-has-gradient={hasGradient}
+      data-full-width={fullWidth}
+      data-indicator={showIndicator}
+      data-scroll-snap-type={snapType}
+      data-scroll-snap-align={snapAlign}
+      data-can-prev={canPrev}
+      data-can-next={canNext}
+      role="region"
+      aria-roledescription="carousel"
+      aria-label="Carousel"
+    >
+      <div className="charcoal-carousel__viewport">
+        <div
+          {...mergeProps(scrollerFocusProps, keyboardProps)}
+          ref={scrollerRef}
+          className="charcoal-carousel__scroller"
+          tabIndex={0}
+          data-focus-visible={scrollerFocusVisible || undefined}
+        >
+          {props.items.map((item, i) => (
+            <CarouselSlide
+              key={item.id}
+              index={i}
+              store={store}
+              onResize={onItemResize}
+            >
+              {item.children}
+            </CarouselSlide>
+          ))}
+        </div>
+
+        <div
+          className="charcoal-carousel__navigation"
+          data-visible={showNavigationButtons}
+          aria-hidden={!showNavigationButtons}
+        >
+          <CarouselNavigationButton
+            direction="prev"
+            canScroll={canPrev}
+            onScroll={scrollByStep}
+          />
+          <CarouselNavigationButton
+            direction="next"
+            canScroll={canNext}
+            onScroll={scrollByStep}
+          />
+        </div>
+      </div>
+
+      <div
+        className="charcoal-carousel__indicator"
+        data-visible={showIndicator}
+        aria-hidden={!showIndicator}
+      >
+        {props.items.map((item, i) => (
+          <CarouselIndicatorItem
+            key={item.id}
+            index={i}
+            isActive={i === activeIndex}
+            onSelect={scrollToItem}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+Carousel.displayName = 'Carousel'
+
+export default memo(Carousel)

package/src/components/Carousel/intersectionObserver.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { observeCenter } from './intersectionObserver'
+
+type MockIO = {
+  cb: IntersectionObserverCallback
+  observe: ReturnType<typeof vi.fn>
+  unobserve: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+}
+
+describe('observeCenter', () => {
+  const orig = globalThis.IntersectionObserver
+  afterEach(() => {
+    globalThis.IntersectionObserver = orig
+  })
+
+  it('IntersectionObserver 非対応なら no-op（throw しない）', () => {
+    globalThis.IntersectionObserver =
+      undefined as unknown as typeof globalThis.IntersectionObserver
+    const el = document.createElement('div')
+    expect(() => observeCenter(el, () => undefined)()).not.toThrow()
+  })
+
+  it('同一 root の el は observer を共有し、中央交差で対象の onEnter だけ呼ぶ', () => {
+    const instances: MockIO[] = []
+    globalThis.IntersectionObserver = vi.fn(
+      (cb: IntersectionObserverCallback) => {
+        const inst: MockIO = {
+          cb,
+          observe: vi.fn(),
+          unobserve: vi.fn(),
+          disconnect: vi.fn(),
+        }
+        instances.push(inst)
+        return inst
+      },
+    ) as unknown as typeof globalThis.IntersectionObserver
+
+    const root = document.createElement('div')
+    const a = document.createElement('div')
+    const b = document.createElement('div')
+    root.append(a, b)
+    const onA = vi.fn()
+    const onB = vi.fn()
+
+    const offA = observeCenter(a, onA)
+    const offB = observeCenter(b, onB)
+
+    // 同一 root（親）なので observer は1つだけ
+    expect(instances).toHaveLength(1)
+    expect(instances[0].observe).toHaveBeenCalledWith(a)
+    expect(instances[0].observe).toHaveBeenCalledWith(b)
+
+    // a が中央交差 → onA だけ
+    instances[0].cb(
+      [{ isIntersecting: true, target: a } as IntersectionObserverEntry],
+      instances[0] as unknown as IntersectionObserver,
+    )
+    expect(onA).toHaveBeenCalledTimes(1)
+    expect(onB).not.toHaveBeenCalled()
+
+    // 最後の el を外すと disconnect
+    offA()
+    expect(instances[0].disconnect).not.toHaveBeenCalled()
+    offB()
+    expect(instances[0].disconnect).toHaveBeenCalled()
+  })
+})

package/src/components/Carousel/intersectionObserver.ts

@@ -0,0 +1,58 @@
+// 中央検出（左右 50% を除外）。root は item の親（scroller）から導出する。
+const CENTER_ROOT_MARGIN = '0px -50% 0px -50%'
+
+type CenterEntry = {
+  observer: IntersectionObserver
+  callbacks: Map<Element, () => void>
+}
+
+// root（= el.parentElement）ごとに observer を1つ共有する。
+const byRoot = new Map<Element, CenterEntry>()
+
+/**
+ * `el` がその親（= scroller）の中央ラインに重なったら `onEnter` を呼ぶ。同一 root の
+ * IntersectionObserver を共有する singleton。返り値で監視解除（最後の1つで disconnect）。
+ * SSR / 非対応環境では no-op。
+ */
+export function observeCenter(
+  el: HTMLElement,
+  onEnter: () => void,
+): () => void {
+  // window で SSR を弾く。polyfill が global に IntersectionObserver を生やしていても
+  // サーバー上では observe しない。
+  if (
+    typeof window === 'undefined' ||
+    typeof IntersectionObserver === 'undefined'
+  )
+    return () => undefined
+  const root = el.parentElement
+  if (!root) return () => undefined
+
+  let entry = byRoot.get(root)
+  if (!entry) {
+    const callbacks = new Map<Element, () => void>()
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) callbacks.get(e.target)?.()
+        }
+      },
+      { root, rootMargin: CENTER_ROOT_MARGIN, threshold: 0 },
+    )
+    entry = { observer, callbacks }
+    byRoot.set(root, entry)
+  }
+  entry.callbacks.set(el, onEnter)
+  entry.observer.observe(el)
+
+  return () => {
+    const e = byRoot.get(root)
+    if (!e) return
+    e.callbacks.delete(el)
+    e.observer.unobserve(el)
+    if (e.callbacks.size === 0) {
+      e.observer.disconnect()
+      byRoot.delete(root)
+    }
+  }
+}

package/src/components/Carousel/resizeObserver.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { observeResize } from './resizeObserver'
+
+type MockRO = {
+  cb: ResizeObserverCallback
+  observe: ReturnType<typeof vi.fn>
+  unobserve: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+}
+
+describe('observeResize', () => {
+  const orig = globalThis.ResizeObserver
+  afterEach(() => {
+    globalThis.ResizeObserver = orig
+  })
+
+  it('ResizeObserver 非対応なら no-op（throw しない）', () => {
+    globalThis.ResizeObserver =
+      undefined as unknown as typeof globalThis.ResizeObserver
+    const el = document.createElement('div')
+    expect(() => observeResize(el, () => undefined)()).not.toThrow()
+  })
+
+  it('単一の observer を共有し、対象のサイズ変化で cb を呼ぶ', () => {
+    const instances: MockRO[] = []
+    globalThis.ResizeObserver = vi.fn((cb: ResizeObserverCallback) => {
+      const inst: MockRO = {
+        cb,
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      }
+      instances.push(inst)
+      return inst
+    }) as unknown as typeof globalThis.ResizeObserver
+
+    const a = document.createElement('div')
+    const b = document.createElement('div')
+    const onA = vi.fn()
+    const onB = vi.fn()
+
+    const offA = observeResize(a, onA)
+    const offB = observeResize(b, onB)
+
+    // 単一 observer を共有
+    expect(instances).toHaveLength(1)
+
+    instances[0].cb(
+      [{ target: a } as ResizeObserverEntry],
+      instances[0] as unknown as ResizeObserver,
+    )
+    expect(onA).toHaveBeenCalledTimes(1)
+    expect(onB).not.toHaveBeenCalled()
+
+    offA()
+    expect(instances[0].disconnect).not.toHaveBeenCalled()
+    offB()
+    expect(instances[0].disconnect).toHaveBeenCalled()
+  })
+})

package/src/components/Carousel/resizeObserver.ts

@@ -0,0 +1,35 @@
+// 全 el で単一の ResizeObserver を共有する singleton。
+let observer: ResizeObserver | null = null
+const callbacks = new Map<Element, () => void>()
+
+function getObserver(): ResizeObserver | null {
+  // window で SSR を弾く。polyfill が global に ResizeObserver を生やしていても
+  // サーバー上では observe しない。
+  if (typeof window === 'undefined' || typeof ResizeObserver === 'undefined')
+    return null
+  if (!observer) {
+    observer = new ResizeObserver((entries) => {
+      for (const e of entries) callbacks.get(e.target)?.()
+    })
+  }
+  return observer
+}
+
+/**
+ * `el` のサイズ変化で `cb` を呼ぶ。全要素で単一の ResizeObserver を共有する singleton。
+ * 返り値で監視解除（最後の1つで disconnect）。SSR / 非対応環境では no-op。
+ */
+export function observeResize(el: Element, cb: () => void): () => void {
+  const obs = getObserver()
+  if (!obs) return () => undefined
+  callbacks.set(el, cb)
+  obs.observe(el)
+  return () => {
+    callbacks.delete(el)
+    obs.unobserve(el)
+    if (callbacks.size === 0) {
+      obs.disconnect()
+      observer = null
+    }
+  }
+}

package/src/components/Carousel/store.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from 'vitest'
+import { createStore } from './store'
+
+describe('createStore', () => {
+  it('reducer の結果を getSnapshot で返す', () => {
+    const s = createStore(
+      (n: number, a: { type: 'inc' }) => (a.type === 'inc' ? n + 1 : n),
+      0,
+    )
+    expect(s.getSnapshot()).toBe(0)
+    s.dispatch({ type: 'inc' })
+    expect(s.getSnapshot()).toBe(1)
+  })
+
+  it('dispatch ごとに listener を呼び、unsubscribe で止まる', () => {
+    const s = createStore((n: number, _a: { type: 'inc' }) => n + 1, 0)
+    const fn = vi.fn()
+    const off = s.subscribe(fn)
+    s.dispatch({ type: 'inc' })
+    expect(fn).toHaveBeenCalledTimes(1)
+    off()
+    s.dispatch({ type: 'inc' })
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/Carousel/store.ts

@@ -0,0 +1,27 @@
+export type Store<State, Action> = Readonly<{
+  dispatch: (action: Action) => void
+  subscribe: (listener: () => void) => () => void
+  getSnapshot: () => State
+}>
+
+export function createStore<State, Action>(
+  reducer: (state: State, action: Action) => State,
+  initialState: State,
+): Store<State, Action> {
+  let state = initialState
+  const listeners = new Set<() => void>()
+
+  return {
+    dispatch(action) {
+      state = reducer(state, action)
+      for (const listener of listeners) listener()
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    getSnapshot: () => state,
+  }
+}