@sanity/ui 4.0.0-static.31 → 4.0.0-static.32

package/src/core/components/tree/TreeItem.tsx

@@ -7,12 +7,12 @@ import {
   type MouseEvent,
   type MouseEventHandler,
   type ReactNode,
-  type Ref,
   useCallback,
   useEffect,
   useId,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 
 import {Box, type BoxProps} from '../../primitives/box/Box'
@@ -81,17 +81,19 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
     ...rest
   } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
 
-  const rootRef = useRef<HTMLElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
-  const itemKey = itemPath.join('/')
+  const [itemPath, itemKey] = useMemo(() => {
+    const itemPath = path.concat([id || ''])
+    return [itemPath, itemPath.join('/')]
+  }, [id, path])
   const itemState = tree.state[itemKey]
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  const focused = tree.focusedElement && tree.focusedElement === rootElement
   const tabIndex = focused ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
@@ -111,28 +113,28 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       ) {
         event.stopPropagation()
         setExpanded(itemKey, !expanded)
-        setFocusedElement(rootRef.current)
+        setFocusedElement(rootElement)
       }
     },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
+    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootRef.current
+        const el = treeitemRef.current || rootElement
 
         el?.click()
       }
     },
-    [focused],
+    [focused, rootElement],
   )
 
   useEffect(() => {
-    if (!rootRef.current) return
+    if (!rootElement) return
 
-    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, selected])
+    return registerItem(rootElement, itemKey, expanded, selected)
+  }, [expanded, itemKey, registerItem, rootElement, selected])
 
   const content = (
     <Flex gap={space} padding={padding}>
@@ -172,7 +174,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         as="li"
         className={treeItem({className})}
         onClick={handleClick}
-        ref={rootRef as Ref<HTMLLIElement>}
+        ref={setRootElement}
         role="none"
       >
         <Selectable
@@ -211,7 +213,8 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       className={treeItem({className})}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef as Ref<HTMLAnchorElement>}
+      // @ts-expect-error - TODO: fix this
+      ref={setRootElement}
       role="treeitem"
       tabIndex={tabIndex}
     >

package/src/core/components/virtualList/VirtualList.tsx

@@ -3,6 +3,7 @@ import type {Space} from '@sanity/ui/theme'
 import {
   type CSSProperties,
   type ReactNode,
+  startTransition,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -29,7 +30,10 @@ export interface VirtualListChangeOpts {
 }
 
 /** @beta */
-export type VirtualListOwnProps<Item = any> = {
+export type VirtualListOwnProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Item = any,
+> = {
   gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
@@ -113,6 +117,7 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
     window.addEventListener('scroll', handleScroll, {passive: true})
     window.addEventListener('resize', handleResize)
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setScrollHeight(window.innerHeight)
 
     handleScroll()
@@ -141,51 +146,21 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
 
   useEffect(() => {
     // console.log('renderItem', renderItem)
-    setItemHeight(-1)
+    startTransition(() => setItemHeight(-1))
   }, [renderItem])
 
-  const children = useMemo(() => {
-    if (!renderItem || items.length === 0) return null
-
-    if (itemHeight === -1) {
-      return [
-        <>
-          <Box
-            ref={(el) => (el ? setItemHeight(el.offsetHeight) : undefined)}
-            insetTop={0}
-            insetLeft={0}
-            insetRight={0}
-            key={0}
-            position="absolute"
-          >
-            {renderItem(items[0])}
-          </Box>
-          <div
-            ref={(el) => (el ? setGapValue(el.offsetHeight) : undefined)}
-            style={{height: vars.space[gap]}}
-          />
-        </>,
-      ]
-    }
-
-    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-      const itemIndex = fromIndex + _itemIndex
-      const node = renderItem(item)
-      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-      return (
-        <Box
-          insetLeft={0}
-          insetRight={0}
-          key={key}
-          position="absolute"
-          style={{top: itemIndex * (itemHeight + gapValue)}}
-        >
-          {node}
-        </Box>
-      )
-    })
-  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
+  const children = useChildren({
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight,
+  })
 
   const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
@@ -198,6 +173,73 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
   )
 }
 
+function useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  toIndex,
+  gapValue,
+  setGapValue,
+  setItemHeight,
+}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
+  Required<Pick<VirtualListProps, 'items'>> & {
+    fromIndex: number
+    gap: Space
+    itemHeight: number
+    toIndex: number
+    gapValue: number
+    setGapValue: React.Dispatch<React.SetStateAction<number>>
+    setItemHeight: React.Dispatch<React.SetStateAction<number>>
+  }) {
+  if (!renderItem || items.length === 0) return null
+
+  if (itemHeight === -1) {
+    return [
+      <>
+        <Box
+          ref={(el) => {
+            if (el) setItemHeight(el.offsetHeight)
+          }}
+          insetTop={0}
+          insetLeft={0}
+          insetRight={0}
+          key={0}
+          position="absolute"
+        >
+          {renderItem(items[0])}
+        </Box>
+        <div
+          ref={(el) => {
+            if (el) setGapValue(el.offsetHeight)
+          }}
+          style={{height: vars.space[gap]}}
+        />
+      </>,
+    ]
+  }
+
+  return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+    const itemIndex = fromIndex + _itemIndex
+    const node = renderItem(item)
+    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+    return (
+      <Box
+        insetLeft={0}
+        insetRight={0}
+        key={key}
+        position="absolute"
+        style={{top: itemIndex * (itemHeight + gapValue)}}
+      >
+        {node}
+      </Box>
+    )
+  })
+}
+
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode
 

package/src/core/hooks/useGlobalKeyDown.ts

@@ -2,16 +2,23 @@ import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
 /**
+ * Adds global keydown event listener to the window.
+ *
+ * @param onKeyDown - The function to call when a keydown event is triggered.
+ * @param options - The options to pass to the addEventListener function (example, capture: true)
  * @beta
  */
-export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
+export function useGlobalKeyDown(
+  onKeyDown: (event: KeyboardEvent) => void,
+  options?: AddEventListenerOptions,
+): void {
   const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))
 
   useEffect(() => {
     const handler = (event: KeyboardEvent) => handleKeyDown(event)
 
-    window.addEventListener('keydown', handler)
+    window.addEventListener('keydown', handler, options)
 
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
+    return () => window.removeEventListener('keydown', handler, options)
+  }, [options])
 }

package/src/core/lib/createGlobalScopedContext.ts

@@ -1,7 +1,7 @@
 /**
  * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
  * it's critical that vital react contexts are shared even when there is a duplicate.
- * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
+ * If we used a model similar to `sanity` itself this would be unnecessary as
  * those libraries enforce single instances.
  * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
  * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
@@ -16,7 +16,7 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
   /**
    * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
    */
-  key: `@sanity/ui/v3/${string}`,
+  key: `@sanity/ui/v4/${string}`,
   defaultValue: T,
 ): Context<ContextType> {
   const symbol = Symbol.for(key)

package/src/core/primitives/avatar/Avatar.tsx

@@ -79,6 +79,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (src) setImageError(false)
   }, [src])
 

package/src/core/primitives/button/Button.tsx

@@ -63,7 +63,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     disabled,
     flex,
     fontSize = 1,
-    gap = props.padding ?? 3,
+    gap: _gap,
     gapX,
     gapY,
     icon: IconComponent,
@@ -90,6 +90,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     width,
     ...rest
   } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
+  const gap = _gap ?? props.padding ?? 3
 
   let href: string | undefined = undefined
 

package/src/core/primitives/button/__workshop__/SanityUploadButton.tsx

@@ -1,36 +1,21 @@
 import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
 
-const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
-  & input {
-    appearance: none;
-    overflow: hidden;
-    overflow: clip;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    max-width: 0;
-    width: -webkit-fill-available;
-    width: stretch;
-  }
-
-  & > span:nth-child(2) {
-    width: 0;
-    flex: none;
-    padding: 0;
-  }
-`
+import {sanityUploadButton} from './styles.css'
 
 export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
-      <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">
+      <Button
+        className={sanityUploadButton}
+        as="label"
+        htmlFor="file"
+        icon={UploadIcon}
+        tabIndex={0}
+        text="Upload"
+      >
         <input type="file" />
-      </SanityUploadButton>
+      </Button>
     </Flex>
   )
 }

package/src/core/primitives/button/__workshop__/Styled1.tsx

@@ -1,17 +1,11 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
 
-const StyledButton1 = styled.a`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
+import {styledButton1} from './styles.css'
 
 export default function StyledButton1Story(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
-      <Button as={StyledButton1} href="#" text="Test" />
+      <Button className={styledButton1} as="a" href="#" text="Test" />
     </Flex>
   )
 }

package/src/core/primitives/button/__workshop__/index.ts

@@ -15,11 +15,6 @@ const scope: WorkshopScope = {
       title: 'Styled #1',
       component: lazy(() => import('./Styled1')),
     },
-    {
-      name: 'styled-2',
-      title: 'Styled #2',
-      component: lazy(() => import('./Styled2')),
-    },
     {
       name: 'stacked',
       title: 'Stacked',

package/src/core/primitives/button/__workshop__/styles.css.ts

@@ -0,0 +1,30 @@
+import {globalStyle, style} from '@vanilla-extract/css'
+
+export const sanityUploadButton: string = style({})
+
+globalStyle(`${sanityUploadButton} input`, {
+  appearance: 'none',
+  overflow: ['hidden', 'clip'],
+  top: 0,
+  left: 0,
+  height: '100%',
+  opacity: 0,
+  position: 'absolute',
+  maxWidth: 0,
+  width: ['100%', '-moz-available', '-webkit-fill-available', 'stretch'],
+})
+
+globalStyle(`${sanityUploadButton} > span:nth-child(2)`, {
+  width: 0,
+  flex: 'none',
+  padding: 0,
+})
+
+export const styledButton1: string = style({
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'red',
+      boxShadow: 'none',
+    },
+  },
+})

package/src/core/primitives/card/CardContext.ts

@@ -7,4 +7,4 @@ import type {CardContextValue} from './types'
  * @internal
  */
 export const CardContext: Context<CardContextValue | null> =
-  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v3/card', null)
+  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v4/card', null)

package/src/core/primitives/card/__workshop__/Styled.tsx

@@ -1,14 +1,11 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 
 export default function StyledCardStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
-      <StyledCard>
+      <Card as="ol">
         <Text as="li">Styled</Text>
-      </StyledCard>
+      </Card>
     </Flex>
   )
 }

package/src/core/primitives/flex/__workshop__/Example.tsx

@@ -1,17 +1,9 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
 
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
 
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
+import {debugCard} from './styles.css'
 
 export default function ExampleStory(): React.JSX.Element {
   // @ts-expect-error - TODO: fix this
@@ -24,17 +16,17 @@ export default function ExampleStory(): React.JSX.Element {
       height="fill"
       style={{width: '100%'}}
     >
-      <DebugCard flex={1}>
+      <Card className={debugCard} flex={1}>
         <Code size={1}>1</Code>
-      </DebugCard>
+      </Card>
 
-      <DebugCard flex={[1, 2, 3]}>
+      <Card className={debugCard} flex={[1, 2, 3]}>
         <Code size={1}>[1,2,3]</Code>
-      </DebugCard>
+      </Card>
 
-      <DebugCard flex={['none', 'none', 1]}>
+      <Card className={debugCard} flex={['none', 'none', 1]}>
         <Code size={1}>['none', 'none', 1]</Code>
-      </DebugCard>
+      </Card>
     </Flex>
   )
 }

package/src/core/primitives/flex/__workshop__/styles.css.ts

@@ -0,0 +1,12 @@
+import {style} from '@vanilla-extract/css'
+
+export const debugCard: string = style({
+  outline: '1px solid red',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+  },
+})

package/src/core/primitives/inline/Inline.tsx

@@ -22,6 +22,7 @@ export type InlineOwnProps = Omit<
   | 'gridRow'
   | 'gridTemplateColumns'
   | 'gridTemplateRows'
+  // eslint-disable-next-line no-warning-comments
   // todo: omit deprecated flex and grid props
 >
 

package/src/core/primitives/layer/LayerContext.ts

@@ -4,4 +4,4 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {LayerContextValue} from './types'
 
 export const LayerContext: Context<LayerContextValue | null> =
-  createGlobalScopedContext<LayerContextValue | null>('@sanity/ui/v3/layer', null)
+  createGlobalScopedContext<LayerContextValue | null>('@sanity/ui/v4/layer', null)