@charcoal-ui/react 4.1.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "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.1.0",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.2.1",
     "@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.1.0",
-    "@charcoal-ui/icons": "^4.1.0",
-    "@charcoal-ui/theme": "^4.1.0",
-    "@charcoal-ui/utils": "^4.1.0",
+    "@charcoal-ui/foundation": "^4.2.1",
+    "@charcoal-ui/icons": "^4.2.1",
+    "@charcoal-ui/theme": "^4.2.1",
+    "@charcoal-ui/utils": "^4.2.1",
     "@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": "e1d401460774c73120434d8be3bca5698d519493"
+  "gitHead": "9a017d7e402dfcf371a5ca9a2b61bcd095467d89"
 }

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/text-field.test.tsx

@@ -0,0 +1,72 @@
+import { render } from '@testing-library/react'
+import TextField from '.'
+
+import '@testing-library/jest-dom'
+
+describe('TextField component', () => {
+  it('should not render prefix and suffix when not provided', () => {
+    const { container } = render(<TextField />)
+
+    // prefix and suffix elements should not be rendered
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).toBeNull()
+    expect(suffixElement).toBeNull()
+  })
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render prefix when value is falsy (%s: %s)',
+    (prefixValue, _desc) => {
+      const { container } = render(<TextField prefix={prefixValue} />)
+      const prefixElement = container.querySelector('.charcoal-text-prefix')
+      expect(prefixElement).toBeNull()
+    }
+  )
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render suffix when value is falsy (%s: %s) and showCount is false',
+    (suffixValue, _desc) => {
+      const { container } = render(
+        <TextField suffix={suffixValue} showCount={false} />
+      )
+      const suffixElement = container.querySelector(
+        '.charcoal-text-field-suffix'
+      )
+      expect(suffixElement).toBeNull()
+    }
+  )
+
+  it('should render prefix and suffix when provided as truthy values', () => {
+    const prefixContent = 'Test Prefix'
+    const suffixContent = 'Test Suffix'
+    const { container, getByText } = render(
+      <TextField
+        prefix={<span>{prefixContent}</span>}
+        suffix={<span>{suffixContent}</span>}
+      />
+    )
+
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).not.toBeNull()
+    expect(suffixElement).not.toBeNull()
+
+    // Verify text content
+    expect(getByText(prefixContent)).toBeInTheDocument()
+    expect(getByText(suffixContent)).toBeInTheDocument()
+  })
+})