@sanity/ui 3.0.0-static.8 → 3.0.0

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

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

@@ -1,108 +0,0 @@
-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/breadcrumbs.tsx

@@ -1,127 +0,0 @@
-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/breadcrumbs/index.ts

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

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

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

@@ -1,39 +0,0 @@
-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__/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 {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/ui/components/dialog/__workshop__/props.tsx

@@ -1,77 +0,0 @@
-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 animate = useBoolean('Animate', false, 'Props')
-  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}
-            animate={animate}
-            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>
-  )
-}