@sanity/ui 3.1.14 → 3.3.0

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

@@ -2,42 +2,56 @@ 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.
+   */
   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, space, ...restProps} = props
+  const {as, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   return (
     <StyledStack
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={_getArrayProp(space)}
+      $space={_getArrayProp(spacing)}
       forwardedAs={as}
       ref={ref}
     />
   )
 })
-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.test.tsx

@@ -0,0 +1,48 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {responsiveInputPaddingStyle} from '../../styles/internal'
+import {TextInput} from './textInput'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveInputPaddingStyle: jest.fn(actual.responsiveInputPaddingStyle),
+  }
+})
+
+describe('primitives/textInput', () => {
+  const mockedResponsiveInputPaddingStyle = jest.mocked(responsiveInputPaddingStyle)
+
+  beforeEach(() => {
+    mockedResponsiveInputPaddingStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(<TextInput icon={() => null} space={2} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+
+    mockedResponsiveInputPaddingStyle.mockClear()
+    render(<TextInput gap={2} icon={() => null} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<TextInput gap={3} icon={() => null} space={1} />)
+
+    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [3]}),
+    )
+    expect(mockedResponsiveInputPaddingStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$space: [1]}),
+    )
+  })
+})

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'>
 
 /**
@@ -74,7 +74,11 @@ export interface TextInputProps {
   padding?: number | number[]
   prefix?: React.ReactNode
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
@@ -162,6 +166,7 @@ export const TextInput = forwardRef(function TextInput(
     clearButton,
     disabled = false,
     fontSize: fontSizeProp = 2,
+    gap,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
@@ -169,7 +174,7 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: spaceProp = 3,
+    space: deprecated_space = 3,
     suffix,
     customValidity,
     type = 'text',
@@ -183,7 +188,7 @@ export const TextInput = forwardRef(function TextInput(
   const fontSize = _getArrayProp(fontSizeProp)
   const padding = _getArrayProp(paddingProp)
   const radius = _getArrayProp(radiusProp)
-  const space = _getArrayProp(spaceProp)
+  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

package/src/core/primitives/types.ts

@@ -66,22 +66,55 @@ export interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
+
+  /**
+   * @deprecated Use `gridTemplateColumns` instead. `columns` will be removed in v4.
+   */
   columns?: number | number[]
+  gridTemplateColumns?: number | number[]
   gap?: number | number[]
   gapX?: number | number[]
   gapY?: number | number[]
+  /**
+   * @deprecated Use `gridTemplateRows` instead. `rows` will be removed in v4.
+   */
   rows?: number | number[]
+  gridTemplateRows?: number | number[]
 }
 
 /**
  * @public
  */
 export interface ResponsiveGridItemProps {
+  gridColumn?: GridItemColumn | GridItemColumn[]
+  /**
+   * @deprecated Use `gridColumn` instead. `column` will be removed in v4.
+   */
   column?: GridItemColumn | GridItemColumn[]
+  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[]
+  /**
+   * @deprecated Use `gridColumnStart` instead. `columnStart` will be removed in v4.
+   */
   columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  /**
+   * @deprecated Use `gridColumnEnd` instead. `columnEnd` will be removed in v4.
+   */
   columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  gridRow?: GridItemRow | GridItemRow[]
+  /**
+   * @deprecated Use `gridRow` instead. `row` will be removed in v4.
+   */
   row?: GridItemRow | GridItemRow[]
+  gridRowStart?: GridItemRowStart | GridItemRowStart[]
+  /**
+   * @deprecated Use `gridRowStart` instead. `rowStart` will be removed in v4.
+   */
   rowStart?: GridItemRowStart | GridItemRowStart[]
+  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[]
+  /**
+   * @deprecated Use `gridRowEnd` instead. `rowEnd` will be removed in v4.
+   */
   rowEnd?: GridItemRowEnd | GridItemRowEnd[]
 }
 

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
+}