@sanity/ui 0.37.2 → 0.37.3

package/src/primitives/tooltip/tooltip.tsx

@@ -1,186 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,130 +0,0 @@
-import {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  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?: number | number[]
-}
-
-/**
- * @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

@@ -1,57 +0,0 @@
-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

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

package/src/styles/border/types.ts

@@ -1,10 +0,0 @@
-/**
- * @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

@@ -1,72 +0,0 @@
-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

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

package/src/styles/box/types.ts

@@ -1,11 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

package/src/styles/flex/flexItemStyle.ts

@@ -1,24 +0,0 @@
-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) => ({flex}))
-}

package/src/styles/flex/flexStyle.ts

@@ -1,74 +0,0 @@
-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

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