@sanity/ui 1.0.7 → 1.0.8

package/dist/index.js

@@ -235,7 +235,7 @@ function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
+  const __perf_hash__ = react.useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
   return react.useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
 }
 function _getElements(element, elementsArg) {
@@ -827,7 +827,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 {
@@ -3181,7 +3181,7 @@ function ThemeColorProvider(props) {
 function useTheme() {
   return styled.useTheme();
 }
-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)");
@@ -3191,48 +3191,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) {
@@ -3241,42 +3234,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 = react.useMemo(() => _getMediaManager(media), [media]);
-  const [index, setIndex] = react.useState(manager.getCurrentIndex);
-  react.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 react.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 = react.useMemo(() => {
-    if (typeof window === "undefined") return void 0;
-    return window.matchMedia("(prefers-color-scheme: dark)");
-  }, []);
-  const [dark, setDark] = react.useState((mq == null ? void 0 : mq.matches) || false);
-  react.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 react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 const useIsomorphicEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 function useForwardedRef(ref) {
@@ -5363,7 +5359,7 @@ const defaultContextValue = {
   version: 0,
   boundaryElement: null,
   get element() {
-    if (typeof window === "undefined") {
+    if (typeof document === "undefined") {
       return null;
     }
     if (globalScope[elementKey]) {
@@ -5418,7 +5414,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,
@@ -8530,6 +8526,11 @@ function Toast(props) {
     })
   }));
 }
+function useMounted() {
+  const [mounted, mount] = react.useReducer(() => true, false);
+  react.useEffect(mount, [mount]);
+  return mounted;
+}
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || react.createContext(null);
 const ToastContext = globalScope[key$1];
@@ -8544,24 +8545,21 @@ function ToastProvider(props) {
     paddingY,
     zOffset
   } = props;
-  const [state, setState] = react.useState({
-    toasts: []
-  });
+  const [state, _setState] = react.useState([]);
   const toastsRef = react.useRef({});
   const push = react.useCallback(params => {
+    const setState = state2 => react.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;
       });
@@ -8571,15 +8569,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);
@@ -8602,9 +8598,10 @@ function ToastProvider(props) {
     version: 0,
     push
   }), [push]);
+  const mounted = useMounted();
   return /* @__PURE__ */jsxRuntime.jsxs(ToastContext.Provider, {
     value,
-    children: [children, /* @__PURE__ */jsxRuntime.jsx(Root$1, {
+    children: [children, mounted && /* @__PURE__ */jsxRuntime.jsx(Root$1, {
       "data-ui": "ToastProvider",
       zOffset,
       children: /* @__PURE__ */jsxRuntime.jsx(ToastContainer, {
@@ -8614,7 +8611,7 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
-            children: state.toasts.map(_ref27 => {
+            children: state.map(_ref27 => {
               let {
                 dismiss,
                 id,