@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/Select/Select.stories.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 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 { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Adapt, Paragraph, Select as TamaguiSelect, Sheet, XStack, YStack } from "tamagui";
+import { Paragraph, Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
+import { useViewportGtSm } from "../../FloatingPanel";
 import { Form } from "../../Form";
 import { Select, type SelectOption } from "./index";
 
@@ -31,6 +33,12 @@ const meta: Meta<typeof Select> = {
     options: { control: "object" },
     multiple: { control: "boolean" },
     dismissible: { control: "boolean" },
+    selectedOrder: {
+      control: "select",
+      options: ["selected-first", "stable"],
+      description:
+        "Multi-select list order. selected-first pins chosen rows to the top; stable keeps options order.",
+    },
   },
 };
 
@@ -167,6 +175,18 @@ export const Multiple: Story = {
   render: (args) => <Select {...args} />,
 };
 
+export const MultipleStable: Story = {
+  args: {
+    label: "Options",
+    multiple: true,
+    selectedOrder: "stable",
+    dismissible: true,
+    options: sampleOptions,
+    placeholder: "Select options",
+  },
+  render: (args) => <Select {...args} />,
+};
+
 export const Disabled: Story = {
   args: {
     label: "Disabled Field",
@@ -328,6 +348,20 @@ export const Comparison: StoryObj<typeof Select> = {
       const [customValue, setCustomValue] = useState<string>();
       const [tamaguiValue, setTamaguiValue] = useState<string>();
       const { knobProps } = useResolvedKnobs();
+      const media = useMedia();
+      const viewportGtSm = useViewportGtSm();
+      // Same 860 pivot as AdaptivePopup / FloatingPanel / SHC StackOverlaySurface:
+      // Dialog/Content on wide, Sheet below OVERLAY_BREAKPOINT. Never Adapt.
+      const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.sm === true;
+      const selectItems = (
+        <TamaguiSelect.Group>
+          {sampleOptions.map((option, i) => (
+            <TamaguiSelect.Item key={option.value} value={option.value} index={i}>
+              <TamaguiSelect.ItemText>{option.label}</TamaguiSelect.ItemText>
+            </TamaguiSelect.Item>
+          ))}
+        </TamaguiSelect.Group>
+      );
       return (
         <XStack gap="$4" alignItems="flex-start" padding="$4">
           <YStack gap="$2" width={320}>
@@ -360,15 +394,10 @@ export const Comparison: StoryObj<typeof Select> = {
               <TamaguiSelect.Trigger iconAfter={CaretDownIcon}>
                 <TamaguiSelect.Value placeholder="Select an option" />
               </TamaguiSelect.Trigger>
-              {/* biome-ignore lint/suspicious/noExplicitAny: Tamagui Adapt breakpoint type */}
-              <Adapt when={"sm" as any} platform="touch">
-                {/* LC-24: root transition drives the position slide; without it
-                    the sheet teleports open/closed. */}
+              {!isDesktop ? (
                 <Sheet modal dismissOnSnapToBottom transition={knobProps.transition}>
                   <Sheet.Frame>
-                    <Sheet.ScrollView>
-                      <Adapt.Contents />
-                    </Sheet.ScrollView>
+                    <Sheet.ScrollView>{selectItems}</Sheet.ScrollView>
                   </Sheet.Frame>
                   <Sheet.Overlay
                     transition={knobProps.transition}
@@ -376,40 +405,33 @@ export const Comparison: StoryObj<typeof Select> = {
                     exitStyle={{ opacity: 0 }}
                   />
                 </Sheet>
-              </Adapt>
-              <TamaguiSelect.Content {...({ zIndex: 200000 } as any)}>
-                <TamaguiSelect.ScrollUpButton
-                  alignItems="center"
-                  justifyContent="center"
-                  position="relative"
-                  width="100%"
-                  height="$3"
-                >
-                  <YStack zIndex={10}>
-                    <CaretUpIcon size={20} />
-                  </YStack>
-                </TamaguiSelect.ScrollUpButton>
-                <TamaguiSelect.Viewport minWidth={200}>
-                  <TamaguiSelect.Group>
-                    {sampleOptions.map((option, i) => (
-                      <TamaguiSelect.Item key={option.value} value={option.value} index={i}>
-                        <TamaguiSelect.ItemText>{option.label}</TamaguiSelect.ItemText>
-                      </TamaguiSelect.Item>
-                    ))}
-                  </TamaguiSelect.Group>
-                </TamaguiSelect.Viewport>
-                <TamaguiSelect.ScrollDownButton
-                  alignItems="center"
-                  justifyContent="center"
-                  position="relative"
-                  width="100%"
-                  height="$3"
-                >
-                  <YStack zIndex={10}>
-                    <CaretDownIcon size={20} />
-                  </YStack>
-                </TamaguiSelect.ScrollDownButton>
-              </TamaguiSelect.Content>
+              ) : (
+                <TamaguiSelect.Content {...({ zIndex: 200000 } as never)}>
+                  <TamaguiSelect.ScrollUpButton
+                    alignItems="center"
+                    justifyContent="center"
+                    position="relative"
+                    width="100%"
+                    height="$3"
+                  >
+                    <YStack zIndex={10}>
+                      <CaretUpIcon size={20} />
+                    </YStack>
+                  </TamaguiSelect.ScrollUpButton>
+                  <TamaguiSelect.Viewport minWidth={200}>{selectItems}</TamaguiSelect.Viewport>
+                  <TamaguiSelect.ScrollDownButton
+                    alignItems="center"
+                    justifyContent="center"
+                    position="relative"
+                    width="100%"
+                    height="$3"
+                  >
+                    <YStack zIndex={10}>
+                      <CaretDownIcon size={20} />
+                    </YStack>
+                  </TamaguiSelect.ScrollDownButton>
+                </TamaguiSelect.Content>
+              )}
             </TamaguiSelect>
           </YStack>
         </XStack>
@@ -424,3 +446,30 @@ export const Comparison: StoryObj<typeof Select> = {
 export const SkeletonState: Story = {
   args: { label: "Country", options: countryOptions, 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: "us" },
+      { id: "2", label: "Beta", value: "ca" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Select",
+        field: "select",
+        fieldProps: { options: countryOptions, placeholder: "Select a country" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Select/index.tsx

@@ -17,17 +17,18 @@ import {
   keyboardFocusRingProps,
   menuRowFrame,
   sizeRecipeForToken,
+  useGlyphColor,
   useResolvedKnobs,
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
-import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts, FocusContext } from "../../InputParts";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps";
 import { warnSelectTooFewOptions } from "../../shared/devWarn";
 import {
   getFieldError,
@@ -48,6 +49,7 @@ import { zIndex } from "../../shared/zIndex";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { t } from "../../shared/t";
+import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -85,6 +87,11 @@ export interface SelectProps {
   placeholder?: string;
   groupLabel?: string;
   multiple?: boolean;
+  /**
+   * Multi-select list order. `selected-first` (default) pins chosen rows to the
+   * top, alphabetically among themselves. `stable` keeps `options` order.
+   */
+  selectedOrder?: SelectedOrder;
   /** Show dismiss button on badges to remove selected items (only applies when multiple=true) */
   dismissible?: boolean;
   /** When true, renders a skeleton placeholder instead of the select */
@@ -262,6 +269,29 @@ function selectItemRingProps(isActive: boolean, kbNav: boolean) {
   return { ...selectRowOutlineRest, "data-kb-ring": undefined };
 }
 
+/**
+ * Resolve the LC-05 selected-mark token to a real paint (MPO-63).
+ *
+ * MPO-65 put `formSelectedColors.mark` ("$accentBackground") on the tick, but a
+ * phosphor glyph is NOT a Tamagui styled component: its IconBase writes the
+ * prop straight into `<svg fill>`. On web "$accentBackground" is not a valid
+ * paint, so the declaration is dropped and `fill` falls back to its initial
+ * value — an opaque BLACK tick, measured 1.19:1 against the `$color2` selected
+ * row. On native the shim can only resolve a token the theme in scope actually
+ * carries, and the component sub-themes carry no `accentBackground` at all.
+ * Resolve it here, where the value becomes a paint — the same shape as
+ * `mutedColor` in Combobox. Keyed off the ramp constant so the token stays
+ * declared once in colorRamps, and degrading to `$color` ink rather than black
+ * when a narrow sub-theme has no accent step.
+ */
+function useSelectedMarkColor(): string {
+  const theme = useTheme();
+  const entry = (theme as unknown as Record<string, { val?: string } | undefined>)[
+    formSelectedColors.mark.slice(1)
+  ];
+  return entry?.val ?? theme.color?.val ?? "currentColor";
+}
+
 /** Paints the Input.Box ring via FocusContext — keyboard-origin only (LC-71). */
 function SyncKeyboardFocusToBox({ active }: { active: boolean }) {
   const { setFocused } = FocusContext.useStyledContext();
@@ -277,6 +307,8 @@ interface SelectItemHandlers {
   setOpen: (open: boolean) => void;
   knobProps: any;
   textColor: any;
+  /** LC-05 selected mark, already resolved to a paint. */
+  markColor: string;
   allowSelectRef: RefObject<boolean>;
   allowMouseUpRef: RefObject<boolean>;
   selectTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
@@ -409,7 +441,7 @@ const SelectItem = memo(function SelectItem({
       >
         {option.label}
       </Text>
-      {isSelected && <CheckIcon size={14} />}
+      {isSelected && <CheckIcon size={14} color={ctx.markColor} />}
     </SelectRow>
   );
 });
@@ -430,6 +462,7 @@ interface FloatingSelectCoreProps {
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
   groupLabel?: string;
   multiple?: boolean;
+  selectedOrder?: SelectedOrder;
   dismissible?: boolean;
 }
 function FloatingSelectCore({
@@ -445,10 +478,12 @@ function FloatingSelectCore({
   knobProps,
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible,
 }: FloatingSelectCoreProps) {
   const inTableCell = useIsInTableCell();
   const describedBy = useFieldDescribedBy();
+  const glyphColor = useGlyphColor();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [controlledScrolling, setControlledScrolling] = useState(false);
@@ -491,6 +526,7 @@ function FloatingSelectCore({
   );
 
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
 
   const listItemsRef = useRef<Array<HTMLElement | null>>([]);
   const listContentRef = useRef<Array<string | null>>(options.map((option) => option.label));
@@ -511,17 +547,8 @@ function FloatingSelectCore({
       return;
     }
     const selected = Array.isArray(value) ? value : value ? [value] : [];
-    if (selected.length === 0) {
-      sortedOptionsRef.current = options;
-      return;
-    }
-    const selectedSet = new Set(selected);
-    const first = options
-      .filter((o) => selectedSet.has(o.value))
-      .sort((a, b) => a.label.localeCompare(b.label));
-    const rest = options.filter((o) => !selectedSet.has(o.value));
-    sortedOptionsRef.current = [...first, ...rest];
-  }, [options, value, multiple]);
+    sortedOptionsRef.current = orderOptionsBySelected(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
 
   const programmaticScrollRef = useRef(0);
   const pinnedTopRef = useRef(0);
@@ -849,6 +876,7 @@ function FloatingSelectCore({
     setOpen,
     knobProps,
     textColor,
+    markColor,
     allowSelectRef,
     allowMouseUpRef,
     selectTimeoutRef,
@@ -1020,7 +1048,7 @@ function FloatingSelectCore({
           )}
         </View>
         <View paddingInlineEnd="$2" alignSelf="center">
-          <CaretDownIcon size={16} />
+          <CaretDownIcon size={16} color={glyphColor} />
         </View>
       </InputParts.Box>
 
@@ -1168,11 +1196,13 @@ function NativeSelectCore({
   knobProps,
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible,
 }: FloatingSelectCoreProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
   const inTableCell = useIsInTableCell();
+  const glyphColor = useGlyphColor();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(0);
   const listRef = useRef<HTMLElement | null>(null);
@@ -1210,11 +1240,18 @@ function NativeSelectCore({
     [multiple, value, onValueChange],
   );
 
+  const displayOptions = useMemo(() => {
+    if (!multiple) return options;
+    const selected = Array.isArray(value) ? value : value ? [value] : [];
+    return orderOptionsBySelected(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
+
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
   const sheetTransition = knobProps.transition ?? "medium";
-  const hasScrollableContent = options.length > 6;
+  const hasScrollableContent = displayOptions.length > 6;
 
-  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selectedIndex = displayOptions.findIndex((o) => o.value === value);
   useEffect(() => {
     if (open) {
       setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
@@ -1241,7 +1278,7 @@ function NativeSelectCore({
 
   const handleListKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      const count = options.length;
+      const count = displayOptions.length;
       if (count === 0) return;
       const isDown = e.key === "ArrowDown" || e.key === "j";
       const isUp = e.key === "ArrowUp" || e.key === "k";
@@ -1263,12 +1300,12 @@ function NativeSelectCore({
         e.preventDefault();
         e.stopPropagation();
         if (activeIndex != null) {
-          const option = options[activeIndex];
+          const option = displayOptions[activeIndex];
           if (option) handleSelect(option.value);
         }
       }
     },
-    [options, activeIndex, handleSelect, setKbNav],
+    [displayOptions, activeIndex, handleSelect, setKbNav],
   );
 
   const listContent = (
@@ -1302,7 +1339,7 @@ function NativeSelectCore({
           {groupLabel}
         </Text>
       )}
-      {options.map((option, i) => {
+      {displayOptions.map((option, i) => {
         const selected = isSelectedFn(option.value);
         const active = i === activeIndex;
         const row = (
@@ -1355,7 +1392,7 @@ function NativeSelectCore({
             >
               {option.label}
             </Text>
-            {selected && <CheckIcon size={14} />}
+            {selected && <CheckIcon size={14} color={markColor} />}
           </View>
         );
         if (isWeb) return row;
@@ -1495,7 +1532,7 @@ function NativeSelectCore({
             )}
           </View>
           <View paddingInlineEnd="$2" alignSelf="center">
-            <CaretDownIcon size={16} />
+            <CaretDownIcon size={16} color={glyphColor} />
           </View>
         </InputParts.Box>
       }
@@ -1533,6 +1570,7 @@ export function Select({
   placeholder = t("Select an option"),
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible,
   skeleton,
   compact,
@@ -1650,6 +1688,7 @@ export function Select({
         knobProps={knobProps}
         groupLabel={groupLabel}
         multiple={multiple}
+        selectedOrder={selectedOrder}
         dismissible={dismissible}
       />
     );

package/src/fields/Signature/Signature.spec.tsx

@@ -175,6 +175,76 @@ describe("Signature", () => {
   });
 });
 
+describe("design-law", () => {
+  it("does not default export ink to raw black (scheme-aware token / currentColor)", () => {
+    const svg = signatureValueToSvg(inkedValue, 200, 80);
+    expect(svg.toLowerCase()).not.toContain('fill="#000000"');
+    expect(svg.toLowerCase()).not.toContain('fill="#000"');
+    expect(svg.toLowerCase()).not.toContain('fill="black"');
+  });
+
+  it("paints the pad from the input surface token, not raw white", () => {
+    const result = renderWithProviders(
+      <Signature label="Signature" name="sig" clearIcon={clearIcon} />,
+    );
+    const pad = getPad(result.container);
+    const bg = getComputedStyle(pad).backgroundColor;
+    expect(bg).not.toBe("white");
+    expect(bg.replace(/\s/g, "")).not.toMatch(/^rgb\(255,255,255\)$/);
+    expect(bg.replace(/\s/g, "")).not.toMatch(/^#fff(fff)?$/i);
+    expect(pad.getAttribute("data-elevation")).not.toBeTruthy();
+  });
+
+  it("derives pad minHeight from the size token, not a 200px canvas", () => {
+    const small = renderWithProviders(
+      <Signature label="Small" name="s" size="$2" clearIcon={clearIcon} />,
+    );
+    const large = renderWithProviders(
+      <Signature label="Large" name="l" size="$4" clearIcon={clearIcon} />,
+    );
+    const smallH = Number(getPad(small.container).getAttribute("data-min-height"));
+    const largeH = Number(getPad(large.container).getAttribute("data-min-height"));
+    expect(smallH).toBeGreaterThan(0);
+    expect(largeH).toBeGreaterThan(smallH);
+    expect(smallH).not.toBe(200);
+    expect(largeH).not.toBe(200);
+  });
+
+  it("applies the body recipe to the legal-pad mark (no hardcoded 700/18)", () => {
+    const result = renderWithProviders(
+      <Signature label="Signature" name="sig" clearIcon={clearIcon} />,
+    );
+    const mark = result.findTextElement("X") as HTMLElement | undefined;
+    expect(mark).toBeDefined();
+    const weight = getComputedStyle(mark!).fontWeight;
+    expect(weight === "700" || weight === "bold").toBe(false);
+    expect(getComputedStyle(mark!).fontSize).not.toBe("18px");
+  });
+
+  it("supplies a default clear affordance when clearIcon is omitted", () => {
+    const result = renderWithProviders(
+      <Signature label="Signature" name="sig" value={inkedValue} />,
+    );
+    expect(result.findTextElement("Clear")).toBeDefined();
+    // Pad SVG plus the package-default eraser (house Button is role=button, not <button>).
+    expect(result.container.querySelectorAll("svg").length).toBeGreaterThan(1);
+  });
+
+  it("does not record ink while readOnly (SB-M-810)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Signature label="Signature" name="sig" readOnly onChange={onChange} clearIcon={clearIcon} />,
+    );
+    const svg = result.container.querySelector("svg") as SVGSVGElement | null;
+    expect(svg).toBeTruthy();
+    fireEvent.pointerDown(svg!, { pointerId: 1, clientX: 20, clientY: 20, isPrimary: true });
+    fireEvent.pointerMove(svg!, { pointerId: 1, clientX: 80, clientY: 40, isPrimary: true });
+    fireEvent.pointerUp(svg!, { pointerId: 1, clientX: 80, clientY: 40, isPrimary: true });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(getPad(result.container).getAttribute("aria-readonly")).toBe("true");
+  });
+});
+
 describe("signatureValueToSvg", () => {
   it("returns empty for an empty value", () => {
     expect(signatureValueToSvg("")).toBe("");

package/src/fields/Signature/Signature.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 { EraserIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
@@ -173,3 +174,31 @@ export const SkeletonState: Story = {
   args: { label: "Sign Here", skeleton: true },
   render: (args) => <Signature {...args} clearIcon={<EraserIcon size={16} />} />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+/** LC-06: Signature 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: "" },
+      { id: "2", label: "Beta", value: "" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Signature",
+        field: "signature",
+        fieldProps: { clearIcon: <EraserIcon size={16} /> },
+      },
+    ];
+    return (
+      <YStack width="100%" height={320}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};