@sanity/ui 2.6.4-canary.0 → 2.6.4-canary.2

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

@@ -76,6 +76,7 @@ export const TreeItem = memo(function TreeItem(
   const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  // @TODO split out into separate contexts
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],

package/src/core/hooks/index.ts

@@ -1,10 +1,11 @@
 export * from './useArrayProp'
 export * from './useClickOutside'
+export * from './useCustomValidity'
 export * from './useElementRect'
 export * from './useElementSize'
+export * from './useForwardedRef'
 export * from './useGlobalKeyDown'
+export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
-export * from './useForwardedRef'
-export * from './useCustomValidity'

package/src/core/hooks/useClickOutside.ts

@@ -1,102 +1,65 @@
-import {useEffect, useRef, useState} from 'react'
+import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
 import {EMPTY_ARRAY} from '../constants'
 
 /**
  * @public
  */
-export type ClickOutsideListener = (event: MouseEvent) => void
-
-function _getElements(
-  element: HTMLElement | null,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null>,
-): HTMLElement[] {
-  const ret = [element]
-
-  for (const el of elementsArg) {
-    if (Array.isArray(el)) {
-      ret.push(...el)
-    } else {
-      ret.push(el)
-    }
-  }
-
-  return ret.filter(Boolean) as HTMLElement[]
-}
+export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
 
 /**
+ * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
+ * ```tsx
+ * useClickOutside(
+ *   () => {},
+ *   () => [ref.current],
+ * )
+ *
  * @public
  */
 export function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
+  elementsArg:
+    | Array<HTMLElement | HTMLElement[] | null>
+    | (() => Array<HTMLElement | HTMLElement[] | null>) = EMPTY_ARRAY,
   boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void {
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const [elements, setElements] = useState(() => _getElements(element, elementsArg))
-  const elementsRef = useRef(elements)
-
-  useEffect(() => {
-    const prevElements = elementsRef.current
-    const nextElements = _getElements(element, elementsArg)
-
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements)
-      elementsRef.current = nextElements
-
+): void {
+  /**
+   * The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
+   * juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
+   */
+  const eventHandler = useEffectEvent((evt: MouseEvent | TouchEvent) => {
+    const target = evt.target
+
+    if (!(target instanceof Node)) {
       return
     }
 
-    for (const el of prevElements) {
-      if (!nextElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
-    }
-
-    for (const el of nextElements) {
-      if (!prevElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
+    if (boundaryElement && !boundaryElement.contains(target)) {
+      return
     }
-  }, [element, elementsArg])
 
-  useEffect(() => {
-    if (!listener) return undefined
+    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
+    const elements = resolvedElements.flat()
 
-    const handleWindowMouseDown = (evt: MouseEvent) => {
-      const target = evt.target
+    for (const el of elements) {
+      if (!el) continue
 
-      if (!(target instanceof Node)) {
+      if (target === el || el.contains(target)) {
         return
       }
-
-      if (boundaryElement && !boundaryElement.contains(target)) {
-        return
-      }
-
-      for (const el of elements) {
-        if (target === el || el.contains(target)) {
-          return
-        }
-      }
-
-      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?
+    listener(evt)
+  })
 
-    window.addEventListener('mousedown', handleWindowMouseDown)
+  useEffect(() => {
+    document.addEventListener('mousedown', eventHandler)
+    document.addEventListener('touchstart', eventHandler)
 
     return () => {
-      window.removeEventListener('mousedown', handleWindowMouseDown)
+      document.removeEventListener('mousedown', eventHandler)
+      document.removeEventListener('touchstart', eventHandler)
     }
-  }, [boundaryElement, listener, elements])
-
-  return setElement
+  }, [eventHandler])
 }

package/src/core/hooks/useMatchMedia.ts

@@ -0,0 +1,46 @@
+import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
+
+/**
+ * Efficiently subscribes to `window.matchMedia` queries
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * @public
+ */
+export function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean {
+  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) => {
+        const matchMedia = getMatchMedia()
+
+        matchMedia.addEventListener('change', onStoreChange)
+
+        return () => matchMedia.removeEventListener('change', onStoreChange)
+      },
+      getSnapshot: () => getMatchMedia().matches,
+    }
+  }, [mediaQueryString])
+
+  useDebugValue(mediaQueryString)
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

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

@@ -1,4 +1,4 @@
-import {useSyncExternalStore} from 'react'
+import {useMemo, useSyncExternalStore} from 'react'
 import {useTheme_v2} from '../../theme'
 
 /**
@@ -9,9 +9,6 @@ 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)`
 type MediaQueryMaxWidth = `(max-width: ${number}px)`
 type MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`
@@ -98,13 +95,7 @@ function getServerSnapshot() {
  */
 export function useMediaIndex(): number {
   const {media} = useTheme_v2()
-
-  let store = MEDIA_STORE_CACHE.get(media)
-
-  if (!store) {
-    store = _createMediaStore(media)
-    MEDIA_STORE_CACHE.set(media, store)
-  }
+  const store = useMemo(() => _createMediaStore(media), [media])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersDark.ts

@@ -1,64 +1,16 @@
-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
-
-/**
- * Lazy init the matchMedia instance
- */
-function 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('(prefers-color-scheme: dark)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
  *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
-
-/**
  * @public
  */
-export function usePrefersDark(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersDark(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
 }

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,64 +1,16 @@
-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
-
-/**
- * Lazy init the matchMedia instance
- */
-function 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('(prefers-reduced-motion: reduce)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
-
-/**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
- *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
  * Returns true if motion should be reduced
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
  * @public
  */
-export function usePrefersReducedMotion(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
 }

package/src/core/primitives/avatar/styles.ts

@@ -14,24 +14,24 @@ export const avatarStyle = {
 
 function avatarArrowStyle(): CSSObject {
   return {
-    position: 'absolute',
-    boxSizing: 'border-box',
-    zIndex: 0,
-    opacity: 0,
-    transition: 'all 0.2s linear',
-    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
+    'position': 'absolute',
+    'boxSizing': 'border-box',
+    'zIndex': 0,
+    'opacity': 0,
+    'transition': 'all 0.2s linear',
+    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
+    'left': 0,
+    'right': 0,
+    'top': 0,
+    'bottom': 0,
 
     '& > svg': {
-      width: '11px',
-      height: '7px',
-      position: 'absolute',
-      top: '-5px',
-      left: '50%',
-      transform: 'translateX(-6px)',
+      'width': '11px',
+      'height': '7px',
+      'position': 'absolute',
+      'top': '-5px',
+      'left': '50%',
+      'transform': 'translateX(-6px)',
 
       '&:not([hidden])': {
         display: 'block',
@@ -63,11 +63,11 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
     '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
 
-    backgroundColor: 'var(--avatar-bg-color)',
-    position: 'relative',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-    boxShadow: '0 0 0 1px var(--card-bg-color)',
+    'backgroundColor': 'var(--avatar-bg-color)',
+    'position': 'relative',
+    'boxSizing': 'border-box',
+    'userSelect': 'none',
+    'boxShadow': '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -81,14 +81,14 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
     /* &:is(button) */
     '&[data-as="button"]': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      margin: 0,
-      padding: 0,
-      border: 0,
-      font: 'inherit',
-      color: 'inherit',
-      outline: 'none',
+      'WebkitFontSmoothing': 'inherit',
+      'appearance': 'none',
+      'margin': 0,
+      'padding': 0,
+      'border': 0,
+      'font': 'inherit',
+      'color': 'inherit',
+      'outline': 'none',
 
       '&:focus': {
         boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
@@ -110,9 +110,9 @@ export function responsiveAvatarSizeStyle(
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]
 
     return {
-      width: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-      borderRadius: rem(avatarSize.size / 2),
+      'width': rem(avatarSize.size),
+      'height': rem(avatarSize.size),
+      'borderRadius': rem(avatarSize.size / 2),
 
       '&>svg': {
         width: rem(avatarSize.size),
@@ -131,14 +131,14 @@ export function avatarImageStyle(): CSSObject {
 
 export function avatarInitialsStyle(): CSSObject {
   return {
-    width: '100%',
-    height: '100%',
-    color: 'var(--avatar-fg-color)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textTransform: 'uppercase',
-    textAlign: 'center',
-    borderRadius: '50%',
+    'width': '100%',
+    'height': '100%',
+    'color': 'var(--avatar-fg-color)',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'textTransform': 'uppercase',
+    'textAlign': 'center',
+    'borderRadius': '50%',
 
     '&:not([hidden])': {
       display: 'flex',
@@ -155,8 +155,8 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '2px',
-    stroke: 'var(--avatar-bg-color)',
+    'strokeWidth': '2px',
+    'stroke': 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/core/primitives/badge/styles.ts

@@ -8,8 +8,8 @@ export function badgeStyle(props: BadgeStyleProps): CSSObject {
     '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
     '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
 
-    backgroundColor: 'var(--card-bg-color)',
-    cursor: 'default',
+    'backgroundColor': 'var(--card-bg-color)',
+    'cursor': 'default',
 
     '&:not([hidden])': {
       display: 'inline-block',

package/src/core/primitives/button/styles.ts

@@ -81,12 +81,12 @@ export function buttonColorStyles(
   return [
     _cardColorStyle(baseColor, color.enabled),
     {
-      backgroundColor: 'var(--card-bg-color)',
-      color: 'var(--card-fg-color)',
-      boxShadow: focusRingBorderStyle(border),
+      'backgroundColor': 'var(--card-bg-color)',
+      'color': 'var(--card-fg-color)',
+      'boxShadow': focusRingBorderStyle(border),
       '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
       "&:not([data-disabled='true'])": {
-        boxShadow: combineBoxShadow(
+        'boxShadow': combineBoxShadow(
           focusRingBorderStyle(border),
           shadow ? defaultBoxShadow : undefined,
         ),

package/src/core/primitives/inline/styles.ts

@@ -4,7 +4,7 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
   return {
-    lineHeight: 0,
+    'lineHeight': 0,
 
     '&&:not([hidden])': {
       display: 'block',
@@ -24,7 +24,7 @@ export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeP
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
 
     return {
-      margin: `-${_space} 0 0 -${_space}`,
+      'margin': `-${_space} 0 0 -${_space}`,
       '& > div': {padding: `${_space} 0 0 ${_space}`},
     }
   })

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,7 +1,7 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
@@ -20,8 +20,8 @@ export default function AlignedStory() {
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
     <Text>
@@ -39,9 +39,11 @@ export default function AlignedStory() {
   )
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-  const handleClose = useCallback(() => setOpen(false), [])
 
-  useClickOutside(handleClose, [buttonElement, popoverElement])
+  useClickOutside(
+    () => setOpen(false),
+    () => [buttonElementRef.current, popoverElementRef.current],
+  )
 
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
@@ -56,14 +58,14 @@ export default function AlignedStory() {
             padding={3}
             portal={portal}
             placement={placement}
-            ref={setPopoverElement}
+            ref={popoverElementRef}
             width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}
               mode="bleed"
               onClick={handleToggleOpen}
-              ref={setButtonElement}
+              ref={buttonElementRef}
               selected={open}
             />
           </Popover>

package/src/core/primitives/popover/constants.ts

@@ -7,16 +7,16 @@ export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
 export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['bottom', 'left', 'right'],
+  'top': ['bottom', 'left', 'right'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],
   'top-end': ['bottom-end', 'left-end', 'right-end'],
-  bottom: ['top', 'left', 'right'],
+  'bottom': ['top', 'left', 'right'],
   'bottom-start': ['top-start', 'left-start', 'right-start'],
   'bottom-end': ['top-end', 'left-end', 'right-end'],
-  left: ['right', 'top', 'bottom'],
+  'left': ['right', 'top', 'bottom'],
   'left-start': ['right-start', 'top-start', 'bottom-start'],
   'left-end': ['right-end', 'top-end', 'bottom-end'],
-  right: ['left', 'top', 'bottom'],
+  'right': ['left', 'top', 'bottom'],
   'right-start': ['left-start', 'top-start', 'bottom-start'],
   'right-end': ['left-end', 'top-end', 'bottom-end'],
 }

package/src/core/primitives/stack/styles.ts

@@ -12,8 +12,8 @@ const BASE_STYLE: CSSObject = {
   '&[data-as="ul"],&[data-as="ol"]': {
     listStyle: 'none',
   },
-  gridTemplateColumns: 'minmax(0, 1fr)',
-  gridAutoRows: 'min-content',
+  'gridTemplateColumns': 'minmax(0, 1fr)',
+  'gridAutoRows': 'min-content',
 }
 
 export function stackBaseStyle(): CSSObject {