@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/ColorPicker/index.tsx

@@ -20,11 +20,14 @@ import type { FieldComponentProps, Validator } from "../../types";
 
 import {
   AlphaStrip,
+  CHIP_PX,
   ColorPickerInputTrigger,
   ColorPickerPopoverShell,
   HueStrip,
   PresetSwatches,
+  SWATCH_PX,
   SaturationPanel,
+  binaryRadius,
   hexToHsv,
   hexToRgb,
   hsvToHex,
@@ -301,8 +304,8 @@ const panelSizeMap: Record<string, number> = {
   large: 224,
 };
 
-function binaryRadius(pointy: boolean | undefined, size: number): number {
-  return pointy ? 0 : size / 2;
+function unrecognizedColorError(format: "hex" | "rgb" | "hsl"): string {
+  return t("Color must be a recognized {{format}} value", { format: format.toUpperCase() });
 }
 
 function ColorBody({
@@ -321,7 +324,7 @@ function ColorBody({
 }: ColorBodyProps) {
   const { knobProps } = useResolvedKnobs({ compact: true });
   const panelSize = panelSizeMap[knobProps.size] ?? 192;
-  const previewSize = 24;
+  const previewSize = SWATCH_PX[knobProps.size] ?? 24;
   const [hexInputValue, setHexInputValue] = useState(selectedColor);
   const [hexEditing, setHexEditing] = useState(false);
   useEffect(() => {
@@ -363,7 +366,7 @@ function ColorBody({
   const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
 
   return (
-    <YStack {...knobProps.gap}>
+    <YStack {...knobProps.gap} data-dismiss-class="compose">
       <XStack {...knobProps.gap} alignItems="stretch">
         <SaturationPanel
           hue={hue}
@@ -372,12 +375,7 @@ function ColorBody({
           onChangeSV={onChangeSV}
           size={panelSize}
         />
-        <HueStrip
-          hue={hue}
-          onChangeHue={onChangeHue}
-          height={panelSize}
-          orientation="vertical"
-        />
+        <HueStrip hue={hue} onChangeHue={onChangeHue} height={panelSize} orientation="vertical" />
         {showAlpha && (
           <AlphaStrip
             hue={hue}
@@ -425,7 +423,7 @@ function ColorBody({
           <Button
             size={knobProps.sizeToken}
             chromeless
-            icon={<Pipette size={14} />}
+            icon={<Pipette size={CHIP_PX[knobProps.size] ?? 18} />}
             onPress={handleEyeDropper}
             cursor="pointer"
             aria-label={t("Eyedropper")}
@@ -547,7 +545,7 @@ function ColorPickerControl({
     [alpha, format, onValueChange, showAlpha],
   );
 
-  // DISMISS-BY-INTENT (LC-19): selecting a swatch is an edit, not a dismissal.
+  // DISMISS-BY-INTENT (LC-21): selecting a swatch is an edit, not a dismissal.
   // The panel stays open — like the sliders and hex input — and only an
   // outside click / Escape / explicit done closes it.
   const handleSelectPreset = useCallback(
@@ -596,9 +594,9 @@ function ColorPickerControl({
     return (
       <InputParts.Box theme={hasError ? "red" : undefined}>
         <View
-          width={20}
-          height={20}
-          borderRadius={binaryRadius(knobProps.pointy, 20)}
+          width={CHIP_PX[knobProps.size] ?? 18}
+          height={CHIP_PX[knobProps.size] ?? 18}
+          borderRadius={binaryRadius(knobProps.pointy, CHIP_PX[knobProps.size] ?? 18)}
           borderWidth={1}
           borderColor="$color10"
           marginInlineStart="$2"
@@ -772,7 +770,7 @@ export function ColorPicker<
     const parsedStandalone = parseColorValue(effectiveValue, _format);
     const standaloneFormatError =
       effectiveValue.trim() && !parsedStandalone.isValid
-        ? `Invalid ${_format.toUpperCase()} color value`
+        ? unrecognizedColorError(_format)
         : undefined;
 
     return (
@@ -828,9 +826,7 @@ export function ColorPicker<
         const fieldValue = (field.state.value as string) || "";
         const parsedField = parseColorValue(fieldValue, _format);
         const fieldFormatError =
-          fieldValue.trim() && !parsedField.isValid
-            ? `Invalid ${_format.toUpperCase()} color value`
-            : undefined;
+          fieldValue.trim() && !parsedField.isValid ? unrecognizedColorError(_format) : undefined;
 
         return (
           <FieldLayout

package/src/fields/ColorPicker/parts.tsx

@@ -95,9 +95,7 @@ export function hsvToHex(h: number, s: number, v: number): string {
 }
 
 /** Parse #RGB, #RRGGBB, or #RRGGBBAA. Alpha is 0–100. */
-export function parseHex(
-  hex: string,
-): { r: number; g: number; b: number; alpha: number } | null {
+export function parseHex(hex: string): { r: number; g: number; b: number; alpha: number } | null {
   const raw = hex.startsWith("#") ? hex : `#${hex}`;
   const short = /^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(raw);
   if (short) {
@@ -283,7 +281,7 @@ export type ColorRailOrientation = "horizontal" | "vertical";
 const HANDLE_SIZE = 16;
 const RAIL_THICKNESS = 16;
 
-function binaryRadius(pointy: boolean | undefined, size: number): number {
+export function binaryRadius(pointy: boolean | undefined, size: number): number {
   return pointy ? 0 : size / 2;
 }
 
@@ -700,13 +698,13 @@ export interface PresetSwatchesProps {
   width?: number;
 }
 
-const SWATCH_PX: Record<string, number> = {
+export const SWATCH_PX: Record<string, number> = {
   small: 20,
   medium: 24,
   large: 28,
 };
 
-const CHIP_PX: Record<string, number> = {
+export const CHIP_PX: Record<string, number> = {
   small: 14,
   medium: 18,
   large: 22,
@@ -736,7 +734,10 @@ function SwatchItem({
     <View
       role="radio"
       aria-checked={isSelected}
-      aria-label={entry.name ?? (entry.value ? `Color ${entry.value}` : "Remove color")}
+      aria-label={
+        entry.name ??
+        (entry.value ? t("Color {{value}}", { value: entry.value }) : t("Remove color"))
+      }
       tabIndex={tabIndex}
       width={size}
       height={size}
@@ -799,8 +800,8 @@ export function PresetSwatches({
   if (entries.length === 0) return null;
 
   const swatchSize = SWATCH_PX[knobProps.size] ?? 24;
-  const gap = 6;
-  const cols = Math.max(1, width ? Math.floor((width + gap) / (swatchSize + gap)) : 8);
+  const gapPx = knobProps.control.gap;
+  const cols = Math.max(1, width ? Math.floor((width + gapPx) / (swatchSize + gapPx)) : 8);
 
   const moveFocus = (next: number) => {
     const clamped = Math.max(0, Math.min(entries.length - 1, next));
@@ -813,7 +814,7 @@ export function PresetSwatches({
       role="radiogroup"
       aria-label={t("Color presets")}
       flexWrap="wrap"
-      gap="$1.5"
+      {...knobProps.gap}
       width={width}
       justifyContent="flex-start"
       {...(isWeb
@@ -977,7 +978,7 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
 );
 
 // ---------------------------------------------------------------------------
-// ColorPickerPopoverShell — Popover + Adapt/Sheet wrapper
+// ColorPickerPopoverShell — FloatingPanel (sheet below OVERLAY_BREAKPOINT)
 // ---------------------------------------------------------------------------
 
 interface ColorPickerPopoverShellProps {
@@ -1005,9 +1006,8 @@ export function ColorPickerPopoverShell({
       onOpenChange={onOpenChange}
       trigger={trigger}
       disabled={disabled}
-      scrollable
       sizing="fill"
-      fitContent
+      widthMode="at-least-trigger"
       triggerA11y={triggerA11y}
     >
       {children}

package/src/fields/Combobox/Combobox.spec.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
@@ -82,6 +82,24 @@ describe("Combobox", () => {
       expect(onValueChange).toHaveBeenCalledTimes(1);
       expect(onValueChange).toHaveBeenCalledWith(["banana"]);
     });
+
+    it("stable keeps Cherry in third position when selected and open", async () => {
+      const result = renderWithProviders(
+        <Combobox
+          label="Fruit"
+          name="fruit"
+          options={options}
+          multiple
+          selectedOrder="stable"
+          value={["cherry"]}
+          open
+        />,
+      );
+      await act(async () => {});
+      const optionEls = result.container.querySelectorAll('[role="option"]');
+      expect(optionEls[2]?.textContent).toContain("Cherry");
+      expect(optionEls[0]?.textContent).toContain("Apple");
+    });
   });
 
   describe("with form context", () => {
@@ -184,5 +202,179 @@ describe("Combobox", () => {
       expect(result.findTextElement("Apple")).toBeDefined();
       expect(result.container.textContent).not.toContain("Banana");
     });
+
+    it("ArrowDown moves activedescendant through ungrouped options", async () => {
+      const result = renderWithProviders(
+        <Combobox label="Fruit" name="fruit" options={options} open />,
+      );
+      await act(async () => {});
+      const search = result.container.querySelector("input");
+      expect(search).toBeTruthy();
+      const first = result.container.querySelector('[role="option"]');
+      expect(search?.getAttribute("aria-activedescendant")).toBe(first?.id);
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      const optionsInDom = result.container.querySelectorAll('[role="option"]');
+      expect(search?.getAttribute("aria-activedescendant")).toBe(optionsInDom[1]?.id);
+      expect(optionsInDom[1]?.textContent).toContain("Banana");
+    });
+  });
+
+  describe("MPO-38 AC-6 group headers + multiple", () => {
+    // Interleaved groups: render clusters Fruit then Vegetable, so navigable
+    // order is Apple, Banana, Carrot — not the source order Apple, Carrot, Banana.
+    beforeEach(() => {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1200,
+      });
+    });
+
+    const groupedOptions = [
+      { value: "apple", label: "Apple", group: "Fruit" },
+      { value: "carrot", label: "Carrot", group: "Vegetable" },
+      { value: "banana", label: "Banana", group: "Fruit" },
+    ];
+
+    function activeOption(container: HTMLElement) {
+      const search = container.querySelector("input");
+      const id = search?.getAttribute("aria-activedescendant");
+      return id ? container.querySelector(`#${CSS.escape(id)}`) : null;
+    }
+
+    it("renders group headers when multiple is set", async () => {
+      const result = renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const headers = result.container.querySelectorAll("[data-combobox-group-header]");
+      expect(headers.length).toBeGreaterThan(0);
+      expect(result.findTextElement("Fruit")).toBeDefined();
+      expect(result.findTextElement("Vegetable")).toBeDefined();
+    });
+
+    it("ArrowDown/ArrowUp traverse only selectable rows and skip headers", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Combobox
+          label="Produce"
+          name="produce"
+          options={groupedOptions}
+          multiple
+          open
+          onChange={onChange}
+        />,
+      );
+      await act(async () => {});
+
+      const search = result.container.querySelector("input");
+      expect(search).toBeTruthy();
+      const optionLabels = [...result.container.querySelectorAll('[role="option"]')].map(
+        (el) => el.textContent,
+      );
+      expect(optionLabels[0]).toContain("Apple");
+      expect(optionLabels[1]).toContain("Banana");
+      expect(optionLabels[2]).toContain("Carrot");
+
+      expect(activeOption(result.container)?.textContent).toContain("Apple");
+      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
+
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      expect(activeOption(result.container)?.textContent).toContain("Banana");
+      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
+      for (const header of result.container.querySelectorAll("[data-combobox-group-header]")) {
+        expect(header.getAttribute("data-active")).not.toBe("true");
+      }
+
+      // Space must commit the highlighted row (Banana), not sortedFiltered[1] (Carrot).
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: " " });
+      });
+      expect(onChange).toHaveBeenCalledWith(["banana"]);
+
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      expect(activeOption(result.container)?.textContent).toContain("Carrot");
+
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowUp" });
+      });
+      expect(activeOption(result.container)?.textContent).toContain("Banana");
+
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "Home" });
+        fireEvent.keyDown(search!, { key: "ArrowUp" });
+      });
+      expect(activeOption(result.container)?.textContent).toContain("Carrot");
+      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
+    });
+
+    // The sheet core (<= OVERLAY_BREAKPOINT, and every native render) used to
+    // build headers itself from source order, so interleaved groups emitted a
+    // REPEAT header and the rows stayed unclustered — two different lists from
+    // one set of props. Both cores now go through groupComboboxOptions.
+    it("the sheet renders the same headers and row order as the desktop panel", async () => {
+      function shot(root: HTMLElement) {
+        return {
+          headers: [...root.querySelectorAll("[data-combobox-group-header]")].map(
+            (el) => el.textContent,
+          ),
+          rows: [...root.querySelectorAll('[role="option"]')].map((el) => ({
+            label: el.textContent,
+            index: el.getAttribute("data-combobox-index"),
+          })),
+        };
+      }
+
+      window.innerWidth = 1200;
+      const desktop = renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onDesktop = shot(document.body);
+      desktop.unmount();
+
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onSheet = shot(document.body);
+
+      expect(onDesktop.headers).toEqual(["Fruit", "Vegetable"]);
+      expect(onSheet.headers).toEqual(onDesktop.headers);
+      expect(onSheet.rows).toEqual(onDesktop.rows);
+      // One header per group: a repeated label is the defect this guards.
+      expect(new Set(onSheet.headers).size).toBe(onSheet.headers.length);
+    });
+
+    // The sheet's activeIndex indexes the same grouped list the sheet renders,
+    // so arrows land on the row the user sees rather than the source-order row.
+    it("sheet ArrowDown follows the rendered row order, not source order", async () => {
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+
+      const rows = [...document.body.querySelectorAll('[role="option"]')];
+      expect(rows.map((el) => el.textContent?.trim())).toEqual(["Apple", "Banana", "Carrot"]);
+
+      const search = document.body.querySelector("input");
+      expect(search).toBeTruthy();
+      // activeIndex starts at 0 (Apple); one ArrowDown must highlight the row
+      // rendered second (Banana), which is sortedFiltered[2], not [1].
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      const active = document.body.querySelector('[data-active="true"]');
+      expect(active?.textContent).toContain("Banana");
+      expect(active?.getAttribute("data-combobox-index")).toBe("1");
+    });
   });
 });

package/src/fields/Combobox/Combobox.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";
@@ -69,6 +70,12 @@ const meta: Meta<typeof Combobox> = {
       control: "boolean",
       description: "Allow creating a new option from the search text",
     },
+    selectedOrder: {
+      control: "select",
+      options: ["selected-first", "stable"],
+      description:
+        "Multi-select list order. selected-first pins chosen rows to the top; stable keeps options order.",
+    },
   },
 };
 
@@ -139,6 +146,18 @@ export const Multiple: Story = {
   render: (args) => <Combobox {...args} />,
 };
 
+export const MultipleStable: Story = {
+  args: {
+    label: "Authors",
+    placeholder: "Select authors",
+    multiple: true,
+    selectedOrder: "stable",
+    dismissible: true,
+    options: authorOptions,
+  },
+  render: (args) => <Combobox {...args} />,
+};
+
 export const Creatable: Story = {
   args: {
     label: "Tags",
@@ -320,3 +339,30 @@ export const ManyOptions: StoryObj<typeof Combobox> = {
 export const SkeletonState: Story = {
   args: { label: "Author", options: authorOptions, skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "austen" },
+      { id: "2", label: "Beta", value: "hemingway" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Combobox",
+        field: "combobox",
+        fieldProps: { options: authorOptions, placeholder: "Select an author" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};