@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

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

@@ -1,29 +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,74 +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__/wrapped.tsx

@@ -1,78 +0,0 @@
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Box, Button} from '../../../primitives'
-import {LayerProvider, useLayer} from '../../../utils'
-import {Dialog, DialogProps} from '../dialog'
-
-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/dialog/dialog.tsx

@@ -1,414 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  composeClassNames,
-  ContainerStyleProps,
-  dialog,
-  dialogCardRoot,
-  dialogContainer,
-  dialogContent,
-  dialogFooter,
-  dialogHeader,
-  dialogLayout,
-  PaddingStyleProps,
-} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {
-  containsOrEqualsElement,
-  focusFirstDescendant,
-  focusLastDescendant,
-  isHTMLElement,
-} from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
-import {useTheme_v2} from '../../theme'
-import {DialogPosition, Radius} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
-import {useDialog} from './useDialog'
-
-/**
- * @public
- */
-export interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_autoFocus?: boolean
-  /**
-   * @beta
-   */
-  __unstable_hideCloseButton?: boolean
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  cardRadius?: Radius | Radius[]
-  cardShadow?: number | number[]
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer?: React.ReactNode
-  header?: React.ReactNode
-  id: string
-  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
-  onActivate?: LayerProps['onActivate']
-  onClickOutside?: () => void
-  onClose?: () => void
-  portal?: string
-  position?: DialogPosition | DialogPosition[]
-  scheme?: ThemeColorSchemeKey
-  zOffset?: number | number[]
-}
-
-interface DialogCardProps extends ContainerStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_autoFocus: boolean
-  /**
-   * @beta
-   */
-  __unstable_hideCloseButton: boolean
-  children: React.ReactNode
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer: React.ReactNode
-  header: React.ReactNode
-  id: string
-  onClickOutside?: () => void
-  onClose?: () => void
-  portal?: string
-  radius: Radius | Radius[]
-  scheme?: ThemeColorSchemeKey
-  shadow: number | number[]
-}
-
-function isTargetWithinScope(
-  boundaryElement: HTMLElement | null,
-  portalElement: HTMLElement | null,
-  target: Node,
-): boolean {
-  if (!boundaryElement || !portalElement) return true
-
-  return (
-    containsOrEqualsElement(boundaryElement, target) ||
-    containsOrEqualsElement(portalElement, target)
-  )
-}
-
-const DialogCard = forwardRef(function DialogCard(
-  props: DialogCardProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_autoFocus: autoFocus,
-    __unstable_hideCloseButton: hideCloseButton,
-    children,
-    contentRef: forwardedContentRef,
-    footer,
-    header,
-    id,
-    onClickOutside,
-    onClose,
-    portal: portalProp,
-    radius: radiusProp,
-    scheme,
-    shadow: shadowProp,
-    width: widthProp,
-  } = props
-  const portal = usePortal()
-  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const contentRef = useRef<HTMLDivElement | null>(null)
-  const layer = useLayer()
-  const {isTopLayer} = layer
-  const labelId = `${id}_label`
-  const showCloseButton = Boolean(onClose) && hideCloseButton === false
-  const showHeader = Boolean(header) || showCloseButton
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-    forwardedContentRef,
-    () => contentRef.current,
-  )
-
-  useEffect(() => {
-    if (!autoFocus) return
-
-    // On mount: focus the first focusable element
-    if (ref.current) {
-      focusFirstDescendant(ref.current)
-    }
-  }, [autoFocus, ref])
-
-  useGlobalKeyDown(
-    useCallback(
-      (event: KeyboardEvent) => {
-        if (!isTopLayer || !onClose) return
-
-        const target = document.activeElement
-
-        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-          // Ignore key presses when the focused element is outside of scope
-          return
-        }
-
-        if (event.key === 'Escape') {
-          event.preventDefault()
-          event.stopPropagation()
-          onClose()
-        }
-      },
-      [boundaryElement, isTopLayer, onClose, portalElement],
-    ),
-  )
-
-  useClickOutsideEvent(
-    isTopLayer &&
-      onClickOutside &&
-      ((event) => {
-        const target = event.target as Node | null
-
-        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-          // Ignore clicks outside of the scope
-          return
-        }
-
-        onClickOutside()
-      }),
-    () => [ref.current],
-  )
-
-  return (
-    <Container
-      align="center"
-      className={dialogContainer()}
-      data-ui="DialogCard"
-      direction="column"
-      display="flex"
-      justify="center"
-      width={width}
-    >
-      <Card
-        className={dialogCardRoot()}
-        display="flex"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-      >
-        <Flex className={dialogLayout()} direction="column" flex={1}>
-          {showHeader && (
-            <Box className={dialogHeader()} position="relative">
-              <Flex align="flex-start" padding={3}>
-                <Box flex={1} padding={2}>
-                  {header && (
-                    <Text id={labelId} size={1} weight="semibold">
-                      {header}
-                    </Text>
-                  )}
-                </Box>
-                {showCloseButton && (
-                  <Box flex="none">
-                    <Button
-                      aria-label="Close dialog"
-                      disabled={!onClose}
-                      icon={CloseIcon}
-                      mode="bleed"
-                      onClick={onClose}
-                      padding={2}
-                    />
-                  </Box>
-                )}
-              </Flex>
-            </Box>
-          )}
-          <Box
-            className={dialogContent()}
-            flex={1}
-            overflow="auto"
-            position="relative"
-            ref={contentRef}
-            tabIndex={-1}
-          >
-            {children}
-          </Box>
-          {footer && (
-            <Box className={dialogFooter()} position="relative">
-              {footer}
-            </Box>
-          )}
-        </Flex>
-      </Card>
-    </Container>
-  )
-})
-
-DialogCard.displayName = 'ForwardRef(DialogCard)'
-
-/**
- * The Dialog component.
- *
- * @public
- */
-export const Dialog = forwardRef(function Dialog(
-  props: DialogProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'width' | 'wrap'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const context = useDialog()
-  const {layer} = useTheme_v2()
-  const {
-    __unstable_autoFocus: autoFocus = true,
-    __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius: cardRadiusProp = 4,
-    cardShadow = 3,
-    children,
-    className,
-    contentRef,
-    footer,
-    header,
-    id,
-    onActivate,
-    onClickOutside,
-    onClose,
-    onFocus,
-    padding = 3,
-    portal: portalProp,
-    position: positionProp = context.position || 'fixed',
-    scheme,
-    width: widthProp = 0,
-    zOffset: zOffsetProp = context.zOffset || layer.dialog.zOffset,
-    animate: _animate = false,
-    ...restProps
-  } = props
-  const prefersReducedMotion = usePrefersReducedMotion()
-  const animate = prefersReducedMotion ? false : _animate
-  const portal = usePortal()
-  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const position = useArrayProp(positionProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
-  const preDivRef = useRef<HTMLDivElement | null>(null)
-  const postDivRef = useRef<HTMLDivElement | null>(null)
-  const cardRef = useRef<HTMLDivElement | null>(null)
-  const focusedElementRef = useRef<HTMLElement | null>(null)
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
-      onFocus?.(event)
-
-      const target = event.target
-      const cardElement = cardRef.current
-
-      if (cardElement && target === preDivRef.current) {
-        focusLastDescendant(cardElement)
-
-        return
-      }
-
-      if (cardElement && target === postDivRef.current) {
-        focusFirstDescendant(cardElement)
-
-        return
-      }
-
-      if (isHTMLElement(event.target)) {
-        focusedElementRef.current = event.target
-      }
-    },
-    [onFocus],
-  )
-
-  const labelId = `${id}_label`
-
-  const rootClickTimeoutRef = useRef<NodeJS.Timeout>()
-
-  // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
-  // within the dialog, then we want to focus the previously interactive element in the dialog instead.
-  // This is to allow the user to tab or close the dialog by pressing escape.
-  const handleRootClick = useCallback(() => {
-    if (rootClickTimeoutRef.current) {
-      clearTimeout(rootClickTimeoutRef.current)
-    }
-
-    rootClickTimeoutRef.current = setTimeout(() => {
-      const activeElement = document.activeElement
-
-      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
-        const target = focusedElementRef.current
-
-        if (!target || !document.body.contains(target)) {
-          // No previously focused element, or it's not in the document anymore
-          const cardElement = cardRef.current
-          if (cardElement) focusFirstDescendant(cardElement)
-
-          return
-        }
-
-        target.focus()
-      }
-    }, 0)
-  }, [boundaryElement, portalElement])
-
-  return (
-    <Portal __unstable_name={portalProp}>
-      <Layer
-        {...restProps}
-        // $animate={animate}
-        // $padding={padding}
-        // $position={position}
-        aria-labelledby={labelId}
-        aria-modal
-        // className="root"
-        className={composeClassNames(className, dialog())}
-        data-animate={animate ? '' : undefined}
-        data-ui="Dialog"
-        display="flex"
-        id={id}
-        onActivate={onActivate}
-        onClick={handleRootClick}
-        onFocus={handleFocus}
-        padding={padding}
-        position={position}
-        ref={ref}
-        role="dialog"
-        zOffset={zOffset}
-      >
-        <div ref={preDivRef} tabIndex={0} />
-        <DialogCard
-          __unstable_autoFocus={autoFocus}
-          __unstable_hideCloseButton={hideCloseButton}
-          contentRef={contentRef}
-          footer={footer}
-          header={header}
-          id={id}
-          onClickOutside={onClickOutside}
-          onClose={onClose}
-          portal={portalProp}
-          radius={cardRadius}
-          ref={cardRef}
-          scheme={scheme}
-          shadow={cardShadow}
-          width={width}
-        >
-          {children}
-        </DialogCard>
-        <div ref={postDivRef} tabIndex={0} />
-      </Layer>
-    </Portal>
-  )
-})
-
-Dialog.displayName = 'ForwardRef(Dialog)'

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

@@ -1,34 +0,0 @@
-import {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?: React.ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function DialogProvider(props: DialogProviderProps): React.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/core/components/dialog/useDialog.ts

@@ -1,10 +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/core/components/hotkeys/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

@@ -1,50 +0,0 @@
-import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
-import {Box, Inline, KBD} from '../../primitives'
-
-/**
- * @public
- */
-export interface HotkeysProps extends RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  space?: ResponsiveProp<Space>
-  keys?: string[]
-}
-
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export const Hotkeys = forwardRef(function Hotkeys(
-  props: HotkeysProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'display' | 'height' | 'ref' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useArrayProp(spaceProp)
-
-  if (!keys || keys.length === 0) {
-    return <></>
-  }
-
-  return (
-    <Box as="kbd" data-ui="Hotkeys" {...restProps} display="flex" gap={spaceProp} ref={ref}>
-      <Inline as="span" space={space}>
-        {keys.map((key, i) => (
-          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
-            {key}
-          </KBD>
-        ))}
-      </Inline>
-    </Box>
-  )
-})
-
-Hotkeys.displayName = 'ForwardRef(Hotkeys)'

package/src/core/components/menu/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}