@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

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

@@ -16,7 +16,7 @@ export default function TonesStory() {
         <Container width={1}>
           <Flex>
             <Card flex={1} scheme="light">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"
@@ -161,7 +161,7 @@ export default function TonesStory() {
               </Stack>
             </Card>
             <Card flex={1} scheme="dark">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"

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

@@ -2,10 +2,10 @@ import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory() {
-  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
 

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

@@ -2,20 +2,19 @@ import {CloseIcon} from '@sanity/icons'
 import {
   _inputElement,
   _inputPresentation,
-  composeClassNames,
-  InputStyleProps,
-  ResponsiveProp,
+  type InputStyleProps,
+  type ResponsiveProp,
   textInput,
+  textInputElement,
+  textInputPrefix,
+  textInputSuffix,
 } from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
-  CSSProperties,
-  ElementType,
-  ForwardedRef,
-  forwardRef,
+  type ElementType,
   isValidElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -24,43 +23,24 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity, useResponsiveProp} from '../../hooks'
 import {isRecord} from '../../lib/isRecord'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
+import {Button, type 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,33 +60,34 @@ export interface TextInputProps extends InputStyleProps {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   suffix?: ReactNode
-  type?: TextInputType
   weight?: ThemeFontWeightKey
 }
 
-const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
-  backgroundColor: 'transparent',
-  top: 0,
-  right: 0,
-  zIndex: 2,
-}
+/** @public */
+export type TextInputElementType = 'input' | ComponentType
+
+/** @public */
+export type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
+  TextInputOwnProps,
+  E
+>
 
 /**
  * Single line text input.
  *
  * @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,
     disabled = false,
-    fontSize = 1,
+    fontSize = 2,
     gap,
     icon: IconComponent,
     iconRight: IconRightComponent,
@@ -115,17 +96,19 @@ 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)
+  const responsivePadding = useResponsiveProp(padding)
 
   const withClearButton = Boolean(clearButton)
 
@@ -155,29 +138,29 @@ export const TextInput = forwardRef(function TextInput(
     [onClear, ref],
   )
 
-  const clearButtonBoxPadding = useMemo(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
 
-        return typeof v === 'number' ? v - 2 : 0
-      }) as Space[],
-    [paddingArray],
-  )
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
 
-  const clearButtonPadding = useMemo(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 0
-        if (v === 2) return 1
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
 
-        return typeof v === 'number' ? v - 1 : 0
-      }) as Space[],
-    [paddingArray],
-  )
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
 
   const clearButtonProps: TextInputClearButtonProps = useMemo(
     () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
@@ -186,52 +169,45 @@ export const TextInput = forwardRef(function TextInput(
 
   return (
     <Box
-      align="center"
-      as="span"
-      className={composeClassNames(
+      alignItems="center"
+      className={textInput({
         className,
-        textInput({
-          border,
-          fontSize,
-          padding,
-          radius,
-          gap: gap ?? space,
-          width,
-        }),
-      )}
+        border,
+        fontSize,
+        padding,
+        radius,
+        gap: gap ?? space,
+        width,
+      })}
       data-icon-left={IconComponent ? '' : undefined}
       data-icon-right={IconRightComponent ? '' : undefined}
+      data-invalid={customValidity ? '' : undefined}
       data-prefix={prefix ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
       display="flex"
     >
       {prefix && (
-        <Box as="span" className="text-input-prefix" sizing="border">
+        <Box className={textInputPrefix()} sizing="border">
           <span>{prefix}</span>
         </Box>
       )}
 
-      <Box as="span" flex={1} position="relative">
-        <input
-          // data-as="input"
-          {...restProps}
+      <Box className={textInputElement()} flex={1} position="relative">
+        <Element
+          {...rest}
           className={_inputElement()}
+          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
 
-        <Box
-          as="span"
-          // $unstableDisableFocusRing={__unstable_disableFocusRing}
-          className={_inputPresentation()}
-          data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-          position="absolute"
-        >
+        <Box className={_inputPresentation()} position="absolute">
           {IconComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
+            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
               <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
@@ -240,7 +216,7 @@ export const TextInput = forwardRef(function TextInput(
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
+            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
               <Text size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
@@ -251,11 +227,11 @@ export const TextInput = forwardRef(function TextInput(
 
         {!disabled && !readOnly && clearButton && (
           <Box
-            as="span"
+            insetTop={0}
+            insetRight={0}
             padding={clearButtonBoxPadding}
             position="absolute"
-            style={CLEAR_BUTTON_BOX_STYLE}
-            // tone={customValidity ? 'critical' : 'inherit'}
+            style={{zIndex: 2}}
           >
             <Button
               aria-label="Clear"
@@ -275,12 +251,10 @@ export const TextInput = forwardRef(function TextInput(
       </Box>
 
       {suffix && (
-        <Box as="span" className="text-input-suffix" sizing="border">
+        <Box className={textInputSuffix()} sizing="border">
           <span>{suffix}</span>
         </Box>
       )}
     </Box>
   )
-})
-
-TextInput.displayName = 'ForwardRef(TextInput)'
+}

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

@@ -12,7 +12,7 @@ import {
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useMemo, useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 const PORTAL_OPTIONS = {
   '(true)': true,
@@ -26,7 +26,7 @@ export default function CustomPortalStory() {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
+  const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
@@ -55,10 +55,10 @@ export default function CustomPortalStory() {
             <Text>Boundary element</Text>
             <Flex align="center" height="fill" justify="center">
               <Flex justify="center">
-                <Stack space={2}>
+                <Stack gap={2}>
                   <Tooltip
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
-                    content={<Text size={1}>{content}</Text>}
+                    content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
                     placement={placement}
                     portal={portal}
@@ -87,7 +87,7 @@ export default function CustomPortalStory() {
       />
 
       <Portal __unstable_name="portal1">
-        <Stack space={4}>
+        <Stack gap={4}>
           <Text size={1} weight="medium">
             Portal 1 content
           </Text>

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

@@ -2,7 +2,7 @@ import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip}
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function OverflowingBoundaryStory() {
   const content = useText(
@@ -40,7 +40,7 @@ export default function OverflowingBoundaryStory() {
         >
           <Flex align="center" height="fill" justify="center">
             <Flex justify="center">
-              <Stack space={2}>
+              <Stack gap={2}>
                 <Code size={1}>Placement: {placement}</Code>
                 <Button
                   disabled={buttonsVisible}

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

@@ -1,20 +1,21 @@
 import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PropsStory() {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
-  const openDelay = useNumber('Open Delay', 200) || 0
-  const closeDelay = useNumber('Close Delay', 200) || 0
+  const openDelay = useNumber('Open Delay', 200)
+  const closeDelay = useNumber('Close Delay', 200)
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -29,9 +30,9 @@ export default function PropsStory() {
         gap={4}
       >
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Standalone tooltip
@@ -54,9 +55,9 @@ export default function PropsStory() {
           </Flex>
         </Stack>
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Grouped tooltips

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

@@ -2,7 +2,7 @@ import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function ResizableBoundaryStory() {
   const content = useText(

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

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