@sanity/ui 3.0.0-static.5 → 3.0.0-static.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.5",
+  "version": "3.0.0-static.6",
   "keywords": [
     "sanity",
     "ui",
@@ -125,7 +125,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.2",
+    "@sanity/ui-workshop": "^2.1.3",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",

package/src/css/primitives/_input/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: './css/input',
+  name: 'css/input',
   title: 'Input',
   stories: [
     {

package/src/ui/components/autocomplete/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: './components/autocomplete',
+  name: 'components/autocomplete',
   title: 'Autocomplete',
   stories: [
     {

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

@@ -26,7 +26,7 @@ import {
   useRef,
 } from 'react'
 
-import {useTheme_v2} from '../../_compat'
+import {Z_OFFSETS} from '../../constants'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -282,7 +282,6 @@ export const Dialog = forwardRef(function Dialog(
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const context = useDialog()
-  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
@@ -309,8 +308,8 @@ export const Dialog = forwardRef(function Dialog(
     tone,
     ...restProps
   } = props
-  const positionProp = _positionProp ?? (context.position || 'fixed')
-  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
+  const positionProp = _positionProp ?? context.position ?? 'fixed'
+  const zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

package/src/ui/constants.ts

@@ -77,3 +77,9 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
+
+export const Z_OFFSETS = {
+  dialog: 600,
+  popover: 400,
+  tooltip: 200,
+}

package/src/ui/hooks/useMediaIndex/useMediaIndex.ts

@@ -96,8 +96,6 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
-  // const {media} = useTheme_v2()
-  // const media = MEDIA
   const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)

package/src/ui/primitives/code/code.tsx

@@ -26,7 +26,7 @@ export const Code = forwardRef(function Code(
     children,
     className,
     language: languageProp,
-    size = 1,
+    size = 2,
     weight,
     ...restProps
   } = props

package/src/ui/primitives/popover/popover.tsx

@@ -26,13 +26,8 @@ import {
   useRef,
 } from 'react'
 
-// import {useTheme_v2} from '../../_compat'
-import {
-  useArrayProp,
-  // useElementSize,
-  // useMediaIndex,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {Z_OFFSETS} from '../../constants'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -44,7 +39,6 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-// import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback} from './types'
 
@@ -67,7 +61,7 @@ export interface PopoverProps extends CardProps, LayerProps {
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
    * - by resizing
-  /*
+   *
    * Note that:
    * - setting `preventOverflow` to `true` also prevents overflow on its side axis
    * - setting `matchReferenceWidth` to `true` also causes the popover to resize
@@ -128,13 +122,13 @@ export const Popover = memo(
     props: Props<PopoverProps, 'div'>,
     forwardedRef: ForwardedRef<HTMLDivElement>,
   ): ReactElement {
-    // const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -161,17 +155,12 @@ export const Popover = memo(
       tone = 'inherit',
       width: widthProp = 'auto',
       // zOffset: zOffsetProp = layer.popover.zOffset,
-      zOffset: zOffsetProp,
+      zOffset: zOffsetProp = Z_OFFSETS.popover,
       updateRef,
       ...restProps
     } = props
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
-    // const boundarySize = useElementSize(boundaryElement)?.border
-    // const padding = useArrayProp(paddingProp)
-    // const radius = useArrayProp(radiusProp)
-    // const shadow = useArrayProp(shadowProp)
-    // const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -182,57 +171,9 @@ export const Popover = memo(
       () => ref.current,
     )
 
-    // const mediaIndex = useMediaIndex()
-    // const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
-
-    // Update width when
-    // - media index changes
-    // - `width` property changes
-    // const width = calcCurrentWidth({
-    //   container,
-    //   mediaIndex,
-    //   width: widthArrayProp,
-    // })
-    // const widthRef = useRef(width)
-
-    // useEffect(() => {
-    //   widthRef.current = width
-    // }, [width])
-
-    // Update max width when
-    // - boundary width changes
-    // - `width` property changes
-    // const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    // const maxWidthRef = useRef(maxWidth)
-
-    // useEffect(() => {
-    //   maxWidthRef.current = maxWidth
-    // }, [maxWidth])
-
     // Keep track of reference element width (see `size` middleware below)
     const referenceWidthRef = useRef<number>(undefined)
 
-    // // Force apply width & max width to floating element
-    // useEffect(() => {
-    //   const floatingElement = ref.current
-
-    //   if (!open || !floatingElement) return
-
-    //   const referenceWidth = referenceWidthRef.current
-
-    //   if (matchReferenceWidth) {
-    //     if (referenceWidth !== undefined) {
-    //       floatingElement.style.width = `${referenceWidth}px`
-    //     }
-    //   } else if (width !== undefined) {
-    //     floatingElement.style.width = `${width}px`
-    //   }
-
-    //   if (typeof maxWidth === 'number') {
-    //     floatingElement.style.maxWidth = `${maxWidth}px`
-    //   }
-    // }, [width, matchReferenceWidth, maxWidth, open])
-
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
 
@@ -260,22 +201,11 @@ export const Popover = memo(
 
               referenceWidthRef.current = referenceWidth
 
-              // const _currentWidth = widthRef.current
-              // const _maxWidth = maxWidthRef.current
-
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
               }
-              // else if (_currentWidth !== undefined) {
-              //   elements.floating.style.width = `${_currentWidth}px`
-              // }
 
               if (constrainSize) {
-                // elements.floating.style.maxWidth = `${Math.min(
-                //   availableWidth,
-                //   _maxWidth ?? Infinity,
-                // )}px`
-
                 elements.floating.style.maxWidth = `${availableWidth}px`
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }

package/src/ui/primitives/textInput/textInput.tsx

@@ -106,7 +106,7 @@ export const TextInput = forwardRef(function TextInput(
     className,
     clearButton,
     disabled = false,
-    fontSize = 1,
+    fontSize = 2,
     gap,
     icon: IconComponent,
     iconRight: IconRightComponent,

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -28,7 +28,7 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useTheme_v2} from '../../_compat'
+import {Z_OFFSETS} from '../../constants'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -91,7 +91,6 @@ export const Tooltip = forwardRef(function Tooltip(
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const {layer} = useTheme_v2()
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -109,7 +108,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 3,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset = Z_OFFSETS.tooltip,
     tone,
     ...restProps
   } = props