@sanity/ui 2.3.4-canary.0 → 2.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.4-canary.0",
+  "version": "2.3.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",
+    "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"
@@ -167,6 +193,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.2.0",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -176,28 +203,9 @@
   "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"
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
   }
-}
+}

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -30,13 +30,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   useClickOutside(collapse, [expandElement, popoverElement])
 
-  const rawItems = useMemo(
-    () =>
-      Children.toArray(children).filter((child) => {
-        return isValidElement(child)
-      }),
-    [children],
-  )
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
   const items = useMemo(() => {
     const len = rawItems.length

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -0,0 +1,38 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {useSelect} from '@sanity/ui-workshop'
+import {Box, Button} from '../../../primitives'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+const selectedOptions = {
+  undefined: 'undefined',
+  true: true,
+  false: false,
+} as const
+
+export default function CustomSelectedStateStory() {
+  const selected = useSelect('Selected', selectedOptions, false)
+
+  return (
+    <Box padding={4}>
+      <MenuButton
+        button={
+          <Button
+            icon={ChevronDownIcon}
+            mode="bleed"
+            selected={selected === 'undefined' ? undefined : selected}
+            text="Menu"
+          />
+        }
+        id="test-menu"
+        menu={
+          <Menu>
+            <MenuItem text="Item 1" />
+            <MenuItem text="Item 2" />
+          </Menu>
+        }
+      />
+    </Box>
+  )
+}

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

@@ -80,5 +80,10 @@ export default defineScope({
       title: 'Avatar menu',
       component: lazy(() => import('./avatarMenu')),
     },
+    {
+      name: 'custom-selected-state',
+      title: 'Custom selected state',
+      component: lazy(() => import('./customSelectedState')),
+    },
   ],
 })

package/src/core/components/menu/menuButton.tsx

@@ -241,7 +241,7 @@ export const MenuButton = forwardRef(function MenuButton(
         'aria-haspopup': true,
         'aria-expanded': open,
         ref: ref,
-        selected: open,
+        selected: buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
   )

package/src/core/components/tree/tree.tsx

@@ -213,7 +213,7 @@ export const Tree = memo(
       ) as HTMLElement[]
 
       setItemElements(_itemElements)
-    }, [children, ref])
+    }, [children])
 
     return (
       <TreeContext.Provider value={contextValue}>

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
@@ -65,9 +65,10 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = Children.toArray(childrenProp).filter(
-    (child) => typeof child !== 'string',
-  ) as React.ReactElement[]
+  const children = useMemo<React.ReactElement[]>(
+    () => Children.toArray(childrenProp).filter(isValidElement),
+    [childrenProp],
+  )
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/inline/inline.tsx

@@ -27,7 +27,7 @@ export const Inline = forwardRef(function Inline(
   const {as, children: childrenProp, space, ...restProps} = props
 
   const children = useMemo(
-    () => Children.map(childrenProp, (child) => <div>{child}</div>),
+    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
     [childrenProp],
   )