@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/src/core/types.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
+
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
+
+/** @public */
+export type EmptyProps = {}
+
+/** @public */
+export type TagType = keyof JSX.IntrinsicElements
+
+/** @public */
+export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+
+/** @public */
+export type ElementType<P> = TagType | ComponentType<P>
+
+/** @public */
+export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {as?: E}
+>
+
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+
+/** @public */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

package/src/core/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/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -0,0 +1,19 @@
+import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
+import {useState} from 'react'
+
+export default function PlainStory(): React.JSX.Element {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Card padding={7} ref={setBoundaryElement}>
+      <BoundaryElementProvider element={boundaryElement}>
+        <Tooltip
+          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
+          placement="top"
+        >
+          <Button text={<>Hover me</>} />
+        </Tooltip>
+      </BoundaryElementProvider>
+    </Card>
+  )
+}

package/src/core/utils/boundaryElement/boundaryElement.test.tsx

@@ -0,0 +1,102 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
+
+import {BoundaryElementContext} from './boundaryElementContext'
+import type {BoundaryElementContextValue} from './types'
+import {useBoundaryElement} from './useBoundaryElement'
+
+describe('utils/boundaryElement', () => {
+  describe('useBoundaryElement', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: BoundaryElementContextValue = {
+          version: 0.0,
+          element: null,
+        }
+
+        return (
+          <BoundaryElementContext.Provider value={value}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should provide default value when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return null
+      }
+
+      function Root() {
+        return (
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useBoundaryElement()
+        } 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 (
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useBoundaryElement(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/core/utils/boundaryElement/boundaryElementContext.ts

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

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -0,0 +1,18 @@
+import {type ReactNode, useMemo} from 'react'
+
+import {BoundaryElementContext} from './boundaryElementContext'
+import type {BoundaryElementContextValue} from './types'
+
+/** @public */
+export interface BoundaryElementProviderProps {
+  children: ReactNode
+  element: HTMLElement | null
+}
+
+/** @public */
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
+  const {children, element} = props
+  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
+
+  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
+}

package/src/core/utils/boundaryElement/types.ts

@@ -0,0 +1,5 @@
+/** @public */
+export interface BoundaryElementContextValue {
+  version: 0.0
+  element: HTMLElement | null
+}

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -0,0 +1,24 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {BoundaryElementContext} from './boundaryElementContext'
+import type {BoundaryElementContextValue} from './types'
+
+const DEFAULT_VALUE: BoundaryElementContextValue = {
+  version: 0.0,
+  element: null,
+}
+
+/** @public */
+export function useBoundaryElement(): BoundaryElementContextValue {
+  const value = useContext(BoundaryElementContext)
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (value && (!isRecord(value) || value.version !== 0.0)) {
+    throw new Error('useBoundaryElement(): the context value is not compatible')
+  }
+
+  return value || DEFAULT_VALUE
+}

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -0,0 +1,41 @@
+import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {styled} from 'styled-components'
+
+const TestCard = styled(Card)`
+  [data-eq-min~='0'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
+      .palette.orange[400]});
+  }
+
+  [data-eq-min~='1'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
+      .red[400]});
+  }
+
+  [data-eq-min~='2'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
+      .palette.magenta[400]});
+  }
+
+  [data-eq-min~='3'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
+      .palette.purple[400]});
+  }
+`
+
+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]}>
+        <TestCard padding={3} shadow={1}>
+          <Text>This card sits inside an element query.</Text>
+        </TestCard>
+      </ElementQuery>
+    </Box>
+  )
+}

package/src/core/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/core/utils/elementQuery/elementQuery.tsx

@@ -0,0 +1,75 @@
+import {BREAKPOINTS} from '@sanity/ui/css'
+import {useImperativeHandle, useMemo, useState} from 'react'
+
+import {useElementSize} from '../../hooks/useElementSize'
+import type {ComponentType, Props} from '../../types'
+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} data-eq-max={max} data-eq-min={min} ref={setElement}>
+      {children}
+    </Element>
+  )
+}

package/src/core/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/core/utils/getElementRef.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/** @internal */
+// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+export function getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element as any).ref
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element.props as {ref?: React.Ref<unknown>}).ref
+  }
+
+  // Not DEV
+  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
+}

package/src/core/utils/portal/__workshop__/index.ts

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

package/src/core/utils/portal/__workshop__/named.tsx

@@ -0,0 +1,63 @@
+import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
+import {useMemo, useState} from 'react'
+
+export default function NamedStory(): React.JSX.Element {
+  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
+  const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
+  const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+      portal2: portal2Element,
+      portal3: portal3Element,
+    }),
+    [portal1Element, portal2Element, portal3Element],
+  )
+
+  return (
+    <PortalProvider __unstable_elements={__unstable_elements}>
+      <Container width={1}>
+        <Card height="fill" padding={4}>
+          <Stack gap={2}>
+            <Text size={1} weight="medium">
+              Portal 1
+            </Text>
+            <Card border padding={3} ref={setPortal1Element} />
+          </Stack>
+        </Card>
+        <Card height="fill" padding={4}>
+          <Stack gap={2}>
+            <Text size={1} weight="medium">
+              Portal 2
+            </Text>
+            <Card border padding={3} ref={setPortal2Element} />
+          </Stack>
+        </Card>
+        <Card height="fill" padding={4}>
+          <Stack gap={2}>
+            <Text size={1} weight="medium">
+              Portal 3
+            </Text>
+            <Card border padding={3} ref={setPortal3Element} />
+          </Stack>
+        </Card>
+      </Container>
+
+      <Portal __unstable_name="portal1">
+        <Text>Portal 1</Text>
+      </Portal>
+
+      <Portal __unstable_name="portal2">
+        <Text>Portal 2</Text>
+      </Portal>
+
+      <Portal __unstable_name="portal3">
+        <Text>Portal 3A</Text>
+      </Portal>
+
+      <Portal __unstable_name="portal3">
+        <Text>Portal 3B</Text>
+      </Portal>
+    </PortalProvider>
+  )
+}

package/src/core/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.Provider value={value}>
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      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.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      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.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'usePortal(): the context value is not compatible',
+      )
+    })
+  })
+})