@sanity/ui 2.6.8 → 2.7.0

package/dist/index.d.mts

@@ -2713,6 +2713,18 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
+/**
+ * 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 declare function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2725,15 +2737,30 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
+ * 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
+ *
  * @public
  */
-export declare function usePrefersDark(): boolean
+export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
 
 /**
  * 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 declare function usePrefersReducedMotion(): boolean
+export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
 /**
  * @public

package/dist/index.d.ts

@@ -2713,6 +2713,18 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
+/**
+ * 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 declare function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2725,15 +2737,30 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
+ * 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
+ *
  * @public
  */
-export declare function usePrefersDark(): boolean
+export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
 
 /**
  * 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 declare function usePrefersReducedMotion(): boolean
+export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
 /**
  * @public

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, useImperativeHandle, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -171,6 +171,12 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
     };
   }, [boundaryElement, listener, elements]), setElement;
 }
+function useCustomValidity(ref, customValidity) {
+  useEffect(() => {
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+  }, [customValidity, ref]);
+}
 var resizeObservers = [], hasActiveObservations = function() {
   return resizeObservers.some(function(ro) {
     return ro.activeTargets.length > 0;
@@ -504,9 +510,27 @@ function useElementRect(element) {
   const elementSize = useElementSize(element);
   return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
+function useForwardedRef(ref) {
+  const innerRef = useRef(null);
+  return useImperativeHandle(ref, () => innerRef.current), innerRef;
+}
 function useGlobalKeyDown(onKeyDown) {
   return useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
 }
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const { subscribe: subscribe2, getSnapshot } = useMemo(() => {
+    let MEDIA_QUERY_CACHE;
+    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
+    return {
+      subscribe: (onStoreChange) => {
+        const matchMedia = getMatchMedia();
+        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+      },
+      getSnapshot: () => getMatchMedia().matches
+    };
+  }, [mediaQueryString]);
+  return useDebugValue(mediaQueryString), useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
+}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -516,9 +540,13 @@ function getGlobalScope() {
 }
 const globalScope = getGlobalScope();
 function createGlobalScopedContext(key2, defaultValue) {
-  return typeof document > "u" ? createContext(defaultValue) : (globalScope[key2] = globalScope[key2] || createContext(defaultValue), globalScope[key2]);
+  const symbol = Symbol.for(key2);
+  return typeof document > "u" ? createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol]);
 }
-const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
+const ThemeContext = createGlobalScopedContext(
+  "@sanity/ui/context/theme",
+  null
+);
 function ThemeProvider(props) {
   const parentTheme = useContext(ThemeContext), {
     children,
@@ -549,7 +577,6 @@ function useTheme() {
 function useTheme_v2() {
   return getTheme_v2(useTheme$1());
 }
-const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
   return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
 }
@@ -584,57 +611,18 @@ function _createMediaStore(media) {
     };
   } };
 }
-function getServerSnapshot$2() {
+function getServerSnapshot() {
   return 0;
 }
 function useMediaIndex() {
-  const { media } = useTheme_v2();
-  let store = MEDIA_STORE_CACHE.get(media);
-  return store || (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store)), useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$2);
-}
-let MEDIA_QUERY_CACHE$1;
-function getMatchMedia$1() {
-  return MEDIA_QUERY_CACHE$1 || (MEDIA_QUERY_CACHE$1 = window.matchMedia("(prefers-color-scheme: dark)")), MEDIA_QUERY_CACHE$1;
+  const { media } = useTheme_v2(), store = useMemo(() => _createMediaStore(media), [media]);
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
-function subscribe$2(onStoreChange) {
-  const matchMedia = getMatchMedia$1();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+function usePrefersDark(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot2);
 }
-function getSnapshot$1() {
-  return getMatchMedia$1().matches;
-}
-function getServerSnapshot$1() {
-  return !1;
-}
-function usePrefersDark() {
-  return useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
-}
-let MEDIA_QUERY_CACHE;
-function getMatchMedia() {
-  return MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia("(prefers-reduced-motion: reduce)")), MEDIA_QUERY_CACHE;
-}
-function subscribe$1(onStoreChange) {
-  const matchMedia = getMatchMedia();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-}
-function getSnapshot() {
-  return getMatchMedia().matches;
-}
-function getServerSnapshot() {
-  return !1;
-}
-function usePrefersReducedMotion() {
-  return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
-}
-function useForwardedRef(ref) {
-  const innerRef = useRef(null);
-  return useImperativeHandle(ref, () => innerRef.current), innerRef;
-}
-function useCustomValidity(ref, customValidity) {
-  useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
-  }, [customValidity, ref]);
+function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
 }
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -2813,8 +2801,8 @@ const Root$k = styled.div(
     /* @__PURE__ */ jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsx(ShapePath, { d: fillPath })
   ] }) });
-}), key$7 = Symbol.for("@sanity/ui/context/boundaryElement"), BoundaryElementContext = createGlobalScopedContext(
-  key$7,
+}), BoundaryElementContext = createGlobalScopedContext(
+  "@sanity/ui/context/boundaryElement",
   null
 );
 function BoundaryElementProvider(props) {
@@ -2903,7 +2891,10 @@ function getLayerContext(contextValue) {
     return contextValue;
   throw new Error("could not get layer context");
 }
-const key$6 = Symbol.for("@sanity/ui/context/layer"), LayerContext = createGlobalScopedContext(key$6, null);
+const LayerContext = createGlobalScopedContext(
+  "@sanity/ui/context/layer",
+  null
+);
 function useLayer() {
   const value = useContext(LayerContext);
   if (!value)
@@ -3038,7 +3029,7 @@ const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(
 }), Layer = forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(LayerChildren, { ...restProps, ref, children }) });
-}), key$5 = Symbol.for("@sanity/ui/context/portal"), elementKey = Symbol.for("@sanity/ui/context/portal/element");
+}), key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const defaultContextValue = {
   version: 0,
@@ -3046,7 +3037,7 @@ const defaultContextValue = {
   get element() {
     return typeof document > "u" ? null : (globalScope[elementKey] || (globalScope[elementKey] = document.createElement("div"), globalScope[elementKey].setAttribute("data-portal", ""), document.body.appendChild(globalScope[elementKey])), globalScope[elementKey]);
   }
-}, PortalContext = createGlobalScopedContext(key$5, defaultContextValue);
+}, PortalContext = createGlobalScopedContext(key, defaultContextValue);
 function usePortal() {
   const value = useContext(PortalContext);
   if (!value)
@@ -3060,16 +3051,6 @@ function Portal(props) {
   const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
   return portalElement ? createPortal(children, portalElement) : null;
 }
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function PortalProvider(props) {
   const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
     emptySubscribe,
@@ -3084,7 +3065,18 @@ function PortalProvider(props) {
   return /* @__PURE__ */ jsx(PortalContext.Provider, { value, children });
 }
 const emptySubscribe = () => () => {
-}, Root$i = styled.div`
+};
+function useUnique(value) {
+  const valueRef = useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
+}
+function _isEqual(objA, objB) {
+  if (!objA || !objB)
+    return objA === objB;
+  const keysA = Object.keys(objA), keysB = Object.keys(objB);
+  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
+}
+const Root$i = styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -4318,7 +4310,10 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   })
 );
 TooltipCard.displayName = "TooltipCard";
-const key$4 = Symbol.for("@sanity/ui/context/tooltipDelayGroup"), TooltipDelayGroupContext = createGlobalScopedContext(key$4, null);
+const TooltipDelayGroupContext = createGlobalScopedContext(
+  "@sanity/ui/context/tooltipDelayGroup",
+  null
+);
 function useTooltipDelayGroup() {
   return useContext(TooltipDelayGroupContext);
 }
@@ -5053,9 +5048,10 @@ function animationDialogStyle(props) {
     }
   ` : css``;
 }
-const key$3 = Symbol.for("@sanity/ui/context/dialog"), DialogContext = createGlobalScopedContext(key$3, {
-  version: 0
-});
+const DialogContext = createGlobalScopedContext(
+  "@sanity/ui/context/dialog",
+  { version: 0 }
+);
 function useDialog() {
   return useContext(DialogContext);
 }
@@ -5281,7 +5277,10 @@ const Root$6 = styled.kbd`
 `, Hotkeys = forwardRef(function(props, ref) {
   const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = useArrayProp(spaceProp);
   return !keys || keys.length === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
-}), key$2 = Symbol.for("@sanity/ui/context/menu"), MenuContext = createGlobalScopedContext(key$2, null);
+}), MenuContext = createGlobalScopedContext(
+  "@sanity/ui/context/menu",
+  null
+);
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
 }
@@ -6255,7 +6254,10 @@ function useMounted() {
   );
 }
 const subscribe = () => () => {
-}, key$1 = Symbol.for("@sanity/ui/context/toast"), ToastContext = createGlobalScopedContext(key$1, null), Root$1 = styled(Layer)`
+}, ToastContext = createGlobalScopedContext(
+  "@sanity/ui/context/toast",
+  null
+), Root$1 = styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;
@@ -6414,7 +6416,10 @@ function _focusItemElement(el) {
     firstChild && firstChild instanceof HTMLElement && firstChild.focus();
   }
 }
-const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalScopedContext(key, null), Tree = memo(
+const TreeContext = createGlobalScopedContext(
+  "@sanity/ui/context/tree",
+  null
+), Tree = memo(
   forwardRef(function(props, forwardedRef) {
     const { children, space = 1, onFocus, ...restProps } = props, ref = useRef(null), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement), path = useMemo(() => [], []), [itemElements, setItemElements] = useState([]), [state, setState] = useState({}), stateRef = useRef(state);
     useImperativeHandle(
@@ -6867,6 +6872,7 @@ export {
   useForwardedRef,
   useGlobalKeyDown,
   useLayer,
+  useMatchMedia,
   useMediaIndex,
   usePortal,
   usePrefersDark,