@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -0,0 +1,118 @@
+import { useResolvedKnobs, warnCancelDisabled } from "@multiplatform.one/theme";
+import { useEffect } from "react";
+import { Dialog, Paragraph, XStack, isWeb } from "tamagui";
+import { Button } from "../Button";
+import { formCommonColors } from "../shared/colorRamps";
+import { useReturnFocusOnClose } from "../shared/focusManagement";
+import { t } from "../shared/t";
+
+export interface UnsavedChangesDialogProps {
+  open: boolean;
+  fieldCount: number;
+  onKeepEditing: () => void;
+  onDiscard: () => void;
+}
+
+/**
+ * Route-leave / Discard confirm (DG-OVL-02). Lives in forms so ContextualSaveBar
+ * does not import `@multiplatform.one/components` (ConfirmDialog → forms Button
+ * would cycle).
+ */
+export function UnsavedChangesDialog({
+  open,
+  fieldCount,
+  onKeepEditing,
+  onDiscard,
+}: UnsavedChangesDialogProps) {
+  const { knobProps } = useResolvedKnobs();
+  useReturnFocusOnClose(open);
+
+  useEffect(() => {
+    warnCancelDisabled({ disabled: false, component: "ContextualSaveBar" });
+  }, []);
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) onKeepEditing();
+  };
+
+  const body =
+    fieldCount === 1
+      ? t("1 field on this page has edits that aren't saved. Leaving discards them.")
+      : t("{{count}} fields on this page have edits that aren't saved. Leaving discards them.", {
+          count: fieldCount,
+        });
+
+  return (
+    <Dialog modal open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          backgroundColor="$background"
+          opacity={0.5}
+          transition={knobProps.transition}
+          enterStyle={knobProps.transition ? { opacity: 0 } : undefined}
+          exitStyle={knobProps.transition ? { opacity: 0 } : undefined}
+        />
+        <Dialog.Content
+          key="content"
+          role="alertdialog"
+          tabIndex={-1}
+          width="90%"
+          maxWidth={440}
+          padding="$4"
+          gap="$4"
+          backgroundColor="$background"
+          borderColor="$borderColor"
+          borderWidth={1}
+          {...knobProps.containerRadius}
+          outlineWidth={0}
+          focusStyle={{ outlineWidth: 0 }}
+          focusVisibleStyle={{ outlineWidth: 0 }}
+          data-mp-savebar-guard=""
+          onPointerDownOutside={(e) => e.preventDefault()}
+          onInteractOutside={(e) => e.preventDefault()}
+          {...(isWeb
+            ? {
+                boxShadow: "0 12px 24px rgba(0,0,0,0.12)",
+              }
+            : {
+                shadowColor: "#000",
+                shadowOpacity: 0.12,
+                shadowRadius: 24,
+                shadowOffset: { width: 0, height: 12 },
+              })}
+        >
+          <Dialog.Title {...knobProps.body} fontSize="$4">
+            {t("Discard unsaved changes?")}
+          </Dialog.Title>
+          <Dialog.Description asChild>
+            <Paragraph {...knobProps.body} size="$3" color={formCommonColors.muted}>
+              {body}
+            </Paragraph>
+          </Dialog.Description>
+          <XStack {...knobProps.gap} justifyContent="flex-end" alignItems="center" flexWrap="wrap">
+            <Button
+              outlined
+              data-mp-savebar-keep=""
+              onPress={() => {
+                onKeepEditing();
+              }}
+            >
+              {t("Keep editing")}
+            </Button>
+            <Button
+              error
+              actionRole="primary"
+              data-mp-savebar-discard-confirm=""
+              onPress={() => {
+                onDiscard();
+              }}
+            >
+              {t("Discard changes")}
+            </Button>
+          </XStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}

package/src/ContextualSaveBar/clientKnownIdentity.ts

@@ -0,0 +1,15 @@
+/**
+ * LC-64 CLIENT-KNOWN-IDENTITY — post-mutation navigation rides an identifier
+ * the client already owns. A missing / blank / literal `"undefined"` value
+ * is an honest refuse, never interpolated into a route.
+ */
+export function clientKnownIdentity(id: unknown): string {
+  if (typeof id !== "string") {
+    throw new Error("LC-64: post-mutation navigation requires a client-known identity");
+  }
+  const trimmed = id.trim();
+  if (!trimmed || trimmed === "undefined") {
+    throw new Error("LC-64: post-mutation navigation requires a client-known identity");
+  }
+  return trimmed;
+}

package/src/ContextualSaveBar/commitImmediateField.ts

@@ -0,0 +1,31 @@
+import type { AnyFormApi } from "../types";
+
+type FormDefaults = Record<string, unknown>;
+
+/**
+ * DG-ACT-06 / DG-CTRL-02 — a Switch bound to an immediate effect commits on
+ * flip. Updating that field's default so `isDirty` stays false means the
+ * page-level bar never rises, and a later Discard cannot revert the flip.
+ */
+export function commitImmediateField(form: AnyFormApi, name: string, value: unknown): void {
+  const options = form.options as { defaultValues?: FormDefaults };
+  const nextDefaults: FormDefaults = { ...options.defaultValues, [name]: value };
+  const update = (form as { update?: (opts: { defaultValues: FormDefaults }) => void }).update;
+  if (typeof update === "function") {
+    update({ defaultValues: nextDefaults });
+  } else {
+    options.defaultValues = nextDefaults;
+  }
+  const setFieldMeta = (
+    form as {
+      setFieldMeta?: (field: string, updater: (prev: Record<string, unknown>) => unknown) => void;
+    }
+  ).setFieldMeta;
+  if (typeof setFieldMeta === "function") {
+    setFieldMeta(name, (prev) => ({
+      ...prev,
+      isDirty: false,
+      isDefaultValue: true,
+    }));
+  }
+}

package/src/ContextualSaveBar/index.tsx

@@ -0,0 +1,327 @@
+import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplatform.one/theme";
+import { Store, useStore } from "@tanstack/react-store";
+import { useCallback, useEffect, useState } from "react";
+import { AnimatePresence, Text, XStack, isWeb } from "tamagui";
+import { Button } from "../Button";
+import { collectFormFieldErrors } from "../ErrorSummary";
+import { useFormContext } from "../Form";
+import { Spinner } from "../Spinner";
+import { formCommonColors } from "../shared/colorRamps";
+import { t } from "../shared/t";
+import { getElevationWrapperProps } from "../shared/utils";
+import { zIndex } from "../shared/zIndex";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+import {
+  useUnsavedChangesGuard,
+  type NavigationBlocker,
+  type UseNavigationBlocker,
+} from "./useUnsavedChangesGuard";
+
+export { clientKnownIdentity } from "./clientKnownIdentity";
+export { commitImmediateField } from "./commitImmediateField";
+export type { NavigationBlocker, UseNavigationBlocker } from "./useUnsavedChangesGuard";
+
+export interface ContextualSaveBarProps {
+  /**
+   * Render the bar even when the form is clean — test / specimen only.
+   * Production presence is `form.state.isDirty`.
+   */
+  forceVisible?: boolean;
+  /**
+   * DG-ACT-05 / LC-30 — IGNORED. Discard never renders disabled.
+   */
+  discardDisabled?: boolean;
+  /** Host `useBlocker` (TanStack / one). Seam hosts may pass a no-op. */
+  useBlocker?: UseNavigationBlocker;
+  onSaved?: (values: Record<string, unknown>) => void;
+  /**
+   * DG-CTRL-02 — fired after a Switch auto-commit in declarative mode.
+   * Form reads this; the bar itself does not.
+   */
+  onAutoCommit?: (name: string, value: unknown) => void;
+  /** Override the in-bar status line. */
+  message?: string;
+}
+
+type FieldMetaMap = Record<string, { isDirty?: boolean; errors?: unknown[] } | undefined>;
+
+function dirtyCount(fieldMeta: FieldMetaMap): number {
+  return Object.values(fieldMeta).filter((meta) => meta?.isDirty).length;
+}
+
+function fieldErrorCount(fieldMeta: FieldMetaMap): number {
+  return collectFormFieldErrors(fieldMeta).length;
+}
+
+type SaveBarStoreState = {
+  isDirty?: boolean;
+  isSubmitting?: boolean;
+  fieldMeta?: FieldMetaMap;
+  submissionAttempts?: number;
+  values?: Record<string, unknown>;
+};
+
+function useSaveBarSnapshot() {
+  const form = useFormContext();
+  return useStore(
+    form.store as unknown as Store<SaveBarStoreState>,
+    (state: SaveBarStoreState) => ({
+      isDirty: Boolean(state.isDirty),
+      isSubmitting: Boolean(state.isSubmitting),
+      fieldMeta: state.fieldMeta ?? {},
+      submissionAttempts: state.submissionAttempts ?? 0,
+      values: (state.values ?? {}) as Record<string, unknown>,
+    }),
+  );
+}
+
+function statusCopy(args: {
+  isSubmitting: boolean;
+  saveError: string | null;
+  errorCount: number;
+  submissionAttempts: number;
+  dirty: number;
+  override?: string;
+}): { text: string; failed: boolean; qualifier?: string } {
+  if (args.override) return { text: args.override, failed: false };
+  if (args.isSubmitting) return { text: t("Saving…"), failed: false };
+  if (args.saveError) {
+    return {
+      text: t("Couldn't save — {{error}}. Edits are kept on this page.", {
+        error: args.saveError,
+      }),
+      failed: true,
+    };
+  }
+  if (args.submissionAttempts >= 1 && args.errorCount > 0) {
+    return {
+      text: t("Can't save yet · {{count}} fields need attention", {
+        count: args.errorCount,
+      }),
+      failed: true,
+    };
+  }
+  const qualifier =
+    args.dirty > 0
+      ? args.dirty === 1
+        ? t("· 1 field")
+        : t("· {{count}} fields", { count: args.dirty })
+      : undefined;
+  return { text: t("Unsaved changes"), failed: false, qualifier };
+}
+
+function barRadius(knobProps: KnobProps) {
+  const top = knobProps.containerRadius.borderRadius;
+  return {
+    borderTopLeftRadius: top,
+    borderTopRightRadius: top,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  };
+}
+
+export function ContextualSaveBar({
+  forceVisible = false,
+  discardDisabled = false,
+  useBlocker,
+  onSaved,
+  message,
+}: ContextualSaveBarProps) {
+  const form = useFormContext();
+  const { knobProps, elevation } = useResolvedKnobs();
+  const snap = useSaveBarSnapshot();
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [discardOpen, setDiscardOpen] = useState(false);
+
+  const stagedDirty = dirtyCount(snap.fieldMeta);
+  const visible = forceVisible || snap.isDirty || snap.isSubmitting || Boolean(saveError);
+  const blocker = useUnsavedChangesGuard(snap.isDirty, useBlocker);
+  const guardOpen = discardOpen || blocker.state === "blocked";
+
+  useEffect(() => {
+    warnCancelDisabled({ disabled: discardDisabled, component: "ContextualSaveBar" });
+  }, [discardDisabled]);
+
+  const restoreFocusToForm = useCallback(() => {
+    if (!isWeb || typeof document === "undefined") return;
+    const bar = document.querySelector("[data-mp-contextual-savebar]");
+    const active = document.activeElement;
+    if (!bar || !active || !bar.contains(active)) return;
+    const formEl = document.querySelector<HTMLElement>("[data-mpo-form-layout]");
+    formEl?.focus?.();
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (snap.isSubmitting) return;
+    setSaveError(null);
+    try {
+      await form.handleSubmit();
+      const errors = fieldErrorCount((form.store.state.fieldMeta ?? {}) as FieldMetaMap);
+      if (errors > 0) return;
+      const values = form.store.state.values as Record<string, unknown>;
+      const update = (
+        form as { update?: (opts: { defaultValues: Record<string, unknown> }) => void }
+      ).update;
+      if (typeof update === "function") {
+        update({ defaultValues: values });
+      }
+      form.reset(values);
+      onSaved?.(values);
+      restoreFocusToForm();
+    } catch (error) {
+      const text = error instanceof Error ? error.message : String(error);
+      setSaveError(text || "network unreachable");
+    }
+  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting]);
+
+  const handleDiscardCommit = useCallback(() => {
+    setSaveError(null);
+    form.reset();
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.proceed();
+    restoreFocusToForm();
+  }, [blocker, form, restoreFocusToForm]);
+
+  const handleKeepEditing = useCallback(() => {
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.reset();
+  }, [blocker]);
+
+  useEffect(() => {
+    if (!visible || typeof document === "undefined") return;
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        void handleSave();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [handleSave, visible]);
+
+  const copy = statusCopy({
+    isSubmitting: snap.isSubmitting,
+    saveError,
+    errorCount: fieldErrorCount(snap.fieldMeta),
+    submissionAttempts: snap.submissionAttempts,
+    dirty: stagedDirty,
+    override: message,
+  });
+
+  const padX = knobProps.panelPadding.padding;
+  const borderWidth = knobProps.borderRadius.borderWidth;
+  const elevationProps = getElevationWrapperProps(knobProps, elevation);
+  const { className: smoothClass, ...smoothRest } =
+    knobProps.containerRadius as KnobProps["containerRadius"] & {
+      className?: string;
+    };
+  const transition = knobProps.transition;
+
+  return (
+    <>
+      <AnimatePresence>
+        {visible ? (
+          <XStack
+            key="contextual-savebar"
+            data-mp-contextual-savebar=""
+            data-mp-savebar-dock="bottom"
+            role="region"
+            aria-label={t("Unsaved changes")}
+            position="sticky"
+            bottom={0}
+            width="100%"
+            zIndex={zIndex.sheet}
+            alignItems="center"
+            paddingTop="$2.5"
+            paddingHorizontal={padX as never}
+            paddingBottom="$2.5"
+            backgroundColor="$color1"
+            borderStyle="solid"
+            borderTopWidth={borderWidth}
+            borderTopColor="$borderColor"
+            borderLeftWidth={0}
+            borderRightWidth={0}
+            borderBottomWidth={0}
+            {...smoothRest}
+            {...barRadius(knobProps)}
+            className={smoothClass}
+            {...knobProps.gap}
+            transition={transition}
+            enterStyle={transition ? { y: 12, opacity: 0 } : undefined}
+            exitStyle={transition ? { y: 12, opacity: 0 } : undefined}
+            {...elevationProps}
+            style={{
+              ...(isWeb
+                ? { paddingBottom: "calc(10px + env(safe-area-inset-bottom, 0px))" }
+                : undefined),
+              ...(elevationProps.style as object | undefined),
+            }}
+          >
+            <XStack flex={1} minWidth={0} alignItems="baseline" gap="$2">
+              <Text
+                role="status"
+                {...knobProps.body}
+                fontSize="$4"
+                lineHeight="$4"
+                color={copy.failed ? formCommonColors.error : "$color"}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {copy.text}
+              </Text>
+              {copy.qualifier ? (
+                <Text
+                  {...knobProps.body}
+                  fontSize="$4"
+                  lineHeight="$4"
+                  color={knobProps.textAccentColor}
+                  flexShrink={0}
+                >
+                  {copy.qualifier}
+                </Text>
+              ) : null}
+            </XStack>
+            <XStack
+              data-mp-savebar-actions=""
+              alignItems="center"
+              {...knobProps.gap}
+              marginLeft="auto"
+              flexShrink={0}
+            >
+              <Button
+                outlined
+                size="$4"
+                data-mp-savebar-discard=""
+                data-mp-cancel-disabled-ignored={discardDisabled ? "true" : undefined}
+                onPress={() => setDiscardOpen(true)}
+              >
+                {t("Discard")}
+              </Button>
+              <Button
+                theme="active"
+                outlined={knobProps.outlined}
+                actionRole="primary"
+                size="$4"
+                icon={snap.isSubmitting ? <Spinner size="small" /> : undefined}
+                disabled={snap.isSubmitting || undefined}
+                disabledReason={snap.isSubmitting ? t("Saving") : undefined}
+                data-mp-savebar-save=""
+                onPress={() => {
+                  void handleSave();
+                }}
+              >
+                {t("Save")}
+              </Button>
+            </XStack>
+          </XStack>
+        ) : null}
+      </AnimatePresence>
+      <UnsavedChangesDialog
+        open={guardOpen}
+        fieldCount={Math.max(stagedDirty, 1)}
+        onKeepEditing={handleKeepEditing}
+        onDiscard={handleDiscardCommit}
+      />
+    </>
+  );
+}

package/src/ContextualSaveBar/useUnsavedChangesGuard.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+
+export interface NavigationBlocker {
+  state: "unblocked" | "blocked" | "proceeding";
+  proceed: () => void;
+  reset: () => void;
+}
+
+export type UseNavigationBlocker = (shouldBlock: boolean) => NavigationBlocker;
+
+const idleBlocker: NavigationBlocker = {
+  state: "unblocked",
+  proceed: () => {},
+  reset: () => {},
+};
+
+/** Native `beforeunload` plus an optional TanStack / host `useBlocker`. */
+export function useUnsavedChangesGuard(
+  isDirty: boolean,
+  useBlocker: UseNavigationBlocker | undefined,
+): NavigationBlocker {
+  const blocker = useBlocker?.(isDirty) ?? idleBlocker;
+
+  useEffect(() => {
+    if (!isDirty) return;
+    if (typeof window === "undefined" || typeof window.addEventListener !== "function") {
+      return;
+    }
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty]);
+
+  return blocker;
+}

package/src/ControlGroup/ControlGroup.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "../Button";
+import { ControlGroup } from "./index";
+
+afterEach(cleanup);
+
+function group(container: HTMLElement) {
+  return container.querySelector("[data-mp-control-group]") as HTMLElement | null;
+}
+
+function radiusClasses(el: HTMLElement | null): string[] {
+  return String(el?.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+describe("ControlGroup", () => {
+  it("keeps inner seams square while the outer frame rides the radius knob (R-OUTER)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <ControlGroup>
+          <Button>First</Button>
+          <Button>Last</Button>
+        </ControlGroup>
+      </Preset>,
+    );
+    expect(radiusClasses(group(result.container))).toEqual(["_btlr-t-radius-12"]);
+    const inners = result.container.querySelectorAll("[data-mp-group-position]");
+    expect(inners.length).toBe(2);
+    for (const node of inners) {
+      expect((node as HTMLElement).getAttribute("data-mp-inner-radius")).toBe("0");
+    }
+  });
+
+  it("border width follows the knob, not a baked 1px edge", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderWidth: "none" }}>
+        <ControlGroup>
+          <Button>A</Button>
+          <Button>B</Button>
+        </ControlGroup>
+      </Preset>,
+    );
+    const noneWidth = getComputedStyle(group(none.container)!).borderTopWidth;
+    cleanup();
+
+    const large = renderWithProviders(
+      <Preset overrides={{ borderWidth: "large" }}>
+        <ControlGroup>
+          <Button>A</Button>
+          <Button>B</Button>
+        </ControlGroup>
+      </Preset>,
+    );
+    const largeWidth = getComputedStyle(group(large.container)!).borderTopWidth;
+    expect(parseFloat(noneWidth || "0")).toBe(0);
+    expect(parseFloat(largeWidth || "0")).toBeGreaterThan(parseFloat(noneWidth || "0"));
+  });
+
+  it("addon label is weight 400 (R7 / §6.1)", () => {
+    const result = renderWithProviders(
+      <ControlGroup>
+        <ControlGroup.Addon>@</ControlGroup.Addon>
+        <Button>Go</Button>
+      </ControlGroup>,
+    );
+    const addon = (result.container.querySelector("[data-mp-control-group-addon]") ||
+      result.findTextElement("@")) as HTMLElement | null;
+    expect(addon).toBeTruthy();
+    const text = (
+      addon?.matches("[data-mp-control-group-addon]") ? addon.querySelector("*") : addon
+    ) as HTMLElement | null;
+    const weight =
+      text?.style.fontWeight ||
+      (text ? getComputedStyle(text).fontWeight : "") ||
+      (text?.className.match(/fw-400|fow-400|font-weight-400/) ? "400" : "");
+    expect(["400", "normal"]).toContain(String(weight));
+  });
+});

package/src/ControlGroup/index.tsx

@@ -17,7 +17,7 @@ import {
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { FocusContext, getInputFrameTransitionProps, InputContext } from "../InputParts";
-import { formCommonColors, formInputColors } from "../shared/colorRamps";
+import { formCommonColors, formControlColors, formInputColors } from "../shared/colorRamps";
 import { getElevationWrapperProps } from "../shared/utils";
 import { ControlGroupCtx } from "../shared/groupContext";
 import { useIsInTableCell } from "../shared/tableCellContext";
@@ -32,8 +32,9 @@ const ControlGroupFrame = styled(View, {
   overflow: "hidden",
   minWidth: 0,
   flexWrap: "nowrap",
-  borderColor: formInputColors.border.base,
-  backgroundColor: formInputColors.background.base,
+  // Border width + color come from `inputSurface` / form ramps at the
+  // call site (R-OUTER). Do not bake a 1px edge or a size-token radius
+  // here — those fight the knobs and turn fused inners into pills.
 
   ...(isWeb ? { tabIndex: -1 } : { focusable: false }),
 
@@ -42,9 +43,8 @@ const ControlGroupFrame = styled(View, {
       ":number": {} as any,
     },
     size: {
-      "...size": (val: any, { tokens }: any) => ({
+      "...size": (val: any) => ({
         height: val,
-        borderRadius: (tokens.radius as any)[val],
       }),
     },
   } as const,
@@ -90,6 +90,7 @@ function ControlGroupAddonImpl({ children, ...props }: ControlGroupAddonProps) {
     typeof children === "string" || typeof children === "number" ? (
       <SizableText
         {...knobProps.label}
+        fontWeight="400"
         color={formCommonColors.muted}
         userSelect="none"
         numberOfLines={1}
@@ -101,11 +102,12 @@ function ControlGroupAddonImpl({ children, ...props }: ControlGroupAddonProps) {
     );
   return (
     <View
+      data-mp-control-group-addon="true"
       justifyContent="center"
       alignItems="center"
       alignSelf="stretch"
-      backgroundColor="$color4"
-      paddingHorizontal="$3"
+      backgroundColor={formControlColors.background}
+      {...knobProps.control}
       borderRadius={0}
       flexGrow={0}
       flexShrink={0}
@@ -165,7 +167,13 @@ function ControlGroupImpl({ children, orientation = "horizontal", ...props }: Co
         : { flexGrow: 0, flexShrink: 0 };
       nodes.push(
         <GroupPositionContext.Provider key={child.key ?? index} value={position}>
-          <View {...flexProps} borderRadius={0} overflow="hidden" data-mp-group-position={position}>
+          <View
+            {...flexProps}
+            borderRadius={0}
+            overflow="hidden"
+            data-mp-group-position={position}
+            data-mp-inner-radius="0"
+          >
             {child}
           </View>
         </GroupPositionContext.Provider>,