@sanity/ui 0.37.3 → 0.37.4

package/src/primitives/tooltip/tooltip.tsx

@@ -0,0 +1,186 @@
+import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
+import {usePopper} from 'react-popper'
+import styled from 'styled-components'
+import {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'> {
+  allowedAutoPlacements?: Placement[]
+  boundaryElement?: HTMLElement | null
+  children?: React.ReactElement
+  content?: React.ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  placement?: Placement
+  portal?: boolean | string
+  scheme?: ThemeColorSchemeKey
+}
+
+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 {
+    allowedAutoPlacements,
+    boundaryElement = boundaryElementContext?.element,
+    children,
+    content,
+    disabled,
+    fallbackPlacements,
+    placement = 'bottom',
+    portal,
+    scheme,
+    zOffset = theme.sanity.layer?.tooltip.zOffset,
+    ...restProps
+  } = props
+  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 {forceUpdate} = popper
+  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])
+
+  useEffect(() => {
+    if (forceUpdate) forceUpdate()
+  }, [forceUpdate, content])
+
+  // Close when `disabled` changes to `true`
+  useEffect(() => {
+    if (disabled) setIsOpen(false)
+  }, [disabled])
+
+  // Close when `content` changes to falsy
+  useEffect(() => {
+    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}>
+        {content}
+        <TooltipArrow ref={setArrowElement} style={popper.styles.arrow} />
+      </Card>
+    </Root>
+  )
+
+  return (
+    <>
+      {referenceNode}
+
+      {isOpen && (
+        <>
+          {portal && (
+            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+              {popperNode}
+            </Portal>
+          )}
+
+          {!portal && popperNode}
+        </>
+      )}
+    </>
+  )
+})

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -0,0 +1,74 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+
+const Root = styled.div`
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    &:not([hidden]) {
+      display: block;
+    }
+    transform-origin: 7.5px 7.5px;
+  }
+
+  [data-popper-placement^='top'] > div > & {
+    bottom: -15px;
+  }
+
+  [data-popper-placement^='right'] > div > & {
+    left: -15px;
+
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  [data-popper-placement^='left'] > div > & {
+    right: -15px;
+
+    & > svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  [data-popper-placement^='bottom'] > div > & {
+    top: -15px;
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+`
+
+const Border = styled.path`
+  fill: var(--card-shadow-outline-color);
+`
+
+const Shape = styled.path`
+  fill: var(--card-bg-color);
+`
+
+interface TooltipArrowProps {}
+
+export const TooltipArrow = forwardRef(function TooltipArrow(
+  props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {...restProps} = props
+
+  return (
+    <Root {...restProps} ref={ref}>
+      <svg width="15" height="15" viewBox="0 0 15 15">
+        <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
+        <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />
+      </svg>
+    </Root>
+  )
+})

package/src/primitives/types.ts

@@ -0,0 +1,131 @@
+import {
+  BoxDisplay,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexValue,
+  FlexWrap,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  GridItemColumn,
+  GridItemColumnEnd,
+  GridItemColumnStart,
+  GridItemRow,
+  GridItemRowEnd,
+  GridItemRowStart,
+} from '../types'
+
+/**
+ * @public
+ */
+export interface ResponsiveBorderProps {
+  border?: boolean | boolean[]
+  borderTop?: boolean | boolean[]
+  borderRight?: boolean | boolean[]
+  borderBottom?: boolean | boolean[]
+  borderLeft?: boolean | boolean[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[]
+  height?: BoxHeight | BoxHeight[]
+  overflow?: BoxOverflow | BoxOverflow[]
+  sizing?: BoxSizing | BoxSizing[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[]
+  direction?: FlexDirection | FlexDirection[]
+  justify?: FlexJustify | FlexJustify[]
+  wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveFlexItemProps {
+  flex?: FlexValue | FlexValue[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveGridProps {
+  autoRows?: GridAutoRows | GridAutoRows[]
+  autoCols?: GridAutoCols | GridAutoCols[]
+  autoFlow?: GridAutoFlow | GridAutoFlow[]
+  columns?: number | number[]
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
+  rows?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveGridItemProps {
+  column?: GridItemColumn | GridItemColumn[]
+  columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  row?: GridItemRow | GridItemRow[]
+  rowStart?: GridItemRowStart | GridItemRowStart[]
+  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveMarginProps {
+  margin?: number | number[]
+  marginX?: number | number[]
+  marginY?: number | number[]
+  marginTop?: number | number[]
+  marginRight?: number | number[]
+  marginBottom?: number | number[]
+  marginLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsivePaddingProps {
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  paddingTop?: number | number[]
+  paddingRight?: number | number[]
+  paddingBottom?: number | number[]
+  paddingLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveRadiusProps {
+  radius?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveShadowProps {
+  shadow?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveWidthProps {
+  width?: number | number[] | 'auto'
+}

package/src/styles/border/borderStyle.ts

@@ -0,0 +1,57 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveBorderStyleProps} from './types'
+
+const BORDER_VALUE = '1px solid var(--card-border-color)'
+
+export function responsiveBorderStyle(): Array<
+  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [border, borderTop, borderRight, borderBottom, borderLeft]
+}
+
+function border(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$border), (value) =>
+    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
+  )
+}
+
+function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$borderTop), (value) =>
+    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
+  )
+}
+
+function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$borderRight), (value) =>
+    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
+  )
+}
+
+function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$borderBottom), (value) =>
+    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
+  )
+}
+
+function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$borderLeft), (value) =>
+    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
+  )
+}

package/src/styles/border/index.ts

@@ -0,0 +1,2 @@
+export * from './borderStyle'
+export * from './types'

package/src/styles/border/types.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export interface ResponsiveBorderStyleProps {
+  $border?: boolean | boolean[]
+  $borderTop?: boolean | boolean[]
+  $borderRight?: boolean | boolean[]
+  $borderBottom?: boolean | boolean[]
+  $borderLeft?: boolean | boolean[]
+}

package/src/styles/box/boxStyle.ts

@@ -0,0 +1,72 @@
+import {Property} from 'csstype'
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveBoxStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: 'none',
+  },
+}
+
+const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
+  content: 'content-box',
+  border: 'border-box',
+}
+
+const BOX_HEIGHT = {
+  stretch: 'stretch',
+  fill: '100%',
+}
+
+export function boxStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveBoxStyle(): Array<
+  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveBoxSizingStyle,
+    responsiveBoxHeightStyle,
+    responsiveBoxOverflowStyle,
+    responsiveBoxDisplayStyle,
+  ]
+}
+
+function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$display), (display) => ({
+    '&:not([hidden])': {display},
+  }))
+}
+
+function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$sizing), (sizing) => ({
+    boxSizing: BOX_SIZING[sizing],
+  }))
+}
+
+function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$height), (height) => ({
+    height: BOX_HEIGHT[height],
+  }))
+}
+
+function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$overflow), (overflow) => ({
+    overflow,
+  }))
+}

package/src/styles/box/index.ts

@@ -0,0 +1,2 @@
+export * from './boxStyle'
+export * from './types'

package/src/styles/box/types.ts

@@ -0,0 +1,11 @@
+import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveBoxStyleProps {
+  $display?: BoxDisplay | BoxDisplay[]
+  $height?: BoxHeight | BoxHeight[]
+  $overflow?: BoxOverflow | BoxOverflow[]
+  $sizing?: BoxSizing | BoxSizing[]
+}

package/src/styles/colorVars/colorVarsStyle.ts

@@ -0,0 +1,41 @@
+import {CSSObject} from 'styled-components'
+import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+
+/**
+ * @internal
+ */
+export function _colorVarsStyle(
+  base: ThemeColorBase,
+  color: ThemeColorGenericState,
+  checkered = false
+): CSSObject {
+  return {
+    // Base
+    // @todo: rename to "--base-"?
+    '--card-shadow-outline-color': base.shadow.outline,
+    '--card-shadow-umbra-color': base.shadow.umbra,
+    '--card-shadow-penumbra-color': base.shadow.penumbra,
+    '--card-shadow-ambient-color': base.shadow.ambient,
+    '--card-focus-ring-color': base.focusRing,
+
+    // Card
+    '--card-bg-color': color.bg,
+    '--card-bg-image': checkered
+      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
+      : undefined,
+    '--card-fg-color': color.fg,
+    '--card-border-color': color.border,
+    '--card-muted-fg-color': color.muted?.fg,
+    '--card-accent-fg-color': color.accent?.fg,
+    '--card-link-fg-color': color.link?.fg,
+    '--card-code-bg-color': color.code?.bg,
+    '--card-code-fg-color': color.code?.fg,
+    '--card-skeleton-color-from': color.skeleton?.from,
+    '--card-skeleton-color-to': color.skeleton?.to,
+
+    // @todo: deprecate
+    '--card-link-color': color.link?.fg,
+    '--card-hairline-soft-color': color.border,
+    '--card-hairline-hard-color': color.border,
+  }
+}

package/src/styles/colorVars/index.ts

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

package/src/styles/flex/flexItemStyle.ts

@@ -0,0 +1,26 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFlexItemStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  minWidth: 0,
+  minHeight: 0,
+}
+
+export function flexItemStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [BASE_STYLE, responsiveFlexItemStyle]
+}
+
+export function responsiveFlexItemStyle(
+  props: ResponsiveFlexItemStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$flex), (flex) => {
+    return {flex}
+  })
+}

package/src/styles/flex/flexStyle.ts

@@ -0,0 +1,74 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, rem, responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFlexStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  '&&:not([hidden])': {
+    display: 'flex',
+  },
+}
+
+export function responsiveFlexStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    BASE_STYLE,
+    responsiveFlexAlignStyle,
+    responsiveFlexGapStyle,
+    responsiveFlexWrapStyle,
+    responsiveFlexJustifyStyle,
+    responsiveFlexDirectionStyle,
+  ]
+}
+
+export function responsiveFlexAlignStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$align), (align) => {
+    return {alignItems: align}
+  })
+}
+
+function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
+    gap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$wrap), (wrap) => {
+    return {flexWrap: wrap}
+  })
+}
+
+export function responsiveFlexJustifyStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$justify), (justify) => {
+    return {justifyContent: justify}
+  })
+}
+
+export function responsiveFlexDirectionStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$direction), (direction) => {
+    return {flexDirection: direction}
+  })
+}

package/src/styles/flex/index.ts

@@ -0,0 +1,3 @@
+export * from './flexStyle'
+export * from './flexItemStyle'
+export * from './types'