@multiplatform.one/components 7.80.0 → 7.81.0

package/src/SchemeToggle/SchemeToggle.spec.tsx

@@ -1,4 +1,4 @@
-import { CircleHalfIcon, MoonIcon, SunIcon, XIcon } from "@phosphor-icons/react";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -43,7 +43,7 @@ describe("SchemeToggle (FZ-8158)", () => {
     expect(set).toHaveBeenCalledWith("system");
   });
 
-  it("opens its menu on the button and draws the button again in place as an X, a press there closing it (FZ-8480)", async () => {
+  it("opens its menu on the button with no X, a press outside closing it (FZ-8665)", async () => {
     const { useUserScheme } = preference("dark", "dark");
     const { getByRole } = renderWithProviders(<SchemeToggle useUserScheme={useUserScheme} />);
     const live = getByRole("button", { name: "Appearance: Dark" });
@@ -53,15 +53,9 @@ describe("SchemeToggle (FZ-8158)", () => {
       expect(found?.querySelector('[role="menu"]')).toBeTruthy();
       return found as HTMLElement;
     });
-    const echo = panel.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-    expect(echo?.getAttribute("aria-label")).toBe("Close");
-    const pathOf = (node: ParentNode | null | undefined) =>
-      node?.querySelector("svg path")?.getAttribute("d");
-    const x = render(<XIcon weight="bold" />);
-    expect(pathOf(echo)).toBe(pathOf(x.container));
-    expect(pathOf(echo)).not.toBe(pathOf(live));
-    x.unmount();
-    fireEvent.click(echo as HTMLElement);
+    expect(panel.querySelector('[aria-label="Close"]')).toBeNull();
+    expect(panel.querySelector(`[aria-label="${live.getAttribute("aria-label")}"]`)).toBeNull();
+    fireEvent.click(document.body);
     await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeFalsy());
   });
 

package/src/SchemeToggle/SchemeToggle.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { XStack } from "tamagui";
+import { SchemeToggle } from "./index";
+
+const meta: Meta<typeof SchemeToggle> = {
+  title: "Components/SchemeToggle",
+  component: SchemeToggle,
+  parameters: { status: { type: "beta" } },
+};
+
+export default meta;
+type Story = StoryObj<typeof SchemeToggle>;
+
+/** A tap flips light and dark; a right-click (long-press on native) opens System, Light and Dark. */
+export const Default: Story = {
+  render: () => (
+    <XStack padding="$4" justifyContent="flex-end">
+      <SchemeToggle />
+    </XStack>
+  ),
+};

package/src/SchemeToggle/index.tsx

@@ -1,6 +1,7 @@
 import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { IconButton, type IconButtonProps } from "@multiplatform.one/forms";
 import {
+  menuRowIconGlyph,
   useSchemePreference,
   type SchemePreference,
   type ThemeScheme,
@@ -60,7 +61,7 @@ export function SchemeToggle({
         const Glyph = schemeGlyphs[value];
         return {
           label: name(value),
-          icon: <Glyph size={18} weight="bold" />,
+          icon: <Glyph size={menuRowIconGlyph.size} weight={menuRowIconGlyph.weight} />,
           checked: scheme.setting === value,
           onSelect: () => scheme.set(value),
         };

package/src/SheetModal/index.native.tsx

@@ -28,6 +28,7 @@ import {
   useResolvedKnobs,
   type MotionStop,
   nativeAnimationConfig as animationConfig,
+  overlayScrim,
 } from "@multiplatform.one/theme";
 import {
   useCallback,
@@ -424,7 +425,7 @@ export function SheetModal({
             accessibilityRole="button"
             accessibilityLabel={t("Close")}
           >
-            <View flex={1} backgroundColor="$shadow6" />
+            <View flex={1} backgroundColor={overlayScrim} />
           </Pressable>
           <Animated.View
             onLayout={(e) => {

package/src/SheetModal/index.tsx

@@ -9,7 +9,7 @@
  * on device). Dismissal: overlay tap / snap-to-bottom / Escape (LC-21).
  */
 
-import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { overlayScrim, transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { OverlayStackProvider, useOverlayZIndex } from "@multiplatform.one/forms";
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { isWeb, Sheet, View, useWindowDimensions } from "tamagui";
@@ -128,7 +128,7 @@ export function SheetModal({
       portalProps={{ zIndex: sheetZIndex }}
     >
       <Sheet.Overlay
-        backgroundColor="$shadow6"
+        backgroundColor={overlayScrim}
         {...transitionProps(knobProps.motion.scrim)}
         enterStyle={{ opacity: 0 }}
         exitStyle={{ opacity: 0 }}
@@ -160,6 +160,9 @@ export function SheetModal({
           : null)}
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
+        borderLeftWidth={0}
+        borderRightWidth={0}
+        borderBottomWidth={0}
         overflow="hidden"
         {...frameRingReset}
       >

package/src/TreeSelect/index.tsx

@@ -11,11 +11,11 @@ import {
   panelViewportPadding,
   useOverlayZIndex,
 } from "@multiplatform.one/forms";
+import { CheckGlyph } from "../CheckGlyph";
 import {
   CaretDownIcon,
   CaretLeftIcon,
   CaretRightIcon,
-  CheckIcon,
   FileIcon,
   FolderIcon,
   FolderOpenIcon,
@@ -27,7 +27,6 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   listHeightForRows,
-  useMenuRowCheckInk,
   menuRowChecked,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -110,7 +109,6 @@ function TreeSelectRows({
 }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const checkInk = useMenuRowCheckInk();
   const checkedFill = menuRowChecked(knobProps.scheme);
   const nestedPx = knobProps.nestedControl.px;
   const indentStep = 16;
@@ -271,7 +269,7 @@ function TreeSelectRows({
             ) : null}
             {isSelected ? (
               <View flexShrink={0} width={14} height={14}>
-                <CheckIcon size={14} weight="bold" color={checkInk} />
+                <CheckGlyph />
               </View>
             ) : null}
           </XStack>

package/src/appShell/AppShell.spec.tsx

@@ -184,6 +184,36 @@ describe("AppShell on a phone", () => {
     expect(screen.queryByRole("tablist")).toBeNull();
     expect(screen.getByTestId("page")).toBeTruthy();
   });
+
+  it("keeps the tab bar around an own-chrome route that is a tab, and on a route below it", () => {
+    const withDesk = [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }];
+    for (const path of ["/desk", "/desk/Pokemon"]) {
+      const { onNavigate } = shell(path, { destinations: withDesk });
+      expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+      expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+      const tabs = screen.getAllByRole("tab");
+      expect(tabs.map((tab) => tab.getAttribute("aria-label"))).toEqual([
+        "Home",
+        "Pokemon",
+        "Desk",
+      ]);
+      expect(tabs[2]!.getAttribute("aria-selected")).toBe("true");
+      fireEvent.click(tabs[0]!);
+      expect(onNavigate).toHaveBeenCalledWith("/");
+      expect(screen.getByTestId("page")).toBeTruthy();
+      cleanup();
+    }
+  });
+
+  it("draws no tab bar around an own-chrome route at regular width", () => {
+    size.value = "expanded";
+    shell("/desk", {
+      destinations: [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }],
+    });
+    expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.queryByTestId("app-shell-sidebar")).toBeNull();
+  });
 });
 
 describe("AppShell at regular width", () => {

package/src/appShell/AppShell.tsx

@@ -17,7 +17,8 @@
  *   (LC-101 ONE-SIDEBAR).
  *
  * A route listed in `ownChrome` mounts its own full chrome (a desk), so the
- * shell draws nothing around it. A page whose `Screen` pins its own top bar
+ * shell draws no bar or sidebar around it. On a phone, one that is also a tab
+ * destination keeps the tab bar, the only way to the other tabs (FZ-8105). A page whose `Screen` pins its own top bar
  * (LC-157) owns the nav bar on a phone, so the shell's bar steps aside there.
  */
 import { zIndex } from "@multiplatform.one/forms";
@@ -305,6 +306,18 @@ export function AppShell({
     [destinations],
   );
 
+  const showTabs = compact && Boolean(destination && tabs.includes(destination));
+  const tabItems: TabBarItem[] = tabs.map(({ key, label, icon, nativeIcon }) => ({
+    key,
+    label,
+    icon,
+    nativeIcon,
+  }));
+  const onTabPress = (key: string) => {
+    const item = tabs.find((tab) => tab.key === key);
+    if (item) go(item);
+  };
+
   if (ownsChrome) {
     return (
       <YStack
@@ -315,7 +328,13 @@ export function AppShell({
         data-testid={testID}
         data-chrome="own"
       >
-        {children}
+        {showTabs ? (
+          <TabHost items={tabItems} activeKey={destination?.key} onTabPress={onTabPress}>
+            {children}
+          </TabHost>
+        ) : (
+          children
+        )}
       </YStack>
     );
   }
@@ -401,13 +420,6 @@ export function AppShell({
     </YStack>
   );
 
-  const showTabs = compact && Boolean(destination && tabs.includes(destination));
-  const tabItems: TabBarItem[] = tabs.map(({ key, label, icon, nativeIcon }) => ({
-    key,
-    label,
-    icon,
-    nativeIcon,
-  }));
   // The floating TabBar takes the accessory into its own capsule. Otherwise
   // it renders in place, and on native it clears the system tab bar, which
   // the content runs under.
@@ -430,10 +442,7 @@ export function AppShell({
         <TabHost
           items={tabItems}
           activeKey={showTabs ? destination?.key : undefined}
-          onTabPress={(key) => {
-            const item = tabs.find((tab) => tab.key === key);
-            if (item) go(item);
-          }}
+          onTabPress={onTabPress}
         >
           {content}
           {pageAccessory}

package/src/appShell/ScopeMenu.spec.tsx

@@ -135,3 +135,25 @@ describe("ScopeMenu (LC-105 COVER-TRIGGER)", () => {
     expect(screen.getByLabelText("Environment: Production")).toBeTruthy();
   });
 });
+
+describe("ScopeMenu as a phone sheet (FZ-8557)", () => {
+  it("titles the sheet with the picker's label instead of echoing the trigger", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 390 });
+    try {
+      renderWithProviders(<Tenant />);
+      fireEvent.click(screen.getByTestId("tenant-trigger"));
+      const header = await screen.findByTestId("tenant-sheet-header");
+      expect(screen.getByRole("heading", { name: "Tenant" })).toBeTruthy();
+      expect(header.closest('[data-testid="floating-panel-sheet"]')).not.toBeNull();
+      expect(screen.queryByTestId("tenant-first-row")).toBeNull();
+      expect(screen.getAllByRole("menuitemradio")).toHaveLength(2);
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: width,
+      });
+    }
+  });
+});

package/src/appShell/ScopeMenu.tsx

@@ -14,13 +14,16 @@
  *   side, never one menu with two sections.
  *
  * Narrow viewports and native get FloatingPanel's sheet (phones take
- * sheets); the first-row contract holds there too.
+ * sheets). A sheet isn't over its trigger, so it drops the first row for a
+ * sheet title, the picker's label (FZ-8557).
  */
-import { FloatingPanel, type PanelWidth } from "@multiplatform.one/forms";
-import { useMenuRowCheckInk, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
-import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import { CheckGlyph } from "../CheckGlyph";
+import { FloatingPanel, type PanelWidth, useInPanelSheet } from "@multiplatform.one/forms";
+import { menuRowCheckGlyph, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useState } from "react";
-import { XStack, YStack } from "tamagui";
+import { View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "../actions/StandardAction";
 import { SizableText } from "../Text";
 
 export interface ScopeMenuOption {
@@ -60,8 +63,8 @@ function ScopeRow({
   ariaLabel?: string;
 }) {
   const { knobProps, control } = useResolvedKnobs();
+  const inSheet = useInPanelSheet();
   const iconSize = Number(knobProps.controlIcon?.width) || undefined;
-  const checkInk = useMenuRowCheckInk();
   const Chevron = chevron === "up" ? CaretUpIcon : CaretDownIcon;
   return (
     <XStack
@@ -71,8 +74,11 @@ function ScopeRow({
       {...(role === "menuitemradio" ? { "aria-checked": !!checked } : {})}
       alignItems="center"
       gap="$2"
-      minHeight="$3"
-      paddingHorizontal="$2.5"
+      // A menu row is the menu row recipe's height, a touch target on a phone
+      // (44pt, HIG); the bar trigger and its echo keep the bar's size.
+      minHeight={role === "menuitemradio" ? knobProps.menuRow.minHeight : "$3"}
+      // A phone sheet's rows keep HIG's 16pt gutter; a bar menu's hug the trigger.
+      paddingHorizontal={inSheet ? "$4" : "$2.5"}
       cursor="pointer"
       onPress={onPress}
       // The echo row is the trigger itself, laid on the panel (LC-112): the
@@ -91,8 +97,8 @@ function ScopeRow({
       {...(chevron === "down" ? { borderRadius: knobProps.borderRadius.borderRadius } : undefined)}
     >
       {role === "menuitemradio" ? (
-        <YStack width={iconSize} alignItems="center" aria-hidden>
-          {checked ? <CheckIcon size={iconSize} weight="bold" color={checkInk} /> : null}
+        <YStack width={menuRowCheckGlyph.size} alignItems="center" aria-hidden>
+          {checked ? <CheckGlyph /> : null}
         </YStack>
       ) : null}
       <SizableText size="$2" fontWeight={chevron ? "500" : "400"} numberOfLines={1}>
@@ -103,6 +109,42 @@ function ScopeRow({
   );
 }
 
+/**
+ * Over its trigger, the menu's first row is the pressed item with its chevron
+ * flipped (LC-112). A phone sheet isn't over its trigger, so it takes a sheet
+ * title, the picker's label, and a close (HIG, FZ-8557 Round 40).
+ */
+function ScopeMenuHead({
+  label,
+  currentLabel,
+  onClose,
+  testID,
+}: {
+  label: string;
+  currentLabel: string;
+  onClose: () => void;
+  testID: string;
+}) {
+  const inSheet = useInPanelSheet();
+  if (inSheet) {
+    return (
+      <View paddingHorizontal="$4" paddingBottom="$2">
+        <OverlayHeader title={label} onClose={onClose} testID={`${testID}-sheet-header`} />
+      </View>
+    );
+  }
+  return (
+    <ScopeRow
+      role="button"
+      label={currentLabel}
+      chevron="up"
+      ariaLabel={`${label}: ${currentLabel}`}
+      onPress={onClose}
+      testID={`${testID}-first-row`}
+    />
+  );
+}
+
 export function ScopeMenu({
   label,
   options,
@@ -144,14 +186,11 @@ export function ScopeMenu({
       }
     >
       <YStack role="menu" aria-label={label} data-testid={`${testID}-panel`}>
-        {/* The pressed item, kept as the first row with its chevron flipped. */}
-        <ScopeRow
-          role="button"
-          label={currentLabel}
-          chevron="up"
-          ariaLabel={`${label}: ${currentLabel}`}
-          onPress={() => setOpen(false)}
-          testID={`${testID}-first-row`}
+        <ScopeMenuHead
+          label={label}
+          currentLabel={currentLabel}
+          onClose={() => setOpen(false)}
+          testID={testID}
         />
         {options.map((option) => (
           <ScopeRow

package/src/appShell/TabBar.tsx

@@ -21,6 +21,7 @@ import {
 import { zIndex } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
+import type { ImageSourcePropType } from "react-native";
 import { XStack, YStack } from "tamagui";
 import { materials, useMaterial } from "../Material";
 import { MaterialBlurFill } from "../Material/blur";
@@ -41,10 +42,19 @@ export interface TabBarItem {
   label: string;
   icon: TabBarIcon;
   /**
-   * The SF Symbols the system tab bar draws on iOS (TabHost). Without them
-   * on every item, iOS keeps the MPO TabBar.
+   * The glyphs the system tab bar draws (TabHost): SF Symbols on iOS, a
+   * raster template image on Android (Material's bar draws no SF Symbol or
+   * SVG; a bundled PNG, so an OTA can carry it). A platform keeps the MPO
+   * TabBar unless every item names its glyph.
    */
-  nativeIcon?: { sfSymbol: string; sfSymbolSelected?: string };
+  nativeIcon?: TabBarNativeIcon;
+}
+
+export interface TabBarNativeIcon {
+  sfSymbol?: string;
+  sfSymbolSelected?: string;
+  /** A monochrome PNG (24dp, @2x and @3x beside it); the bar tints it. */
+  android?: ImageSourcePropType;
 }
 
 export interface TabBarProps {

package/src/appShell/TabHost.native.spec.tsx

@@ -16,23 +16,36 @@ import {
   NativeTabHost,
   TabHost,
   itemsHaveNativeIcons,
+  nativeIconFor,
   nativeTabBarHeight,
+  nativeTabsPlatforms,
   resolveNativeTabs,
 } from "./TabHost.native";
 
 afterEach(cleanup);
 
 const Glyph = () => null;
+const png = (name: string) => ({ uri: `${name}.png`, width: 24, height: 24 });
 
 const items: TabBarItem[] = [
   {
     key: "/",
     label: "Home",
     icon: Glyph,
-    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill" },
+    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill", android: png("house") },
+  },
+  {
+    key: "/pokemon",
+    label: "Pokemon",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "sparkles", android: png("sparkle") },
+  },
+  {
+    key: "/moves",
+    label: "Moves",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "bolt", android: png("lightning") },
   },
-  { key: "/pokemon", label: "Pokemon", icon: Glyph, nativeIcon: { sfSymbol: "sparkles" } },
-  { key: "/moves", label: "Moves", icon: Glyph, nativeIcon: { sfSymbol: "bolt" } },
 ];
 
 const fakeTabs: NativeTabs = {
@@ -58,7 +71,8 @@ const fakeTabs: NativeTabs = {
       data-testid={`native-screen-${tabKey}`}
       data-focused={String(Boolean(isFocused))}
       data-inset-adjust={String(overrideScrollViewContentInsetAdjustmentBehavior)}
-      data-symbol={icon?.ios.name}
+      data-symbol={icon?.ios?.name}
+      data-android-icon={(icon?.android?.imageSource as { uri?: string } | undefined)?.uri}
       aria-label={title}
     >
       {children}
@@ -113,19 +127,49 @@ describe("native tabs detection", () => {
     expect(resolveNativeTabs(sources(["RNSTabsHost", "RNSTabsScreen"], throws), "ios")).toBeNull();
   });
 
-  it("keeps the MPO TabBar on Android and the web", () => {
+  it("keeps the MPO TabBar on Android and the web by default", () => {
     const screens = vi.fn(() => ({ Tabs: fakeTabs }));
     const all = sources(["RNSTabsHost", "RNSTabsScreen"], screens);
+    expect(nativeTabsPlatforms).toEqual({ ios: true, android: false });
     expect(resolveNativeTabs(all, "android")).toBeNull();
     expect(resolveNativeTabs(all, "web")).toBeNull();
     expect(screens).not.toHaveBeenCalled();
   });
 
-  it("needs an SF Symbol on every item", () => {
+  it("picks the Material bar on Android once the platform is switched on (FZ-8140)", () => {
+    const on = { ios: true, android: true };
+    expect(
+      resolveNativeTabs(
+        sources(["RNSTabsHost", "RNSTabsScreen"], () => ({ Tabs: fakeTabs })),
+        "android",
+        on,
+      ),
+    ).toBe(fakeTabs);
+    const screens = vi.fn(() => ({ Tabs: fakeTabs }));
+    expect(resolveNativeTabs(sources([], screens), "android", on)).toBeNull();
+    expect(screens).not.toHaveBeenCalled();
+  });
+
+  it("needs this platform's glyph on every item: an SF Symbol on iOS, a PNG on Android", () => {
     expect(itemsHaveNativeIcons(items)).toBe(true);
+    expect(itemsHaveNativeIcons(items, "android")).toBe(true);
     expect(itemsHaveNativeIcons([...items, { key: "/x", label: "X", icon: Glyph }])).toBe(false);
+    const symbolsOnly = items.map(({ nativeIcon, ...item }) => ({
+      ...item,
+      nativeIcon: { sfSymbol: nativeIcon?.sfSymbol },
+    }));
+    expect(itemsHaveNativeIcons(symbolsOnly, "ios")).toBe(true);
+    expect(itemsHaveNativeIcons(symbolsOnly, "android")).toBe(false);
     expect(itemsHaveNativeIcons([])).toBe(false);
   });
+
+  it("hands react-native-screens each platform's glyph from the one item", () => {
+    expect(nativeIconFor(items[0]!)).toEqual({
+      ios: { type: "sfSymbol", name: "house" },
+      android: { type: "imageSource", imageSource: png("house") },
+    });
+    expect(nativeIconFor({ key: "/x", label: "X", icon: Glyph })).toEqual({});
+  });
 });
 
 describe("NativeTabHost", () => {
@@ -136,6 +180,9 @@ describe("NativeTabHost", () => {
     expect(pokemon.contains(screen.getByTestId("page"))).toBe(true);
     expect(screen.getByTestId("native-screen-/").getAttribute("data-focused")).toBe("false");
     expect(screen.getByTestId("native-screen-/").getAttribute("data-symbol")).toBe("house");
+    expect(screen.getByTestId("native-screen-/").getAttribute("data-android-icon")).toBe(
+      "house.png",
+    );
     expect(screen.getByTestId("native-host").getAttribute("data-hidden")).toBe("false");
     expect(screen.queryByTestId("tab-bar")).toBeNull();
   });