@sanity/ui 0.37.2 → 0.37.3

package/src/components/autocomplete/autocompleteReducer.ts

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

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

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

package/src/components/autocomplete/types.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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