@sanity/ui 2.1.4-canary.0 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.1.4-canary.0",
+  "version": "2.1.5",
   "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 --quiet",
+    "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"
@@ -90,10 +116,10 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.6.6",
+    "@sanity/pkg-utils": "^6.8.10",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.12",
     "@storybook/addon-a11y": "^8.0.8",
@@ -115,16 +141,16 @@
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.77",
-    "@types/react-dom": "^18.2.25",
-    "@types/react-is": "^18.2.4",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "commitizen": "^4.3.0",
-    "cypress": "^13.7.3",
+    "cypress": "^13.8.1",
     "cypress-real-events": "^1.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
@@ -134,7 +160,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
@@ -146,18 +172,18 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.2.5",
     "prettier-plugin-packagejson": "^2.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "refractor": "^4.8.1",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "semantic-release": "^23.0.8",
     "start-server-and-test": "^2.0.3",
     "storybook": "^8.0.8",
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.4.5",
-    "vite": "^5.2.8",
+    "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
@@ -166,7 +192,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@8.15.7",
+  "packageManager": "pnpm@9.0.6",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -175,29 +201,5 @@
   },
   "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 --quiet",
-    "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

@@ -369,7 +369,7 @@ export const Dialog = forwardRef(function Dialog(
 
   const labelId = `${id}_label`
 
-  const rootClickTimeoutRef = useRef<number>()
+  const rootClickTimeoutRef = useRef<NodeJS.Timeout>()
 
   // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
   // within the dialog, then we want to focus the previously interactive element in the dialog instead.
@@ -379,7 +379,7 @@ export const Dialog = forwardRef(function Dialog(
       clearTimeout(rootClickTimeoutRef.current)
     }
 
-    rootClickTimeoutRef.current = (setTimeout as typeof window.setTimeout)(() => {
+    rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement
 
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {

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

@@ -53,7 +53,7 @@ let toastId = 0
 export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
-  const toastsRef = useRef<{[key: string]: {timeoutId: number}}>({})
+  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
   const mounted = useMounted()
   const prefersReducedMotion = usePrefersReducedMotion()
   const variants = useMemo<Variants>(
@@ -129,9 +129,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
         delete toastsRef.current[id]
       }
 
-      toastsRef.current[id] = {
-        timeoutId: (setTimeout as typeof window.setTimeout)(dismiss, duration),
-      }
+      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
 
       return id
     }

package/src/core/hooks/useDelayedState.ts

@@ -8,7 +8,7 @@ export function useDelayedState<S>(
   initialState: S | (() => S),
 ): [S, (nextState: SetStateAction<S>, delay?: number) => void] {
   const [state, setState] = useState(initialState)
-  const delayedAction = useRef<number | undefined>()
+  const delayedAction = useRef<NodeJS.Timeout | undefined>()
 
   const onStateChange = useCallback((nextState: SetStateAction<S>, delay?: number) => {
     const action = () => {
@@ -22,7 +22,7 @@ export function useDelayedState<S>(
     }
 
     if (!delay) return action()
-    delayedAction.current = (setTimeout as typeof window.setTimeout)(action, delay)
+    delayedAction.current = setTimeout(action, delay)
   }, [])
 
   return [state, onStateChange]

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -15,5 +15,15 @@ export default defineScope({
       title: 'Avatar stack',
       component: lazy(() => import('./stack')),
     },
+    {
+      name: 'within-button',
+      title: 'Within button',
+      component: lazy(() => import('./withinButton')),
+    },
+    {
+      name: 'within-menu-item',
+      title: 'Within menu item',
+      component: lazy(() => import('./withinMenuItem')),
+    },
   ],
 })

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

@@ -0,0 +1,62 @@
+import {useBoolean} from '@sanity/ui-workshop'
+import {Box} from '../../box'
+import {Button} from '../../button'
+import {Container} from '../../container'
+import {Flex} from '../../flex'
+import {Stack} from '../../stack'
+import {Text} from '../../text'
+import {Avatar} from '../avatar'
+import {AvatarStack} from '../avatarStack'
+
+export default function WithinButtonStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+
+  return (
+    <Container width={1}>
+      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+        <Button disabled={disabled} padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Default button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="ghost" padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Ghost button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="bleed" padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Bleed button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+      </Stack>
+    </Container>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {useBoolean} from '@sanity/ui-workshop'
+import {Menu, MenuItem} from '../../../components'
+import {Layer} from '../../../utils'
+import {Box} from '../../box'
+import {Card} from '../../card'
+import {Container} from '../../container'
+import {Flex} from '../../flex'
+import {Text} from '../../text'
+import {Avatar} from '../avatar'
+import {AvatarStack} from '../avatarStack'
+
+export default function WithinMenuItemStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+
+  return (
+    <Container width={1}>
+      <Layer>
+        <Box paddingX={4} paddingY={[5, 6, 7]}>
+          <Card radius={3} shadow={3}>
+            <Menu space={1}>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+            </Menu>
+          </Card>
+        </Box>
+      </Layer>
+    </Container>
+  )
+}