@sanity/ui 0.36.13 → 0.36.16

package/src/components/autocomplete/autocompleteReducer.ts

@@ -0,0 +1,50 @@
+import {AutocompleteMsg, AutocompleteState} from './types'
+
+/**
+ * @internal
+ */
+export function autocompleteReducer(
+  state: AutocompleteState,
+  msg: AutocompleteMsg
+): AutocompleteState {
+  if (msg.type === 'input/change') {
+    return {...state, activeValue: null, focused: true, query: msg.query}
+  }
+
+  if (msg.type === 'input/focus') {
+    return {...state, focused: true}
+  }
+
+  if (msg.type === 'root/blur') {
+    return {...state, focused: false, query: null}
+  }
+
+  if (msg.type === 'root/clear') {
+    return {...state, activeValue: null, query: null, value: null}
+  }
+
+  if (msg.type === 'root/escape') {
+    return {...state, focused: false, query: null}
+  }
+
+  if (msg.type === 'root/open') {
+    return {...state, query: state.query || msg.query}
+  }
+
+  if (msg.type === 'root/setActiveValue') {
+    return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}
+  }
+
+  if (msg.type === 'root/setListFocused') {
+    // prevent unnecessary re-render
+    if (state.listFocused === msg.listFocused) return state
+
+    return {...state, listFocused: msg.listFocused}
+  }
+
+  if (msg.type === 'value/change') {
+    return {...state, activeValue: msg.value, query: null, value: msg.value}
+  }
+
+  return state
+}

package/src/components/autocomplete/constants.ts

@@ -0,0 +1,38 @@
+import {Placement, PopoverMargins} from '../../types'
+
+/**
+ * @internal
+ */
+export const EMPTY_RECORD = {}
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
+  'Control',
+  'Shift',
+  'Alt',
+  'Enter',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+  'Meta',
+  'Tab',
+  'CapsLock',
+]
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 1, 1]
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['top-start']

package/src/components/autocomplete/index.ts

@@ -0,0 +1,2 @@
+export * from './autocomplete'
+export * from './types'

package/src/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/components/breadcrumbs/__workshop__/.eslintrc

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

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

@@ -0,0 +1,56 @@
+import {Breadcrumbs, Flex, Text} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+
+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}>
+          <a href="#">Root</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category A</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category B</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category C</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category D</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category E</a>
+        </Text>
+        <Text size={1}>
+          <a href="#">Category F</a>
+        </Text>
+        <Text size={1}>Item</Text>
+      </Breadcrumbs>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,10 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('components/breadcrumbs', 'Breadcrumbs', [
+  {
+    name: 'example',
+    title: 'Example',
+    component: lazy(() => import('./example')),
+  },
+])

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+import {Button} from '../../primitives'
+
+export const Root = 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/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,101 @@
+import React, {
+  Children,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import {useClickOutside} from '../../hooks'
+import {Box, Popover, Stack, Text} from '../../primitives'
+import {ExpandButton, Root} 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 = 2, ...restProps} = props
+  const [open, setOpen] = useState(false)
+  const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  const collapse = useCallback(() => setOpen(false), [])
+  const expand = useCallback(() => setOpen(true), [])
+
+  useClickOutside(collapse, [expandElement, popoverElement])
+
+  const rawItems = useMemo(
+    () =>
+      Children.toArray(children).filter((child) => {
+        return isValidElement(child)
+      }),
+    [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={setPopoverElement}
+        >
+          <ExpandButton
+            fontSize={1}
+            mode="bleed"
+            onClick={open ? collapse : expand}
+            padding={1}
+            ref={setExpandElement}
+            selected={open}
+            text="…"
+          />
+        </Popover>,
+        ...rawItems.slice(len - afterLength),
+      ]
+    }
+
+    return rawItems
+  }, [collapse, expand, maxLength, open, rawItems, space])
+
+  return (
+    <Root 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>
+      ))}
+    </Root>
+  )
+})

package/src/components/breadcrumbs/index.ts

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

package/src/components/dialog/__workshop__/.eslintrc

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

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

@@ -0,0 +1,30 @@
+import {Box, Button, Dialog, Text} from '@sanity/ui'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
+import React from 'react'
+
+export default function AutoFocusStory() {
+  const autoFocus = useBoolean('Auto-focus', true, 'Props')
+  const open = useBoolean('Open', false, 'Props')
+  const handleClose = useAction('onClose')
+
+  if (!open) {
+    return (
+      <Box padding={4}>
+        <Text muted>Use knobs to open the dialog</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Dialog
+      __unstable_autoFocus={autoFocus}
+      header="Auto-focus example"
+      id="auto-focus-example"
+      onClose={handleClose}
+    >
+      <Box padding={4}>
+        <Button text="Focusable button" />
+      </Box>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,12 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('components/dialog', 'Dialog', [
+  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+  {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
+  {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
+  {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
+  {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
+  {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
+  {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
+])

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

@@ -0,0 +1,38 @@
+import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+import React from 'react'
+
+export default function LayeringStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <LayerProvider>
+        <Layer zOffset={10} id="a">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Layer zOffset={10} id="b">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Dialog
+          header="Layering example"
+          id="layering-example"
+          onClose={useAction('onEscape')}
+          zOffset={100}
+        >
+          <Box padding={4}>
+            <DebugLayer />
+          </Box>
+        </Dialog>
+      </LayerProvider>
+    </Box>
+  )
+}
+
+function DebugLayer() {
+  const layer = useLayer()
+
+  return <Code language="json">{JSON.stringify(layer, null, 2)}</Code>
+}

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

@@ -0,0 +1,51 @@
+import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import React, {useState} from 'react'
+
+export default function NestedStory() {
+  const [open1] = useState(true)
+  const [open2, setOpen2] = useState(false)
+  const [open3, setOpen3] = useState(false)
+
+  return (
+    <LayerProvider>
+      {open1 && (
+        <Dialog cardShadow={1} header="Dialog 1" id="dialog1">
+          <Box padding={4}>
+            <Button onClick={() => setOpen2(true)} text="Open Dialog 2" />
+          </Box>
+
+          {open2 && (
+            <Dialog cardShadow={2} header="Dialog 2" id="dialog2" onClose={() => setOpen2(false)}>
+              <Box padding={4}>
+                <Button onClick={() => setOpen3(true)} text="Open Dialog 3" />
+              </Box>
+
+              {open3 && (
+                <Dialog
+                  cardShadow={4}
+                  header="Dialog 3"
+                  id="dialog3"
+                  onClose={() => setOpen3(false)}
+                >
+                  <Box padding={4}>
+                    <MenuButton
+                      button={<Button text="Test" />}
+                      id="menu3"
+                      menu={
+                        <Menu>
+                          <MenuItem text="Test" />
+                          <MenuItem text="Test" />
+                        </Menu>
+                      }
+                      portal
+                    />
+                  </Box>
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,39 @@
+import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+import React, {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/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 React from 'react'
+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/components/dialog/__workshop__/props.tsx

@@ -0,0 +1,74 @@
+import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React, {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>
+  )
+}