@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/Icon/index.tsx

@@ -0,0 +1,465 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
+import { Field, FieldLayout } from "../../fieldLayout";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { FloatingPanel } from "../../FloatingPanel";
+import { Skeleton } from "../../Skeleton";
+import { formCommonColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import { t } from "../../shared/t";
+import type { FieldComponentProps, Validator } from "../../types";
+import {
+  DRAWN_ICON_NAMES,
+  DrawnIcon,
+  filterDrawnIcons,
+  isDrawnIconName,
+  parseIconOptions,
+  resolveIconCatalog,
+  type DrawnIconName,
+} from "./drawnSet";
+
+export type { DrawnIconName } from "./drawnSet";
+export {
+  DRAWN_ICON_NAMES,
+  DrawnIcon,
+  filterDrawnIcons,
+  isDrawnIconName,
+  parseIconOptions,
+  resolveIconCatalog,
+} from "./drawnSet";
+
+export type IconProps<
+  TParentData = unknown,
+  TName extends DeepKeys<TParentData> = DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field" | "onChange"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    /** @deprecated Use `onChange` instead. */
+    onValueChange?: (value: string) => void;
+    skeleton?: boolean;
+    compact?: boolean;
+    /** Restrict the picker to a subset of the drawn set (df.options). */
+    icons?: readonly string[];
+    options?: string;
+  };
+
+const adornmentRing = ensureFocusVisibleRing({ outlineOffset: -2 });
+const NESTED_GLYPH_WELL = 32;
+
+function EmptyGlyphWell() {
+  return (
+    <View
+      testID="icon-empty-well"
+      width={16}
+      height={16}
+      borderWidth={1}
+      borderStyle="dashed"
+      borderColor="$borderColor"
+      borderRadius={3}
+    />
+  );
+}
+
+function IconControl({
+  value,
+  placeholder,
+  disabled,
+  readOnly,
+  hasError,
+  required,
+  id,
+  hasLabel,
+  a11yLabel,
+  helperText,
+  catalog,
+  onValueChange,
+  onBlurControl,
+}: {
+  value: string;
+  placeholder: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  hasError: boolean;
+  required?: boolean;
+  id?: string;
+  hasLabel?: boolean;
+  a11yLabel?: string;
+  helperText?: string;
+  catalog: readonly DrawnIconName[];
+  onValueChange: (value: string) => void;
+  onBlurControl?: () => void;
+}) {
+  const inTableCell = useIsInTableCell();
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const drawn = isDrawnIconName(value) ? value : undefined;
+  const matches = useMemo(() => filterDrawnIcons(catalog, query), [catalog, query]);
+
+  const closePanel = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    onBlurControl?.();
+  }, [onBlurControl]);
+
+  const handlePick = useCallback(
+    (name: DrawnIconName) => {
+      onValueChange(name);
+      closePanel();
+    },
+    [closePanel, onValueChange],
+  );
+
+  const handleClear = useCallback(() => {
+    onValueChange("");
+    setQuery("");
+  }, [onValueChange]);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (disabled || readOnly) return;
+      if (next) {
+        setOpen(true);
+        return;
+      }
+      closePanel();
+    },
+    [closePanel, disabled, readOnly],
+  );
+
+  if (readOnly) {
+    return (
+      <View
+        testID="icon-field-readonly"
+        width={NESTED_GLYPH_WELL}
+        height={NESTED_GLYPH_WELL}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {drawn ? <DrawnIcon name={drawn} size={16} /> : <EmptyGlyphWell />}
+      </View>
+    );
+  }
+
+  const displayValue = open ? query : drawn ? drawn : value;
+  const showClear = Boolean(value) && !disabled;
+
+  const trigger = (
+    <View>
+      <InputParts
+        cursor="pointer"
+        onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
+        size={knobProps.sizeToken}
+      >
+        <InputParts.Box
+          testID="icon-field"
+          theme={hasError ? "red" : undefined}
+          disabled={disabled}
+          {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
+        >
+          <InputParts.Icon adornment="leading">
+            {drawn ? <DrawnIcon name={drawn} size={16} /> : <EmptyGlyphWell />}
+          </InputParts.Icon>
+          {!inTableCell && (
+            <InputParts.Area
+              id={id}
+              value={displayValue}
+              placeholder={placeholder}
+              fontFamily="$mono"
+              readOnly={!open}
+              disabled={disabled}
+              aria-expanded={open}
+              aria-haspopup="listbox"
+              aria-controls={open ? `${id ?? "icon"}-listbox` : undefined}
+              aria-label={hasLabel ? undefined : t("Icon")}
+              aria-required={required || undefined}
+              aria-invalid={hasError || undefined}
+              autoComplete="off"
+              autoCapitalize="none"
+              spellCheck={false}
+              onChangeText={open ? setQuery : undefined}
+              onFocus={() => {
+                if (!disabled) setOpen(true);
+              }}
+            />
+          )}
+          {showClear ? (
+            <InputParts.Button
+              tabIndex={0}
+              aria-label={t("Clear icon")}
+              disabled={disabled}
+              focusVisibleStyle={adornmentRing}
+              onPress={(e) => {
+                e.stopPropagation();
+                handleClear();
+              }}
+            >
+              <InputParts.Icon>
+                <DrawnIcon name="x" size={16} />
+              </InputParts.Icon>
+            </InputParts.Button>
+          ) : (
+            <InputParts.Icon adornment="trailing">
+              <DrawnIcon name="chev-d" size={16} />
+            </InputParts.Icon>
+          )}
+        </InputParts.Box>
+      </InputParts>
+    </View>
+  );
+
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={trigger}
+      disabled={disabled}
+      scrollable
+      sizing="fill"
+      triggerA11y={{
+        label: a11yLabel || t("Icon"),
+        value: value || placeholder,
+        hint: helperText,
+      }}
+    >
+      <YStack
+        testID="icon-panel"
+        id={`${id ?? "icon"}-listbox`}
+        {...({ role: "listbox" } as Record<string, unknown>)}
+        aria-label={t("Icons")}
+        padding="$2"
+      >
+        {matches.length === 0 ? (
+          <Text
+            testID="icon-no-results"
+            color={formCommonColors.muted}
+            fontSize="$3"
+            textAlign="center"
+            padding="$4"
+          >
+            {t('No icon matches "{{query}}"', { query })}
+          </Text>
+        ) : (
+          <XStack flexWrap="wrap">
+            {matches.map((name) => {
+              const selected = name === value;
+              return (
+                <View
+                  key={name}
+                  role="option"
+                  aria-selected={selected}
+                  testID={`icon-option-${name}`}
+                  width="33.333%"
+                  padding="$1"
+                  cursor="pointer"
+                  onPress={() => handlePick(name)}
+                >
+                  <YStack
+                    height={60}
+                    alignItems="center"
+                    justifyContent="center"
+                    gap="$1"
+                    borderRadius="$3"
+                    backgroundColor={selected ? "$color3" : "transparent"}
+                    hoverStyle={{ backgroundColor: "$color3" }}
+                  >
+                    <DrawnIcon name={name} size={16} />
+                    <Text fontFamily="$mono" fontSize={11} color="$color10" numberOfLines={1}>
+                      {name}
+                    </Text>
+                  </YStack>
+                </View>
+              );
+            })}
+          </XStack>
+        )}
+      </YStack>
+    </FloatingPanel>
+  );
+}
+
+export function Icon<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: IconProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    placeholder = t("Choose an icon"),
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    value: controlledValue,
+    onChange,
+    onValueChange,
+    skeleton,
+    compact,
+    id: idProp,
+    icons,
+    options,
+  } = useProps(props);
+
+  const catalog = useMemo(
+    () => resolveIconCatalog(icons ?? parseIconOptions(options)),
+    [icons, options],
+  );
+
+  const emitValueChange = useCallback(
+    (newValue: string) => {
+      onChange?.(newValue);
+      onValueChange?.(newValue);
+    },
+    [onChange, onValueChange],
+  );
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [standaloneValue, setStandaloneValue] = useState<string>(
+    () => (controlledValue ?? (defaultValue as string)) || "",
+  );
+
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  const handleStandaloneChange = useCallback(
+    (newValue: string) => {
+      setStandaloneValue(newValue);
+      emitValueChange(newValue);
+    },
+    [emitValueChange],
+  );
+
+  if (skeleton) {
+    return (
+      <InputParts size={size || knobProps.sizeToken}>
+        {label ? <Skeleton variant="text" width={96} height={14} /> : null}
+        <Skeleton
+          variant="rounded"
+          width={320}
+          height={knobProps.control.height}
+          borderRadius={knobProps.borderRadius.borderRadius}
+        />
+      </InputParts>
+    );
+  }
+
+  const control = (
+    fieldValue: string,
+    onValue: (next: string) => void,
+    error?: string | boolean,
+  ) => (
+    <IconControl
+      value={fieldValue}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      hasError={!!error}
+      required={required}
+      id={id}
+      hasLabel={Boolean(label)}
+      a11yLabel={typeof label === "string" ? label : undefined}
+      helperText={helperText}
+      catalog={catalog}
+      onValueChange={onValue}
+      onBlurControl={() => onBlur?.(undefined as never)}
+    />
+  );
+
+  if (!resolvedForm || !name) {
+    const effectiveValue = controlledValue ?? standaloneValue;
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+        disabled={disabled}
+      >
+        {control(effectiveValue, handleStandaloneChange, errorProp)}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, errorProp);
+        const fieldValue = (field.state.value as string) || "";
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            disabled={disabled}
+          >
+            {control(
+              fieldValue,
+              (newValue) => {
+                field.handleChange(newValue as TData);
+                emitValueChange(newValue);
+              },
+              resolvedError,
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/ImageField/ImageField.spec.tsx

@@ -1,9 +1,23 @@
-import { act, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { ImageField } from "./index";
 
+afterEach(cleanup);
+
+function mediaTile(container: HTMLElement) {
+  return container.querySelector("[data-media-tile]") as HTMLElement | null;
+}
+
+function radiusClasses(el: HTMLElement | null) {
+  return String(el?.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
 describe("ImageField", () => {
   describe("without form context", () => {
     it("renders with label", () => {
@@ -152,4 +166,72 @@ describe("ImageField", () => {
       expect(result.findTextElement("Avatar")).toBeDefined();
     });
   });
+
+  describe("R11 live-media tiles", () => {
+    it("does not paint a status pip on the media tile", () => {
+      const result = renderWithProviders(
+        <ImageField
+          label="Photo"
+          name="photo"
+          value="https://example.com/a.png"
+          imageWidth={96}
+          imageHeight={96}
+        />,
+      );
+      const tile = mediaTile(result.container);
+      expect(tile).not.toBeNull();
+      expect(
+        tile?.querySelector("[data-status-pip], [data-status-dot], [role='status']"),
+      ).toBeNull();
+    });
+
+    it("keeps Remove as chrome outside the media tile", () => {
+      const result = renderWithProviders(
+        <ImageField
+          label="Photo"
+          name="photo"
+          value="https://example.com/a.png"
+          imageWidth={96}
+          imageHeight={96}
+        />,
+      );
+      const tile = mediaTile(result.container);
+      expect(tile).not.toBeNull();
+      expect(tile?.textContent ?? "").not.toMatch(/Remove/);
+      expect(result.findTextElement("Remove")).toBeDefined();
+    });
+
+    it("rides the unclamped radius knob including full", () => {
+      const none = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <ImageField label="Photo" name="photo" />
+        </Preset>,
+      );
+      expect(radiusClasses(mediaTile(none.container))).toEqual(["_btlr-t-radius-0"]);
+      cleanup();
+
+      const full = renderWithProviders(
+        <Preset overrides={{ borderRadius: "full" }}>
+          <ImageField label="Photo" name="photo" />
+        </Preset>,
+      );
+      expect(radiusClasses(mediaTile(full.container))).toEqual(["_btlr-t-radius-12"]);
+    });
+
+    it("does not grow a table cell with a Remove sibling", () => {
+      const result = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: true }}>
+          <ImageField
+            label="Photo"
+            name="photo"
+            value="https://example.com/a.png"
+            imageWidth={48}
+            imageHeight={48}
+          />
+        </TableCellContext.Provider>,
+      );
+      expect(mediaTile(result.container)).not.toBeNull();
+      expect(result.findTextElement("Remove")).toBeFalsy();
+    });
+  });
 });

package/src/fields/ImageField/ImageField.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -18,7 +19,7 @@ const meta: Meta<typeof ImageField> = {
     docs: {
       description: {
         component:
-          "Frappe Attach Image: a preview frame that attaches, replaces, and accepts drops. Empty shows Add image; Remove is a sibling action. Keyboard focus rings the frame (LC-71), never the hidden file input.",
+          "Frappe Attach Image: a preview frame that attaches, replaces, and accepts drops. Empty shows Add image; Remove is a sibling action (R11: never a status pip on the media). Keyboard focus rings the frame (LC-71), never the hidden file input. Radius on the tile is unclamped.",
       },
     },
   },
@@ -235,3 +236,31 @@ export const SkeletonState: Story = {
   args: { label: "Profile Photo", skeleton: true },
   render: (args) => <ImageField {...args} />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+/** LC-06: ImageField stays hosted in DataTable; the cell opens a modal. */
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: ATTACHED },
+      { id: "2", label: "Beta", value: "https://i.pravatar.cc/100?img=12" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Image",
+        field: "image",
+        fieldProps: { imageWidth: 64, imageHeight: 64 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={320}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};