@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/list/RangeFilter.tsx

@@ -1,6 +1,6 @@
 import { Text, XStack, YStack } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Suspense, lazy, type ComponentType } from "react";
+import { Suspense, lazy, useEffect, useRef, useState, type ComponentType } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface RangeFilterProps {
@@ -11,64 +11,151 @@ export interface RangeFilterProps {
   max: number;
   step?: number;
   onChange: (value: number) => void;
+  /**
+   * `row`: label, track and readout on one line (a toolbar band).
+   * `stack`: label and readout above a full-width track (a sidebar or sheet).
+   */
+  layout?: "row" | "stack";
+  testID?: string;
 }
 
-const readoutWidth = 44;
-const trackMinWidth = 100;
+/** Quiet time after the last slider move before the minimum commits. */
+const commitDelayMs = 150;
 
-// The forms Slider is not in the curated GNOME forms shim, so the row
-// resolves lazily and checks the barrel: a target without a Slider renders
-// no row (a label without its control is worse than nothing).
+// A stock Tamagui Slider: a thin token-high track, the filled range from the
+// accent ramp and a token-sized round thumb. Resolved lazily from the
+// tamagui barrel so a target whose tamagui build carries no Slider (the
+// curated GNOME shim) renders no row: a label without its control is worse
+// than nothing.
 const RangeRowLazy = lazy(async () => {
-  const forms = await import("@multiplatform.one/forms");
-  const MaybeSlider = (forms as Partial<typeof forms>).Slider;
+  const tamagui = await import("tamagui");
+  const MaybeSlider = (tamagui as Partial<typeof tamagui>).Slider;
   if (!MaybeSlider) {
     const Absent: ComponentType<RangeFilterProps> = () => null;
     return { default: Absent };
   }
   const Slider = MaybeSlider;
 
-  function RangeRow({ label, value, max, step = 5, onChange }: RangeFilterProps) {
+  function RangeRow({
+    label,
+    value,
+    max,
+    step = 5,
+    onChange,
+    layout = "row",
+    testID,
+  }: RangeFilterProps) {
     const { t } = useTranslation();
     const { knobProps } = useResolvedKnobs();
-    return (
-      <XStack {...knobProps.gap} alignItems="center" flexGrow={1} minWidth={0}>
-        <Text fontSize="$2" color="$color11" flexShrink={0} userSelect="none">
-          {label}
-        </Text>
-        {/* A column on purpose: the Slider's %-width chain collapses to 0
-            inside a row; a column's cross-axis stretch hands the track the
-            flexed width. */}
-        <YStack flexGrow={1} flexShrink={1} minWidth={trackMinWidth} justifyContent="center">
-          <Slider
-            value={[value]}
-            min={0}
-            max={max}
-            step={step}
-            onChange={(values) => {
-              if (typeof values[0] === "number") onChange(values[0]);
-            }}
+    // The thumb follows the finger at once; the list narrows once it rests.
+    const [draft, setDraft] = useState(value);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => setDraft(value), [value]);
+    useEffect(
+      () => () => {
+        if (timer.current) clearTimeout(timer.current);
+      },
+      [],
+    );
+    const move = (next: number) => {
+      setDraft(next);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => onChangeRef.current(next), commitDelayMs);
+    };
+
+    const readout = (
+      <Text
+        {...knobProps.label}
+        color={draft > 0 ? "$color12" : "$color10"}
+        flexShrink={0}
+        userSelect="none"
+        textAlign="right"
+        data-range-readout=""
+      >
+        {draft > 0 ? `${draft}+` : t("Any")}
+      </Text>
+    );
+    const caption = (
+      <Text {...knobProps.label} color="$color11" flexShrink={0} userSelect="none">
+        {label}
+      </Text>
+    );
+    // A column on purpose: the Slider's %-width chain collapses to 0 inside
+    // a row; a column's cross-axis stretch hands the track the flexed width.
+    const track = (
+      // Inset by half the thumb so it stays inside the column at either end.
+      <YStack
+        flexGrow={1}
+        flexShrink={1}
+        minWidth={0}
+        justifyContent="center"
+        paddingHorizontal="$2"
+      >
+        <Slider
+          value={[Math.min(draft, max)]}
+          min={0}
+          max={max}
+          step={step}
+          size="$2"
+          onValueChange={(values: number[]) => {
+            if (typeof values[0] === "number") move(values[0]);
+          }}
+          aria-label={label}
+          testID={testID}
+          data-range-slider=""
+        >
+          <Slider.Track height="$0.5" backgroundColor="$color5" data-slider-part="track">
+            <Slider.TrackActive backgroundColor="$color9" data-slider-part="range" />
+          </Slider.Track>
+          <Slider.Thumb
+            index={0}
+            size="$1.5"
+            circular
+            backgroundColor="$background"
+            borderColor="$color9"
+            borderWidth={knobProps.surface.borderWidth}
+            elevation={knobProps.elevation}
+            hoverStyle={{ borderColor: "$color10" }}
+            pressStyle={{ borderColor: "$color11" }}
+            focusVisibleStyle={{ outlineColor: "$outlineColor", outlineWidth: 2 }}
             aria-label={label}
-            compact
+            data-slider-part="thumb"
           />
+        </Slider>
+      </YStack>
+    );
+
+    if (layout === "stack") {
+      return (
+        <YStack {...knobProps.gapSm} data-range-layout="stack">
+          <XStack alignItems="baseline" {...knobProps.gap}>
+            {caption}
+            {readout}
+          </XStack>
+          {track}
         </YStack>
-        <Text
-          fontSize="$2"
-          fontWeight="600"
-          color={value > 0 ? "$color12" : "$color10"}
-          minWidth={readoutWidth}
-          textAlign="right"
-          userSelect="none"
-        >
-          {value > 0 ? `${value}+` : t("Any")}
-        </Text>
+      );
+    }
+    return (
+      <XStack
+        {...knobProps.gap}
+        alignItems="center"
+        flexGrow={1}
+        minWidth={0}
+        data-range-layout="row"
+      >
+        {caption}
+        {track}
+        {readout}
       </XStack>
     );
   }
   return { default: RangeRow };
 });
 
-/** A "minimum value" filter for a numeric field: label, slider, readout. */
+/** A "minimum value" filter for a numeric field: label, stock slider, readout. */
 export function RangeFilter(props: RangeFilterProps) {
   return (
     <Suspense fallback={null}>

package/src/list/RecordCard.native.tsx

@@ -1,6 +1,6 @@
 import { Card, Text, XStack, YStack } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { FacetBadge } from "./FacetBadge";
@@ -38,42 +38,44 @@ export function RecordCard({
     <Card
       testID={testID}
       {...knobProps.cardSurface}
+      // Full-bleed media: the card has no inset of its own and its radius
+      // clips the image well; the body below carries the inset.
+      padding={0}
+      gap={0}
+      overflow="hidden"
+      data-record-card-bleed=""
       elevation={knobProps.elevation}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, [
+        "boxShadow",
+        "shadowColor",
+        "shadowOffset",
+        "shadowOpacity",
+        "shadowRadius",
+        "elevation",
+      ])}
       pressStyle={{ scale: 0.98, ...elevationState.pressKnobProps }}
       role="button"
       aria-label={title}
       onPress={() => onPress?.()}
     >
-      <YStack gap="$1.5">
+      <YStack gap={0}>
         <YStack position="relative">
-          <ImageWell sources={images} alt={title} tints={tints} inset={0.04} />
-          {code ? (
-            <XStack
-              position="absolute"
-              top="$2"
-              left="$2"
-              {...knobProps.borderRadius}
-              borderWidth={0}
-              backgroundColor="$background08"
-              paddingHorizontal="$1.5"
-              paddingVertical="$0.5"
-              zIndex={1}
-            >
-              <Text fontSize="$1" fontWeight="800" letterSpacing={1} color="$color12">
-                {code}
-              </Text>
-            </XStack>
-          ) : null}
+          <ImageWell
+            sources={images}
+            alt={title}
+            tints={tints}
+            inset={0.04}
+            borderRadius={0}
+            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
+          />
           {favorite ? (
             <XStack position="absolute" top="$1" right="$1" zIndex={2}>
               <Button
-                size="$3"
                 circular
                 chromeless
                 minWidth={knobProps.sizeToken}
                 minHeight={knobProps.sizeToken}
-                transition={knobProps.transition}
+                {...transitionProps(knobProps.motion.control)}
                 backgroundColor="$background08"
                 pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
                 onPress={handleToggleFavorite}
@@ -89,37 +91,44 @@ export function RecordCard({
               />
             </XStack>
           ) : null}
-          {badges.length > 0 ? (
-            <XStack
-              position="absolute"
-              bottom="$2"
-              left="$2"
-              right="$2"
-              gap="$1.5"
-              flexWrap="wrap"
-              zIndex={1}
-              pointerEvents="none"
+        </YStack>
+        <YStack {...knobProps.panelPadding} gap="$1.5">
+          <XStack gap="$2" alignItems="baseline">
+            <Text
+              {...knobProps.heading}
+              fontWeight="700"
+              fontSize="$4"
+              numberOfLines={1}
+              color="$color12"
+              flexShrink={1}
             >
+              {title}
+            </Text>
+            {code ? (
+              <Text
+                fontSize="$2"
+                fontWeight="700"
+                color="$color10"
+                flexShrink={0}
+                {...({ "data-record-card-code": "" } as Record<string, unknown>)}
+              >
+                {code}
+              </Text>
+            ) : null}
+          </XStack>
+          {subtitle ? (
+            <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+          {badges.length > 0 ? (
+            <XStack gap="$1.5" flexWrap="wrap">
               {badges.map((badge) => (
-                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} compact />
+                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
               ))}
             </XStack>
           ) : null}
         </YStack>
-        <YStack gap="$0.5">
-          <Text
-            {...knobProps.heading}
-            fontWeight="700"
-            fontSize="$4"
-            numberOfLines={1}
-            color="$color12"
-          >
-            {title}
-          </Text>
-          <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
-            {subtitle || " "}
-          </Text>
-        </YStack>
       </YStack>
     </Card>
   );

package/src/list/RecordCard.spec.tsx

@@ -0,0 +1,56 @@
+// A record card is full-bleed media over a padded body: the image well runs
+// to the card's edges (the card clips it to its radius) and the name, the
+// code and the facet pills sit in the body under it, not stickered on the art.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { RecordCard } from "./RecordCard";
+
+afterEach(cleanup);
+
+function renderCard() {
+  return renderWithProviders(
+    <RecordCard
+      title="Pikachu"
+      subtitle="Mouse Pokémon"
+      code="#025"
+      images={["https://art.spec.test/25.png"]}
+      tints={["yellow"]}
+      badges={[{ value: "electric", label: "Electric", tint: "yellow" }]}
+      href="/pokemon/pikachu"
+      testID="card"
+    />,
+  );
+}
+
+describe("RecordCard full-bleed media", () => {
+  it("drops the card's inset and clips its media to the radius", () => {
+    renderCard();
+    const card = screen.getByTestId("card");
+    expect(card.hasAttribute("data-record-card-bleed")).toBe(true);
+    expect(card.className).toMatch(/_ox-hidden/);
+    expect(card.className).toMatch(/_oy-hidden/);
+    expect(card.className).toMatch(/_pt-0px/);
+    expect(card.className).toMatch(/_btlr-t-radius/);
+  });
+
+  it("keeps the name, number and type pills out of the media", () => {
+    renderCard();
+    const media = screen.getByTestId("card").querySelector("[data-record-card-media]") as Element;
+    expect(media).not.toBeNull();
+    for (const text of ["Pikachu", "#025", "Electric"]) {
+      const node = screen.getByText(text);
+      expect(media.contains(node)).toBe(false);
+      expect(media.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    }
+  });
+
+  it("reads name, then number, then the pills", () => {
+    renderCard();
+    const name = screen.getByText("Pikachu");
+    const code = screen.getByText("#025");
+    const pill = screen.getByText("Electric");
+    expect(name.compareDocumentPosition(code) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(code.compareDocumentPosition(pill) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/list/RecordCard.tsx

@@ -1,6 +1,7 @@
 import { Anchor, Card, Text, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import {
+  transitionProps,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
@@ -116,9 +117,22 @@ export function RecordCard({
       testID={testID}
       position="relative"
       {...knobProps.cardSurface}
+      // Full-bleed media: the card has no inset of its own and its radius
+      // clips the image well; the body below carries the inset.
+      padding={0}
+      gap={0}
+      overflow="hidden"
+      data-record-card-bleed=""
       elevation={knobProps.elevation}
       cursor="pointer"
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, [
+        "boxShadow",
+        "shadowColor",
+        "shadowOffset",
+        "shadowOpacity",
+        "shadowRadius",
+        "elevation",
+      ])}
       hoverStyle={{ ...elevationState.hoverKnobProps }}
       pressStyle={{ ...elevationState.pressKnobProps }}
       {...(href
@@ -155,34 +169,18 @@ export function RecordCard({
             : undefined)}
         />
       ) : null}
-      <YStack gap="$1.5" zIndex={1} pointerEvents={passThrough}>
+      <YStack gap={0} zIndex={1} pointerEvents={passThrough}>
         <YStack position="relative" pointerEvents={passThrough}>
           <ImageWell
             sources={images}
             alt={title}
             tints={tints}
             inset={0.04}
+            borderRadius={0}
             lazy={lazy}
             pointerEvents={inert}
+            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
           />
-          {code ? (
-            <XStack
-              position="absolute"
-              top="$2"
-              left="$2"
-              {...knobProps.borderRadius}
-              borderWidth={0}
-              backgroundColor="$background08"
-              paddingHorizontal="$1.5"
-              paddingVertical="$0.5"
-              zIndex={1}
-              pointerEvents={inert}
-            >
-              <Text fontSize="$1" fontWeight="800" letterSpacing={1} color="$color12">
-                {code}
-              </Text>
-            </XStack>
-          ) : null}
           {favorite ? (
             <XStack
               position="absolute"
@@ -199,12 +197,11 @@ export function RecordCard({
                 : undefined)}
             >
               <Button
-                size="$3"
                 circular
                 chromeless
                 minWidth={knobProps.sizeToken}
                 minHeight={knobProps.sizeToken}
-                transition={knobProps.transition}
+                {...transitionProps(knobProps.motion.control)}
                 backgroundColor="$background08"
                 hoverStyle={{ backgroundColor: "$background", scale: 1.08 }}
                 pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
@@ -223,37 +220,44 @@ export function RecordCard({
               />
             </XStack>
           ) : null}
-          {badges.length > 0 ? (
-            <XStack
-              position="absolute"
-              bottom="$2"
-              left="$2"
-              right="$2"
-              gap="$1.5"
-              flexWrap="wrap"
-              zIndex={1}
-              pointerEvents="none"
+        </YStack>
+        <YStack {...knobProps.panelPadding} gap="$1.5" pointerEvents={inert}>
+          <XStack gap="$2" alignItems="baseline">
+            <Text
+              {...knobProps.heading}
+              fontWeight="700"
+              fontSize="$4"
+              numberOfLines={1}
+              color="$color12"
+              flexShrink={1}
             >
+              {title}
+            </Text>
+            {code ? (
+              <Text
+                fontSize="$2"
+                fontWeight="700"
+                color="$color10"
+                flexShrink={0}
+                {...({ "data-record-card-code": "" } as Record<string, unknown>)}
+              >
+                {code}
+              </Text>
+            ) : null}
+          </XStack>
+          {subtitle ? (
+            <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+          {badges.length > 0 ? (
+            <XStack gap="$1.5" flexWrap="wrap">
               {badges.map((badge) => (
-                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} compact />
+                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
               ))}
             </XStack>
           ) : null}
         </YStack>
-        <YStack gap="$0.5" pointerEvents={inert}>
-          <Text
-            {...knobProps.heading}
-            fontWeight="700"
-            fontSize="$4"
-            numberOfLines={1}
-            color="$color12"
-          >
-            {title}
-          </Text>
-          <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
-            {subtitle || " "}
-          </Text>
-        </YStack>
       </YStack>
     </Card>
   );

package/src/list/listColumns.spec.tsx

@@ -1,9 +1,42 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { buildListColumns } from "./listColumns";
 
+const platform = vi.hoisted(() => ({ web: true }));
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/components")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+
+afterEach(() => {
+  platform.web = true;
+});
+
 describe("document list title", () => {
+  it("lets a native title press reach the row instead of opening a web permalink", () => {
+    platform.web = false;
+    const onRowPress = vi.fn();
+    const column = buildListColumns({
+      t: (_key, fallback) => fallback,
+      getDocHref: (name) => `/backoffice/todo/${name}`,
+    })[0]!;
+    const renderTitle = column.cell;
+    if (typeof renderTitle !== "function") throw new Error("Expected a title cell renderer");
+    renderWithProviders(
+      <div onClick={onRowPress}>
+        {renderTitle({
+          row: { original: { name: "TODO-001" } },
+          getValue: () => "Native title",
+        } as never)}
+      </div>,
+    );
+    expect(screen.queryByRole("link")).toBeNull();
+    fireEvent.click(screen.getByText("Native title"));
+    expect(onRowPress).toHaveBeenCalledOnce();
+  });
   it("constrains a linked title so its single-line text can ellipsize", () => {
     const title = "A long document title that must truncate within the reserved subject width";
     const column = buildListColumns({

package/src/list/listColumns.tsx

@@ -10,7 +10,15 @@
 // of the subject link (LC-74). Extra ID / Last Updated columns stay out —
 // the timestamp lives in the activity cluster.
 import type { ReactNode } from "react";
-import { Avatar, Anchor, Chip, Text, XStack, type ChipColor } from "@multiplatform.one/components";
+import {
+  Avatar,
+  Anchor,
+  Chip,
+  Text,
+  XStack,
+  isWeb,
+  type ChipColor,
+} from "@multiplatform.one/components";
 // House control for the like toggle — the icon rides the Button icon slot
 // (LC-53 GLYPH-SLOT) and the sub-44 circular size resolves the press floor
 // through the house channel (LC-54: 44px box + hitSlop).
@@ -65,6 +73,7 @@ export interface BuildListColumnsArgs {
 }
 
 const NUMERIC_FIELDTYPES = new Set(["Currency", "Float", "Int", "Percent", "Duration"]);
+const DATE_FIELDTYPES = new Set(["Date", "Datetime", "Time"]);
 
 // Fieldtypes whose stored value is markup — list cells render a stripped
 // one-line plain-text preview (desk strip_html parity), never raw HTML.
@@ -432,7 +441,7 @@ export function buildListColumns({
           {label}
         </Text>
       );
-      if (!href) return subject;
+      if (!isWeb || !href) return subject;
       return (
         <Anchor
           href={href}
@@ -454,6 +463,10 @@ export function buildListColumns({
       header: field.label || field.fieldname,
       accessorKey: field.fieldname,
       ...(NUMERIC_FIELDTYPES.has(field.fieldtype) ? { align: "right" as const } : {}),
+      // Numbers and dates are the list row's fixed-width trailing columns.
+      ...(NUMERIC_FIELDTYPES.has(field.fieldtype) || DATE_FIELDTYPES.has(field.fieldtype)
+        ? { meta: { role: "trailing" } }
+        : {}),
       cell: fieldCell(field, meta, onFilterClick),
     });
   }