@charcoal-ui/react 5.11.0 → 5.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,14 +28,15 @@
     "@types/glob": "^8.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
     "@types/warning": "^3.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.1.9",
     "autoprefixer": "^10.4.19",
     "jsdom": "^24.1.0",
+    "playwright": "^1.58.2",
     "postcss-nested": "^7.0.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.2.1"
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@react-aria/button": "^3.9.1",
@@ -54,10 +55,10 @@
     "react-compiler-runtime": "1.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.11.0",
-    "@charcoal-ui/icons": "5.11.0",
-    "@charcoal-ui/theme": "5.11.0",
-    "@charcoal-ui/utils": "5.11.0"
+    "@charcoal-ui/foundation": "5.12.0",
+    "@charcoal-ui/icons": "5.12.0",
+    "@charcoal-ui/theme": "5.12.0",
+    "@charcoal-ui/utils": "5.12.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0"
@@ -81,6 +82,7 @@
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
     "clean": "rimraf dist .tsbuildinfo",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run --passWithNoTests",
+    "test:browser": "vitest run --config vitest.browser.config.ts"
   }
 }

package/src/__tests__/css-output.test.ts

@@ -72,6 +72,7 @@ describe('CSS nesting output equivalence', () => {
       '__snapshots__',
       'index.css.snap',
     )
-    await expect(canonicalize(result.root)).toMatchFileSnapshot(snapshotPath)
+    const expected = await fs.readFile(snapshotPath, 'utf-8')
+    expect(canonicalize(result.root)).toBe(expected)
   })
 })

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

@@ -20,3 +20,4 @@
   font-size: 14px;
   line-height: 20px;
 }
+

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

@@ -16,3 +16,4 @@
   line-height: 22px;
   color: var(--charcoal-text2);
 }
+

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

@@ -21,3 +21,4 @@
   line-height: 22px;
   color: var(--charcoal-text2);
 }
+

package/src/components/TextArea/TextArea.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import TextArea from '.'
+
+describe('TextArea component', () => {
+  it.each`
+    name                                    | value                        | defaultValue | expectedValue | expectedCount
+    ${'uncontrolled defaultValue'}          | ${undefined}                 | ${'abc'}     | ${'abc'}      | ${'3'}
+    ${'controlled null'}                    | ${null as unknown as string} | ${undefined} | ${''}         | ${'0'}
+    ${'controlled null with defaultValue'}  | ${null as unknown as string} | ${'abc'}     | ${'abc'}      | ${'3'}
+    ${'controlled value with defaultValue'} | ${'xy'}                      | ${'abc'}     | ${'xy'}       | ${'2'}
+  `('$name', ({ value, defaultValue, expectedValue, expectedCount }) => {
+    render(<TextArea showCount value={value} defaultValue={defaultValue} />)
+
+    expect(screen.getByRole('textbox')).toHaveValue(expectedValue)
+    expect(screen.getByText(expectedCount)).toBeInTheDocument()
+  })
+})

package/src/components/TextArea/index.tsx

@@ -78,17 +78,18 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
     forwardRef,
   ) {
+    const isUncontrolled = value === undefined
+    // `null` is invalid for TextAreaProps, but may arrive at runtime. Keep the
+    // pre-f710d512 nullish fallback so getCount is never called with null.
+    const countValue = value ?? defaultValue?.toString() ?? ''
     const [rows, setRows] = useState(initialRows)
-    const [count, setCount] = useState(
-      getCount(value ?? defaultValue?.toString() ?? ''),
-    )
+    const [count, setCount] = useState(getCount(countValue))
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const containerRef = useRef(null)
     useFocusWithClick(containerRef, textareaRef)
     const { visuallyHiddenProps } = useVisuallyHidden()
 
-    const isUncontrolled = value === undefined
     const isEnableAutoHeight = useMemo(
       () => autoHeight || (maxRows && maxRows >= 0),
       [autoHeight, maxRows],
@@ -172,7 +173,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     useEffect(() => {
       // 制御コンポーネントの時の挙動
       if (!isUncontrolled) {
-        setCount(getCount(value))
+        setCount(getCount(countValue))
       }
 
       //　autoHeight同期(valueが変更された時にsyncHeightしたい)
@@ -181,7 +182,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       }
     }, [
       isUncontrolled,
-      value,
+      countValue,
       getCount,
       isEnableAutoHeight,
       textareaRef,

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

@@ -18,3 +18,4 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+