@sanity/ui 0.37.3 → 0.37.4

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

@@ -0,0 +1,12 @@
+import {Dialog, DialogProvider} from '@sanity/ui'
+import React from 'react'
+
+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/components/dialog/dialog.tsx

@@ -0,0 +1,339 @@
+import {CloseIcon} from '@sanity/icons'
+import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import styled from 'styled-components'
+import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
+import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
+import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
+import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {DialogPosition} from '../../types'
+import {Layer, Portal, useLayer} from '../../utils'
+import {
+  dialogStyle,
+  responsiveDialogPositionStyle,
+  ResponsiveDialogPositionStyleProps,
+} from './styles'
+import {useDialog} from './useDialog'
+
+/**
+ * @public
+ */
+export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus?: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton?: boolean
+  cardRadius?: number | number[]
+  cardShadow?: number | number[]
+  contentRef?: React.ForwardedRef<HTMLDivElement>
+  footer?: React.ReactNode
+  header?: React.ReactNode
+  id: string
+  onClickOutside?: () => void
+  onClose?: () => void
+  portal?: string
+  position?: DialogPosition | DialogPosition[]
+  scheme?: ThemeColorSchemeKey
+  zOffset?: number | number[]
+}
+
+interface DialogCardProps extends ResponsiveWidthProps {
+  /**
+   * @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
+  radius: number | number[]
+  scheme?: ThemeColorSchemeKey
+  shadow: number | number[]
+}
+
+const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
+  responsivePaddingStyle,
+  dialogStyle,
+  responsiveDialogPositionStyle
+)
+
+const DialogContainer = styled(Container)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+const DialogCardRoot = styled(Card)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+`
+
+const DialogLayout = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+`
+
+const DialogHeader = styled(Card)`
+  position: relative;
+  z-index: 2;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    border-bottom: 1px solid var(--card-hairline-soft-color);
+  }
+`
+
+const DialogContent = styled(Box)`
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  outline: none;
+`
+
+const DialogFooter = styled(Box)`
+  position: relative;
+  z-index: 3;
+  border-top: 1px solid var(--card-hairline-soft-color);
+`
+
+const DialogCard = forwardRef(function DialogCard(
+  props: DialogCardProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    __unstable_autoFocus: autoFocus,
+    __unstable_hideCloseButton: hideCloseButton,
+    children,
+    contentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    radius,
+    scheme,
+    shadow,
+    width,
+  } = props
+  const forwardedRef = useForwardedRef(ref)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const localContentRef = 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
+
+  useEffect(() => {
+    if (!autoFocus) return
+
+    // On mount: focus the first interactive element in the contents
+    if (forwardedRef.current) {
+      focusFirstDescendant(forwardedRef.current)
+    }
+  }, [autoFocus, forwardedRef])
+
+  useGlobalKeyDown(
+    useCallback(
+      (event: KeyboardEvent) => {
+        if (!isTopLayer || !onClose) return
+
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          onClose()
+        }
+      },
+      [isTopLayer, onClose]
+    )
+  )
+
+  useClickOutside(
+    useCallback(() => {
+      if (!isTopLayer || !onClickOutside) return
+
+      onClickOutside()
+    }, [isTopLayer, onClickOutside]),
+    [rootElement]
+  )
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      setRootElement(el)
+      forwardedRef.current = el
+    },
+    [forwardedRef]
+  )
+
+  const setContentRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      localContentRef.current = el
+      if (typeof contentRef === 'function') contentRef(el)
+      else if (contentRef) contentRef.current = el
+    },
+    [contentRef]
+  )
+
+  return (
+    <DialogContainer data-ui="DialogCard" width={width}>
+      <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
+        <DialogLayout direction="column">
+          {showHeader && (
+            <DialogHeader>
+              <Flex>
+                <Box flex={1} padding={4}>
+                  {header && (
+                    <Text id={labelId} weight="semibold">
+                      {header}
+                    </Text>
+                  )}
+                </Box>
+                {showCloseButton && (
+                  <Box padding={2}>
+                    <Button
+                      aria-label="Close dialog"
+                      disabled={!onClose}
+                      icon={CloseIcon}
+                      mode="bleed"
+                      onClick={onClose}
+                      padding={3}
+                    />
+                  </Box>
+                )}
+              </Flex>
+            </DialogHeader>
+          )}
+
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
+            {children}
+          </DialogContent>
+
+          {footer && <DialogFooter>{footer}</DialogFooter>}
+        </DialogLayout>
+      </DialogCardRoot>
+    </DialogContainer>
+  )
+})
+
+/**
+ * @public
+ */
+export const Dialog = forwardRef(function Dialog(
+  props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const dialog = useDialog()
+  const theme = useTheme()
+  const {
+    __unstable_autoFocus: autoFocus = true,
+    __unstable_hideCloseButton: hideCloseButton = false,
+    cardRadius = 3,
+    cardShadow = 4,
+    children,
+    contentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    padding = 4,
+    portal,
+    position = dialog.position || 'fixed',
+    scheme,
+    width = 0,
+    zOffset = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    ...restProps
+  } = props
+  const preDivRef = useRef<HTMLDivElement | null>(null)
+  const postDivRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+    const target = event.target
+    const cardElement = cardRef.current
+
+    if (!cardElement) {
+      return
+    }
+
+    if (target === preDivRef.current) {
+      focusLastDescendant(cardElement)
+
+      return
+    }
+
+    if (target === postDivRef.current) {
+      focusFirstDescendant(cardElement)
+
+      return
+    }
+  }, [])
+
+  const labelId = `${id}_label`
+
+  return (
+    <Portal __unstable_name={portal}>
+      <Root
+        {...restProps}
+        $padding={padding}
+        $position={position}
+        aria-labelledby={labelId}
+        aria-modal
+        data-ui="Dialog"
+        id={id}
+        onFocus={handleFocus}
+        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}
+          radius={cardRadius}
+          ref={cardRef}
+          scheme={scheme}
+          shadow={cardShadow}
+          width={width}
+        >
+          {children}
+        </DialogCard>
+        <div ref={postDivRef} tabIndex={0} />
+      </Root>
+    </Portal>
+  )
+})

package/src/components/dialog/dialogContext.ts

@@ -0,0 +1,22 @@
+import {createContext} from 'react'
+import {globalScope} from '../../lib/globalScope'
+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[]
+}
+
+const key = Symbol.for('@sanity/ui/context/dialog')
+
+globalScope[key] = globalScope[key] || createContext<DialogContextValue>({version: 0.0})
+
+/**
+ * @internal
+ */
+export const DialogContext: React.Context<DialogContextValue> = globalScope[key]

package/src/components/dialog/dialogProvider.tsx

@@ -0,0 +1,32 @@
+import React, {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>
+}

package/src/components/dialog/index.ts

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

package/src/components/dialog/styles.ts

@@ -0,0 +1,38 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, responsive, ThemeProps} from '../../styles'
+import {DialogPosition} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveDialogPositionStyleProps {
+  $position: DialogPosition | DialogPosition[]
+}
+
+export function dialogStyle({theme}: ThemeProps): CSSObject {
+  const color = theme.sanity.color.base
+
+  return {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    background: color.shadow.penumbra,
+  }
+}
+
+export function responsiveDialogPositionStyle(
+  props: ResponsiveDialogPositionStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$position), (position) => ({'&&': {position}}))
+}

package/src/components/dialog/useDialog.ts

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

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

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

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

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

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

package/src/components/hotkeys/hotkeys.tsx

@@ -0,0 +1,53 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {Inline, KBD} from '../../primitives'
+
+/**
+ * @public
+ */
+export interface HotkeysProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: number | number[]
+  space?: number | number[]
+  keys?: string[]
+}
+
+const Root = styled.kbd`
+  &:not([hidden]) {
+    display: block;
+  }
+  font: inherit;
+`
+
+const Key = styled(KBD)`
+  &:not([hidden]) {
+    display: block;
+  }
+`
+
+/**
+ * @public
+ */
+export const Hotkeys = forwardRef(function Hotkeys(
+  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+  ref: React.Ref<HTMLElement>
+) {
+  const {fontSize, keys, padding, radius, space = 1, ...restProps} = props
+
+  if (!keys || keys.length === 0) {
+    return <></>
+  }
+
+  return (
+    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+      <Inline as="span" space={space}>
+        {keys.map((key, i) => (
+          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
+            {key}
+          </Key>
+        ))}
+      </Inline>
+    </Root>
+  )
+})

package/src/components/hotkeys/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,9 @@
+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/components/menu/__workshop__/.eslintrc

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

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

@@ -0,0 +1,44 @@
+import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+): React.ReactElement {
+  const {children, req, ...restProps} = props
+
+  return (
+    <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} tone="primary">
+              <Text>Component 1</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+              <Text>Component 2</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+              <Text>Component 3</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+              <Text>Component 3</Text>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,42 @@
+import {AddIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
+import React, {useRef} from 'react'
+
+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={{constrainSize: true}}
+          ref={ref}
+        />
+      </Stack>
+    </Box>
+  )
+}