@sanity/ui 2.8.13-canary.1 → 2.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.13-canary.1",
+  "version": "2.8.14",
   "keywords": [
     "sanity",
     "ui",
@@ -51,6 +51,32 @@
     "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",
+    "prepack": "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"
@@ -84,7 +110,6 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -173,37 +198,19 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
+  },
   "esm.sh": {
     "bundle": false
-  },
-  "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/dialog/dialog.tsx

@@ -241,7 +241,7 @@ const DialogCard = forwardRef(function DialogCard(
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>
-              <Flex align="center" padding={3}>
+              <Flex align="flex-start" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
                     <Text id={labelId} size={1} weight="semibold">

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

@@ -36,28 +36,31 @@ export function useMenuController(props: {
     activeIndexRef.current = nextActiveIndex
   }, [])
 
-  const mount = (element: HTMLElement | null, selected?: boolean): (() => void) => {
-    if (!element) return () => undefined
+  const mount = useCallback(
+    (element: HTMLElement | null, selected?: boolean): (() => void) => {
+      if (!element) return () => undefined
 
-    if (elementsRef.current.indexOf(element) === -1) {
-      elementsRef.current.push(element)
-      _sortElements(rootElementRef.current, elementsRef.current)
-    }
+      if (elementsRef.current.indexOf(element) === -1) {
+        elementsRef.current.push(element)
+        _sortElements(rootElementRef.current, elementsRef.current)
+      }
 
-    if (selected) {
-      const selectedIndex = elementsRef.current.indexOf(element)
+      if (selected) {
+        const selectedIndex = elementsRef.current.indexOf(element)
 
-      setActiveIndex(selectedIndex)
-    }
+        setActiveIndex(selectedIndex)
+      }
 
-    return () => {
-      const idx = elementsRef.current.indexOf(element)
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
 
-      if (idx > -1) {
-        elementsRef.current.splice(idx, 1)
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
       }
-    }
-  }
+    },
+    [rootElementRef, setActiveIndex],
+  )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -167,7 +170,7 @@ export function useMenuController(props: {
     [setActiveIndex],
   )
 
-  const handleItemMouseLeave = () => {
+  const handleItemMouseLeave = useCallback(() => {
     // Set the active index to -2 to deactivate all menu items
     // when the user moves the mouse away from the menu item.
     // We avoid using -1 because it would focus the first menu item,
@@ -175,7 +178,7 @@ export function useMenuController(props: {
     // between two menu items or a menu divider.
     setActiveIndex(-2)
     rootElementRef.current?.focus()
-  }
+  }, [rootElementRef, setActiveIndex])
 
   // Set focus on the currently active element
   useEffect(() => {

package/src/theme/defaults/colorTokens.ts

@@ -427,7 +427,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         _blend: ['multiply', 'screen'],
         bg: ['white', 'black'],
-        border: ['200', '800'],
+        border: ['200', '700'],
         fg: ['black', '200'],
         muted: {
           bg: ['50', '950'],
@@ -443,6 +443,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['800', '200'],
       },
       'disabled': {
+        bg: ['50', '950'],
         fg: ['400', '600'],
         border: ['100', '900'],
         placeholder: ['200', '800 50%'],