@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -0,0 +1,45 @@
+import {useCallback} from 'react'
+
+import {_isEnterToClickElement} from '../../helpers'
+
+export interface AutocompleteOptionProps {
+  children: React.ReactNode
+  id: string
+  onSelect: (v: string) => void
+  selected: boolean
+  value: string
+}
+
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
+  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: React.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/core/components/autocomplete/types.ts

@@ -0,0 +1,108 @@
+import {ButtonProps} from '../../primitives'
+
+/**
+ * @public
+ */
+export type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+
+/**
+ * @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/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,18 @@
+import {styled} from 'styled-components'
+
+import {Button} from '../../primitives'
+
+export const StyledBreadcrumbs = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 0;
+`
+
+export const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,99 @@
+import {
+  Children,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {useArrayProp, useClickOutsideEvent} from '../../hooks'
+import {Box, Popover, Stack, Text} from '../../primitives'
+import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
+
+/**
+ * @beta
+ */
+export interface BreadcrumbsProps {
+  maxLength?: number
+  separator?: React.ReactNode
+  space?: number | number[]
+}
+
+/**
+ * @beta
+ */
+export const Breadcrumbs = forwardRef(function Breadcrumbs(
+  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
+  ref: React.ForwardedRef<HTMLOListElement>,
+) {
+  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
+  const space = useArrayProp(spaceRaw)
+  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" padding={space} space={space}>
+              {rawItems.slice(beforeLength - 1, len - afterLength)}
+            </Stack>
+          }
+          key="button"
+          open={open}
+          placement="top"
+          portal
+          ref={popoverElementRef}
+        >
+          <ExpandButton
+            fontSize={1}
+            mode="bleed"
+            onClick={open ? collapse : expand}
+            padding={1}
+            ref={expandElementRef}
+            selected={open}
+            text="…"
+          />
+        </Popover>,
+        ...rawItems.slice(len - afterLength),
+      ]
+    }
+
+    return rawItems
+  }, [collapse, expand, maxLength, open, rawItems, space])
+
+  return (
+    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
+      {items.map((item, itemIndex) => (
+        <Fragment key={itemIndex}>
+          {itemIndex > 0 && (
+            <Box aria-hidden as="li" paddingX={space}>
+              {separator || <Text muted>/</Text>}
+            </Box>
+          )}
+          <Box as="li">{item}</Box>
+        </Fragment>
+      ))}
+    </StyledBreadcrumbs>
+  )
+})
+Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

package/src/core/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 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

@@ -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}>
+          <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__/position.tsx

@@ -0,0 +1,30 @@
+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

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