@tamagui/core 1.88.12 → 1.89.0-1706308641099

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/createOptimizedView.mjs

@@ -0,0 +1,2 @@
+function createOptimizedView(children, viewProps, baseViews) {}
+export { createOptimizedView };

package/dist/esm/getBaseViews.mjs

@@ -0,0 +1,4 @@
+function getBaseViews() {
+  return null;
+}
+export { getBaseViews };

package/dist/esm/helpers/getBoundingClientRect.mjs

@@ -0,0 +1,4 @@
+const getBoundingClientRect = node => {
+  if (!(!node || node.nodeType !== 1)) return node.getBoundingClientRect?.();
+};
+export { getBoundingClientRect };

package/dist/esm/helpers/getRect.mjs

@@ -0,0 +1,20 @@
+import { getBoundingClientRect } from "./getBoundingClientRect.mjs";
+const getRect = node => {
+  const rect = getBoundingClientRect(node);
+  if (!rect) return;
+  const {
+    x,
+    y,
+    top,
+    left
+  } = rect;
+  return {
+    x,
+    y,
+    width: node.offsetWidth,
+    height: node.offsetHeight,
+    top,
+    left
+  };
+};
+export { getRect };

package/dist/esm/hooks/useElementLayout.mjs

@@ -0,0 +1,87 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { getBoundingClientRect } from "../helpers/getBoundingClientRect.mjs";
+const LayoutHandlers = /* @__PURE__ */new WeakMap();
+let resizeObserver = null;
+typeof window < "u" && "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 cache = /* @__PURE__ */new WeakMap(),
+  measureLayout = (node, relativeTo, callback) => {
+    const relativeNode = relativeTo || node?.parentNode;
+    if (relativeNode instanceof HTMLElement) {
+      const now = Date.now();
+      cache.set(node, now), Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]).then(([nodeDim, relativeNodeDim]) => {
+        if (relativeNodeDim && nodeDim && cache.get(node) === now) {
+          const {
+            x,
+            y,
+            width,
+            height,
+            left,
+            top
+          } = getRelativeDimensions(nodeDim, relativeNodeDim);
+          callback(x, y, width, height, left, top);
+        }
+      });
+    }
+  },
+  getRelativeDimensions = (a, b) => {
+    const {
+        height,
+        left,
+        top,
+        width
+      } = a,
+      x = left - b.left,
+      y = top - b.top;
+    return {
+      x,
+      y,
+      width,
+      height,
+      left,
+      top
+    };
+  },
+  getBoundingClientRectAsync = element => new Promise(resolve => {
+    function fallbackToSync() {
+      resolve(getBoundingClientRect(element));
+    }
+    const tm = setTimeout(fallbackToSync, 10);
+    new IntersectionObserver((entries, ob) => {
+      clearTimeout(tm), ob.disconnect(), resolve(entries[0]?.boundingClientRect);
+    }, {
+      threshold: 1e-4
+    }).observe(element);
+  });
+function useElementLayout(ref, onLayout) {
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver || !onLayout) return;
+    const node = ref.current;
+    if (node) return LayoutHandlers.set(node, onLayout), resizeObserver.observe(node), () => {
+      resizeObserver?.unobserve(node);
+    };
+  }, [ref, onLayout]);
+}
+export { measureLayout, useElementLayout };

package/dist/esm/hooks/usePlatformMethods.mjs

@@ -0,0 +1,20 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { getRect } from "../helpers/getRect.mjs";
+import { measureLayout } from "./useElementLayout.mjs";
+function usePlatformMethods(hostRef) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current;
+    node && (node.measure ||= callback => measureLayout(node, null, callback), node.measureLayout ||= (relativeToNode, success) => measureLayout(node, relativeToNode, success), node.measureInWindow ||= callback => {
+      node && setTimeout(() => {
+        const {
+          height,
+          left,
+          top,
+          width
+        } = getRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    });
+  }, [hostRef]);
+}
+export { usePlatformMethods };

package/dist/esm/index.mjs

@@ -0,0 +1,90 @@
+import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
+import { Stack as WebStack, Text as WebText, View as WebView, setupHooks } from "@tamagui/web";
+import "react";
+import "./createOptimizedView.mjs";
+import { getBaseViews } from "./getBaseViews.mjs";
+import { useElementLayout } from "./hooks/useElementLayout.mjs";
+import { usePlatformMethods } from "./hooks/usePlatformMethods.mjs";
+import "./vendor/Pressability.mjs";
+export * from "@tamagui/web";
+export * from "./reactNativeTypes.mjs";
+const baseViews = getBaseViews();
+setupHooks({
+  getBaseViews,
+  usePropsTransform(elementType, propsIn, stateRef, willHydrate) {
+    {
+      const isDOM = typeof elementType == "string",
+        {
+          // event props
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture,
+          // android
+          collapsable,
+          focusable,
+          // deprecated,
+          accessible,
+          accessibilityDisabled,
+          onLayout,
+          hrefAttrs,
+          ...plainDOMProps
+        } = propsIn;
+      if (willHydrate || isDOM) {
+        const hostRef = {
+          get current() {
+            return stateRef.current.host;
+          }
+        };
+        usePlatformMethods(hostRef), useElementLayout(hostRef, isDOM ? onLayout : void 0), useResponderEvents(hostRef, isDOM ? {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        } : void 0);
+      }
+      if (isDOM) {
+        if (plainDOMProps.href && hrefAttrs) {
+          const {
+            download,
+            rel,
+            target
+          } = hrefAttrs;
+          download != null && (plainDOMProps.download = download), rel && (plainDOMProps.rel = rel), typeof target == "string" && (plainDOMProps.target = target.charAt(0) !== "_" ? `_${target}` : target);
+        }
+        return plainDOMProps;
+      }
+    }
+  },
+  useEvents(viewProps, events, {
+    pseudos
+  }, setStateShallow, staticConfig) {}
+});
+const View = WebView,
+  Stack = WebStack,
+  Text = WebText;
+export { Stack, Text, View };

package/dist/esm/inject-styles.mjs

@@ -0,0 +1,13 @@
+const stylesheets = {},
+  injectStyles = ({
+    filePath,
+    css
+  }) => {
+    let stylesheet = stylesheets[filePath];
+    if (!stylesheet) {
+      const styleEl = document.createElement("style");
+      styleEl.setAttribute("data-file", filePath), styleEl.setAttribute("type", "text/css"), stylesheet = stylesheets[filePath] = styleEl, document.head.appendChild(styleEl);
+    }
+    stylesheet.innerHTML = css;
+  };
+export { injectStyles };

package/dist/esm/vendor/Pressability.mjs

@@ -0,0 +1,3 @@
+const Pressability = {},
+  usePressability = e => ({});
+export { Pressability, usePressability };

package/dist/native.js

@@ -4077,7 +4077,7 @@ var require_getSplitStyles_native = __commonJS({
           continue;
         let shouldPassProp = !isStyleProp || // is in parent variants
         isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = (_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
+        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), console.groupCollapsed(
           `  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`
         ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
           variants,
@@ -4862,7 +4862,11 @@ var require_createComponent_native = __commonJS({
           let exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
           state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
         }
-        let shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+        let shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
+        // disableClassName="until-hydrated" to be more straightforward
+        // see issue if not, Button sets disableClassName to true <Button animation="" /> with
+        // the react-native driver errors because it tries to animate var(--color) to rbga(..)
+        propsIn.disableClassName && isHydrated), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
         if (groupName && !curState.group) {
           let listeners = /* @__PURE__ */ new Set();
           curState.group = {
@@ -4910,7 +4914,9 @@ var require_createComponent_native = __commonJS({
           if (console.info(
             `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
             "background: green; color: white;"
-          ), !import_constants.isServer) {
+          ), import_constants.isServer)
+            (0, import_log.log)({ noClassNames, isAnimated, shouldAvoidClasses, isWeb: import_constants.isWeb, supportsCSSVars });
+          else {
             console.groupEnd();
             let stateLog = `${`${state.press || state.pressIn ? " PRESS " : ""}`}${state.hover ? " HOVER " : ""}${state.focus ? " FOCUS" : " "}`, ch = propsIn.children, childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
             childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog}${stateLog}Props:`), (0, import_log.log)("props in:", propsIn), (0, import_log.log)("final props:", props), (0, import_log.log)({ state, staticConfig, elementType, themeStateProps }), (0, import_log.log)({ contextProps: styledContextProps, overriddenContextProps }), (0, import_log.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd();