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

package/src/components/Carousel/index.tsx

@@ -7,9 +7,11 @@ import {
   memo,
   useCallback,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
+  type CSSProperties,
   type ReactNode,
 } from 'react'
 import { mergeProps, useFocusRing, useKeyboard } from 'react-aria'
@@ -67,6 +69,8 @@ export type CarouselProps = Readonly<{
   onResize?: (width: number) => void
   onScrollStateChange?: (canScroll: boolean) => void
   defaultScroll?: { align?: ScrollAlign; offset?: number }
+  // スライド間隔。number は px、string は CSS 値をそのまま使う。未指定は間隔なし。
+  gap?: number | string
   // 1 直接子要素 = 1 スライド（react-sandbox 互換）。
   children: ReactNode
 }>
@@ -147,6 +151,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     onResize,
     onScrollStateChange,
     defaultScroll: { align = 'left', offset = 0 } = {},
+    gap,
     children,
     ...props
   }: CarouselProps,
@@ -213,10 +218,22 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
   const { focusProps: rootFocusProps, isFocusVisible: rootFocusVisible } =
     useFocusRing({ within: true })
 
+  // gap 宣言自体は index.css 側に置き、ここでは CSS 変数の値だけを注入する。
+  const gapStyle = useMemo(
+    () =>
+      ({
+        ...(gap != null && {
+          '--charcoal-carousel-gap': typeof gap === 'number' ? `${gap}px` : gap,
+        }),
+      }) satisfies CSSProperties,
+    [gap],
+  )
+
   return (
     <div
       {...rootFocusProps}
       className={className}
+      style={gapStyle}
       data-size={size}
       data-has-gradient={hasGradient}
       data-full-width={fullWidth}

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

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { forwardRef } from 'react'
+import TagItem from '.'
+
+describe('TagItem', () => {
+  it('preserves link props on a custom link component', () => {
+    const NextLink = forwardRef<
+      HTMLAnchorElement,
+      React.ComponentPropsWithoutRef<'a'>
+    >(function NextLink({ children, ...props }, ref) {
+      return (
+        <a ref={ref} {...props}>
+          {children}
+        </a>
+      )
+    })
+
+    const onClick = vi.fn()
+
+    render(
+      <TagItem
+        component={NextLink}
+        href="/tags/girl"
+        label="#girl"
+        target="_blank"
+        onClick={onClick}
+      />,
+    )
+
+    const link = screen.getByRole('link')
+
+    expect(link).toHaveAttribute('href', '/tags/girl')
+    expect(link).toHaveAttribute('target', '_blank')
+
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/TagItem/index.tsx

@@ -61,6 +61,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
 
     const { linkProps } = useLink(
       {
+        ...props,
         isDisabled: disabled,
         elementType: typeof Component === 'string' ? Component : 'a',
       },

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

@@ -30,6 +30,10 @@
   box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
+.charcoal-text-area-container:has([data-no-bottom-padding='true']) {
+  height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+}
+
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
   background-color: var(--charcoal-color-container-secondary-hover-a);
 }
@@ -47,13 +51,26 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -61,8 +78,12 @@
 }
 
 .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
-  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+  padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+  height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
 }
 
 .charcoal-text-area-textarea::placeholder {

package/src/components/TextArea/index.css

@@ -32,6 +32,10 @@
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
 
+  &:has([data-no-bottom-padding='true']) {
+    height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+  }
+
   &:not([aria-disabled='true']):hover {
     background-color: var(--charcoal-color-container-secondary-hover-a);
   }
@@ -50,13 +54,27 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -64,8 +82,12 @@
   background: none;
 
   &[data-no-bottom-padding='true'] {
-    padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+    padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+    height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
   }
 
   &::placeholder {

package/src/components/TextArea/index.tsx

@@ -206,7 +206,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           aria-invalid={invalid === true}
           ref={containerRef}
           style={{
-            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+            '--charcoal-text-area-rows': rows,
           }}
         >
           <textarea