@sanity/ui 0.38.1-next.6 → 0.38.2-next.16

package/dist/types/src/index.d.ts

@@ -4,6 +4,9 @@ import {CSSObject} from 'styled-components'
 import {default as React_2} from 'react'
 import {StyledComponent} from 'styled-components'
 
+/** @beta */
+export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
+
 /**
  * @internal
  */
@@ -1153,8 +1156,8 @@ export declare interface BoxProps
 }
 
 /**
+ * TODO: Rename to `ThemeBoxShadow`
  * @public
- * @todo Rename to `ThemeBoxShadow`
  */
 export declare type BoxShadow = [number, number, number, number]
 
@@ -8669,8 +8672,6 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-export declare type Primitive = string | number | boolean | undefined | null
-
 /**
  * @public
  */
@@ -10872,7 +10873,7 @@ export declare interface StackProps extends BoxProps {
 export declare const studioTheme: RootTheme
 
 /**
- * @todo Rename to `ThemeStyles`
+ * TODO: Rename to `ThemeStyles`
  * @public
  */
 export declare interface Styles {
@@ -14104,8 +14105,8 @@ export declare interface ThemeColorButtonStates {
 }
 
 /**
+ * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @todo Rename to `ThemeColorButtonMode`.
  */
 export declare interface ThemeColorButtonTones {
   default: ThemeColorButtonStates
@@ -15038,7 +15039,7 @@ export declare interface TreeState {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useArrayProp<T extends Primitive = Primitive>(
+export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[]
 ): T[]
@@ -15077,6 +15078,8 @@ export declare function useDialog(): DialogContextValue
 
 /**
  * Subscribe to the rect of a DOM element.
+ * @beta
+ *
  * @deprecated Use `useElementSize` instead
  */
 export declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.38.1-next.6+f3f3c9df",
+  "version": "0.38.2-next.16+92171d95",
   "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.15-next.17+f3f3c9df",
-    "@sanity/icons": "1.3.5-next.17+f3f3c9df",
+    "@sanity/color": "2.1.16-next.16+92171d95",
+    "@sanity/icons": "1.3.6-next.16+92171d95",
     "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": "f3f3c9dfc127dbc1d20925c364777ddce31c2418"
+  "gitHead": "92171d95fb67bb758aa160067afba1739d344a04"
 }

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/hooks/useArrayProp.ts

@@ -1,13 +1,14 @@
 import {useMemo} from 'react'
 import {_getArrayProp} from '../styles'
 
-export type Primitive = string | number | boolean | undefined | null
+/** @beta */
+export type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useArrayProp<T extends Primitive = Primitive>(
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[]
 ): T[] {

package/src/hooks/useElementRect/useElementRect.ts

@@ -2,6 +2,8 @@ import {useElementSize} from '../useElementSize'
 
 /**
  * Subscribe to the rect of a DOM element.
+ * @beta
+ *
  * @deprecated Use `useElementSize` instead
  */
 export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {

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/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/lib/theme/color/button/types.ts

@@ -23,8 +23,8 @@ export interface ThemeColorButtonStates {
 }
 
 /**
+ * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @todo Rename to `ThemeColorButtonMode`.
  */
 export interface ThemeColorButtonTones {
   default: ThemeColorButtonStates

package/src/theme/lib/theme/shadow.ts

@@ -1,6 +1,6 @@
 /**
+ * TODO: Rename to `ThemeBoxShadow`
  * @public
- * @todo Rename to `ThemeBoxShadow`
  */
 export type BoxShadow = [
   // offsetX, offsetY, blurRadius, spreadRadius

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/theme/types.ts

@@ -7,7 +7,7 @@ import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/
 export type RootTheme = BaseTheme<Styles>
 
 /**
- * @todo Rename to `ThemeStyles`
+ * TODO: Rename to `ThemeStyles`
  * @public
  */
 export interface Styles {

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()
-  })
-})