@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

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

@@ -1,24 +1,24 @@
 import {CloseIcon} from '@sanity/icons'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {composeClassNames, RadiusStyleProps, ResponsiveProp, textInput} from '@sanity/ui/css'
+import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
-import {
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveInputPaddingStyle,
-  TextInputInputStyleProps,
-  TextInputRepresentationStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  textInputRepresentationStyle,
-  textInputRootStyle,
-} from '../../styles/internal'
+import {styled} from '../../lib/styled'
+// import {
+//   // responsiveRadiusStyle,
+//   // ResponsiveRadiusStyleProps,
+//   responsiveInputPaddingStyle,
+//   TextInputInputStyleProps,
+//   // TextInputRepresentationStyleProps,
+//   TextInputResponsivePaddingStyleProps,
+//   textInputBaseStyle,
+//   textInputFontSizeStyle,
+//   // textInputRepresentationStyle,
+//   // textInputRootStyle,
+// } from '../../styles/internal'
 import {useRootTheme} from '../../theme'
-import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Card} from '../card'
@@ -50,7 +50,7 @@ export type TextInputType =
 /**
  * @public
  */
-export interface TextInputProps {
+export interface TextInputProps extends RadiusStyleProps {
   /**
    * @beta
    */
@@ -61,82 +61,89 @@ export interface TextInputProps {
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   icon?: React.ElementType | React.ReactNode
   iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta
    */
   onClear?: () => void
-  padding?: number | number[]
+  padding: ResponsiveProp<Space>
+  // padding?: number | number[]
   prefix?: React.ReactNode
-  radius?: Radius | Radius[]
-  space?: number | number[]
+  // radius?: Radius | Radius[]
+  // space?: number | number[]
+  space?: ResponsiveProp<Space>
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
 }
 
-const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
-
-const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
-
-const InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`
-
-const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`
-
-const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`
-
-const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-)
-
-const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle,
-)
-
-const LeftBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-
-const RightBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`
-
-const RightCard = styled(Card)`
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-`
+const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {
+  backgroundColor: 'transparent',
+  top: 0,
+  right: 0,
+  zIndex: 2,
+}
+
+// const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
+
+// const InputRoot = styled.span`
+//   flex: 1;
+//   min-width: 0;
+//   display: block;
+//   position: relative;
+// `
+
+// const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-right-radius: 0;
+//   border-bottom-right-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-left-radius: 0;
+//   border-bottom-left-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+//   responsiveInputPaddingStyle,
+//   textInputBaseStyle,
+//   textInputFontSizeStyle,
+// )
+
+// const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+//   responsiveRadiusStyle,
+//   textInputRepresentationStyle,
+// )
+
+// const LeftBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+// `
+
+// const RightBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `
+
+// const RightCard = styled(Card)`
+//   background-color: transparent;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `
 
 const TextInputClearButton = styled(Button)({
   '&:not([hidden])': {
@@ -156,6 +163,7 @@ export const TextInput = forwardRef(function TextInput(
   const {
     __unstable_disableFocusRing,
     border = true,
+    className,
     clearButton,
     disabled = false,
     fontSize: fontSizeProp = 2,
@@ -166,11 +174,11 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: spaceProp = 3,
+    space: _space = 3,
     suffix,
     customValidity,
     type = 'text',
-    weight,
+    weight: _width,
     ...restProps
   } = props
   const ref = useRef<HTMLInputElement | null>(null)
@@ -180,14 +188,14 @@ export const TextInput = forwardRef(function TextInput(
   const fontSize = useArrayProp(fontSizeProp)
   const padding = useArrayProp(paddingProp)
   const radius = useArrayProp(radiusProp)
-  const space = useArrayProp(spaceProp)
+  // const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)
-  const $hasIcon = Boolean(IconComponent)
-  const $hasIconRight = Boolean(IconRightComponent)
-  const $hasSuffix = Boolean(suffix)
-  const $hasPrefix = Boolean(prefix)
+  // const $hasIcon = Boolean(IconComponent)
+  // const $hasIconRight = Boolean(IconRightComponent)
+  // const $hasSuffix = Boolean(suffix)
+  // const $hasPrefix = Boolean(prefix)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
@@ -219,9 +227,18 @@ export const TextInput = forwardRef(function TextInput(
   const prefixNode = useMemo(
     () =>
       prefix && (
-        <Prefix borderTop borderLeft borderBottom radius={radius} sizing="border" tone="inherit">
+        <Card
+          as="span"
+          borderTop
+          borderLeft
+          borderBottom
+          className="text-input-prefix"
+          radius={radius}
+          sizing="border"
+          tone="inherit"
+        >
           <span>{prefix}</span>
-        </Prefix>
+        </Card>
       ),
     [prefix, radius],
   )
@@ -229,35 +246,41 @@ export const TextInput = forwardRef(function TextInput(
   // Render presentation (memoized)
   const presentationNode = useMemo(
     () => (
-      <Presentation
-        $hasPrefix={$hasPrefix}
-        $unstableDisableFocusRing={__unstable_disableFocusRing}
-        $hasSuffix={$hasSuffix}
-        $radius={radius}
-        $scheme={rootTheme.scheme}
-        $tone={rootTheme.tone}
+      <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 && (
-          <LeftBox padding={padding}>
+          <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
               {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
-          </LeftBox>
+          </Box>
         )}
 
         {!$hasClearButton && IconRightComponent && (
-          <RightBox padding={padding}>
+          <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
             <Text size={fontSize}>
               {isValidElement(IconRightComponent) && IconRightComponent}
               {isValidElementType(IconRightComponent) && <IconRightComponent />}
             </Text>
-          </RightBox>
+          </Box>
         )}
-      </Presentation>
+      </Card>
     ),
     [
       __unstable_disableFocusRing,
@@ -269,8 +292,8 @@ export const TextInput = forwardRef(function TextInput(
       radius,
       rootTheme,
       $hasClearButton,
-      $hasPrefix,
-      $hasSuffix,
+      // $hasPrefix,
+      // $hasSuffix,
     ],
   )
 
@@ -282,10 +305,11 @@ export const TextInput = forwardRef(function TextInput(
         if (v === 1) return 1
         if (v === 2) return 1
 
-        return v - 2
+        return (v as Space) - 2
       }),
     [padding],
   )
+
   const clearButtonPadding = useMemo(
     () =>
       padding.map((v) => {
@@ -293,7 +317,7 @@ export const TextInput = forwardRef(function TextInput(
         if (v === 1) return 0
         if (v === 2) return 1
 
-        return v - 1
+        return (v as Space) - 1
       }),
     [padding],
   )
@@ -306,11 +330,16 @@ export const TextInput = forwardRef(function TextInput(
       !disabled &&
       !readOnly &&
       clearButton && (
-        <RightCard
-          forwardedAs="span"
+        <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"
@@ -324,7 +353,7 @@ export const TextInput = forwardRef(function TextInput(
             onClick={handleClearClick}
             onMouseDown={handleClearMouseDown}
           />
-        </RightCard>
+        </Card>
       ),
     [
       clearButton,
@@ -345,31 +374,54 @@ export const TextInput = forwardRef(function TextInput(
   const suffixNode = useMemo(
     () =>
       suffix && (
-        <Suffix borderTop borderRight borderBottom radius={radius} sizing="border" tone="inherit">
+        <Card
+          as="span"
+          borderTop
+          borderRight
+          borderBottom
+          className="text-input-suffix"
+          radius={radius}
+          sizing="border"
+          tone="inherit"
+        >
           <span>{suffix}</span>
-        </Suffix>
+        </Card>
       ),
     [radius, suffix],
   )
 
   return (
-    <Root data-ui="TextInput" tone={rootTheme.tone}>
+    <Card
+      align="center"
+      as="span"
+      className={composeClassNames(className, textInput({size: fontSizeProp}))}
+      data-ui="TextInput"
+      display="flex"
+      tone={rootTheme.tone}
+    >
       {prefixNode}
 
-      <InputRoot>
-        <Input
+      <Box
+        as="span"
+        className="text-input-wrapper"
+        flex={1}
+        // todo
+        // minWidth={0}
+        position="relative"
+      >
+        <input
           data-as="input"
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={fontSize}
-          $iconLeft={$hasIcon}
-          $iconRight={$hasIconRight || $hasClearButton}
-          $padding={padding}
-          $scheme={rootTheme.scheme}
-          $space={space}
-          $tone={rootTheme.tone}
-          $weight={weight}
+          // $fontSize={fontSize}
+          // $iconLeft={$hasIcon}
+          // $iconRight={$hasIconRight || $hasClearButton}
+          // $padding={padding}
+          // $scheme={rootTheme.scheme}
+          // $space={space}
+          // $tone={rootTheme.tone}
+          // $weight={weight}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
@@ -378,10 +430,11 @@ export const TextInput = forwardRef(function TextInput(
 
         {presentationNode}
         {clearButtonNode}
-      </InputRoot>
+      </Box>
 
       {suffixNode}
-    </Root>
+    </Card>
   )
 })
+
 TextInput.displayName = 'ForwardRef(TextInput)'

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

@@ -1,4 +1,5 @@
 /** @jest-environment jsdom */
+
 import {screen, act, fireEvent} from '@testing-library/react'
 import '../../../../test/mocks/resizeObserver.mock'
 import '../../../../test/mocks/matchMedia.mock'

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

@@ -9,6 +9,7 @@ import {
   type Middleware,
   type RootBoundary,
 } from '@floating-ui/react-dom'
+import {composeClassNames, RadiusStyleProps, tooltip} from '@sanity/ui/css'
 import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
@@ -23,7 +24,6 @@ import {
   useImperativeHandle,
   useLayoutEffect,
 } from 'react'
-import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
@@ -43,7 +43,7 @@ import {useTooltipDelayGroup} from './tooltipDelayGroup'
 /**
  * @public
  */
-export interface TooltipProps extends Omit<LayerProps, 'as'> {
+export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
@@ -56,7 +56,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
-  radius?: number | number[]
+  // radius?: number | number[]
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
   /**
@@ -79,17 +79,14 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)`
-  pointer-events: none;
-`
-
 /**
  * Tooltips display information when hovering, focusing or tapping.
  *
  * @public
  */
 export const Tooltip = forwardRef(function Tooltip(
-  props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
+  props: TooltipProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width' | 'wrap'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
@@ -99,6 +96,7 @@ export const Tooltip = forwardRef(function Tooltip(
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
+    className,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
@@ -364,10 +362,11 @@ export const Tooltip = forwardRef(function Tooltip(
 
   if (disabled) return child
 
-  const tooltip = (
-    <Root
+  const node = (
+    <Layer
       data-ui="Tooltip"
       {...restProps}
+      className={composeClassNames(className, tooltip())}
       ref={setFloating}
       style={{
         ...floatingStyles,
@@ -393,17 +392,17 @@ export const Tooltip = forwardRef(function Tooltip(
       >
         {content}
       </TooltipCard>
-    </Root>
+    </Layer>
   )
 
   const children =
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        {tooltip}
+        {node}
       </Portal>
     ) : (
-      tooltip
+      node
     ))
 
   return (
@@ -416,6 +415,7 @@ export const Tooltip = forwardRef(function Tooltip(
     </>
   )
 })
+
 Tooltip.displayName = 'ForwardRef(Tooltip)'
 
 /**

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

@@ -1,9 +1,12 @@
+import {RadiusStyleProps, tooltipCard} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {MotionProps, motion} from 'framer-motion'
+import {motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, Radius} from '../../types'
+import {
+  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
+  POPOVER_MOTION_PROPS,
+} from '../../constants'
+import {Placement} from '../../types'
 import {Arrow} from '../../utils'
 import {Card, CardProps} from '../card'
 import {
@@ -12,12 +15,7 @@ import {
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = styled(motion(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`
+const MotionCard = motion(Card)
 
 /**
  * @internal
@@ -34,10 +32,10 @@ export const TooltipCard = memo(
       originY?: number
       padding?: number | number[]
       placement?: Placement
-      radius?: Radius | Radius[]
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    } & RadiusStyleProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {
@@ -81,7 +79,9 @@ export const TooltipCard = memo(
     return (
       <MotionCard
         data-ui="Tooltip__card"
-        {...(restProps as CardProps & MotionProps)}
+        {...(restProps as CardProps)}
+        data-animate={animate ? '' : undefined}
+        className={tooltipCard()}
         data-placement={placement}
         padding={padding}
         radius={radius}
@@ -89,7 +89,7 @@ export const TooltipCard = memo(
         scheme={scheme}
         shadow={shadow}
         style={rootStyle}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        {...((animate ? POPOVER_MOTION_PROPS : {}) as CardProps)}
       >
         {children}
 
@@ -106,4 +106,5 @@ export const TooltipCard = memo(
     )
   }),
 )
+
 TooltipCard.displayName = 'Memo(ForwardRef(TooltipCard))'