@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/fields/Password/Password.spec.tsx

@@ -0,0 +1,119 @@
+import { fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { Password } from "./index";
+
+function revealOf(container: HTMLElement) {
+  return container.querySelector(
+    "[aria-label='Show password'], [aria-label='Hide password']",
+  ) as HTMLElement | null;
+}
+
+describe("Password reveal", () => {
+  it("toggle is a real tab stop and rings its own glyph, not the 44px box", () => {
+    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    const reveal = revealOf(result.container);
+    if (!input || !reveal) throw new Error("input or reveal not found");
+
+    expect(input.getAttribute("type")).toBe("password");
+    expect(reveal.getAttribute("tabindex")).toBe("0");
+    expect(reveal.className).toMatch(/mp-chip-dismiss/);
+    expect(reveal.className).not.toMatch(/mp-chip-dismiss-ring/);
+    const ring = reveal.querySelector(".mp-chip-dismiss-ring");
+    expect(ring).not.toBeNull();
+    expect(reveal.contains(ring)).toBe(true);
+
+    const extraStops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
+      (el) => el !== input && el !== reveal,
+    );
+    expect(extraStops).toHaveLength(0);
+    expect(result.container.querySelector(".mp-composite-ring")).toBeTruthy();
+  });
+
+  it("toggling does not move the caret or change the control geometry", () => {
+    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    const reveal = revealOf(result.container);
+    if (!input || !box || !reveal) throw new Error("anatomy missing");
+
+    const heightBefore = box.getAttribute("data-visual-height");
+    const endCapBefore = reveal.getAttribute("data-end-cap");
+    input.focus();
+    input.setSelectionRange(3, 3);
+    expect(input.selectionStart).toBe(3);
+
+    fireEvent.click(reveal);
+
+    expect(input.getAttribute("type")).toBe("text");
+    expect(input.selectionStart).toBe(3);
+    expect(input.selectionEnd).toBe(3);
+    expect(document.activeElement).toBe(input);
+    expect(box.getAttribute("data-visual-height")).toBe(heightBefore);
+    expect(revealOf(result.container)?.getAttribute("data-end-cap")).toBe(endCapBefore);
+  });
+
+  it("default size stays 44 tall with the toggle present (not Bento's 46)", () => {
+    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
+    const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    const reveal = revealOf(result.container);
+    if (!box || !reveal) throw new Error("box or reveal not found");
+    expect(box.getAttribute("data-visual-height")).toBe("44");
+    expect(reveal.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-visual-height")).not.toBe("46");
+  });
+
+  it("reveal state is announced and resets to masked when the field loses value", () => {
+    const onChange = vi.fn();
+    function Harness() {
+      const [value, setValue] = useState("hunter2");
+      return (
+        <Password
+          label="Secret"
+          value={value}
+          onChange={(next) => {
+            onChange(next);
+            setValue(next);
+          }}
+        />
+      );
+    }
+    const result = renderWithProviders(<Harness />);
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    const reveal = revealOf(result.container);
+    if (!input || !reveal) throw new Error("input or reveal not found");
+
+    expect(reveal.getAttribute("aria-label")).toBe("Show password");
+    expect(reveal.getAttribute("aria-pressed")).toBe("false");
+
+    fireEvent.click(reveal);
+    const shown = revealOf(result.container);
+    if (!shown) throw new Error("reveal missing after toggle");
+    expect(input.getAttribute("type")).toBe("text");
+    expect(shown.getAttribute("aria-label")).toBe("Hide password");
+    expect(shown.getAttribute("aria-pressed")).toBe("true");
+
+    fireEvent.change(input, { target: { value: "" } });
+    expect(onChange).toHaveBeenCalledWith("");
+    expect(input.getAttribute("type")).toBe("password");
+    const reset = revealOf(result.container);
+    expect(reset?.getAttribute("aria-label")).toBe("Show password");
+    expect(reset?.getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("reveal renders at every size step from the size recipe", () => {
+    for (const token of SIZE_RECIPE_TOKENS) {
+      if (token === "$true") continue;
+      const height = sizeRecipeForToken(token).height;
+      const result = renderWithProviders(<Password label="Secret" value="secret" size={token} />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const reveal = revealOf(result.container);
+      if (!box || !reveal) throw new Error(`anatomy missing at ${token}`);
+      expect(box.getAttribute("data-visual-height"), token).toBe(String(height));
+      expect(reveal.getAttribute("data-end-cap"), token).toBe(String(height));
+    }
+  });
+});

package/src/fields/Password/Password.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Password, type PasswordProps } from ".";
 
 export default {
@@ -77,3 +80,58 @@ ContractProbe.args = {
   value: "hunter2",
   placeholder: "Enter password",
 } as Partial<StoryProps>;
+
+interface PasswordCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const passwordCellRows: PasswordCellRow[] = [
+  { id: "1", label: "Alpha", value: "hunter2" },
+  { id: "2", label: "Beta", value: "correct-horse" },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const passwordCellColumns: DataTableColumn<PasswordCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Password",
+    ...fieldtypeToTableField("Password"),
+  } as DataTableColumn<PasswordCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(passwordCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={passwordCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as PasswordCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Password cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Password") — masked in-cell input. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Password inside a table cell: the registry maps the fieldtype to a masked in-cell input (secureTextEntry). Three rows of mock DocType data; edits commit through onDataChange.",
+    },
+  },
+};

package/src/fields/Password/index.tsx

@@ -1,6 +1,37 @@
+/**
+ * Password — masked Data with a reveal in the end-cap.
+ *
+ * Bento ships no password field (0 type=password, 0 reveal toggles across
+ * 14 inputs, measured 2026-08-28, bento-pickers-measured.md §6.2). The
+ * toggle is PROPOSED. Bento's right adornment is an inert 16.8px svg
+ * inside a 46-tall / radius-5 / #f7f7f7 frame; ours is a real Input.Button
+ * tab stop. Frame stays measured mpo 44/9 on $color2 (chain step 1).
+ *
+ * Reveal uses Input.Button `glyphRing`: chip-dismiss class, 2px offset 0
+ * on the glyph, not the 44px hit box (LC-71). Size comes from the
+ * generated end-cap recipe, not a hardcoded square.
+ */
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
-import { Input as FormsInput } from "@multiplatform.one/forms";
+import {
+  Field,
+  FieldLayout,
+  Input as FormsInput,
+  Skeleton,
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "@multiplatform.one/forms";
+import {
+  MIN_PRESS_TARGET,
+  isTouchSurface,
+  pressTargetHitSlop,
+  sizeRecipeForToken,
+} from "@multiplatform.one/theme";
 import type { DeepKeys } from "@tanstack/form-core";
+import type { SizeTokens, TamaguiElement } from "tamagui";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
 
 export type PasswordProps<
@@ -36,8 +67,35 @@ export type PasswordProps<
     skeleton?: boolean;
     compact?: boolean;
     inputProps?: Record<string, unknown>;
+    size?: import("tamagui").SizeTokens;
   };
 
+const SHOW_PASSWORD = "Show password";
+const HIDE_PASSWORD = "Hide password";
+
+type Selection = { start: number; end: number };
+
+function nativeInput(node: unknown, id?: string): HTMLInputElement | null {
+  const fromRef = node as { selectionStart?: number; setSelectionRange?: unknown } | null;
+  if (fromRef && typeof fromRef.setSelectionRange === "function") {
+    return fromRef as HTMLInputElement;
+  }
+  if (typeof document === "undefined" || !id) return null;
+  return document.getElementById(id) as HTMLInputElement | null;
+}
+
+function readSelection(node: unknown, id?: string): Selection | null {
+  const el = nativeInput(node, id);
+  if (!el || typeof el.selectionStart !== "number") return null;
+  return { start: el.selectionStart, end: el.selectionEnd ?? el.selectionStart };
+}
+
+function restoreSelection(node: unknown, sel: Selection | null, id?: string) {
+  const el = nativeInput(node, id);
+  el?.focus();
+  if (sel) el?.setSelectionRange(sel.start, sel.end);
+}
+
 export function Password<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
@@ -55,32 +113,185 @@ export function Password<
     validators,
     disabled,
     value,
+    size: sizeFromProps,
     ...fieldProps
-  } = useProps(props) as PasswordProps<TData, TName> & Record<string, unknown>;
+  } = useProps(props) as PasswordProps<TData, TName> & { size?: unknown } & Record<string, unknown>;
+
+  const { resolvedForm, knobProps, id } = useFormField({
+    form,
+    id: fieldProps.id as string | undefined,
+    compact: fieldProps.compact,
+  });
+  const resolvedValidators = useResolvedValidators(
+    fieldProps.required,
+    validators,
+    fieldProps.label,
+    name,
+  );
+  const resolvedSize: SizeTokens = (sizeFromProps ??
+    fieldProps.size ??
+    knobProps.sizeToken) as SizeTokens;
+  const visualHeight = sizeRecipeForToken(String(resolvedSize), {
+    touch: isTouchSurface(),
+  }).height;
+  const belowFloor = visualHeight < MIN_PRESS_TARGET;
+
+  const isControlled = value !== undefined;
+  const [internalText, setInternalText] = useState(String(defaultValue ?? ""));
+  const text = isControlled ? String(value ?? "") : internalText;
+  const [revealed, setRevealed] = useState(false);
+  const inputRef = useRef<TamaguiElement>(null);
+  const pendingSelection = useRef<Selection | null>(null);
+
+  useEffect(() => {
+    if (!text) setRevealed(false);
+  }, [text]);
+
+  useLayoutEffect(() => {
+    if (!pendingSelection.current) return;
+    restoreSelection(inputRef.current, pendingSelection.current, id);
+    pendingSelection.current = null;
+  }, [id, revealed]);
+
+  const handleChangeText = useCallback(
+    (next: string) => {
+      if (disabled) return;
+      if (!isControlled) setInternalText(next);
+      onChange?.(next);
+    },
+    [disabled, isControlled, onChange],
+  );
+
+  const toggleReveal = useCallback(() => {
+    pendingSelection.current = readSelection(inputRef.current, id);
+    setRevealed((open) => !open);
+  }, [id]);
+
+  const boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
+  } as const;
+
+  const layoutBind = {
+    id,
+    label: fieldProps.label,
+    labelProps: fieldProps.labelProps,
+    helperText: fieldProps.helperText,
+    required: fieldProps.required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    placeholder,
+  };
+
+  const { type: _omitInputType, ...areaInputProps } = (inputProps ?? {}) as Record<string, unknown>;
+
+  const renderBox = (
+    inputValue: string | undefined,
+    handleChange?: (text: string) => void,
+    hasError?: boolean,
+  ) => (
+    <FormsInput.Box
+      {...boxContract}
+      disabled={disabled}
+      {...(hasError ? { theme: "red" } : undefined)}
+    >
+      <FormsInput.Area
+        ref={inputRef}
+        {...(areaInputProps as object)}
+        id={id}
+        value={inputValue ?? ""}
+        disabled={disabled}
+        readOnly={fieldProps.readOnly}
+        placeholder={placeholder}
+        type={revealed ? "text" : "password"}
+        secureTextEntry={!revealed}
+        textContentType="password"
+        autoComplete="current-password"
+        spellCheck={false}
+        aria-required={fieldProps.required || undefined}
+        aria-invalid={hasError || undefined}
+        aria-readonly={fieldProps.readOnly || undefined}
+        onChangeText={(next: string) => {
+          handleChange?.(next);
+          handleChangeText(next);
+        }}
+      />
+      <FormsInput.Button
+        glyphRing
+        size={resolvedSize}
+        disabled={disabled}
+        aria-label={revealed ? HIDE_PASSWORD : SHOW_PASSWORD}
+        aria-pressed={revealed}
+        aria-controls={id}
+        hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
+        onPress={disabled || fieldProps.readOnly ? undefined : toggleReveal}
+        onKeyDown={
+          ((e: KeyboardEvent) => {
+            if (disabled || fieldProps.readOnly) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              toggleReveal();
+            }
+          }) as unknown as () => void
+        }
+      >
+        <FormsInput.Icon aria-hidden>{revealed ? <EyeSlashIcon /> : <EyeIcon />}</FormsInput.Icon>
+      </FormsInput.Button>
+    </FormsInput.Box>
+  );
+
+  if (fieldProps.skeleton) {
+    return (
+      <FieldLayout {...layoutBind} error={fieldProps.error}>
+        <FormsInput size={resolvedSize}>
+          <Skeleton variant="rounded" width="100%" height={visualHeight} />
+        </FormsInput>
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout {...layoutBind} error={fieldProps.error} onBlur={onBlur}>
+        <FormsInput size={resolvedSize} error={fieldProps.error}>
+          {renderBox(text, undefined, !!fieldProps.error)}
+        </FormsInput>
+      </FieldLayout>
+    );
+  }
 
   return (
-    <FormsInput
+    <Field
+      form={resolvedForm}
       name={name}
-      form={form}
-      validators={validators}
       defaultValue={defaultValue as string}
-      label={fieldProps.label}
-      labelProps={fieldProps.labelProps}
-      error={fieldProps.error}
-      helperText={fieldProps.helperText}
-      readOnly={fieldProps.readOnly}
-      skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
-      required={fieldProps.required}
-      id={fieldProps.id}
-      size={fieldProps.size}
-      value={value}
-      onChangeText={onChange}
-      onBlur={onBlur}
-      placeholder={placeholder}
-      disabled={disabled}
-      secureTextEntry
-      inputProps={inputProps as any}
-    />
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, fieldProps.error);
+        return (
+          <FieldLayout
+            {...layoutBind}
+            error={resolvedError}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <FormsInput size={resolvedSize} error={resolvedError}>
+              {renderBox(
+                field.state.value as string,
+                (next) => field.handleChange(next as never),
+                !!resolvedError,
+              )}
+            </FormsInput>
+          </FieldLayout>
+        );
+      }}
+    </Field>
   );
 }

package/src/fields/Phone/Phone.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Phone, type PhoneFieldProps } from ".";
 
 export default {
@@ -66,3 +69,33 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Phone", value: "+15125551234" } as Partial<StoryProps>;
+
+interface PhoneRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<PhoneRow[]>([
+    { id: "1", label: "Alpha", value: "+15125551234" },
+    { id: "2", label: "Beta", value: "+442071838750" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<PhoneRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Phone",
+      ...fieldtypeToTableField("Phone", "US"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";

package/src/fields/Phone/index.tsx

@@ -1,3 +1,7 @@
+/**
+ * Frappe Phone — thin adapter over forms PhoneInput.
+ * Design-law lives on this file: compose PhoneInput, canonical onChange.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { PhoneInput } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";

package/src/fields/Progress/Progress.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { ProgressField, type ProgressFieldProps } from ".";
 
 export default {
@@ -58,3 +61,32 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Completion", value: 65, max: 100 } as Partial<StoryProps>;
+
+type ProgressRow = { id: string; label: string; value: number };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<ProgressRow[]>([
+      { id: "1", label: "Alpha", value: 65 },
+      { id: "2", label: "Beta", value: 20 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<ProgressRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Completion", ...fieldtypeToTableField("Progress") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { RadioGroupField, type RadioGroupFieldProps } from ".";
 
 export default {
@@ -89,3 +92,37 @@ ContractProbe.args = {
     { label: "High", value: "high" },
   ],
 } as Partial<StoryProps>;
+
+const IN_TABLE_RADIO_OPTIONS = ["Low", "Medium", "High", "Critical", "Blocker", "Trivial"].join(
+  "\n",
+);
+
+interface RadioRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<RadioRow[]>([
+    { id: "1", label: "Alpha", value: "Medium" },
+    { id: "2", label: "Beta", value: "High" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<RadioRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Priority",
+      ...fieldtypeToTableField("Radio", IN_TABLE_RADIO_OPTIONS),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";

package/src/fields/Rating/Rating.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Rating, type RatingProps } from ".";
 
 export default {
@@ -69,3 +72,33 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Rating", value: 0.6, maxStars: 5 } as Partial<StoryProps>;
+
+interface RatingRow {
+  id: string;
+  label: string;
+  value: number;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<RatingRow[]>([
+    { id: "1", label: "Alpha", value: 0.8 },
+    { id: "2", label: "Beta", value: 0.4 },
+    { id: "3", label: "Gamma", value: 0 },
+  ]);
+  const columns: DataTableColumn<RatingRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Rating",
+      ...fieldtypeToTableField("Rating", "5"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";