@tamagui/adapt 1.115.4 → 1.116.0

package/src/Adapt.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   isAndroid,
   isIos,
@@ -6,116 +5,252 @@ import {
   isWeb,
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
-import type { MediaQueryKey, UseMediaState } from '@tamagui/core'
-import { useMedia } from '@tamagui/core'
+import type { AllPlatforms, MediaQueryKey } from '@tamagui/core'
+import { createStyledContext, useMedia } from '@tamagui/core'
 import { withStaticProperties } from '@tamagui/helpers'
+import { PortalHost, PortalItem } from '@tamagui/portal'
+import React, { createContext, useContext, useEffect, useId } from 'react'
+
+/**
+ * Interfaces
+ */
+
+export type AdaptWhen = MediaQueryKeyString | boolean | null
+export type AdaptPlatform = AllPlatforms | 'touch' | null
+
+type AdaptParentContextI = {
+  Contents: Component
+  scopeName: string
+  platform: AdaptPlatform
+  setPlatform: (when: AdaptPlatform) => any
+  when: AdaptWhen
+  setWhen: (when: AdaptWhen) => any
+  setChildren: (children: any) => any
+  portalName?: string
+}
 
 type MediaQueryKeyString = MediaQueryKey extends string ? MediaQueryKey : never
 
 export type AdaptProps = {
-  when?: MediaQueryKeyString | ((state: { media: UseMediaState }) => boolean)
-  platform?: 'native' | 'web' | 'touch' | 'ios' | 'android'
-  children:
-    | JSX.Element
-    | ((state: { enabled: boolean; media: UseMediaState }) => JSX.Element)
+  scope?: string
+  when?: AdaptWhen
+  platform?: AdaptPlatform
+  children: JSX.Element | ((children: React.ReactNode) => React.ReactNode)
 }
 
-type When = MediaQueryKeyString | boolean | null
-
 type Component = (props: any) => any
-type AdaptParentContextI = {
-  Contents: Component
-  setWhen: (when: When) => any
+
+/**
+ * Contexts
+ */
+
+const CurrentAdaptContextScope = createContext('')
+
+export const AdaptContext = createStyledContext<AdaptParentContextI>({
+  Contents: null as any,
+  scopeName: '',
+  portalName: '',
+  platform: null as any,
+  setPlatform: null as any,
+  when: null as any,
+  setChildren: null as any,
+  setWhen: null as any,
+})
+
+const ProvideAdaptContext = ({
+  children,
+  ...context
+}: AdaptParentContextI & { children: any }) => {
+  const scope = context.scopeName || ''
+
+  return (
+    <CurrentAdaptContextScope.Provider value={scope}>
+      <AdaptContext.Provider scope={scope} {...context}>
+        {children}
+      </AdaptContext.Provider>
+    </CurrentAdaptContextScope.Provider>
+  )
 }
 
-export const AdaptParentContext = React.createContext<AdaptParentContextI | null>(null)
+export const useAdaptContext = (scope = '') => {
+  const contextScope = useContext(CurrentAdaptContextScope)
+  const context = AdaptContext.useStyledContext(
+    scope === '' ? contextScope || scope : scope
+  )
+  return context
+}
 
-// forward props
-export const AdaptContents = (props: any) => {
-  const context = React.useContext(AdaptParentContext)
-  if (!context?.Contents) {
-    throw new Error(
-      process.env.NODE_ENV === 'production'
-        ? `tamagui.dev/docs/intro/errors#warning-002`
-        : `You're rendering a Tamagui <Adapt /> component without nesting it inside a parent that is able to adapt.`
-    )
-  }
-  return React.createElement(context.Contents, props)
+/**
+ * Hooks
+ */
+
+type AdaptParentProps = {
+  children?: React.ReactNode
+  scope: string
+  Contents?: AdaptParentContextI['Contents']
+  portal?:
+    | boolean
+    | {
+        forwardProps?: any
+      }
 }
 
-AdaptContents.shouldForwardSpace = true
+const AdaptPortals = new Map()
 
-export const useAdaptParent = ({
-  Contents,
-}: { Contents: AdaptParentContextI['Contents'] }) => {
-  const [when, setWhen] = React.useState<When>(null)
+export const AdaptParent = ({ children, Contents, scope, portal }: AdaptParentProps) => {
+  const portalName = `AdaptPortal${scope}`
+  const id = useId()
 
-  const AdaptProvider = React.useMemo(() => {
-    const context: AdaptParentContextI = {
-      Contents,
-      setWhen,
-    }
+  let FinalContents = Contents || AdaptPortals.get(id)
 
-    function AdaptProviderView(props: { children?: any }) {
+  if (!FinalContents) {
+    FinalContents = () => {
       return (
-        <AdaptParentContext.Provider value={context}>
-          {props.children}
-        </AdaptParentContext.Provider>
+        <PortalHost
+          name={portalName}
+          forwardProps={typeof portal === 'boolean' ? undefined : portal?.forwardProps}
+        />
       )
     }
+    AdaptPortals.set(id, FinalContents)
+  }
+
+  useEffect(() => {
+    return () => {
+      AdaptPortals.delete(id)
+    }
+  }, [])
 
-    return AdaptProviderView
-  }, [Contents])
+  const [when, setWhen] = React.useState<AdaptWhen>(null)
+  const [platform, setPlatform] = React.useState<AdaptPlatform>(null)
+  const [children2, setChildren] = React.useState(null)
 
-  return {
-    AdaptProvider,
-    when,
-  }
+  return (
+    <ProvideAdaptContext
+      Contents={FinalContents}
+      when={when}
+      platform={platform}
+      setPlatform={setPlatform}
+      setWhen={setWhen}
+      setChildren={setChildren}
+      portalName={portalName}
+      scopeName={scope}
+    >
+      {children}
+    </ProvideAdaptContext>
+  )
 }
 
-export const Adapt = withStaticProperties(
-  function Adapt({ platform, when, children }: AdaptProps) {
-    const context = React.useContext(AdaptParentContext)
-    const media = useMedia()
+/**
+ * Components
+ */
 
-    let enabled = false
+export const AdaptContents = ({ scope, ...rest }: { scope?: string }) => {
+  const context = useAdaptContext(scope)
 
-    if (typeof when === 'function') {
-      enabled = when({ media })
-    } else {
-      enabled = !platform
+  if (!context?.Contents) {
+    throw new Error(
+      process.env.NODE_ENV === 'production'
+        ? `tamagui.dev/docs/intro/errors#warning-002`
+        : `You're rendering a Tamagui <Adapt /> component without nesting it inside a parent that is able to adapt.`
+    )
+  }
+
+  // forwards props - see shouldForwardSpace
+  return React.createElement(context.Contents, { ...rest, key: `stable` })
+}
 
-      if (platform === 'touch') enabled = isTouchable
-      if (platform === 'native') enabled = !isWeb
-      if (platform === 'web') enabled = isWeb
-      if (platform === 'ios') enabled = isIos
-      if (platform === 'android') enabled = isAndroid
+AdaptContents.shouldForwardSpace = true
 
-      if (when && !media[when]) {
-        enabled = false
-      }
-    }
+export const Adapt = withStaticProperties(
+  function Adapt(props: AdaptProps) {
+    const { platform, when, children, scope } = props
+    const context = useAdaptContext(scope)
+    const scopeName = scope ?? context.scopeName
+    const enabled = useAdaptIsActiveGiven(props)
 
     useIsomorphicLayoutEffect(() => {
-      if (!enabled) return
-      context?.setWhen((when || enabled) as When)
+      context?.setWhen((when || enabled) as AdaptWhen)
+      context?.setPlatform(platform || null)
+    }, [when, platform, context, enabled])
 
+    useIsomorphicLayoutEffect(() => {
       return () => {
         context?.setWhen(null)
       }
-    }, [when, context, enabled])
+    }, [])
 
-    if (!enabled) {
-      return null
-    }
+    let output: React.ReactNode
 
     if (typeof children === 'function') {
-      return children({ enabled, media })
+      const Component = context?.Contents
+      output = children(Component ? <Component /> : null)
+    } else {
+      output = children
     }
 
-    return children
+    // TODO this isn't ideal using an effect to set children, will cause double-renders
+    // on every change
+    useEffect(() => {
+      if (typeof children === 'function' && output !== undefined) {
+        context?.setChildren(output)
+      }
+    }, [output])
+
+    return (
+      <CurrentAdaptContextScope.Provider value={scopeName}>
+        {!enabled ? null : output}
+      </CurrentAdaptContextScope.Provider>
+    )
   },
   {
     Contents: AdaptContents,
   }
 )
+
+export const AdaptPortalContents = (props: {
+  children: React.ReactNode
+  scope?: string
+}) => {
+  // const isActive = useAdaptIsActive(props.scope)
+  const { portalName } = useAdaptContext(props.scope)
+
+  // if (!isActive) {
+  //   return null
+  // }
+
+  return (
+    <PortalItem
+      // passthrough={!isWeb && !isActive}
+      hostName={portalName}
+    >
+      {props.children}
+    </PortalItem>
+  )
+}
+
+const useAdaptIsActiveGiven = ({
+  when,
+  platform,
+}: Pick<AdaptProps, 'when' | 'platform'>) => {
+  const media = useMedia()
+
+  let enabled = false
+
+  if (platform === 'touch') enabled = isTouchable
+  if (platform === 'native') enabled = !isWeb
+  if (platform === 'web') enabled = isWeb
+  if (platform === 'ios') enabled = isIos
+  if (platform === 'android') enabled = isAndroid
+
+  if (when && typeof when === 'string' && !media[when]) {
+    enabled = false
+  }
+
+  return enabled
+}
+
+export const useAdaptIsActive = (scope?: string) => {
+  const props = useAdaptContext(scope)
+  return useAdaptIsActiveGiven(props)
+}

package/types/Adapt.d.ts

@@ -1,40 +1,63 @@
+import type { AllPlatforms, MediaQueryKey } from '@tamagui/core';
 import React from 'react';
-import type { MediaQueryKey, UseMediaState } from '@tamagui/core';
+/**
+ * Interfaces
+ */
+export type AdaptWhen = MediaQueryKeyString | boolean | null;
+export type AdaptPlatform = AllPlatforms | 'touch' | null;
+type AdaptParentContextI = {
+    Contents: Component;
+    scopeName: string;
+    platform: AdaptPlatform;
+    setPlatform: (when: AdaptPlatform) => any;
+    when: AdaptWhen;
+    setWhen: (when: AdaptWhen) => any;
+    setChildren: (children: any) => any;
+    portalName?: string;
+};
 type MediaQueryKeyString = MediaQueryKey extends string ? MediaQueryKey : never;
 export type AdaptProps = {
-    when?: MediaQueryKeyString | ((state: {
-        media: UseMediaState;
-    }) => boolean);
-    platform?: 'native' | 'web' | 'touch' | 'ios' | 'android';
-    children: JSX.Element | ((state: {
-        enabled: boolean;
-        media: UseMediaState;
-    }) => JSX.Element);
+    scope?: string;
+    when?: AdaptWhen;
+    platform?: AdaptPlatform;
+    children: JSX.Element | ((children: React.ReactNode) => React.ReactNode);
 };
-type When = MediaQueryKeyString | boolean | null;
 type Component = (props: any) => any;
-type AdaptParentContextI = {
-    Contents: Component;
-    setWhen: (when: When) => any;
+export declare const AdaptContext: import("@tamagui/core").StyledContext<AdaptParentContextI>;
+export declare const useAdaptContext: (scope?: string) => AdaptParentContextI;
+/**
+ * Hooks
+ */
+type AdaptParentProps = {
+    children?: React.ReactNode;
+    scope: string;
+    Contents?: AdaptParentContextI['Contents'];
+    portal?: boolean | {
+        forwardProps?: any;
+    };
 };
-export declare const AdaptParentContext: React.Context<AdaptParentContextI | null>;
+export declare const AdaptParent: ({ children, Contents, scope, portal }: AdaptParentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Components
+ */
 export declare const AdaptContents: {
-    (props: any): React.FunctionComponentElement<any>;
+    ({ scope, ...rest }: {
+        scope?: string;
+    }): React.FunctionComponentElement<any>;
     shouldForwardSpace: boolean;
 };
-export declare const useAdaptParent: ({ Contents, }: {
-    Contents: AdaptParentContextI["Contents"];
-}) => {
-    AdaptProvider: (props: {
-        children?: any;
-    }) => import("react/jsx-runtime").JSX.Element;
-    when: When;
-};
-export declare const Adapt: (({ platform, when, children }: AdaptProps) => JSX.Element | null) & {
+export declare const Adapt: ((props: AdaptProps) => import("react/jsx-runtime").JSX.Element) & {
     Contents: {
-        (props: any): React.FunctionComponentElement<any>;
+        ({ scope, ...rest }: {
+            scope?: string;
+        }): React.FunctionComponentElement<any>;
         shouldForwardSpace: boolean;
     };
 };
+export declare const AdaptPortalContents: (props: {
+    children: React.ReactNode;
+    scope?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useAdaptIsActive: (scope?: string) => boolean;
 export {};
 //# sourceMappingURL=Adapt.d.ts.map

package/types/Adapt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Adapt.d.ts","sourceRoot":"","sources":["../src/Adapt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIjE,KAAK,mBAAmB,GAAG,aAAa,SAAS,MAAM,GAAG,aAAa,GAAG,KAAK,CAAA;AAE/E,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,mBAAmB,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,aAAa,CAAA;KAAE,KAAK,OAAO,CAAC,CAAA;IAC3E,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IACzD,QAAQ,EACJ,GAAG,CAAC,OAAO,GACX,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,aAAa,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAA;CACzE,CAAA;AAED,KAAK,IAAI,GAAG,mBAAmB,GAAG,OAAO,GAAG,IAAI,CAAA;AAEhD,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;AACpC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,GAAG,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,kBAAkB,2CAAwD,CAAA;AAGvF,eAAO,MAAM,aAAa;YAAW,GAAG;;CAUvC,CAAA;AAID,eAAO,MAAM,cAAc,kBAExB;IAAE,QAAQ,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;CAAE;2BASV;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAevD,CAAA;AAED,eAAO,MAAM,KAAK,kCAC6B,UAAU;;gBA3CpB,GAAG;;;CAuFvC,CAAA"}
+{"version":3,"file":"Adapt.d.ts","sourceRoot":"","sources":["../src/Adapt.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIhE,OAAO,KAAsD,MAAM,OAAO,CAAA;AAE1E;;GAEG;AAEH,MAAM,MAAM,SAAS,GAAG,mBAAmB,GAAG,OAAO,GAAG,IAAI,CAAA;AAC5D,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,OAAO,GAAG,IAAI,CAAA;AAEzD,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,aAAa,CAAA;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,GAAG,CAAA;IACzC,IAAI,EAAE,SAAS,CAAA;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,GAAG,CAAA;IACjC,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAA;IACnC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,mBAAmB,GAAG,aAAa,SAAS,MAAM,GAAG,aAAa,GAAG,KAAK,CAAA;AAE/E,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACzE,CAAA;AAED,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;AAQpC,eAAO,MAAM,YAAY,4DASvB,CAAA;AAiBF,eAAO,MAAM,eAAe,yCAM3B,CAAA;AAED;;GAEG;AAEH,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,MAAM,CAAC,EACH,OAAO,GACP;QACE,YAAY,CAAC,EAAE,GAAG,CAAA;KACnB,CAAA;CACN,CAAA;AAID,eAAO,MAAM,WAAW,0CAA2C,gBAAgB,4CA0ClF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,aAAa;yBAAwB;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;;CAanE,CAAA;AAID,eAAO,MAAM,KAAK,WACM,UAAU;;6BAlBgB;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE;;;CA6DnE,CAAA;AAED,eAAO,MAAM,mBAAmB,UAAW;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,4CAgBA,CAAA;AAuBD,eAAO,MAAM,gBAAgB,WAAY,MAAM,YAG9C,CAAA"}