@sanity/ui 3.3.2 → 3.3.4

package/src/core/components/tab/tab.tsx

@@ -1,102 +0,0 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  // oxlint-disable-next-line no-redundant-type-constituents
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
-}
-
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    icon,
-    id,
-    focused,
-    fontSize = 1,
-    label,
-    onClick,
-    onFocus,
-    padding = 2,
-    selected,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  const handleBlur = useCallback(() => {
-    focusedRef.current = false
-  }, [])
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-    },
-    [onFocus],
-  )
-
-  useEffect(() => {
-    if (focused && !focusedRef.current) {
-      if (ref.current) ref.current.focus()
-      focusedRef.current = true
-    }
-  }, [focused])
-
-  return (
-    <CustomButton
-      data-ui="Tab"
-      {...restProps}
-      aria-selected={selected ? 'true' : 'false'}
-      fontSize={fontSize}
-      icon={icon}
-      id={id}
-      mode="bleed"
-      onClick={onClick}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      padding={padding}
-      ref={ref}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-    />
-  )
-})
-Tab.displayName = 'ForwardRef(Tab)'

package/src/core/components/tab/tabList.test.tsx

@@ -1,50 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {inlineSpaceStyle} from '../../primitives/inline/styles'
-import {Tab} from './tab'
-import {TabList} from './tabList'
-
-vi.mock('../../primitives/inline/styles', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../primitives/inline/styles')>()
-
-  return {
-    ...actual,
-    inlineSpaceStyle: vi.fn(actual.inlineSpaceStyle),
-  }
-})
-
-describe('components/tabList', () => {
-  const mockedInlineSpaceStyle = vi.mocked(inlineSpaceStyle)
-
-  beforeEach(() => {
-    mockedInlineSpaceStyle.mockClear()
-  })
-
-  function renderTabList(
-    props: Partial<React.ComponentProps<typeof TabList>> = {},
-  ): ReturnType<typeof render> {
-    return render(
-      <TabList {...props}>
-        <Tab aria-controls="tab-panel-a" id="tab-a" label="Tab A" />
-        <Tab aria-controls="tab-panel-b" id="tab-b" label="Tab B" />
-      </TabList>,
-    )
-  }
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    renderTabList({space: 2})
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-
-    mockedInlineSpaceStyle.mockClear()
-    renderTabList({gap: 2})
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    renderTabList({gap: 3, space: 1})
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
-  })
-})

package/src/core/components/tab/tabList.tsx

@@ -1,71 +0,0 @@
-import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Inline, InlineOwnProps} from '../../primitives'
-
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineOwnProps, 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
-}
-
-//Limits the width of tabs in tablist
-const CustomInline = styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`
-
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref,
-) {
-  const {children: childrenProp, ...restProps} = props
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-
-  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
-
-  const tabs = children.map((child, childIndex) =>
-    cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex),
-    }),
-  )
-
-  const numTabs = tabs.length
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
-      }
-
-      if (event.key === 'ArrowRight') {
-        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
-      }
-    },
-    [numTabs],
-  )
-
-  return (
-    // oxlint-disable-next-line interactive-supports-focus
-    <CustomInline
-      data-ui="TabList"
-      {...restProps}
-      onKeyDown={handleKeyDown}
-      ref={ref}
-      role="tablist"
-    >
-      {tabs}
-    </CustomInline>
-  )
-})
-TabList.displayName = 'ForwardRef(TabList)'

package/src/core/components/tab/tabPanel.tsx

@@ -1,39 +0,0 @@
-import {forwardRef} from 'react'
-
-import {Box, BoxOwnProps} from '../../primitives'
-
-/**
- * @public
- */
-export interface TabPanelProps extends BoxOwnProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/**
- * @public
- */
-export const TabPanel = forwardRef(function TabPanel(
-  props: TabPanelProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {flex, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="TabPanel"
-      {...restProps}
-      flex={flex}
-      ref={ref}
-      role="tabpanel"
-      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
-    >
-      {props.children}
-    </Box>
-  )
-})
-TabPanel.displayName = 'ForwardRef(TabPanel)'

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

@@ -1,4 +0,0 @@
-export * from './toast'
-export * from './toastProvider'
-export * from './types'
-export * from './useToast'

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

@@ -1,77 +0,0 @@
-import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
-
-import {Card, type CardProps, Flex} from '../../primitives'
-import type {ButtonTone} from '../../types'
-
-const LOADING_BAR_HEIGHT = 2
-
-export const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
-
-export const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
-export const TextBox = styled(Flex)`
-  overflow-x: auto;
-`
-
-export const StyledToast = styled(Card)`
-  pointer-events: all;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  overflow: clip;
-
-  &[data-has-duration] {
-    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
-  }
-`
-
-export const LoadingBar = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: 0px;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  pointer-events: none;
-  z-index: -1;
-  overflow: hidden;
-  overflow: clip;
-  background: transparent;
-  align-items: flex-end;
-  will-change: opacity;
-`
-
-export const LoadingBarMask = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: -${LOADING_BAR_HEIGHT}px;
-  right: -${LOADING_BAR_HEIGHT}px;
-  bottom: ${LOADING_BAR_HEIGHT}px;
-  z-index: 1;
-`
-
-type LoadingBarProgressProps = Omit<CardProps, 'tone'> & {
-  tone: ThemeColorStateToneKey
-}
-export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
-  display: block;
-  height: 100%;
-  width: 100%;
-  transform-origin: 0% 50%;
-  background-color: ${(props) => {
-    const {color} = getTheme_v2(props.theme)
-
-    return color.button.default[props.tone].enabled.bg
-  }};
-`

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

@@ -1,106 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
-import {useToast} from './useToast'
-
-describe('components/toast', () => {
-  describe('useToast', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootToast = useToast()
-
-        log(rootToast)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: ToastContextValue = {
-          version: 0.0,
-          push: () => '',
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values
-          <ToastContext.Provider value={value}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(typeof log.mock.calls[0][0].push).toBe('function')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useToast()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          // oxlint-disable-next-line no-unsafe-type-assertion
-          <ToastContext.Provider value={value as any}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useToast(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useToast()
-        } 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 (
-          // oxlint-disable-next-line jsx-no-constructed-context-values, no-unsafe-type-assertion
-          <ToastContext.Provider value={value as any}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useToast(): the context value is not compatible',
-      )
-    })
-  })
-})

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

@@ -1,199 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {motion, type Variant, type Variants} from 'motion/react'
-
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box, Button, Flex, Stack, Text} from '../../primitives'
-import {
-  BUTTON_TONE,
-  LoadingBar,
-  LoadingBarMask,
-  LoadingBarProgress,
-  STATUS_CARD_TONE,
-  StyledToast,
-  TextBox,
-} from './styles'
-
-/**
- * @public
- */
-export interface ToastProps {
-  closable?: boolean
-  description?: React.ReactNode
-  onClose: () => void
-  radius?: number | number[]
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-  updatedAt?: number
-}
-
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-} as const
-
-// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
-// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
-const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
-
-/**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
- *
- * @public
- */
-export function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
-): React.JSX.Element {
-  const {
-    closable,
-    description,
-    duration,
-    onClose,
-    radius = 3,
-    title,
-    status,
-    updatedAt,
-    ...restProps
-  } = props
-  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
-  const buttonTone = status ? BUTTON_TONE[status] : 'default'
-  const role = status ? ROLES[status] : 'status'
-
-  const prefersReducedMotion = usePrefersReducedMotion()
-
-  const visualDuration: number = prefersReducedMotion ? 0 : 0.26
-  const transition = visualDuration
-    ? {type: 'spring' as const, visualDuration, bounce: 0.25}
-    : {duration: 0}
-
-  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
-  const initial: ContainerVariants[] = ['hidden', 'initial']
-  const animate: ContainerVariants[] = ['visible', 'slideIn']
-  const exit: ContainerVariants[] = ['hidden', 'slideOut']
-
-  return (
-    <MotionToast
-      data-ui="Toast"
-      role={role}
-      {...restProps}
-      data-has-duration={hasDuration ? '' : undefined}
-      custom={visualDuration}
-      radius={radius}
-      shadow={2}
-      tone={cardTone}
-      forwardedAs="li"
-      layout="position"
-      variants={container}
-      initial={initial}
-      animate={animate}
-      exit={exit}
-      transition={transition}
-    >
-      <MotionFlex align="flex-start" variants={content} transition={transition}>
-        <TextBox flex={1} padding={3}>
-          {/* oxlint-disable-next-line no-deprecated */}
-          <Stack space={3}>
-            {title && (
-              <Text size={1} weight="medium">
-                {title}
-              </Text>
-            )}
-            {description && (
-              <MotionText muted size={1} variants={content} transition={transition}>
-                {description}
-              </MotionText>
-            )}
-          </Stack>
-        </TextBox>
-
-        {closable && (
-          <Box padding={1}>
-            <Button
-              as="button"
-              icon={CloseIcon}
-              mode="bleed"
-              padding={2}
-              tone={buttonTone}
-              onClick={onClose}
-              style={{verticalAlign: 'top'}}
-            />
-          </Box>
-        )}
-      </MotionFlex>
-      {hasDuration && (
-        <MotionLoadingBar variants={content} transition={transition}>
-          <LoadingBarMask tone={cardTone} radius={radius} />
-          <MotionLoadingBarProgress
-            key={`progress-${updatedAt}`}
-            tone={cardTone}
-            initial={{scaleX: 0}}
-            animate={{scaleX: 1}}
-            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
-            onAnimationComplete={onClose}
-          />
-        </MotionLoadingBar>
-      )}
-    </MotionToast>
-  )
-}
-
-Toast.displayName = 'Toast'
-
-const container = {
-  initial: {y: 32, scale: 0.5, zIndex: 1},
-  hidden: {opacity: 0},
-  visible: (visualDuration: number) => {
-    if (!visualDuration) return {opacity: 1}
-
-    return {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        staggerChildren: visualDuration / 3,
-        duration: visualDuration / 3,
-      },
-    }
-  },
-  slideIn: {
-    y: 0,
-    scale: 1,
-  },
-  slideOut: {
-    zIndex: 0,
-    scale: 0.75,
-  },
-} satisfies Variants
-type ContainerVariants = keyof typeof container
-
-const content = {
-  initial: {
-    willChange: 'transform',
-  },
-  hidden: {
-    opacity: 0,
-  },
-  visible: {
-    opacity: 1,
-  },
-} satisfies Partial<Record<ContainerVariants, Variant>>
-
-const MotionToast = motion.create(StyledToast)
-const MotionFlex = motion.create(Flex)
-const MotionText = motion.create(Text)
-const MotionLoadingBar = motion.create(LoadingBar)
-const MotionLoadingBarProgress = motion.create(LoadingBarProgress)

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

@@ -1,7 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ToastContextValue} from './types'
-
-export const ToastContext = createGlobalScopedContext<ToastContextValue | null>(
-  '@sanity/ui/context/toast',
-  null,
-)