@sanity/ui 0.37.3 → 0.37.4

package/src/types/flex.ts

@@ -0,0 +1,30 @@
+/**
+ * @public
+ */
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+export type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+export type FlexValue = number | 'none'
+
+/**
+ * @public
+ */
+export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'

package/src/types/grid.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'

package/src/types/gridItem.ts

@@ -0,0 +1,29 @@
+/**
+ * @public
+ */
+export type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRowEnd = 'auto' | number

package/src/types/index.ts

@@ -0,0 +1,13 @@
+export * from './common'
+
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './dialog'
+export * from './flex'
+export * from './grid'
+export * from './gridItem'
+export * from './popover'
+export * from './selectable'

package/src/types/popover.ts

@@ -0,0 +1,4 @@
+/**
+ * @beta
+ */
+export type PopoverMargins = [number, number, number, number]

package/src/types/selectable.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type SelectableTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/utils/boundaryElement/__workshop__/.eslintrc

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

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

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

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

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

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

@@ -0,0 +1,99 @@
+import React from 'react'
+import {render} from '../../../test'
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+import {useBoundaryElement} from './useBoundaryElement'
+
+describe('utils/boundaryElement', () => {
+  describe('useBoundaryElement', () => {
+    it('should get context value', async () => {
+      const log = jest.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 = jest.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <BoundaryElementContext.Provider value={value as any}>
+            <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 = jest.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
+        const value = () => {
+          return {version: 1}
+        }
+
+        return (
+          <BoundaryElementContext.Provider value={value as any}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useBoundaryElement(): the context value is not compatible'
+      )
+    })
+  })
+})

package/src/utils/boundaryElement/boundaryElementContext.ts

@@ -0,0 +1,10 @@
+import {createContext} from 'react'
+import {globalScope} from '../../lib/globalScope'
+import {BoundaryElementContextValue} from './types'
+
+const key = Symbol.for('@sanity/ui/context/boundaryElement')
+
+globalScope[key] = globalScope[key] || createContext<BoundaryElementContextValue | null>(null)
+
+export const BoundaryElementContext: React.Context<BoundaryElementContextValue | null> =
+  globalScope[key]

package/src/utils/boundaryElement/boundaryElementProvider.tsx

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

package/src/utils/boundaryElement/index.ts

@@ -0,0 +1,3 @@
+export * from './boundaryElementProvider'
+export * from './useBoundaryElement'
+export * from './types'

package/src/utils/boundaryElement/types.ts

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

package/src/utils/boundaryElement/useBoundaryElement.ts

@@ -0,0 +1,25 @@
+import {useContext} from 'react'
+import {isRecord} from '../../lib/isRecord'
+import {BoundaryElementContext} from './boundaryElementContext'
+import {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/utils/elementQuery/__workshop__/.eslintrc

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

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

@@ -0,0 +1,31 @@
+import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import React from 'react'
+import styled from 'styled-components'
+
+const TestCard = styled(Card)`
+  --card-fg-color: orange;
+
+  [data-eq-min~='0'] > & {
+    --card-fg-color: green;
+  }
+
+  [data-eq-min~='1'] > & {
+    --card-fg-color: blue;
+  }
+`
+
+export default function CustomMediaQuery() {
+  return (
+    <Box padding={[3, 4, 5]}>
+      <Box marginBottom={[3, 4, 5]}>
+        <Text>Resize this frame to see the text color change:</Text>
+      </Box>
+
+      <ElementQuery media={[100, 200, 300]}>
+        <TestCard padding={2} shadow={1}>
+          <Text>This card sits inside an element query.</Text>
+        </TestCard>
+      </ElementQuery>
+    </Box>
+  )
+}

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

@@ -0,0 +1,10 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('utils/elementQuery', 'ElementQuery', [
+  {
+    name: 'custom-media',
+    title: 'Custom media',
+    component: lazy(() => import('./customMedia')),
+  },
+])

package/src/utils/elementQuery/elementQuery.tsx

@@ -0,0 +1,66 @@
+import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import {useForwardedRef} from '../../hooks'
+import {useTheme} from '../../theme'
+import {ResizeObserver} from '../resizeObserver'
+import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface MediaQueryProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  media?: number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const ElementQuery = forwardRef(function ElementQuery(
+  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const theme = useTheme()
+  const {children, media = theme.sanity.media, ...restProps} = props
+  const [width, setWidth] = useState(() => window.innerWidth)
+  const forwardedRef = useForwardedRef(ref)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!element) return
+
+    const handleResizeEntries: ResizeObserverCallback = (entries) => {
+      setWidth(entries[0].contentRect.width)
+    }
+
+    const ro = new ResizeObserver(handleResizeEntries)
+
+    ro.observe(element)
+
+    return () => ro.disconnect()
+  }, [element])
+
+  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
+  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      forwardedRef.current = el
+      setElement(el)
+    },
+    [forwardedRef]
+  )
+
+  return (
+    <div
+      data-ui="ElementQuery"
+      {...restProps}
+      data-eq-max={max.length ? max.join(' ') : undefined}
+      data-eq-min={min.length ? min.join(' ') : undefined}
+      ref={setRef}
+    >
+      {children}
+    </div>
+  )
+})

package/src/utils/elementQuery/helpers.ts

@@ -0,0 +1,27 @@
+export function findMaxBreakpoints(media: number[], width: number): number[] {
+  const ret: number[] = []
+
+  for (let i = 0; i < media.length; i += 1) {
+    const bp = media[i]
+
+    if (bp > width) {
+      ret.push(i)
+    }
+  }
+
+  return ret
+}
+
+export function findMinBreakpoints(media: number[], width: number): number[] {
+  const ret: number[] = []
+
+  for (let i = 0; i < media.length; i += 1) {
+    const bp = media[i]
+
+    if (bp <= width) {
+      ret.push(i)
+    }
+  }
+
+  return ret
+}

package/src/utils/elementQuery/index.ts

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

package/src/utils/errorBoundary.tsx

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

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './boundaryElement'
+export * from './elementQuery'
+export * from './errorBoundary'
+export * from './layer'
+export * from './portal'
+export * from './resizeObserver'
+export * from './srOnly'
+export * from './virtualList'

package/src/utils/layer/__workshop__/.eslintrc

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

package/src/utils/layer/__workshop__/_debug.tsx

@@ -0,0 +1,12 @@
+import {Code, useLayer} from '@sanity/ui'
+import React from 'react'
+
+export function LayerDebugInfo() {
+  const layer = useLayer()
+
+  return (
+    <Code>
+      zIndex={layer.zIndex}, size={layer.size}
+    </Code>
+  )
+}

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

@@ -0,0 +1,20 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('utils/layer', 'Layer', [
+  {
+    name: 'plain',
+    title: 'Plain',
+    component: lazy(() => import('./plain')),
+  },
+  {
+    name: 'multiple-roots',
+    title: 'Multiple roots',
+    component: lazy(() => import('./multipleRoots')),
+  },
+  {
+    name: 'responsive-z-offset',
+    title: 'Responsive z-offset',
+    component: lazy(() => import('./responsiveZOffset')),
+  },
+])

package/src/utils/layer/__workshop__/multipleRoots.tsx

@@ -0,0 +1,48 @@
+import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
+import React from 'react'
+import {LayerDebugInfo} from './_debug'
+
+export default function MultipleRootsStory() {
+  return (
+    <Stack space={4}>
+      <LayerProvider zOffset={100}>
+        <Card padding={3} shadow={1}>
+          <Stack space={3}>
+            <LayerDebugInfo />
+            <Layer>
+              <Card padding={3} shadow={1}>
+                <Stack space={3}>
+                  <LayerDebugInfo />
+                  <Layer>
+                    <Card padding={3} shadow={1}>
+                      <LayerDebugInfo />
+                    </Card>
+                  </Layer>
+                </Stack>
+              </Card>
+            </Layer>
+          </Stack>
+        </Card>
+      </LayerProvider>
+      <LayerProvider zOffset={200}>
+        <Card as={Layer as any} padding={3} shadow={5} style={{top: -50, left: 30}}>
+          <Stack space={3}>
+            <LayerDebugInfo />
+            <Layer>
+              <Card padding={3} shadow={1}>
+                <Stack space={3}>
+                  <LayerDebugInfo />
+                  <Layer>
+                    <Card padding={3} shadow={1}>
+                      <LayerDebugInfo />
+                    </Card>
+                  </Layer>
+                </Stack>
+              </Card>
+            </Layer>
+          </Stack>
+        </Card>
+      </LayerProvider>
+    </Stack>
+  )
+}