@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/ui/components/dialog/dialogContext.ts

@@ -1,20 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {DialogPosition} from '../../types'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface DialogContextValue {
-  version: 0.0
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
-}
-
-/**
- * @internal
- */
-export const DialogContext = createGlobalScopedContext<DialogContextValue>(
-  '@sanity/ui/context/dialog',
-  {version: 0.0},
-)

package/src/ui/components/dialog/dialogProvider.tsx

@@ -1,35 +0,0 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
-
-import {DialogPosition} from '../../types'
-import {DialogContext, DialogContextValue} from './dialogContext'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface DialogProviderProps {
-  children?: ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function DialogProvider(props: DialogProviderProps): ReactElement {
-  const {children, position, zOffset} = props
-
-  const contextValue: DialogContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      position,
-      zOffset,
-    }),
-    [position, zOffset],
-  )
-
-  return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
-}
-
-DialogProvider.displayName = 'DialogProvider'

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

@@ -1,4 +0,0 @@
-export * from './dialog'
-export * from './dialogContext'
-export * from './dialogProvider'
-export * from './useDialog'

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

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

package/src/ui/components/hotkeys/hotkeys.tsx

@@ -1,54 +0,0 @@
-import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Box, KBD} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  keys?: string[]
-}
-
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export const Hotkeys = forwardRef(function Hotkeys(
-  props: Props<HotkeysProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 0.5, ...restProps} = props
-
-  if (!keys || keys.length === 0) {
-    return undefined
-  }
-
-  return (
-    <Box
-      as="kbd"
-      data-ui="Hotkeys"
-      {...restProps}
-      display="flex"
-      gap={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-      ref={ref}
-    >
-      {keys.map((key, i) => (
-        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
-          {key}
-        </KBD>
-      ))}
-    </Box>
-  )
-})
-
-Hotkeys.displayName = 'ForwardRef(Hotkeys)'

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

@@ -1 +0,0 @@
-export * from './hotkeys'

package/src/ui/components/index.ts

@@ -1,9 +0,0 @@
-export * from './autocomplete'
-export * from './breadcrumbs'
-export * from './dialog'
-export * from './hotkeys'
-export * from './menu'
-export * from './skeleton'
-export * from './tab'
-export * from './toast'
-export * from './tree'

package/src/ui/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: '#'}
-
-  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/ui/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/ui/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>
-  )
-}

package/src/ui/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -1,134 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {
-  BoundaryElementProvider,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  SelectableTone,
-  Text,
-} from '@sanity/ui'
-import {useState} from 'react'
-
-import {MenuButtonProps} from '../menuButton'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-  placement: 'bottom',
-  portal: true,
-}
-
-const items: {tone: SelectableTone; message: string}[] = [
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-]
-
-export default function ConstrainedInBoundaryStory() {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Box height="fill" padding={[4, 5, 6]} sizing="border">
-      <Card height="fill" shadow={1}>
-        <Flex height="fill">
-          <Card flex={1} padding={4}>
-            <Text>Pane</Text>
-          </Card>
-          <Card borderLeft flex={1} padding={2} ref={setBoundaryElement}>
-            <Flex>
-              <Box flex={1} padding={3}>
-                <Text>Pane</Text>
-              </Box>
-              <Box>
-                <BoundaryElementProvider element={boundaryElement}>
-                  <MenuButton
-                    button={<Button icon={ErrorOutlineIcon} mode="bleed" tone="critical" />}
-                    id="validation-menu"
-                    menu={
-                      <Menu>
-                        {items.map((item, itemIndex) => (
-                          <MenuItem key={itemIndex} padding={5} tone={item.tone}>
-                            <Text>{item.message}</Text>
-                          </MenuItem>
-                        ))}
-                      </Menu>
-                    }
-                    popover={POPOVER_PROPS}
-                  />
-                </BoundaryElementProvider>
-              </Box>
-            </Flex>
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}

package/src/ui/components/menu/__workshop__/customMenuItem.tsx

@@ -1,45 +0,0 @@
-import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
-
-export default function CustomMenuItemStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Card radius={3} shadow={2}>
-        <LayerProvider>
-          <Menu>
-            <MenuItem padding={3}>
-              <Stack space={3}>
-                <Text weight="medium" size={1}>
-                  First option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-            <MenuItem padding={3}>
-              <Stack space={3}>
-                <Text weight="medium" size={1}>
-                  Second option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-            <MenuDivider />
-            <MenuItem padding={3} tone="critical">
-              <Stack space={3}>
-                <Text weight="medium" size={1}>
-                  Dangerous option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-          </Menu>
-        </LayerProvider>
-      </Card>
-    </Box>
-  )
-}

package/src/ui/components/menu/__workshop__/customSelectedState.tsx

@@ -1,39 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {Box, Button} from '../../../primitives'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
-
-const selectedOptions = {
-  undefined: 'undefined',
-  true: true,
-  false: false,
-} as const
-
-export default function CustomSelectedStateStory() {
-  const selected = useSelect('Selected', selectedOptions, false)
-
-  return (
-    <Box padding={4}>
-      <MenuButton
-        button={
-          <Button
-            icon={ChevronDownIcon}
-            mode="bleed"
-            selected={selected === 'undefined' ? undefined : selected}
-            text="Menu"
-          />
-        }
-        id="test-menu"
-        menu={
-          <Menu>
-            <MenuItem text="Item 1" />
-            <MenuItem text="Item 2" />
-          </Menu>
-        }
-      />
-    </Box>
-  )
-}

package/src/ui/components/menu/__workshop__/disableFocusOnClose.tsx

@@ -1,40 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-  matchReferenceWidth: true,
-}
-
-export default function DisableFocusOnCloseStory() {
-  const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <MenuButton
-        __unstable_disableRestoreFocusOnClose={disableRestoreFocusOnClose}
-        button={
-          <Button
-            iconRight={ChevronDownIcon}
-            mode="ghost"
-            text={
-              disableRestoreFocusOnClose
-                ? 'Should not focus after close'
-                : 'Should focus after close'
-            }
-          />
-        }
-        id="example"
-        menu={
-          <Menu>
-            <MenuItem text="Test 1" />
-            <MenuItem text="Test 2" />
-            <MenuItem text="Test 3" />
-          </Menu>
-        }
-        popover={POPOVER_PROPS}
-      />
-    </Flex>
-  )
-}