@charcoal-ui/react 4.0.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -33,7 +33,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.1",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.2.0",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -41,20 +41,17 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^27.4.0",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
-    "jest-axe": "^5.0.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "tsup": "^6.5.0",
@@ -62,10 +59,10 @@
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.1",
-    "@charcoal-ui/icons": "^4.0.1",
-    "@charcoal-ui/theme": "^4.0.1",
-    "@charcoal-ui/utils": "^4.0.1",
+    "@charcoal-ui/foundation": "^4.2.0",
+    "@charcoal-ui/icons": "^4.2.0",
+    "@charcoal-ui/theme": "^4.2.0",
+    "@charcoal-ui/utils": "^4.2.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -98,5 +95,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "42466af3a62cb99358f735a2ce16b237591a2579"
+  "gitHead": "45c93231d4b0feffe8f3a6bef2cdab96302c8eb4"
 }

package/src/components/Button/index.tsx

@@ -46,5 +46,11 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
       ref={ref}
     />
   )
-}) as <T extends React.ElementType = 'button'>(p: ButtonProps<T>) => JSX.Element
+}) as <T extends React.ElementType = 'button'>(
+  p: 'button' extends T
+    ? ButtonProps<'button'>
+    : ButtonProps<T> & {
+        component: T // required
+      }
+) => JSX.Element
 export default Button

package/src/components/Button/styledButtonTypeTest.d.tsx

@@ -0,0 +1,81 @@
+// This file is for type testing only
+
+// only use the type
+import type { default as ButtonType } from './index'
+import type styledType from 'styled-components'
+
+declare const Button: typeof ButtonType
+declare const styled: typeof styledType
+
+const Custom = ({ custom }: { custom: string }) => <>{custom}</>
+const CustomGeneric = <C extends string>({ custom }: { custom: C }) => (
+  <>{custom}</>
+)
+
+const StyledButton = styled(Button)``
+const StyledButtonAsButton = styled(Button<'button'>)``
+const StyledButtonA = styled(Button<'a'>)``
+const StyledButtonCustom = styled(Button<typeof Custom>)``
+const StyledButtonCustomAsButton = styled(
+  Button<typeof Custom>
+)`` as typeof Button
+const StyledButtonCustomGeneric = styled(Button<typeof CustomGeneric>)``
+const StyledButtonCustomGenericFoo = styled(
+  Button<typeof CustomGeneric<'foo'>>
+)``
+
+// for type test only
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Tests() {
+  return (
+    <>
+      {/* OK */}
+
+      <StyledButton />
+      <StyledButton type="button" disabled />
+      <StyledButtonAsButton type="button" disabled />
+      <StyledButtonA component="a" href="#" />
+      <StyledButtonCustom component={Custom} custom="" />
+      <StyledButtonCustomAsButton<'a'> component="a" href="#" />
+      <StyledButtonCustomAsButton<typeof CustomGeneric<'bar'>>
+        component={CustomGeneric}
+        custom="bar"
+      />
+      <StyledButtonCustomAsButton component="a" href="#" />
+      <StyledButtonCustomGeneric component={CustomGeneric} custom="" />
+      <StyledButtonCustomGenericFoo component={CustomGeneric} custom="foo" />
+      <StyledButtonCustomGenericFoo
+        component={CustomGeneric<'foo'>}
+        custom="foo"
+      />
+
+      {/* NG */}
+
+      {/* @ts-expect-error Property 'href' does not exist on type  */}
+      <StyledButton href="" />
+      {/* @ts-expect-error Property 'href' does not exist on type  */}
+      <StyledButtonAsButton href="" />
+      {/* @ts-expect-error Property 'component' is missing */}
+      <StyledButtonA href="#" />
+      {/* @ts-expect-error Property 'disabled' does not exist on type  */}
+      <StyledButtonA disabled />
+      {/* @ts-expect-error Type '"button"' is not assignable to type '"a"'  */}
+      <StyledButtonA component="button" href="" />
+      {/* @ts-expect-error Property 'component' is missing */}
+      <StyledButtonCustom custom="" />
+      {/* @ts-expect-error Type 'string' is not assignable  */}
+      <StyledButtonCustom component="a" custom="" />
+      {/* @ts-expect-error Property 'custom' does not exist on type  */}
+      <StyledButtonCustomAsButton custom="" />
+      {/* @ts-expect-error Type 'href' is not assignable  */}
+      <StyledButtonCustomAsButton<'button'> href="#" />
+      <StyledButtonCustomGenericFoo
+        /* @ts-expect-error Type '"foo"' is not assignable to type '"bar"' */
+        component={CustomGeneric<'bar'>}
+        custom="foo"
+      />
+      {/* @ts-expect-error '""' is not assignable to type '"foo"' */}
+      <StyledButtonCustomGenericFoo custom="" />
+    </>
+  )
+}

package/src/components/Switch/SwitchInput/index.tsx

@@ -23,7 +23,6 @@ const SwitchInput = forwardRef<
     },
     [onChange]
   )
-  props.children
 
   const classNames = useClassNames('charcoal-switch-input', className)
   return (

package/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -388,9 +388,7 @@ exports[`Storybook Tests > react/TextField > Number 1`] = `
         className="charcoal-field-label"
         htmlFor="test-id"
         id="test-id"
-      >
-        
-      </label>
+      />
       <div
         className="charcoal-field-label-sub-label"
       >

package/src/components/TextField/index.tsx

@@ -108,7 +108,9 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           data-invalid={invalid === true}
           ref={containerRef}
         >
-          {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
+          {prefix !== null && (
+            <div className="charcoal-text-field-prefix">{prefix}</div>
+          )}
           <input
             className="charcoal-text-field-input"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
@@ -124,7 +126,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             value={value}
             {...props}
           />
-          {(suffix || showCount) && (
+          {(suffix !== null || showCount) && (
             <div className="charcoal-text-field-suffix">
               {suffix}
               {showCount && (