@sanity/ui 1.0.7 → 1.0.8

package/dist/index.d.ts

@@ -7721,6 +7721,14 @@ export declare interface MediaQueryProps {
   media?: number[]
 }
 
+/**
+ * @internal
+ */
+export declare interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => number
+}
+
 /**
  * @public
  */

package/dist/index.esm.js

@@ -59,7 +59,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1 } from 'react';
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
 import { white as white$1, black as black$1, hues } from '@sanity/color';
@@ -222,7 +222,7 @@ function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
+  const __perf_hash__ = useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
   return useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
 }
 function _getElements(element, elementsArg) {
@@ -814,7 +814,7 @@ var ResizeObserver = function () {
   };
   return ResizeObserver;
 }();
-const _ResizeObserver = typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
+const _ResizeObserver = typeof document !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
 const _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
   return {
@@ -3168,7 +3168,7 @@ function ThemeColorProvider(props) {
 function useTheme() {
   return useTheme$1();
 }
-const MEDIA_MANAGER_CACHE = /* @__PURE__ */new WeakMap();
+const MEDIA_STORE_CACHE = /* @__PURE__ */new WeakMap();
 function _getMediaQuery(media, index) {
   if (index === 0) {
     return "screen and (max-width: ".concat(media[index] - 1, "px)");
@@ -3178,48 +3178,41 @@ function _getMediaQuery(media, index) {
   }
   return "screen and (min-width: ".concat(media[index - 1], "px) and (max-width: ").concat(media[index] - 1, "px)");
 }
-function _createMediaManager(media) {
+function _createMediaStore(media) {
   const mediaLen = media.length;
-  const sizes = [];
-  if (typeof window !== "undefined") {
-    for (let index = mediaLen; index > -1; index -= 1) {
-      const mediaQuery = _getMediaQuery(media, index);
-      sizes.push({
-        index,
-        mq: window.matchMedia(mediaQuery)
-      });
+  let sizes;
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = [];
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index);
+        sizes.push({
+          index,
+          mq: window.matchMedia(mediaQuery)
+        });
+      }
     }
-  }
-  const getCurrentIndex = () => {
+    return sizes;
+  };
+  const getSnapshot = () => {
     for (const {
       index,
       mq
-    } of sizes) {
+    } of getSizes()) {
       if (mq.matches) return index;
     }
     return 0;
   };
-  const subscribe = subscriber => {
+  const subscribe = onStoreChange => {
     const disposeFns = [];
     for (const {
-      index,
       mq
-    } of sizes) {
+    } of getSizes()) {
       const handleChange = () => {
-        if (mq.matches) subscriber(index);
+        if (mq.matches) onStoreChange();
       };
-      if (mq.addEventListener) {
-        mq.addEventListener("change", handleChange);
-      } else {
-        mq.addListener(handleChange);
-      }
-      disposeFns.push(() => {
-        if (mq.removeEventListener) {
-          mq.removeEventListener("change", handleChange);
-        } else {
-          mq.removeListener(handleChange);
-        }
-      });
+      mq.addEventListener("change", handleChange);
+      disposeFns.push(() => mq.removeEventListener("change", handleChange));
     }
     return () => {
       for (const disposeFn of disposeFns) {
@@ -3228,42 +3221,45 @@ function _createMediaManager(media) {
     };
   };
   return {
-    getCurrentIndex,
+    getSnapshot,
     subscribe
   };
 }
-function _getMediaManager(media) {
-  let manager = MEDIA_MANAGER_CACHE.get(media);
-  if (!manager) {
-    manager = _createMediaManager(media);
-    MEDIA_MANAGER_CACHE.set(media, manager);
-  }
-  return manager;
+function getServerSnapshot$1() {
+  return 0;
 }
 function useMediaIndex() {
   const theme = useTheme();
   const {
     media
   } = theme.sanity;
-  const manager = useMemo(() => _getMediaManager(media), [media]);
-  const [index, setIndex] = useState(manager.getCurrentIndex);
-  useEffect(() => manager.subscribe(setIndex), [manager]);
-  return index;
+  let store = MEDIA_STORE_CACHE.get(media);
+  if (!store) {
+    store = _createMediaStore(media);
+    MEDIA_STORE_CACHE.set(media, store);
+  }
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$1);
+}
+let MEDIA_QUERY_CACHE;
+function getMatchMedia() {
+  if (!MEDIA_QUERY_CACHE) {
+    MEDIA_QUERY_CACHE = window.matchMedia("(prefers-color-scheme: dark)");
+  }
+  return MEDIA_QUERY_CACHE;
+}
+function subscribe(onStoreChange) {
+  const matchMedia = getMatchMedia();
+  matchMedia.addEventListener("change", onStoreChange);
+  return () => matchMedia.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return getMatchMedia().matches;
+}
+function getServerSnapshot() {
+  return false;
 }
 function usePrefersDark() {
-  const mq = useMemo(() => {
-    if (typeof window === "undefined") return void 0;
-    return window.matchMedia("(prefers-color-scheme: dark)");
-  }, []);
-  const [dark, setDark] = useState((mq == null ? void 0 : mq.matches) || false);
-  useEffect(() => {
-    if (!mq) return void 0;
-    setDark(mq.matches);
-    const handleChange = () => setDark(mq.matches);
-    mq.addEventListener("change", handleChange);
-    return () => mq.removeEventListener("change", handleChange);
-  }, [mq]);
-  return dark;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useForwardedRef(ref) {
@@ -5350,7 +5346,7 @@ const defaultContextValue = {
   version: 0,
   boundaryElement: null,
   get element() {
-    if (typeof window === "undefined") {
+    if (typeof document === "undefined") {
       return null;
     }
     if (globalScope[elementKey]) {
@@ -5405,7 +5401,7 @@ function _isEqual(objA, objB) {
   }
   return keysA.every(key => objA[key] === objB[key]);
 }
-const __BROWSER__ = typeof window !== "undefined";
+const __BROWSER__ = typeof document !== "undefined";
 function PortalProvider(props) {
   const {
     boundaryElement,
@@ -8517,6 +8513,11 @@ function Toast(props) {
     })
   }));
 }
+function useMounted() {
+  const [mounted, mount] = useReducer(() => true, false);
+  useEffect(mount, [mount]);
+  return mounted;
+}
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || createContext(null);
 const ToastContext = globalScope[key$1];
@@ -8531,24 +8532,21 @@ function ToastProvider(props) {
     paddingY,
     zOffset
   } = props;
-  const [state, setState] = useState({
-    toasts: []
-  });
+  const [state, _setState] = useState([]);
   const toastsRef = useRef({});
   const push = useCallback(params => {
+    const setState = state2 => startTransition(() => _setState(state2));
     const id = params.id || String(toastId++);
     const duration = params.duration || 5e3;
     const dismiss = () => {
       var _a;
       const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
       setState(prevState => {
-        const idx = prevState.toasts.findIndex(t => t.id === id);
+        const idx = prevState.findIndex(t => t.id === id);
         if (idx > -1) {
-          const toasts = prevState.toasts.slice(0);
+          const toasts = prevState.slice(0);
           toasts.splice(idx, 1);
-          return _objectSpread(_objectSpread({}, prevState), {}, {
-            toasts
-          });
+          return toasts;
         }
         return prevState;
       });
@@ -8558,15 +8556,13 @@ function ToastProvider(props) {
       }
     };
     setState(prevState => {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        toasts: prevState.toasts.filter(t => t.id !== id).concat([{
-          dismiss,
-          id,
-          params: _objectSpread(_objectSpread({}, params), {}, {
-            duration
-          })
-        }])
-      });
+      return prevState.filter(t => t.id !== id).concat([{
+        dismiss,
+        id,
+        params: _objectSpread(_objectSpread({}, params), {}, {
+          duration
+        })
+      }]);
     });
     if (toastsRef.current[id]) {
       clearTimeout(toastsRef.current[id].timeoutId);
@@ -8589,9 +8585,10 @@ function ToastProvider(props) {
     version: 0,
     push
   }), [push]);
+  const mounted = useMounted();
   return /* @__PURE__ */jsxs(ToastContext.Provider, {
     value,
-    children: [children, /* @__PURE__ */jsx(Root$1, {
+    children: [children, mounted && /* @__PURE__ */jsx(Root$1, {
       "data-ui": "ToastProvider",
       zOffset,
       children: /* @__PURE__ */jsx(ToastContainer, {
@@ -8601,7 +8598,7 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.toasts.map(_ref27 => {
+            children: state.map(_ref27 => {
               let {
                 dismiss,
                 id,