@sanity/ui 2.6.2 → 2.6.4-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.2",
+  "version": "2.6.4-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "src",
     "theme.js"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepublishOnly": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -106,7 +80,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.2.0",
+    "@sanity/icons": "^3.3.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.2.0"
@@ -147,19 +121,19 @@
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "commitizen": "^4.3.0",
     "cypress": "^13.11.0",
     "cypress-real-events": "^1.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-boundaries": "^4.2.1",
+    "eslint-plugin-boundaries": "^4.2.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
@@ -171,7 +145,7 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "prettier-plugin-packagejson": "^2.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -183,7 +157,7 @@
     "storybook": "^8.0.8",
     "styled-components": "^6.1.11",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.4.5",
+    "typescript": "5.5.3",
     "vite": "^5.2.13",
     "vite-tsconfig-paths": "^4.3.2"
   },
@@ -193,7 +167,6 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.2.0",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -203,9 +176,28 @@
   "esm.sh": {
     "bundle": false
   },
-  "pnpm": {
-    "overrides": {
-      "conventional-changelog-conventionalcommits": ">= 8.0.0"
-    }
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

package/src/core/components/menu/useMenuController.ts

@@ -183,6 +183,7 @@ export function useMenuController(props: {
   }, [setActiveIndex, rootElement])
 
   // Set focus on the currently active element
+  // @TODO verify if this is the best way, compare with adobe-spectrum
   useEffect(() => {
     if (!mounted) return
 

package/src/core/components/toast/styles.ts

@@ -14,11 +14,12 @@ const loadingAnimation = keyframes`
   }
   100% {
     width: 100%;
-  } 
+  }
 `
 
 const LOADING_BAR_HEIGHT = 2
 
+// @TODO get rid of $duration modifier, set data attribute instead and use stable selector
 export function rootStyles(
   props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
 ): ReturnType<typeof css> {

package/src/core/helpers/focus.ts

@@ -15,6 +15,7 @@ import {
  * @internal
  */
 export function _hasFocus(element: HTMLElement): boolean {
+  // @TODO verify this is not called during render
   return Boolean(document.activeElement) && element.contains(document.activeElement)
 }
 

package/src/core/helpers/scroll.ts

@@ -4,6 +4,7 @@
 export function _isScrollable(el: Node): boolean {
   if (!(el instanceof Element)) return false
 
+  // @TODO check if this is called during render
   const style = window.getComputedStyle(el)
 
   return (

package/src/core/hooks/useClickOutside.ts

@@ -88,6 +88,9 @@ export function useClickOutside(
       listener(evt)
     }
 
+    // @TODO seems expensive, improve with useEffectEvent? The identity of boundaryElement, elements and listener probably shouldn't trigger resub
+    // or maybe it's enough to put listener and elements etc in refs?
+
     window.addEventListener('mousedown', handleWindowMouseDown)
 
     return () => {

package/src/core/hooks/useElementSize.ts

@@ -6,6 +6,7 @@ import {ElementSize, _elementSizeObserver} from '../observers/elementSizeObserve
  * @beta
  */
 export function useElementSize(element: HTMLElement | null): ElementSize | null {
+  // @TODO we can probably use something in framer-motion or @floating-ui instead of rolling our own
   const [size, setSize] = useState<ElementSize | null>(null)
 
   useEffect(() => {

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -9,6 +9,7 @@ export interface _MediaStore {
   getSnapshot: () => number
 }
 
+// @TODO probably overkill, why not let React handle the memo?
 const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`

package/src/core/hooks/usePrefersDark.ts

@@ -1,5 +1,8 @@
 import {useSyncExternalStore} from 'react'
 
+// @TODO is it really necessary to cache this way?
+// also, what about providing a server snapshot pattern?
+// that implements the trick vision-on-demand uses?
 let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,5 +1,7 @@
 import {useSyncExternalStore} from 'react'
 
+// @TODO is the cache here really beneficial? Maybe it's better to use useMemo?
+// And how about supplying a server snapshot pattern so userland can implement headers for SSR like vision-on-demand?
 let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**

package/src/core/primitives/tooltip/tooltip.tsx

@@ -5,6 +5,7 @@ import {
   flip,
   offset,
   shift,
+  size,
   useFloating,
   type Middleware,
   type RootBoundary,
@@ -20,7 +21,6 @@ import {
   useRef,
   useState,
   useId,
-  useSyncExternalStore,
   useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
@@ -85,9 +85,8 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)<{$maxWidth: number}>`
+const Root = styled(Layer)`
   pointer-events: none;
-  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -134,27 +133,31 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const documentBodyOffsetWidth = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body.offsetWidth,
-    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
-    () => 800,
-  )
-  // Get the maximum tooltip width (sans tooltip padding)
-  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
-  // If both portal and boundary elements are provided, use the smaller width of the two.
-  const tooltipWidth = useMemo(() => {
-    const availableWidths = [
-      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || documentBodyOffsetWidth,
-    ]
-
-    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
-
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
+    // Set the max width of the tooltip based on boundaries and portals
+    ret.push(
+      size({
+        apply({elements}) {
+          // Get the maximum tooltip width (sans tooltip padding)
+          // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+          // If both portal and boundary elements are provided, use the smaller width of the two.
+          const availableWidths = [
+            ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+            portalElement?.offsetWidth || document.body.offsetWidth,
+          ]
+
+          const tooltipWidth = Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
+
+          // Set the max width directly, efficiently, without another react effect + render loop
+          Object.assign(elements.floating.style, {
+            maxWidth: tooltipWidth > 0 ? `${tooltipWidth}px` : undefined,
+          })
+        },
+      }),
+    )
+
     // Flip the floating element when leaving the boundary box
     ret.push(
       flip({
@@ -189,7 +192,7 @@ export const Tooltip = forwardRef(function Tooltip(
     }
 
     return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements, portalElement])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -288,6 +291,7 @@ export const Tooltip = forwardRef(function Tooltip(
   // Detect whether the mouse is moving outside of the reference element. This is sometimes
   // necessary, because the tooltip might not always close as it should (e.g. when clicking
   // the reference element triggers a CPU-heavy operation.)
+  // @TODO is this necessary?
   useEffect(() => {
     if (!showTooltip) return
 
@@ -404,7 +408,6 @@ export const Tooltip = forwardRef(function Tooltip(
       ref={setFloating}
       style={floatingStyles}
       zOffset={zOffset}
-      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}
@@ -453,5 +456,3 @@ export const Tooltip = forwardRef(function Tooltip(
     </>
   )
 })
-
-const emptySubscribe = () => () => {}

package/src/core/utils/portal/portalProvider.tsx

@@ -25,6 +25,7 @@ export interface PortalProviderProps {
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
+  // @TODO check up sebmarkbage tweet on useSyncExternalStore that detects if it was hydrated instead of skipping getServerSnapshot
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => document.body,