@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/root/__workshop__/Boundary.tsx

@@ -0,0 +1,43 @@
+import {Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function BoundaryStory(): React.JSX.Element {
+  const {scheme} = useCard()
+
+  return (
+    <CardWrapper pattern="halftone">
+      <Root
+        as="div"
+        padding={4}
+        radius={5}
+        scheme={scheme}
+        shadow={3}
+        sizing="border"
+        style={{minHeight: 300}}
+      >
+        <Layout />
+      </Root>
+    </CardWrapper>
+  )
+}
+
+function Layout() {
+  const toast = useToast()
+
+  return (
+    <Stack gap={4}>
+      <Text size={1}>
+        Testing the root component. Toast messages will be rendered here, and should be contained
+        within the root element.
+      </Text>
+
+      <Button
+        mode="ghost"
+        text="Push toast message"
+        width="min"
+        onClick={() => toast.push({title: 'Hello!'})}
+      />
+    </Stack>
+  )
+}

package/src/root/__workshop__/index.ts

@@ -0,0 +1,24 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'root',
+  title: 'Root',
+  stories: [
+    {
+      name: 'boundary',
+      title: 'Boundary',
+      component: lazy(() => import('./Boundary')),
+    },
+    {
+      name: 'primitives',
+      title: 'Primitives',
+      component: lazy(() => import('./primitives')),
+    },
+    {
+      name: 'tone-inheritance',
+      title: 'Tone inheritance',
+      component: lazy(() => import('./tone-inheritance')),
+    },
+  ],
+})

package/src/root/__workshop__/primitives.tsx

@@ -0,0 +1,49 @@
+import {SearchIcon} from '@sanity/icons'
+import {Badge, Card, Checkbox, Radio, Select, Switch, TextInput} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function PrimitivesStory() {
+  const disabled = useBoolean('Disabled', false)
+
+  return (
+    <CardWrapper pattern="halftone">
+      <Card
+        display="flex"
+        flexDirection="column"
+        gap={4}
+        padding={4}
+        radius={5}
+        shadow={3}
+        sizing="border"
+      >
+        <Badge>Badge</Badge>
+        <TextInput
+          disabled={disabled}
+          fontSize={1}
+          icon={SearchIcon}
+          placeholder="Search"
+          radius="full"
+        />
+        <div>
+          <Checkbox disabled={disabled} />
+        </div>
+        <div>
+          <Radio disabled={disabled} />
+        </div>
+        <div>
+          <Switch disabled={disabled} />
+        </div>
+        <Select disabled={disabled} fontSize={1}>
+          <option disabled selected>
+            Choose an option
+          </option>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+        </Select>
+      </Card>
+    </CardWrapper>
+  )
+}

package/src/root/__workshop__/tone-inheritance.tsx

@@ -0,0 +1,65 @@
+import {Box, Card, Code, Portal, PortalProvider, Root, Text, usePrefersDark} from '@sanity/ui'
+import {useState} from 'react'
+
+import {CardWrapper} from '$workshop'
+
+export default function ToneInheritanceStory() {
+  const dark = usePrefersDark()
+  const [cardPortal, setCardPortal] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <CardWrapper pattern="halftone" tone="transparent">
+      <Root as="div" radius={4} scheme={dark ? 'dark' : 'light'} shadow={4}>
+        <Box padding={4}>
+          <Code language="jsx" size={1}>{`<Root
+  scheme=${JSON.stringify(dark ? 'dark' : 'light')}
+  tone="transparent"
+/>`}</Code>
+
+          <PortalProvider element={cardPortal}>
+            <Card
+              marginTop={4}
+              radius={4}
+              scheme={dark ? 'light' : 'dark'}
+              shadow={1}
+              tone="suggest"
+            >
+              <Box padding={4}>
+                <Code language="jsx" size={1}>{`<Card
+  scheme=${JSON.stringify(dark ? 'light' : 'dark')}
+  tone="suggest"
+/>`}</Code>
+              </Box>
+              <Portal>
+                <Card
+                  padding={4}
+                  radius={4}
+                  shadow={1}
+                  // tone="critical"
+                >
+                  <Text muted size={1}>
+                    Card in portal (card)
+                  </Text>
+                </Card>
+              </Portal>
+              <div ref={setCardPortal} />
+            </Card>
+          </PortalProvider>
+        </Box>
+
+        <Portal>
+          <Card
+            padding={4}
+            radius={4}
+            shadow={1}
+            // tone="critical"
+          >
+            <Text muted size={1}>
+              Card in portal (root)
+            </Text>
+          </Card>
+        </Portal>
+      </Root>
+    </CardWrapper>
+  )
+}

package/src/utils/ErrorBoundary.tsx

@@ -0,0 +1,50 @@
+import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
+
+import {Code} from '../primitives/code/Code'
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export type ErrorBoundaryProps = PropsWithChildren<{
+  onCatch: (params: {error: Error; info: ErrorInfo}) => void
+}>
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export interface ErrorBoundaryState {
+  error: Error | null
+}
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  override state: ErrorBoundaryState = {error: null}
+
+  static displayName = 'ErrorBoundary'
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return {error}
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    this.props.onCatch({error, info})
+  }
+
+  override render(): ReactNode {
+    const {error} = this.state
+
+    if (error) {
+      const message = typeof error?.message === 'string' ? error.message : 'Error'
+
+      return <Code>{message}</Code>
+    }
+
+    return this.props.children
+  }
+}

package/src/utils/boundaryElement/BoundaryElementContext.ts

@@ -0,0 +1,7 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {BoundaryElementContextValue} from './types'
+
+export const BoundaryElementContext: Context<BoundaryElementContextValue> =
+  createGlobalScopedContext<BoundaryElementContextValue>('@sanity/ui/v4/boundaryElement', null)

package/src/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -0,0 +1,16 @@
+import {type ReactNode} from 'react'
+
+import {BoundaryElementContext} from './BoundaryElementContext'
+
+/** @public */
+export interface BoundaryElementProviderProps {
+  children: ReactNode
+  element: HTMLElement | null
+}
+
+/** @public */
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
+  const {children, element} = props
+
+  return <BoundaryElementContext value={element}>{children}</BoundaryElementContext>
+}

package/src/utils/boundaryElement/__workshop__/Plain.tsx

@@ -0,0 +1,49 @@
+import {BoundaryElementProvider, Button, Card, Text, TooltipDelayGroupProvider} from '@sanity/ui'
+import {useState} from 'react'
+
+import {CardWrapper} from '$workshop'
+
+export default function PlainStory(): React.JSX.Element {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <CardWrapper pattern="halftone" tone="transparent" width={0}>
+      <Text marginBottom={4} muted size={1}>
+        Hover the button. The tooltip should render within the bounds of the box, despite of{' '}
+        <code>placement="bottom"</code>.
+      </Text>
+
+      <TooltipDelayGroupProvider>
+        <Card
+          ref={setBoundaryElement}
+          display="flex"
+          justifyContent="space-between"
+          padding={3}
+          radius={5}
+          shadow={1}
+          tone="default"
+        >
+          <BoundaryElementProvider element={boundaryElement}>
+            <Button
+              mode="ghost"
+              text="Button"
+              tooltip={{
+                placement: 'bottom',
+                text: 'Tooltip',
+              }}
+            />
+
+            <Button
+              mode="ghost"
+              text="Button"
+              tooltip={{
+                placement: 'bottom',
+                text: 'Tooltip',
+              }}
+            />
+          </BoundaryElementProvider>
+        </Card>
+      </TooltipDelayGroupProvider>
+    </CardWrapper>
+  )
+}

package/src/utils/boundaryElement/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'utils/boundaryElement',
+  title: 'BoundaryElement',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./Plain')),
+    },
+  ],
+}
+
+export default scope

package/src/utils/boundaryElement/types.ts

@@ -0,0 +1,2 @@
+/** @public */
+export type BoundaryElementContextValue = HTMLElement | null

package/src/utils/boundaryElement/useBoundaryElement.ts

@@ -0,0 +1,12 @@
+import {use, useMemo} from 'react'
+
+import {BoundaryElementContext} from './BoundaryElementContext'
+import type {BoundaryElementContextValue} from './types'
+
+/** @public */
+export function useBoundaryElement(): {version: 0.0; element: BoundaryElementContextValue} {
+  // eslint-disable-next-line no-warning-comments
+  // @TODO this wrapping is for BC and should be removed
+  const element = use(BoundaryElementContext)
+  return useMemo(() => ({version: 0.0, element}), [element])
+}

package/src/utils/elementQuery/ElementQuery.tsx

@@ -0,0 +1,75 @@
+import {BREAKPOINTS} from '@sanity/ui-css'
+import {useImperativeHandle, useMemo, useState} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+import {useElementSize} from '../../hooks/useElementSize'
+import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
+
+/** @beta */
+export const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type ElementQueryOwnProps = {
+  media?: number[]
+}
+
+/** @beta */
+export type ElementQueryElementType = 'div' | ComponentType
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<
+  ElementQueryOwnProps,
+  E
+>
+
+const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>): React.JSX.Element {
+  const {
+    as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
+    children,
+    media: mediaProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as ElementQueryProps<typeof DEFAULT_ELEMENT_QUERY_ELEMENT>
+
+  const breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS
+
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const elementSize = useElementSize(element)
+  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
+
+  const max = useMemo(() => {
+    const eq = findMaxBreakpoints(breakpoints, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [breakpoints, width])
+
+  const min = useMemo(() => {
+    const eq = findMinBreakpoints(breakpoints, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [breakpoints, width])
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
+    element,
+  ])
+
+  return (
+    <Element data-ui="ElementQuery" {...rest} ref={setElement} data-eq-max={max} data-eq-min={min}>
+      {children}
+    </Element>
+  )
+}

package/src/utils/elementQuery/__workshop__/CustomMedia.tsx

@@ -0,0 +1,19 @@
+import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+
+import {testCard} from './styles.css'
+
+export default function CustomMediaQuery(): React.JSX.Element {
+  return (
+    <Box padding={4}>
+      <Box marginBottom={4}>
+        <Text>Resize this frame to see the text color change:</Text>
+      </Box>
+
+      <ElementQuery media={[0, 100, 200, 300]}>
+        <Card className={testCard} padding={3} shadow={1}>
+          <Text>This card sits inside an element query.</Text>
+        </Card>
+      </ElementQuery>
+    </Box>
+  )
+}

package/src/utils/elementQuery/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'utils/elementQuery',
+  title: 'ElementQuery',
+  stories: [
+    {
+      name: 'custom-media',
+      title: 'Custom media',
+      component: lazy(() => import('./CustomMedia')),
+    },
+  ],
+}
+
+export default scope

package/src/utils/elementQuery/__workshop__/styles.css.ts

@@ -0,0 +1,31 @@
+import {vars} from '@sanity/ui/css'
+import {style} from '@vanilla-extract/css'
+
+export const testCard: string = style({
+  selectors: {
+    '[data-eq-min~="0"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.orange[600]}, ${vars.color.palette.orange[400]})`,
+      },
+    },
+    '[data-eq-min~="1"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.red[600]}, ${vars.color.palette.red[400]})`,
+      },
+    },
+    '[data-eq-min~="2"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.magenta[600]}, ${vars.color.palette.magenta[400]})`,
+      },
+    },
+    '[data-eq-min~="3"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.purple[600]}, ${vars.color.palette.purple[400]})`,
+      },
+    },
+  },
+})

package/src/utils/portal/Portal.test.tsx

@@ -0,0 +1,105 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
+
+import {PortalContext} from './PortalContext'
+import type {PortalContextValue} from './types'
+import {usePortal} from './usePortal'
+
+describe('utils/portal', () => {
+  describe('usePortal', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootPortal = usePortal()
+
+        log(rootPortal)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: PortalContextValue = {
+          version: 0.0,
+          boundaryElement: null,
+          element: null,
+        }
+
+        return (
+          <PortalContext value={value}>
+            <Debug />
+          </PortalContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        return (
+          <PortalContext
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </PortalContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+
+        return (
+          <PortalContext
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </PortalContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'usePortal(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/utils/portal/Portal.tsx

@@ -0,0 +1,42 @@
+import {type ReactNode, type ReactPortal, use} from 'react'
+import {createPortal} from 'react-dom'
+
+import {CardContext} from '../../primitives/card/CardContext'
+import {CardInternalProvider} from '../../primitives/card/CardInternalProvider'
+import {CardProvider} from '../../primitives/card/CardProvider'
+import {assertCardContext} from '../../primitives/card/useCard'
+import {usePortal} from './usePortal'
+
+/** @public */
+export interface PortalProps {
+  children: ReactNode
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string
+}
+
+/** @public */
+export function Portal(props: PortalProps): ReactPortal | null {
+  const {children, __unstable_name: name} = props
+  const portal = usePortal()
+  const portalElement =
+    (name ? portal.elements && portal.elements[name] : portal.element) ||
+    portal.elements?.['default']
+
+  if (!portalElement) {
+    return null
+  }
+
+  const card = use(CardContext)
+  assertCardContext(card)
+
+  return createPortal(
+    <CardInternalProvider root>
+      <CardProvider scheme={card.scheme} tone={card.tone}>
+        {children}
+      </CardProvider>
+    </CardInternalProvider>,
+    portalElement,
+  )
+}

package/src/utils/portal/PortalContext.ts

@@ -0,0 +1,37 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import {globalScope} from '../../core/lib/globalScope'
+import type {PortalContextValue} from './types'
+
+const key = '@sanity/ui/v4/portal'
+const elementKey = Symbol.for(`${key}/element`)
+
+// Use the global scope as a map of symbols to elements
+const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
+
+elementMap[elementKey] = null
+
+export const defaultContextValue: PortalContextValue = {
+  version: 0.0,
+  boundaryElement: null,
+  get element() {
+    if (typeof document === 'undefined') {
+      return null
+    }
+
+    if (elementMap[elementKey]) {
+      return elementMap[elementKey]
+    }
+
+    elementMap[elementKey] = document.createElement('div')
+    elementMap[elementKey].setAttribute('data-portal', '')
+
+    document.body.appendChild(elementMap[elementKey])
+
+    return elementMap[elementKey]
+  },
+}
+
+export const PortalContext: Context<PortalContextValue> =
+  createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)