@eifi1/ui-kit 0.44.0 → 0.46.0

package/dist/components/data-table.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import type { ColumnFilter, FilterValue } from "./data-table-filters.js";
 import type { SortCycle, SortDir, SortState } from "./data-table-sort.js";
 import type { SwipeAction } from "./swipeable-row.js";
+import type { RowActionsCollapse } from "./row-actions.js";
+import type { CommitScope } from "./write-lock.js";
 import { type DataTableLabels } from "./data-table-labels.js";
 import { type LabelOverride } from "../i18n/kit-labels.js";
 export interface DataTableColumn<T> {
@@ -431,9 +433,28 @@ export interface DataTableProps<T> {
      * Mobile only, and deliberately so: the desktop table already has room for an
      * actions column, and a drag gesture on a pointer device is a worse version of a
      * button. Wraps only the row body, so an expansion panel below stays put while the
-     * row above it slides.
+     * row above it slides. The desktop's buttons for the same actions come with it — see
+     * {@link DataTableProps.desktopSwipeActions}.
      */
     mobileSwipeActions?: (row: T) => MobileSwipeActions | null;
+    /**
+     * The desktop half of `mobileSwipeActions` (0.46, keksdose dev#598 — Marcel: every
+     * table whose phone cards swipe gets a desktop actions column with the same actions):
+     * an actions column DERIVED from the very plan the card swipes with, so the two
+     * viewports offer the same functions and cannot drift. Each button runs the swipe's own
+     * `onCommit` — the same confirm, the same undo toast. The reading-end side's actions
+     * first, then the start side's, each once (by `SwipeAction.id`, else by label); a row
+     * whose plan is `null` gets an empty cell. The column is hidden on the phone, where the
+     * actions are the swipes, kept off the column settings, and its tooltips open toward
+     * the row's start.
+     *
+     * On by default wherever `mobileSwipeActions` is given, so a new swipeable table cannot
+     * forget it — except beside `rowActions`, whose column is the desktop's already (pass
+     * `true` or options to add this one too). `false` where the desktop row carries every
+     * one of those actions as its own buttons; say so at the call site. Options:
+     * {@link DataTableDesktopSwipeActions}.
+     */
+    desktopSwipeActions?: boolean | DataTableDesktopSwipeActions<T>;
     /**
      * Renders as a full-width row above the data rows in the desktop table
      * (mobile has no equivalent list-row slot, so it's desktop-only). For a
@@ -616,6 +637,26 @@ export interface MobileSwipeActions {
     /** Committed by dragging physically RIGHT, whatever the direction. */
     right?: SwipeAction[];
 }
+/** How {@link DataTableProps.desktopSwipeActions} draws the column (0.46, dev#598). */
+export interface DataTableDesktopSwipeActions<T> {
+    /** Leave an action out because the row already has its own button for it — keksdose's
+     *  feedback inbox, whose status cell offers `advance` and `wont_do`
+     *  (`feedbackSwipeOmitShown`). Match on `action.id` rather than the translated label. */
+    omit?: (action: SwipeAction, row: T) => boolean;
+    /** The row's name for the "⋯" menu ("Actions for …"). Default: the table's `rowName`. */
+    name?: (row: T) => string | null | undefined;
+    /** {@link RowActionsCollapse}; default `"auto"`. A table whose rows offer more than two
+     *  actions passes `"menu"`, so the column does not switch between icons and a menu. */
+    collapse?: RowActionsCollapse;
+    /**
+     * Whether an action COMMITS, refused with the reason under a locked
+     * `WriteLockProvider` ({@link CommitScope}) — a swipe has no such state, so a plan
+     * usually returns nothing for a locked row and the desktop shows nothing either; with
+     * this the plan can stay and the desktop says why. Per action as a function. Default:
+     * no commit scope (the plan decides).
+     */
+    commit?: CommitScope | ((action: SwipeAction, row: T) => CommitScope | undefined);
+}
 /**
  * The phone sort control's strings (keksdose K10). They are `dataTable` strings —
  * read from the table's resolved labels, so the `labels` prop and the provider's
@@ -637,4 +678,4 @@ export interface DataTableSortLabels {
  *  (DataTableLabels extends DataTableSortLabels; one source for the English). */
 export declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
 import { type TableUrlSync } from "./use-table-state.js";
-export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, desktopSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/data-table.js

@@ -4,7 +4,7 @@ import { createElement } from "react";
 import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Card } from "./card.js";
 import { Spinner } from "./spinner.js";
-import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions.js";
+import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions.js";
 import { useColumnResize } from "./data-table-resize.js";
 import { useRangeSelection } from "./data-table-selection.js";
 import {
@@ -12,6 +12,7 @@ import {
   cleanAttrs,
   columnLabel,
   fromOutside,
+  fromOwnControl,
   logicalAlign,
   resolveDataTableLabels,
   splitCellProps
@@ -39,12 +40,6 @@ const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortDescending: DEFAULT_DATA_TABLE_LABELS.sortDescending
 };
 const flipDir = (d) => d === "asc" ? "desc" : "asc";
-const OWN_CONTROL = 'a[href],button,input,select,textarea,label,summary,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="option"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
-function fromOwnControl(target, row) {
-  if (!(target instanceof Element)) return false;
-  const hit = target.closest(OWN_CONTROL);
-  return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute("data-row-link");
-}
 function moveRowFocus(from, key) {
   if (!(key in ROW_NAV_KEYS)) return false;
   const body = from.parentElement;
@@ -97,6 +92,7 @@ function DataTable({
   mobileCard,
   mobileSort = false,
   mobileSwipeActions,
+  desktopSwipeActions,
   leadingRow,
   density = "comfortable",
   sortCycle = "tri",
@@ -129,7 +125,9 @@ function DataTable({
     rowActions,
     rowName,
     labels,
-    density
+    density,
+    mobileSwipeActions,
+    desktopSwipeActions
   });
   const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : void 0);
   const { announce, regionProps } = useAnnounce();
@@ -314,11 +312,13 @@ function DataTable({
   const totalColSpan = visibleCount + (selection ? 1 : 0);
   const hasFooterColumns = columns.some((c) => c.footer);
   const showFooter = footerProp !== false && hasFooterColumns && sorted.length > 0;
-  const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && c.key !== ROW_ACTIONS_KEY) ?? visibleColumns[0] : void 0;
+  const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && !isTableOwnColumn(c.key)) ?? visibleColumns[0] : void 0;
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   const detailIdBase = useId();
-  const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
+  const ownColumns = columns.filter((c) => isTableOwnColumn(c.key)).length;
+  const ownVisible = visibleColumns.filter((c) => isTableOwnColumn(c.key)).length;
+  const columnsCountLabel = labels.columnsCount(visibleCount - ownVisible, totalCount - ownColumns);
   const isMdUp = !usePhoneLayout();
   const desktopScroller = useRef(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);