@sanity/ui 3.3.0 → 3.3.2

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

@@ -1,72 +0,0 @@
-import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {useEffect, useRef, useState} from 'react'
-
-export default function NestedStory() {
-  const [open1] = useState(true)
-  const [open2, setOpen2] = useState(false)
-  const [open3, setOpen3] = useState(false)
-
-  const dialog2Button = useRef<HTMLButtonElement>(null)
-  const dialog3Button = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (!open2) dialog2Button.current?.focus()
-  }, [open2])
-
-  useEffect(() => {
-    if (!open3) dialog3Button.current?.focus()
-  }, [open3])
-
-  return (
-    <LayerProvider>
-      {open1 && (
-        <Dialog animate cardShadow={1} header="Dialog 1" id="dialog1">
-          <Box padding={4}>
-            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
-          </Box>
-
-          {open2 && (
-            <Dialog
-              animate
-              cardShadow={2}
-              header="Dialog 2"
-              id="dialog2"
-              onClose={() => setOpen2(false)}
-              onClickOutside={() => setOpen2(false)}
-            >
-              <Box padding={4}>
-                <Button onClick={() => setOpen3(true)} ref={dialog3Button} text="Open Dialog 3" />
-              </Box>
-
-              {open3 && (
-                <Dialog
-                  animate
-                  cardShadow={4}
-                  header="Dialog 3"
-                  id="dialog3"
-                  onClose={() => setOpen3(false)}
-                  onClickOutside={() => setOpen3(false)}
-                >
-                  <Box padding={4}>
-                    <MenuButton
-                      button={<Button text="Test" />}
-                      id="menu3"
-                      popover={{animate: true}}
-                      menu={
-                        <Menu>
-                          <MenuItem text="Test" />
-                          <MenuItem text="Test" />
-                        </Menu>
-                      }
-                      portal
-                    />
-                  </Box>
-                </Dialog>
-              )}
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </LayerProvider>
-  )
-}

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

@@ -1,39 +0,0 @@
-import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
-import {useEffect, useRef} from 'react'
-
-export default function OnScrollStory() {
-  const ref = useRef<HTMLDivElement | null>(null)
-  const handleScroll = useAction('scroll')
-
-  useEffect(() => {
-    const el = ref.current
-
-    if (!el) return
-
-    el.addEventListener('scroll', handleScroll, {passive: true})
-
-    return () => el.removeEventListener('scroll', handleScroll)
-  }, [handleScroll])
-
-  return (
-    <LayerProvider>
-      <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4}>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
-            hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
-            imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
-            ex quam luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at
-            rhoncus a, tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et
-            ultrices posuere cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia
-            ultricies. Integer fermentum tortor at pellentesque faucibus. In venenatis commodo
-            placerat. Curabitur commodo tortor libero, vel pellentesque elit luctus sodales. Donec
-            mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
-            arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
-          </Text>
-        </Box>
-      </Dialog>
-    </LayerProvider>
-  )
-}

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

@@ -1,82 +0,0 @@
-import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function PanesStory() {
-  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,30 +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__/constants'
-
-export default function PositionStory() {
-  const open = useBoolean('Open', true, 'Props')
-  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
-
-  return (
-    <Box padding={4}>
-      <Box style={{padding: 'calc(100vh - 100px) 0'}}>
-        <Stack space={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/core/components/dialog/__workshop__/props.tsx

@@ -1,75 +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_WIDTH_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
-  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}
-            header={header}
-            id="dialog"
-            onClickOutside={onClickOutside ? handleClose : undefined}
-            onClose={handleClose}
-            open={open}
-            width={width}
-          >
-            <Box padding={4}>
-              <Stack space={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() {
-  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, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-
-export default function WrappedStory() {
-  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/hotkeys/__workshop__/index.ts

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

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

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

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -1,45 +0,0 @@
-import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-const CustomLink = forwardRef(function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.JSX.Element {
-  const {children, req, ...restProps} = props
-
-  return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a data-required={req} {...restProps} href="#" ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  const props = {href: '#', req: 'example'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <MenuButton
-        button={<Button text="Menu with components" />}
-        id="test"
-        menu={
-          <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
-              <Text>Component 1</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
-              <Text>Component 2</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
-              <Text>Component 3</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
-              <Text>Component 3</Text>
-            </MenuItem>
-          </Menu>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,51 +0,0 @@
-import {UsersIcon} from '@sanity/icons'
-
-import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
-import {Hotkeys} from '../../hotkeys'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
-
-export default function AvatarMenuStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <MenuButton
-        button={<Button icon={UsersIcon} />}
-        id="avatar-menu"
-        menu={
-          <Menu>
-            <MenuItem padding={0}>
-              <Flex align="center" padding={1}>
-                <Box flex="none">
-                  <Avatar color="purple" initials="JS" />
-                </Box>
-                <Box flex={1} padding={2}>
-                  <Text size={1}>Jane Smith</Text>
-                </Box>
-                <Box padding={1}>
-                  <Badge>Me</Badge>
-                </Box>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '1']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-            <MenuItem padding={0}>
-              <Flex align="center" padding={1}>
-                <Box flex="none">
-                  <Avatar color="magenta" initials="JS" />
-                </Box>
-                <Box flex={1} padding={2}>
-                  <Text size={1}>John Doe</Text>
-                </Box>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '2']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-          </Menu>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/components/menu/__workshop__/closableMenuButton.tsx

@@ -1,46 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-import {useRef} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-}
-
-export default function ClosableMenuButtonStory() {
-  const ref = useRef<HTMLButtonElement | null>(null)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack>
-        <MenuButton
-          button={<Button text="Open" />}
-          id="closable-example"
-          menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
-                <MenuItem text="Item 1" />
-                <MenuItem text="Item 2" />
-                <MenuItem text="Item 3" />
-                <MenuItem text="Item 4" />
-              </Stack>
-              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
-                <Button
-                  icon={AddIcon}
-                  onClick={() => {
-                    ref.current?.click()
-                    ref.current?.focus()
-                  }}
-                  mode="bleed"
-                  text="Add item"
-                  tone="primary"
-                />
-              </Stack>
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-          ref={ref}
-        />
-      </Stack>
-    </Box>
-  )
-}