@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/components/dialog/__workshop__/Panes.tsx

@@ -0,0 +1,75 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  PortalProvider,
+} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+export default function PanesStory(): React.JSX.Element {
+  return (
+    <Flex height="fill">
+      <Pane id="A" />
+      <Pane borderLeft id="B" />
+    </Flex>
+  )
+}
+
+function Pane(props: {borderLeft?: boolean; id: string}) {
+  const {borderLeft, id} = props
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const handleClose = useCallback(() => {
+    setDialogOpen(false)
+  }, [])
+
+  return (
+    <BoundaryElementProvider element={element}>
+      <PortalProvider element={portalElement}>
+        <Card ref={setElement} borderLeft={borderLeft} flex={1} position="relative">
+          <Box padding={4}>
+            <Button selected={dialogOpen} text="Open dialog" onClick={() => setDialogOpen(true)} />
+          </Box>
+
+          <div ref={setPortalElement} />
+        </Card>
+
+        {dialogOpen && (
+          <Dialog
+            header={`Dialog ${id}`}
+            id={id}
+            position="absolute"
+            onClickOutside={handleClose}
+            onClose={handleClose}
+          >
+            <Box padding={4}>
+              <MenuButton
+                button={<Button text="Open menu" />}
+                id={`${id}-menu`}
+                menu={
+                  <Menu>
+                    <MenuItem text="Item 1" />
+                    <MenuItem text="Item 2" />
+                    <MenuItem text="Item 3" />
+                  </Menu>
+                }
+                popover={{
+                  modal: true,
+                  portal: true,
+                }}
+              />
+            </Box>
+          </Dialog>
+        )}
+      </PortalProvider>
+    </BoundaryElementProvider>
+  )
+}

package/src/components/dialog/__workshop__/Position.tsx

@@ -0,0 +1,30 @@
+import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
+import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
+
+export default function PositionStory(): React.JSX.Element {
+  const open = useBoolean('Open', true)
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
+
+  return (
+    <Box padding={4}>
+      <Box style={{padding: 'calc(100vh - 100px) 0'}}>
+        <Stack gap={3}>
+          <Text align="center">
+            <ArrowUpIcon />
+          </Text>
+          <Text align="center">Scrollable</Text>
+          <Text align="center">
+            <ArrowDownIcon />
+          </Text>
+        </Stack>
+
+        <LayerProvider>
+          {open && <Dialog header="Position example" id="position-example" position={position} />}
+        </LayerProvider>
+      </Box>
+    </Box>
+  )
+}

package/src/components/dialog/__workshop__/Props.tsx

@@ -0,0 +1,84 @@
+import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
+import {CARD_TONES, COLOR_SCHEMES, CONTAINER} from '@sanity/ui/tokens'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useCallback, useRef, useState} from 'react'
+
+export default function PropsStory(): React.JSX.Element {
+  const animate = useBoolean('Animate', false)
+  const header = useText('Header', 'Props example')
+  const onClickOutside = useBoolean('Close when click outside', false)
+  const hideCloseButton = useBoolean('Hide close button', false)
+  const scheme = useSelect('Scheme', [undefined, ...COLOR_SCHEMES])
+  const tone = useSelect('Tone', [undefined, ...CARD_TONES])
+  const width = useSelect('Width', CONTAINER)
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    buttonRef.current?.focus()
+  }, [])
+
+  return (
+    <LayerProvider>
+      <Box padding={[4, 5, 6]}>
+        <Button
+          ref={buttonRef}
+          id="open-dialog-button"
+          text="Open dialog"
+          onClick={() => setOpen(true)}
+        />
+
+        {open && (
+          <Dialog
+            __unstable_hideCloseButton={hideCloseButton}
+            animate={animate}
+            header={header}
+            id="dialog"
+            open={open}
+            scheme={scheme}
+            tone={tone}
+            width={width}
+            onClickOutside={onClickOutside ? handleClose : undefined}
+            onClose={handleClose}
+          >
+            <Box padding={4}>
+              <Stack gap={4}>
+                <Text muted size={1}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
+                  aliquet imperdiet.
+                </Text>
+                <Button id="button-1" mode="ghost" text="Focus test" />
+                <Text muted size={1}>
+                  Sed in hendrerit metus. Sed sapien neque, imperdiet eu justo sed, vestibulum
+                  mollis dolor.
+                </Text>
+                <Button id="button-2" mode="ghost" text="Focus test" />
+                <Text muted size={1}>
+                  Nulla sit amet ipsum ligula. Duis sit amet velit tempor, ultricies mauris
+                  dignissim, mollis enim.
+                </Text>
+                <Button id="button-3" mode="ghost" text="Focus test" />
+                <Text muted size={1}>
+                  Cras quis elit non mauris faucibus molestie non non augue.{' '}
+                </Text>
+                <Text muted size={1}>
+                  Proin suscipit gravida sodales. Morbi vel purus molestie, rhoncus augue sit amet,
+                  auctor justo.
+                </Text>
+                <Button id="button-4" mode="ghost" text="Focus test" />
+                <Text muted size={1}>
+                  Proin lobortis nunc a tellus condimentum, a ultrices arcu egestas.
+                </Text>
+                <Button id="button-5" mode="ghost" text="Focus test" />
+                <Text muted size={1}>
+                  Suspendisse augue nibh, euismod sit amet sapien nec, molestie dignissim magna.
+                </Text>
+              </Stack>
+            </Box>
+          </Dialog>
+        )}
+      </Box>
+    </LayerProvider>
+  )
+}

package/src/components/dialog/__workshop__/Provider.tsx

@@ -0,0 +1,11 @@
+import {Dialog, DialogProvider} from '@sanity/ui'
+
+export default function ProviderStory(): React.JSX.Element {
+  return (
+    <DialogProvider position="absolute" zOffset={1000}>
+      <Dialog header="Outer" id="provider-example">
+        <Dialog header="Inner" id="nested-provider-example" />
+      </Dialog>
+    </DialogProvider>
+  )
+}

package/src/components/dialog/__workshop__/Wrapped.tsx

@@ -0,0 +1,76 @@
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+
+export default function WrappedStory(): React.JSX.Element {
+  return (
+    <LayerProvider zOffset={100}>
+      <Box padding={4}>
+        <DialogButton level={0} />
+      </Box>
+    </LayerProvider>
+  )
+}
+
+function DialogButton(props: {level: number}) {
+  const {level} = props
+  const [open, setOpen] = useState(false)
+
+  const openRef = useRef(open)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (openRef.current !== open) {
+      openRef.current = open
+
+      if (!open) {
+        // focus the button that opened the dialog
+        // buttonRef.current?.focus()
+      }
+    }
+  }, [open])
+
+  return (
+    <>
+      <Button ref={buttonRef} text={`Open dialog ${level + 1}`} onClick={() => setOpen(true)} />
+
+      {open && (
+        <WrappedDialog
+          header={`WrappedDialog ${level + 1}`}
+          id={`wrapped-${level + 1}`}
+          onClickOutside={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <Box padding={4}>
+            <DialogButton level={level + 1} />
+          </Box>
+        </WrappedDialog>
+      )}
+    </>
+  )
+}
+
+function WrappedDialog(props: DialogProps & {children?: ReactNode}) {
+  const layer = useLayer()
+  const isTopLayer = layer.size === 1
+
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  const [lastFocusedElement, setLastFocusedElement] = useState<HTMLElement | null>(null)
+
+  const handleContentFocus = useCallback(() => {
+    const containsActiveElement = dialogRef.current?.contains(document.activeElement)
+
+    if (containsActiveElement) {
+      setLastFocusedElement(document.activeElement as HTMLElement)
+    }
+  }, [])
+
+  // Set focus on the last focused element when the dialog becomes the top layer.
+  useEffect(() => {
+    if (isTopLayer && lastFocusedElement) {
+      lastFocusedElement.focus()
+    }
+  }, [isTopLayer, lastFocusedElement])
+
+  return <Dialog {...props} ref={dialogRef} data-size={layer.size} onFocus={handleContentFocus} />
+}

package/src/components/dialog/__workshop__/index.ts

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'components/dialog',
+  title: 'Dialog',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./Nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./OnScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./Layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./Position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./Provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./AutoFocus'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./Panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./Activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./Wrapped'))},
+  ],
+}
+
+export default scope

package/src/components/dialog/isTargetWithinScope.ts

@@ -0,0 +1,14 @@
+import {containsOrEqualsElement} from '../../core/helpers/element'
+
+export function isTargetWithinScope(
+  boundaryElement: HTMLElement | null,
+  portalElement: HTMLElement | null,
+  target: Node,
+): boolean {
+  if (!boundaryElement || !portalElement) return true
+
+  return (
+    containsOrEqualsElement(boundaryElement, target) ||
+    containsOrEqualsElement(portalElement, target)
+  )
+}

package/src/components/dialog/types.ts

@@ -0,0 +1,2 @@
+/** @public */
+export type DialogPosition = 'absolute' | 'fixed'

package/src/components/dialog/useDialog.ts

@@ -0,0 +1,11 @@
+import {use} from 'react'
+
+import {DialogContext, type DialogContextValue} from './DialogContext'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useDialog(): DialogContextValue {
+  return use(DialogContext)
+}

package/src/components/hotkeys/Hotkeys.tsx

@@ -0,0 +1,70 @@
+import {
+  type GapStyleProps,
+  hotkeys,
+  HOTKEYS_STYLE_PROP_KEYS,
+  type RadiusStyleProps,
+} from '@sanity/ui-css'
+
+import {_splitKeys} from '../../core/_keys'
+import type {ComponentType, Props} from '../../core/types'
+import {KBD} from '../../primitives/kbd/Kbd'
+
+/** @public */
+export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
+  /** @deprecated No longer supported. */
+  fontSize?: never
+  /** @deprecated No longer supported. */
+  padding?: never
+  keys: string[]
+}
+
+/** @public */
+export type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
+
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @example
+ * ```tsx
+ * import {Hotkeys} from '@sanity/ui'
+ *
+ * <Hotkeys keys={['⌘', 'K']} />
+ * ```
+ *
+ * @public
+ */
+export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
+  props: HotkeysProps<E>,
+): React.JSX.Element | undefined {
+  const [
+    styleProps,
+    {
+      as: Element = DEFAULT_HOTKEYS_ELEMENT,
+      fontSize: _fontSize,
+      keys,
+      // split DOM props
+      ...domProps
+    },
+  ] = _splitKeys(props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>, HOTKEYS_STYLE_PROP_KEYS)
+
+  if (!keys || keys.length === 0) {
+    return undefined
+  }
+
+  return (
+    <Element data-ui="Hotkeys" {...domProps} className={hotkeys(styleProps)}>
+      {keys.map((key, i) => (
+        <KBD key={i}>{key}</KBD>
+      ))}
+    </Element>
+  )
+}

package/src/components/hotkeys/__workshop__/Plain.tsx

@@ -0,0 +1,9 @@
+import {Flex, Hotkeys} from '@sanity/ui'
+
+export default function PlainStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Hotkeys keys={['Ctrl', 'Shift', 'P']} />
+    </Flex>
+  )
+}

package/src/components/hotkeys/__workshop__/index.ts

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

package/src/components/menu/Menu.test.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable no-console */
+
+import {type MouseEvent, useCallback, useMemo} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
+
+import {MenuContext, type MenuContextValue} from './MenuContext'
+import {useMenu} from './useMenu'
+
+describe('components/menu', () => {
+  describe('useMenu', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootMenu = useMenu()
+
+        log(rootMenu)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const handleItemMouseEnter = useCallback(
+          (event: MouseEvent<HTMLElement>) => console.log(event),
+          [],
+        )
+
+        const handleItemMouseLeave = useCallback(
+          (event: MouseEvent<HTMLElement>) => console.log(event),
+          [],
+        )
+
+        const value: MenuContextValue = useMemo(
+          () => ({
+            version: 2,
+            activeElement: null,
+            mount: (element: HTMLElement | null) => () => console.log(element),
+            onItemClick: () => undefined,
+            onItemMouseEnter: handleItemMouseEnter,
+            onItemMouseLeave: handleItemMouseLeave,
+          }),
+          [handleItemMouseEnter, handleItemMouseLeave],
+        )
+
+        return (
+          <MenuContext value={value}>
+            <Debug />
+          </MenuContext>
+        )
+      }
+
+      render(<Root />)
+
+      const contextValue = log.mock.calls[0][0]
+
+      expect(contextValue.version).toBe(2)
+      expect(typeof contextValue.mount).toBe('function')
+      expect(typeof contextValue.onItemClick).toBe('function')
+      expect(typeof contextValue.onItemMouseEnter).toBe('function')
+      expect(typeof contextValue.onItemMouseEnter).toBe('function')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useMenu()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        return (
+          <MenuContext
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </MenuContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useMenu(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useMenu()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+
+        return (
+          <MenuContext
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </MenuContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useMenu(): the context value is not compatible')
+    })
+  })
+})