one/dist/esm/ui/Tabs.mjs

One is a new React Framework that makes Vite serve both native and web.

import { LinkingContext, useNavigationBuilder } from "@react-navigation/native";
import { Children, Fragment, isValidElement, use, useMemo } from "react";
import { StyleSheet, View } from "react-native-web";
import { TabTriggerMapContext } from "./TabContext.mjs";
import { isTabList } from "./TabList.mjs";
import { ExpoTabRouter } from "./TabRouter.mjs";
import { isTabSlot } from "./TabSlot.mjs";
import { isTabTrigger } from "./TabTrigger.mjs";
import { ViewSlot, triggersToScreens } from "./common.mjs";
import { useComponent } from "./useComponent.mjs";
import { useRouteNode, useContextKey } from "../router/Route.mjs";
import { useRouteInfo } from "../hooks.mjs";
import { resolveHref } from "../link/href.mjs";
import { shouldLinkExternally } from "../utils/url.mjs";
import { NavigatorContext } from "../views/Navigator.mjs";
export * from "./TabContext.mjs";
export * from "./TabList.mjs";
export * from "./TabSlot.mjs";
export * from "./TabTrigger.mjs";
import { jsx } from "react/jsx-runtime";
function Tabs(props) {
  const {
      children,
      asChild,
      options,
      ...rest
    } = props,
    Comp = asChild ? ViewSlot : View,
    {
      NavigationContent
    } = useTabsWithChildren({
      // asChild adds an extra layer, so we need to process the child's children
      children: asChild && isValidElement(children) && children.props && typeof children.props == "object" && "children" in children.props ? children.props.children : children,
      ...options
    });
  return /* @__PURE__ */jsx(Comp, {
    style: styles.tabsRoot,
    ...rest,
    children: /* @__PURE__ */jsx(NavigationContent, {
      children
    })
  });
}
function useTabsWithChildren(options) {
  const {
    children,
    ...rest
  } = options;
  return useTabsWithTriggers({
    triggers: parseTriggersFromChildren(children),
    ...rest
  });
}
function useTabsWithTriggers(options) {
  const {
      triggers,
      ...rest
    } = options,
    parentTriggerMap = use(TabTriggerMapContext),
    routeNode = useRouteNode(),
    contextKey = useContextKey(),
    linking = use(LinkingContext).options,
    routeInfo = useRouteInfo();
  if (!routeNode || !linking) throw new Error("No RouteNode. This is likely a bug in one router.");
  const initialRouteName = routeNode.initialRouteName,
    {
      children,
      triggerMap
    } = triggersToScreens(triggers, routeNode, linking, initialRouteName, parentTriggerMap, routeInfo, contextKey),
    navigatorContext = useNavigationBuilder(ExpoTabRouter, {
      children,
      ...rest,
      triggerMap,
      id: contextKey,
      initialRouteName
    }),
    {
      state,
      descriptors,
      navigation,
      describe,
      NavigationContent: RNNavigationContent
    } = navigatorContext,
    navigatorContextValue = useMemo(() => ({
      ...navigatorContext,
      contextKey,
      router: ExpoTabRouter
    }), [navigatorContext, contextKey, ExpoTabRouter]),
    NavigationContent = useComponent(children2 => /* @__PURE__ */jsx(TabTriggerMapContext.Provider, {
      value: triggerMap,
      children: /* @__PURE__ */jsx(NavigatorContext.Provider, {
        value: navigatorContextValue,
        children: /* @__PURE__ */jsx(RNNavigationContent, {
          children: children2
        })
      })
    }));
  return {
    state,
    descriptors,
    navigation,
    NavigationContent,
    describe
  };
}
function parseTriggersFromChildren(children, screenTriggers = [], isInTabList = !1) {
  return Children.forEach(children, child => {
    if (!child || !isValidElement(child) || isTabSlot(child)) return;
    if (isFragment(child) && typeof child.props.children != "function") return parseTriggersFromChildren(child.props.children, screenTriggers, isInTabList || isTabList(child));
    if (isTabList(child) && typeof child.props.children != "function") {
      let children2 = child.props.children;
      return child.props.asChild && isValidElement(children2) && children2.props && typeof children2.props == "object" && "children" in children2.props && (children2 = children2.props.children), parseTriggersFromChildren(children2, screenTriggers, isInTabList || isTabList(child));
    }
    if (!isInTabList || !isTabTrigger(child)) return;
    const {
      href,
      name
    } = child.props;
    if (!href) {
      process.env.NODE_ENV === "development" && console.warn(`<TabTrigger name={${name}}> does not have a 'href' prop. TabTriggers within a <TabList /> are required to have an href.`);
      return;
    }
    const resolvedHref = resolveHref(href);
    if (shouldLinkExternally(resolvedHref)) return screenTriggers.push({
      type: "external",
      name,
      href: resolvedHref
    });
    if (!name) {
      process.env.NODE_ENV === "development" && console.warn("<TabTrigger> does not have a 'name' prop. TabTriggers within a <TabList /> are required to have a name.");
      return;
    }
    return screenTriggers.push({
      type: "internal",
      href: resolvedHref,
      name
    });
  }), screenTriggers;
}
function isFragment(child) {
  return child.type === Fragment;
}
const styles = StyleSheet.create({
  tabsRoot: {
    flex: 1
  }
});
export { Tabs, useTabsWithChildren, useTabsWithTriggers };
//# sourceMappingURL=Tabs.mjs.map