@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2851031376 → 16.0.0-alpha.3029086545

package/Components/CellRendererResolver/index.ts

@@ -92,7 +92,7 @@ export function CellRendererResolver({
     component,
     styles,
     cellStyles,
-    cellOptions,
+    cellOptions: { ...cellOptions, component },
     ...cellOptions, // fallback for existing plugins
   });
 }

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/placement.test.ts

@@ -6,28 +6,54 @@ import {
 describe("ActionButtonsCore placement", () => {
   const buttons = { type: "View", name: "buttons" };
 
-  const above_labels = [
-    { name: "above_label_1" },
-    { name: "above_label_2" },
-    { name: "above_label_3" },
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "label_2" } },
+    { name: "text_label_3", element: { type: "View", id: "label_3" } },
   ];
 
-  const below_labels = [
-    { name: "below_label_1" },
-    { name: "below_label_2" },
-    { name: "below_label_3" },
-  ];
+  const labels = slots.map((slot) => slot.element);
 
   it("inserts buttons after the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
-    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+      insertBetweenLabels({ position: "below_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
 
   it("inserts buttons before the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
-    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+      insertBetweenLabels({ position: "above_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("inserts buttons after the matching label on a plain name match", () => {
+    expect(
+      insertBetweenLabels({ position: "text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "text_label_1", element: { id: "label_1" } },
+      { name: "text_label_2", element: null },
+      { name: "text_label_3", element: { id: "label_3" } },
+    ];
+
+    expect(
+      insertBetweenLabels(
+        { position: "above_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "below_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
   });
 
   it("prepends buttons only when on_top is allowed", () => {
@@ -35,17 +61,17 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "on_top", allowOnTop: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([buttons, ...below_labels]);
+    ).toEqual([buttons, ...labels]);
 
     expect(
       insertBetweenLabels(
         { position: "on_top", allowOnTop: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   it("appends buttons when appendWhenMissing is enabled", () => {
@@ -53,9 +79,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([...below_labels, buttons]);
+    ).toEqual([...labels, buttons]);
   });
 
   it("returns labels unchanged when appendWhenMissing is disabled", () => {
@@ -63,9 +89,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   const labelContainers = [

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -17,6 +17,11 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -100,8 +105,14 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  labels: Label[] = []
+  slots: Slot[] = []
 ) => {
+  // Slots are defined by the canonical label list, so an empty (null) label
+  // still keeps its position — buttons placed above/below it survive.
+  const labels = slots
+    .map((slot) => slot.element)
+    .filter((element) => element != null);
+
   if (buttons == null) {
     return labels;
   }
@@ -110,14 +121,31 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  const labelsWithButtons = withButtons(position, buttons, labels);
-  const inserted = labelsWithButtons.length !== labels.length;
+  let inserted = false;
+  const result: unknown[] = [];
+
+  for (const { name, element } of slots) {
+    if (position === `above_${name}`) {
+      result.push(buttons);
+      inserted = true;
+    }
+
+    if (element != null) {
+      result.push(element);
+    }
+
+    // Insert after on `below_*` or a plain label-name match.
+    if (position === `below_${name}` || position === name) {
+      result.push(buttons);
+      inserted = true;
+    }
+  }
 
-  if (!inserted && appendWhenMissing) {
-    return [...labels, buttons];
+  if (!inserted) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
   }
 
-  return inserted ? labelsWithButtons : [...labels];
+  return result;
 };
 
 export const insertBetweenLabelContainers = (