@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/Barcode/index.tsx

@@ -1,16 +1,14 @@
-import type { ControlStateProps, KnobProps } from "@multiplatform.one/theme";
-import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, type KnobProps } from "@multiplatform.one/theme";
 import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Text, View } from "tamagui";
-import { Button } from "../../Button";
-import { ControlGroup } from "../../ControlGroup";
+import { Text } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { FocusContext, Input as InputParts } from "../../InputParts";
-import { formCommonColors } from "../../shared/colorRamps";
+import { Input as InputParts } from "../../InputParts";
+import { formButtonColors, formCommonColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -19,15 +17,10 @@ import {
 } from "../../shared/utils";
 import { t } from "../../shared/t";
 import type { AnyFormApi } from "../../types";
+import { BarcodePreview } from "./BarcodePreview";
 import { BarcodeScanner, preflightCamera } from "./BarcodeScanner";
 
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. Same
- * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
+const adornmentRing = ensureFocusVisibleRing({ outlineOffset: -2 });
 
 function BarcodeInput({
   value,
@@ -35,8 +28,9 @@ function BarcodeInput({
   disabled,
   readOnly,
   enableScan,
+  formats,
+  compact,
   knobProps,
-  areaFocusRing,
   barcodeIcon,
   scanIcon,
   stopIcon,
@@ -50,8 +44,9 @@ function BarcodeInput({
   disabled: boolean;
   readOnly: boolean;
   enableScan: boolean;
+  formats?: string[];
+  compact?: boolean;
   knobProps: KnobProps;
-  areaFocusRing: ControlStateProps;
   barcodeIcon?: ReactNode;
   scanIcon?: ReactNode;
   stopIcon?: ReactNode;
@@ -63,7 +58,11 @@ function BarcodeInput({
   const [isScanning, setIsScanning] = useState(false);
   const [scanError, setScanError] = useState<string | null>(null);
   const preflightingRef = useRef(false);
+  const inTableCell = useIsInTableCell();
   const activeScanIcon = isScanning ? stopIcon : scanIcon;
+  const showScan = enableScan && !readOnly;
+  const showClear = Boolean(value) && !readOnly && !disabled && !isScanning;
+  const showPreview = Boolean(value) && !isScanning && !inTableCell;
 
   // LC-19 CAPABILITY-PREFLIGHT: verify camera availability BEFORE presenting
   // the scanner surface. Pre-flight failure renders an inline error at the
@@ -89,50 +88,89 @@ function BarcodeInput({
     }
   };
 
+  const handleClear = () => {
+    if (disabled || readOnly) return;
+    onValueChange("");
+  };
+
   return (
     <>
       <InputParts size={knobProps.sizeToken}>
-        <ControlGroup>
-          <View width={0} />
-          <InputParts.Box>
-            {barcodeIcon ? (
-              <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
-            ) : null}
-            <FocusContext.Provider {...suppressBoxFocusRing}>
-              <InputParts.Area
-                id={id}
-                value={value}
-                onChangeText={readOnly ? undefined : onValueChange}
-                readOnly={readOnly}
-                aria-readonly={readOnly || undefined}
-                placeholder={t("Enter or scan barcode")}
-                disabled={disabled}
-                focusStyle={areaFocusRing}
-                focusVisibleStyle={areaFocusRing}
-                aria-labelledby={hasLabel && id ? `${id}-label` : undefined}
-                aria-label={hasLabel ? undefined : t("Barcode")}
-                aria-required={required || undefined}
-                aria-invalid={hasError || undefined}
-              />
-            </FocusContext.Provider>
-          </InputParts.Box>
-          {enableScan && !readOnly ? (
-            // Icon when provided; otherwise a text label — an icon-less Button
-            // renders as a bare colored box (looks like a stuck skeleton).
-            <Button
-              size={knobProps.sizeToken}
+        {/* LC-71: Scan (and Clear) live inside Input.Box so the composite ring
+            wraps the whole perceived control — never a sibling house Button
+            that the inner-Area ring would leave outside. */}
+        <InputParts.Box
+          testID="barcode-field"
+          disabled={disabled}
+          theme={hasError ? "red" : undefined}
+        >
+          {barcodeIcon ? (
+            <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
+          ) : null}
+          <InputParts.Area
+            id={id}
+            value={value}
+            onChangeText={readOnly ? undefined : onValueChange}
+            readOnly={readOnly}
+            aria-readonly={readOnly || undefined}
+            placeholder={t("Enter or scan barcode")}
+            disabled={disabled}
+            aria-label={hasLabel ? undefined : t("Barcode")}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            autoComplete="off"
+            autoCapitalize="none"
+            spellCheck={false}
+            fontFamily="$mono"
+            onKeyDown={
+              readOnly || disabled
+                ? undefined
+                : ((e: { key?: string; preventDefault?: () => void }) => {
+                    if (e.key === "Escape" && value) {
+                      e.preventDefault?.();
+                      handleClear();
+                    }
+                  }) as unknown as () => void
+            }
+          />
+          {showClear ? (
+            <InputParts.Button
+              tabIndex={0}
+              aria-label={t("Clear barcode")}
+              disabled={disabled}
+              focusVisibleStyle={adornmentRing}
+              onPress={handleClear}
+            >
+              <InputParts.Icon>
+                <XIcon />
+              </InputParts.Icon>
+            </InputParts.Button>
+          ) : null}
+          {showScan ? (
+            <InputParts.Button
+              tabIndex={0}
               disabled={disabled}
               onPress={handleScanPress}
-              {...(activeScanIcon ? { icon: activeScanIcon } : undefined)}
-              {...(isScanning ? { theme: "red" } : undefined)}
               aria-label={isScanning ? t("Stop scanning") : t("Scan barcode")}
+              aria-pressed={isScanning || undefined}
+              aria-expanded={isScanning || undefined}
+              focusVisibleStyle={adornmentRing}
+              backgroundColor={isScanning ? formButtonColors.background.active : "transparent"}
+              {...(!activeScanIcon ? { width: "auto", paddingHorizontal: "$3" } : undefined)}
             >
-              {activeScanIcon ? undefined : isScanning ? t("Stop") : t("Scan")}
-            </Button>
-          ) : (
-            <View width={0} />
-          )}
-        </ControlGroup>
+              {activeScanIcon ? (
+                <InputParts.Icon>{activeScanIcon}</InputParts.Icon>
+              ) : isScanning ? (
+                t("Stop")
+              ) : (
+                t("Scan")
+              )}
+            </InputParts.Button>
+          ) : null}
+        </InputParts.Box>
+        {showPreview ? (
+          <BarcodePreview value={value} height={compact ? 24 : 36} moduleWidth={1} />
+        ) : null}
       </InputParts>
       <BarcodeScanner
         active={isScanning}
@@ -140,6 +178,8 @@ function BarcodeInput({
         onError={setScanError}
         onClose={() => setIsScanning(false)}
         knobProps={knobProps}
+        formats={formats}
+        compact={compact}
       />
       {scanError && (
         <Text {...knobProps.body} color={formCommonColors.error} fontSize="$2">
@@ -184,7 +224,7 @@ export interface BarcodeProps {
   stopIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the barcode field */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -213,26 +253,31 @@ export function Barcode({
   disabled,
   readOnly,
   enableScan = true,
+  formats,
   barcodeIcon = defaultBarcodeIcon,
   scanIcon = defaultScanIcon,
   stopIcon = defaultStopIcon,
   skeleton,
   compact,
 }: BarcodeProps) {
-  const { resolvedForm, knobProps, control, id } = useFormField({
+  const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(() => String(defaultValue ?? ""));
 
   const iconProps = { barcodeIcon, scanIcon, stopIcon };
 
+  const standaloneValue = isControlled ? (value ?? "") : uncontrolled;
+  const onStandaloneChange = (next: string) => {
+    if (disabled || readOnly) return;
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+  };
+
   // Render skeleton placeholder
   if (skeleton) {
     return (
@@ -259,15 +304,14 @@ export function Barcode({
         disabled={disabled}
       >
         <BarcodeInput
-          value={value ?? (defaultValue as string) ?? ""}
-          onValueChange={(v) => {
-            if (!disabled && !readOnly) onChange?.(v);
-          }}
+          value={standaloneValue}
+          onValueChange={onStandaloneChange}
           disabled={!!disabled}
           readOnly={!!readOnly}
           enableScan={enableScan}
+          formats={formats}
+          compact={compact}
           knobProps={knobProps}
-          areaFocusRing={areaFocusRing}
           required={required}
           hasError={!!error}
           id={id}
@@ -311,8 +355,9 @@ export function Barcode({
               disabled={!!disabled}
               readOnly={!!readOnly}
               enableScan={enableScan}
+              formats={formats}
+              compact={compact}
               knobProps={knobProps}
-              areaFocusRing={areaFocusRing}
               required={required}
               hasError={!!resolvedError}
               id={id}

package/src/fields/Barcode/scannerTypes.ts

@@ -15,6 +15,10 @@ export interface BarcodeScannerProps {
    */
   onClose: () => void;
   knobProps: KnobProps;
+  /** Restrict the decoder to these symbologies. Omit / empty = all supported. */
+  formats?: string[];
+  /** Compact density — shorter scanner viewport (LC-10 / LC-73). */
+  compact?: boolean;
 }
 
 /**
@@ -25,3 +29,129 @@ export interface BarcodeScannerProps {
  * stable scanner surface, never as a mount-fail-unmount.
  */
 export type CameraPreflightResult = CapabilityPreflightResult;
+
+/** expo-camera `barcodeTypes` the native scanner can request. */
+export const NATIVE_BARCODE_TYPES = [
+  "qr",
+  "ean13",
+  "ean8",
+  "code128",
+  "code39",
+  "code93",
+  "upc_a",
+  "upc_e",
+  "codabar",
+  "itf14",
+  "datamatrix",
+  "pdf417",
+  "aztec",
+] as const;
+
+export type NativeBarcodeType = (typeof NATIVE_BARCODE_TYPES)[number];
+
+const NATIVE_FORMAT_ALIASES: Record<string, NativeBarcodeType> = {
+  qr: "qr",
+  qrcode: "qr",
+  qr_code: "qr",
+  ean13: "ean13",
+  ean_13: "ean13",
+  ean8: "ean8",
+  ean_8: "ean8",
+  code128: "code128",
+  code_128: "code128",
+  code39: "code39",
+  code_39: "code39",
+  code93: "code93",
+  code_93: "code93",
+  upc_a: "upc_a",
+  upca: "upc_a",
+  upc_e: "upc_e",
+  upce: "upc_e",
+  codabar: "codabar",
+  itf: "itf14",
+  itf14: "itf14",
+  datamatrix: "datamatrix",
+  data_matrix: "datamatrix",
+  pdf417: "pdf417",
+  pdf_417: "pdf417",
+  aztec: "aztec",
+};
+
+/** html5-qrcode `Html5QrcodeSupportedFormats` enum keys. */
+const HTML5_FORMAT_ALIASES: Record<string, string> = {
+  qr: "QR_CODE",
+  qrcode: "QR_CODE",
+  qr_code: "QR_CODE",
+  aztec: "AZTEC",
+  codabar: "CODABAR",
+  code39: "CODE_39",
+  code_39: "CODE_39",
+  code93: "CODE_93",
+  code_93: "CODE_93",
+  code128: "CODE_128",
+  code_128: "CODE_128",
+  datamatrix: "DATA_MATRIX",
+  data_matrix: "DATA_MATRIX",
+  itf: "ITF",
+  itf14: "ITF",
+  ean13: "EAN_13",
+  ean_13: "EAN_13",
+  ean8: "EAN_8",
+  ean_8: "EAN_8",
+  pdf417: "PDF_417",
+  pdf_417: "PDF_417",
+  upca: "UPC_A",
+  upc_a: "UPC_A",
+  upce: "UPC_E",
+  upc_e: "UPC_E",
+};
+
+function normalizeFormatToken(value: string): string {
+  return value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+}
+
+/**
+ * Map consumer `formats` strings onto expo-camera barcode types.
+ * Unknown tokens are dropped; an empty result falls back to the full set so
+ * a typo cannot silently disable scanning.
+ */
+export function resolveNativeBarcodeTypes(formats?: string[]): NativeBarcodeType[] {
+  if (!formats?.length) return [...NATIVE_BARCODE_TYPES];
+  const seen = new Set<NativeBarcodeType>();
+  const resolved: NativeBarcodeType[] = [];
+  for (const raw of formats) {
+    const mapped = NATIVE_FORMAT_ALIASES[normalizeFormatToken(raw)];
+    if (!mapped || seen.has(mapped)) continue;
+    seen.add(mapped);
+    resolved.push(mapped);
+  }
+  return resolved.length ? resolved : [...NATIVE_BARCODE_TYPES];
+}
+
+/**
+ * Map consumer `formats` strings onto html5-qrcode enum numeric ids.
+ * Returns `undefined` when the filter is empty/unresolved so the library
+ * keeps its default (all formats).
+ */
+export function resolveHtml5FormatIds(
+  formats: string[] | undefined,
+  enumObj: Record<string, number | string>,
+): number[] | undefined {
+  if (!formats?.length) return undefined;
+  const ids: number[] = [];
+  const seen = new Set<number>();
+  for (const raw of formats) {
+    const key = HTML5_FORMAT_ALIASES[normalizeFormatToken(raw)];
+    if (!key) continue;
+    const val = enumObj[key];
+    if (typeof val !== "number" || seen.has(val)) continue;
+    seen.add(val);
+    ids.push(val);
+  }
+  return ids.length ? ids : undefined;
+}
+
+/** Contained scanner viewport height (LC-10). Compact steps down (LC-73). */
+export function scannerViewportHeight(compact?: boolean): number {
+  return compact ? 180 : 240;
+}

package/src/fields/Checkbox/Checkbox.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
@@ -7,12 +7,14 @@ import {
   defaultBaseTheme,
   defaultBuilderOptions,
 } from "@multiplatform.one/theme";
+import * as Theme from "@multiplatform.one/theme";
 import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import { TamaguiProvider, createTamagui } from "tamagui";
 import { Form } from "../../Form";
 import { Checkbox } from "./Checkbox";
 import { CheckboxGroup } from "./CheckboxGroup";
+import { Checkboxes } from "./index";
 
 // House builder themes for the LC-05 mark assertion — created at MODULE
 // scope: tamagui registers a config's theme variables globally at
@@ -146,6 +148,51 @@ describe("Checkbox", () => {
     });
   });
 
+  describe("LC-71 RING-ANATOMY", () => {
+    function isTransparent(bg: string) {
+      return bg === "transparent" || bg === "rgba(0, 0, 0, 0)" || bg === "rgba(0,0,0,0)";
+    }
+
+    it("idle box is empty (transparent fill); checked is fill, not a thicker border", () => {
+      const { container } = render(
+        <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+          <Checkbox label="Checked" checked />
+          <Checkbox label="Unchecked" checked={false} />
+        </TamaguiProvider>,
+      );
+      const checkboxes = Array.from(container.querySelectorAll('[role="checkbox"]'));
+      const checkedRoot = checkboxes.find((b) => b.getAttribute("aria-checked") === "true")!;
+      const uncheckedRoot = checkboxes.find((b) => b.getAttribute("aria-checked") === "false")!;
+      const marked = checkedRoot.querySelector('[data-checkbox-box="true"]') as HTMLElement;
+      const idle = uncheckedRoot.querySelector('[data-checkbox-box="true"]') as HTMLElement;
+      expect(marked).toBeTruthy();
+      expect(idle).toBeTruthy();
+      expect(isTransparent(getComputedStyle(idle).backgroundColor)).toBe(true);
+      const markedBw = parseFloat(getComputedStyle(marked).borderTopWidth) || 0;
+      const idleBw = parseFloat(getComputedStyle(idle).borderTopWidth) || 0;
+      expect(idleBw).toBeGreaterThanOrEqual(2);
+      expect(markedBw).toBe(idleBw);
+      expect(parseFloat(getComputedStyle(marked).outlineWidth) || 0).toBe(0);
+    });
+
+    it("keyboard focus rings the box, never the 44px target", async () => {
+      const spy = vi.spyOn(Theme, "wasKeyboardFocus").mockReturnValue(true);
+      try {
+        const result = renderWithProviders(<Checkbox label="Focus me" name="f" />);
+        const checkbox = result.getCheckbox()!;
+        await act(async () => {
+          fireEvent.focusIn(checkbox);
+        });
+        const box = checkbox.querySelector('[data-checkbox-box="true"]');
+        expect(box?.getAttribute("data-focus-ring")).toBe("true");
+        expect(checkbox.getAttribute("data-focus-ring")).toBeNull();
+        expect(parseFloat(getComputedStyle(checkbox).outlineWidth) || 0).toBe(0);
+      } finally {
+        spy.mockRestore();
+      }
+    });
+  });
+
   describe("with form context", () => {
     it("renders inside form", () => {
       const result = renderWithProviders(
@@ -281,6 +328,42 @@ describe("CheckboxGroup", () => {
     });
   });
 
+  describe("compound Checkboxes LC-71", () => {
+    it("keyboard focus rings the box, never the focus-group item", async () => {
+      const spy = vi.spyOn(Theme, "wasKeyboardFocus").mockReturnValue(true);
+      try {
+        const onValuesChange = vi.fn();
+        const result = renderWithProviders(
+          <Checkboxes values={{ a: true }} onValuesChange={onValuesChange}>
+            <Checkboxes.FocusGroup>
+              <Checkboxes.Group>
+                <Checkboxes.Group.Item>
+                  <Checkboxes.FocusGroup.Item value="a">
+                    <Checkboxes.Checkbox>
+                      <Checkboxes.Checkbox.Indicator />
+                    </Checkboxes.Checkbox>
+                  </Checkboxes.FocusGroup.Item>
+                </Checkboxes.Group.Item>
+              </Checkboxes.Group>
+            </Checkboxes.FocusGroup>
+          </Checkboxes>,
+        );
+        const item = result.container.querySelector(
+          '[data-checkbox-focus-item="true"]',
+        ) as HTMLElement;
+        expect(item).toBeTruthy();
+        await act(async () => {
+          fireEvent.focusIn(item);
+        });
+        expect(parseFloat(getComputedStyle(item).outlineWidth) || 0).toBe(0);
+        const box = result.container.querySelector('[data-checkbox-box="true"]');
+        expect(box?.getAttribute("data-focus-ring")).toBe("true");
+      } finally {
+        spy.mockRestore();
+      }
+    });
+  });
+
   describe("selected mark (LC-05 ONE-EMPHASIS / D-01 census addition)", () => {
     it("fills the checked box with the accent mark; the unchecked box stays neutral chrome", () => {
       const { container } = render(
@@ -295,8 +378,6 @@ describe("CheckboxGroup", () => {
       const unchecked = boxes.find((b) => b.getAttribute("aria-checked") === "false");
       expect(checked).toBeTruthy();
       expect(unchecked).toBeTruthy();
-      // The visible glyph box (a descendant of the 44px transparent target)
-      // carries the accent mark fill only while checked.
       const marked = (root: Element) =>
         Array.from(root.querySelectorAll("*")).filter((el) =>
           (el as HTMLElement).className?.toString().includes("_bg-accentBackg"),