@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,89 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Box,
-  Button,
-  Card,
-  Dialog,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  PortalProvider,
-} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-export default function PanesStory(): React.JSX.Element {
-  return (
-    <Flex height="fill">
-      <Pane id="A" />
-      <Pane id="B" borderLeft />
-    </Flex>
-  )
-}
-
-const PaneRoot = styled(Card)`
-  position: relative;
-`
-
-const PanePortal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-`
-
-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}>
-        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
-          <Box padding={4}>
-            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
-          </Box>
-
-          <PanePortal ref={setPortalElement} />
-        </PaneRoot>
-
-        {dialogOpen && (
-          <Dialog
-            header={`Dialog ${id}`}
-            id={id}
-            onClickOutside={handleClose}
-            onClose={handleClose}
-            position="absolute"
-          >
-            <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>
-                }
-              />
-            </Box>
-          </Dialog>
-        )}
-      </PortalProvider>
-    </BoundaryElementProvider>
-  )
-}

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

@@ -1,38 +0,0 @@
-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)
-  // @ts-expect-error - TODO: fix this
-  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"
-              // @ts-expect-error - TODO: fix this
-              position={position}
-            />
-          )}
-        </LayerProvider>
-      </Box>
-    </Box>
-  )
-}

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

@@ -1,79 +0,0 @@
-import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useCallback, useRef, useState} from 'react'
-
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
-
-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)
-  // @ts-expect-error - TODO: fix this
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
-  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
-          id="open-dialog-button"
-          onClick={() => setOpen(true)}
-          ref={buttonRef}
-          text="Open dialog"
-        />
-
-        {open && (
-          <Dialog
-            __unstable_hideCloseButton={hideCloseButton}
-            animate={animate}
-            header={header}
-            id="dialog"
-            onClickOutside={onClickOutside ? handleClose : undefined}
-            onClose={handleClose}
-            open={open}
-            // @ts-expect-error - TODO: fix this
-            width={width}
-          >
-            <Box padding={4}>
-              <Stack gap={4}>
-                <Text>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
-                  aliquet imperdiet.
-                </Text>
-                <Button id="button-1" text="Focus test" />
-                <Text>
-                  Sed in hendrerit metus. Sed sapien neque, imperdiet eu justo sed, vestibulum
-                  mollis dolor.
-                </Text>
-                <Button id="button-2" text="Focus test" />
-                <Text>
-                  Nulla sit amet ipsum ligula. Duis sit amet velit tempor, ultricies mauris
-                  dignissim, mollis enim.
-                </Text>
-                <Button id="button-3" text="Focus test" />
-                <Text>Cras quis elit non mauris faucibus molestie non non augue. </Text>
-                <Text>
-                  Proin suscipit gravida sodales. Morbi vel purus molestie, rhoncus augue sit amet,
-                  auctor justo.
-                </Text>
-                <Button id="button-4" text="Focus test" />
-                <Text>Proin lobortis nunc a tellus condimentum, a ultrices arcu egestas.</Text>
-                <Button id="button-5" text="Focus test" />
-                <Text>
-                  Suspendisse augue nibh, euismod sit amet sapien nec, molestie dignissim magna.
-                </Text>
-              </Stack>
-            </Box>
-          </Dialog>
-        )}
-      </Box>
-    </LayerProvider>
-  )
-}

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

@@ -1,11 +0,0 @@
-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/core/components/dialog/__workshop__/Wrapped.tsx

@@ -1,76 +0,0 @@
-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 onClick={() => setOpen(true)} ref={buttonRef} text={`Open dialog ${level + 1}`} />
-
-      {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} data-size={layer.size} onFocus={handleContentFocus} ref={dialogRef} />
-}

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

@@ -1,21 +0,0 @@
-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/core/components/dialog/isTargetWithinScope.ts

@@ -1,14 +0,0 @@
-import {containsOrEqualsElement} from '../../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/core/components/dialog/types.ts

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

package/src/core/components/dialog/useDialog.ts

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

package/src/core/components/hotkeys/Hotkeys.tsx

@@ -1,60 +0,0 @@
-import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize, Space} from '@sanity/ui/theme'
-
-import {Box} from '../../primitives/box/Box'
-import {KBD} from '../../primitives/kbd/Kbd'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
-
-/** @public */
-export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  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.
- *
- * @public
- */
-export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
-  props: HotkeysProps<E>,
-): React.JSX.Element | undefined {
-  const {
-    as = DEFAULT_HOTKEYS_ELEMENT,
-    fontSize,
-    gap = 1,
-    gapX,
-    gapY,
-    keys,
-    padding,
-    radius,
-    ...rest
-  } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
-
-  if (!keys || keys.length === 0) {
-    return undefined
-  }
-
-  return (
-    <Box as={as} data-ui="Hotkeys" {...rest} display="flex" gap={gap} gapX={gapX} gapY={gapY}>
-      {keys.map((key, i) => (
-        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
-          {key}
-        </KBD>
-      ))}
-    </Box>
-  )
-}

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

@@ -1,9 +0,0 @@
-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/core/components/hotkeys/__workshop__/index.ts

@@ -1,16 +0,0 @@
-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/core/components/menu/Menu.test.tsx

@@ -1,129 +0,0 @@
-/* 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: 0.0,
-            activeElement: null,
-            activeIndex: 0,
-            mount: (element: HTMLElement | null) => () => console.log(element),
-            onItemClick: () => undefined,
-            onItemMouseEnter: handleItemMouseEnter,
-            onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
-          }),
-          [handleItemMouseEnter, handleItemMouseLeave],
-        )
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      const contextValue = log.mock.calls[0][0]
-
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
-      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.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      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.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): the context value is not compatible')
-    })
-  })
-})