@sanity/ui 3.3.2 → 3.3.3

package/src/core/primitives/inline/inline.tsx

@@ -1,66 +0,0 @@
-import {Children, forwardRef, useMemo} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {inlineBaseStyle, inlineSpaceStyle} from './styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-/**
- * @public
- */
-export interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
-  /**
-   * The spacing between children.
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  /** The spacing between children. */
-  gap?: number | number[]
-}
-
-/**
- * @public
- */
-export type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
-
-const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
-
-const InlineComponent = forwardRef(function Inline(
-  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
-  ref,
-) {
-  // oxlint-disable-next-line no-deprecated
-  const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
-  const spacing = gap === undefined ? deprecated_space : gap
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
-    [childrenProp],
-  )
-
-  return (
-    <StyledInline
-      data-ui="Inline"
-      {...restProps}
-      $space={_getArrayProp(spacing)}
-      forwardedAs={as}
-      // oxlint-disable-next-line no-unnecessary-type-assertion, no-unsafe-type-assertion
-      ref={ref as any}
-    >
-      {children}
-    </StyledInline>
-  )
-})
-InlineComponent.displayName = 'ForwardRef(Inline)'
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(
-  props: InlineProps<E>,
-) => React.JSX.Element

package/src/core/primitives/inline/styles.ts

@@ -1,32 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-export function inlineBaseStyle(): CSSObject {
-  return {
-    'lineHeight': '0',
-
-    '&&:not([hidden])': {
-      display: 'block',
-    },
-
-    '& > div': {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-    },
-  }
-}
-
-export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => {
-    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
-
-    return {
-      'margin': `-${_space} 0 0 -${_space}`,
-      '& > div': {padding: `${_space} 0 0 ${_space}`},
-    }
-  })
-}

package/src/core/primitives/inline/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveInlineSpaceStyleProps {
-  $space: number[]
-}

package/src/core/primitives/kbd/index.ts

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

package/src/core/primitives/kbd/kbd.tsx

@@ -1,73 +0,0 @@
-import {forwardRef} from 'react'
-import {css, styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {ElementType, Props, Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface KBDOwnProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
-
-function kbdStyle() {
-  return css`
-    --card-bg-color: var(--card-kbd-bg-color);
-    --card-border-color: var(--card-kbd-border-color);
-    --card-fg-color: var(--card-kbd-fg-color);
-
-    box-shadow: inset 0 0 0 1px var(--card-border-color);
-    background: var(--card-bg-color);
-    font: inherit;
-
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
-
-const KBDComponent = forwardRef(function KBD(
-  props: KBDOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLElement>,
-      'as' | 'ref' | 'size'
-    >,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
-
-  return (
-    <StyledKBD data-ui="KBD" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>
-      <Box as="span" padding={padding}>
-        <Text as="span" size={fontSize} weight="semibold">
-          {children}
-        </Text>
-      </Box>
-    </StyledKBD>
-  )
-})
-KBDComponent.displayName = 'ForwardRef(KBD)'
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(
-  props: KBDProps<E>,
-) => React.JSX.Element

package/src/core/primitives/label/index.ts

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

package/src/core/primitives/label/label.tsx

@@ -1,88 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {ElementType, Props, TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {labelBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface LabelOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
-
-/**
- * @public
- */
-export type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
-
-const StyledLabel = styled.div<{
-  $accent?: boolean
-  $align: TextAlign[]
-  $muted: boolean
-  $size: number[]
-}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
-
-const LabelComponent = forwardRef(function Label(
-  props: LabelOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    accent,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
-  return (
-    <StyledLabel
-      data-ui="Label"
-      {...restProps}
-      $accent={accent}
-      $align={_getArrayProp(align)}
-      $muted={muted}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-    >
-      {children}
-    </StyledLabel>
-  )
-})
-LabelComponent.displayName = 'ForwardRef(Label)'
-
-/**
- * Typographic labels.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Label = LabelComponent as unknown as <E extends ElementType = 'div'>(
-  props: LabelProps<E>,
-) => React.JSX.Element

package/src/core/primitives/label/styles.ts

@@ -1,45 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-
-export function labelBaseStyle(
-  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    text-transform: uppercase;
-
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/core/primitives/popover/constants.ts

@@ -1,22 +0,0 @@
-import {Placement, PopoverMargins} from '../../types'
-
-export const DEFAULT_POPOVER_DISTANCE = 4
-export const DEFAULT_POPOVER_PADDING = 4
-export const DEFAULT_POPOVER_ARROW_WIDTH = 19
-export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
-export const DEFAULT_POPOVER_ARROW_RADIUS = 2
-export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
-export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['bottom', 'left', 'right'],
-  'top-start': ['bottom-start', 'left-start', 'right-start'],
-  'top-end': ['bottom-end', 'left-end', 'right-end'],
-  'bottom': ['top', 'left', 'right'],
-  'bottom-start': ['top-start', 'left-start', 'right-start'],
-  'bottom-end': ['top-end', 'left-end', 'right-end'],
-  'left': ['right', 'top', 'bottom'],
-  'left-start': ['right-start', 'top-start', 'bottom-start'],
-  'left-end': ['right-end', 'top-end', 'bottom-end'],
-  'right': ['left', 'top', 'bottom'],
-  'right-start': ['left-start', 'top-start', 'bottom-start'],
-  'right-end': ['left-end', 'top-end', 'bottom-end'],
-}

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,99 +0,0 @@
-import {detectOverflow, Middleware} from '@floating-ui/react-dom'
-
-import {PopoverMargins} from '../../../types'
-
-export function size(options: {
-  boundaryElement?: HTMLElement | null
-  constrainSize: boolean
-  margins: PopoverMargins
-  matchReferenceWidth?: boolean
-  maxWidthRef: React.RefObject<number | undefined>
-  padding?: number
-  referenceWidthRef: React.RefObject<number | undefined>
-  setReferenceWidth: (referenceWidth: number) => void
-  widthRef: React.RefObject<number | undefined>
-}): Middleware {
-  const {
-    constrainSize,
-    margins,
-    matchReferenceWidth,
-    maxWidthRef,
-    padding = 0,
-    referenceWidthRef,
-    setReferenceWidth,
-    widthRef,
-  } = options
-
-  return {
-    name: '@sanity/ui/size',
-    async fn(args) {
-      const {elements, placement, platform, rects} = args
-      const {floating, reference} = rects
-
-      const overflow = await detectOverflow(args, {
-        altBoundary: true,
-        boundary: options.boundaryElement || undefined,
-        elementContext: 'floating',
-        padding,
-        rootBoundary: 'viewport',
-      })
-
-      let maxWidth = Infinity
-      let maxHeight = Infinity
-
-      const floatingW = floating.width
-      const floatingH = floating.height
-
-      if (placement.includes('top')) {
-        maxWidth = floatingW - (overflow.left + overflow.right)
-        maxHeight = floatingH - overflow.top
-      }
-
-      if (placement.includes('right')) {
-        maxWidth = floatingW - overflow.right
-        maxHeight = floatingH - (overflow.top + overflow.bottom)
-      }
-
-      if (placement.includes('bottom')) {
-        maxWidth = floatingW - (overflow.left + overflow.right)
-        maxHeight = floatingH - overflow.bottom
-      }
-
-      if (placement.includes('left')) {
-        maxWidth = floatingW - overflow.left
-        maxHeight = floatingH - (overflow.top + overflow.bottom)
-      }
-
-      // IMPORTANT – APPLY ELEMENT STYLES HERE
-      // Elements need to be resized BEFORE the `platform.getDimensions` call below
-      const availableWidth = maxWidth - margins[1] - margins[3]
-      const availableHeight = maxHeight - margins[0] - margins[2]
-      const referenceWidth = reference.width - margins[1] - margins[3]
-      referenceWidthRef.current = referenceWidth
-      setReferenceWidth(referenceWidth)
-
-      if (matchReferenceWidth) {
-        elements.floating.style.width = `${referenceWidth}px`
-      } else if (widthRef.current !== undefined) {
-        elements.floating.style.width = `${widthRef.current}px`
-      }
-
-      if (constrainSize) {
-        elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? Infinity)}px`
-
-        elements.floating.style.maxHeight = `${availableHeight}px`
-      }
-
-      const nextDimensions = await platform.getDimensions(elements.floating)
-
-      const targetH = nextDimensions.height
-      const targetW = nextDimensions.width
-
-      if (floatingW !== targetW || floatingH !== targetH) {
-        return {reset: {rects: true}}
-      }
-
-      return {}
-    },
-  }
-}

package/src/core/primitives/popover/helpers.ts

@@ -1,31 +0,0 @@
-import {DEFAULT_POPOVER_PADDING} from './constants'
-import {PopoverWidth} from './types'
-
-export function calcCurrentWidth(params: {
-  mediaIndex: number
-  container: number[]
-  width: PopoverWidth[]
-}): number | undefined {
-  const {container, mediaIndex, width} = params
-
-  const w = width[mediaIndex]
-  const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
-
-  return typeof currentWidth === 'number' ? container[currentWidth] : undefined
-}
-
-export function calcMaxWidth(params: {
-  boundaryWidth: number | undefined
-  currentWidth: number | undefined
-}): number | undefined {
-  const {boundaryWidth, currentWidth} = params
-
-  if (currentWidth === undefined && boundaryWidth === undefined) {
-    return undefined
-  }
-
-  return Math.min(
-    currentWidth ?? Infinity,
-    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2,
-  )
-}

package/src/core/primitives/popover/index.ts

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