@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTableBulkActions/index.tsx

@@ -1,23 +1,13 @@
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { downloadBlob } from "@multiplatform.one/platform";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import type React from "react";
+import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { Button, zIndex } from "@multiplatform.one/forms";
-import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { ConfirmDialog, DropdownMenu } from "@multiplatform.one/components";
+import { Text, View, XStack } from "tamagui";
+import type { BulkAction } from "../../types";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
-export interface BulkAction<T = any> {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  confirmMessage?: string;
-  confirmTitle?: string;
-  variant?: "default" | "destructive" | "secondary";
-  onExecute: (selectedItems: T[], clearSelection: () => void) => void | Promise<void>;
-  requiresConfirmation?: boolean;
-  disabled?: boolean;
-}
+export type { BulkAction };
 
 export interface DataTableBulkActionsProps<T = any> {
   selectedItems?: T[];
@@ -26,6 +16,8 @@ export interface DataTableBulkActionsProps<T = any> {
   maxVisibleActions?: number;
   showSelectionCount?: boolean;
   selectionKey?: keyof T;
+  /** Sticky edge for the selection bar (house `bulkBarPlacement`). Default top. */
+  placement?: "top" | "bottom";
 }
 
 export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T>) {
@@ -43,17 +35,54 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
 
   const {
     actions,
-    maxVisibleActions = 3,
+    maxVisibleActions = 5,
     showSelectionCount = true,
     selectionKey: _selectionKey = "id" as keyof T,
+    placement: placementProp,
   } = props;
 
   const [confirmAction, setConfirmAction] = useState<BulkAction<T> | null>(null);
   const [isExecuting, setIsExecuting] = useState<string | null>(null);
   const { knobProps } = useResolvedKnobs();
+  // UX-P04 / Axiom 12: the selection count is accent-hued text on the bar
+  // surface (page), so it needs the page-readable accent — `$accentColor` (the
+  // on-fill foreground) measured 1.88:1 as dark-scheme page text.
+  const countColor = useAccentOnSurface();
+  const placement = placementProp ?? (knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top");
+
+  // DG-TBL-03 scope switch: with page scope, once the visible page is fully
+  // selected offer expanding the selection to every matching (filtered) row.
+  // The count above always reflects the true selection size across pages.
+  // Whether all matching rows are selected is asked of the table directly
+  // (getIsAllRowsSelected = all FILTERED rows) — comparing selectedItems.length
+  // to matchingCount lies when a stale selection outside the current filter
+  // inflates the count.
+  const selectAllScope = ctx?.selectAllScope ?? "page";
+  const matchingCount = ctx ? ctx.table.getFilteredRowModel().rows.length : 0;
+  const showSelectAllMatching = Boolean(
+    ctx &&
+    selectAllScope === "page" &&
+    matchingCount > 0 &&
+    ctx.table.getIsAllPageRowsSelected() &&
+    !ctx.table.getIsAllRowsSelected(),
+  );
+
+  // D-15: selection derives from the CORE row model, so it survives filter
+  // changes and can include rows the current filter hides. The count stays
+  // honest to both the model and the view by annotating the hidden remainder
+  // ("N selected (+M filtered out)") instead of silently counting invisible
+  // rows or pruning the user's selection. Only computable in context mode —
+  // an explicit selectedItems prop carries no filter relationship.
+  const filteredOutCount =
+    props.selectedItems === undefined && ctx
+      ? selectedItems.length - ctx.table.getFilteredSelectedRowModel().rows.length
+      : 0;
 
   const handleExecuteAction = async (action: BulkAction<T>) => {
-    if (action.requiresConfirmation) {
+    // DG-DX-01/02: a bulk destructive action is at least severity medium
+    // (bulk hint), and medium+ requires the confirm gate — so destructive
+    // actions confirm even without an explicit `requiresConfirmation`.
+    if (action.requiresConfirmation || action.variant === "destructive") {
       setConfirmAction(action);
       return;
     }
@@ -72,11 +101,13 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
     }
   };
 
-  const handleConfirmAction = async () => {
-    if (confirmAction) {
-      await executeAction(confirmAction);
-      setConfirmAction(null);
-    }
+  const handleConfirmAction = () => {
+    if (!confirmAction) return;
+    const action = confirmAction;
+    // The canonical dialog closes on confirm; busy feedback lives on the
+    // bulk-bar button (`loading` while executing), mirroring DestructiveAction.
+    setConfirmAction(null);
+    void executeAction(action);
   };
 
   const visibleActions = actions.slice(0, maxVisibleActions);
@@ -96,13 +127,32 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
         gap="$3"
         backgroundColor="$color2"
         borderColor="$color6"
+        position="sticky"
+        top={placement === "top" ? 0 : undefined}
+        bottom={placement === "bottom" ? 0 : undefined}
+        zIndex={zIndex.stickyHeader}
+        data-bulk-bar-placement={placement}
       >
         {showSelectionCount && (
-          <Text fontSize="$3" fontWeight="600" color="$accentColor">
-            {selectedItems.length} selected
+          <Text fontSize="$3" fontWeight="600" color={countColor}>
+            {filteredOutCount > 0
+              ? `${selectedItems.length} selected (+${filteredOutCount} filtered out)`
+              : `${selectedItems.length} selected`}
           </Text>
         )}
 
+        {showSelectAllMatching && (
+          <Button
+            size={knobProps.sizeToken}
+            variant="outlined"
+            onPress={() => ctx?.table.toggleAllRowsSelected(true)}
+            aria-label={`Select all ${matchingCount} matching rows`}
+            {...knobProps.borderRadius}
+          >
+            {`Select all ${matchingCount}`}
+          </Button>
+        )}
+
         <XStack gap="$2" flex={1}>
           {visibleActions.map((action) => (
             <Button
@@ -110,11 +160,15 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
               size={knobProps.sizeToken}
               variant="outlined"
               theme={action.variant === "destructive" ? "red" : undefined}
-              disabled={action.disabled || isExecuting === action.id}
+              disabled={action.disabled}
+              // DG-ST-03: reason renders via the Button explain affordance;
+              // executing is derived busy state (spinner), not a bare disable.
+              disabledReason={action.disabledReason}
+              loading={isExecuting === action.id}
               onPress={() => handleExecuteAction(action)}
               {...knobProps.borderRadius}
             >
-              {isExecuting === action.id ? "..." : action.label}
+              {action.label}
             </Button>
           ))}
 
@@ -139,16 +193,25 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
         </Button>
       </View>
 
-      {/* Confirmation Dialog */}
-      {confirmAction && (
-        <BulkActionConfirmationDialog
-          action={confirmAction}
-          selectedCount={selectedItems.length}
-          onConfirm={handleConfirmAction}
-          onCancel={() => setConfirmAction(null)}
-          isExecuting={isExecuting === confirmAction.id}
-        />
-      )}
+      {/* LC-16: confirm routes through the canonical DestructiveAction→ConfirmDialog
+          gate (alertdialog role, focus trap, Escape cancels, cancel never disabled)
+          instead of a hand-rolled overlay. */}
+      <ConfirmDialog
+        open={confirmAction != null}
+        title={confirmAction ? confirmAction.confirmTitle || `Confirm ${confirmAction.label}` : ""}
+        body={
+          confirmAction
+            ? confirmAction.confirmMessage ||
+              `Are you sure you want to ${confirmAction.label.toLowerCase()} ${selectedItems.length} item${
+                selectedItems.length > 1 ? "s" : ""
+              }?`
+            : undefined
+        }
+        confirmLabel={confirmAction?.label}
+        destructive={confirmAction?.variant === "destructive"}
+        onConfirm={handleConfirmAction}
+        onCancel={() => setConfirmAction(null)}
+      />
     </>
   );
 }
@@ -170,126 +233,28 @@ function BulkActionsOverflowMenu<T = any>({
 }: BulkActionsOverflowMenuProps<T>) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <Popover>
-      <Popover.Trigger asChild>
-        <Button
-          size={knobProps.sizeToken}
-          variant="outlined"
-          icon={<DotsThreeIcon size={16} />}
-          aria-label="More bulk actions"
-          {...knobProps.borderRadius}
-        />
-      </Popover.Trigger>
-
-      <Popover.Content
-        {...{
-          bw: 1,
-          bc: "$borderColor",
-          gap: knobProps.gap.gap,
-          py: knobProps.panelPadding.padding,
-          w: "100%",
-          h: "100%",
-        }}
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
-      >
-        <YStack gap="$1" padding="$2" minWidth={200}>
-          {actions.map((action) => (
-            <Button
-              key={action.id}
-              size={knobProps.sizeToken}
-              variant="outlined"
-              justifyContent="flex-start"
-              disabled={action.disabled || isExecuting === action.id}
-              onPress={() => onExecuteAction(action)}
-              {...knobProps.borderRadius}
-            >
-              {isExecuting === action.id ? "..." : action.label}
-            </Button>
-          ))}
-        </YStack>
-      </Popover.Content>
-    </Popover>
-  );
-}
-
-// Bulk Action Confirmation Dialog
-
-interface BulkActionConfirmationDialogProps<T = any> {
-  action: BulkAction<T>;
-  selectedCount: number;
-  onConfirm: () => void;
-  onCancel: () => void;
-  isExecuting: boolean;
-}
-
-function BulkActionConfirmationDialog<T = any>({
-  action,
-  selectedCount,
-  onConfirm,
-  onCancel,
-  isExecuting,
-}: BulkActionConfirmationDialogProps<T>) {
-  const { knobProps } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const dialogMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
-  return (
-    <View
-      position="absolute"
-      top={0}
-      left={0}
-      right={0}
-      bottom={0}
-      backgroundColor="$shadowColor"
-      alignItems="center"
-      justifyContent="center"
-      zIndex={zIndex.loading}
-      padding="$4"
+    <DropdownMenu
+      items={actions.map((action) => ({
+        key: action.id,
+        label: isExecuting === action.id ? "..." : action.label,
+        icon: action.icon,
+        disabled: action.disabled || isExecuting === action.id,
+        // DG-ST-03: menu rows explain inline; a running action is explained
+        // as busy rather than dangling bare-disabled.
+        disabledReason:
+          action.disabledReason ?? (isExecuting === action.id ? "Running..." : undefined),
+        destructive: action.variant === "destructive",
+        onSelect: () => onExecuteAction(action),
+      }))}
     >
-      <View
-        backgroundColor="$background"
+      <Button
+        size={knobProps.sizeToken}
+        variant="outlined"
+        icon={<DotsThreeIcon size={16} />}
+        aria-label="More bulk actions"
         {...knobProps.borderRadius}
-        {...knobProps.panelPadding}
-        maxWidth={dialogMaxWidth}
-        width="100%"
-        borderColor="$borderColor"
-      >
-        <YStack {...knobProps.gapLg}>
-          <Text fontSize="$5" fontWeight="600">
-            {action.confirmTitle || `Confirm ${action.label}`}
-          </Text>
-
-          <Text fontSize="$3" color="$color10">
-            {action.confirmMessage ||
-              `Are you sure you want to ${action.label.toLowerCase()} ${selectedCount} item${
-                selectedCount > 1 ? "s" : ""
-              }?`}
-          </Text>
-
-          <XStack gap="$3" justifyContent="flex-end">
-            <Button
-              size={knobProps.sizeToken}
-              variant="outlined"
-              onPress={onCancel}
-              disabled={isExecuting}
-            >
-              Cancel
-            </Button>
-            <Button
-              size={knobProps.sizeToken}
-              theme={action.variant === "destructive" ? "red" : undefined}
-              onPress={onConfirm}
-              disabled={isExecuting}
-            >
-              {isExecuting ? "..." : action.label}
-            </Button>
-          </XStack>
-        </YStack>
-      </View>
-    </View>
+      />
+    </DropdownMenu>
   );
 }
 
@@ -383,33 +348,3 @@ export function useRowSelection<T = any>({
 
 // Bulk Actions Helper
 // Note: Removed hardcoded default actions. Users should define their own actions based on their specific needs.
-
-// Utility Functions
-
-export function convertToCSV<T extends object = any>(data: T[]): string {
-  if (data.length === 0) return "";
-
-  const headers = Object.keys(data[0]);
-  const csvRows = [
-    headers.join(","),
-    ...data.map((row) =>
-      headers
-        .map((header) => {
-          const value = row[header as keyof T];
-          // Escape commas and quotes in CSV
-          const stringValue = String(value || "");
-          return stringValue.includes(",") || stringValue.includes('"')
-            ? `"${stringValue.replace(/"/g, '""')}"`
-            : stringValue;
-        })
-        .join(","),
-    ),
-  ];
-
-  return csvRows.join("\n");
-}
-
-export function downloadCSV(content: string, filename: string): void {
-  const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
-  downloadBlob(blob, filename);
-}

package/src/components/DataTableCell/CellModalEditor.native.tsx

@@ -0,0 +1,116 @@
+/**
+ * CellModalEditor (native) — bottom-sheet editor for tall field types.
+ *
+ * The web implementation (./CellModalEditor.tsx) opens a centered Tamagui
+ * Dialog sized with vh/vw units — neither the Dialog portal presentation nor
+ * those units work on device. On native the owner's contract for oversized
+ * cell edits is a bottom sheet, so this variant reuses the forms
+ * FloatingPanel, whose native implementation is a React Native Modal bottom
+ * sheet (same adaptive dialog/sheet split AdaptivePopup implements).
+ *
+ * Same props/API as ./CellModalEditor.tsx, same staging semantics (UX-023 /
+ * Axiom 7 AGENCY): the inner editor edits a local draft seeded on open;
+ * "Done" and backdrop-tap / Android-back commit the draft once through
+ * `onCommit` (LC-21: the cell editor's draft commits on the outside close);
+ * "Cancel" discards it. Cancel is never disabled (LC-30).
+ */
+
+import { FieldDisplay, FloatingPanel, Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useRef, useState } from "react";
+import { Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t";
+import type { CellModalEditorProps } from "./CellModalEditor";
+
+export type { CellModalEditorProps } from "./CellModalEditor";
+
+export function CellModalEditor({
+  field,
+  value,
+  fieldProps,
+  disabled,
+  readOnly,
+  onCommit,
+  children,
+  title,
+}: CellModalEditorProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  // Draft session seeded from the committed value on open (Axiom 11).
+  const [draft, setDraft] = useState<{ value: any } | null>(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  // Cancel flags the close as a discard; Done and backdrop/back commit.
+  const discardRef = useRef(false);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        if (disabled || readOnly) return;
+        discardRef.current = false;
+        const seeded = { value: valueRef.current };
+        draftRef.current = seeded;
+        setDraft(seeded);
+        setOpen(true);
+        return;
+      }
+      const active = draftRef.current;
+      if (!discardRef.current && active && !Object.is(active.value, valueRef.current)) {
+        onCommitRef.current(active.value);
+      }
+      discardRef.current = false;
+      draftRef.current = null;
+      setDraft(null);
+      setOpen(false);
+    },
+    [disabled, readOnly],
+  );
+
+  const handleCancel = useCallback(() => {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  const handleDraftChange = useCallback((next: any) => {
+    draftRef.current = { value: next };
+    setDraft(draftRef.current);
+  }, []);
+
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      disabled={disabled || readOnly}
+      scrollable
+      trigger={
+        <View
+          opacity={disabled ? 0.5 : 1}
+          flexDirection="row"
+          alignItems="center"
+          width="100%"
+          paddingHorizontal="$1"
+          paddingVertical="$1"
+          borderRadius="$2"
+        >
+          <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
+        </View>
+      }
+    >
+      <YStack gap="$3">
+        <Text {...knobProps.heading} fontSize="$5" fontWeight="600">
+          {title ?? t("Edit")}
+        </Text>
+        <YStack minHeight={0}>{children(draft ? draft.value : value, handleDraftChange)}</YStack>
+        <XStack gap="$2" justifyContent="flex-end">
+          {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
+          <Button onPress={handleCancel}>{t("Cancel")}</Button>
+          <Button onPress={() => handleOpenChange(false)}>{t("Done")}</Button>
+        </XStack>
+      </YStack>
+    </FloatingPanel>
+  );
+}

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -3,15 +3,21 @@
  * etc.) in a Tamagui Dialog that opens on cell click. Cell shows a compact
  * `FieldDisplay` summary; click opens a centered modal with the full editor.
  *
- * The inner field calls the row's `onChange` directly (live commits) — the
- * modal is a presentation container, not a staging buffer. "Done" just closes;
- * changes are already saved. This matches Airtable / Notion edit-modal UX.
+ * The modal is a staging buffer (UX-023 / Axiom 7 AGENCY): the inner editor
+ * is wired to a local draft seeded from the committed value on open — nothing
+ * reaches the row while the modal is open. "Done" commits the draft once via
+ * `onCommit`; an outside click also commits (LC-21: a cell editor's draft
+ * still commits on the outside-click close); "Cancel" and Escape discard the
+ * draft and leave the row untouched. Cancel is never disabled (LC-30) and the
+ * footer stays within the two-action dialog budget (LC-31).
  */
 
 import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import { Button, Dialog, Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t";
 
 export interface CellModalEditorProps {
   field: FieldDisplayType;
@@ -19,8 +25,14 @@ export interface CellModalEditorProps {
   fieldProps?: Record<string, any>;
   disabled?: boolean;
   readOnly?: boolean;
-  /** Full editor mounted inside the modal. */
-  children: ReactNode;
+  /** Commits the staged draft to the row. Fires at most once per session. */
+  onCommit: (value: any) => void;
+  /**
+   * Full editor mounted inside the modal, wired to the staged draft: render
+   * with `draftValue` and report edits through `onDraftChange` — never
+   * straight to the row.
+   */
+  children: (draftValue: any, onDraftChange: (value: any) => void) => ReactNode;
   /** Title shown in the modal header. */
   title?: string;
 }
@@ -31,17 +43,63 @@ export function CellModalEditor({
   fieldProps,
   disabled,
   readOnly,
+  onCommit,
   children,
   title,
 }: CellModalEditorProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
+  // Draft session: exists only while the modal is open, seeded from the
+  // committed value so the editor starts at the cell's current value
+  // (Axiom 11 VALUE IS DATA).
+  const [draft, setDraft] = useState<{ value: any } | null>(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  // Escape / Cancel flag the close as a discard before onOpenChange(false)
+  // lands; every other close path (Done, overlay/outside click) commits.
+  const discardRef = useRef(false);
 
   const handleOpen = useCallback(() => {
     if (disabled || readOnly) return;
+    discardRef.current = false;
+    const seeded = { value: valueRef.current };
+    draftRef.current = seeded;
+    setDraft(seeded);
     setOpen(true);
   }, [disabled, readOnly]);
 
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        handleOpen();
+        return;
+      }
+      const active = draftRef.current;
+      if (!discardRef.current && active && !Object.is(active.value, valueRef.current)) {
+        onCommitRef.current(active.value);
+      }
+      discardRef.current = false;
+      draftRef.current = null;
+      setDraft(null);
+      setOpen(false);
+    },
+    [handleOpen],
+  );
+
+  const handleCancel = useCallback(() => {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  const handleDraftChange = useCallback((next: any) => {
+    draftRef.current = { value: next };
+    setDraft(draftRef.current);
+  }, []);
+
   return (
     <>
       <View
@@ -58,7 +116,7 @@ export function CellModalEditor({
       >
         <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
       </View>
-      <Dialog open={open} onOpenChange={setOpen} modal>
+      <Dialog open={open} onOpenChange={handleOpenChange} modal>
         <Dialog.Portal>
           <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
           <Dialog.Content
@@ -70,18 +128,32 @@ export function CellModalEditor({
             maxWidth={720}
             maxHeight="80vh"
             width="90vw"
+            // Escape is a dismissal, not a confirm: mark the pending close as
+            // a discard, then let the Dialog close itself.
+            onEscapeKeyDown={() => {
+              discardRef.current = true;
+            }}
           >
             <Dialog.Title>
               <Text fontSize="$5" fontWeight="600">
-                {title ?? "Edit"}
+                {title ?? t("Edit")}
               </Text>
             </Dialog.Title>
-            <YStack flex={1} minHeight={0} marginTop="$3" marginBottom="$4">
-              {children}
+            {/* flexShrink (not flex-basis 0): in the auto-height dialog a
+                basis-0 wrapper collapses and its children paint over the
+                footer / past the dialog frame (LC-10). The context reset
+                restores full field chrome — the modal is not a table cell,
+                but React context flows through the Dialog portal. */}
+            <YStack flexShrink={1} minHeight={0} marginTop="$3" marginBottom="$4">
+              <TableCellContext.Provider value={{ inTableCell: false }}>
+                {children(draft ? draft.value : value, handleDraftChange)}
+              </TableCellContext.Provider>
             </YStack>
             <XStack gap="$2" justifyContent="flex-end">
+              {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
+              <Button onPress={handleCancel}>{t("Cancel")}</Button>
               <Dialog.Close asChild>
-                <Button>Done</Button>
+                <Button theme="accent">{t("Done")}</Button>
               </Dialog.Close>
             </XStack>
           </Dialog.Content>