diff --git a/package.json b/package.json index e2c481f04..b6583cd92 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sanity/ui", - "version": "2.10.16", + "version": "2.10.17-canary.0", "keywords": [ "sanity", "ui", diff --git a/src/core/components/menu/menuGroup.tsx b/src/core/components/menu/menuGroup.tsx index 401ca6be3..f49d0aa10 100644 --- a/src/core/components/menu/menuGroup.tsx +++ b/src/core/components/menu/menuGroup.tsx @@ -1,5 +1,5 @@ import {ChevronRightIcon} from '@sanity/icons' -import {isValidElement, useCallback, useEffect, useState, type JSX} from 'react' +import {isValidElement, useCallback, useEffect, useState} from 'react' import {isValidElementType} from 'react-is' import {useArrayProp} from '../../hooks' import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives' @@ -13,7 +13,7 @@ import {useMenu} from './useMenu' * @public */ export interface MenuGroupProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements fontSize?: number | number[] icon?: React.ElementType | React.ReactNode padding?: number | number[] diff --git a/src/core/components/menu/menuItem.tsx b/src/core/components/menu/menuItem.tsx index c2ebc19f4..0210d5a9c 100644 --- a/src/core/components/menu/menuItem.tsx +++ b/src/core/components/menu/menuItem.tsx @@ -7,7 +7,6 @@ import { useMemo, useRef, useState, - type JSX, } from 'react' import {isValidElementType} from 'react-is' import {useArrayProp} from '../../hooks' @@ -23,7 +22,7 @@ import {useMenu} from './useMenu' * @public */ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements fontSize?: number | number[] hotkeys?: string[] icon?: React.ElementType | React.ReactNode diff --git a/src/core/primitives/avatar/avatar.tsx b/src/core/primitives/avatar/avatar.tsx index 79b8c9953..10920ee32 100644 --- a/src/core/primitives/avatar/avatar.tsx +++ b/src/core/primitives/avatar/avatar.tsx @@ -1,5 +1,5 @@ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme' -import {forwardRef, useCallback, useEffect, useId, useMemo, useState, type JSX} from 'react' +import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react' import ReactIs from 'react-is' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' @@ -16,7 +16,7 @@ export interface AvatarProps { __unstable_hideInnerStroke?: boolean animateArrowFrom?: AvatarPosition arrowPosition?: AvatarPosition - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements color?: ThemeColorAvatarColorKey initials?: string onImageLoadError?: (event: Error) => void diff --git a/src/core/primitives/badge/badge.tsx b/src/core/primitives/badge/badge.tsx index 25e2173a5..89a60d2cf 100644 --- a/src/core/primitives/badge/badge.tsx +++ b/src/core/primitives/badge/badge.tsx @@ -1,4 +1,4 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal' @@ -13,7 +13,7 @@ import {BadgeStyleProps} from './types' * @public */ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements fontSize?: number | number[] /** @deprecated No longer used. */ mode?: BadgeMode diff --git a/src/core/primitives/box/box.tsx b/src/core/primitives/box/box.tsx index a186b9bf2..ccdeb6f6e 100644 --- a/src/core/primitives/box/box.tsx +++ b/src/core/primitives/box/box.tsx @@ -1,4 +1,4 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import { @@ -31,8 +31,8 @@ export interface BoxProps ResponsiveGridItemProps, ResponsiveMarginProps, ResponsivePaddingProps { - as?: React.ElementType | keyof JSX.IntrinsicElements - forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements + forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements } const Root = styled.div< diff --git a/src/core/primitives/button/button.tsx b/src/core/primitives/button/button.tsx index bd140309c..528bec084 100644 --- a/src/core/primitives/button/button.tsx +++ b/src/core/primitives/button/button.tsx @@ -1,4 +1,4 @@ -import {forwardRef, isValidElement, useMemo, type JSX} from 'react' +import {forwardRef, isValidElement, useMemo} from 'react' import {isValidElementType} from 'react-is' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' @@ -17,7 +17,7 @@ import {buttonBaseStyles, buttonColorStyles} from './styles' * @public */ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements fontSize?: number | number[] mode?: ButtonMode icon?: React.ElementType | React.ReactNode diff --git a/src/core/primitives/code/code.tsx b/src/core/primitives/code/code.tsx index 4d92c8edf..f51693e3c 100644 --- a/src/core/primitives/code/code.tsx +++ b/src/core/primitives/code/code.tsx @@ -1,4 +1,4 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import Refractor from 'react-refractor' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' @@ -9,7 +9,7 @@ import {codeBaseStyle} from './styles' * @public */ export interface CodeProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements /** Define the language to use for syntax highlighting. */ language?: string size?: number | number[] diff --git a/src/core/primitives/heading/heading.tsx b/src/core/primitives/heading/heading.tsx index 1980abf58..12fbc1cc9 100644 --- a/src/core/primitives/heading/heading.tsx +++ b/src/core/primitives/heading/heading.tsx @@ -1,5 +1,5 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme' -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import { @@ -18,7 +18,7 @@ import {HeadingStyleProps} from './types' export interface HeadingProps { accent?: boolean align?: TextAlign | TextAlign[] - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements muted?: boolean size?: number | number[] /** diff --git a/src/core/primitives/kbd/kbd.tsx b/src/core/primitives/kbd/kbd.tsx index 1ba3db566..d5c1b14a4 100644 --- a/src/core/primitives/kbd/kbd.tsx +++ b/src/core/primitives/kbd/kbd.tsx @@ -1,4 +1,4 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled, css} from 'styled-components' import {useArrayProp} from '../../hooks' import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal' @@ -10,7 +10,7 @@ import {Text} from '../text' * @public */ export interface KBDProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements fontSize?: number | number[] padding?: number | number[] radius?: Radius | Radius[] diff --git a/src/core/primitives/label/label.tsx b/src/core/primitives/label/label.tsx index 4f4035021..8915e4027 100644 --- a/src/core/primitives/label/label.tsx +++ b/src/core/primitives/label/label.tsx @@ -1,5 +1,5 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme' -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal' @@ -12,7 +12,7 @@ import {labelBaseStyle} from './styles' export interface LabelProps { accent?: boolean align?: TextAlign | TextAlign[] - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements muted?: boolean size?: number | number[] /** diff --git a/src/core/primitives/stack/stack.tsx b/src/core/primitives/stack/stack.tsx index 45302d1d1..f562871c1 100644 --- a/src/core/primitives/stack/stack.tsx +++ b/src/core/primitives/stack/stack.tsx @@ -1,4 +1,4 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import {Box, BoxProps} from '../box' @@ -8,7 +8,7 @@ import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProp * @public */ export interface StackProps extends BoxProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements space?: number | number[] } diff --git a/src/core/primitives/text/text.tsx b/src/core/primitives/text/text.tsx index e222111e5..474d1ccda 100644 --- a/src/core/primitives/text/text.tsx +++ b/src/core/primitives/text/text.tsx @@ -1,5 +1,5 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme' -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' import {useArrayProp} from '../../hooks' import { @@ -16,7 +16,7 @@ import {textBaseStyle} from './styles' export interface TextProps { accent?: boolean align?: TextAlign | TextAlign[] - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements /** When `true` the text color will be muted. */ muted?: boolean size?: number | number[] diff --git a/src/core/utils/elementQuery/elementQuery.tsx b/src/core/utils/elementQuery/elementQuery.tsx index 2dc3574a4..c7b340a2a 100644 --- a/src/core/utils/elementQuery/elementQuery.tsx +++ b/src/core/utils/elementQuery/elementQuery.tsx @@ -1,4 +1,4 @@ -import {forwardRef, useImperativeHandle, useMemo, useState, type JSX} from 'react' +import {forwardRef, useImperativeHandle, useMemo, useState} from 'react' import {useElementSize} from '../../hooks' import {useTheme_v2} from '../../theme' import {findMaxBreakpoints, findMinBreakpoints} from './helpers' @@ -8,7 +8,7 @@ import {findMaxBreakpoints, findMinBreakpoints} from './helpers' * @beta */ export interface MediaQueryProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements media?: number[] } diff --git a/src/core/utils/layer/layer.tsx b/src/core/utils/layer/layer.tsx index c04c8c85e..612aa06ed 100644 --- a/src/core/utils/layer/layer.tsx +++ b/src/core/utils/layer/layer.tsx @@ -1,12 +1,4 @@ -import { - FocusEvent, - forwardRef, - useCallback, - useEffect, - useImperativeHandle, - useRef, - type JSX, -} from 'react' +import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react' import {styled} from 'styled-components' import {EMPTY_RECORD} from '../../constants' import {containsOrEqualsElement, isHTMLElement} from '../../helpers' @@ -17,14 +9,14 @@ import {useLayer} from './useLayer' * @public */ export interface LayerProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */ onActivate?: (props: {activeElement: HTMLElement | null}) => void zOffset?: number | number[] } interface LayerChildrenProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements onActivate?: LayerProps['onActivate'] } diff --git a/src/core/utils/srOnly/srOnly.tsx b/src/core/utils/srOnly/srOnly.tsx index 10b8730be..1d56213fb 100644 --- a/src/core/utils/srOnly/srOnly.tsx +++ b/src/core/utils/srOnly/srOnly.tsx @@ -1,11 +1,11 @@ -import {forwardRef, type JSX} from 'react' +import {forwardRef} from 'react' import {styled} from 'styled-components' /** * @public */ export interface SrOnlyProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements children?: React.ReactNode } diff --git a/src/core/utils/virtualList/virtualList.tsx b/src/core/utils/virtualList/virtualList.tsx index 2a37052ec..7aa30cf31 100644 --- a/src/core/utils/virtualList/virtualList.tsx +++ b/src/core/utils/virtualList/virtualList.tsx @@ -1,12 +1,4 @@ -import { - forwardRef, - useEffect, - useImperativeHandle, - useMemo, - useRef, - useState, - type JSX, -} from 'react' +import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react' import {styled} from 'styled-components' import {_isScrollable} from '../../helpers' import {_ResizeObserver} from '../../observers' @@ -29,7 +21,7 @@ export interface VirtualListChangeOpts { * @beta */ export interface VirtualListProps { - as?: React.ElementType | keyof JSX.IntrinsicElements + as?: React.ElementType | keyof React.JSX.IntrinsicElements gap?: number getItemKey?: (item: Item, itemIndex: number) => string items?: Item[] diff --git a/stories/components/Autocomplete.stories.tsx b/stories/components/Autocomplete.stories.tsx index 3f647b36d..3c64e6ba2 100644 --- a/stories/components/Autocomplete.stories.tsx +++ b/stories/components/Autocomplete.stories.tsx @@ -1,6 +1,5 @@ import {SearchIcon} from '@sanity/icons' import type {Meta, StoryFn, StoryObj} from '@storybook/react' -import type {JSX} from 'react' import {Autocomplete} from '../../src/core/components' import {Card} from '../../src/core/primitives' import {RADII} from '../constants' @@ -14,7 +13,7 @@ const meta: Meta = { }, component: Autocomplete, decorators: [ - (Story: StoryFn): JSX.Element => ( + (Story: StoryFn): React.JSX.Element => ( {/* @ts-expect-error fix later */} diff --git a/stories/components/Dialog.stories.tsx b/stories/components/Dialog.stories.tsx index 065102501..b4b6b2e9c 100644 --- a/stories/components/Dialog.stories.tsx +++ b/stories/components/Dialog.stories.tsx @@ -1,7 +1,7 @@ /* eslint-disable react-hooks/rules-of-hooks */ import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons' import type {Meta, StoryFn, StoryObj} from '@storybook/react' -import {useCallback, useState, type JSX} from 'react' +import {useCallback, useState} from 'react' import {Dialog} from '../../src/core/components' import {Box, Button, Card, Flex, Inline, Stack, Text} from '../../src/core/primitives' import {BoundaryElementProvider, PortalProvider} from '../../src/core/utils' @@ -58,7 +58,7 @@ const meta: Meta = { }, component: Dialog, decorators: [ - (Story: StoryFn): JSX.Element => { + (Story: StoryFn): React.JSX.Element => { const [boundaryElement, setBoundaryElement] = useState(null) const [portalElement, setPortalElement] = useState(null) diff --git a/stories/components/MenuItem.stories.tsx b/stories/components/MenuItem.stories.tsx index d0fa9f104..2f8c700d6 100644 --- a/stories/components/MenuItem.stories.tsx +++ b/stories/components/MenuItem.stories.tsx @@ -1,5 +1,4 @@ import type {Meta, StoryFn, StoryObj} from '@storybook/react' -import type {JSX} from 'react' import {Menu, MenuItem} from '../../src/core/components' import {Card, Container} from '../../src/core/primitives' import {LayerProvider} from '../../src/core/utils' @@ -22,7 +21,7 @@ const meta: Meta = { }, component: MenuItem, decorators: [ - (Story: StoryFn): JSX.Element => ( + (Story: StoryFn): React.JSX.Element => ( diff --git a/stories/components/Toast.stories.tsx b/stories/components/Toast.stories.tsx index 6dad8a13b..b36801013 100644 --- a/stories/components/Toast.stories.tsx +++ b/stories/components/Toast.stories.tsx @@ -1,6 +1,5 @@ /* eslint-disable react-hooks/rules-of-hooks */ import type {Meta, StoryFn, StoryObj} from '@storybook/react' -import type {JSX} from 'react' import {Toast, ToastProvider, useToast} from '../../src/core/components' import {Button, Inline} from '../../src/core/primitives' @@ -8,7 +7,7 @@ const meta: Meta = { args: {title: 'Toast title', description: 'Toast description'}, component: Toast, decorators: [ - (Story: StoryFn): JSX.Element => ( + (Story: StoryFn): React.JSX.Element => ( {/* @ts-expect-error fix later */} diff --git a/stories/helpers/matrixBuilder.tsx b/stories/helpers/matrixBuilder.tsx index 70ed1ca3a..0c7545b2a 100644 --- a/stories/helpers/matrixBuilder.tsx +++ b/stories/helpers/matrixBuilder.tsx @@ -1,4 +1,3 @@ -import type {JSX} from 'react' import {Card, Flex, Grid, Text} from '../../src/core/primitives' import {ThemeColorSchemeKey} from '../../src/theme' @@ -96,7 +95,7 @@ export function matrixBuilder({ title, renderItem, subHeader, -}: MatrixBuilderProps): JSX.Element { +}: MatrixBuilderProps): React.JSX.Element { return ( {rows.map((row) => ( diff --git a/stories/primitives/AvatarCounter.stories.tsx b/stories/primitives/AvatarCounter.stories.tsx index d42237ed6..323862a1c 100644 --- a/stories/primitives/AvatarCounter.stories.tsx +++ b/stories/primitives/AvatarCounter.stories.tsx @@ -1,5 +1,4 @@ import type {Meta, StoryFn, StoryObj} from '@storybook/react' -import type {JSX} from 'react' import {AvatarCounter, AvatarStack} from '../../src/core/primitives' import {getAvatarSizeControls} from '../controls' @@ -12,7 +11,7 @@ const meta: Meta = { }, component: AvatarCounter, decorators: [ - (Story: StoryFn): JSX.Element => ( + (Story: StoryFn): React.JSX.Element => ( {/* @ts-expect-error fix later */} diff --git a/stories/primitives/Tooltip.stories.tsx b/stories/primitives/Tooltip.stories.tsx index 669054b27..1fb7ed4f5 100644 --- a/stories/primitives/Tooltip.stories.tsx +++ b/stories/primitives/Tooltip.stories.tsx @@ -1,6 +1,5 @@ import type {Meta, StoryFn, StoryObj} from '@storybook/react' import {userEvent, within} from '@storybook/test' -import type {JSX} from 'react' import {Button, Card, Text, Tooltip, TooltipDelayGroupProvider} from '../../src/core/primitives' import {PLACEMENT_OPTIONS} from '../constants' import {getShadowControls, getSpaceControls} from '../controls' @@ -16,7 +15,7 @@ const meta: Meta = { shadow: getShadowControls(), }, decorators: [ - (Story: StoryFn): JSX.Element => ( + (Story: StoryFn): React.JSX.Element => ( {/* @ts-expect-error fix later */}