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

package/src/core/theme/themeProvider.tsx

@@ -1,63 +0,0 @@
-import {
-  type RootTheme,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-  type Theme,
-  getScopedTheme,
-} from '@sanity/ui/theme'
-import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from '../lib/styled'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorCardToneKey
-}
-
-/**
- * @public
- */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
-  const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
-
-  const themeContext: ThemeContextValue | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return {
-      version: 0.0,
-      theme: rootTheme,
-      scheme,
-      tone,
-    }
-  }, [rootTheme, scheme, tone])
-
-  const theme: Theme | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return getScopedTheme(rootTheme, scheme, tone)
-  }, [scheme, rootTheme, tone])
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <ThemeContext.Provider value={themeContext}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-    </ThemeContext.Provider>
-  )
-}
-
-ThemeProvider.displayName = 'ThemeProvider'

package/src/core/theme/useRootTheme.ts

@@ -1,16 +0,0 @@
-import {useContext} from 'react'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export function useRootTheme(): ThemeContextValue {
-  const value = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  return value as unknown as ThemeContextValue
-}

package/src/core/theme/useTheme.ts

@@ -1,16 +0,0 @@
-import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from '../lib/styled'
-
-/**
- * @public
- */
-export function useTheme(): Theme {
-  return useStyledTheme() as Theme
-}
-
-/**
- * @public
- */
-export function useTheme_v2(): Theme_v2 {
-  return getTheme_v2(useStyledTheme() as Theme)
-}

package/src/core/types/box.ts

@@ -1,19 +0,0 @@
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/**
- * @public
- */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
-
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/core/types/button.ts

@@ -1,22 +0,0 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type ButtonMode = ThemeColorButtonModeKey
-
-/**
- * @public
- */
-export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- */
-export type ButtonTone = ThemeColorStateToneKey
-
-/**
- * @public
- * @deprecated Use `Width` from `@sanity/ui/css` instead.
- */
-export type ButtonWidth = 'fill'

package/src/core/types/flex.ts

@@ -1,31 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexAlign,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexDirection,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexJustify,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexValue,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexWrap,
-} from '@sanity/ui/css'

package/src/core/types/grid.ts

@@ -1,14 +0,0 @@
-/**
- * @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/core/types/gridItem.ts

@@ -1,37 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumn,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumnStart,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumnEnd,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRow,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRowStart,
-
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRowEnd,
-} from '@sanity/ui/css'

package/src/core/types/index.ts

@@ -1,14 +0,0 @@
-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 './placement'
-export * from './popover'
-export * from './radius'
-export * from './selectable'
-export * from './text'

package/src/core/types/selectable.ts

@@ -1,6 +0,0 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type SelectableTone = ThemeColorStateToneKey

package/src/core/types/text.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

package/src/core/utils/arrow/arrow.tsx

@@ -1,122 +0,0 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import {styled, css} from '../../lib/styled'
-import {useTheme_v2} from '../../theme'
-import {Point, compileCommands, getRoundedCommands} from './cmds'
-
-const Root = styled.div<{$w: number}>(
-  ({$w: w}) => css`
-    position: absolute;
-    width: ${w}px;
-    height: ${w}px;
-
-    :empty + & {
-      display: none;
-    }
-
-    & > svg {
-      display: block;
-      line-height: 0;
-      transform-origin: ${w / 2}px ${w / 2}px;
-    }
-
-    [data-placement^='top'] > & {
-      bottom: -${w}px;
-
-      & > svg {
-        transform: rotate(0);
-      }
-    }
-
-    [data-placement^='right'] > & {
-      left: -${w}px;
-
-      & > svg {
-        transform: rotate(90deg);
-      }
-    }
-
-    [data-placement^='left'] > & {
-      right: -${w}px;
-
-      & > svg {
-        transform: rotate(-90deg);
-      }
-    }
-
-    [data-placement^='bottom'] > & {
-      top: -${w}px;
-
-      & > svg {
-        transform: rotate(180deg);
-      }
-    }
-  `,
-)
-
-const StrokePath = styled.path`
-  stroke: var(--card-shadow-outline-color);
-`
-
-const ShapePath = styled.path`
-  fill: var(--card-bg-color);
-`
-
-/** @internal */
-export const Arrow = forwardRef(function Arrow(
-  props: {width: number; height: number; radius?: number} & Omit<
-    HTMLProps<HTMLDivElement>,
-    'width' | 'height'
-  >,
-  ref: ForwardedRef<HTMLDivElement>,
-): ReactElement {
-  const {width: w, height: h, radius = 0, ...restProps} = props
-  const {card} = useTheme_v2()
-  const strokeWidth = card.shadow.outline
-
-  const center = w / 2
-
-  const points: Point[] = [
-    {
-      x: 0,
-      y: 0,
-    },
-    {
-      x: radius,
-      y: 0,
-      radius,
-    },
-    {
-      x: center,
-      y: h - 1,
-      radius,
-    },
-    {
-      x: w - radius,
-      y: 0,
-      radius,
-    },
-    {
-      x: w,
-      y: 0,
-    },
-  ]
-
-  const cmds = getRoundedCommands(points)
-  const path = compileCommands(cmds)
-
-  const strokePath = `${path}`
-  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
-
-  return (
-    <Root {...restProps} $w={w} ref={ref}>
-      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
-        <mask id="stroke-mask">
-          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
-        </mask>
-        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
-        <ShapePath d={fillPath} />
-      </svg>
-    </Root>
-  )
-})
-Arrow.displayName = 'ForwardRef(Arrow)'

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

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

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

@@ -1,101 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-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/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,23 +0,0 @@
-import {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>
-}
-
-BoundaryElementProvider.displayName = 'BoundaryElementProvider'

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

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

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

@@ -1,25 +0,0 @@
-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/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,21 +0,0 @@
-/**
- * @internal
- * @deprecated this component will be removed in the next major release
- */
-export function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: React.ReactNode
-  condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode {
-  if (!condition) {
-    return children
-  }
-
-  return wrapper(children)
-}
-
-ConditionalWrapper.displayName = 'ConditionalWrapper'

package/src/core/utils/elementQuery/__workshop__/.eslintrc

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

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

@@ -1,30 +0,0 @@
-import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
-
-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/core/utils/elementQuery/elementQuery.tsx

@@ -1,53 +0,0 @@
-import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {useElementSize} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-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'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const theme = useTheme_v2()
-  const {children, media = theme.media, ...restProps} = props
-
-  const ref = useRef<HTMLDivElement | null>(null)
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const elementSize = useElementSize(element)
-  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
-
-  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
-  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setElement(el)
-  }, [])
-
-  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>
-  )
-})
-ElementQuery.displayName = 'ForwardRef(ElementQuery)'