@charcoal-ui/react 4.0.0-beta.11 → 4.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.11",
+  "version": "4.0.0-beta.13",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -26,13 +26,10 @@
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
     "clean": "rimraf dist .tsbuildinfo",
-    "test": "jest --passWithNoTests"
+    "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.11",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.13",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -47,11 +44,9 @@
     "@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",
-    "babel-jest": "^29.7.0",
-    "jest": "^29.7.0",
     "jest-axe": "^5.0.1",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
@@ -59,13 +54,14 @@
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.11",
-    "@charcoal-ui/icons": "^4.0.0-beta.11",
-    "@charcoal-ui/theme": "^4.0.0-beta.11",
-    "@charcoal-ui/utils": "^4.0.0-beta.11",
+    "@charcoal-ui/foundation": "^4.0.0-beta.13",
+    "@charcoal-ui/icons": "^4.0.0-beta.13",
+    "@charcoal-ui/theme": "^4.0.0-beta.13",
+    "@charcoal-ui/utils": "^4.0.0-beta.13",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -98,5 +94,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "98fdec96dc55faa3cd72bf635f1c596d4be88f1a"
+  "gitHead": "0b37817809ef7fc52094865f7fbdd9e8d025e9e5"
 }

package/src/_lib/index.ts

@@ -24,7 +24,7 @@ export function unreachable(): never
  * @param value Value to be asserted as unreachable
  */
 // NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed
-// eslint-disable-next-line @typescript-eslint/unified-signatures
+
 export function unreachable(value: never): never
 export function unreachable(value?: never): never {
   throw new Error(

package/src/components/Button/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Button Danger 1`] = `
+exports[`Storybook Tests > react/Button > Danger 1`] = `
 <div
   data-dark={false}
 >
@@ -13,7 +13,7 @@ exports[`Storybook Tests react/Button Danger 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Default 1`] = `
+exports[`Storybook Tests > react/Button > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -25,7 +25,7 @@ exports[`Storybook Tests react/Button Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Disabled 1`] = `
+exports[`Storybook Tests > react/Button > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -38,7 +38,7 @@ exports[`Storybook Tests react/Button Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button FullWidth 1`] = `
+exports[`Storybook Tests > react/Button > FullWidth 1`] = `
 <div
   data-dark={false}
 >
@@ -51,7 +51,7 @@ exports[`Storybook Tests react/Button FullWidth 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button IsActive 1`] = `
+exports[`Storybook Tests > react/Button > IsActive 1`] = `
 <div
   data-dark={false}
 >
@@ -64,7 +64,7 @@ exports[`Storybook Tests react/Button IsActive 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Navigation 1`] = `
+exports[`Storybook Tests > react/Button > Navigation 1`] = `
 <div
   data-dark={false}
 >
@@ -77,7 +77,7 @@ exports[`Storybook Tests react/Button Navigation 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Overlay 1`] = `
+exports[`Storybook Tests > react/Button > Overlay 1`] = `
 <div
   data-dark={false}
 >
@@ -90,7 +90,7 @@ exports[`Storybook Tests react/Button Overlay 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Primary 1`] = `
+exports[`Storybook Tests > react/Button > Primary 1`] = `
 <div
   data-dark={false}
 >
@@ -103,7 +103,7 @@ exports[`Storybook Tests react/Button Primary 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Button Small 1`] = `
+exports[`Storybook Tests > react/Button > Small 1`] = `
 <div
   data-dark={false}
 >

package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/internals/CheckboxInput Checked 1`] = `
+exports[`Storybook Tests > react/internals/CheckboxInput > Checked 1`] = `
 <div
   data-dark={false}
 >
@@ -13,7 +13,7 @@ exports[`Storybook Tests react/internals/CheckboxInput Checked 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/CheckboxInput Default 1`] = `
+exports[`Storybook Tests > react/internals/CheckboxInput > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -25,7 +25,7 @@ exports[`Storybook Tests react/internals/CheckboxInput Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/CheckboxInput Disabled 1`] = `
+exports[`Storybook Tests > react/internals/CheckboxInput > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -39,7 +39,7 @@ exports[`Storybook Tests react/internals/CheckboxInput Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/CheckboxInput Invalid 1`] = `
+exports[`Storybook Tests > react/internals/CheckboxInput > Invalid 1`] = `
 <div
   data-dark={false}
 >
@@ -53,13 +53,13 @@ exports[`Storybook Tests react/internals/CheckboxInput Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/CheckboxInput Rounded 1`] = `
+exports[`Storybook Tests > react/internals/CheckboxInput > Rounded 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "backgroundColor": "var(--charcoal-background2)",
         "padding": 8,
       }

package/src/components/Checkbox/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Checkbox Checked 1`] = `
+exports[`Storybook Tests > react/Checkbox > Checked 1`] = `
 <div
   data-dark={false}
 >
@@ -24,7 +24,7 @@ exports[`Storybook Tests react/Checkbox Checked 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Checkbox Default 1`] = `
+exports[`Storybook Tests > react/Checkbox > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -37,7 +37,7 @@ exports[`Storybook Tests react/Checkbox Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Checkbox Disabled 1`] = `
+exports[`Storybook Tests > react/Checkbox > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -62,7 +62,7 @@ exports[`Storybook Tests react/Checkbox Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Checkbox Invalid 1`] = `
+exports[`Storybook Tests > react/Checkbox > Invalid 1`] = `
 <div
   data-dark={false}
 >
@@ -87,7 +87,7 @@ exports[`Storybook Tests react/Checkbox Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Checkbox Label 1`] = `
+exports[`Storybook Tests > react/Checkbox > Label 1`] = `
 <div
   data-dark={false}
 >
@@ -110,7 +110,7 @@ exports[`Storybook Tests react/Checkbox Label 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Checkbox ReadOnly 1`] = `
+exports[`Storybook Tests > react/Checkbox > ReadOnly 1`] = `
 <div
   data-dark={false}
 >

package/src/components/Clickable/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Clickable Button 1`] = `
+exports[`Storybook Tests > react/Clickable > Button 1`] = `
 <div
   data-dark={false}
 >
@@ -13,7 +13,7 @@ exports[`Storybook Tests react/Clickable Button 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Clickable Link 1`] = `
+exports[`Storybook Tests > react/Clickable > Link 1`] = `
 <div
   data-dark={false}
 >

package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
+exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
 <div
   data-dark={false}
 >
@@ -27,7 +27,7 @@ exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
     className="charcoal-list-item"
     href="#"
     style={
-      {
+      Object {
         "color": "red",
       }
     }
@@ -41,7 +41,7 @@ exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
     Switch
     <div
       style={
-        {
+        Object {
           "marginLeft": "auto",
         }
       }

package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Basic 1`] = `
 <div
   data-dark={false}
 >
@@ -121,7 +121,7 @@ exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -152,7 +152,7 @@ exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/internals/MenuList Group 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Group 1`] = `
 <div
   data-dark={false}
 >

package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/internals/Popover Basic 1`] = `
+exports[`Storybook Tests > react/internals/Popover > Basic 1`] = `
 <div
   data-dark={false}
 >
@@ -8,7 +8,7 @@ exports[`Storybook Tests react/internals/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      {
+      Object {
         "position": "absolute",
       }
     }
@@ -19,7 +19,7 @@ exports[`Storybook Tests react/internals/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      {
+      Object {
         "position": "absolute",
         "right": 8,
       }
@@ -31,7 +31,7 @@ exports[`Storybook Tests react/internals/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      {
+      Object {
         "bottom": 8,
         "position": "absolute",
       }
@@ -43,7 +43,7 @@ exports[`Storybook Tests react/internals/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      {
+      Object {
         "bottom": 8,
         "position": "absolute",
         "right": 8,