@charcoal-ui/styled 4.3.0-beta.5 → 4.4.0

package/dist/index.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAA;AAK/B,OAAO,EAAE,OAAO,EAAW,MAAM,eAAe,CAAA;AA+BhD,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,OAAO;KAAG;CACjD"}
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAA;AAK/B,OAAO,EAAE,OAAO,EAAW,MAAM,eAAe,CAAA;AAiChD,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,OAAO;KAAG;CACjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "4.3.0-beta.5",
+  "version": "4.4.0",
   "license": "Apache-2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs.js",
@@ -14,7 +14,6 @@
   "sideEffects": false,
   "devDependencies": {
     "@types/react": "^18.3.3",
-    "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -22,24 +21,23 @@
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.2",
-    "@charcoal-ui/react": "4.3.0-beta.5"
+    "@charcoal-ui/react": "4.4.0"
   },
   "dependencies": {
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "4.3.0-beta.5",
-    "@charcoal-ui/theme": "4.3.0-beta.5",
-    "@charcoal-ui/utils": "4.3.0-beta.5"
+    "@charcoal-ui/theme": "4.4.0",
+    "@charcoal-ui/foundation": "4.4.0",
+    "@charcoal-ui/utils": "4.4.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
     "styled-components": ">=5.1.1",
-    "@charcoal-ui/react": "4.3.0-beta.5"
+    "@charcoal-ui/react": "4.4.0"
   },
   "files": [
     "src",

package/src/__snapshots__/addThemeUtils.story.storyshot

@@ -109,64 +109,66 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
   background-color: var(--charcoal-brand-press);
 }
 
-<div
-  data-dark={false}
->
+<div>
   <div
-    className="c0"
+    data-dark="false"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
+        class="c1"
       >
-        \${({ theme }) =&gt; theme.utils.typography(14, true)}
+        <div
+          class="c2"
+        >
+          \${({ theme }) =&gt; theme.utils.typography(14, true)}
+        </div>
       </div>
-    </div>
-    <div
-      className="c1"
-    >
       <div
-        className="c3"
+        class="c1"
       >
-        <pre
-          className="c4"
+        <div
+          class="c3"
         >
-          <code
-            className="c5"
+          <pre
+            class="c4"
           >
-            \${({ theme }) =&gt; [
+            <code
+              class="c5"
+            >
+              \${({ theme }) =&gt; [
     theme.utils.margin(16, 'auto'),
     theme.utils.padding(4, 8, 16, 24),
   ]}
-          </code>
-        </pre>
+            </code>
+          </pre>
+        </div>
       </div>
-    </div>
-    <div
-      className="c1"
-    >
       <div
-        className="c6"
+        class="c1"
       >
-        theme.utils.assertiveRingCss
+        <div
+          class="c6"
+        >
+          theme.utils.assertiveRingCss
+        </div>
       </div>
-    </div>
-    <div
-      className="c1"
-    >
-      <button
-        className="c7"
-      >
-        theme.utils.focusVisibleFocusRingCss
-      </button>
-      <button
-        className="c7"
-        disabled={true}
+      <div
+        class="c1"
       >
-        theme.utils.disabledCss
-      </button>
+        <button
+          class="c7"
+        >
+          theme.utils.focusVisibleFocusRingCss
+        </button>
+        <button
+          class="c7"
+          disabled=""
+        >
+          theme.utils.disabledCss
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/__snapshots__/index.test.tsx.snap

@@ -109,61 +109,63 @@ exports[`Story > <Example /> 1`] = `
   background-color: var(--charcoal-brand-press);
 }
 
-<div
-  className="c0"
->
+<div>
   <div
-    className="c1"
+    class="c0"
   >
     <div
-      className="c2"
+      class="c1"
     >
-      \${({ theme }) =&gt; theme.utils.typography(14, true)}
+      <div
+        class="c2"
+      >
+        \${({ theme }) =&gt; theme.utils.typography(14, true)}
+      </div>
     </div>
-  </div>
-  <div
-    className="c1"
-  >
     <div
-      className="c3"
+      class="c1"
     >
-      <pre
-        className="c4"
+      <div
+        class="c3"
       >
-        <code
-          className="c5"
+        <pre
+          class="c4"
         >
-          \${({ theme }) =&gt; [
+          <code
+            class="c5"
+          >
+            \${({ theme }) =&gt; [
     theme.utils.margin(16, 'auto'),
     theme.utils.padding(4, 8, 16, 24),
   ]}
-        </code>
-      </pre>
+          </code>
+        </pre>
+      </div>
     </div>
-  </div>
-  <div
-    className="c1"
-  >
     <div
-      className="c6"
+      class="c1"
     >
-      theme.utils.assertiveRingCss
+      <div
+        class="c6"
+      >
+        theme.utils.assertiveRingCss
+      </div>
     </div>
-  </div>
-  <div
-    className="c1"
-  >
-    <button
-      className="c7"
-    >
-      theme.utils.focusVisibleFocusRingCss
-    </button>
-    <button
-      className="c7"
-      disabled={true}
+    <div
+      class="c1"
     >
-      theme.utils.disabledCss
-    </button>
+      <button
+        class="c7"
+      >
+        theme.utils.focusVisibleFocusRingCss
+      </button>
+      <button
+        class="c7"
+        disabled=""
+      >
+        theme.utils.disabledCss
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -265,17 +267,19 @@ exports[`ThemeUtilsTest > <ThemeUtilsTest /> 1`] = `
   font-weight: bold;
 }
 
-<div
-  className="c0"
->
-  <div
-    className="c1"
-  />
-  <div
-    className="c2"
-  />
+<div>
   <div
-    className="c3"
-  />
+    class="c0"
+  >
+    <div
+      class="c1"
+    />
+    <div
+      class="c2"
+    />
+    <div
+      class="c3"
+    />
+  </div>
 </div>
 `;

package/src/index.test.tsx

@@ -1,7 +1,7 @@
 import { light } from '@charcoal-ui/theme'
 import 'jest-styled-components'
 
-import renderer from 'react-test-renderer'
+import { render as testRender, cleanup } from '@testing-library/react'
 import styled, { ThemeProvider } from 'styled-components'
 import { Example } from './addThemeUtils.story'
 import { MyTheme, myTheme } from './storyHelper'
@@ -9,11 +9,13 @@ import { MyTheme, myTheme } from './storyHelper'
 import type { JSX } from 'react'
 
 function render(children: JSX.Element) {
-  return renderer
-    .create(<ThemeProvider theme={myTheme(light)}>{children}</ThemeProvider>)
-    .toJSON()
+  return testRender(
+    <ThemeProvider theme={myTheme(light)}>{children}</ThemeProvider>
+  ).container
 }
 
+afterEach(() => cleanup())
+
 // TODO: もう少し theme() 関数に対する丁寧なユニットテストが欲しい
 describe('Story', () => {
   test('<Example />', () => {