@sanity/ui 0.38.2-next.4 → 0.38.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.38.2-next.4+e7b282f0",
+  "version": "0.38.2",
   "sideEffects": false,
   "source": "./src/index.ts",
   "module": "./dist/sanity-ui.js",
@@ -8,10 +8,11 @@
   "main": "./dist/sanity-ui.cjs",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
-      "default": "./dist/sanity-ui.js",
       "types": "./dist/types/src/index.d.ts",
-      "require": "./dist/sanity-ui.cjs"
+      "source": "./src/index.ts",
+      "import": "./dist/sanity-ui.js",
+      "require": "./dist/sanity-ui.cjs",
+      "default": "./dist/sanity-ui.js"
     }
   },
   "files": [
@@ -21,10 +22,12 @@
   "license": "MIT",
   "scripts": {
     "build": "pkg build --tsconfig tsconfig.dist.json",
+    "check:package": "pkg --strict --tsconfig tsconfig.dist.json",
     "clean": "rimraf dist",
     "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
-    "prebuild": "yarn clean",
-    "test": "jest",
+    "postbuild": "run-s check:package",
+    "prebuild": "run-s clean",
+    "test": "vitest run",
     "type-check": "tsc --build",
     "watch": "pkg watch --tsconfig tsconfig.dist.json"
   },
@@ -32,8 +35,8 @@
     "@juggle/resize-observer": "^3.4.0",
     "@popperjs/core": "^2.11.6",
     "@reach/auto-id": "^0.17.0",
-    "@sanity/color": "2.1.16-next.4+e7b282f0",
-    "@sanity/icons": "1.3.6-next.4+e7b282f0",
+    "@sanity/color": "^2.1.16",
+    "@sanity/icons": "^1.3.6",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
@@ -42,7 +45,6 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
@@ -71,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e7b282f0b819b53d3a24de57a24f254faebd82c3"
+  "gitHead": "4c9ab2537fa3b3d437de5ca979b6fb932f3d115b"
 }

package/src/components/menu/menu.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
@@ -8,7 +9,7 @@ import {useMenu} from './useMenu'
 describe('components/menu', () => {
   describe('useMenu', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootMenu = useMenu()
@@ -64,7 +65,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -93,7 +94,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/components/toast/toast.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
@@ -7,7 +8,7 @@ import {useToast} from './useToast'
 describe('components/toast', () => {
   describe('useToast', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootToast = useToast()
@@ -37,7 +38,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -65,7 +66,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/primitives/avatar/avatar.tsx

@@ -130,7 +130,13 @@ export const Avatar = forwardRef(function Avatar(
         <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
-              <image href={src} width="1" height="1" onError={handleImageError} />
+              <image
+                href={src}
+                width="1"
+                height="1"
+                // eslint-disable-next-line react/no-unknown-property
+                onError={handleImageError}
+              />
             </pattern>
           </defs>
 

package/src/styles/font/responsiveFont.ts

@@ -48,19 +48,6 @@ export function responsiveFont(
     },
   }
 
-  // @TODO fix the real condition that is causing $size to be undefined sometimes
-  if (!$size) {
-    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
-    if (!responsiveFont.warned) {
-      // eslint-disable-next-line no-console
-      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
-      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
-      responsiveFont.warned = true
-    }
-
-    return [base]
-  }
-
   const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
 
   return [base, ...resp]

package/src/styles/helpers.ts

@@ -30,7 +30,7 @@ export function _responsive<T>(
   values: T[],
   callback: (value: T, index: number, array: T[]) => CSSObject
 ): CSSObject[] {
-  const statements = values.map(callback)
+  const statements = values?.map(callback) || []
 
   return statements.map((statement, mediaIndex) => {
     if (mediaIndex === 0) return statement

package/src/theme/theme.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'
@@ -8,7 +9,7 @@ import {useRootTheme} from './useRootTheme'
 describe('theme', () => {
   describe('useRootTheme', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootTheme = useRootTheme()
@@ -41,7 +42,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -69,7 +70,7 @@ describe('theme', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
@@ -7,7 +8,7 @@ import {useBoundaryElement} from './useBoundaryElement'
 describe('utils/boundaryElement', () => {
   describe('useBoundaryElement', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -37,7 +38,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should provide default value when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -64,7 +65,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/layer/layer.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -7,7 +8,7 @@ import {useLayer} from './useLayer'
 describe('utils/layer', () => {
   describe('useLayer', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootLayer = useLayer()
@@ -43,7 +44,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -71,7 +72,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/portal/portal.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -7,7 +8,7 @@ import {usePortal} from './usePortal'
 describe('utils/portal', () => {
   describe('usePortal', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootPortal = usePortal()
@@ -39,7 +40,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -67,7 +68,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/primitives/badge/badge.test.tsx

@@ -1,14 +0,0 @@
-import {axe} from 'jest-axe'
-import React from 'react'
-import {render} from '../../../test'
-import {Badge} from './badge'
-
-describe('atoms/badge', () => {
-  it('should have no violations (axe)', async () => {
-    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
-    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-})

package/src/primitives/button/button.test.tsx

@@ -1,42 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
-import React from 'react'
-import {render} from '../../../test'
-import {Button, ButtonProps} from './button'
-
-describe('atoms/button', () => {
-  it('Axe: should have no violations', async () => {
-    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'light',
-    })
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-
-    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'dark',
-    })
-
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-
-  it('should render text', () => {
-    render(<Button text="Button text" />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-})