@tamagui/core 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/index.cjs

@@ -104,7 +104,6 @@ __export(exports, {
   themeable: () => themeable,
   useConstant: () => useConstant,
   useDefaultThemeName: () => useDefaultThemeName,
-  useForceUpdate: () => useForceUpdate,
   useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
   useMedia: () => useMedia,
   useTheme: () => useTheme,
@@ -113,7 +112,8 @@ __export(exports, {
 
 // src/createComponent.tsx
 var import_helpers4 = __toModule(require("@tamagui/helpers"));
-var import_react12 = __toModule(require("react"));
+var import_use_force_update2 = __toModule(require("@tamagui/use-force-update"));
+var import_react11 = __toModule(require("react"));
 var import_react_native3 = __toModule(require("react-native"));
 
 // src/constants/platform.ts
@@ -364,7 +364,8 @@ function createTamaguiProvider(themeProps) {
 __name(createTamaguiProvider, "createTamaguiProvider");
 
 // src/hooks/useMedia.tsx
-var import_react9 = __toModule(require("react"));
+var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
+var import_react8 = __toModule(require("react"));
 
 // src/helpers/matchMedia.ts
 var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
@@ -377,30 +378,6 @@ var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PUR
   };
 }, "matchMediaFallback");
 
-// src/hooks/useForceUpdate.tsx
-var import_react8 = __toModule(require("react"));
-function useForceUpdate() {
-  const setState = (0, import_react8.useState)(0)[1];
-  const internal = (0, import_react8.useRef)();
-  if (!internal.current) {
-    internal.current = {
-      isMounted: true,
-      update: () => {
-        if (internal.current.isMounted) {
-          setState(Math.random());
-        }
-      }
-    };
-  }
-  (0, import_react8.useEffect)(() => {
-    return () => {
-      internal.current.isMounted = false;
-    };
-  }, []);
-  return internal.current.update;
-}
-__name(useForceUpdate, "useForceUpdate");
-
 // src/hooks/useMedia.tsx
 var mediaState = {};
 var mediaQueryListeners = {};
@@ -477,8 +454,8 @@ var configureMedia = /* @__PURE__ */ __name(({
   }
 }, "configureMedia");
 var useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = (0, import_react9.useRef)();
+  const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+  const state = (0, import_react8.useRef)();
   if (!state.current) {
     state.current = {
       selections: {},
@@ -700,7 +677,7 @@ var parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 
 // src/helpers/addStylesUsingClassname.tsx
-var import_react10 = __toModule(require("react"));
+var import_react9 = __toModule(require("react"));
 
 // src/helpers/getStylesAtomic.ts
 var import_helpers2 = __toModule(require("@tamagui/helpers"));
@@ -817,7 +794,7 @@ __name(insertStyleRule, "insertStyleRule");
 // src/helpers/addStylesUsingClassname.tsx
 var added = new Set();
 function useStylesAsClassname(styles) {
-  if (!import_react10.useInsertionEffect) {
+  if (!import_react9.useInsertionEffect) {
     return addStylesUsingClassname(styles);
   } else {
     const insertions = [];
@@ -826,7 +803,7 @@ function useStylesAsClassname(styles) {
         insertions.push(rule);
       }
     });
-    (0, import_react10.useInsertionEffect)(() => {
+    (0, import_react9.useInsertionEffect)(() => {
       for (const ruleset of insertions) {
         insertStyleRule(ruleset);
       }
@@ -1225,7 +1202,7 @@ var mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
 }, "mergeTransform");
 
 // src/hooks/useFeatures.tsx
-var import_react11 = __toModule(require("react"));
+var import_react10 = __toModule(require("react"));
 var createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
   isEnabled: (props) => propNames.some((name) => !!props[name]),
   Component
@@ -1283,7 +1260,7 @@ var useFeatures = /* @__PURE__ */ __name((props, utils) => {
     const name = featureNames[i];
     const { isEnabled, Component } = featureDefinitions[name];
     if (isEnabled(props) && Component) {
-      features.push(/* @__PURE__ */ import_react11.default.createElement(Component, __spreadProps(__spreadValues({
+      features.push(/* @__PURE__ */ import_react10.default.createElement(Component, __spreadProps(__spreadValues({
         key: name
       }, props), {
         _utils: utils
@@ -1325,7 +1302,7 @@ function createComponent(configIn) {
   let defaultsStyle;
   let defaultsClassName = "";
   let initialTheme;
-  const component = (0, import_react12.forwardRef)((props, forwardedRef) => {
+  const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
     var _a4;
     const {
       tag,
@@ -1362,10 +1339,10 @@ function createComponent(configIn) {
       onClick,
       onLayout
     } = props;
-    const forceUpdate = useForceUpdate();
+    const forceUpdate = (0, import_use_force_update2.useForceUpdate)();
     const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react12.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react12.useState)(() => ({
+    const manager = (0, import_react11.useContext)(ThemeManagerContext);
+    const [state, set_] = (0, import_react11.useState)(() => ({
       hover: false,
       press: false,
       pressIn: false,
@@ -1380,14 +1357,14 @@ function createComponent(configIn) {
       return prev;
     }), "set");
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      import_react12.Children.toArray(props.children).forEach((item) => {
+      import_react11.Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
           console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
         }
       });
     }
-    const hasTextAncestor = isWeb ? (0, import_react12.useContext)(TextAncestorContext) : false;
-    const hostRef = (0, import_react12.useRef)(null);
+    const hasTextAncestor = isWeb ? (0, import_react11.useContext)(TextAncestorContext) : false;
+    const hostRef = (0, import_react11.useRef)(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -1408,15 +1385,15 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = (0, import_react12.useRef)(false);
+    const isTracking = (0, import_react11.useRef)(false);
     const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
-    const internal = (0, import_react12.useRef)();
+    const internal = (0, import_react11.useRef)();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
-    (0, import_react12.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       internal.current.isMounted = true;
       const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
         if (isTracking.current) {
@@ -1489,7 +1466,7 @@ function createComponent(configIn) {
     if (shouldAttach) {
       internal.current.hasEverHadEvents = true;
     }
-    const unPress = (0, import_react12.useCallback)(() => {
+    const unPress = (0, import_react11.useCallback)(() => {
       if (!internal.current.isMounted)
         return;
       set({
@@ -1575,13 +1552,13 @@ function createComponent(configIn) {
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
       viewProps.className = className;
-      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     } else {
-      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     }
     const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
-      content = (0, import_react12.createElement)(TextAncestorContext.Provider, { value: true }, content);
+      content = (0, import_react11.createElement)(TextAncestorContext.Provider, { value: true }, content);
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
@@ -1595,7 +1572,7 @@ function createComponent(configIn) {
         }
       }
     }
-    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, features, content);
+    return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, features, content);
   });
   onConfiguredOnce((conf3) => {
     var _a4;
@@ -1669,7 +1646,7 @@ function spacedChildren({
   if (!space && !isZStack) {
     return children;
   }
-  const childrenList = import_react12.Children.toArray(children);
+  const childrenList = import_react11.Children.toArray(children);
   const len = childrenList.length;
   if (len === 1) {
     return children;
@@ -1680,15 +1657,15 @@ function spacedChildren({
       continue;
     }
     const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
-    next.push(/* @__PURE__ */ import_react12.default.createElement(import_react12.Fragment, {
+    next.push(/* @__PURE__ */ import_react11.default.createElement(import_react11.Fragment, {
       key
-    }, isZStack ? /* @__PURE__ */ import_react12.default.createElement(Absolute, null, child) : child));
+    }, isZStack ? /* @__PURE__ */ import_react11.default.createElement(Absolute, null, child) : child));
     if ((_a4 = child == null ? void 0 : child["type"]) == null ? void 0 : _a4["isVisuallyHidden"]) {
       continue;
     }
     if (index !== len - 1) {
       if (space) {
-        next.push(/* @__PURE__ */ import_react12.default.createElement(Spacer, {
+        next.push(/* @__PURE__ */ import_react11.default.createElement(Spacer, {
           key: `${key}_spacer`,
           direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
           size: space
@@ -1699,7 +1676,7 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react12.default.createElement(import_react_native3.View, {
+var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react11.default.createElement(import_react_native3.View, {
   style: sheet.fullscreen
 }, children), "Absolute");
 var sheet = import_react_native3.StyleSheet.create({
@@ -1792,13 +1769,14 @@ function styled(Component, options, staticExtractionOptions) {
 __name(styled, "styled");
 
 // src/helpers/themeable.tsx
-var import_react15 = __toModule(require("react"));
+var import_react14 = __toModule(require("react"));
 
 // src/views/ThemeInverse.tsx
-var import_react14 = __toModule(require("react"));
+var import_react13 = __toModule(require("react"));
 
 // src/hooks/useTheme.tsx
-var import_react13 = __toModule(require("react"));
+var import_use_force_update3 = __toModule(require("@tamagui/use-force-update"));
+var import_react12 = __toModule(require("react"));
 var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   if (a.size !== b.size)
     return false;
@@ -1810,9 +1788,9 @@ var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   return true;
 }, "areEqualSets");
 var useThemeName = /* @__PURE__ */ __name(() => {
-  const parent = (0, import_react13.useContext)(ThemeManagerContext);
-  const [name, setName] = (0, import_react13.useState)(parent.name);
-  (0, import_react13.useEffect)(() => {
+  const parent = (0, import_react12.useContext)(ThemeManagerContext);
+  const [name, setName] = (0, import_react12.useState)(parent.name);
+  (0, import_react12.useEffect)(() => {
     return parent.onChangeTheme((next) => {
       setName((prev) => {
         if (prev === next)
@@ -1824,13 +1802,13 @@ var useThemeName = /* @__PURE__ */ __name(() => {
   return name || "light";
 }, "useThemeName");
 var useDefaultThemeName = /* @__PURE__ */ __name(() => {
-  return (0, import_react13.useContext)(ThemeContext)[GET_DEFAULT_THEME];
+  return (0, import_react12.useContext)(ThemeContext)[GET_DEFAULT_THEME];
 }, "useDefaultThemeName");
 var useTheme = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const manager = (0, import_react13.useContext)(ThemeManagerContext);
-  const themes = (0, import_react13.useContext)(ThemeContext);
-  const state = (0, import_react13.useRef)();
+  const forceUpdate = (0, import_use_force_update3.useForceUpdate)();
+  const manager = (0, import_react12.useContext)(ThemeManagerContext);
+  const themes = (0, import_react12.useContext)(ThemeContext);
+  const state = (0, import_react12.useRef)();
   if (!state.current) {
     state.current = {
       uuid: {},
@@ -1847,11 +1825,11 @@ var useTheme = /* @__PURE__ */ __name(() => {
       manager.track(st.uuid, st.keys);
     }
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return manager.onUpdate(state.current.uuid, forceUpdate);
   }, []);
   const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     return new Proxy(theme, {
       get(_, key) {
         const name = manager.name;
@@ -1892,21 +1870,21 @@ var ThemeInverse = /* @__PURE__ */ __name((props) => {
   const defaultTheme = useDefaultThemeName();
   const name = inversions[themeName] || inversions[defaultTheme] || null;
   console.log("todo fixme invert", { themeName, defaultTheme, next: name });
-  return /* @__PURE__ */ import_react14.default.createElement(Theme, {
+  return /* @__PURE__ */ import_react13.default.createElement(Theme, {
     name
   }, props.children);
 }, "ThemeInverse");
 
 // src/helpers/themeable.tsx
 var themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = (0, import_react15.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
+  const withThemeComponent = (0, import_react14.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
     var _b2 = _a4, { themeInverse } = _b2, rest = __objRest(_b2, ["themeInverse"]);
-    const el = import_react15.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
+    const el = import_react14.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
     if (themeInverse) {
-      return /* @__PURE__ */ import_react15.default.createElement(ThemeInverse, null, el);
+      return /* @__PURE__ */ import_react14.default.createElement(ThemeInverse, null, el);
     }
     if (rest.theme) {
-      return /* @__PURE__ */ import_react15.default.createElement(Theme, {
+      return /* @__PURE__ */ import_react14.default.createElement(Theme, {
         name: rest.theme || null
       }, el);
     }
@@ -1918,7 +1896,7 @@ var themeable = /* @__PURE__ */ __name(function graphql(component) {
 }, "graphql");
 
 // src/views/Animated.tsx
-var import_react16 = __toModule(require("react"));
+var import_react15 = __toModule(require("react"));
 var import_react_native4 = __toModule(require("react-native"));
 
 // src/views/Stack.tsx
@@ -1961,7 +1939,7 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
   const driver = useConstant(() => {
     return new import_react_native4.Animated.Value(0);
   });
-  const animatedProps = (0, import_react16.useMemo)(() => {
+  const animatedProps = (0, import_react15.useMemo)(() => {
     if (!animated) {
       return null;
     }
@@ -1994,8 +1972,8 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
       toValue: animateState === "in" ? 1 : 0
     }).start();
   }, [animated, animateState]);
-  const childrenMemo = (0, import_react16.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ import_react16.default.createElement(Stack, __spreadValues(__spreadValues({
+  const childrenMemo = (0, import_react15.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ import_react15.default.createElement(Stack, __spreadValues(__spreadValues({
     animated
   }, props), animatedProps), childrenMemo);
 }, "AnimatedStack");
@@ -2101,7 +2079,7 @@ var Text2 = createComponent({
 });
 
 // src/views/SafeAreaProvider.tsx
-var import_react17 = __toModule(require("react"));
+var import_react16 = __toModule(require("react"));
 var import_react_native5 = __toModule(require("react-native"));
 var import_react_native_safe_area_context = __toModule(require("react-native-safe-area-context"));
 var defaultMetrics = null;
@@ -2118,7 +2096,7 @@ var SafeAreaProvider = /* @__PURE__ */ __name(({
       default: import_react_native_safe_area_context.initialWindowMetrics
     });
   }
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
     initialMetrics: initialWindowMetrics ?? defaultMetrics
   }, children);
 }, "SafeAreaProvider");