@sanity/ui 2.9.0-canary.6 → 2.9.0

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/core/components/toast/__workshop__/hook.tsx

@@ -24,7 +24,7 @@ export default function HookStory() {
               })
             }
             text="Push info"
-            tone="primary"
+            tone="neutral"
           />
 
           <Button

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

@@ -23,14 +23,14 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } as const
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } satisfies {[key: string]: ButtonTone}
 
 const ROLES = {

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

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
+import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
 import {
@@ -64,21 +64,18 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
+  const rootRef = useRef<HTMLLIElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const [itemPath, itemKey] = useMemo(() => {
-    const result = path.concat([id || ''])
-
-    return [result, result.join('/')]
-  }, [id, path])
+  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
+  const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootElement
+  const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -97,28 +94,28 @@ export const TreeItem = memo(function TreeItem(
       ) {
         event.stopPropagation()
         setExpanded(itemKey, !expanded)
-        setFocusedElement(rootElement)
+        setFocusedElement(rootRef.current)
       }
     },
-    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootElement
+        const el = treeitemRef.current || rootRef.current
 
         el?.click()
       }
     },
-    [focused, rootElement],
+    [focused],
   )
 
   useEffect(() => {
-    if (!rootElement) return
+    if (!rootRef.current) return
 
-    return registerItem(rootElement, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, rootElement, selected])
+    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
+  }, [expanded, itemPath, registerItem, selected])
 
   const content = (
     <Flex padding={padding}>
@@ -157,7 +154,7 @@ export const TreeItem = memo(function TreeItem(
         data-ui="TreeItem"
         {...restProps}
         onClick={handleClick}
-        ref={setRootElement}
+        ref={rootRef}
         role="none"
       >
         <TreeItemBox
@@ -190,7 +187,7 @@ export const TreeItem = memo(function TreeItem(
       aria-expanded={expanded}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={setRootElement}
+      ref={rootRef}
       role="treeitem"
       tabIndex={tabIndex}
     >

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,11 +1,11 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)
-  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+  const size = {width: rect?.width || 0, height: rect?.height || 0}
 
   return (
     <Box padding={[3, 4, 5]}>

package/src/core/hooks/useMatchMedia.ts

@@ -11,24 +11,34 @@ export function useMatchMedia(
   mediaQueryString: `(${string})`,
   getServerSnapshot?: () => boolean,
 ): boolean {
-  /**
-   * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-   * we don't want to eagerly instantiate it to ensure it's only created when actually used
-   */
-  const cachedMatchMedia = useMemo(
-    () => (typeof window === 'undefined' ? null : window.matchMedia(mediaQueryString)),
-    [mediaQueryString],
-  )
   const {subscribe, getSnapshot} = useMemo(() => {
+    /**
+     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
+     * we don't want to eagerly instantiate it to ensure it's only created when actually used
+     */
+    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
+    const getMatchMedia = (): MediaQueryList => {
+      if (!MEDIA_QUERY_CACHE) {
+        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+        // the `window` global is available and we're in a browser environment
+        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
+      }
+
+      return MEDIA_QUERY_CACHE
+    }
+
     return {
       subscribe: (onStoreChange: () => void): (() => void) => {
-        cachedMatchMedia!.addEventListener('change', onStoreChange)
+        const matchMedia = getMatchMedia()
+
+        matchMedia.addEventListener('change', onStoreChange)
 
-        return () => cachedMatchMedia!.removeEventListener('change', onStoreChange)
+        return () => matchMedia.removeEventListener('change', onStoreChange)
       },
-      getSnapshot: () => cachedMatchMedia!.matches,
+      getSnapshot: () => getMatchMedia().matches,
     }
-  }, [cachedMatchMedia])
+  }, [mediaQueryString])
 
   useDebugValue(mediaQueryString)
 

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,4 +1,5 @@
 import {Badge, Flex, Inline} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -8,19 +9,11 @@ export default function Tones() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Inline space={2}>
-        <Badge mode={mode}>Default</Badge>
-        <Badge mode={mode} tone="primary">
-          Primary
-        </Badge>
-        <Badge mode={mode} tone="positive">
-          Positive
-        </Badge>
-        <Badge mode={mode} tone="caution">
-          Caution
-        </Badge>
-        <Badge mode={mode} tone="critical">
-          Critical
-        </Badge>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
       </Inline>
     </Flex>
   )

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -3,11 +3,12 @@ import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function CustomStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="ghost" padding={3} tone={tone}>
               <Stack space={2}>
@@ -24,7 +25,7 @@ export default function CustomStory() {
             </Button>
           ))}
         </Grid>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="default" padding={3} tone={tone}>
               <Stack space={2}>

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,23 +1,21 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function AllTonesStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={5}>
-          {tones.map(([title, tone]) => (
+        <Stack space={3}>
+          {THEME_COLOR_CARD_TONES.map((tone) => (
             <Card
               key={tone}
-              padding={4}
+              padding={3}
               radius={2}
-              shadow={4}
+              shadow={2}
               style={{textAlign: 'center'}}
               tone={tone}
             >
-              <Text>{title}</Text>
+              <Text size={1}>{tone}</Text>
             </Card>
           ))}
         </Stack>

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -5,7 +5,7 @@ export default function AsButtonStory() {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
@@ -18,14 +18,20 @@ export default function AsButtonStory() {
                   __unstable_focusRing
                   as="button"
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -43,14 +49,20 @@ export default function AsButtonStory() {
                   as="button"
                   disabled
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -63,21 +75,27 @@ export default function AsButtonStory() {
             </Text>
             <Stack marginTop={3} space={2}>
               {tones.map(([title, tone]) => (
-                <div aria-selected key={tone}>
-                  <Card
-                    __unstable_focusRing
-                    as="button"
-                    padding={4}
-                    style={{textAlign: 'center'}}
-                    tone={tone}
-                  >
-                    <Stack space={2}>
-                      <Text weight="medium">{title}</Text>
-                      <Text muted>Muted</Text>
-                      <Text accent>Accent</Text>
-                    </Stack>
-                  </Card>
-                </div>
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
               ))}
             </Stack>
           </Box>

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -20,7 +20,7 @@ export default function AsComponentStory() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Card as={CustomLink} data-as="a" {...props} padding={3}>
-        <Text>As component</Text>
+        <Text size={1}>As component</Text>
       </Card>
     </Flex>
   )

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -1,15 +1,25 @@
-import {Card, Flex, Stack} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function CheckeredStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack space={1}>
-        <Card __unstable_checkered border style={{width: 120, height: 60}} />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="transparent" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="primary" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="positive" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="caution" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="critical" />
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card
+            __unstable_checkered
+            border
+            key={tone}
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
       </Stack>
     </Flex>
   )

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -2,13 +2,20 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function InteractiveCardStory() {
-  const selected = useBoolean('Selected', false, 'Props')
   const pressed = useBoolean('Pressed', false, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <div aria-selected={selected}>
-        <Card __unstable_focusRing aria-pressed={pressed} as="button" padding={3} tabIndex={0}>
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
           <Stack space={3}>
             <Text>
               Text <code>Code</code>

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -64,10 +64,12 @@ function List2() {
 
 function Preview() {
   return (
-    <Flex align="center">
-      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
+    <Flex align="center" gap={2}>
+      <Skeleton radius="full" style={{width: 33, height: 33}} />
       <Stack flex={1} space={2}>
-        <Text>Preview</Text>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
         <Text muted size={1}>
           Preview
         </Text>

package/src/core/primitives/card/__workshop__/props.tsx

@@ -13,14 +13,14 @@ export default function PropsStory() {
   const border = useBoolean('Border', false, 'Props')
   const checkered = useBoolean('Checkered', false, 'Props')
   const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Card
         __unstable_checkered={checkered}
         as={as}
@@ -34,14 +34,16 @@ export default function PropsStory() {
         tone={tone}
       >
         <Stack space={3}>
-          <Text>
+          <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
           </Text>
-          <Text>
+          <Text size={1}>
             Text with <a>link</a>.
           </Text>
-          <Text accent>Accented text.</Text>
+          <Text accent size={1}>
+            Text with accent color.
+          </Text>
         </Stack>
       </Card>
     </Flex>

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -68,12 +68,14 @@ function Preview({selected}: {selected: boolean}) {
   return (
     <Flex>
       <Box flex={1}>
-        <Text>Title</Text>
+        <Text size={1}>Title</Text>
       </Box>
       <Inline space={3}>
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
+          weight="medium"
           $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
         >
           <EditIcon />
@@ -81,6 +83,7 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
           $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -4,9 +4,15 @@ export default function MultipleTonesStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack>
+        <Card padding={3} tone="neutral">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="primary">
           <Checkbox />
         </Card>
+        <Card padding={3} tone="suggest">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="positive">
           <Checkbox />
         </Card>

package/src/core/primitives/code/__workshop__/props.tsx

@@ -8,7 +8,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/container/__workshop__/example.tsx

@@ -9,7 +9,7 @@ export default function PlainStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container onClick={useAction('onClick')} width={width}>
         <Card padding={4} shadow={1}>
-          <Text>
+          <Text size={1}>
             Container with <code>max-width={width}</code>
           </Text>
         </Card>

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -18,15 +18,15 @@ export default function ExampleStory() {
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>
       <DebugCard flex={1}>
-        <Code>1</Code>
+        <Code size={1}>1</Code>
       </DebugCard>
 
       <DebugCard flex={[1, 2, 3]}>
-        <Code>[1,2,3]</Code>
+        <Code size={1}>[1,2,3]</Code>
       </DebugCard>
 
       <DebugCard flex={['none', 'none', 1]}>
-        <Code>['none', 'none', 1]</Code>
+        <Code size={1}>['none', 'none', 1]</Code>
       </DebugCard>
     </Flex>
   )