@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/ui/primitives/text/text.tsx

@@ -5,45 +5,45 @@ import {
   TextOverflowStyleProps,
   TextStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TextProps extends TextStyleProps, TextOverflowStyleProps {
-  htmlFor?: string
-}
+/** @public */
+export const DEFAULT_TEXT_ELEMENT = 'div'
+
+/** @public */
+export type TextOwnProps = TextStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type TextElementType = 'div' | 'label' | 'li' | 'span' | ComponentType
+
+/** @public */
+export type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
 
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-export const Text = forwardRef(function Text(
-  props: Props<TextProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(props: TextProps<E>) {
   const {
-    accent = false,
+    accent,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_TEXT_ELEMENT,
     children,
     className,
     flex,
-    muted = false,
+    muted,
     size = 2,
     textOverflow: textOverflowProp,
     weight,
-    ...restProps
-  } = props
+    ...rest
+  } = props as TextProps<typeof DEFAULT_TEXT_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Text"
-      {...restProps}
-      ref={ref}
+      {...rest}
       className={composeClassNames(
         className,
         text({
@@ -56,9 +56,15 @@ export const Text = forwardRef(function Text(
         }),
       )}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
+}
 
-Text.displayName = 'ForwardRef(Text)'
+Text.displayName = 'Text'

package/src/ui/primitives/textArea/textArea.tsx

@@ -3,18 +3,19 @@ import {
   _inputPresentation,
   ResponsiveProp,
   textArea,
-  TextAreaStyleProps,
+  type TextAreaStyleProps,
 } from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TextAreaProps extends TextAreaStyleProps {
+/** @public */
+export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+
+/** @public */
+export type TextAreaOwnProps = TextAreaStyleProps & {
   /**
    * @beta
    */
@@ -25,16 +26,25 @@ export interface TextAreaProps extends TextAreaStyleProps {
   weight?: ThemeFontWeightKey
 }
 
+/** @public */
+export type TextAreaElementType = 'textarea' | ComponentType
+
+/** @public */
+export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
+  TextAreaOwnProps,
+  E
+>
+
 /**
  * A multiline text input.
  *
  * @public
  */
-export const TextArea = forwardRef(function TextArea(
-  props: Props<TextAreaProps, 'textarea'>,
-  forwardedRef: ForwardedRef<HTMLTextAreaElement>,
+export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
+  props: TextAreaProps<E>,
 ) {
   const {
+    as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
     customValidity,
     disabled = false,
@@ -42,11 +52,16 @@ export const TextArea = forwardRef(function TextArea(
     gap,
     padding = 3,
     radius = 2,
+    ref: forwardedRef,
     space = 3,
-    // weight,
-    // __unstable_disableFocusRing,
-    ...restProps
-  } = props
+    // TODO: fix this
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    weight,
+    // TODO: fix this
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    __unstable_disableFocusRing,
+    ...rest
+  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
   const ref = useRef<HTMLTextAreaElement | null>(null)
 
@@ -62,10 +77,10 @@ export const TextArea = forwardRef(function TextArea(
       className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
       data-ui="TextArea"
     >
-      <textarea {...restProps} className={_inputElement()} disabled={disabled} ref={ref} />
+      <Element {...rest} className={_inputElement()} disabled={disabled} ref={ref} />
       <span className={_inputPresentation()} />
     </span>
   )
-})
+}
 
-TextArea.displayName = 'ForwardRef(TextArea)'
+TextArea.displayName = 'TextArea'

package/src/ui/primitives/textInput/textInput.tsx

@@ -11,8 +11,6 @@ import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
   CSSProperties,
   ElementType,
-  ForwardedRef,
-  forwardRef,
   isValidElement,
   MouseEvent,
   ReactNode,
@@ -26,41 +24,22 @@ import {isValidElementType} from 'react-is'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
 import {isRecord} from '../../lib/isRecord'
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Text} from '../text'
 
-/**
- * @public
- */
+/** @public */
+export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
+
+/** @public */
 export type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
+  ButtonProps<'button'>,
   'as' | 'onClick' | 'onMouseDown'
 >
 
-/**
- * @public
- */
-export type TextInputType =
-  | 'search'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
-
-/**
- * @public
- */
-export interface TextInputProps extends InputStyleProps {
+/** @public */
+export type TextInputOwnProps = InputStyleProps & {
   /**
    * @beta
    */
@@ -80,10 +59,18 @@ export interface TextInputProps extends InputStyleProps {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   suffix?: ReactNode
-  type?: TextInputType
   weight?: ThemeFontWeightKey
 }
 
+/** @public */
+export type TextInputElementType = 'input' | ComponentType
+
+/** @public */
+export type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
+  TextInputOwnProps,
+  E
+>
+
 const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
   backgroundColor: 'transparent',
   top: 0,
@@ -96,12 +83,12 @@ const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
  *
  * @public
  */
-export const TextInput = forwardRef(function TextInput(
-  props: Props<TextInputProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(
+  props: TextInputProps<E>,
 ) {
   const {
     __unstable_disableFocusRing,
+    as: Element = DEFAULT_TEXT_INPUT_ELEMENT,
     border = true,
     className,
     clearButton,
@@ -115,14 +102,16 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius = 2,
     readOnly,
+    ref: forwardedRef,
     space = 3,
     suffix,
     customValidity,
     type = 'text',
     weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
     width,
-    ...restProps
-  } = props
+    ...rest
+  } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   const paddingArray = useArrayProp(padding)
@@ -213,9 +202,8 @@ export const TextInput = forwardRef(function TextInput(
       )}
 
       <Box as="span" flex={1} position="relative">
-        <input
-          // data-as="input"
-          {...restProps}
+        <Element
+          {...rest}
           className={_inputElement()}
           disabled={disabled}
           readOnly={readOnly}
@@ -281,6 +269,6 @@ export const TextInput = forwardRef(function TextInput(
       )}
     </Box>
   )
-})
+}
 
-TextInput.displayName = 'ForwardRef(TextInput)'
+TextInput.displayName = 'TextInput'

package/src/ui/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import {Placement} from '@floating-ui/react-dom'
+import {Placement} from '../../types'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -13,10 +13,12 @@ import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
+  type FocusEvent,
+  HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
+  type ReactNode,
+  RefAttributes,
   useCallback,
   useEffect,
   useId,
@@ -32,10 +34,11 @@ import {Z_OFFSETS} from '../../constants'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
-import type {Placement, Props} from '../../types'
-import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {ComponentType, Placement, Props} from '../../types'
+import {Layer, type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
-import type {Delay} from '../types'
+import {CardProvider, useCard} from '../card'
+import {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -44,56 +47,69 @@ import {
 import {TooltipCard} from './tooltipCard'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
-/**
- * @public
- */
-export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps, ShadowStyleProps {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  arrow?: boolean
-  boundaryElement?: HTMLElement | null
-  children?: ReactElement<Props>
-  content?: ReactNode
-  /**
-   * Adds a delay to open or close the tooltip.
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   *
-   * @public
-   * @defaultValue 0
-   */
-  delay?: Delay
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
-}
+/** @public */
+export const DEFAULT_TOOLTIP_ELEMENT = 'div'
+
+/** @public */
+export type TooltipOwnProps = LayerOwnProps &
+  RadiusStyleProps &
+  ShadowStyleProps & {
+    /** @deprecated Use `fallbackPlacements` instead. */
+    allowedAutoPlacements?: Placement[]
+    /**
+     * Whether the tooltip should animate in and out.
+     *
+     * @beta
+     * @defaultValue false
+     */
+    animate?: boolean
+    arrow?: boolean
+    boundaryElement?: HTMLElement | null
+    children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
+    content?: ReactNode
+    /**
+     * Adds a delay to open or close the tooltip.
+     *
+     * If only a `number` is passed, it will be used for both opening and closing.
+     *
+     * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+     *
+     * @public
+     * @defaultValue 0
+     */
+    delay?: Delay
+    disabled?: boolean
+    fallbackPlacements?: Placement[]
+    placement?: Placement
+    /** Whether or not to render the tooltip in a portal element. */
+    portal?: boolean | string
+    scheme?: ThemeColorSchemeKey
+    tone?: ThemeColorCardToneKey
+  }
+
+/** @public */
+export type TooltipElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
+  TooltipOwnProps,
+  E
+>
 
 /**
  * Tooltips display information when hovering, focusing or tapping.
  *
  * @public
  */
-export const Tooltip = forwardRef(function Tooltip(
-  props: Props<TooltipProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
 ) {
   const boundaryElementContext = useBoundaryElement()
+
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
+    as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
     className,
@@ -106,12 +122,15 @@ export const Tooltip = forwardRef(function Tooltip(
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 3,
+    ref: forwardedRef,
     scheme,
     shadow = 2,
     zOffset = Z_OFFSETS.tooltip,
-    tone,
-    ...restProps
-  } = props
+    tone = 'inherit',
+    ...rest
+  } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
+
+  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -228,42 +247,42 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const handleBlur = useCallback(
-    (e: FocusEvent) => {
+    (e: FocusEvent<HTMLElement>) => {
       handleIsOpenChange(false)
       childProp?.props?.onBlur?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleClick = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleFocus = useCallback(
-    (e: FocusEvent) => {
+    (e: FocusEvent<HTMLElement>) => {
       handleIsOpenChange(true)
       childProp?.props?.onFocus?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleMouseEnter = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(true)
       childProp?.props?.onMouseEnter?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleMouseLeave = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false)
       childProp?.props?.onMouseLeave?.(e)
     },
@@ -364,7 +383,6 @@ export const Tooltip = forwardRef(function Tooltip(
   const node = (
     <Layer
       data-ui="Tooltip"
-      // {...restProps}
       className={composeClassNames(className, tooltip())}
       ref={setFloating}
       style={{
@@ -374,12 +392,13 @@ export const Tooltip = forwardRef(function Tooltip(
       zOffset={zOffset}
     >
       <TooltipCard
-        {...restProps}
+        {...rest}
         animate={animate}
         arrow={arrowProp}
         arrowRef={setArrow}
         arrowX={arrowX}
         arrowY={arrowY}
+        as={as}
         originX={originX}
         originY={originY}
         padding={padding}
@@ -399,7 +418,12 @@ export const Tooltip = forwardRef(function Tooltip(
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        {node}
+        <CardProvider
+          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
+          scheme={scheme ?? 'light'}
+        >
+          {node}
+        </CardProvider>
       </Portal>
     ) : (
       node
@@ -414,9 +438,7 @@ export const Tooltip = forwardRef(function Tooltip(
       {child}
     </>
   )
-})
-
-Tooltip.displayName = 'ForwardRef(Tooltip)'
+}
 
 /**
  * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
@@ -464,3 +486,5 @@ function useCloseOnMouseLeave({
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [isInsideGroup, showTooltip])
 }
+
+Tooltip.displayName = 'Tooltip'