@multiplatform.one/components 7.79.0 → 7.81.0

package/dist/cjs/appShell/AppShell.cjs

@@ -0,0 +1,438 @@
+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 AppShell_exports = {};
+__export(AppShell_exports, {
+  AppShell: () => AppShell,
+  appShellRoute: () => appShellRoute
+});
+module.exports = __toCommonJS(AppShell_exports);
+var import_forms = require("@multiplatform.one/forms");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_DropdownMenu = require("../DropdownMenu/index.cjs");
+var import_page = require("../layouts/page.cjs");
+var import_screenScroll = require("../layouts/screenScroll.cjs");
+var import_shellSidebarSlot = require("../layouts/shellSidebarSlot.cjs");
+var import_bottomAccessory = require("../layouts/bottomAccessory.cjs");
+var import_sidebar = require("../layouts/sidebar.cjs");
+var import_i18n = require("../shared/i18n.cjs");
+var import_TabHost = require("./TabHost.cjs");
+var import_bottomChrome = require("./bottomChrome.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function underKey(path, key) {
+  if (key === "/") return path === "/";
+  return path === key || path.startsWith(`${key}/`);
+}
+function appShellRoute(destinations, path) {
+  const normal = path.length > 1 ? path.replace(/\/+$/, "") : path;
+  let destination;
+  for (const candidate of destinations) {
+    if (candidate.onPress || !underKey(normal, candidate.key)) continue;
+    if (!destination || candidate.key.length > destination.key.length) destination = candidate;
+  }
+  return {
+    destination,
+    pushed: Boolean(destination && normal !== destination.key)
+  };
+}
+function useDocumentScrolled(enabled) {
+  const [scrolled, setScrolled] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled || typeof document === "undefined") return;
+    const sync = () => setScrolled(window.scrollY > 1);
+    sync();
+    window.addEventListener("scroll", sync, {
+      passive: true
+    });
+    return () => window.removeEventListener("scroll", sync);
+  }, [enabled]);
+  return scrolled;
+}
+const sticky = edge => import_platform.isWeb ? {
+  position: "sticky",
+  [edge]: 0,
+  zIndex: import_forms.zIndex.stickyHeader
+} : null;
+function HomeControl({
+  title,
+  onPress,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    role: "link",
+    "aria-label": title,
+    alignItems: "center",
+    minHeight: import_theme.MIN_PRESS_TARGET,
+    flexShrink: 1,
+    minWidth: 0,
+    gap: "$2",
+    cursor: "pointer",
+    onPress,
+    "data-testid": "app-shell-home",
+    children
+  });
+}
+function AppShellNavBar({
+  maxWidth,
+  leading,
+  trailing,
+  title,
+  showTitle,
+  scrolled
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "ScreenToolbar"
+  });
+  const [sides, setSides] = (0, import_react2.useState)({
+    leading: 0,
+    trailing: 0
+  });
+  const measure = side => event => {
+    const width = Math.ceil(event.nativeEvent.layout.width);
+    setSides(prev => prev[side] === width ? prev : {
+      ...prev,
+      [side]: width
+    });
+  };
+  const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  const clearance = Math.max(sides.leading, sides.trailing);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
+    bar: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      role: "banner",
+      "data-testid": "app-shell-bar",
+      "data-scroll-edge": scrolled ? "" : void 0,
+      backgroundColor: "$background",
+      flexShrink: 0,
+      ...import_theme.hairline.bottom,
+      borderColor: scrolled ? import_componentColors.componentColors.divider : "transparent",
+      ...motion,
+      ...sticky("top"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        position: "relative",
+        width: "100%",
+        ...(maxWidth ? {
+          maxWidth,
+          alignSelf: "center"
+        } : null),
+        minHeight: import_theme.MIN_PRESS_TARGET,
+        alignItems: "center",
+        flexWrap: "nowrap",
+        paddingHorizontal: knobProps.panelPadding.padding,
+        ...knobProps.gap,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          alignItems: "center",
+          flexShrink: 1e3,
+          minWidth: 0,
+          ...knobProps.gap,
+          onLayout: measure("leading"),
+          children: leading
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          flexGrow: 1
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          alignItems: "center",
+          flexShrink: 1,
+          minWidth: 0,
+          justifyContent: "flex-end",
+          ...knobProps.gap,
+          onLayout: measure("trailing"),
+          children: trailing
+        }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: clearance,
+          right: clearance,
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+          "aria-hidden": !showTitle,
+          "data-testid": "app-shell-bar-title",
+          opacity: showTitle ? 1 : 0,
+          ...motion,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.body,
+            fontWeight: "600",
+            color: "$color12",
+            numberOfLines: 1,
+            children: title
+          })
+        }) : null]
+      })
+    })
+  });
+}
+function StackedPanel({
+  panel
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    "data-testid": "app-shell-page-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      ...knobProps.body,
+      size: "$2",
+      textTransform: "uppercase",
+      color: knobProps.textAccentColor,
+      numberOfLines: 1,
+      children: panel.title
+    }), panel.content]
+  });
+}
+function AppShell({
+  destinations,
+  path,
+  onNavigate,
+  title,
+  logo,
+  onTitlePress,
+  actions,
+  onBack,
+  accessory,
+  ownChrome = [],
+  children,
+  testID = "app-shell"
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const compact = (0, import_theme.useLayoutSizeClass)() === "compact";
+  const {
+    report,
+    reporter
+  } = (0, import_screenScroll.useShellScrollReports)();
+  const sidebarSlot = (0, import_shellSidebarSlot.useShellSidebarSlotState)();
+  const documentScrolled = useDocumentScrolled(import_platform.isWeb);
+  const chromeInset = (0, import_bottomChrome.useBottomChromeInset)();
+  const floatingBar = (0, import_bottomChrome.useFloatingBarMounted)();
+  const {
+    destination,
+    pushed
+  } = appShellRoute(destinations, path);
+  const ownsChrome = ownChrome.some(prefix => underKey(path, prefix));
+  const go = item => item.onPress ? item.onPress() : onNavigate(item.key);
+  const goHome = onTitlePress ?? (() => destinations[0] && go(destinations[0]));
+  const tabs = (0, import_react2.useMemo)(() => destinations.filter(item => (item.placement ?? "tab") === "tab"), [destinations]);
+  const more = (0, import_react2.useMemo)(() => destinations.filter(item => item.placement === "more"), [destinations]);
+  const showTabs = compact && Boolean(destination && tabs.includes(destination));
+  const tabItems = tabs.map(({
+    key,
+    label,
+    icon,
+    nativeIcon
+  }) => ({
+    key,
+    label,
+    icon,
+    nativeIcon
+  }));
+  const onTabPress = key => {
+    const item = tabs.find(tab => tab.key === key);
+    if (item) go(item);
+  };
+  if (ownsChrome) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      minHeight: 0,
+      backgroundColor: "$background",
+      ...(import_platform.isWeb ? {
+        height: "100dvh"
+      } : null),
+      "data-testid": testID,
+      "data-chrome": "own",
+      children: showTabs ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TabHost.TabHost, {
+        items: tabItems,
+        activeKey: destination?.key,
+        onTabPress,
+        children
+      }) : children
+    });
+  }
+  const pageBar = Boolean(report?.ownTopBar);
+  const scrolled = import_platform.isWeb ? documentScrolled : Boolean(report?.scrolled);
+  const largeTitle = report?.title ?? null;
+  const barTitle = largeTitle ?? destination?.label ?? null;
+  const showTitle = largeTitle ? Boolean(report?.collapsed) : Boolean(barTitle);
+  const back = pushed && onBack && destination && !pageBar ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_page.PageBackButton, {
+    label: destination.label,
+    onPress: () => onBack(destination.key)
+  }) : null;
+  const showBar = compact ? !pageBar : Boolean(back);
+  const moreMenu = compact && more.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu, {
+    placement: "bottom-end",
+    items: more.map(item => ({
+      key: item.key,
+      label: item.label,
+      icon: (0, import_react2.createElement)(item.icon),
+      onSelect: () => go(item)
+    })),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_page.PageBarButton, {
+      edge: "end",
+      icon: import_react.ListIcon,
+      "aria-label": t("More"),
+      "data-testid": "app-shell-more"
+    })
+  }) : null;
+  const bar = showBar ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AppShellNavBar, {
+    leading: back ?? (compact && logo ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(HomeControl, {
+      title,
+      onPress: goHome,
+      children: logo
+    }) : null),
+    trailing: compact ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [actions, moreMenu]
+    }) : null,
+    maxWidth: compact ? void 0 : import_page.READABLE_MAX_WIDTH,
+    title: barTitle,
+    showTitle,
+    scrolled
+  }) : null;
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    role: "main",
+    flex: 1,
+    minWidth: 0,
+    ...(import_platform.isWeb ? null : {
+      minHeight: 0
+    }),
+    "data-testid": "app-shell-content",
+    children: compact ? children : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      width: "100%",
+      maxWidth: import_page.READABLE_MAX_WIDTH,
+      alignSelf: "center",
+      ...(import_platform.isWeb ? null : {
+        minHeight: 0
+      }),
+      "data-testid": "app-shell-readable",
+      children
+    })
+  });
+  const pageAccessory = accessory ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flexShrink: 0,
+    ...(import_platform.isWeb || floatingBar ? null : {
+      paddingBottom: chromeInset
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_bottomAccessory.BottomAccessory, {
+      children: accessory
+    })
+  }) : null;
+  const frame = compact ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    flex: 1,
+    backgroundColor: "$background",
+    ...(import_platform.isWeb ? {
+      minHeight: "100dvh"
+    } : null),
+    "data-testid": testID,
+    "data-size": "compact",
+    children: [bar, tabItems.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_TabHost.TabHost, {
+      items: tabItems,
+      activeKey: showTabs ? destination?.key : void 0,
+      onTabPress,
+      children: [content, pageAccessory]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [content, pageAccessory]
+    })]
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flex: 1,
+    backgroundColor: "$background",
+    ...(import_platform.isWeb ? {
+      minHeight: "100dvh"
+    } : null),
+    "data-testid": testID,
+    "data-size": "regular",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flexShrink: 0,
+      alignSelf: "stretch",
+      ...(import_platform.isWeb ? {
+        position: "sticky",
+        top: 0,
+        height: "100dvh"
+      } : null),
+      "data-testid": "app-shell-sidebar",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sidebar.Sidebar, {
+        material: true,
+        "aria-label": title,
+        header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          paddingHorizontal: knobProps.panelPadding.padding,
+          alignItems: "center",
+          minHeight: import_theme.MIN_PRESS_TARGET,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(HomeControl, {
+            title,
+            onPress: goHome,
+            children: [logo, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              ...knobProps.heading,
+              fontWeight: "700",
+              color: "$color12",
+              numberOfLines: 1,
+              children: title
+            })]
+          })
+        }),
+        footer: actions ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          paddingHorizontal: knobProps.panelPadding.padding,
+          alignItems: "center",
+          minHeight: import_theme.MIN_PRESS_TARGET,
+          flexWrap: "wrap",
+          ...knobProps.gap,
+          "data-testid": "app-shell-sidebar-actions",
+          children: actions
+        }) : void 0,
+        sections: [{
+          items: destinations.map(item => ({
+            label: item.label,
+            value: item.key,
+            icon: (0, import_react2.createElement)(item.icon),
+            active: item === destination,
+            onPress: () => go(item)
+          }))
+        }],
+        children: sidebarSlot.panel ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StackedPanel, {
+          panel: sidebarSlot.panel
+        }) : null
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      minWidth: 0,
+      children: [bar, content, pageAccessory]
+    })]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_shellSidebarSlot.ShellSidebarSlotProvider, {
+    value: compact ? null : sidebarSlot.value,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_screenScroll.ShellScrollReportScope, {
+      reporter,
+      children: frame
+    })
+  });
+}