@tamagui/core 1.0.1-beta.192 → 1.0.1-beta.194

package/dist/cjs/helpers/proxyThemeVariables.js

@@ -21,14 +21,9 @@ __export(proxyThemeVariables_exports, {
   proxyThemeVariables: () => proxyThemeVariables
 });
 module.exports = __toCommonJS(proxyThemeVariables_exports);
+var import_createProxy = require("./createProxy");
 function proxyThemeVariables(obj) {
-  if (process.env.NODE_ENV === "development") {
-    if (!obj || typeof obj !== "object") {
-      console.trace(`Empty value for proxyThemeVariables, broken config`, obj);
-      return obj;
-    }
-  }
-  return new Proxy(obj || {}, {
+  return (0, import_createProxy.createProxy)(obj || {}, {
     has(target, key) {
       return Reflect.has(target, removeStarting$(key));
     },

package/dist/cjs/helpers/proxyThemeVariables.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/proxyThemeVariables.tsx"],
-  "sourcesContent": ["export function proxyThemeVariables<A extends Object>(obj: A): A {\n  if (process.env.NODE_ENV === 'development') {\n    if (!obj || typeof obj !== 'object') {\n      // eslint-disable-next-line no-console\n      console.trace(`Empty value for proxyThemeVariables, broken config`, obj)\n      return obj\n    }\n  }\n  return new Proxy<A>(obj || {}, {\n    has(target, key) {\n      return Reflect.has(target, removeStarting$(key))\n    },\n    get(target, key) {\n      return Reflect.get(target, removeStarting$(key))\n    },\n  })\n}\n\nconst removeStarting$ = (str: string | symbol) =>\n  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,oBAAsC,KAAW;AAC/D,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,OAAO,OAAO,QAAQ,UAAU;AAEnC,cAAQ,MAAM,sDAAsD,GAAG;AACvE,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO,IAAI,MAAS,OAAO,CAAC,GAAG;AAAA,IAC7B,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,IACA,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AAEA,MAAM,kBAAkB,CAAC,QACvB,OAAO,QAAQ,YAAY,IAAI,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI;",
+  "sourcesContent": ["import { createProxy } from './createProxy'\n\nexport function proxyThemeVariables<A extends Object>(obj: A): A {\n  return createProxy<A>(obj || {}, {\n    has(target, key) {\n      return Reflect.has(target, removeStarting$(key))\n    },\n    get(target, key) {\n      return Reflect.get(target, removeStarting$(key))\n    },\n  })\n}\n\nconst removeStarting$ = (str: string | symbol) =>\n  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA4B;AAErB,SAAS,oBAAsC,KAAW;AAC/D,aAAO,gCAAe,OAAO,CAAC,GAAG;AAAA,IAC/B,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,IACA,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AAEA,MAAM,kBAAkB,CAAC,QACvB,OAAO,QAAQ,YAAY,IAAI,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI;",
   "names": []
 }

package/dist/cjs/helpers/useShallowSetState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/useShallowSetState.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>\n) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAE5B,SAAS,mBACd,QACA;AAEA,aAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAE5B,SAAS,mBACd,QACA;AACA,aAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/cjs/hooks/getThemeUnwrapped.js

@@ -26,9 +26,7 @@ const getThemeUnwrapped = (theme) => {
   if (!theme)
     return null;
   const first = theme[GetThemeUnwrapped];
-  if (first)
-    return first[GetThemeUnwrapped] || first;
-  return theme;
+  return (first == null ? void 0 : first[GetThemeUnwrapped]) || first || theme;
 };
 const GetThemeUnwrapped = Symbol();
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/hooks/getThemeUnwrapped.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/getThemeUnwrapped.tsx"],
-  "sourcesContent": ["export const getThemeUnwrapped = (theme: any) => {\n  if (!theme) return null\n  const first = theme[GetThemeUnwrapped]\n  if (first) return first[GetThemeUnwrapped] || first\n  return theme\n}\n\nexport const GetThemeUnwrapped = Symbol()\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,oBAAoB,CAAC,UAAe;AAC/C,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,QAAQ,MAAM;AACpB,MAAI;AAAO,WAAO,MAAM,sBAAsB;AAC9C,SAAO;AACT;AAEO,MAAM,oBAAoB,OAAO;",
+  "sourcesContent": ["export const getThemeUnwrapped = (theme: any) => {\n  if (!theme) return null\n  const first = theme[GetThemeUnwrapped]\n  return first?.[GetThemeUnwrapped] || first || theme\n}\n\nexport const GetThemeUnwrapped = Symbol()\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,oBAAoB,CAAC,UAAe;AAC/C,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,QAAQ,MAAM;AACpB,UAAO,+BAAQ,uBAAsB,SAAS;AAChD;AAEO,MAAM,oBAAoB,OAAO;",
   "names": []
 }

package/dist/cjs/hooks/useElementLayout.js

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useElementLayout_exports = {};
+__export(useElementLayout_exports, {
+  getRect: () => getRect,
+  measureLayout: () => measureLayout,
+  useElementLayout: () => useElementLayout
+});
+module.exports = __toCommonJS(useElementLayout_exports);
+var import_constants = require("@tamagui/constants");
+var import_react_native_use_responder_events = require("@tamagui/react-native-use-responder-events");
+var import_use_event = require("@tamagui/use-event");
+const LayoutHandlers = /* @__PURE__ */ new WeakMap();
+let resizeObserver = null;
+if (typeof window !== "undefined" && "ResizeObserver" in window) {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { target } of entries) {
+      const onLayout = LayoutHandlers.get(target);
+      if (typeof onLayout !== "function")
+        return;
+      measureLayout(target, null, (x, y, width, height, left, top) => {
+        onLayout({
+          nativeEvent: {
+            layout: { x, y, width, height, left, top },
+            target
+          },
+          timeStamp: Date.now()
+        });
+      });
+    }
+  });
+}
+const getRect = (node) => {
+  const rect = (0, import_react_native_use_responder_events.getBoundingClientRect)(node);
+  if (!rect)
+    return;
+  const { x, y, top, left } = rect;
+  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left };
+};
+const measureLayout = (node, relativeTo, callback) => {
+  const relativeNode = relativeTo || (node == null ? void 0 : node.parentNode);
+  if (relativeNode instanceof HTMLElement) {
+    setTimeout(() => {
+      const relativeRect = (0, import_react_native_use_responder_events.getBoundingClientRect)(relativeNode);
+      const { height, left, top, width } = getRect(node);
+      const x = left - relativeRect.left;
+      const y = top - relativeRect.top;
+      callback(x, y, width, height, left, top);
+    }, 0);
+  }
+};
+const idFn = () => {
+};
+function useElementLayout(ref, onLayout) {
+  const hasLayoutEvent = !!onLayout;
+  const onLayoutEvent = (0, import_use_event.useEvent)(onLayout || idFn);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (!resizeObserver || !hasLayoutEvent)
+      return;
+    const node = ref.current;
+    if (!node)
+      return;
+    LayoutHandlers.set(node, onLayoutEvent);
+    resizeObserver.observe(node);
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.unobserve(node);
+    };
+  }, [ref, hasLayoutEvent]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getRect,
+  measureLayout,
+  useElementLayout
+});
+//# sourceMappingURL=useElementLayout.js.map

package/dist/cjs/hooks/useElementLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useElementLayout.tsx"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  left: number\n  top: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n  resizeObserver = new ResizeObserver((entries) => {\n    for (const { target } of entries) {\n      const onLayout = LayoutHandlers.get(target)\n      if (typeof onLayout !== 'function') return\n      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n        onLayout({\n          nativeEvent: {\n            layout: { x, y, width, height, left, top },\n            target,\n          },\n          timeStamp: Date.now(),\n        })\n      })\n    }\n  })\n}\n\nexport const getRect = (node: HTMLElement) => {\n  const rect = getBoundingClientRect(node)\n  if (!rect) return\n  const { x, y, top, left } = rect\n  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }\n}\n\nexport const measureLayout = (\n  node: HTMLElement,\n  relativeTo: HTMLElement | null,\n  callback: Function\n) => {\n  const relativeNode = relativeTo || node?.parentNode\n  if (relativeNode instanceof HTMLElement) {\n    setTimeout(() => {\n      const relativeRect = getBoundingClientRect(relativeNode)!\n      const { height, left, top, width } = getRect(node)!\n      const x = left - relativeRect.left\n      const y = top - relativeRect.top\n      callback(x, y, width, height, left, top)\n    }, 0)\n  }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n  ref: RefObject<Element>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n) {\n  const hasLayoutEvent = !!onLayout\n  const onLayoutEvent = useEvent(onLayout || idFn)\n\n  // Observing is done in a separate effect to avoid this effect running\n  // when 'onLayout' changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver || !hasLayoutEvent) return\n    const node = ref.current\n    if (!node) return\n    LayoutHandlers.set(node, onLayoutEvent)\n    resizeObserver.observe(node)\n    return () => {\n      resizeObserver?.unobserve(node)\n    }\n  }, [ref, hasLayoutEvent])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C;AAC1C,+CAAsC;AACtC,uBAAyB;AAGzB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,UAAU,CAAC,SAAsB;AAC5C,QAAM,WAAO,gEAAsB,IAAI;AACvC,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,GAAG,GAAG,KAAK,KAAK,IAAI;AAC5B,SAAO,EAAE,GAAG,GAAG,OAAO,KAAK,aAAa,QAAQ,KAAK,cAAc,KAAK,KAAK;AAC/E;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,mBAAe,gEAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,oBAAgB,2BAAS,YAAY,IAAI;AAI/C,kDAA0B,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC;AAAgB;AACxC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
+  "names": []
+}

package/dist/cjs/hooks/useIsTouchDevice.js

@@ -22,17 +22,9 @@ __export(useIsTouchDevice_exports, {
 });
 module.exports = __toCommonJS(useIsTouchDevice_exports);
 var import_constants = require("@tamagui/constants");
-var import_react = require("react");
+var import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr");
 const useIsTouchDevice = () => {
-  const [touchOnly, setTouchOnly] = (0, import_react.useState)(false);
-  if (import_constants.isWeb && !import_constants.isServer) {
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (import_constants.isTouchable) {
-        setTouchOnly(true);
-      }
-    }, []);
-  }
-  return touchOnly;
+  return !import_constants.isWeb ? true : (0, import_use_did_finish_ssr.useDidFinishSSR)() ? import_constants.isTouchable : false;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/hooks/useIsTouchDevice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
-  "sourcesContent": ["import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useState } from 'react'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  if (isWeb && !isServer) {\n    // only ever false on web SSR (env), so run effect conditionally\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useIsomorphicLayoutEffect(() => {\n      if (isTouchable) {\n        setTouchOnly(true)\n      }\n    }, [])\n  }\n\n  return touchOnly\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwE;AACxE,mBAAyB;AAIlB,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,MAAI,0BAAS,CAAC,2BAAU;AAGtB,oDAA0B,MAAM;AAC9B,UAAI,8BAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isTouchable, isWeb } from '@tamagui/constants'\nimport { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'\n\nexport const useIsTouchDevice = () => {\n  return !isWeb ? true : useDidFinishSSR() ? isTouchable : false\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAmC;AACnC,gCAAgC;AAEzB,MAAM,mBAAmB,MAAM;AACpC,SAAO,CAAC,yBAAQ,WAAO,2CAAgB,IAAI,+BAAc;AAC3D;",
   "names": []
 }

package/dist/cjs/hooks/useMedia.js

@@ -22,21 +22,24 @@ __export(useMedia_exports, {
   configureMedia: () => configureMedia,
   getInitialMediaState: () => getInitialMediaState,
   getMedia: () => getMedia,
+  getMediaKeyImportance: () => getMediaKeyImportance,
   mediaObjectToString: () => mediaObjectToString,
   mediaQueryConfig: () => mediaQueryConfig,
   mediaState: () => mediaState,
+  mergeMediaByImportance: () => mergeMediaByImportance,
   removeMediaQueryListener: () => removeMediaQueryListener,
   useMedia: () => useMedia,
-  useMediaPropsActive: () => useMediaPropsActive,
-  useMediaQueryListeners: () => useMediaQueryListeners
+  useMediaListeners: () => useMediaListeners,
+  useMediaPropsActive: () => useMediaPropsActive
 });
 module.exports = __toCommonJS(useMedia_exports);
 var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_config = require("../config");
+var import_createProxy = require("../helpers/createProxy");
 var import_matchMedia = require("../helpers/matchMedia");
 var import_useSafeRef = require("./useSafeRef");
-const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
+const mediaState = process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
   {},
   {
     get(target, key) {
@@ -47,31 +50,30 @@ const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
     }
   }
 ) : {};
-const mediaQueryListeners = {};
+const listeners = {};
 function addMediaQueryListener(key, cb) {
   if (process.env.NODE_ENV === "development" && key[0] === "$") {
     console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`);
   }
-  mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
-  mediaQueryListeners[key].add(cb);
+  listeners[key] = listeners[key] || /* @__PURE__ */ new Set();
+  listeners[key].add(cb);
   return () => removeMediaQueryListener(key, cb);
 }
 function removeMediaQueryListener(key, cb) {
   var _a;
-  (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
+  (_a = listeners[key]) == null ? void 0 : _a.delete(cb);
 }
 const mediaQueryConfig = {};
 const getMedia = () => {
   return mediaState;
 };
-let currentMediaState;
-let initialMediaState;
+let curState;
+let initState;
 const getInitialMediaState = () => {
-  if ((0, import_config.getConfig)().disableSSR) {
-    return currentMediaState || {};
-  }
-  return initialMediaState || {};
+  return ((0, import_config.getConfig)().disableSSR ? curState : initState) || {};
 };
+let mediaKeysOrdered;
+const getMediaKeyImportance = (key) => mediaKeysOrdered.indexOf(key[0] === "$" ? key.slice(1) : key) + 2;
 const dispose = /* @__PURE__ */ new Set();
 const configureMedia = (config) => {
   const { media, mediaQueryDefaultActive } = config;
@@ -81,8 +83,9 @@ const configureMedia = (config) => {
     mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
   }
   Object.assign(mediaQueryConfig, media);
-  currentMediaState = { ...mediaState };
-  initialMediaState = currentMediaState;
+  curState = { ...mediaState };
+  initState = curState;
+  mediaKeysOrdered = Object.keys(media);
   if (config.disableSSR) {
     setupMediaListeners();
   }
@@ -99,119 +102,108 @@ function setupMediaListeners() {
   }
   configuredKey = nextKey;
   unlisten();
-  (0, import_react.startTransition)(() => {
-    for (const key in mediaQueryConfig) {
-      let update2 = function() {
-        const next = !!getMatch().matches;
-        if (next === mediaState[key])
-          return;
-        mediaState[key] = next;
-        currentMediaState = { ...mediaState };
-        const listeners = mediaQueryListeners[key];
-        if (listeners == null ? void 0 : listeners.size) {
-          listeners.forEach((cb) => cb(next));
-        }
-      };
-      var update = update2;
-      const str = mediaObjectToString(mediaQueryConfig[key]);
-      const getMatch = () => (0, import_matchMedia.matchMedia)(str);
-      const match = getMatch();
-      if (!match) {
-        throw new Error("\u26A0\uFE0F No match");
+  for (const key in mediaQueryConfig) {
+    let update2 = function() {
+      const next = !!getMatch().matches;
+      if (next === mediaState[key])
+        return;
+      mediaState[key] = next;
+      curState = { ...mediaState };
+      const cur = listeners[key];
+      if (cur == null ? void 0 : cur.size) {
+        cur.forEach((cb) => cb(next));
       }
-      match.addListener(update2);
-      dispose.add(() => match.removeListener(update2));
-      update2();
+    };
+    var update = update2;
+    const str = mediaObjectToString(mediaQueryConfig[key]);
+    const getMatch = () => (0, import_matchMedia.matchMedia)(str);
+    const match = getMatch();
+    if (!match) {
+      throw new Error("\u26A0\uFE0F No match");
     }
-  });
+    match.addListener(update2);
+    dispose.add(() => match.removeListener(update2));
+    update2();
+  }
 }
-function useMediaQueryListeners(config) {
-  if (config.disableSSR) {
+function useMediaListeners(config) {
+  if (config.disableSSR)
     return;
-  }
   (0, import_react.useEffect)(() => {
     setupMediaListeners();
     return unlisten;
   }, []);
 }
 function useMedia() {
-  const [state, setState] = (0, import_react.useState)(initialMediaState || {});
   const keys = (0, import_useSafeRef.useSafeRef)({});
+  const [state, setState] = (0, import_react.useState)(() => getMediaState(initState || {}, keys));
   function updateState() {
     setState((prev) => {
       for (const key in keys.current) {
         if (prev[key] !== mediaState[key]) {
-          return { ...mediaState };
+          return getMediaState({ ...mediaState }, keys);
         }
       }
       return prev;
     });
   }
   (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    const disposes = Object.keys(keys.current).map(
+    updateState();
+    const disposers = Object.keys(keys.current).map(
       (key) => addMediaQueryListener(key, updateState)
     );
-    updateState();
     return () => {
-      disposes.forEach((cb) => cb());
+      disposers.forEach((cb) => cb());
     };
-  });
-  return (0, import_react.useMemo)(
-    () => new Proxy(state, {
-      get(_, key) {
-        if (process.env.NODE_ENV === "development") {
-          if (!currentMediaState) {
-            throw new Error(
-              `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
-            );
-          }
-        }
-        if (!keys.current[key]) {
-          keys.current[key] = true;
-        }
-        return Reflect.get(state, key);
+  }, [keys.current]);
+  return state;
+}
+function getMediaState(state, keys) {
+  return new Proxy(state, {
+    get(_, key) {
+      if (!keys.current[key]) {
+        keys.current[key] = true;
       }
-    }),
-    [state, keys]
-  );
+      return Reflect.get(state, key);
+    }
+  });
 }
 function useMediaPropsActive(props) {
   const media = useMedia();
   return (0, import_react.useMemo)(() => {
-    const evaluated = {};
-    const lastSetImportanceForKey = {};
+    const next = {};
+    const importancesUsed = {};
     const propNames = Object.keys(props);
-    const mediaKeysOrdered = Object.keys(getMedia());
-    function update(k, v, importance = 0) {
-      if (lastSetImportanceForKey[k] > importance) {
-        return;
-      }
-      lastSetImportanceForKey[k] = importance;
-      evaluated[k] = v;
-    }
     for (let i = propNames.length - 1; i >= 0; i--) {
       const key = propNames[i];
       const val = props[key];
       if (key[0] === "$") {
-        const shortKey = key.slice(1);
-        if (!media[shortKey]) {
+        if (!media[key.slice(1)]) {
           continue;
         }
         if (val && typeof val === "object") {
-          const subPropNames = Object.keys(val);
-          const mediaImportance = mediaKeysOrdered.indexOf(shortKey);
-          for (let j = subPropNames.length; j--; j >= 0) {
-            const skey = subPropNames[j];
-            update(skey, val[skey], mediaImportance);
+          const subKeys = Object.keys(val);
+          for (let j = subKeys.length; j--; j >= 0) {
+            const subKey = subKeys[j];
+            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed);
           }
         }
       } else {
-        update(key, val);
+        mergeMediaByImportance(next, key, val, importancesUsed);
       }
     }
-    return evaluated;
+    return next;
   }, [media, props]);
 }
+function mergeMediaByImportance(onto, key, value, importancesUsed) {
+  const importance = getMediaKeyImportance(key);
+  if (importancesUsed[key] > importance) {
+    return false;
+  }
+  importancesUsed[key] = importance;
+  onto[key] = value;
+  return true;
+}
 function camelToHyphen(str) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
 }
@@ -236,12 +228,14 @@ function mediaObjectToString(query) {
   configureMedia,
   getInitialMediaState,
   getMedia,
+  getMediaKeyImportance,
   mediaObjectToString,
   mediaQueryConfig,
   mediaState,
+  mergeMediaByImportance,
   removeMediaQueryListener,
   useMedia,
-  useMediaPropsActive,
-  useMediaQueryListeners
+  useMediaListeners,
+  useMediaPropsActive
 });
 //# sourceMappingURL=useMedia.js.map

package/dist/cjs/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { startTransition, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? new Proxy(\n        {},\n        {\n          get(target, key) {\n            if (typeof key === 'string' && key[0] === '$') {\n              throw new Error(`Access of mediaState should never include $`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\n// for SSR capture it at time of startup\nlet currentMediaState: MediaQueryState | null\nlet initialMediaState: MediaQueryState | null\n\nexport const getInitialMediaState = () => {\n  if (getConfig().disableSSR) {\n    return currentMediaState || {}\n  }\n  return initialMediaState || {}\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  currentMediaState = { ...mediaState }\n  initialMediaState = currentMediaState\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  // theoretically this should make media reactions smoother but potentially delayed?\n  // but i believe consistent, so that's a nicer default (we'll see)\n  startTransition(() => {\n    for (const key in mediaQueryConfig) {\n      const str = mediaObjectToString(mediaQueryConfig[key])\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match) {\n        throw new Error('\u26A0\uFE0F No match')\n      }\n      // react native needs these deprecated apis for now\n      match.addListener(update)\n      dispose.add(() => match.removeListener(update))\n\n      update()\n\n      function update() {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        currentMediaState = { ...mediaState }\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          listeners.forEach((cb) => cb(next))\n        }\n      }\n    }\n  })\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) {\n    return\n  }\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const [state, setState] = useState<MediaQueryState>(initialMediaState || {})\n  const keys = useSafeRef({} as Record<string, boolean>)\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return { ...mediaState }\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const disposes: Function[] = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    updateState()\n    return () => {\n      disposes.forEach((cb) => cb())\n    }\n  })\n\n  return useMemo(\n    () =>\n      new Proxy(state, {\n        get(_, key: string) {\n          if (process.env.NODE_ENV === 'development') {\n            if (!currentMediaState) {\n              throw new Error(\n                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n              )\n            }\n          }\n          if (!keys.current[key]) {\n            keys.current[key] = true\n          }\n          return Reflect.get(state, key)\n        },\n      }),\n    [state, keys]\n  )\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const evaluated = {} as A\n    const lastSetImportanceForKey = {}\n    const propNames = Object.keys(props)\n    const mediaKeysOrdered = Object.keys(getMedia())\n\n    function update(k: string, v: any, importance = 0) {\n      if (lastSetImportanceForKey[k] > importance) {\n        return\n      }\n      lastSetImportanceForKey[k] = importance\n      evaluated[k] = v\n    }\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        const shortKey = key.slice(1)\n        if (!media[shortKey]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subPropNames = Object.keys(val)\n          const mediaImportance = mediaKeysOrdered.indexOf(shortKey)\n          for (let j = subPropNames.length; j--; j >= 0) {\n            const skey = subPropNames[j]\n            update(skey, val[skey], mediaImportance)\n          }\n        }\n      } else {\n        update(key, val)\n      }\n    }\n\n    return evaluated\n  }, [media, props])\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (typeof key === 'string' && key[0] === '$') {\n              throw new Error(`Access of mediaState should never include $`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  listeners[key] = listeners[key] || new Set()\n  listeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\n// for SSR capture it at time of startup\nlet curState: MediaQueryState\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? curState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  curState = { ...mediaState }\n  initState = curState\n  mediaKeysOrdered = Object.keys(media)\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      curState = { ...mediaState }\n      const cur = listeners[key]\n      if (cur?.size) {\n        cur.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const keys = useSafeRef({} as Record<string, boolean>)\n  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return getMediaState({ ...mediaState }, keys)\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    updateState()\n    const disposers = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    return () => {\n      disposers.forEach((cb) => cb())\n    }\n  }, [keys.current])\n\n  return state\n}\n\nfunction getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {\n  return new Proxy(state, {\n    get(_, key: string) {\n      if (!keys.current[key]) {\n        keys.current[key] = true\n      }\n      return Reflect.get(state, key)\n    },\n  })\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        if (!media[key.slice(1)]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaKeyImportance(key)\n  if (importancesUsed[key] > importance) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": ["update"]
 }

package/dist/cjs/hooks/useMedia.test.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=useMedia.test.js.map