@sanity/ui 3.2.0 → 3.3.0

package/src/core/primitives/kbd/kbd.tsx

@@ -3,20 +3,24 @@ import {css, styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {Radius} from '../../types'
+import {ElementType, Props, Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
 
 /**
  * @public
  */
-export interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface KBDOwnProps {
   fontSize?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
 }
 
+/**
+ * @public
+ */
+export type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
+
 function kbdStyle() {
   return css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -37,13 +41,8 @@ function kbdStyle() {
 
 const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export const KBD = forwardRef(function KBD(
-  props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+const KBDComponent = forwardRef(function KBD(
+  props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
@@ -58,4 +57,13 @@ export const KBD = forwardRef(function KBD(
     </StyledKBD>
   )
 })
-KBD.displayName = 'ForwardRef(KBD)'
+KBDComponent.displayName = 'ForwardRef(KBD)'
+
+/**
+ * Used to define some text as keyboard input.
+ *
+ * @public
+ */
+export const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(
+  props: KBDProps<E>,
+) => React.JSX.Element

package/src/core/primitives/label/label.tsx

@@ -4,17 +4,16 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {TextAlign} from '../../types'
+import {ElementType, Props, TextAlign} from '../../types'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {labelBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface LabelProps {
+export interface LabelOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -26,6 +25,11 @@ export interface LabelProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+export type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
+
 const StyledLabel = styled.div<{
   $accent?: boolean
   $align: TextAlign[]
@@ -33,13 +37,8 @@ const StyledLabel = styled.div<{
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
 
-/**
- * Typographic labels.
- *
- * @public
- */
-export const Label = forwardRef(function Label(
-  props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+const LabelComponent = forwardRef(function Label(
+  props: LabelOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -76,4 +75,13 @@ export const Label = forwardRef(function Label(
     </StyledLabel>
   )
 })
-Label.displayName = 'ForwardRef(Label)'
+LabelComponent.displayName = 'ForwardRef(Label)'
+
+/**
+ * Typographic labels.
+ *
+ * @public
+ */
+export const Label = LabelComponent as unknown as <E extends ElementType = 'div'>(
+  props: LabelProps<E>,
+) => React.JSX.Element

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

@@ -34,7 +34,7 @@ export default function SidePanelStory() {
         </Box>
       </Card>
       <BoundaryElementProvider element={sidePanel}>
-        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
+        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}}>
           <Stack padding={4} space={5}>
             <Text muted size={1}>
               Click the <code>reference</code> text below to toggle the popover.

package/src/core/primitives/stack/stack.tsx

@@ -2,14 +2,14 @@ import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface StackOwnProps extends BoxOwnProps {
   gap?: number | number[]
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -17,18 +17,18 @@ export interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
+/**
+ * @public
+ */
+export type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
+
 const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
   stackBaseStyle,
   responsiveStackSpaceStyle,
 )
 
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+const StackComponent = forwardRef(function Stack(
+  props: StackOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, gap, space: deprecated_space, ...restProps} = props
@@ -45,4 +45,13 @@ export const Stack = forwardRef(function Stack(
     />
   )
 })
-Stack.displayName = 'ForwardRef(Stack)'
+StackComponent.displayName = 'ForwardRef(Stack)'
+
+/**
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
+ */
+export const Stack = StackComponent as unknown as <E extends ElementType = 'div'>(
+  props: StackProps<E>,
+) => React.JSX.Element

package/src/core/primitives/text/text.tsx

@@ -8,17 +8,16 @@ import {
   responsiveTextAlignStyle,
   responsiveTextFont,
 } from '../../styles/internal'
-import {TextAlign} from '../../types'
+import {ElementType, Props, TextAlign} from '../../types'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {textBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface TextProps {
+export interface TextOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
@@ -31,19 +30,19 @@ export interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+export type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
+
 const StyledText = styled.div<ResponsiveFontStyleProps>(
   responsiveTextFont,
   responsiveTextAlignStyle,
   textBaseStyle,
 )
 
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export const Text = forwardRef(function Text(
-  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+const TextComponent = forwardRef(function Text(
+  props: TextOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -78,4 +77,13 @@ export const Text = forwardRef(function Text(
     </StyledText>
   )
 })
-Text.displayName = 'ForwardRef(Text)'
+TextComponent.displayName = 'ForwardRef(Text)'
+
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+export const Text = TextComponent as unknown as <E extends ElementType = 'div'>(
+  props: TextProps<E>,
+) => React.JSX.Element

package/src/core/primitives/textInput/textInput.tsx

@@ -22,14 +22,14 @@ import {
 import {useRootTheme} from '../../theme'
 import {Radius} from '../../types'
 import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
+import {Button, ButtonOwnProps} from '../button'
 import {Card} from '../card'
 import {Text} from '../text'
 
 /**
  * @public
  */
-export type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+export type TextInputClearButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
 
 /**

package/src/core/types/component.ts

@@ -0,0 +1,32 @@
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
+
+/** @public */
+export type EmptyProps = object
+
+/** @public */
+export type TagType = keyof React.JSX.IntrinsicElements
+
+/** @public */
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
+
+/** @public */
+export type ElementType<P = any> = TagType | ComponentType<P>
+
+/**
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
+ * (defaulting to the component's own element), with the component's own props assigned on top.
+ *
+ * @public
+ */
+export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
+  P & {as?: E}
+>

package/src/core/types/index.ts

@@ -3,6 +3,7 @@ export * from './badge'
 export * from './box'
 export * from './button'
 export * from './card'
+export * from './component'
 export * from './dialog'
 export * from './flex'
 export * from './grid'

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

@@ -3,7 +3,7 @@ import {styled} from 'styled-components'
 
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
-import {StackProps} from '../../primitives'
+import {StackOwnProps} from '../../primitives'
 import {useTheme_v2} from '../../theme'
 
 /**
@@ -45,7 +45,7 @@ const ItemWrapper = styled.div`
  */
 export const VirtualList = forwardRef(function VirtualList(
   props: VirtualListProps &
-    StackProps &
+    StackOwnProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ): React.JSX.Element {

package/src/theme/system/css.ts

@@ -1,8 +1,14 @@
-import type {StyledObject} from 'styled-components'
+import type * as CSS from 'csstype'
 
 /**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
+ * A CSS-in-JS style object: standard CSS properties plus an index signature that allows nested
+ * selectors, at-rules and custom properties.
+ *
+ * This is a self-owned definition (based on `csstype`) so the published `.d.ts` types stay fully
+ * controlled by us and do not reference any external CSS-in-JS library types.
+ *
  * @internal
  */
-export type CSSObject = StyledObject<any>
+export interface CSSObject extends CSS.Properties<number | (string & {})> {
+  [key: string]: CSSObject | string | number | undefined
+}