@sanity/ui 0.37.3 → 0.37.4

package/src/primitives/label/label.tsx

@@ -0,0 +1,80 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+import {labelBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface LabelProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  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
+}
+
+const Root = styled.div<{
+  $accent?: boolean
+  $align?: TextAlign | TextAlign[]
+  $muted: boolean
+  $size: number[]
+}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
+
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
+
+/**
+ * @public
+ */
+export const Label = forwardRef(function Label(
+  props: LabelProps & 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 (
+    <Root
+      data-ui="Label"
+      {...restProps}
+      $accent={accent}
+      $align={align}
+      $muted={muted}
+      $size={size}
+      $weight={weight}
+      ref={ref}
+    >
+      {children}
+    </Root>
+  )
+})

package/src/primitives/label/styles.ts

@@ -0,0 +1,37 @@
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {ThemeProps} from '../../styles'
+
+export function labelBaseStyle(
+  props: {$accent?: boolean; $muted: boolean} & ThemeProps
+): FlattenSimpleInterpolation {
+  const {$accent, $muted, theme} = props
+  const {fonts} = theme.sanity
+
+  return css`
+    text-transform: uppercase;
+
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${fonts.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

package/src/primitives/popover/__workshop__/.eslintrc

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

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

@@ -0,0 +1,30 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/popover', 'Popover', [
+  {
+    name: 'plain',
+    title: 'Plain',
+    component: lazy(() => import('./plain')),
+  },
+  {
+    name: 'recursive',
+    title: 'Recursive',
+    component: lazy(() => import('./recursive')),
+  },
+  {
+    name: 'match-ref-width',
+    title: 'Match reference width',
+    component: lazy(() => import('./matchReferenceWidth')),
+  },
+  {
+    name: 'margins',
+    title: 'Margins',
+    component: lazy(() => import('./margins')),
+  },
+  {
+    name: 'right-aligned',
+    title: 'Right-aligned',
+    component: lazy(() => import('./rightAligned')),
+  },
+])

package/src/primitives/popover/__workshop__/margins.tsx

@@ -0,0 +1,32 @@
+import {Box, Card, Container, Flex, Popover, Text} from '@sanity/ui'
+import React from 'react'
+
+export default function MarginsStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Popover
+        __unstable_margins={[-5, -5, -5, -5]}
+        arrow={false}
+        content={
+          <Box padding={2}>
+            <Text align="center" muted size={1}>
+              Popover
+            </Text>
+          </Box>
+        }
+        matchReferenceWidth
+        open
+        placement="bottom-start"
+        // radius={0}
+      >
+        <Container width={0}>
+          <Card padding={2} muted shadow={1}>
+            <Text align="center" muted size={1}>
+              Reference
+            </Text>
+          </Card>
+        </Container>
+      </Popover>
+    </Flex>
+  )
+}

package/src/primitives/popover/__workshop__/matchReferenceWidth.tsx

@@ -0,0 +1,32 @@
+import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function MatchReferenceWidthStory() {
+  const arrow = useBoolean('Arrow', true, 'Props')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Popover
+        arrow={arrow}
+        content={
+          <Box padding={2}>
+            <Text>Content</Text>
+          </Box>
+        }
+        matchReferenceWidth
+        open
+        placement={placement}
+        radius={2}
+      >
+        <Container width={0}>
+          <Stack>
+            <Button fontSize={3} text="Button" />
+          </Stack>
+        </Container>
+      </Popover>
+    </Flex>
+  )
+}

package/src/primitives/popover/__workshop__/plain.tsx

@@ -0,0 +1,69 @@
+import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React, {useState} from 'react'
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const arrow = useBoolean('Arrow', true, 'Props')
+  const boundaryElementFlag = useBoolean('Boundary element', true, 'Props')
+  const content = useText('Content', 'Hello, world', 'Props')
+  const constrainSize = useBoolean('Constrain size', true, 'Props')
+  const matchReferenceWidth = useBoolean('Match reference width', false, 'Props')
+  const open = useBoolean('Open', true, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+  const portal = useBoolean('Portal', true, 'Props')
+  const preventOverflow = useBoolean('Prevent overflow', true, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto', 'Props')
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <PortalProvider element={portalElement}>
+      <Text muted size={1} style={{position: 'absolute', top: 40, left: 60}}>
+        Scroll this box to reveal the popover
+      </Text>
+      <div
+        ref={setBoundaryElement}
+        style={{
+          height: 'calc(100vh - 120px)',
+          position: 'relative',
+          margin: 60,
+          overflow: 'auto',
+          outline: '1px solid red',
+          width: 'calc(100vw - 120px)',
+        }}
+      >
+        <Card padding={4} style={{textAlign: 'center'}}>
+          <div style={{padding: '150vh 0'}}>
+            <Popover
+              __unstable_margins={[1, 1, 1, 1]}
+              arrow={arrow}
+              boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
+              content={<Text>{content}</Text>}
+              constrainSize={constrainSize}
+              fallbackPlacements={['top', 'bottom']}
+              matchReferenceWidth={matchReferenceWidth}
+              open={open}
+              padding={padding}
+              placement={placement}
+              portal={portal}
+              preventOverflow={preventOverflow}
+              radius={radius}
+              width={width}
+            >
+              <Button text="This button is the popover reference" />
+            </Popover>
+          </div>
+        </Card>
+      </div>
+      <div ref={setPortalElement} />
+    </PortalProvider>
+  )
+}

package/src/primitives/popover/__workshop__/recursive.tsx

@@ -0,0 +1,75 @@
+import {
+  Button,
+  Flex,
+  LayerProvider,
+  Placement,
+  Popover,
+  ThemeColorToneKey,
+  useLayer,
+} from '@sanity/ui'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+export default function RecursiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <LayerProvider>
+        <RecursiveExample />
+      </LayerProvider>
+    </Flex>
+  )
+}
+
+const placements: Placement[] = ['top', 'right', 'bottom', 'left']
+const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
+
+function RecursiveExample({onClose}: {onClose?: () => void}) {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const {isTopLayer} = useLayer()
+  const [seed] = useState(() => Math.floor(Math.random() * 4))
+  const fallbackPlacements = useMemo(() => {
+    const before = placements.slice(seed)
+    const after = placements.slice(0, seed)
+
+    return before.concat(after)
+  }, [seed])
+
+  useEffect(() => {
+    if (open === false) buttonRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    buttonRef.current?.focus()
+  }, [])
+
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (!isTopLayer) return
+      if (event.key === 'Escape' && onClose) onClose()
+    },
+    [isTopLayer, onClose]
+  )
+
+  return (
+    <Popover
+      fallbackPlacements={fallbackPlacements}
+      content={<RecursiveExample onClose={handleClose} />}
+      open={open}
+      placement={fallbackPlacements[3]}
+      portal
+      tone={tones[seed]}
+    >
+      <Button
+        mode="bleed"
+        onKeyDown={handleKeyDown}
+        onClick={handleOpen}
+        radius={3}
+        ref={buttonRef}
+        text="Open"
+      />
+    </Popover>
+  )
+}

package/src/primitives/popover/__workshop__/rightAligned.tsx

@@ -0,0 +1,57 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const content = (
+    <Box overflow="auto" padding={3}>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+        hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+        quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam
+        luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a,
+        tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer
+        fermentum tortor at pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo
+        tortor libero, vel pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia.
+        Vestibulum non pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi
+        a, molestie elit. Nulla sed eleifend mi.
+      </Text>
+    </Box>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Box height="fill" padding={[4, 5, 6]} sizing="border">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize
+            content={content}
+            open={open}
+            portal
+            preventOverflow
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}

package/src/primitives/popover/arrow.tsx

@@ -0,0 +1,75 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+
+const Root = styled.div`
+  position: absolute;
+  pointer-events: none;
+  width: 27px;
+  height: 27px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    display: block;
+    transform-origin: 13.5px 13.5px;
+  }
+
+  [data-popper-placement^='top'] > div > & {
+    bottom: -27px;
+  }
+
+  [data-popper-placement^='right'] > div > & {
+    left: -27px;
+
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  [data-popper-placement^='left'] > div > & {
+    right: -27px;
+
+    & > svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  [data-popper-placement^='bottom'] > div > & {
+    top: -27px;
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+`
+
+const BorderPath = styled.path`
+  fill: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+export const PopoverArrow = forwardRef(function PopoverArrow(
+  props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Root data-ui="PopoverArrow" {...props} ref={ref}>
+      <svg
+        width="27"
+        height="11"
+        viewBox="0 0 27 11"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <BorderPath d="M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z" />
+        <ShapePath d="M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z" />
+      </svg>
+    </Root>
+  )
+})

package/src/primitives/popover/index.ts

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

package/src/primitives/popover/modifiers/getPopoverModifiers.ts

@@ -0,0 +1,137 @@
+import maxSizeModifier from 'popper-max-size-modifier'
+import {Modifier} from 'react-popper'
+import {PopoverModifiersProps} from './types'
+
+/*
+
+The order of popper phases:
+
+- beforeRead
+- read
+- afterRead
+- beforeMain
+- main
+- afterMain
+- beforeWrite
+- write
+- afterWrite
+
+*/
+
+export function getPopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
+  const {
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  } = props
+
+  // NOTE: For later viewers:
+  // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
+  // was opened, when used with `constrainSize`. I was looking for a way to "reset"
+  // the size of the popover as measured by Popper.js, and this seems to be a workaround.
+  if (!open) {
+    return []
+  }
+
+  const detectOverflowOptions = {
+    altAxis: !constrainSize,
+    boundary: boundaryElement || undefined,
+    padding: 8,
+    tether,
+    tetherOffset,
+  }
+
+  return [
+    constrainSize && {
+      ...maxSizeModifier,
+      options: detectOverflowOptions,
+    },
+    constrainSize && {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['maxSize'],
+      fn({state}: any) {
+        const {width, height} = state.modifiersData.maxSize
+
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxWidth: `${width}px`,
+          maxHeight: `${height}px`,
+        }
+      },
+    },
+    arrow && {
+      name: 'arrow',
+      options: {
+        element: arrowElement,
+        padding: 4,
+      },
+    },
+    (constrainSize || preventOverflow) && {
+      name: 'preventOverflow',
+      options: detectOverflowOptions,
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [skidding, distance],
+      },
+    },
+    margins && {
+      name: 'margins',
+      enabled: true,
+      phase: 'beforeRead',
+      fn: ({state}: any) => {
+        const {rects} = state
+
+        if (rects.reference) {
+          rects.reference.x += margins[3]
+          rects.reference.y += margins[1]
+          rects.reference.width -= margins[1] + margins[3]
+          rects.reference.height -= margins[0] + margins[2]
+        }
+      },
+    },
+    {
+      name: 'flip',
+      options: {
+        allowedAutoPlacements,
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: 8,
+      },
+    },
+    matchReferenceWidth && {
+      name: 'matchWidth',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn({state}: any) {
+        const {width} = state.rects.reference
+
+        state.styles.popper.width = `${width}px`
+      },
+      effect: ({state}: any) => {
+        const refElement = state.elements.reference
+
+        if (refElement instanceof HTMLElement) {
+          state.elements.popper.style.width = `${
+            refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)
+          }px`
+        }
+      },
+    },
+  ].filter(Boolean) as Modifier<any, any>[]
+}

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

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

package/src/primitives/popover/modifiers/types.ts

@@ -0,0 +1,18 @@
+import {Placement} from '../../../types'
+
+export interface PopoverModifiersProps {
+  allowedAutoPlacements?: Placement[]
+  arrow?: boolean
+  arrowElement?: HTMLElement | null
+  boundaryElement?: HTMLElement | null
+  constrainSize?: boolean
+  distance: number
+  fallbackPlacements?: Placement[]
+  margins?: [number, number, number, number]
+  matchReferenceWidth?: boolean
+  open: boolean
+  preventOverflow?: boolean
+  skidding: number
+  tether?: boolean
+  tetherOffset?: number | ((...args: any[]) => number)
+}