@sanity/ui 3.0.0-static.1 → 3.0.0-static.10

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -1,70 +0,0 @@
-import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {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)
-  const boundaryElementFlag = useBoolean('Boundary element', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card height="fill" padding={3} sizing="border">
-      <PortalProvider element={portalElement}>
-        <Text align="center" muted size={1}>
-          Scroll this box to reveal the popover
-        </Text>
-        <div
-          ref={setBoundaryElement}
-          style={{
-            height: 'calc(100vh - 120px)',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            margin: 60,
-            overflow: 'auto',
-            outline: '1px solid red',
-            width: 'calc(100vw - 120px)',
-          }}
-        >
-          <div style={{padding: '150vh 0', textAlign: 'center'}}>
-            <Popover
-              __unstable_margins={[1, 1, 1, 1]}
-              arrow={arrow}
-              boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
-              constrainSize={constrainSize}
-              content={<Text>popover content</Text>}
-              fallbackPlacements={['top', 'bottom']}
-              matchReferenceWidth={matchReferenceWidth}
-              open={open}
-              padding={padding}
-              placement={placement}
-              portal={portal}
-              preventOverflow={preventOverflow}
-              radius={radius as Radius}
-              width={width}
-            >
-              <Button text="This button is the popover reference" />
-            </Popover>
-          </div>
-        </div>
-        <div ref={setPortalElement} />
-      </PortalProvider>
-    </Card>
-  )
-}

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,86 +0,0 @@
-import {useSelect} from '@sanity/ui-workshop'
-import {useCallback, useEffect, useRef, useState} from 'react'
-import {BoundaryElementProvider} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Popover, PopoverProps, PopoverUpdateCallback} from '../popover'
-
-const SIDE_PANEL_WIDTH = {
-  sm: 300,
-  md: 400,
-  lg: 500,
-  xl: 600,
-}
-
-export default function SidePanelStory() {
-  const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
-  const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
-  const updateRef = useRef<PopoverUpdateCallback>()
-
-  useEffect(() => updateRef.current?.(), [sidePanelWidth])
-
-  return (
-    <Flex height="fill">
-      <Card flex={1}>
-        <Box padding={4}>
-          <Text>
-            This story shows that popovers respect their boundary when used in a side panel.
-          </Text>
-        </Box>
-      </Card>
-      <BoundaryElementProvider element={sidePanel}>
-        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
-          <Stack padding={4} space={5}>
-            <Text muted size={1}>
-              Click the <code>reference</code> text below to toggle the popover.
-            </Text>
-
-            <Card border padding={3}>
-              <Text size={1}>
-                Some editor <InlineObject updateRef={updateRef} />
-              </Text>
-            </Card>
-          </Stack>
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}
-
-function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
-  const {updateRef} = props
-  const [open, setOpen] = useState(false)
-
-  const handleClick = useCallback(() => {
-    setOpen((prev) => !prev)
-  }, [])
-
-  return (
-    <Popover
-      content={
-        <Box padding={3}>
-          <Text size={1}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-            has been the industry's standard dummy text ever since the 1500s, when an unknown
-            printer took a galley of type and scrambled it to make a type specimen book. It has
-            survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of
-            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-          </Text>
-        </Box>
-      }
-      constrainSize
-      open={open}
-      overflow="auto"
-      portal
-      width={0}
-      updateRef={updateRef}
-    >
-      <code onClick={handleClick}>reference</code>
-    </Popover>
-  )
-}

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,97 +0,0 @@
-import {Radius} from '@sanity/ui/theme'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
-import {
-  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-} from '../../../__workshop__/constants'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-import {PopoverUpdateCallback} from '../types'
-
-export default function TestStory(): ReactElement {
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  const mount = useBoolean('Mount', true)
-  const arrow = useBoolean('Arrow', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Render in portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const referenceWide = useBoolean('Reference wide?', false)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-
-  const text = useText('Text', 'Test')
-
-  const updateRef = useRef<PopoverUpdateCallback>()
-
-  const button = (
-    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
-  )
-
-  return (
-    <Card
-      ref={setBoundaryElement}
-      shadow={2}
-      style={{
-        position: 'absolute',
-        top: 50,
-        right: 50,
-        bottom: 50,
-        left: 50,
-      }}
-    >
-      <div
-        data-portal=""
-        ref={setPortalElement}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-        }}
-      />
-
-      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
-        <div style={{padding: '150vh'}}>
-          <PortalProvider element={portalElement}>
-            <BoundaryElementProvider element={boundaryElement}>
-              {!mount && button}
-              {mount && (
-                <Popover
-                  arrow={arrow}
-                  content={<Text size={1}>{text}</Text>}
-                  constrainSize={constrainSize}
-                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                  matchReferenceWidth={matchReferenceWidth}
-                  open={open}
-                  overflow="hidden"
-                  padding={3}
-                  placement={placement}
-                  portal={portal}
-                  preventOverflow={preventOverflow}
-                  radius={radius as Radius}
-                  updateRef={updateRef}
-                  width={width}
-                >
-                  {button}
-                </Popover>
-              )}
-            </BoundaryElementProvider>
-          </PortalProvider>
-        </div>
-      </div>
-    </Card>
-  )
-}

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

@@ -1,82 +0,0 @@
-import {Elements, Middleware, detectOverflow} from '@floating-ui/react-dom'
-import {PopoverMargins} from '../../../types'
-
-export interface SizeMiddlewareApplyOptions {
-  availableWidth: number
-  availableHeight: number
-  elements: Elements
-  referenceWidth: number
-}
-
-export function size(options: {
-  apply: (args: SizeMiddlewareApplyOptions) => void
-  boundaryElement?: HTMLElement | null
-  constrainSize: boolean
-  margins: PopoverMargins
-  matchReferenceWidth?: boolean
-  padding?: number
-}): Middleware {
-  const {apply, margins, padding = 0} = 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
-      apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3],
-      })
-
-      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,
-  )
-}