@multiplatform.one/components 7.7.3 → 7.7.6

package/src/Tabs/index.tsx

@@ -59,7 +59,7 @@ import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
 
-export type TabsVariant = "underline" | "contained";
+export type TabsVariant = "underline" | "contained" | "band";
 export type TabsSize = "$2" | "$3" | "$4" | "$5";
 export type TabsDirection = "ltr" | "rtl";
 
@@ -68,6 +68,8 @@ export interface TabsItem {
   value: string;
   /** Tab label */
   label: ReactNode;
+  /** Spoken name when the label contains more than plain text. */
+  accessibilityLabel?: string;
   /** Optional leading icon */
   icon?: ReactNode;
   /** Optional trailing adornment (e.g. a Badge/count pill) */
@@ -89,6 +91,8 @@ export interface TabsProps {
   onChange?: (value: string) => void;
   /** underline (desk-style, default) or contained (segmented track) */
   variant?: TabsVariant;
+  /** Equal tabs share a bounded row. Band always uses equal distribution. */
+  distribution?: "content" | "equal";
   /** Accent intent for the active indicator (default) */
   accent?: boolean;
   /** Error intent */
@@ -218,7 +222,8 @@ const fillProps = { flex: 1, minHeight: 0 } as const;
 
 const StripWrapper = styled(View, {
   name: "MpTabsStrip",
-  width: "100%",
+  alignSelf: "stretch",
+  minWidth: 0,
   position: "relative",
 });
 
@@ -297,6 +302,7 @@ function TabsRoot({
   defaultValue,
   onChange,
   variant = "underline",
+  distribution = "content",
   accent,
   error,
   warning,
@@ -395,6 +401,27 @@ function TabsRoot({
   }, [activeLayout, direction]);
 
   const isUnderline = variant === "underline";
+  const isBand = variant === "band";
+  const equalDistribution = isBand || distribution === "equal";
+  const tabRefs = React.useRef(new Map<string, HTMLElement>());
+  const onTabKeyDown = (event: React.KeyboardEvent, value: string) => {
+    if (!["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    const enabled = items.filter((item) => !disabled && !item.disabled);
+    if (!enabled.length) return;
+    const current = enabled.findIndex((item) => item.value === value);
+    const step = (event.key === "ArrowRight" ? 1 : -1) * (direction === "rtl" ? -1 : 1);
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? enabled.length - 1
+          : loop
+            ? (current + step + enabled.length) % enabled.length
+            : Math.max(0, Math.min(enabled.length - 1, current + step));
+    event.preventDefault();
+    event.stopPropagation();
+    tabRefs.current.get(enabled[next]!.value)?.focus();
+  };
   const indicatorTheme = (intent ?? "accent") as ThemeName;
   // Size recipe owns chrome (LC-75). Explicit `size` already flowed into
   // knobProps via useResolvedKnobs. Compact tightens gaps only (LC-76).
@@ -426,36 +453,209 @@ function TabsRoot({
         })()
       : undefined;
 
-  const indicator = activeLayout ? (
-    isUnderline ? (
-      <Theme name={indicatorTheme}>
-        <UnderlineIndicator
-          x={activeLayout.x}
-          width={activeLayout.width}
-          data-tabs-indicator="underline"
-          {...(transition ? { transition } : undefined)}
-        />
-      </Theme>
-    ) : (
-      <Theme name={indicatorTheme}>
-        <ThumbIndicator
-          x={activeLayout.x}
-          y={activeLayout.y}
-          width={activeLayout.width}
-          height={activeLayout.height}
-          backgroundColor={selectedTint ?? "$color4"}
-          data-tabs-indicator="thumb"
-          {...thumbRadius}
-          {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
-          {...(transition ? { transition } : undefined)}
-        />
-      </Theme>
-    )
-  ) : null;
+  const indicator =
+    activeLayout && !isBand ? (
+      isUnderline ? (
+        <Theme name={indicatorTheme}>
+          <UnderlineIndicator
+            x={activeLayout.x}
+            width={activeLayout.width}
+            data-tabs-indicator="underline"
+            {...(transition ? { transition } : undefined)}
+          />
+        </Theme>
+      ) : (
+        <Theme name={indicatorTheme}>
+          <ThumbIndicator
+            x={activeLayout.x}
+            y={activeLayout.y}
+            width={activeLayout.width}
+            height={activeLayout.height}
+            backgroundColor={selectedTint ?? "$color4"}
+            data-tabs-indicator="thumb"
+            {...thumbRadius}
+            {...(knobProps.elevation !== undefined
+              ? { elevation: knobProps.elevation }
+              : undefined)}
+            {...(transition ? { transition } : undefined)}
+          />
+        </Theme>
+      )
+    ) : null;
 
   if (items.length === 0) return null;
 
   const tabListLabel = ariaLabel ?? t("Tabs");
+  const tabList = (
+    <TabsList
+      loop={loop}
+      aria-label={tabListLabel}
+      data-tabs-list={variant}
+      data-size-token={visualSizeToken}
+      data-density={knobProps.density}
+      data-visual-px={sizePx}
+      {...(!isWeb ? { role: "tablist" as const } : undefined)}
+      alignSelf={equalDistribution ? "stretch" : "flex-start"}
+      minWidth={0}
+      contained={!isUnderline && !isBand}
+      {...(isUnderline || isBand
+        ? { gap: 0 }
+        : {
+            backgroundColor: componentColors.interactive.background,
+            gap: 0,
+            // Full fragment spread (AGENTS.md knob rule) so the
+            // cornerSmoothing class rides along with the radius.
+            ...knobProps.borderRadiusNested,
+          })}
+    >
+      {indicator}
+      {items.map((item, itemIndex) => {
+        const isActive = item.value === currentValue;
+        const isDisabled = disabled || item.disabled;
+        const position = getGroupPosition(itemIndex, enabledCount);
+        const cornerProps = isUnderline
+          ? underlineStackRadius(position, radiusToken)
+          : stackRadiusProps(position, outerRadiusToken, "horizontal");
+        // Roving tabindex (single tab stop): tamagui's vendored
+        // roving-focus item hardcodes tabIndex=0 on every tab, making
+        // each tab its own Tab stop. Exactly one tab stays in the page
+        // tab order — the focused one while focus is in the tablist,
+        // else the active one (or the first, when value matches
+        // nothing); ArrowLeft/Right move within the tablist.
+        const anchorValue =
+          (focusValue !== null &&
+          items.some((i) => i.value === focusValue && !(disabled || i.disabled))
+            ? focusValue
+            : undefined) ??
+          (items.some((i) => i.value === currentValue && !(disabled || i.disabled))
+            ? currentValue
+            : items.find((i) => !(disabled || i.disabled))?.value);
+        const isTabStop =
+          item.value === anchorValue &&
+          itemIndex === items.findIndex((i) => i.value === anchorValue);
+        const kbRing = kbFocusValue === item.value;
+        return (
+          <Trigger
+            key={item.value}
+            value={item.value}
+            ref={(node) => {
+              if (!isWeb) return;
+              if (node) tabRefs.current.set(item.value, node as unknown as HTMLElement);
+              else tabRefs.current.delete(item.value);
+            }}
+            flex={equalDistribution ? 1 : undefined}
+            minWidth={0}
+            minHeight={isBand ? MIN_PRESS_TARGET : undefined}
+            borderEndWidth={isBand && itemIndex < items.length - 1 ? 1 : 0}
+            borderColor={isBand ? componentColors.surface.border : undefined}
+            disabled={isDisabled}
+            {...(item.content === undefined ? { "aria-controls": undefined } : undefined)}
+            data-tab-position={position}
+            data-kb-ring={kbRing ? "true" : undefined}
+            {...(isWeb
+              ? {
+                  tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1,
+                  "aria-label": item.accessibilityLabel,
+                  onKeyDownCapture: (event: React.KeyboardEvent) => onTabKeyDown(event, item.value),
+                }
+              : {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel:
+                    item.accessibilityLabel ??
+                    (typeof item.label === "string" || typeof item.label === "number"
+                      ? String(item.label)
+                      : undefined),
+                  accessibilityState: { selected: isActive, disabled: Boolean(isDisabled) },
+                })}
+            hitSlop={tabHitSlop}
+            onInteraction={handleInteraction}
+            cursor={isDisabled ? "not-allowed" : "pointer"}
+            backgroundColor={
+              isBand && isActive ? componentColors.surface.background : "transparent"
+            }
+            borderRadius={0}
+            {...(isDisabled
+              ? isActive
+                ? disabledState.chromeKnobProps
+                : { ...disabledState.chromeKnobProps, ...disabledState.textKnobProps }
+              : undefined)}
+            {...(isWeb
+              ? {
+                  onFocusCapture: () => {
+                    setFocusValue(item.value);
+                    if (wasKeyboardFocus()) setKbFocusValue(item.value);
+                  },
+                  onBlurCapture: () => {
+                    setFocusValue((prev) => (prev === item.value ? null : prev));
+                    setKbFocusValue((prev) => (prev === item.value ? null : prev));
+                  },
+                  onPointerEnter: () => setHoverValue(item.value),
+                  onPointerLeave: () =>
+                    setHoverValue((prev) => (prev === item.value ? null : prev)),
+                  onPointerDown: () => setPressValue(item.value),
+                  onPointerUp: () => setPressValue((prev) => (prev === item.value ? null : prev)),
+                }
+              : undefined)}
+          >
+            <View
+              {...(isBand ? undefined : cornerProps)}
+              // ONE chrome owner (LC-75/LC-79): the full control recipe
+              // (height/paddingHorizontal/gap) lives on this inner row —
+              // it also paints hover/press fill, so the pill covers the
+              // padded box. The Trigger stays an unpainted hit target
+              // (spreading the recipe there too doubled the horizontal
+              // padding).
+              {...knobProps.control}
+              // Equal columns own band spacing; extra inset can exceed a narrow column.
+              paddingHorizontal={isBand ? 0 : knobProps.control.paddingHorizontal}
+              alignSelf="stretch"
+              flexGrow={equalDistribution ? 1 : undefined}
+              flexShrink={equalDistribution ? 1 : undefined}
+              flexBasis={equalDistribution ? 0 : undefined}
+              minWidth={0}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+              backgroundColor={
+                isActive || isDisabled
+                  ? "transparent"
+                  : pressValue === item.value
+                    ? componentColors.interactive.hover
+                    : hoverValue === item.value
+                      ? componentColors.interactive.background
+                      : "transparent"
+              }
+              {...(kbRing ? keyboardFocusRingProps : undefined)}
+            >
+              {item.icon}
+              <TabLabel
+                minWidth={equalDistribution ? 0 : undefined}
+                flexShrink={equalDistribution ? 1 : undefined}
+                active={isActive}
+                {...knobProps.controlType}
+                fontFamily={knobProps.label.fontFamily}
+                fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}
+                color={
+                  isDisabled
+                    ? componentColors.text.muted
+                    : isActive
+                      ? variant === "contained" && onSelectedTint
+                        ? onSelectedTint
+                        : componentColors.text.primary
+                      : componentColors.text.secondary
+                }
+              >
+                {wrapBareTextChildren(item.label, (label) => label)}
+              </TabLabel>
+              {item.badge}
+            </View>
+          </Trigger>
+        );
+      })}
+    </TabsList>
+  );
 
   return (
     <TamaguiTabs
@@ -463,13 +663,16 @@ function TabsRoot({
       onValueChange={handleChange}
       orientation="horizontal"
       activationMode={activationMode}
-      width="100%"
+      width={equalDistribution ? "100%" : undefined}
+      alignSelf="stretch"
+      minWidth={0}
       flexDirection="column"
       // The root is the first link in the chain a filling panel needs.
       // `flex: 1` alone is not enough — without `minHeight: 0` the column
       // refuses to shrink below its content and the panel never gets a box.
       {...(fill ? fillProps : undefined)}
       data-tabs-variant={variant}
+      data-tabs-distribution={equalDistribution ? "equal" : "content"}
       data-tabs-fill={fill ? "true" : undefined}
       data-tabs-dir={direction}
       data-size-token={visualSizeToken}
@@ -477,171 +680,47 @@ function TabsRoot({
       data-visual-px={sizePx}
     >
       <StripWrapper
+        backgroundColor={isBand ? "$color2" : undefined}
+        borderBottomWidth={isBand ? 1 : undefined}
+        borderBottomColor={isBand ? componentColors.surface.border : undefined}
         {...(isUnderline
           ? { ...hairline.bottom, borderColor: componentColors.surface.border }
           : undefined)}
         data-fade-left={fades.left ? "true" : undefined}
         data-fade-right={fades.right ? "true" : undefined}
       >
-        <ScrollView
-          ref={scrollRef}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
-          style={maskStyle as never}
-          // Slop padding keeps the 44px press floor from being clipped when
-          // the painted tab is smaller than the floor (LC-54 / nested scale).
-          contentContainerStyle={{ paddingVertical: slop }}
-          marginVertical={-slop}
-          onScroll={(e) => {
-            scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
-            updateFades();
-          }}
-          onLayout={(e) => {
-            scrollMetrics.current.viewport = e.nativeEvent.layout.width;
-            updateFades();
-          }}
-          onContentSizeChange={(w) => {
-            scrollMetrics.current.content = w;
-            updateFades();
-          }}
-        >
-          <TabsList
-            loop={loop}
-            aria-label={tabListLabel}
-            data-tabs-list={variant}
-            data-size-token={visualSizeToken}
-            data-density={knobProps.density}
-            data-visual-px={sizePx}
-            {...(!isWeb ? { role: "tablist" as const } : undefined)}
-            contained={!isUnderline}
-            {...(isUnderline
-              ? { gap: 0 }
-              : {
-                  backgroundColor: componentColors.interactive.background,
-                  gap: 0,
-                  // Full fragment spread (AGENTS.md knob rule) so the
-                  // cornerSmoothing class rides along with the radius.
-                  ...knobProps.borderRadiusNested,
-                })}
+        {equalDistribution ? (
+          <View alignSelf="stretch" minWidth={0}>
+            {tabList}
+          </View>
+        ) : (
+          <ScrollView
+            ref={scrollRef}
+            data-tabs-scroll="true"
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            scrollEventThrottle={16}
+            style={maskStyle as never}
+            // Slop padding keeps the 44px press floor from being clipped when
+            // the painted tab is smaller than the floor (LC-54 / nested scale).
+            contentContainerStyle={{ paddingVertical: slop }}
+            marginVertical={-slop}
+            onScroll={(e) => {
+              scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
+              updateFades();
+            }}
+            onLayout={(e) => {
+              scrollMetrics.current.viewport = e.nativeEvent.layout.width;
+              updateFades();
+            }}
+            onContentSizeChange={(w) => {
+              scrollMetrics.current.content = w;
+              updateFades();
+            }}
           >
-            {indicator}
-            {items.map((item, itemIndex) => {
-              const isActive = item.value === currentValue;
-              const isDisabled = disabled || item.disabled;
-              const position = getGroupPosition(itemIndex, enabledCount);
-              const cornerProps = isUnderline
-                ? underlineStackRadius(position, radiusToken)
-                : stackRadiusProps(position, outerRadiusToken, "horizontal");
-              // Roving tabindex (single tab stop): tamagui's vendored
-              // roving-focus item hardcodes tabIndex=0 on every tab, making
-              // each tab its own Tab stop. Exactly one tab stays in the page
-              // tab order — the focused one while focus is in the tablist,
-              // else the active one (or the first, when value matches
-              // nothing); ArrowLeft/Right move within the tablist.
-              const anchorValue =
-                (focusValue !== null &&
-                items.some((i) => i.value === focusValue && !(disabled || i.disabled))
-                  ? focusValue
-                  : undefined) ??
-                (items.some((i) => i.value === currentValue) ? currentValue : items[0]?.value);
-              const isTabStop =
-                item.value === anchorValue &&
-                itemIndex === items.findIndex((i) => i.value === anchorValue);
-              const kbRing = kbFocusValue === item.value;
-              return (
-                <Trigger
-                  key={item.value}
-                  value={item.value}
-                  disabled={isDisabled}
-                  data-tab-position={position}
-                  data-kb-ring={kbRing ? "true" : undefined}
-                  {...(isWeb
-                    ? { tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1 }
-                    : {
-                        accessible: true,
-                        role: "tab" as const,
-                        "aria-selected": isActive,
-                        ...(isDisabled ? { "aria-disabled": true } : undefined),
-                      })}
-                  hitSlop={tabHitSlop}
-                  onInteraction={handleInteraction}
-                  cursor={isDisabled ? "not-allowed" : "pointer"}
-                  backgroundColor="transparent"
-                  borderRadius={0}
-                  {...(isDisabled
-                    ? isActive
-                      ? disabledState.chromeKnobProps
-                      : { ...disabledState.chromeKnobProps, ...disabledState.textKnobProps }
-                    : undefined)}
-                  {...(isWeb
-                    ? {
-                        onFocusCapture: () => {
-                          setFocusValue(item.value);
-                          if (wasKeyboardFocus()) setKbFocusValue(item.value);
-                        },
-                        onBlurCapture: () => {
-                          setFocusValue((prev) => (prev === item.value ? null : prev));
-                          setKbFocusValue((prev) => (prev === item.value ? null : prev));
-                        },
-                        onPointerEnter: () => setHoverValue(item.value),
-                        onPointerLeave: () =>
-                          setHoverValue((prev) => (prev === item.value ? null : prev)),
-                        onPointerDown: () => setPressValue(item.value),
-                        onPointerUp: () =>
-                          setPressValue((prev) => (prev === item.value ? null : prev)),
-                      }
-                    : undefined)}
-                >
-                  <View
-                    {...cornerProps}
-                    // ONE chrome owner (LC-75/LC-79): the full control recipe
-                    // (height/paddingHorizontal/gap) lives on this inner row —
-                    // it also paints hover/press fill, so the pill covers the
-                    // padded box. The Trigger stays an unpainted hit target
-                    // (spreading the recipe there too doubled the horizontal
-                    // padding).
-                    {...knobProps.control}
-                    width="100%"
-                    flexDirection="row"
-                    alignItems="center"
-                    justifyContent="center"
-                    backgroundColor={
-                      isActive || isDisabled
-                        ? "transparent"
-                        : pressValue === item.value
-                          ? componentColors.interactive.hover
-                          : hoverValue === item.value
-                            ? componentColors.interactive.background
-                            : "transparent"
-                    }
-                    {...(kbRing ? keyboardFocusRingProps : undefined)}
-                  >
-                    {item.icon}
-                    <TabLabel
-                      active={isActive}
-                      {...knobProps.controlType}
-                      fontFamily={knobProps.label.fontFamily}
-                      fontWeight={isActive ? "700" : knobProps.label.fontWeight}
-                      color={
-                        isDisabled
-                          ? componentColors.text.muted
-                          : isActive
-                            ? !isUnderline && onSelectedTint
-                              ? onSelectedTint
-                              : componentColors.text.primary
-                            : componentColors.text.secondary
-                      }
-                    >
-                      {wrapBareTextChildren(item.label, (label) => label)}
-                    </TabLabel>
-                    {item.badge}
-                  </View>
-                </Trigger>
-              );
-            })}
-          </TabsList>
-        </ScrollView>
+            {tabList}
+          </ScrollView>
+        )}
       </StripWrapper>
 
       {/*

package/src/disclosureForm.spec.tsx

@@ -0,0 +1,57 @@
+/** @vitest-environment jsdom */
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Accordion } from "./Accordion";
+import { Collapsible } from "./tamagui";
+
+function Disclosure({
+  kind,
+  type,
+}: {
+  kind: "accordion" | "collapsible";
+  type?: "button" | "submit";
+}) {
+  const props = type ? { type } : {};
+  return kind === "accordion" ? (
+    <Accordion type="single" collapsible>
+      <Accordion.Item value="preview">
+        <Accordion.Trigger {...props}>Preview</Accordion.Trigger>
+        <Accordion.Content>Contents</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ) : (
+    <Collapsible>
+      <Collapsible.Trigger {...props}>Preview</Collapsible.Trigger>
+      <Collapsible.Content>Contents</Collapsible.Content>
+    </Collapsible>
+  );
+}
+
+describe("disclosure triggers inside forms", () => {
+  for (const kind of ["accordion", "collapsible"] as const) {
+    it(`${kind} opens without submitting by default`, () => {
+      const submit = vi.fn((event) => event.preventDefault());
+      const result = renderWithProviders(
+        <form onSubmit={submit}>
+          <Disclosure kind={kind} />
+        </form>,
+      );
+      const trigger = result.getByRole("button", { name: "Preview" });
+      fireEvent.click(trigger);
+      expect(trigger.getAttribute("aria-expanded")).toBe("true");
+      expect(submit).not.toHaveBeenCalled();
+      expect(trigger.getAttribute("type")).toBe("button");
+    });
+    it(`${kind} preserves an explicit submit request`, () => {
+      const submit = vi.fn((event) => event.preventDefault());
+      const result = renderWithProviders(
+        <form onSubmit={submit}>
+          <Disclosure kind={kind} type="submit" />
+        </form>,
+      );
+      fireEvent.click(result.getByRole("button", { name: "Preview" }));
+      expect(submit).toHaveBeenCalledTimes(1);
+    });
+  }
+});

package/src/disclosureNativeProps.spec.tsx

@@ -0,0 +1,35 @@
+import { createRef } from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { expect, it, vi } from "vitest";
+import { Accordion } from "./Accordion";
+import { Collapsible } from "./Collapsible";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+}));
+
+it("the native prop branch omits HTML button intent and retains compound refs", () => {
+  const root = createRef<any>();
+  const trigger = createRef<any>();
+  const result = renderWithProviders(
+    <>
+      <Collapsible ref={root}>
+        <Collapsible.Trigger ref={trigger} type="submit">
+          Disclosure
+        </Collapsible.Trigger>
+        <Collapsible.Content>Contents</Collapsible.Content>
+      </Collapsible>
+      <Accordion>
+        <Accordion.Item value="one">
+          <Accordion.Trigger type="submit">Section</Accordion.Trigger>
+          <Accordion.Content>Section contents</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </>,
+  );
+  expect(root.current).toBeTruthy();
+  expect(trigger.current).toBe(result.getByRole("button", { name: "Disclosure" }));
+  expect(trigger.current.getAttribute("type")).toBeNull();
+  expect(result.getByRole("button", { name: "Section" }).getAttribute("type")).toBeNull();
+});

package/src/knobImmuneExports.ts

@@ -42,8 +42,6 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
   // own the painted chrome. Restored with the three below after MPO-21 R9 G8
   // (the Adapt drop) rewrote this file from a pre-MPO-21 copy and took them
   // out as collateral; Adapt itself stays dropped.
-  Collapsible:
-    "composition root (open/close shell); knobs land on composing surfaces (Accordion, Fold)",
   Unspaced:
     "spacing opt-out marker; paints nothing, tells the parent stack to skip gap on its children",
   VisuallyHidden: "a11y hide utility; paints nothing visible, no chrome for knobs to reach",