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

package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -9,8 +9,9 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
+
 import {Popover} from '../../../primitives'
-import countries from '../__fixtures__/countries'
+import countries from '../__mocks__/countries'
 import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
 
@@ -26,6 +27,7 @@ export default function ConstrainedHeightStory() {
           radius={3}
           shadow={3}
           style={{position: 'relative'}}
+          tone="default"
           // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
         >
           <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
@@ -81,7 +83,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
     (
       popoverProps: {
-        content: React.ReactElement | null
+        content: React.JSX.Element | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void

package/src/core/components/autocomplete/__workshop__/custom.tsx

@@ -2,12 +2,13 @@ import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} f
 import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
+
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import countries from '../__fixtures__/countries'
+} from '../../../../../workshop/constants'
+import countries from '../__mocks__/countries'
 import {ExampleOption} from './types'
 
 export default function CustomStory() {

package/src/core/components/autocomplete/__workshop__/example.tsx

@@ -4,13 +4,14 @@ import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
+
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import countries from '../__fixtures__/countries'
+} from '../../../../../workshop/constants'
+import countries from '../__mocks__/countries'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',

package/src/core/components/autocomplete/__workshop__/fullscreen.tsx

@@ -19,6 +19,7 @@ import {
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function Fullscreen() {

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

@@ -3,16 +3,15 @@ import {ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
 import {
   ChangeEvent,
+  cloneElement,
   ElementType,
   FocusEvent,
-  HTMLProps,
+  ForwardedRef,
+  forwardRef,
   KeyboardEvent,
   MouseEvent,
   ReactElement,
   ReactNode,
-  Ref,
-  cloneElement,
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -20,6 +19,7 @@ import {
   useReducer,
   useRef,
 } from 'react'
+
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
 import {useArrayProp} from '../../hooks'
@@ -35,7 +35,7 @@ import {
   TextInput,
 } from '../../primitives'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Radius} from '../../types'
+import {Props, Radius} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -51,6 +51,7 @@ import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
 export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
   border?: boolean
   customValidity?: string
+  disabled?: boolean
   filterOption?: (query: string, option: Option) => boolean
   fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType | ReactNode
@@ -69,24 +70,25 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   options?: Option[]
   padding?: ResponsiveProp<Space>
   // padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
+  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
   prefix?: ReactNode
   radius?: Radius | Radius[]
+  readOnly?: boolean
+  ref?: ForwardedRef<HTMLInputElement>
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: Ref<HTMLDivElement>,
+    ref: ForwardedRef<HTMLDivElement>,
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
@@ -103,36 +105,29 @@ const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
 const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   Option extends BaseAutocompleteOption,
 >(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+  props: Omit<
+    Props<AutocompleteProps<Option>, 'div'>,
+    | 'aria-activedescendant'
+    | 'aria-autocomplete'
+    | 'aria-expanded'
+    | 'aria-owns'
+    | 'as'
+    | 'autoCapitalize'
+    | 'autoComplete'
+    | 'autoCorrect'
+    | 'inputMode'
+    | 'role'
+    | 'spellCheck'
+    | 'type'
+  >,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
 ) {
   const {
     border = true,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 2,
+    fontSize = 1,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -171,7 +166,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card data-as="button" padding={paddingProp} radius={2} tone="inherit">
+      <Card
+        as="button"
+        // data-as="button"
+        padding={paddingProp}
+        radius={2}
+        tone="inherit"
+      >
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -470,12 +471,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         if (v === 2) return 1
 
         return (v as Space) - 2
-      }),
+      }) as Space[],
     [padding],
   )
 
   const openButtonPadding = useMemo(
-    () => padding.map((v) => Math.max((v as Space) - 1, 0)),
+    () => padding.map((v) => Math.max((v as Space) - 1, 0)) as Space[],
     [padding],
   )
 
@@ -502,6 +503,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           <Button
             aria-label="Open"
             disabled={expanded}
+            display="block"
             fontSize={fontSize}
             icon={ChevronDownIcon}
             mode="bleed"
@@ -686,6 +688,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   ])
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
@@ -708,28 +711,18 @@ InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
  * @public
  */
 export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    > & {
-      ref?: Ref<HTMLInputElement>
-    },
+  props: Omit<
+    Props<AutocompleteProps<Option>, 'input'>,
+    | 'aria-activedescendant'
+    | 'aria-autocomplete'
+    | 'aria-expanded'
+    | 'aria-owns'
+    | 'autoCapitalize'
+    | 'autoComplete'
+    | 'autoCorrect'
+    | 'inputMode'
+    | 'role'
+    | 'spellCheck'
+    | 'type'
+  >,
 ) => ReactElement

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

@@ -1,15 +1,16 @@
-import {useCallback} from 'react'
+import {KeyboardEvent, ReactElement, ReactNode, useCallback} from 'react'
+
 import {_isEnterToClickElement} from '../../helpers'
 
 export interface AutocompleteOptionProps {
-  children: React.ReactNode
+  children: ReactNode
   id: string
   onSelect: (v: string) => void
   selected: boolean
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement {
+export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {
@@ -21,7 +22,7 @@ export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactE
   }, [onSelect, value])
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLLIElement>) => {
+    (event: KeyboardEvent<HTMLLIElement>) => {
       if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
         handleClick()
       }

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

@@ -1,10 +1,10 @@
 import {ButtonProps} from '../../primitives'
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+export type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
 
 /**
  * @public

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

@@ -28,24 +28,31 @@ export default function Example() {
         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>

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

@@ -1,8 +1,21 @@
 import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {Children, forwardRef, isValidElement, useCallback, useMemo, useRef, useState} from 'react'
+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
@@ -10,7 +23,7 @@ import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primit
 export interface BreadcrumbsProps extends GapStyleProps {
   expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
   maxLength?: number
-  separator?: React.ReactNode
+  separator?: ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
@@ -19,8 +32,8 @@ export interface BreadcrumbsProps extends GapStyleProps {
  * @beta
  */
 export const Breadcrumbs = forwardRef(function Breadcrumbs(
-  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
-  ref: React.ForwardedRef<HTMLOListElement>,
+  props: Props<BreadcrumbsProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
@@ -87,24 +100,27 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
     return rawItems
   }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
 
-  const len = items.length
-
   return (
-    <nav
+    <Flex
+      as="nav"
       data-ui="Breadcrumbs"
       {...restProps}
       className={composeClassNames(className, breadcrumbs())}
+      gapX={gapX}
+      gapY={gapY}
       ref={ref}
     >
-      <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
-        {items.map((item, itemIndex) => (
-          <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
-            <Box>{item}</Box>
-            {itemIndex < len - 1 && <Box aria-hidden>{separator || <Text muted>/</Text>}</Box>}
-          </Flex>
-        ))}
-      </Flex>
-    </nav>
+      {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>
   )
 })
 

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

@@ -1,5 +1,6 @@
 import {useState} from 'react'
-import {Stack, Flex, Button, Text} from '../../../primitives'
+
+import {Button, Flex, Stack, Text} from '../../../primitives'
 import {Layer, LayerProvider} from '../../../utils'
 import {Menu, MenuButton, MenuItem} from '../../menu'
 import {Dialog} from '../dialog'

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

@@ -20,7 +20,7 @@ export default function NestedStory() {
   return (
     <LayerProvider>
       {open1 && (
-        <Dialog animate cardShadow={1} header="Dialog 1" id="dialog1">
+        <Dialog animate shadow={1} header="Dialog 1" id="dialog1">
           <Box padding={4}>
             <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
           </Box>
@@ -28,7 +28,7 @@ export default function NestedStory() {
           {open2 && (
             <Dialog
               animate
-              cardShadow={2}
+              shadow={2}
               header="Dialog 2"
               id="dialog2"
               onClose={() => setOpen2(false)}
@@ -41,7 +41,7 @@ export default function NestedStory() {
               {open3 && (
                 <Dialog
                   animate
-                  cardShadow={4}
+                  shadow={4}
                   header="Dialog 3"
                   id="dialog3"
                   onClose={() => setOpen3(false)}

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

@@ -19,8 +19,8 @@ export default function OnScrollStory() {
   return (
     <LayerProvider>
       <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4}>
-          <Text>
+        <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,

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,5 +1,6 @@
 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'

package/src/core/components/dialog/__workshop__/position.tsx

@@ -1,7 +1,8 @@
 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'
+
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PositionStory() {
   const open = useBoolean('Open', true, 'Props')

package/src/core/components/dialog/__workshop__/props.tsx

@@ -1,7 +1,8 @@
 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'
+
+import {WORKSHOP_WIDTH_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PropsStory() {
   const animate = useBoolean('Animate', false, 'Props')

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,7 +1,5 @@
+import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
 import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Box, Button} from '../../../primitives'
-import {LayerProvider, useLayer} from '../../../utils'
-import {Dialog, DialogProps} from '../dialog'
 
 export default function WrappedStory() {
   return (