@sanity/ui 3.0.0-static.27 → 3.0.0-static.28

package/src/core/components/menu/menuGroup.tsx

@@ -13,9 +13,12 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Popover, type PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box} from '../../primitives/box'
+import {Flex} from '../../primitives/flex'
+import {Popover, type PopoverProps} from '../../primitives/popover'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
@@ -199,13 +202,14 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
         {...rest}
         aria-pressed={as === 'button' ? withinMenu : undefined}
         as={as}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
+        // data-pressed={as !== 'button' ? withinMenu : undefined}
+        // data-selected={!withinMenu && active ? '' : undefined}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
         radius={radius}
         ref={setRootElement}
+        selected={withinMenu}
         tabIndex={-1}
         tone={tone}
         type={as === 'button' ? 'button' : undefined}

package/src/core/components/menu/menuItem.tsx

@@ -19,9 +19,11 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box} from '../../primitives/box'
+import {Flex} from '../../primitives/flex'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 

package/src/core/components/tab/tab.tsx

@@ -10,8 +10,8 @@ import {
   useRef,
 } from 'react'
 
-import {Button} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Button} from '../../primitives/button'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TAB_ELEMENT = 'button'

package/src/core/components/tab/tabList.tsx

@@ -9,8 +9,8 @@ import {
   useState,
 } from 'react'
 
-import {Flex, type FlexOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Flex, type FlexOwnProps} from '../../primitives/flex'
+import type {ComponentType, Props} from '../../types/props'
 import type {TabProps} from './tab'
 
 /** @public */

package/src/core/components/tab/tabPanel.tsx

@@ -1,5 +1,5 @@
-import {Box, type BoxOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../../primitives/box'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TAB_PANEL_ELEMENT = 'div'

package/src/core/components/toast/toast.tsx

@@ -4,8 +4,13 @@ import {motion, type Variant, type Variants} from 'framer-motion'
 import type {ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Box} from '../../primitives/box'
+import {Button} from '../../primitives/button'
+import {Card} from '../../primitives/card'
+import {Flex} from '../../primitives/flex'
+import {Stack} from '../../primitives/stack'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TOAST_ELEMENT = 'li'

package/src/core/components/toast/toastLayer.tsx

@@ -1,7 +1,8 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid, useLayer} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../primitives/layer'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @internal */
 export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'

package/src/core/components/toast/toastProvider.tsx

@@ -3,7 +3,7 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives'
+import {LayerProvider} from '../../primitives/layer'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'

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

@@ -11,8 +11,8 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Stack} from '../../primitives/stack'
+import type {ComponentType, Props} from '../../types/props'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import type {TreeContextValue, TreeState} from './types'

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

@@ -1,7 +1,7 @@
 import {memo, type ReactElement} from 'react'
 
-import {Stack} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Stack} from '../../primitives/stack'
+import type {ComponentType, Props} from '../../types/props'
 import {useTree} from './useTree'
 
 /** @public */

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

@@ -15,9 +15,12 @@ import {
   useRef,
 } from 'react'
 
-import {Box, type BoxProps, type CardOwnProps, Flex, Text} from '../../primitives'
 import {Selectable, type SelectableElementType} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box, type BoxProps} from '../../primitives/box'
+import type {CardOwnProps} from '../../primitives/card'
+import {Flex} from '../../primitives/flex'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -32,6 +35,7 @@ export type TreeItemOwnProps = CardOwnProps & {
   icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
+   * @internal
    */
   linkAs?: SelectableElementType
   onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
@@ -86,9 +90,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  const tabIndex = focused ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -174,12 +178,13 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         <Selectable
           aria-expanded={expanded}
           as={linkAs}
-          data-pressed={selected ? '' : undefined}
+          // data-pressed={selected ? '' : undefined}
           data-ui="TreeItem__box"
           href={href}
           radius={radius}
           ref={treeitemRef}
           role="treeitem"
+          selected={selected}
           tabIndex={tabIndex}
           style={{
             paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
@@ -212,9 +217,11 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
     >
       <Selectable
         as="button"
-        data-pressed={selected ? '' : undefined}
+        // data-pressed={selected ? '' : undefined}
+        data-focused={focused ? '' : undefined}
         data-ui="TreeItem__box"
         radius={radius}
+        selected={selected}
         style={{
           paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
         }}

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

@@ -19,7 +19,6 @@ export interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  // space: number | number[]
   space: ResponsiveProp<Space>
   state: TreeState
 }

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

@@ -10,10 +10,10 @@ import {
   useState,
 } from 'react'
 
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {Box} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {_isScrollable} from '../../helpers/scroll'
+import {_ResizeObserver} from '../../observers/resize'
+import {Box} from '../../primitives/box'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
@@ -139,6 +139,11 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
     })
   }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
 
+  useEffect(() => {
+    // console.log('renderItem', renderItem)
+    setItemHeight(-1)
+  }, [renderItem])
+
   const children = useMemo(() => {
     if (!renderItem || items.length === 0) return null
 
@@ -174,7 +179,7 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
           insetRight={0}
           key={key}
           position="absolute"
-          style={{top: itemIndex * (itemHeight + gapValue) - gapValue}}
+          style={{top: itemIndex * (itemHeight + gapValue)}}
         >
           {node}
         </Box>

package/src/core/helpers/focus.ts

@@ -7,10 +7,6 @@ import {
   isHTMLTextAreaElement,
 } from './element'
 
-// export const globalFocusState = {
-//   IgnoreUtilFocusChanges: false,
-// }
-
 /**
  * @internal
  */
@@ -56,16 +52,12 @@ export function attemptFocus(element: HTMLElement): boolean {
     return false
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = true
-
   try {
     element.focus()
   } catch {
     // ignore
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = false
-
   return document.activeElement === element
 }
 

package/src/core/hooks/useArrayProp.ts

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 
-import {_getArrayProp} from '../helpers'
+import {_getArrayProp} from '../helpers/props'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,8 +1,6 @@
-import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
+import {Box, Card, Code, Container, Grid, Stack, Text, useElementRect} from '@sanity/ui'
 import {useState} from 'react'
 
-import {Grid} from '../../../primitives'
-
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)

package/src/core/hooks/useElementSize.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-import {_elementSizeObserver, type ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSize'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useResponsiveProp.ts

@@ -1,7 +1,7 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
 import {useState} from 'react'
 
-import {_getResponsiveProp} from '../helpers'
+import {_getResponsiveProp} from '../helpers/props'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/core/index.ts

@@ -1,8 +1,84 @@
 export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './types'
-export * from './utils'
+
+// components
+export * from './components/autocomplete/autocomplete'
+export * from './components/autocomplete/types'
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/hotkeys'
+export * from './components/menu'
+export * from './components/tab'
+export * from './components/toast'
+export * from './components/tree'
+export * from './components/virtualList'
+
+// helpers
+export * from './helpers/animation'
+export * from './helpers/element'
+export * from './helpers/focus'
+export * from './helpers/props'
+export * from './helpers/scroll'
+
+// hooks
+export * from './hooks/useArrayProp'
+export * from './hooks/useClickOutside'
+export * from './hooks/useClickOutsideEvent'
+export * from './hooks/useCustomValidity'
+export * from './hooks/useElementRect'
+export * from './hooks/useElementSize'
+export * from './hooks/useForwardedRef'
+export * from './hooks/useGlobalKeyDown'
+export * from './hooks/useMatchMedia'
+export * from './hooks/useMediaIndex'
+export * from './hooks/usePrefersDark'
+export * from './hooks/usePrefersReducedMotion'
+export * from './hooks/useResponsiveProp'
+
+// observers
+export * from './observers/elementSize'
+export * from './observers/resize'
+
+// primitives
+export * from './primitives/_selectable'
+export * from './primitives/arrow'
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/flex'
+export * from './primitives/grid'
+export * from './primitives/heading'
+export * from './primitives/inline'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/layer'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/select'
+export * from './primitives/skeleton'
+export * from './primitives/spinner'
+export * from './primitives/srOnly'
+export * from './primitives/stack'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+export * from './primitives/tooltip'
+export * from './primitives/types'
+
+// utils
+export * from './utils/boundaryElement'
+export * from './utils/elementQuery'
+export * from './utils/errorBoundary'
+export * from './utils/portal'
+
+// types
+export * from './types/gridItem'
+export * from './types/placement'
+export * from './types/props'
+export * from './types/radius'
+export * from './types/textAlign'

package/src/core/observers/{elementSizeObserver.ts → elementSize.ts}

@@ -1,4 +1,4 @@
-import {_ResizeObserver} from './resizeObserver'
+import {_ResizeObserver} from './resize'
 
 /**
  * @beta

package/src/core/primitives/_selectable/index.ts

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

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,6 +1,7 @@
 import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {ComponentType, Props, SelectableTone} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box, type BoxOwnProps} from '../box'
 
 /** @internal */
@@ -11,7 +12,8 @@ export type SelectableOwnProps = BoxOwnProps &
   SelectableStyleProps & {
     disabled?: boolean
     href?: string
-    tone?: SelectableTone
+    selected?: boolean
+    tone?: ThemeColorStateToneKey
     type?: 'button'
   }
 
@@ -32,9 +34,17 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
     as = DEFAULT_SELECTABLE_ELEMENT,
     className,
     radius,
+    selected,
     tone,
     ...rest
   } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
 
-  return <Box {...rest} as={as} className={_selectable({className, radius, tone})} />
+  return (
+    <Box
+      {...rest}
+      as={as}
+      className={_selectable({className, radius, tone})}
+      data-selected={selected ? '' : undefined}
+    />
+  )
 }

package/src/core/{types/selectable.ts → primitives/_selectable/types.ts}

@@ -1,7 +1,7 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
- * @public
+ * @internal
  * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export type SelectableTone = ThemeColorStateToneKey

package/src/core/primitives/arrow/arrow.tsx

@@ -2,7 +2,7 @@ import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} fr
 import {assignInlineVars} from '@vanilla-extract/dynamic'
 import {useMemo} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {compileCommands, getRoundedCommands, type Point} from './cmds'
 
 /** @internal */

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

@@ -6,13 +6,14 @@ import {
   avatarInitials,
   type ResponsiveProp,
 } from '@sanity/ui/css'
-import type {AvatarColor, FontLabelSize} from '@sanity/ui/theme'
+import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useResponsiveProp} from '../../hooks'
-import type {AvatarPosition, AvatarSize, AvatarStatus, ComponentType, Props} from '../../types'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Label} from '../label'
+import type {AvatarPosition, AvatarStatus} from './types'
 
 /** @public */
 export const DEFAULT_AVATAR_ELEMENT = 'span'

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

@@ -2,13 +2,13 @@ import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
 import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useMemo} from 'react'
 
-import {useResponsiveProp} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Label} from '../label'
 
 /** @public */
-export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'div'
+export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
 
 /** @public */
 export interface AvatarCounterOwnProps {

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

@@ -2,14 +2,14 @@ import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
 import type {AvatarSize} from '@sanity/ui/theme'
 import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
 
-import {useResponsiveProp} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types/props'
 import {Box, type BoxOwnProps} from '../box'
 import type {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
 
 /** @public */
-export const DEFAULT_AVATAR_STACK_ELEMENT = 'div'
+export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
 
 /** @public */
 export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
@@ -49,7 +49,7 @@ export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AV
   } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
 
   const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
-    AvatarProps<'div'>
+    AvatarProps<'span'>
   >[]
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useResponsiveProp(sizeProp)

package/src/core/primitives/avatar/types.ts

@@ -1,5 +1,22 @@
 import type {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 
+export {
+  /** @deprecated Use `AvatarSize` from `@sanity/ui/theme' instead. */
+  type AvatarSize,
+} from '@sanity/ui/theme'
+
+/** @public */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/** @public */
+// export type AvatarSize = 0 | 1 | 2 | 3
+
+/**
+ * @public
+ * @deprecated Will be removed in next major version.
+ */
+export type AvatarStatus = 'online' | 'editing' | 'inactive'
+
 /**
  * @internal
  * @deprecated This will be removed in next major version.

package/src/core/primitives/badge/badge.tsx

@@ -2,9 +2,10 @@ import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/
 import {badge} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {BadgeTone, ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Text} from '../text'
+import type {BadgeTone} from './types'
 
 /** @public */
 export const DEFAULT_BADGE_ELEMENT = 'span'

package/src/core/primitives/badge/types.ts

@@ -1,8 +1,17 @@
-import type {BadgeTone} from '../../types'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Will be removed in next major version.
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/** @public */
+export type BadgeTone = ThemeColorStateToneKey
 
 /**
  * @internal
- * @deprecated
+ * @deprecated Will be removed in next major version.
  */
 export interface BadgeStyleProps {
   $tone: BadgeTone

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -9,7 +9,6 @@ export default function ResponsiveStory() {
         display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
-        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
         style={{outline: `1px solid ${vars.color.border}`}}
       >
         <Text align="center" muted>

package/src/core/primitives/box/box.tsx

@@ -6,7 +6,7 @@ import type {
 } from '@sanity/ui/css'
 import {box} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_BOX_ELEMENT = 'div'

package/src/core/primitives/box/index.ts

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