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

package/src/components/Carousel/useCarouselScroller.ts

@@ -0,0 +1,158 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type RefObject,
+} from 'react'
+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<{
+  align: ScrollAlign
+  offset: number
+  scrollStep: ScrollStep
+  onScroll?: (left: number) => void
+  onResize?: (width: number) => void
+  onScrollStateChange?: (canScroll: boolean) => void
+}>
+
+export type CarouselScrollerResult = Readonly<{
+  scrollByStep: (direction: 'prev' | 'next') => void
+  onItemResize: () => void
+  resetScroll: () => void
+}>
+
+export function useCarouselScroller(
+  scrollerRef: RefObject<HTMLElement | null>,
+  store: CarouselStore,
+  itemCount: number,
+  options: CarouselScrollerOptions,
+): CarouselScrollerResult {
+  const { align, offset, scrollStep, onScroll, onResize, onScrollStateChange } =
+    options
+  const initialScrollActive = useRef(true)
+
+  // コールバックは最新参照を ref に保持し、リスナーの貼り直しを避ける。
+  const callbacksRef = useRef({ onScroll, onResize, onScrollStateChange })
+  useEffect(() => {
+    callbacksRef.current = { onScroll, onResize, onScrollStateChange }
+  })
+
+  // onScrollStateChange は canScroll(=canPrev||canNext) が変化した時だけ発火する。
+  const prevCanScroll = useRef<boolean | null>(null)
+
+  const updateScrollState = useCallback(() => {
+    const el = scrollerRef.current
+    if (!el) return
+    const { scrollLeft, scrollWidth, clientWidth } = el
+    const canPrev = scrollLeft > 1
+    const canNext = scrollLeft < scrollWidth - clientWidth - 1
+    store.dispatch({ type: 'setScrollState', canPrev, canNext })
+    const canScroll = canPrev || canNext
+    if (prevCanScroll.current !== canScroll) {
+      prevCanScroll.current = canScroll
+      callbacksRef.current.onScrollStateChange?.(canScroll)
+    }
+  }, [scrollerRef, store])
+
+  const applyInitialScroll = useCallback(() => {
+    const el = scrollerRef.current
+    if (!el || !initialScrollActive.current) return
+    const maxScroll = el.scrollWidth - el.clientWidth
+    let left = offset
+    switch (align) {
+      case 'center':
+        left = maxScroll / 2 + offset
+        break
+      case 'right':
+        left = maxScroll + offset
+        break
+    }
+    // eslint-disable-next-line react-compiler/react-compiler
+    el.scrollLeft = Math.max(0, Math.min(left, maxScroll))
+  }, [scrollerRef, align, offset])
+
+  // canPrev/canNext: scroll で更新。onScroll もここから発火。itemCount 変化で貼り直し。
+  useIsomorphicLayoutEffect(() => {
+    const el = scrollerRef.current
+    if (!el) return
+    updateScrollState()
+    const handleScroll = () => {
+      updateScrollState()
+      callbacksRef.current.onScroll?.(el.scrollLeft)
+    }
+    el.addEventListener('scroll', handleScroll, { passive: true })
+    return () => el.removeEventListener('scroll', handleScroll)
+  }, [scrollerRef, updateScrollState, itemCount])
+
+  // scroller 幅の変化で onResize(clientWidth) を通知し、状態と初期位置を再計算する。
+  useIsomorphicLayoutEffect(() => {
+    const el = scrollerRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(() => {
+      applyInitialScroll()
+      updateScrollState()
+      callbacksRef.current.onResize?.(el.clientWidth)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [scrollerRef, applyInitialScroll, updateScrollState])
+
+  // 初期スクロール適用 + ユーザー操作で打ち切り。
+  useIsomorphicLayoutEffect(() => {
+    initialScrollActive.current = true
+    applyInitialScroll()
+    // 初期位置適用後の scrollLeft で canPrev/canNext を確定させる
+    // （center/right 初期化で scroll イベント待ちにならないように）。
+    updateScrollState()
+    const el = scrollerRef.current
+    if (!el) return
+    const stop = () => {
+      initialScrollActive.current = false
+    }
+    for (const type of INTERACTION_EVENTS) el.addEventListener(type, stop, true)
+    return () => {
+      for (const type of INTERACTION_EVENTS)
+        el.removeEventListener(type, stop, true)
+    }
+  }, [scrollerRef, applyInitialScroll, updateScrollState, itemCount])
+
+  const onItemResize = useCallback(() => {
+    applyInitialScroll()
+    updateScrollState()
+  }, [applyInitialScroll, updateScrollState])
+
+  // defaultScroll の初期位置へ戻す（命令的 API: CarouselHandlerRef.resetScroll）。
+  const resetScroll = useCallback(() => {
+    initialScrollActive.current = true
+    applyInitialScroll()
+    updateScrollState()
+  }, [applyInitialScroll, updateScrollState])
+
+  const scrollByStep = useCallback(
+    (direction: 'prev' | 'next') => {
+      const el = scrollerRef.current
+      if (!el) return
+      initialScrollActive.current = false
+      const { clientWidth, scrollWidth, scrollLeft } = el
+      // 進む量(px)の絶対値。符号は direction で付ける。
+      const delta =
+        typeof scrollStep === 'function'
+          ? scrollStep({ clientWidth, scrollWidth, scrollLeft, direction })
+          : clientWidth * scrollStep
+      el.scrollBy({
+        left: direction === 'next' ? delta : -delta,
+        behavior: 'smooth',
+      })
+    },
+    [scrollerRef, scrollStep],
+  )
+
+  return { scrollByStep, onItemResize, resetScroll }
+}

package/src/components/TagItem/__snapshots__/index.story.storyshot

@@ -5,7 +5,7 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -28,7 +28,7 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
         name="16/Remove"
         style="--charcoal-icon-size: 16px;"
       />
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -38,7 +38,7 @@ exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -56,7 +56,7 @@ exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
           女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -66,7 +66,7 @@ exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="image"
       data-size="M"
@@ -84,7 +84,7 @@ exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -94,7 +94,7 @@ exports[`Storybook Tests > react/TagItem > Default 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -112,7 +112,7 @@ exports[`Storybook Tests > react/TagItem > Default 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -122,12 +122,12 @@ exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
+      aria-disabled="true"
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
       data-state="default"
-      disabled=""
       style="--charcoal-tag-item-bg: #7ACCB1;"
     >
       <div
@@ -141,7 +141,7 @@ exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -151,7 +151,7 @@ exports[`Storybook Tests > react/TagItem > InActive 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -169,7 +169,7 @@ exports[`Storybook Tests > react/TagItem > InActive 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -179,7 +179,7 @@ exports[`Storybook Tests > react/TagItem > Small 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="S"
@@ -197,7 +197,7 @@ exports[`Storybook Tests > react/TagItem > Small 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -207,7 +207,7 @@ exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -230,7 +230,7 @@ exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;

package/src/components/TagItem/index.tsx

@@ -4,27 +4,29 @@ import { useClassNames } from '../../_lib/useClassNames'
 import './index.css'
 
 import { useObjectRef } from 'react-aria/useObjectRef'
+import { useLink } from 'react-aria'
 
 type SizeMap = {
   S: 32
   M: 40
 }
 
-export type TagItemProps<T extends React.ElementType = 'button'> = {
+export type TagItemProps<T extends React.ElementType = 'a'> = {
   label: string
   translatedLabel?: string
   bgColor?: string
   bgImage?: string
   status?: 'default' | 'active' | 'inactive'
   size?: keyof SizeMap
+  disabled?: boolean
   /**
    * The component used for root element.
-   * @type T extends React.ElementType = 'button'
+   * @type T extends React.ElementType = 'a'
    */
   component?: T
-} & Omit<React.ComponentPropsWithRef<T>, 'children'>
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'disabled'>
 
-const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
+const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
   function TagItemInner<T extends React.ElementType>(
     {
       component,
@@ -34,9 +36,11 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       bgImage,
       size = 'M',
       status = 'default',
+      disabled,
+      'aria-disabled': ariaDisabled,
       ...props
     }: TagItemProps<T>,
-    _ref: ForwardedRef<HTMLButtonElement>,
+    _ref: ForwardedRef<HTMLAnchorElement>,
   ) {
     const ref = useObjectRef(_ref)
 
@@ -52,11 +56,25 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'
     const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`
 
-    const Component = useMemo(() => component ?? 'button', [component])
+    const Component = useMemo(() => component ?? 'a', [component])
+    const isButton = Component === 'button'
+
+    const { linkProps } = useLink(
+      {
+        isDisabled: disabled,
+        elementType: typeof Component === 'string' ? Component : 'a',
+      },
+      ref,
+    )
+
+    const disabledProps = isButton
+      ? { disabled, 'aria-disabled': ariaDisabled }
+      : linkProps
 
     return (
       <Component
         {...props}
+        {...disabledProps}
         ref={ref}
         className={className}
         data-state={status}
@@ -84,6 +102,6 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       </Component>
     )
   },
-) as <T extends React.ElementType = 'button'>(p: TagItemProps<T>) => JSX.Element
+) as <T extends React.ElementType = 'a'>(p: TagItemProps<T>) => JSX.Element
 
 export default memo(TagItem)

package/src/index.ts

@@ -88,11 +88,23 @@ export {
   type HintTextContext,
 } from './components/HintText'
 export {
-  default as UnstableTextEllipsis,
+  default as TextEllipsis,
   type TextEllipsisProps,
 } from './components/TextEllipsis'
 export {
-  default as UnstablePagination,
+  default as Pagination,
   type PaginationProps,
 } from './components/Pagination'
+export {
+  default as Carousel,
+  type CarouselProps,
+  type CarouselItem,
+  type CarouselHandlerRef,
+  type ScrollAlign,
+  type ScrollSnap,
+  type ScrollSnapType,
+  type ScrollSnapAlign,
+  type ScrollStep,
+  type ScrollStepContext,
+} from './components/Carousel'
 import './components/FocusRing/index.css'