@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

package/src/core/components/menu/useMenu.ts

@@ -0,0 +1,21 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {MenuContext, type MenuContextValue} from './menuContext'
+
+export function useMenu(): MenuContextValue {
+  const value = useContext(MenuContext)
+
+  if (!value) {
+    throw new Error('useMenu(): 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('useMenu(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/core/components/menu/useMenuController.ts

@@ -0,0 +1,241 @@
+import {
+  type KeyboardEvent,
+  type KeyboardEventHandler,
+  type MouseEvent,
+  type MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {_getFocusableElements, _sortElements} from './helpers'
+
+/**
+ * @internal
+ */
+export interface MenuController {
+  activeElement: HTMLElement | null
+  activeIndex: number
+  handleItemMouseEnter: (event: MouseEvent<HTMLElement>) => void
+  handleItemMouseLeave: () => void
+  handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
+  mount: (element: HTMLElement | null, selected?: boolean) => () => void
+}
+
+/**
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
+ */
+export function useMenuController(props: {
+  onKeyDown?: KeyboardEventHandler
+  originElement?: HTMLElement | null
+  shouldFocus: 'first' | 'last' | null
+  rootElementRef: MutableRefObject<HTMLDivElement | null>
+}): MenuController {
+  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
+  const elementsRef = useRef<HTMLElement[]>([])
+  const [activeIndex, _setActiveIndex] = useState(-1)
+  const activeIndexRef = useRef(activeIndex)
+  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
+  const mounted = Boolean(rootElementRef.current)
+
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
+    _setActiveIndex(nextActiveIndex)
+    activeIndexRef.current = nextActiveIndex
+  }, [])
+
+  const mount = useCallback(
+    (element: HTMLElement | null, selected?: boolean): (() => void) => {
+      if (!element) return () => undefined
+
+      if (elementsRef.current.indexOf(element) === -1) {
+        elementsRef.current.push(element)
+        _sortElements(rootElementRef.current, elementsRef.current)
+      }
+
+      if (selected) {
+        const selectedIndex = elementsRef.current.indexOf(element)
+
+        setActiveIndex(selectedIndex)
+      }
+
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
+
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
+      }
+    },
+    [rootElementRef, setActiveIndex],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      // Move focus to the element that opened the menu before handling the `Tab` press
+      if (event.key === 'Tab') {
+        if (originElement) {
+          originElement.focus()
+        }
+
+        return
+      }
+
+      // Move focus to the first focusable menuitem
+      if (event.key === 'Home') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[0]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      // Move focus to the last focusable menuitem
+      if (event.key === 'End') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[focusableElements.length - 1]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex + 1) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    },
+    [onKeyDown, originElement, setActiveIndex],
+  )
+
+  const handleItemMouseEnter = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      const element = event.currentTarget
+      const currentIndex = elementsRef.current.indexOf(element)
+
+      setActiveIndex(currentIndex)
+    },
+    [setActiveIndex],
+  )
+
+  const handleItemMouseLeave = useCallback(() => {
+    // Set the active index to -2 to deactivate all menu items
+    // when the user moves the mouse away from the menu item.
+    // We avoid using -1 because it would focus the first menu item,
+    // which would be incorrect when the user hovers over a gap
+    // between two menu items or a menu divider.
+    setActiveIndex(-2)
+    rootElementRef.current?.focus()
+  }, [rootElementRef, setActiveIndex])
+
+  // Set focus on the currently active element
+  useEffect(() => {
+    if (!mounted) return
+
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
+        if (shouldFocus === 'first') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[0]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+          }
+        }
+
+        if (shouldFocus === 'last') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[focusableElements.length - 1]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+          }
+        }
+
+        return
+      }
+
+      const element = elementsRef.current[activeIndex] || null
+
+      element?.focus()
+    })
+
+    return () => cancelAnimationFrame(rafId)
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+  }
+}

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

@@ -0,0 +1,79 @@
+import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
+import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useState} from 'react'
+
+export default function ExampleStory(): React.JSX.Element {
+  const [tab, setTab] = useState('foo')
+  const useLongTitle = useBoolean('Use long title', false)
+
+  const longTitle =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <TabList gap={[1, 2, 3]}>
+        <Tab
+          aria-controls="example-panel-foo"
+          icon={SunIcon}
+          id="example-tab-foo"
+          label="Foo"
+          onClick={() => setTab('foo')}
+          selected={tab === 'foo'}
+        />
+        <Tab
+          aria-controls="example-panel-bar"
+          icon={RocketIcon}
+          id="example-tab-bar"
+          label="Bar"
+          onClick={() => setTab('bar')}
+          selected={tab === 'bar'}
+        />
+        <Tab
+          aria-controls="example-panel-baz"
+          icon={OkHandIcon}
+          id="example-tab-baz"
+          label={useLongTitle ? longTitle : 'Baz'}
+          onClick={() => setTab('baz')}
+          selected={tab === 'baz'}
+        />
+      </TabList>
+      <TabPanel
+        aria-labelledby="example-panel-foo"
+        hidden={tab !== 'foo'}
+        id="example-panel-foo"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Foo</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+      <TabPanel
+        aria-labelledby="example-panel-bar"
+        hidden={tab !== 'bar'}
+        id="example-panel-bar"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Bar</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+      <TabPanel
+        aria-labelledby="example-panel-baz"
+        hidden={tab !== 'baz'}
+        id="example-panel-baz"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Baz</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+    </Box>
+  )
+}

package/src/core/components/tab/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'components/tab',
+  title: 'Tab',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,109 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {ElementTone, FontTextSize, Space} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  type FocusEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
+import {Button} from '../../primitives/button/button'
+import type {ComponentType, Props} from '../../types'
+
+/** @public */
+export const DEFAULT_TAB_ELEMENT = 'button'
+
+/** @public */
+export type TabOwnProps = {
+  /**
+   * The `id` of the corresponding `TabPanel` component.
+   */
+  'aria-controls': string
+  'id': string
+  'icon'?: ElementType | ReactNode
+  'focused'?: boolean
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
+  'selected'?: boolean
+  'tone'?: ElementTone
+}
+
+/** @public */
+export type TabElementType = 'button' | ComponentType
+
+/** @public */
+export type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
+
+/** @public */
+export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TAB_ELEMENT,
+    icon,
+    id,
+    focused,
+    fontSize = 1,
+    label,
+    onClick,
+    onFocus,
+    padding = 2,
+    ref: forwardedRef,
+    selected,
+    ...rest
+  } = props as TabProps<typeof DEFAULT_TAB_ELEMENT>
+
+  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: 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 (
+    <Button
+      data-ui="Tab"
+      {...rest}
+      aria-selected={selected ? 'true' : 'false'}
+      as={as}
+      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"
+    />
+  )
+}

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

@@ -0,0 +1,90 @@
+import {
+  Children,
+  cloneElement,
+  type KeyboardEvent,
+  type ReactElement,
+  useCallback,
+  useState,
+} from 'react'
+
+import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
+import type {ComponentType, Props} from '../../types'
+import type {TabProps} from './tab'
+
+/** @public */
+export const DEFAULT_TAB_LIST_ELEMENT = 'div'
+
+/** @public */
+export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
+
+/** @public */
+export type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
+  children: TabListChild[]
+}
+
+/** @public */
+export type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
+>
+
+/** @public */
+export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
+  props: TabListProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TAB_LIST_ELEMENT,
+    children: childrenProp,
+    gap = 1,
+    wrap = 'nowrap',
+    ...rest
+  } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
+
+  const [focusedIndex, setFocusedIndex] = useState(-1)
+
+  const children = Children.toArray(childrenProp).filter(_isReactElement)
+
+  const tabs = children.map((child, childIndex) =>
+    cloneElement(child, {
+      focused: focusedIndex === childIndex,
+      key: childIndex,
+      onFocus: () => setFocusedIndex(childIndex),
+    }),
+  )
+
+  const numTabs = tabs.length
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
+      }
+
+      if (event.key === 'ArrowRight') {
+        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
+      }
+    },
+    [numTabs],
+  )
+
+  return (
+    <Flex
+      data-ui="TabList"
+      {...rest}
+      as={as}
+      gap={gap}
+      onKeyDown={handleKeyDown}
+      role="tablist"
+      wrap={wrap}
+    >
+      {tabs}
+    </Flex>
+  )
+}
+
+function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
+  return Boolean(node)
+}

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

@@ -0,0 +1,47 @@
+import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import type {ComponentType, Props} from '../../types'
+
+/** @public */
+export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
+
+/** @public */
+export type TabPanelOwnProps = BoxOwnProps & {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string
+  'id': string
+}
+
+/** @public */
+export type TabPanelElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
+  TabPanelOwnProps,
+  E
+>
+
+/** @public */
+export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
+  props: TabPanelProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TAB_PANEL_ELEMENT,
+    children,
+    tabIndex,
+    ...rest
+  } = props as TabPanelProps<typeof DEFAULT_TAB_PANEL_ELEMENT>
+
+  return (
+    <Box
+      data-ui="TabPanel"
+      {...rest}
+      as={as}
+      role="tabpanel"
+      tabIndex={tabIndex === undefined ? 0 : tabIndex}
+    >
+      {children}
+    </Box>
+  )
+}

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

@@ -0,0 +1,71 @@
+import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
+
+export default function HookStory(): React.JSX.Element {
+  const toast = useToast()
+
+  return (
+    <ToastProvider>
+      <Box padding={[4, 5, 6]}>
+        <Inline gap={2}>
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Information',
+                status: 'info',
+                description: (
+                  <>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus
+                    pellentesque luctus. Curabitur sed tortor a elit tempus malesuada. Quisque sed
+                    dapibus ligula, id pulvinar nisl.
+                  </>
+                ),
+              })
+            }
+            text="Push info"
+            tone="neutral"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Warning',
+                status: 'warning',
+              })
+            }
+            text="Push warning"
+            tone="caution"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Error',
+                status: 'error',
+              })
+            }
+            text="Push error"
+            tone="critical"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                // id: 'status',
+                closable: true,
+                title: 'Some message',
+                // status: 'error',
+              })
+            }
+            text="Push some message"
+          />
+        </Inline>
+      </Box>
+    </ToastProvider>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'components/toast',
+  title: 'Toast',
+  stories: [
+    {
+      name: 'toast',
+      title: 'Toast',
+      component: lazy(() => import('./toast')),
+    },
+    {
+      name: 'hook',
+      title: 'Hook',
+      component: lazy(() => import('./hook')),
+    },
+  ],
+}
+
+export default scope