@sanity/ui 2.11.0 → 2.11.2-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.11.0",
+  "version": "2.11.2-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -20,6 +20,7 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
+  "type": "commonjs",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
@@ -36,7 +37,7 @@
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -48,35 +49,8 @@
   "files": [
     "dist",
     "exports",
-    "src",
-    "theme.js"
+    "src"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepack": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -109,7 +83,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.5.7",
     "csstype": "^3.1.3",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.16.0",
     "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -122,10 +96,10 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.13.0",
+    "@sanity/pkg-utils": "^7.0.1",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.20",
+    "@sanity/ui-workshop": "^2.0.21",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -147,7 +121,7 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
@@ -188,7 +162,7 @@
     "storybook": "^8.4.7",
     "styled-components": "^6.1.14",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -198,25 +172,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -81,7 +81,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
     (
       popoverProps: {
-        content: React.ReactElement<any> | null
+        content: React.JSX.Element | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void

package/src/core/components/autocomplete/autocomplete.tsx

@@ -6,7 +6,6 @@ import {
   HTMLProps,
   KeyboardEvent,
   MouseEvent,
-  ReactElement,
   ReactNode,
   Ref,
   cloneElement,
@@ -73,11 +72,11 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement<any>
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement<any> | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
@@ -726,4 +725,4 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
     > & {
       ref?: Ref<HTMLInputElement>
     },
-) => ReactElement<any>
+) => React.JSX.Element

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -9,7 +9,7 @@ export interface AutocompleteOptionProps {
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement<any> {
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {

package/src/core/components/dialog/dialogProvider.tsx

@@ -16,7 +16,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): React.ReactElement<any> {
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

package/src/core/components/menu/menuButton.tsx

@@ -25,9 +25,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement<any>
+  button: React.JSX.Element
   id: string
-  menu?: React.ReactElement<any>
+  menu?: React.JSX.Element
   onClose?: () => void
   onOpen?: () => void
   /**

package/src/core/components/menu/menuGroup.tsx

@@ -41,7 +41,7 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
     MenuGroupProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     as = 'button',
     children,

package/src/core/components/tab/tabList.tsx

@@ -6,7 +6,7 @@ import {Inline, InlineProps} from '../../primitives'
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement<any> | null | undefined | false>
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 //Limits the width of tabs in tablist
@@ -29,7 +29,7 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {

package/src/core/components/toast/toast.tsx

@@ -53,7 +53,7 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'

package/src/core/components/toast/toastProvider.tsx

@@ -49,7 +49,7 @@ const ToastContainer = styled.div`
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement<any> {
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})

package/src/core/components/tree/tree.tsx

@@ -30,7 +30,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {children, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)

package/src/core/components/tree/treeGroup.tsx

@@ -9,7 +9,7 @@ export interface TreeGroupProps {
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 

package/src/core/components/tree/treeItem.tsx

@@ -46,7 +46,7 @@ const ToggleArrowText = styled(Text)`
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     children,
     expanded: expandedProp = false,

package/src/core/primitives/avatar/avatarStack.tsx

@@ -68,7 +68,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,5 +1,5 @@
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -12,7 +12,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement<any> {
+export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 

package/src/core/primitives/popover/popover.tsx

@@ -59,7 +59,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -117,7 +117,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -449,7 +449,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element: React.ReactElement<any>) {
+function getElementRef(element: React.JSX.Element) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

package/src/core/primitives/tooltip/tooltip.tsx

@@ -47,7 +47,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -28,7 +28,7 @@ export interface TooltipDelayGroupProviderProps {
  */
 export function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)

package/src/core/theme/__workshop__/build/story.tsx

@@ -13,7 +13,6 @@ import {
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
 import {buildTheme} from '@sanity/ui/theme'
-import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
@@ -21,7 +20,7 @@ import {Root} from './Root'
 
 const theme = buildTheme()
 
-export default function BuildStory(): ReactElement<any> {
+export default function BuildStory(): React.JSX.Element {
   return (
     <Root>
       <div

package/src/core/theme/themeColorProvider.tsx

@@ -14,7 +14,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement<any> {
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 

package/src/core/theme/themeProvider.tsx

@@ -23,7 +23,7 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement<any> {
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
   const parentTheme = useContext(ThemeContext)
   const {children} = props
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')

package/src/core/utils/arrow/arrow.tsx

@@ -1,4 +1,4 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import {ForwardedRef, HTMLProps, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
@@ -68,7 +68,7 @@ export const Arrow = forwardRef(function Arrow(
     'width' | 'height'
   >,
   ref: ForwardedRef<HTMLDivElement>,
-): ReactElement<any> {
+): React.JSX.Element {
   const {width: w, height: h, radius = 0, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -13,9 +13,7 @@ export interface BoundaryElementProviderProps {
 /**
  * @public
  */
-export function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.ReactElement<any> {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 

package/src/core/utils/layer/layerProvider.tsx

@@ -15,7 +15,7 @@ export interface LayerProviderProps {
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement<any> {
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values

package/src/core/utils/portal/portalProvider.tsx

@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement<any> {
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(

package/src/core/utils/virtualList/virtualList.tsx

@@ -47,7 +47,7 @@ export const VirtualList = forwardRef(function VirtualList(
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
   const ref = useRef<HTMLDivElement | null>(null)