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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "6.0.0-rc.0",
+  "version": "6.0.0-rc.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,10 +42,10 @@
     "polished": "^4.1.4",
     "react-compiler-runtime": "1.0.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/icons": "6.0.0-rc.0",
-    "@charcoal-ui/foundation": "6.0.0-rc.0",
-    "@charcoal-ui/utils": "6.0.0-rc.0",
-    "@charcoal-ui/theme": "6.0.0-rc.0"
+    "@charcoal-ui/foundation": "6.0.0-rc.1",
+    "@charcoal-ui/theme": "6.0.0-rc.1",
+    "@charcoal-ui/icons": "6.0.0-rc.1",
+    "@charcoal-ui/utils": "6.0.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

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,11 @@ 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'
 import './components/FocusRing/index.css'