@multiplatform.one/forms 7.47.0 → 7.47.2

package/src/elevationHookCount.spec.tsx

@@ -0,0 +1,145 @@
+/**
+ * FZ-7865: switching the elevation knob at runtime must not change a
+ * component's hook count (React #310).
+ *
+ * Tamagui runs a part's animation hooks (`usePresence`, the driver's
+ * `useAnimations`) when the `transition` KEY is in its props, and keeps them
+ * once on. `getElevationWrapperProps` returned `{}` at none/small and a
+ * fragment carrying `transition` at medium/large, so a part spreading it
+ * called more hooks after the switch and React threw "Rendered more hooks than
+ * during the previous render". Progress made it worse: its flat branch was a
+ * second `<View>` with no spread at all, the same element type in the same
+ * slot, so React reused the fiber and hit the new hooks.
+ *
+ * The sequence walks none → small → medium → large → none → large on ONE
+ * mounted tree, the way a knob, preset or theme switch does.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { type Elevation, Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { View } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./Button";
+import { ContextualSaveBar } from "./ContextualSaveBar";
+import { ControlGroup } from "./ControlGroup";
+import { Checkbox } from "./fields/Checkbox";
+import { Input } from "./fields/Input";
+import { Progress } from "./fields/Progress";
+import { RadioGroup } from "./fields/RadioGroup";
+import { Slider } from "./fields/Slider";
+import { Switch } from "./fields/Switch";
+import { ToggleGroup } from "./fields/ToggleGroup";
+import { Form } from "./Form";
+import { getElevationWrapperProps } from "./shared/utils";
+
+afterEach(cleanup);
+
+const sequence: Elevation[] = ["none", "small", "medium", "large", "none", "large"];
+const options = [
+  { label: "One", value: "one" },
+  { label: "Two", value: "two" },
+];
+
+/** One raw part spreading the shared fragment, as every caller does. */
+function ElevatedPart() {
+  const { knobProps, elevation } = useResolvedKnobs({});
+  return <View testID="elevated-part" {...getElevationWrapperProps(knobProps, elevation)} />;
+}
+
+const cases: Array<[string, () => ReactElement]> = [
+  ["getElevationWrapperProps on a View", () => <ElevatedPart />],
+  ["Progress", () => <Progress label="Done" value={40} />],
+  ["Progress (intent)", () => <Progress label="Done" value={40} intent="success" />],
+  ["Checkbox", () => <Checkbox label="Agree" />],
+  ["RadioGroup", () => <RadioGroup label="Pick" options={options} />],
+  ["Switch", () => <Switch label="On" />],
+  ["Slider", () => <Slider label="Level" defaultValue={[30]} />],
+  ["ToggleGroup", () => <ToggleGroup label="Pick" options={options} />],
+  ["Input", () => <Input label="Name" />],
+  ["Button", () => <Button>Save</Button>],
+  [
+    "ControlGroup",
+    () => (
+      <ControlGroup>
+        <Button>One</Button>
+        <Button>Two</Button>
+      </ControlGroup>
+    ),
+  ],
+  [
+    "ContextualSaveBar",
+    () => (
+      <Form>
+        <ContextualSaveBar forceVisible />
+      </Form>
+    ),
+  ],
+];
+
+function hookCountErrors(calls: unknown[][]): string[] {
+  return calls
+    .map((args) => args.map(String).join(" "))
+    .filter((line) => /#310|more hooks|fewer hooks|order of Hooks/i.test(line));
+}
+
+describe("FZ-7865 elevation switches keep every hook in place", () => {
+  it.each(cases)("%s re-renders across every elevation without React #310", (_name, ui) => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const uncaught: string[] = [];
+    const onError = (event: ErrorEvent) => uncaught.push(String(event.error?.message ?? event));
+    window.addEventListener("error", onError);
+    try {
+      const view = renderWithProviders(
+        <Preset overrides={{ elevation: sequence[0] }}>{ui()}</Preset>,
+      );
+      for (const elevation of sequence.slice(1)) {
+        view.rerender(<Preset overrides={{ elevation }}>{ui()}</Preset>);
+        expect(view.container.childElementCount, `tree unmounted at ${elevation}`).toBe(1);
+      }
+      expect([...hookCountErrors(spy.mock.calls), ...hookCountErrors([uncaught])]).toEqual([]);
+    } finally {
+      window.removeEventListener("error", onError);
+      spy.mockRestore();
+    }
+  });
+
+  // The compiler flattens a static `<View>` to a plain element in this suite,
+  // which hides the fiber reuse that crashes Storybook and native. The track
+  // wrapper keeping its node across switches is the same contract seen here:
+  // one element whose props change, never a second element swapped in.
+  it("Progress keeps one track wrapper node across every elevation", () => {
+    const view = renderWithProviders(
+      <Preset overrides={{ elevation: sequence[0] }}>
+        <Progress label="Done" value={40} />
+      </Preset>,
+    );
+    // progressbar → its Progress sub-theme span → the track wrapper.
+    const wrapper = () =>
+      view.container.querySelector("[role='progressbar']")?.parentElement?.parentElement;
+    const first = wrapper();
+    expect(first).toBeTruthy();
+    for (const elevation of sequence.slice(1)) {
+      view.rerender(
+        <Preset overrides={{ elevation }}>
+          <Progress label="Done" value={40} />
+        </Preset>,
+      );
+      expect(wrapper(), `track wrapper replaced at ${elevation}`).toBe(first);
+    }
+  });
+});
+
+describe("getElevationWrapperProps holds its keys at every elevation", () => {
+  it("returns `transition` whether the part is flat or raised", () => {
+    const motion = { control: { transition: "quick", animateOnly: ["opacity"] } };
+    const flat = getElevationWrapperProps({ motion, elevation: undefined } as any, {} as any);
+    const raised = getElevationWrapperProps(
+      { motion, elevation: 4, elevationChrome: { elevation: 4 } } as any,
+      {} as any,
+    );
+    expect("transition" in flat).toBe("transition" in raised);
+    expect(flat.elevation).toBeUndefined();
+    expect(raised.elevation).toBe(4);
+  });
+});

package/src/fields/Progress/index.tsx

@@ -218,20 +218,20 @@ function ProgressTrack({
     </ProgressFrame>
   );
 
-  const bar = elevationWrapperProps.elevation ? (
+  // One wrapper at every elevation (FZ-7865): two `<View>` branches share a
+  // fiber, so the flat one meeting the raised one's motion keys threw #310.
+  const bar = (
     <View
       {...elevationWrapperProps}
-      borderRadius={knobProps.borderRadius.borderRadius}
+      borderRadius={
+        elevationWrapperProps.elevation ? knobProps.borderRadius.borderRadius : undefined
+      }
       flex={1}
       minWidth={0}
       width="100%"
     >
       {progressElement}
     </View>
-  ) : (
-    <View flex={1} minWidth={0} width="100%">
-      {progressElement}
-    </View>
   );
 
   return (

package/src/shared/utils.ts

@@ -96,11 +96,21 @@ export function getOTPCellRadius(radiusToken: string | undefined, heightPx: numb
  * Tamagui's create* HOC chains (createCheckbox, createSwitch, etc.) swallow
  * the elevation variant. Spread the complete `elevationChrome` fragment from
  * resolveKnobs (LC-85). Surface sub-themes own the fill.
+ *
+ * The motion keys come back at EVERY elevation, flat included (FZ-7865).
+ * Tamagui runs its animation hooks when `transition` is among a part's props,
+ * so a fragment that gains the key only once raised changes the hook count
+ * when the knob, a preset or a theme switches live (React #310).
  */
 export function getElevationWrapperProps(
   knobProps: KnobProps,
   elevationRecipe: KnobRecipe<ElevationStateProps>,
 ): Record<string, any> {
+  const motion = transitionProps(knobProps.motion.control, [
+    "boxShadow",
+    "shadowOpacity",
+    "shadowRadius",
+  ]);
   const elevation = knobProps.elevation;
   if (
     !elevation &&
@@ -108,7 +118,7 @@ export function getElevationWrapperProps(
     !elevationRecipe.pressKnobProps?.elevation &&
     !elevationRecipe.focusVisibleKnobProps?.elevation
   ) {
-    return {};
+    return motion;
   }
   const props: Record<string, any> = {
     overflow: "visible" as const,
@@ -123,10 +133,7 @@ export function getElevationWrapperProps(
   if (elevationRecipe.focusVisibleKnobProps) {
     props.focusVisibleStyle = elevationRecipe.focusVisibleKnobProps;
   }
-  Object.assign(
-    props,
-    transitionProps(knobProps.motion.control, ["boxShadow", "shadowOpacity", "shadowRadius"]),
-  );
+  Object.assign(props, motion);
   return props;
 }
 

package/types/ContextualSaveBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ContextualSaveBar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAExF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyFD,wBAAgB,iBAAiB,CAAC,EAChC,YAAoB,EACpB,eAAuB,EACvB,UAAU,EACV,OAAO,EACP,OAAO,GACR,EAAE,sBAAsB,2CA8MxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ContextualSaveBar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAExF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyFD,wBAAgB,iBAAiB,CAAC,EAChC,YAAoB,EACpB,eAAuB,EACvB,UAAU,EACV,OAAO,EACP,OAAO,GACR,EAAE,sBAAsB,2CAkNxB"}

package/types/shared/utils.d.ts

@@ -33,6 +33,11 @@ export declare function getOTPCellRadius(radiusToken: string | undefined, height
  * Tamagui's create* HOC chains (createCheckbox, createSwitch, etc.) swallow
  * the elevation variant. Spread the complete `elevationChrome` fragment from
  * resolveKnobs (LC-85). Surface sub-themes own the fill.
+ *
+ * The motion keys come back at EVERY elevation, flat included (FZ-7865).
+ * Tamagui runs its animation hooks when `transition` is among a part's props,
+ * so a fragment that gains the key only once raised changes the hook count
+ * when the knob, a preset or a theme switches live (React #310).
  */
 export declare function getElevationWrapperProps(knobProps: KnobProps, elevationRecipe: KnobRecipe<ElevationStateProps>): Record<string, any>;
 export declare function useFormField(props: {

package/types/shared/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/shared/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/shared/utils.ts"],"names":[],"mappings":"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"}