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

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

@@ -3,7 +3,9 @@ import {useBoolean} from '@sanity/ui-workshop'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)
+  const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)
+  const suggestTone = useBoolean('Suggest', true)
   const positiveTone = useBoolean('Positive', true)
   const cautionTone = useBoolean('Caution', true)
   const criticalTone = useBoolean('Critical', true)
@@ -49,6 +51,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {neutralTone && (
+                  <Card padding={3} tone="neutral">
+                    <TextInput
+                      placeholder="neutral"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {primaryTone && (
                   <Card padding={3} tone="primary">
                     <TextInput
@@ -67,6 +87,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {suggestTone && (
+                  <Card padding={3} tone="suggest">
+                    <TextInput
+                      placeholder="suggest"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {positiveTone && (
                   <Card padding={3} tone="positive">
                     <TextInput

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

@@ -1,7 +1,8 @@
 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/constants'
 
 export default function TypedStory() {
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')

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

@@ -1,33 +1,49 @@
 import {CloseIcon} from '@sanity/icons'
 import {
+  _inputElement,
+  _inputPresentation,
   composeClassNames,
-  RadiusStyleProps,
+  InputStyleProps,
   ResponsiveProp,
   textInput,
-  textInputElement,
 } from '@sanity/ui/css'
-import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'
+import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  forwardRef,
+  isValidElement,
+  MouseEvent,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
 import {isValidElementType} from 'react-is'
+
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {useRootTheme} from '../../theme'
+import {isRecord} from '../../lib/isRecord'
+import {Props} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
-import {Card} from '../card'
 import {Text} from '../text'
 
 /**
  * @public
  */
-export type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
+export type TextInputClearButtonProps = Omit<
+  Props<ButtonProps, 'button'>,
+  'as' | 'onClick' | 'onMouseDown'
+>
 
 /**
  * @public
  */
 export type TextInputType =
+  | 'search'
   | 'date'
   | 'datetime-local'
   | 'email'
@@ -44,53 +60,45 @@ export type TextInputType =
 /**
  * @public
  */
-export interface TextInputProps extends RadiusStyleProps {
+export interface TextInputProps extends InputStyleProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
-  border?: boolean
   /**
    * @beta
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
   /**
    * @beta
    */
   onClear?: () => void
-  padding?: ResponsiveProp<Space>
-  prefix?: React.ReactNode
+  prefix?: ReactNode
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  suffix?: React.ReactNode
+  suffix?: ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
 }
 
-const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {
+const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
   backgroundColor: 'transparent',
   top: 0,
   right: 0,
   zIndex: 2,
 }
 
-const TextInputClearButton = styled(Button)({
-  '&:not([hidden])': {
-    display: 'block',
-  },
-})
-
 /**
  * Single line text input.
  *
  * @public
  */
 export const TextInput = forwardRef(function TextInput(
-  props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,
-  forwardedRef: React.Ref<HTMLInputElement>,
+  props: Props<TextInputProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
 ) {
   const {
     __unstable_disableFocusRing,
@@ -98,36 +106,28 @@ export const TextInput = forwardRef(function TextInput(
     className,
     clearButton,
     disabled = false,
-    fontSize: fontSizeProp = 2,
+    fontSize = 1,
+    gap,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
-    padding: paddingProp = 3,
+    padding = 3,
     prefix,
-    radius: radiusProp = 2,
+    radius = 2,
     readOnly,
-    space: _space = 3, // eslint-disable-line @typescript-eslint/no-unused-vars
+    space = 3,
     suffix,
     customValidity,
     type = 'text',
     weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    width,
     ...restProps
   } = props
   const ref = useRef<HTMLInputElement | null>(null)
 
-  const rootTheme = useRootTheme()
-
-  const fontSize = useArrayProp(fontSizeProp)
-  const padding = useArrayProp(paddingProp)
-  const radius = useArrayProp(radiusProp)
-  // const space = useArrayProp(spaceProp)
+  const paddingArray = useArrayProp(padding)
 
-  // Transient properties
-  const $hasClearButton = Boolean(clearButton)
-  // const $hasIcon = Boolean(IconComponent)
-  // const $hasIconRight = Boolean(IconRightComponent)
-  // const $hasSuffix = Boolean(suffix)
-  // const $hasPrefix = Boolean(prefix)
+  const withClearButton = Boolean(clearButton)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
@@ -137,13 +137,13 @@ export const TextInput = forwardRef(function TextInput(
   useCustomValidity(ref, customValidity)
 
   // Prevent the clear button from taking the focus away from the input
-  const handleClearMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClearMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     event.stopPropagation()
   }, [])
 
   const handleClearClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       event.preventDefault()
       event.stopPropagation()
 
@@ -155,218 +155,131 @@ export const TextInput = forwardRef(function TextInput(
     [onClear, ref],
   )
 
-  // Render prefix (memoized)
-  const prefixNode = useMemo(
-    () =>
-      prefix && (
-        <Card
-          as="span"
-          borderTop
-          borderLeft
-          borderBottom
-          className="text-input-prefix"
-          radius={radius}
-          sizing="border"
-          tone="inherit"
-        >
-          <span>{prefix}</span>
-        </Card>
-      ),
-    [prefix, radius],
-  )
-
-  // Render presentation (memoized)
-  const presentationNode = useMemo(
-    () => (
-      <Card
-        as="span"
-        // $hasPrefix={$hasPrefix}
-        // $unstableDisableFocusRing={__unstable_disableFocusRing}
-        // $hasSuffix={$hasSuffix}
-        // $radius={radius}
-        // $scheme={rootTheme.scheme}
-        // $tone={rootTheme.tone}
-        // border={border}
-        className="text-input-presentation"
-        data-border={border ? '' : undefined}
-        data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-        data-scheme={rootTheme.scheme}
-        data-tone={rootTheme.tone}
-        position="absolute"
-        radius={radius}
-      >
-        {IconComponent && (
-          <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
-            <Text size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          </Box>
-        )}
-
-        {!$hasClearButton && IconRightComponent && (
-          <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
-            <Text size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          </Box>
-        )}
-      </Card>
-    ),
-    [
-      __unstable_disableFocusRing,
-      border,
-      fontSize,
-      IconComponent,
-      IconRightComponent,
-      padding,
-      radius,
-      rootTheme,
-      $hasClearButton,
-      // $hasPrefix,
-      // $hasSuffix,
-    ],
-  )
-
-  // Render clear button (memoized)
   const clearButtonBoxPadding = useMemo(
     () =>
-      padding.map((v) => {
+      paddingArray.map((v) => {
         if (v === 0) return 0
         if (v === 1) return 1
         if (v === 2) return 1
 
-        return (v as Space) - 2
-      }),
-    [padding],
+        return typeof v === 'number' ? v - 2 : 0
+      }) as Space[],
+    [paddingArray],
   )
 
   const clearButtonPadding = useMemo(
     () =>
-      padding.map((v) => {
+      paddingArray.map((v) => {
         if (v === 0) return 0
         if (v === 1) return 0
         if (v === 2) return 1
 
-        return (v as Space) - 1
-      }),
-    [padding],
+        return typeof v === 'number' ? v - 1 : 0
+      }) as Space[],
+    [paddingArray],
   )
+
   const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
+    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
     [clearButton],
   )
-  const clearButtonNode = useMemo(
-    () =>
-      !disabled &&
-      !readOnly &&
-      clearButton && (
-        <Card
-          // forwardedAs="span"
-          padding={clearButtonBoxPadding}
-          position="absolute"
-          style={CLEAR_BUTTON_BOX_STYLE}
-          tone={customValidity ? 'critical' : 'inherit'}
-
-          // position: absolute;
-          // top: 0;
-          // right: 0;
-        >
-          <TextInputClearButton
-            aria-label="Clear"
-            data-qa="clear-button"
-            fontSize={fontSize}
-            icon={CloseIcon}
-            mode="bleed"
-            padding={clearButtonPadding}
-            radius={radius}
-            {...clearButtonProps}
-            onClick={handleClearClick}
-            onMouseDown={handleClearMouseDown}
-          />
-        </Card>
-      ),
-    [
-      clearButton,
-      clearButtonBoxPadding,
-      clearButtonPadding,
-      clearButtonProps,
-      customValidity,
-      disabled,
-      fontSize,
-      handleClearClick,
-      handleClearMouseDown,
-      radius,
-      readOnly,
-    ],
-  )
-
-  // Render suffix (memoized)
-  const suffixNode = useMemo(
-    () =>
-      suffix && (
-        <Card
-          as="span"
-          borderTop
-          borderRight
-          borderBottom
-          className="text-input-suffix"
-          radius={radius}
-          sizing="border"
-          tone="inherit"
-        >
-          <span>{suffix}</span>
-        </Card>
-      ),
-    [radius, suffix],
-  )
 
   return (
-    <Card
+    <Box
       align="center"
       as="span"
-      className={composeClassNames(className, textInput({padding, size: fontSizeProp}))}
+      className={composeClassNames(
+        className,
+        textInput({
+          border,
+          fontSize,
+          padding,
+          radius,
+          gap: gap ?? space,
+          width,
+        }),
+      )}
+      data-icon-left={IconComponent ? '' : undefined}
+      data-icon-right={IconRightComponent ? '' : undefined}
+      data-prefix={prefix ? '' : undefined}
+      data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
       display="flex"
-      tone={rootTheme.tone}
     >
-      {prefixNode}
+      {prefix && (
+        <Box as="span" className="text-input-prefix" sizing="border">
+          <span>{prefix}</span>
+        </Box>
+      )}
 
-      <Box
-        as="span"
-        // className="text-input-wrapper"
-        flex={1}
-        // todo
-        // minWidth={0}
-        position="relative"
-      >
+      <Box as="span" flex={1} position="relative">
         <input
-          data-as="input"
-          // data-scheme={rootTheme.scheme}
-          // data-tone={rootTheme.tone}
+          // data-as="input"
           {...restProps}
-          className={textInputElement()}
-          // $fontSize={fontSize}
-          // $iconLeft={$hasIcon}
-          // $iconRight={$hasIconRight || $hasClearButton}
-          // $padding={padding}
-          // $scheme={rootTheme.scheme}
-          // $space={space}
-          // $tone={rootTheme.tone}
-          // $weight={weight}
+          className={_inputElement()}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
 
-        {presentationNode}
-        {clearButtonNode}
+        <Box
+          as="span"
+          // $unstableDisableFocusRing={__unstable_disableFocusRing}
+          className={_inputPresentation()}
+          data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
+          position="absolute"
+        >
+          {IconComponent && (
+            <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
+              <Text size={fontSize}>
+                {isValidElement(IconComponent) && IconComponent}
+                {isValidElementType(IconComponent) && <IconComponent />}
+              </Text>
+            </Box>
+          )}
+
+          {!withClearButton && IconRightComponent && (
+            <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
+              <Text size={fontSize}>
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+              </Text>
+            </Box>
+          )}
+        </Box>
+
+        {!disabled && !readOnly && clearButton && (
+          <Box
+            as="span"
+            padding={clearButtonBoxPadding}
+            position="absolute"
+            style={CLEAR_BUTTON_BOX_STYLE}
+            // tone={customValidity ? 'critical' : 'inherit'}
+          >
+            <Button
+              aria-label="Clear"
+              data-qa="clear-button"
+              display="block"
+              fontSize={fontSize}
+              icon={CloseIcon}
+              mode="bleed"
+              padding={clearButtonPadding}
+              radius={radius}
+              {...clearButtonProps}
+              onClick={handleClearClick}
+              onMouseDown={handleClearMouseDown}
+            />
+          </Box>
+        )}
       </Box>
 
-      {suffixNode}
-    </Card>
+      {suffix && (
+        <Box as="span" className="text-input-suffix" sizing="border">
+          <span>{suffix}</span>
+        </Box>
+      )}
+    </Box>
   )
 })
 

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

@@ -11,7 +11,8 @@ import {
 } from '@sanity/ui'
 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/constants'
 
 const PORTAL_OPTIONS = {
   '(true)': true,

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

@@ -1,7 +1,8 @@
 import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
 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/constants'
 
 export default function OverflowingBoundaryStory() {
   const content = useText(

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

@@ -1,12 +1,14 @@
-import {Button, Card, Flex, Text, Tooltip, TooltipDelayGroupProvider, Stack} from '@sanity/ui'
-import {useBoolean, useSelect, useText, useNumber} from '@sanity/ui-workshop'
+import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
+import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 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 placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
@@ -36,6 +38,7 @@ export default function PropsStory() {
           </Text>
           <Flex align="center" justify="center" padding={4} sizing="border">
             <Tooltip
+              arrow={arrow}
               content={<Text size={1}>{content}</Text>}
               padding={padding}
               placement={placement}
@@ -70,6 +73,7 @@ export default function PropsStory() {
               }}
             >
               <Tooltip
+                arrow={arrow}
                 // This is overridden by the group delay, kept here intentionally for testing purposes.
                 delay={{
                   open: 100,
@@ -84,6 +88,7 @@ export default function PropsStory() {
                 <Button mode="bleed" text="Hover me" />
               </Tooltip>
               <Tooltip
+                arrow={arrow}
                 // This is overridden by the group delay, kept here intentionally for testing purposes.
                 delay={{
                   open: 100,

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

@@ -1,7 +1,8 @@
 import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '@sanity/ui'
 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/constants'
 
 export default function ResizableBoundaryStory() {
   const content = useText(

package/src/core/primitives/tooltip/tooltip.test.tsx

@@ -1,10 +1,12 @@
 /** @jest-environment jsdom */
 
-import {screen, act, fireEvent} from '@testing-library/react'
 import '../../../../test/mocks/resizeObserver.mock'
 import '../../../../test/mocks/matchMedia.mock'
+
+import {act, fireEvent, screen} from '@testing-library/react'
+
 import {render} from '../../../../test'
-import {Text, Button} from '../../primitives'
+import {Button, Text} from '../../primitives'
 import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 
 // Fake timers using Jest