@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/primitives/textInput/textInput.tsx

@@ -0,0 +1,364 @@
+import {CloseIcon} from '@sanity/icons'
+import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
+import {EMPTY_RECORD} from '../../constants'
+import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
+import {
+  responsiveRadiusStyle,
+  ResponsiveRadiusStyleProps,
+  responsiveInputPaddingStyle,
+  TextInputInputStyleProps,
+  TextInputRepresentationStyleProps,
+  TextInputResponsivePaddingStyleProps,
+  textInputBaseStyle,
+  textInputFontSizeStyle,
+  textInputRepresentationStyle,
+  textInputRootStyle,
+} from '../../styles/internal'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+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'>
+
+/**
+ * @public
+ */
+export type TextInputType =
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'url'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'tel'
+  | 'time'
+  | 'text'
+  | 'week'
+  | 'color'
+
+/**
+ * @public
+ */
+export interface TextInputProps {
+  border?: boolean
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps
+  customValidity?: string
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  /**
+   * @beta
+   */
+  onClear?: () => void
+  padding?: number | number[]
+  prefix?: React.ReactNode
+  radius?: number | number[]
+  space?: number | number[]
+  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;
+`
+
+/**
+ * @public
+ */
+export const TextInput = forwardRef(function TextInput(
+  props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,
+  forwardedRef: React.Ref<HTMLInputElement>
+) {
+  const {
+    border = true,
+    clearButton,
+    disabled = false,
+    fontSize: fontSizeProp = 2,
+    icon,
+    iconRight,
+    onClear,
+    padding: paddingProp = 3,
+    prefix,
+    radius: radiusProp = 1,
+    readOnly,
+    space: spaceProp = 3,
+    suffix,
+    customValidity,
+    type = 'text',
+    weight,
+    ...restProps
+  } = props
+
+  const ref = useForwardedRef(forwardedRef)
+
+  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)
+  const $hasIcon = Boolean(icon)
+  const $hasIconRight = Boolean(iconRight)
+  const $hasSuffix = Boolean(suffix)
+  const $hasPrefix = Boolean(prefix)
+
+  useCustomValidity(ref, customValidity)
+
+  // Prevent the clear button from taking the focus away from the input
+  const handleClearMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }, [])
+
+  const handleClearClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (onClear) onClear()
+
+      // Focus the input, in case focus has been lost when clicking the clear button
+      ref.current?.focus()
+    },
+    [onClear, ref]
+  )
+
+  // Render prefix (memoized)
+  const prefixNode = useMemo(
+    () =>
+      prefix && (
+        <Prefix borderTop borderLeft borderBottom radius={radius} sizing="border" tone="inherit">
+          <span>{prefix}</span>
+        </Prefix>
+      ),
+    [prefix, radius]
+  )
+
+  // Render presentation (memoized)
+  const presentationNode = useMemo(
+    () => (
+      <Presentation
+        $hasPrefix={$hasPrefix}
+        $hasSuffix={$hasSuffix}
+        $radius={radius}
+        $scheme={rootTheme.scheme}
+        $tone={rootTheme.tone}
+        data-border={border ? '' : undefined}
+        data-scheme={rootTheme.scheme}
+        data-tone={rootTheme.tone}
+      >
+        {icon && (
+          <LeftBox padding={padding}>
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          </LeftBox>
+        )}
+
+        {!$hasClearButton && iconRight && (
+          <RightBox padding={padding}>
+            <Text size={fontSize}>
+              {isValidElement(iconRight) && iconRight}
+              {isValidElementType(iconRight) && createElement(iconRight)}
+            </Text>
+          </RightBox>
+        )}
+      </Presentation>
+    ),
+    [
+      border,
+      fontSize,
+      icon,
+      iconRight,
+      padding,
+      radius,
+      rootTheme,
+      $hasClearButton,
+      $hasPrefix,
+      $hasSuffix,
+    ]
+  )
+
+  // Render clear button (memoized)
+  const clearButtonBoxPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 1
+        if (v === 2) return 1
+
+        return v - 2
+      }),
+    [padding]
+  )
+  const clearButtonPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 0
+        if (v === 2) return 1
+
+        return v - 1
+      }),
+    [padding]
+  )
+  const clearButtonProps: TextInputClearButtonProps = useMemo(
+    () => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
+    [clearButton]
+  )
+  const clearButtonNode = useMemo(
+    () =>
+      !disabled &&
+      !readOnly &&
+      clearButton && (
+        <RightCard
+          forwardedAs="span"
+          padding={clearButtonBoxPadding}
+          style={CLEAR_BUTTON_BOX_STYLE}
+          tone={customValidity ? 'critical' : 'inherit'}
+        >
+          <Button
+            data-qa="clear-button"
+            fontSize={fontSize}
+            icon={CloseIcon}
+            mode="bleed"
+            padding={clearButtonPadding}
+            radius={radius}
+            {...clearButtonProps}
+            onClick={handleClearClick}
+            onMouseDown={handleClearMouseDown}
+          />
+        </RightCard>
+      ),
+    [
+      clearButton,
+      clearButtonBoxPadding,
+      clearButtonPadding,
+      clearButtonProps,
+      customValidity,
+      disabled,
+      fontSize,
+      handleClearClick,
+      handleClearMouseDown,
+      radius,
+      readOnly,
+    ]
+  )
+
+  // Render suffix (memoized)
+  const suffixNode = useMemo(
+    () =>
+      suffix && (
+        <Suffix borderTop borderRight borderBottom radius={radius} sizing="border" tone="inherit">
+          <span>{suffix}</span>
+        </Suffix>
+      ),
+    [radius, suffix]
+  )
+
+  return (
+    <Root data-ui="TextInput" tone={rootTheme.tone}>
+      {prefixNode}
+
+      <InputRoot>
+        <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}
+          disabled={disabled}
+          readOnly={readOnly}
+          ref={ref}
+          type={type}
+        />
+
+        {presentationNode}
+        {clearButtonNode}
+      </InputRoot>
+
+      {suffixNode}
+    </Root>
+  )
+})

package/src/primitives/tooltip/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/tooltip/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/tooltip',
+  title: 'Tooltip',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+  ],
+})

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

@@ -0,0 +1,31 @@
+import {Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const content = useText('Content', 'Tooltip content')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', true)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+        <Tooltip
+          content={<Text size={1}>{content}</Text>}
+          padding={padding}
+          placement={placement}
+          portal={portal}
+          shadow={shadow}
+        >
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>
+      </Flex>
+    </Card>
+  )
+}

package/src/primitives/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip'

package/src/primitives/tooltip/tooltip.tsx

@@ -0,0 +1,272 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  Middleware,
+  RootBoundary,
+} from '@floating-ui/react-dom'
+import {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  CSSProperties,
+  ForwardedRef,
+} from 'react'
+import styled from 'styled-components'
+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'
+import {Card} from '../card'
+import {TooltipArrow} from './tooltipArrow'
+
+/**
+ * @public
+ */
+export interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
+  allowedAutoPlacements?: Placement[]
+  boundaryElement?: HTMLElement | null
+  children?: React.ReactElement
+  content?: React.ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  padding?: number | number[]
+  placement?: Placement
+  portal?: boolean | string
+  scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
+}
+
+const Root = styled(Layer)`
+  pointer-events: none;
+`
+
+/**
+ * @public
+ */
+export const Tooltip = forwardRef(function Tooltip(
+  props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const boundaryElementContext = useBoundaryElement()
+  const theme = useTheme()
+  const {
+    boundaryElement = boundaryElementContext?.element,
+    children: childProp,
+    content,
+    disabled,
+    fallbackPlacements: fallbackPlacementsProp,
+    padding,
+    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 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 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), [])
+  const handleMouseEnter = useCallback(() => setIsOpen(true), [])
+  const handleMouseLeave = useCallback(() => setIsOpen(false), [])
+
+  // Detect whether the mouse is moving outside of the reference element. This is sometimes
+  // necessary, because the tooltip might not always close as it should (e.g. when clicking
+  // the reference element triggers a CPU-heavy operation.)
+  useEffect(() => {
+    if (!isOpen) return
+
+    function handleWindowMouseMove(event: MouseEvent) {
+      if (!referenceElement) return
+
+      const isHoveringReference =
+        referenceElement === event.target ||
+        (event.target instanceof Node && referenceElement.contains(event.target))
+
+      if (!isHoveringReference) {
+        setIsOpen(false)
+        window.removeEventListener('mousemove', handleWindowMouseMove)
+      }
+    }
+
+    window.addEventListener('mousemove', handleWindowMouseMove)
+
+    return () => {
+      window.removeEventListener('mousemove', handleWindowMouseMove)
+    }
+  }, [isOpen, referenceElement])
+
+  // Close when `disabled` changes to `true`
+  useEffect(() => {
+    if (disabled) setIsOpen(false)
+  }, [disabled])
+
+  // Close when `content` changes to falsy
+  useEffect(() => {
+    if (!content) setIsOpen(false)
+  }, [content])
+
+  // 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}
+        padding={padding}
+        radius={2}
+        scheme={scheme}
+        shadow={shadow}
+      >
+        {content}
+        <TooltipArrow ref={setArrow} style={arrowStyle} />
+      </Card>
+    </Root>
+  )
+
+  return (
+    <>
+      {child}
+
+      {isOpen && (
+        <>
+          {portal ? (
+            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+              {root}
+            </Portal>
+          ) : (
+            root
+          )}
+        </>
+      )}
+    </>
+  )
+})