@sanity/ui 0.37.12 → 0.37.14-next.6

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

@@ -1,7 +1,14 @@
 import {Box, Card, Container, Stack, Text, TextInput} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
 import React from 'react'
 
 export default function TonesStory() {
+  const transparentTone = useBoolean('Transparent', true)
+  const primaryTone = useBoolean('Primary', true)
+  const positiveTone = useBoolean('Positive', true)
+  const cautionTone = useBoolean('Caution', true)
+  const criticalTone = useBoolean('Critical', true)
+
   return (
     <Container width={1}>
       <Stack padding={[3, 4, 5]} space={4}>
@@ -20,81 +27,96 @@ export default function TonesStory() {
             }
           />
         </Card>
-        <Card padding={3} tone="transparent">
-          <TextInput
-            placeholder="transparent"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="primary">
-          <TextInput
-            placeholder="primary"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="positive">
-          <TextInput
-            placeholder="positive"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="caution">
-          <TextInput
-            placeholder="caution"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="critical">
-          <TextInput
-            placeholder="critical"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
+
+        {transparentTone && (
+          <Card padding={3} tone="transparent">
+            <TextInput
+              placeholder="transparent"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        )}
+
+        {primaryTone && (
+          <Card padding={3} tone="primary">
+            <TextInput
+              placeholder="primary"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        )}
+
+        {positiveTone && (
+          <Card padding={3} tone="positive">
+            <TextInput
+              placeholder="positive"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        )}
+
+        {cautionTone && (
+          <Card padding={3} tone="caution">
+            <TextInput
+              placeholder="caution"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        )}
+
+        {criticalTone && (
+          <Card padding={3} tone="critical">
+            <TextInput
+              placeholder="critical"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        )}
       </Stack>
     </Container>
   )

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

@@ -1,4 +1,4 @@
-import {TextInput} from '@sanity/ui'
+import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../__workshop__/constants'
@@ -12,5 +12,11 @@ export default function TypedStory() {
     setValue(event.currentTarget.value)
   }, [])
 
-  return <TextInput onChange={handleChange} type={type} value={value} />
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <TextInput onChange={handleChange} type={type} value={value} />
+      </Container>
+    </Box>
+  )
 }

package/src/primitives/textInput/textInput.tsx

@@ -3,7 +3,7 @@ import React, {createElement, forwardRef, isValidElement, useCallback, useMemo}
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useForwardedRef, useCustomValidity, useResponsiveProp} from '../../hooks'
+import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -16,7 +16,7 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Card} from '../card'
@@ -72,7 +72,7 @@ export interface TextInputProps {
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
 
-const Root = styled.span(textInputRootStyle)
+const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
 
 const InputRoot = styled.span`
   flex: 1;
@@ -118,6 +118,12 @@ const LeftBox = styled(Box)`
   left: 0;
 `
 
+const RightBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
 const RightCard = styled(Card)`
   background-color: transparent;
   position: absolute;
@@ -136,7 +142,7 @@ export const TextInput = forwardRef(function TextInput(
     border = true,
     clearButton,
     disabled = false,
-    fontSize = 2,
+    fontSize: fontSizeProp = 2,
     icon,
     iconRight,
     onClear,
@@ -144,16 +150,22 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 1,
     readOnly,
-    space = 3,
+    space: spaceProp = 3,
     suffix,
     customValidity,
     type = 'text',
+    weight,
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
-  const padding = useResponsiveProp(paddingProp)
-  const radius = useResponsiveProp(radiusProp)
+
+  const rootTheme = useRootTheme()
+
+  const fontSize = useArrayProp(fontSizeProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)
@@ -202,6 +214,8 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
+        $tone={rootTheme.tone}
+        data-tone={rootTheme.tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -213,16 +227,27 @@ export const TextInput = forwardRef(function TextInput(
         )}
 
         {!$hasClearButton && iconRight && (
-          <RightCard padding={padding}>
+          <RightBox padding={padding}>
             <Text size={fontSize}>
               {isValidElement(iconRight) && iconRight}
               {isValidElementType(iconRight) && createElement(iconRight)}
             </Text>
-          </RightCard>
+          </RightBox>
         )}
       </Presentation>
     ),
-    [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]
+    [
+      border,
+      fontSize,
+      icon,
+      iconRight,
+      padding,
+      radius,
+      rootTheme.tone,
+      $hasClearButton,
+      $hasPrefix,
+      $hasSuffix,
+    ]
   )
 
   // Render clear button (memoized)
@@ -303,25 +328,31 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput">
+    <Root data-ui="TextInput" tone={rootTheme.tone}>
       {prefixNode}
+
       <InputRoot>
         <Input
           data-as="input"
+          data-tone={rootTheme.tone}
           {...restProps}
+          $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
           $space={space}
-          $fontSize={fontSize}
+          $tone={rootTheme.tone}
+          $weight={weight}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
+
         {presentationNode}
         {clearButtonNode}
       </InputRoot>
+
       {suffixNode}
     </Root>
   )

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

@@ -1,7 +1,12 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
 import React from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS, WORKSHOP_SHADOW_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
+
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
@@ -11,8 +16,9 @@ export default function PropsStory() {
               <Text size={1}>Tooltip content</Text>
             </Box>
           }
-          placement="top"
+          placement={placement}
           portal
+          shadow={shadow}
         >
           <Button mode="bleed" text="Hover me" />
         </Tooltip>

package/src/primitives/tooltip/tooltip.tsx

@@ -1,7 +1,27 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
-import {usePopper} from 'react-popper'
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  Middleware,
+  RootBoundary,
+} from '@floating-ui/react-dom'
+import React, {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  CSSProperties,
+  ForwardedRef,
+} from 'react'
 import styled from 'styled-components'
-import {useForwardedRef} from '../../hooks'
+import {FLOATING_STATIC_SIDES} from '../../constants'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
@@ -12,6 +32,7 @@ import {TooltipArrow} from './tooltipArrow'
  * @public
  */
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
@@ -21,6 +42,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
 }
 
 const Root = styled(Layer)`
@@ -37,54 +59,88 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
   const {
-    allowedAutoPlacements,
     boundaryElement = boundaryElementContext?.element,
-    children,
+    children: childProp,
     content,
     disabled,
-    fallbackPlacements,
-    placement = 'bottom',
+    fallbackPlacements: fallbackPlacementsProp,
+    placement: placementProp = 'bottom',
     portal,
     scheme,
+    shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
     ...restProps
   } = props
+  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
-  const popper = usePopper(referenceElement, popperElement, {
-    placement,
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: arrowElement,
-          padding: 4,
-        },
-      },
-      {
-        name: 'preventOverflow',
-        options: {
-          altAxis: true,
-          boundary: boundaryElement || undefined,
-          padding: 4,
-        },
-      },
-      {
-        name: 'offset',
-        options: {offset: [0, 3]},
-      },
-      {
-        name: 'flip',
-        options: {
-          allowedAutoPlacements,
-          fallbackPlacements,
-        },
-      },
-    ],
+  const arrowRef = useRef<HTMLDivElement | null>(null)
+  const rootBoundary: RootBoundary = 'viewport'
+
+  const middleware = useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    ret.push(
+      flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: 4,
+        rootBoundary,
+      })
+    )
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: 3}))
+
+    // Shift the tooltip so its sits with the boundary eleement
+    ret.push(
+      shift({
+        boundary: boundaryElement || undefined,
+        rootBoundary,
+        padding: 4,
+      })
+    )
+
+    // Place arrow
+    ret.push(arrow({element: arrowRef, padding: 2}))
+
+    return ret
+  }, [boundaryElement, fallbackPlacements])
+
+  const {x, y, placement, reference, floating, middlewareData, update, strategy} = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
   })
-  const {forceUpdate} = popper
+
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      position: strategy,
+      top: y ?? 0,
+      left: x ?? 0,
+    }),
+    [strategy, x, y]
+  )
+
+  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
+
+  const arrowX = middlewareData.arrow?.x
+  const arrowY = middlewareData.arrow?.y
+
+  const arrowStyle: CSSProperties = useMemo(() => {
+    const style: CSSProperties = {
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }
+
+    if (staticSide) style[staticSide] = -15
+
+    return style
+  }, [arrowX, arrowY, staticSide])
+
   const [isOpen, setIsOpen] = useState(false)
   const handleBlur = useCallback(() => setIsOpen(false), [])
   const handleFocus = useCallback(() => setIsOpen(true), [])
@@ -117,16 +173,6 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
-  useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
-    }
-  }, [forceUpdate, content])
-
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled) setIsOpen(false)
@@ -137,54 +183,85 @@ export const Tooltip = forwardRef(function Tooltip(
     if (!content) setIsOpen(false)
   }, [content])
 
-  const setRef = (el: HTMLDivElement | null) => {
-    setPopperElement(el)
-    forwardedRef.current = el
-  }
-
-  if (!children) return <></>
-
-  if (disabled) return children
-
-  const referenceProps = {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ref: setReferenceElement,
-  }
-
-  const referenceNode = cloneElement(children, referenceProps)
-
-  const popperNode = (
-    <Root
-      data-ui="Tooltip"
-      {...restProps}
-      {...popper.attributes.popper}
-      ref={setRef}
-      style={popper.styles.popper}
-      zOffset={zOffset}
-    >
-      <Card radius={2} scheme={scheme} shadow={3}>
+  // Update reference
+  useEffect(() => reference(referenceElement), [reference, referenceElement])
+
+  const setArrow = useCallback(
+    (arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+      update()
+    },
+    [update]
+  )
+
+  const setFloating = useCallback(
+    (node: HTMLDivElement | null) => {
+      forwardedRef.current = node
+      floating(node)
+    },
+    [floating, forwardedRef]
+  )
+
+  const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
+
+  const setReference = useCallback(
+    (node: HTMLElement | null) => {
+      if (typeof childRef === 'function') {
+        childRef(node)
+      } else if (childRef) {
+        childRef.current = node
+      }
+
+      // childRef.current = node
+      setReferenceElement(node)
+    },
+    [childRef]
+  )
+
+  const child = useMemo(() => {
+    if (!childProp) return null
+
+    return cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: setReference,
+    })
+  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference])
+
+  if (!child) return <></>
+
+  if (disabled) return child
+
+  const root = (
+    <Root data-ui="Tooltip" {...restProps} ref={setFloating} style={rootStyle} zOffset={zOffset}>
+      <Card
+        data-ui="Tooltip__card"
+        data-placement={placement}
+        radius={2}
+        scheme={scheme}
+        shadow={shadow}
+      >
         {content}
-        <TooltipArrow ref={setArrowElement} style={popper.styles.arrow} />
+        <TooltipArrow ref={setArrow} style={arrowStyle} />
       </Card>
     </Root>
   )
 
   return (
     <>
-      {referenceNode}
+      {child}
 
       {isOpen && (
         <>
-          {portal && (
+          {portal ? (
             <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {popperNode}
+              {root}
             </Portal>
+          ) : (
+            root
           )}
-
-          {!portal && popperNode}
         </>
       )}
     </>