@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/core/hooks/usePrefersDark.test.tsx

@@ -1,19 +0,0 @@
-/** @jest-environment node */
-import {renderToStaticMarkup, renderToString} from 'react-dom/server'
-
-import {usePrefersDark} from './usePrefersDark'
-
-function Log() {
-  const dark = usePrefersDark()
-
-  return <>dark: {JSON.stringify(dark)}</>
-}
-
-describe('usePrefersDark', () => {
-  it(`SSR to static markup returns false`, () => {
-    expect(renderToStaticMarkup(<Log />)).toBe('dark: false')
-  })
-  it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"dark: <!-- -->false"`)
-  })
-})

package/src/core/hooks/usePrefersDark.ts

@@ -1,16 +0,0 @@
-import {useMatchMedia} from './useMatchMedia'
-
-/**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
- * @public
- */
-export function usePrefersDark(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
-}

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,56 +0,0 @@
-/** @jest-environment jsdom */
-/**
- * As this hook is used for top-level theming it's likely to be called while server-rendering
- * and that's why it's worth it to have a testing suite for hydration
- */
-import {waitFor} from '@testing-library/dom'
-import {hydrateRoot} from 'react-dom/client'
-
-import {usePrefersReducedMotion} from './usePrefersReducedMotion'
-
-function Log() {
-  const reduceMotion = usePrefersReducedMotion()
-
-  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
-}
-
-const originalMatchMedia = window.matchMedia
-
-describe('usePrefersReducedMotion SSR hydration', () => {
-  beforeAll(() => {
-    window.matchMedia = () =>
-      ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        matches: true,
-      }) as any
-  })
-
-  afterAll(() => {
-    window.matchMedia = originalMatchMedia
-  })
-
-  it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
-
-    const node = document.createElement('div')
-
-    document.body.appendChild(node)
-
-    node.innerHTML = `prefers-motion: <!-- -->false`
-
-    hydrateRoot(node, <Log />)
-
-    // It's false initially
-    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->false'))
-
-    // After hydration it should switch to true
-    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->true'))
-
-    // eslint-disable-next-line no-console
-    expect(console.error).not.toHaveBeenCalled()
-
-    spy.mockReset()
-    spy.mockRestore()
-  })
-})

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,19 +0,0 @@
-/** @jest-environment node */
-import {renderToStaticMarkup, renderToString} from 'react-dom/server'
-
-import {usePrefersReducedMotion} from './usePrefersReducedMotion'
-
-function Log() {
-  const reduceMotion = usePrefersReducedMotion()
-
-  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
-}
-
-describe('usePrefersReducedMotion', () => {
-  it(`SSR to static markup returns false`, () => {
-    expect(renderToStaticMarkup(<Log />)).toBe('prefers-motion: false')
-  })
-  it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"prefers-motion: <!-- -->false"`)
-  })
-})

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,16 +0,0 @@
-import {useMatchMedia} from './useMatchMedia'
-
-/**
- * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
- * @public
- */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
-}

package/src/core/index.ts

@@ -1,10 +0,0 @@
-export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './styles'
-export * from './theme'
-export * from './types'
-export * from './utils'

package/src/core/middleware/origin.ts

@@ -1,47 +0,0 @@
-import {Middleware} from '@floating-ui/react-dom'
-
-/**
- * Custom floating-ui middleware which calculates transform-origin X + Y offsets
- * based on the current floating rect's dimensions and shift offset.
- *
- * Scaling popovers with these transform-origin offsets will give the effect of
- * popvers slightly 'growing' from the origin/reference element.
- *
- * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
- */
-export const origin: Middleware = {
-  name: '@sanity/ui/origin',
-  fn({middlewareData, placement, rects}) {
-    const [side] = placement.split('-')
-
-    const floatingWidth = rects.floating.width
-    const floatingHeight = rects.floating.height
-
-    const shiftX = middlewareData.shift?.x || 0
-    const shiftY = middlewareData.shift?.y || 0
-
-    if (floatingWidth <= 0 || floatingHeight <= 0) {
-      return {}
-    }
-
-    const isVerticalPlacement = ['bottom', 'top'].includes(side)
-
-    const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement
-      ? {
-          originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
-          originY: side === 'bottom' ? 0 : 1,
-        }
-      : {
-          originX: side === 'left' ? 1 : 0,
-          originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),
-        }
-
-    return {
-      data: {originX, originY},
-    }
-  },
-}
-
-function clamp(num: number, min: number, max: number) {
-  return Math.min(Math.max(num, min), max)
-}

package/src/core/observers/elementSizeObserver.ts

@@ -1,116 +0,0 @@
-import {_ResizeObserver} from './resizeObserver'
-
-/**
- * @beta
- */
-export interface ElementRectValue {
-  width: number
-  height: number
-}
-
-/**
- * @beta
- */
-export interface ElementSize {
-  content: ElementRectValue
-  border: ElementRectValue
-
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly
-}
-
-/**
- * @internal
- */
-export type _ElementSizeSubscriber = (elementRect: ElementSize) => void
-
-/**
- * @internal
- */
-export interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-// Initialize element size observer
-// NOTE: this should NOT have size effects
-/**
- * @internal
- */
-export const _elementSizeObserver = _createElementSizeObserver()
-
-function _createElementRectValueListener(): _ElementSizeListener {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver = new _ResizeObserver(([entry]) => {
-        subscriber({
-          _contentRect: entry.contentRect,
-          border: {
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize,
-          },
-          content: {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height,
-          },
-        })
-      })
-
-      resizeObserver.observe(element)
-
-      return () => {
-        resizeObserver.unobserve(element)
-        resizeObserver.disconnect()
-      }
-    },
-  }
-}
-
-function _createElementSizeObserver(): _ElementSizeObserver {
-  const disposeCache = new WeakMap<HTMLElement, () => void>()
-  const subscribersCache = new WeakMap<HTMLElement, _ElementSizeSubscriber[]>()
-
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || []
-
-      let dispose = disposeCache.get(element)
-
-      if (!subscribersCache.has(element)) {
-        subscribersCache.set(element, subscribers)
-
-        const listener = _createElementRectValueListener()
-
-        // listen
-        dispose = listener.subscribe(element, (elementRect) => {
-          for (const sub of subscribers) {
-            sub(elementRect)
-          }
-        })
-      }
-
-      subscribers.push(subscriber)
-
-      return () => {
-        // dispose
-
-        const idx = subscribers.indexOf(subscriber)
-
-        if (idx > -1) {
-          subscribers.splice(idx, 1)
-        }
-
-        if (subscribers.length === 0) {
-          // unlisten
-          if (dispose) dispose()
-        }
-      }
-    },
-  }
-}

package/src/core/observers/index.ts

@@ -1,2 +0,0 @@
-export * from './elementSizeObserver'
-export * from './resizeObserver'

package/src/core/observers/resizeObserver.ts

@@ -1,9 +0,0 @@
-import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
-
-/**
- * @internal
- */
-export const _ResizeObserver: typeof ResizeObserver =
-  typeof document !== 'undefined' && typeof window !== 'undefined' && window.ResizeObserver
-    ? window.ResizeObserver
-    : ResizeObserverPolyfill

package/src/core/primitives/_selectable/index.ts

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

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,15 +0,0 @@
-import {styled} from 'styled-components'
-
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle,
-)
-Selectable.displayName = 'Selectable'

package/src/core/primitives/_selectable/style.ts

@@ -1,115 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
-
-/**
- * @internal
- */
-export interface SelectableStyleProps {
-  $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): ReturnType<typeof css> {
-  return css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}
-
-export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$tone} = props
-  const {color, style} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    ${_cardColorStyle(color, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,14 +0,0 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -1,29 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/avatar',
-  title: 'Avatar',
-  stories: [
-    {
-      name: 'as-button',
-      title: 'As button',
-      component: lazy(() => import('./asButton')),
-    },
-    {
-      name: 'avatar-stack',
-      title: 'Avatar stack',
-      component: lazy(() => import('./stack')),
-    },
-    {
-      name: 'within-button',
-      title: 'Within button',
-      component: lazy(() => import('./withinButton')),
-    },
-    {
-      name: 'within-menu-item',
-      title: 'Within menu item',
-      component: lazy(() => import('./withinMenuItem')),
-    },
-  ],
-})

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,25 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
-        <AvatarCounter count={2} />
-        <Avatar color="magenta" initials="uq" />
-        <Avatar
-          color="purple"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-        <Avatar
-          color="blue"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-      </AvatarStack>
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,63 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
-        <Button disabled={disabled} padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Default button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Ghost button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Bleed button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-      </Stack>
-    </Container>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,70 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Layer>
-        <Box paddingX={4} paddingY={[5, 6, 7]}>
-          <Card radius={3} shadow={3}>
-            <Menu space={1}>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      </Layer>
-    </Container>
-  )
-}