@sanity/ui 3.3.2 → 3.3.4

package/src/core/components/toast/toastLayer.tsx

@@ -1,52 +0,0 @@
-import {styled} from 'styled-components'
-
-import {Grid} from '../../primitives/grid'
-import {useLayer} from '../../utils'
-
-/**
- * @public
- */
-export interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
-}
-
-/**
- * @internal
- */
-export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
-  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
-  const {zIndex} = useLayer()
-
-  return (
-    <StyledLayer
-      forwardedAs="ul"
-      data-ui="ToastProvider"
-      padding={padding}
-      paddingX={paddingX}
-      paddingY={paddingY}
-      gap={gap}
-      // oxlint-disable-next-line no-deprecated
-      columns={1}
-      style={{zIndex}}
-    >
-      {children}
-    </StyledLayer>
-  )
-}
-
-ToastLayer.displayName = 'ToastLayer'
-
-const StyledLayer = styled(Grid)`
-  box-sizing: border-box;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  list-style: none;
-  pointer-events: none;
-  max-width: 420px;
-  width: 100%;
-`

package/src/core/components/toast/toastProvider.tsx

@@ -1,113 +0,0 @@
-import {AnimatePresence} from 'motion/react'
-import {startTransition, useMemo, useState} from 'react'
-
-import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../utils'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
-import {generateToastId} from './toastState'
-import {ToastContextValue, ToastParams} from './types'
-
-type ToastState = {
-  dismiss: () => void
-  id: string
-  updatedAt: number
-  params: ToastParams
-}[]
-
-/**
- * @public
- */
-export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: number | number[]
-}
-
-/**
- * @public
- */
-export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
-  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
-  const [state, setState] = useState<ToastState>([])
-  const mounted = useMounted()
-
-  const value: ToastContextValue = useMemo(() => {
-    const push = (params: ToastParams) => {
-      const id = params.id || generateToastId()
-      const duration = params.duration || 5000
-
-      startTransition(() => {
-        setState((prevState): ToastState => {
-          /**
-           * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.
-           * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.
-           * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.
-           * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.
-           */
-          if (duration === 0.01) {
-            return prevState.filter((toast) => toast.id !== id)
-          }
-
-          /**
-           * Creates a function to dismiss this specific toast.
-           * This function will be passed to the Toast component
-           * and called either on close button click or after duration.
-           */
-          const dismiss = () =>
-            startTransition(() =>
-              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
-            )
-
-          /**
-           * Create updated state by:
-           * 1. Removing any existing toast with the same ID (prevents duplicates)
-           * 2. Adding the new toast with its dismiss handler
-           * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.
-           */
-          return [
-            ...prevState.filter((toast) => toast.id !== id),
-            {
-              dismiss,
-              id,
-              updatedAt: Date.now(),
-              params: {...params, duration},
-            },
-          ]
-        })
-      })
-
-      return id
-    }
-
-    return {version: 0.0, push}
-  }, [])
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-      {mounted && (
-        <LayerProvider zOffset={zOffset}>
-          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
-            <AnimatePresence initial={false} mode="popLayout">
-              {state.map(({dismiss, id, params, updatedAt}) => (
-                <Toast
-                  key={id}
-                  closable={params.closable}
-                  description={params.description}
-                  onClose={dismiss}
-                  status={params.status}
-                  title={params.title}
-                  duration={params.duration}
-                  updatedAt={updatedAt}
-                />
-              ))}
-            </AnimatePresence>
-          </ToastLayer>
-        </LayerProvider>
-      )}
-    </ToastContext.Provider>
-  )
-}
-
-ToastProvider.displayName = 'ToastProvider'

package/src/core/components/toast/toastState.ts

@@ -1,6 +0,0 @@
-let toastId = 0
-
-/** @internal */
-export function generateToastId(): string {
-  return String(toastId++)
-}

package/src/core/components/toast/types.ts

@@ -1,26 +0,0 @@
-/**
- * @public
- */
-export interface ToastParams {
-  closable?: boolean
-  description?: React.ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-}
-
-/**
- * @public
- */
-export interface ToastContextValue {
-  version: 0.0
-  /**
-   * Creates or updates a toast notification.
-   * If a toast with the same ID already exists, it will be updated.
-   * If an ID is not provided, a random one will be generated.
-   * The returned ID can be used to programatically update a toast.
-   */
-  push: (params: ToastParams) => string
-}

package/src/core/components/toast/useToast.ts

@@ -1,25 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
-
-/**
- * @public
- */
-export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
-
-  if (!value) {
-    throw new Error('useToast(): missing context value')
-  }
-
-  // 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 (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('useToast(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/core/components/tree/helpers.ts

@@ -1,105 +0,0 @@
-import {TreeState} from './types'
-
-export function _findPrevItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement,
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(0, idx)
-  const len = els.length
-
-  for (let i = len - 1; i >= 0; i -= 1) {
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _findNextItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement,
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(idx)
-  const len = itemElements.length
-
-  for (let i = 1; i < len; i += 1) {
-    if (!els[i]) {
-      continue
-    }
-
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _focusItemElement(el: HTMLElement): void {
-  if (el.getAttribute('role') === 'treeitem') {
-    el.focus()
-  }
-
-  if (el.getAttribute('role') === 'none') {
-    const firstChild = el.firstChild
-
-    if (firstChild && firstChild instanceof HTMLElement) {
-      firstChild.focus()
-    }
-  }
-}

package/src/core/components/tree/index.ts

@@ -1,4 +0,0 @@
-export * from './tree'
-export * from './treeItem'
-export * from './types'
-export * from './useTree'

package/src/core/components/tree/style.ts

@@ -1,105 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {rem, ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-
-export function treeItemRootStyle(): ReturnType<typeof css> {
-  return css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      background-color: var(--card-bg-color);
-      color: var(--treeitem-fg-color);
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `
-}
-
-export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-  const $tone = 'default'
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-  `
-}
-
-export interface TreeItemBoxStyleProps {
-  $level: number
-}
-
-export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$level} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}

package/src/core/components/tree/tree.test.tsx

@@ -1,60 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Stack} from '../../primitives'
-import {Tree} from './tree'
-import {TreeItem} from './treeItem'
-
-vi.mock('../../primitives', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../primitives')>()
-
-  return {
-    ...actual,
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    Stack: vi.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
-  }
-})
-
-describe('components/tree spacing', () => {
-  const mockedStack = vi.mocked(Stack)
-
-  beforeEach(() => {
-    mockedStack.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Tree space={2}>
-        <TreeItem text="Item 1" />
-      </Tree>,
-    )
-    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-
-    mockedStack.mockClear()
-    render(
-      <Tree gap={2}>
-        <TreeItem text="Item 1" />
-      </Tree>,
-    )
-    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Tree gap={3} space={1}>
-        <TreeItem text="Item 1" />
-      </Tree>,
-    )
-    const propsList = mockedStack.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
-    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
-  })
-})