@charcoal-ui/react 3.13.1 → 3.14.0

package/src/components/MultiSelect/index.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 import { default as MultiSelect, MultiSelectGroup } from '.'
 import { light } from '@charcoal-ui/theme'
+import { vi } from 'vitest'
 
 describe('MultiSelect', () => {
   describe('in development mode', () => {
@@ -12,7 +13,7 @@ describe('MultiSelect', () => {
     describe('when `<MultiSelect />` is used without `<MultiSelectGroup />`', () => {
       beforeEach(() => {
         // eslint-disable-next-line no-console
-        console.error = jest.fn()
+        console.error = vi.fn()
 
         render(
           <ThemeProvider theme={light}>
@@ -38,8 +39,8 @@ describe('MultiSelect', () => {
     let option3: HTMLInputElement
     let allOptions: HTMLInputElement[]
     let parent: HTMLDivElement
-    const childOnChange = jest.fn()
-    const parentOnChange = jest.fn()
+    const childOnChange = vi.fn()
+    const parentOnChange = vi.fn()
 
     beforeEach(() => {
       render(
@@ -89,8 +90,8 @@ describe('MultiSelect', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
     let option3: HTMLInputElement
-    const childOnChange = jest.fn()
-    const parentOnChange = jest.fn()
+    const childOnChange = vi.fn()
+    const parentOnChange = vi.fn()
 
     beforeEach(() => {
       render(

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Radio Default 1`] = `
+exports[`Storybook Tests > react/Radio > Default 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -236,7 +236,7 @@ exports[`Storybook Tests react/Radio Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Disabled 1`] = `
+exports[`Storybook Tests > react/Radio > Disabled 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -472,7 +472,7 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Invalid 1`] = `
+exports[`Storybook Tests > react/Radio > Invalid 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -709,7 +709,7 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
+exports[`Storybook Tests > react/Radio > PartialDisabled 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -945,7 +945,7 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Readonly 1`] = `
+exports[`Storybook Tests > react/Radio > Readonly 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;

package/src/components/Radio/index.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 import Radio, { RadioGroup } from '.'
 import { light } from '@charcoal-ui/theme'
+import { vi } from 'vitest'
 
 describe('Radio', () => {
   describe('development mode', () => {
@@ -12,7 +13,7 @@ describe('Radio', () => {
     describe('<Radio> is not surrounded by <RadioGroup>', () => {
       beforeEach(() => {
         // eslint-disable-next-line no-console
-        console.error = jest.fn()
+        console.error = vi.fn()
 
         render(
           <ThemeProvider theme={light}>
@@ -33,7 +34,7 @@ describe('Radio', () => {
   describe('value is the first option', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
-    const handleChange = jest.fn()
+    const handleChange = vi.fn()
 
     beforeEach(() => {
       render(<TestComponent value="option1" onChange={handleChange} />)
@@ -108,7 +109,7 @@ describe('Radio', () => {
 
 function TestComponent({
   value,
-  onChange = jest.fn(),
+  onChange = vi.fn(),
   radioGroupDisabled = false,
   readonly = false,
   invalid = false,

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/SegmentedControl ObjectSegments 1`] = `
+exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -259,7 +259,7 @@ exports[`Storybook Tests react/SegmentedControl ObjectSegments 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/SegmentedControl StringSegments 1`] = `
+exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Switch Checked 1`] = `
+exports[`Storybook Tests > react/Switch > Checked 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -144,7 +144,7 @@ exports[`Storybook Tests react/Switch Checked 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Default 1`] = `
+exports[`Storybook Tests > react/Switch > Default 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -287,7 +287,7 @@ exports[`Storybook Tests react/Switch Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Disabled 1`] = `
+exports[`Storybook Tests > react/Switch > Disabled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -443,7 +443,7 @@ exports[`Storybook Tests react/Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Label 1`] = `
+exports[`Storybook Tests > react/Switch > Label 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;

package/src/components/Switch/index.tsx

@@ -50,7 +50,6 @@ const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchProps>(
       <Label className={className} aria-disabled={disabled}>
         <SwitchInput {...rest} ref={ref} />
         {'children' in props ? (
-          // eslint-disable-next-line react/destructuring-assignment
           <LabelInner>{props.children}</LabelInner>
         ) : undefined}
       </Label>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/TagItem Active 1`] = `
+exports[`Storybook Tests > react/TagItem > Active 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -151,7 +151,7 @@ exports[`Storybook Tests react/TagItem Active 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem BGColor 1`] = `
+exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -299,7 +299,7 @@ exports[`Storybook Tests react/TagItem BGColor 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem BGImage 1`] = `
+exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -461,7 +461,7 @@ exports[`Storybook Tests react/TagItem BGImage 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Default 1`] = `
+exports[`Storybook Tests > react/TagItem > Default 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -609,7 +609,7 @@ exports[`Storybook Tests react/TagItem Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Disabled 1`] = `
+exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -757,7 +757,7 @@ exports[`Storybook Tests react/TagItem Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem InActive 1`] = `
+exports[`Storybook Tests > react/TagItem > InActive 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -906,7 +906,7 @@ exports[`Storybook Tests react/TagItem InActive 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Small 1`] = `
+exports[`Storybook Tests > react/TagItem > Small 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -1054,7 +1054,7 @@ exports[`Storybook Tests react/TagItem Small 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem TranslatedLabel 1`] = `
+exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
+exports[`Storybook Tests > react/TextArea > AssistiveText 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -229,7 +229,7 @@ exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
+exports[`Storybook Tests > react/TextArea > AutoHeight 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -445,7 +445,7 @@ exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Default 1`] = `
+exports[`Storybook Tests > react/TextArea > Default 1`] = `
 .c6 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -707,7 +707,7 @@ exports[`Storybook Tests react/TextArea Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Disabled 1`] = `
+exports[`Storybook Tests > react/TextArea > Disabled 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -925,7 +925,7 @@ exports[`Storybook Tests react/TextArea Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Invalid 1`] = `
+exports[`Storybook Tests > react/TextArea > Invalid 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1156,7 +1156,7 @@ exports[`Storybook Tests react/TextArea Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Label 1`] = `
+exports[`Storybook Tests > react/TextArea > Label 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1358,7 +1358,7 @@ exports[`Storybook Tests react/TextArea Label 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Placeholder 1`] = `
+exports[`Storybook Tests > react/TextArea > Placeholder 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1575,7 +1575,7 @@ exports[`Storybook Tests react/TextArea Placeholder 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
+exports[`Storybook Tests > react/TextArea > ReadOnly 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1791,7 +1791,7 @@ exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea Required 1`] = `
+exports[`Storybook Tests > react/TextArea > Required 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2040,7 +2040,7 @@ exports[`Storybook Tests react/TextArea Required 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea ShowCount 1`] = `
+exports[`Storybook Tests > react/TextArea > ShowCount 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2271,7 +2271,7 @@ exports[`Storybook Tests react/TextArea ShowCount 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextArea SubLabel 1`] = `
+exports[`Storybook Tests > react/TextArea > SubLabel 1`] = `
 .c6 {
   cursor: pointer;
   -webkit-appearance: none;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/TextField Affix 1`] = `
+exports[`Storybook Tests > react/TextField > Affix 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -253,7 +253,7 @@ exports[`Storybook Tests react/TextField Affix 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField AssistiveText 1`] = `
+exports[`Storybook Tests > react/TextField > AssistiveText 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -486,7 +486,7 @@ exports[`Storybook Tests react/TextField AssistiveText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Default 1`] = `
+exports[`Storybook Tests > react/TextField > Default 1`] = `
 .c6 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -751,7 +751,7 @@ exports[`Storybook Tests react/TextField Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Disabled 1`] = `
+exports[`Storybook Tests > react/TextField > Disabled 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -973,7 +973,7 @@ exports[`Storybook Tests react/TextField Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Invalid 1`] = `
+exports[`Storybook Tests > react/TextField > Invalid 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1208,7 +1208,7 @@ exports[`Storybook Tests react/TextField Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Label 1`] = `
+exports[`Storybook Tests > react/TextField > Label 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1414,7 +1414,7 @@ exports[`Storybook Tests react/TextField Label 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Number 1`] = `
+exports[`Storybook Tests > react/TextField > Number 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1630,7 +1630,7 @@ exports[`Storybook Tests react/TextField Number 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Placeholder 1`] = `
+exports[`Storybook Tests > react/TextField > Placeholder 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1851,7 +1851,7 @@ exports[`Storybook Tests react/TextField Placeholder 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField Prefix 1`] = `
+exports[`Storybook Tests > react/TextField > Prefix 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2105,7 +2105,7 @@ exports[`Storybook Tests react/TextField Prefix 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField ReadOnly 1`] = `
+exports[`Storybook Tests > react/TextField > ReadOnly 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2325,7 +2325,7 @@ exports[`Storybook Tests react/TextField ReadOnly 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField RequiredText 1`] = `
+exports[`Storybook Tests > react/TextField > RequiredText 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2564,7 +2564,7 @@ exports[`Storybook Tests react/TextField RequiredText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField ShowCount 1`] = `
+exports[`Storybook Tests > react/TextField > ShowCount 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2812,7 +2812,7 @@ exports[`Storybook Tests react/TextField ShowCount 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TextField SubLabel 1`] = `
+exports[`Storybook Tests > react/TextField > SubLabel 1`] = `
 .c6 {
   cursor: pointer;
   -webkit-appearance: none;