@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/ui/components/autocomplete/autocompleteOption.tsx

@@ -0,0 +1,45 @@
+import {KeyboardEvent, ReactElement, ReactNode, useCallback} from 'react'
+
+import {_isEnterToClickElement} from '../../helpers'
+
+export interface AutocompleteOptionProps {
+  children: ReactNode
+  id: string
+  onSelect: (v: string) => void
+  selected: boolean
+  value: string
+}
+
+export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement {
+  const {children, id, onSelect, selected, value} = props
+
+  const handleClick = useCallback(() => {
+    // Calling the `onSelect` in a timeout is a fix to
+    // allow the `click` event to propagate in some cases
+    setTimeout(() => {
+      onSelect(value)
+    }, 0)
+  }, [onSelect, value])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLLIElement>) => {
+      if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
+        handleClick()
+      }
+    },
+    [handleClick],
+  )
+
+  return (
+    <li
+      aria-selected={selected}
+      data-ui="AutocompleteOption"
+      id={id}
+      role="option"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </li>
+  )
+}

package/src/ui/components/autocomplete/types.ts

@@ -0,0 +1,108 @@
+import {ButtonProps} from '../../primitives'
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
+
+/**
+ * @public
+ */
+export interface BaseAutocompleteOption {
+  value: string
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteState {
+  activeValue: string | null
+  focused: boolean
+  listFocused: boolean
+  query: string | null
+  value: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootBlurMsg {
+  type: 'root/blur'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootClearMsg {
+  type: 'root/clear'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootEscapeMsg {
+  type: 'root/escape'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootOpenMsg {
+  type: 'root/open'
+  query: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue'
+  value: string
+  listFocused?: boolean
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused'
+  listFocused: boolean
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteInputChangeMsg {
+  type: 'input/change'
+  query: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteInputFoocusMsg {
+  type: 'input/focus'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteValueChangeMsg {
+  type: 'value/change'
+  value: string | null
+}
+
+/**
+ * @internal
+ */
+export type AutocompleteMsg =
+  | AutocompleteRootBlurMsg
+  | AutocompleteRootClearMsg
+  | AutocompleteRootEscapeMsg
+  | AutocompleteRootOpenMsg
+  | AutocompleteRootSetActiveValueMsg
+  | AutocompleteRootSetListFocusedMsg
+  | AutocompleteInputChangeMsg
+  | AutocompleteInputFoocusMsg
+  | AutocompleteValueChangeMsg

package/src/ui/components/breadcrumbs/__workshop__/example.tsx

@@ -0,0 +1,62 @@
+import {Breadcrumbs, Flex, Text} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
+  '(none)': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+}
+
+export default function Example() {
+  const maxLength =
+    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Breadcrumbs
+        maxLength={maxLength}
+        separator={
+          <Text muted size={1}>
+            /
+          </Text>
+        }
+        space={2}
+      >
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Root</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category A</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category B</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category C</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category D</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category E</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category F</a>
+        </Text>
+        <Text size={1}>Item</Text>
+      </Breadcrumbs>
+    </Flex>
+  )
+}

package/src/ui/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,127 @@
+import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {
+  Children,
+  ForwardedRef,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {useClickOutsideEvent} from '../../hooks'
+import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
+import {Props} from '../../types'
+
+/**
+ * @beta
+ */
+export interface BreadcrumbsProps extends GapStyleProps {
+  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
+  maxLength?: number
+  separator?: ReactNode
+  /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
+  space?: number | number[]
+}
+
+/**
+ * @beta
+ */
+export const Breadcrumbs = forwardRef(function Breadcrumbs(
+  props: Props<BreadcrumbsProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    children,
+    className,
+    expandButton: expandButtonProps,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    gap: _gapProp,
+    gapX = props.gap ?? (props.space as Space | undefined) ?? 2,
+    gapY = props.gap ?? (props.space as Space | undefined) ?? 2,
+    maxLength,
+    separator,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    space: _spaceProp,
+    ...restProps
+  } = props
+  const [open, setOpen] = useState(false)
+  const expandElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+
+  const collapse = useCallback(() => setOpen(false), [])
+  const expand = useCallback(() => setOpen(true), [])
+
+  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
+
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
+
+  const items = useMemo(() => {
+    const len = rawItems.length
+
+    if (maxLength && len > maxLength) {
+      const beforeLength = Math.ceil(maxLength / 2)
+      const afterLength = Math.floor(maxLength / 2)
+
+      return [
+        ...rawItems.slice(0, beforeLength - 1),
+        <Popover
+          constrainSize
+          content={
+            <Stack as="ol" overflow="auto" space={gapY}>
+              {rawItems.slice(beforeLength - 1, len - afterLength)}
+            </Stack>
+          }
+          key="button"
+          open={open}
+          padding={2}
+          placement="top"
+          portal
+          ref={popoverElementRef}
+        >
+          <Button
+            mode="bleed"
+            padding={0}
+            text="…"
+            {...expandButtonProps}
+            onClick={open ? collapse : expand}
+            ref={expandElementRef}
+            selected={open}
+          />
+        </Popover>,
+        ...rawItems.slice(len - afterLength),
+      ]
+    }
+
+    return rawItems
+  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
+
+  return (
+    <Flex
+      as="nav"
+      data-ui="Breadcrumbs"
+      {...restProps}
+      className={composeClassNames(className, breadcrumbs())}
+      gapX={gapX}
+      gapY={gapY}
+      ref={ref}
+    >
+      {items.map((item, itemIndex) => (
+        <Fragment key={itemIndex}>
+          {itemIndex > 0 && (
+            <Box aria-hidden as="li">
+              {separator || <Text muted>/</Text>}
+            </Box>
+          )}
+          <Box as="li">{item}</Box>
+        </Fragment>
+      ))}
+    </Flex>
+  )
+})
+
+Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

package/src/ui/components/dialog/__workshop__/activate.tsx

@@ -0,0 +1,134 @@
+import {useState} from 'react'
+
+import {Button, Flex, Stack, Text} from '../../../primitives'
+import {Layer, LayerProvider} from '../../../utils'
+import {Menu, MenuButton, MenuItem} from '../../menu'
+import {Dialog} from '../dialog'
+
+export default function LayeringFocusStory() {
+  const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
+  const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
+  const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
+  const [fourthDialogOpen, setFourthDialogOpen] = useState<boolean>(false)
+
+  return (
+    <LayerProvider>
+      <Flex align="center" height="fill" justify="center">
+        <Layer onActivate={({activeElement}) => activeElement?.focus()}>
+          <Button
+            text="Open dialog 1"
+            onClick={() => setFirstDialogOpen(true)}
+            id="open-dialog-1-button"
+          />
+
+          {firstDialogOpen && (
+            <Dialog
+              header="Dialog 1"
+              id="1"
+              onActivate={({activeElement}) => activeElement?.focus()}
+              onClose={() => setFirstDialogOpen(false)}
+            >
+              <Stack space={2} padding={3}>
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-1"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-2"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-3"
+                />
+              </Stack>
+
+              {secondDialogOpen && (
+                <Dialog
+                  header="Dialog 2"
+                  id="2"
+                  onActivate={({activeElement}) => activeElement?.focus()}
+                  onClose={() => setSecondDialogOpen(false)}
+                >
+                  <Stack space={2} padding={3}>
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-1"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-2"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-3"
+                    />
+                  </Stack>
+
+                  {thirdDialogOpen && (
+                    <Dialog
+                      header="Dialog 3"
+                      id="3"
+                      onActivate={({activeElement}) => activeElement?.focus()}
+                      onClose={() => setThirdDialogOpen(false)}
+                    >
+                      <Stack space={2} padding={3}>
+                        <MenuButton
+                          id="menu"
+                          button={
+                            <Button mode="ghost" text="Open menu" id="open-dialog-4-menu-button" />
+                          }
+                          menu={
+                            <Menu>
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                            </Menu>
+                          }
+                        />
+                      </Stack>
+
+                      {fourthDialogOpen && (
+                        <Dialog
+                          header="Dialog 4"
+                          id="4"
+                          onActivate={({activeElement}) => activeElement?.focus()}
+                          onClose={() => setFourthDialogOpen(false)}
+                        >
+                          <Stack space={2} padding={3}>
+                            <Text>👋</Text>
+                          </Stack>
+                        </Dialog>
+                      )}
+                    </Dialog>
+                  )}
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Layer>
+      </Flex>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,72 @@
+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 shadow={1} header="Dialog 1" id="dialog1">
+          <Box padding={4}>
+            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
+          </Box>
+
+          {open2 && (
+            <Dialog
+              animate
+              shadow={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
+                  shadow={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/ui/components/dialog/__workshop__/onScroll.tsx

@@ -0,0 +1,39 @@
+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} paddingTop={1}>
+          <Text muted>
+            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/ui/components/dialog/__workshop__/panes.tsx

@@ -0,0 +1,82 @@
+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>
+  )
+}