@sanity/ui 4.0.0-static.4 → 4.0.0-static.41

package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx}

@@ -11,12 +11,12 @@ import {
 } from 'react'
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
-import {Box} from '../../primitives/box/box'
-import {Button, type ButtonProps} from '../../primitives/button/button'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover} from '../../primitives/popover/popover'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button, type ButtonProps} from '../../primitives/button/Button'
+import {Flex} from '../../primitives/flex/Flex'
+import {Popover} from '../../primitives/popover/Popover'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */
@@ -48,8 +48,8 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
     className,
     expandButton: expandButtonProps,
     gap = 2,
-    gapX,
-    gapY,
+    gapX = gap,
+    gapY = gap,
     maxLength,
     separator,
     ...rest
@@ -66,45 +66,17 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
 
   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" gap={gapY} overflow="auto">
-              {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])
+  const items = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps,
+  })
 
   return (
     <Flex
@@ -129,3 +101,64 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
     </Flex>
   )
 }
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  rawItems,
+  gapY,
+  expandButtonProps,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  gapY: NonNullable<GapStyleProps['gapY']>
+  expandButtonProps: BreadcrumbsOwnProps['expandButton']
+}): React.JSX.Element[] {
+  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" gap={gapY} overflow="auto">
+            {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
+}

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/dialog/{dialog.tsx → Dialog.tsx}

@@ -5,20 +5,28 @@ import {
   type ResponsiveProp,
 } from '@sanity/ui/css'
 import type {CardTone, ColorScheme, Radius} from '@sanity/ui/theme'
-import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
+import {
+  type FocusEvent,
+  type ForwardedRef,
+  type ReactNode,
+  use,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react'
 
 import {Z_OFFSETS} from '../../constants'
 import {isHTMLElement} from '../../helpers/element'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
+import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Container} from '../../primitives/container/container'
-import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/layer'
+import {Container} from '../../primitives/container/Container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/Layer'
 import type {ComponentType, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
-import {Portal} from '../../utils/portal/portal'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {DialogCard} from './dialogCard'
+import {DialogCard} from './DialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
 import type {DialogPosition} from './types'
 import {useDialog} from './useDialog'
@@ -108,10 +116,11 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
-  const cardRadius = useResponsiveProp(cardRadiusProp)
-  const position = useResponsiveProp(positionProp)
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const boundaryElement = use(BoundaryElementContext)
+  const cardRadius = useMemo(() => _getResponsiveProp(cardRadiusProp), [cardRadiusProp])
+  const position = useMemo(() => _getResponsiveProp(positionProp), [positionProp])
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
+
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx}

@@ -11,6 +11,7 @@ import {
 import {
   type ForwardedRef,
   type ReactNode,
+  use,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -21,14 +22,14 @@ import {
 import {focusFirstDescendant} from '../../helpers/focus'
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Text} from '../../primitives/text/text'
+import {Text} from '../../primitives/text/Text'
 import type {Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {usePortal} from '../../utils/portal/usePortal'
 import {isTargetWithinScope} from './isTargetWithinScope'
 
@@ -87,11 +88,10 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
 
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
+  const boundaryElement = use(BoundaryElementContext)
   const ref = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
-  const layer = useLayer()
-  const {isTopLayer} = layer
+  const {isTopLayer} = useLayer()
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton

package/src/core/components/dialog/{dialogContext.ts → DialogContext.ts}

@@ -18,4 +18,4 @@ export interface DialogContextValue {
  * @internal
  */
 export const DialogContext: Context<DialogContextValue> =
-  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v3/dialog', {version: 0.0})
+  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v4/dialog', {version: 0.0})

package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx}

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 import {type ReactNode, useMemo} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 import type {DialogPosition} from './types'
 
 /**
@@ -30,5 +30,5 @@ export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
     [position, zOffset],
   )
 
-  return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
+  return <DialogContext value={contextValue}>{children}</DialogContext>
 }

package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx}

@@ -11,7 +11,8 @@ import {
   PortalProvider,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
+
+import {panePortal, paneRoot} from './styles.css'
 
 export default function PanesStory(): React.JSX.Element {
   return (
@@ -22,23 +23,6 @@ export default function PanesStory(): React.JSX.Element {
   )
 }
 
-const PaneRoot = styled(Card)`
-  position: relative;
-`
-
-const PanePortal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-`
-
 function Pane(props: {borderLeft?: boolean; id: string}) {
   const {borderLeft, id} = props
   const [element, setElement] = useState<HTMLDivElement | null>(null)
@@ -52,13 +36,13 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
   return (
     <BoundaryElementProvider element={element}>
       <PortalProvider element={portalElement}>
-        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
+        <Card className={paneRoot} borderLeft={borderLeft} flex={1} ref={setElement}>
           <Box padding={4}>
             <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
           </Box>
 
-          <PanePortal ref={setPortalElement} />
-        </PaneRoot>
+          <div className={panePortal} ref={setPortalElement} />
+        </Card>
 
         {dialogOpen && (
           <Dialog
@@ -79,6 +63,10 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
                     <MenuItem text="Item 3" />
                   </Menu>
                 }
+                popover={{
+                  modal: true,
+                  portal: true,
+                }}
               />
             </Box>
           </Dialog>

package/src/core/components/dialog/__workshop__/{position.tsx → Position.tsx}

@@ -6,6 +6,7 @@ import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
 export default function PositionStory(): React.JSX.Element {
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
@@ -22,7 +23,14 @@ export default function PositionStory(): React.JSX.Element {
         </Stack>
 
         <LayerProvider>
-          {open && <Dialog header="Position example" id="position-example" position={position} />}
+          {open && (
+            <Dialog
+              header="Position example"
+              id="position-example"
+              // @ts-expect-error - TODO: fix this
+              position={position}
+            />
+          )}
         </LayerProvider>
       </Box>
     </Box>

package/src/core/components/dialog/__workshop__/{props.tsx → Props.tsx}

@@ -9,6 +9,7 @@ export default function PropsStory(): React.JSX.Element {
   const header = useText('Header', 'Props example')
   const onClickOutside = useBoolean('Close when click outside', false)
   const hideCloseButton = useBoolean('Hide close button', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -37,6 +38,7 @@ export default function PropsStory(): React.JSX.Element {
             onClickOutside={onClickOutside ? handleClose : undefined}
             onClose={handleClose}
             open={open}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Box padding={4}>

package/src/core/components/dialog/__workshop__/index.ts

@@ -5,16 +5,16 @@ const scope: WorkshopScope = {
   name: 'components/dialog',
   title: 'Dialog',
   stories: [
-    {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'))},
-    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
-    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
-    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
+    {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'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./Panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./Activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./Wrapped'))},
   ],
 }
 

package/src/core/components/dialog/__workshop__/styles.css.ts

@@ -0,0 +1,18 @@
+import {globalStyle, style} from '@vanilla-extract/css'
+
+export const paneRoot: string = style({
+  position: 'relative',
+})
+
+export const panePortal: string = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+})
+
+globalStyle(`${panePortal} > *`, {
+  pointerEvents: 'auto',
+})

package/src/core/components/dialog/useDialog.ts

@@ -1,11 +1,11 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export function useDialog(): DialogContextValue {
-  return useContext(DialogContext)
+  return use(DialogContext)
 }

package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx}

@@ -1,8 +1,8 @@
 import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {Box} from '../../primitives/box/box'
-import {KBD} from '../../primitives/kbd/kbd'
+import {Box} from '../../primitives/box/Box'
+import {KBD} from '../../primitives/kbd/Kbd'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/hotkeys/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx}

@@ -5,7 +5,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenu} from './useMenu'
 
 describe('components/menu', () => {
@@ -34,23 +34,20 @@ describe('components/menu', () => {
 
         const value: MenuContextValue = useMemo(
           () => ({
-            version: 0.0,
+            version: 2,
             activeElement: null,
-            activeIndex: 0,
             mount: (element: HTMLElement | null) => () => console.log(element),
             onItemClick: () => undefined,
             onItemMouseEnter: handleItemMouseEnter,
             onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
           }),
           [handleItemMouseEnter, handleItemMouseLeave],
         )
 
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext value={value}>
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 
@@ -58,8 +55,7 @@ describe('components/menu', () => {
 
       const contextValue = log.mock.calls[0][0]
 
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
+      expect(contextValue.version).toBe(2)
       expect(typeof contextValue.mount).toBe('function')
       expect(typeof contextValue.onItemClick).toBe('function')
       expect(typeof contextValue.onItemMouseEnter).toBe('function')
@@ -81,12 +77,12 @@ describe('components/menu', () => {
 
       function Root() {
         return (
-          <MenuContext.Provider
+          <MenuContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 
@@ -112,12 +108,12 @@ describe('components/menu', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <MenuContext.Provider
+          <MenuContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 

package/src/core/components/menu/{menu.tsx → Menu.tsx}

@@ -4,11 +4,11 @@ import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'reac
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenuController} from './useMenuController'
 
 /** @public */
@@ -19,7 +19,7 @@ export type MenuOwnProps = PaddingStyleProps & {
   'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
-  'onItemClick'?: () => void
+  'onItemClick'?: (event: React.MouseEvent<HTMLButtonElement>) => void
   'onItemSelect'?: (index: number) => void
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
@@ -127,26 +127,21 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
     ),
   )
 
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-    }),
+  const value = useMemo(
+    () =>
+      ({
+        version: 2,
+        activeElement,
+        mount,
+        onClickOutside,
+        onEscape,
+        onItemClick,
+        onItemMouseEnter: handleItemMouseEnter,
+        onItemMouseLeave: handleItemMouseLeave,
+        registerElement,
+      }) satisfies MenuContextValue,
     [
       activeElement,
-      activeIndex,
       mount,
       handleItemMouseEnter,
       handleItemMouseLeave,
@@ -158,7 +153,7 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
   )
 
   return (
-    <MenuContext.Provider value={value}>
+    <MenuContext value={value}>
       <Box
         data-ui="Menu"
         {...rest}
@@ -174,6 +169,6 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
       >
         <Stack gap={gap}>{children}</Stack>
       </Box>
-    </MenuContext.Provider>
+    </MenuContext>
   )
 }