@zvndev/yable-react 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -631,8 +631,10 @@ interface TableBodyProps<TData extends RowData> {
     table: Table$1<TData>;
     clickableRows?: boolean;
     colgroup?: React__default.ReactNode;
+    /** Stable mousedown handler for the fill handle, lifted from `useFillHandle`. */
+    onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
 }
-declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
+declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, onFillHandleMouseDown, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableCellProps<TData extends RowData> {
     cell: Cell<TData, unknown>;
@@ -641,8 +643,11 @@ interface TableCellProps<TData extends RowData> {
     columnIndex: number;
     isFocused: boolean;
     isTabStop: boolean;
+    /** Mousedown handler for the fill handle; when present and the table has
+     * `enableFillHandle`, the focused cell renders a drag-to-fill corner. */
+    onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
 }
-declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
+declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, onFillHandleMouseDown, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableFooterProps<TData extends RowData> {
     table: Table$1<TData>;

package/dist/index.d.ts

@@ -631,8 +631,10 @@ interface TableBodyProps<TData extends RowData> {
     table: Table$1<TData>;
     clickableRows?: boolean;
     colgroup?: React__default.ReactNode;
+    /** Stable mousedown handler for the fill handle, lifted from `useFillHandle`. */
+    onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
 }
-declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
+declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, onFillHandleMouseDown, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableCellProps<TData extends RowData> {
     cell: Cell<TData, unknown>;
@@ -641,8 +643,11 @@ interface TableCellProps<TData extends RowData> {
     columnIndex: number;
     isFocused: boolean;
     isTabStop: boolean;
+    /** Mousedown handler for the fill handle; when present and the table has
+     * `enableFillHandle`, the focused cell renders a drag-to-fill corner. */
+    onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
 }
-declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
+declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, onFillHandleMouseDown, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableFooterProps<TData extends RowData> {
     table: Table$1<TData>;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { canCellEnterEditMode, functionalUpdate, createTable, getDefaultLocale, getFirstKeyboardCell, getResolvedFocusedCell, detectCellChanges } from '@zvndev/yable-core';
 export { CommitError, FormulaEngine, FormulaError, PivotEngine, UndoStack, aggregationFns, createColumnHelper, createLocale, createUndoRedoIntegration, en, filterFns, formulaFunctions, functionalUpdate, generatePivotColumnDefs, getDefaultLocale, getInitialPivotState, getPivotRowModel, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
-import React3, { createContext, useCallback, useMemo, useContext, useState, useRef, useEffect } from 'react';
+import React4, { createContext, useCallback, useMemo, useContext, useState, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { getInitialRowDragState, moveRow } from '@zvndev/yable-core/features/rowDragging';
@@ -2188,13 +2188,39 @@ function CellStatusBadge(props) {
     }
   );
 }
+function FillHandle({
+  rowIndex,
+  columnIndex,
+  onMouseDown
+}) {
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onMouseDown(rowIndex, columnIndex, e);
+    },
+    [rowIndex, columnIndex, onMouseDown]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "yable-fill-handle",
+      onMouseDown: handleMouseDown,
+      role: "presentation",
+      "aria-hidden": "true",
+      title: "Drag to fill",
+      children: /* @__PURE__ */ jsx("div", { className: "yable-fill-handle-dot" })
+    }
+  );
+}
 function TableCell({
   cell,
   table,
   rowIndex,
   columnIndex,
   isFocused,
-  isTabStop
+  isTabStop,
+  onFillHandleMouseDown
 }) {
   const column = cell.column;
   const isEditing = cell.getIsEditing();
@@ -2243,8 +2269,42 @@ function TableCell({
   } else {
     content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
   }
+  const isGroupRow = cell.row.getIsGrouped();
+  if (isGroupRow) {
+    if (column.id === cell.row.groupingColumnId) {
+      const expanded = cell.row.getIsExpanded();
+      content = /* @__PURE__ */ jsxs("span", { className: "yable-group-cell", style: { paddingLeft: cell.row.depth * 16 }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-group-toggle",
+            "aria-label": expanded ? "Collapse group" : "Expand group",
+            "aria-expanded": expanded,
+            onClick: cell.row.getToggleExpandedHandler(),
+            children: expanded ? "\u25BE" : "\u25B8"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "yable-group-value", children: String(cell.row.groupingValue ?? "") }),
+        /* @__PURE__ */ jsxs("span", { className: "yable-group-count", children: [
+          "(",
+          cell.row.getLeafRows().length,
+          ")"
+        ] })
+      ] });
+    } else {
+      const aggDef = column.columnDef.aggregatedCell;
+      if (typeof aggDef === "function") {
+        content = aggDef(cell.getContext());
+      } else {
+        const aggVal = cell.getValue();
+        content = aggVal == null ? null : aggVal;
+      }
+    }
+  }
   const handleClick = useCallback(
     (e) => {
+      if (cell.row.getIsGrouped()) return;
       table.events.emit("cell:click", {
         cell,
         row: cell.row,
@@ -2310,6 +2370,7 @@ function TableCell({
   const cellStyleDef = column.columnDef.cellStyle;
   const userStyle = typeof cellStyleDef === "function" ? cellStyleDef(cell.getContext()) : cellStyleDef;
   const mergedStyle = userStyle ? { ...style, ...userStyle } : style;
+  const showFillHandle = isFocused && Boolean(table.options.enableFillHandle) && onFillHandleMouseDown != null && !isGroupRow;
   const classNames = [
     "yable-td",
     isFocused && "yable-cell--focused",
@@ -2330,6 +2391,7 @@ function TableCell({
       "data-pinned": pinned || void 0,
       "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
       "data-column-id": column.id,
+      "data-grouped": isGroupRow || void 0,
       "data-row-index": rowIndex,
       "data-column-index": columnIndex,
       "data-cell-selected": isCellSelected || void 0,
@@ -2363,6 +2425,14 @@ function TableCell({
             onRetry: () => void table.retryCommit(cell.row.id, column.id),
             onDismiss: () => table.dismissCommit(cell.row.id, column.id)
           }
+        ),
+        showFillHandle && onFillHandleMouseDown && /* @__PURE__ */ jsx(
+          FillHandle,
+          {
+            rowIndex,
+            columnIndex,
+            onMouseDown: onFillHandleMouseDown
+          }
         )
       ]
     }
@@ -2375,7 +2445,7 @@ function isInteractiveClickTarget(element) {
   );
   return interactive !== null;
 }
-var ErrorBoundary = class extends React3.Component {
+var ErrorBoundary = class extends React4.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -2421,7 +2491,7 @@ var ErrorBoundary = class extends React3.Component {
     return this.props.children;
   }
 };
-var CellErrorBoundary = class extends React3.Component {
+var CellErrorBoundary = class extends React4.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -2494,7 +2564,8 @@ function MasterDetail({
 function TableBody({
   table,
   clickableRows,
-  colgroup
+  colgroup,
+  onFillHandleMouseDown
 }) {
   const rows = table.getRowModel().rows;
   const visibleColumns = table.getVisibleLeafColumns();
@@ -2563,7 +2634,8 @@ function TableBody({
       cellSelectionKey,
       pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
       clickable: clickableRows,
-      pinnedPosition
+      pinnedPosition,
+      onFillHandleMouseDown
     },
     row.id
   );
@@ -2632,6 +2704,7 @@ function TableBody({
                       cellSelectionKey,
                       pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
                       clickable: clickableRows,
+                      onFillHandleMouseDown,
                       virtualStyle: {
                         position: "absolute",
                         top: 0,
@@ -2666,7 +2739,8 @@ function TableRowInner({
   pendingValuesKey: _pendingValuesKey,
   clickable,
   pinnedPosition,
-  virtualStyle
+  virtualStyle,
+  onFillHandleMouseDown
 }) {
   const allCells = row.getAllCells();
   const visibleCells = visibleColumns.map((column) => allCells.find((cell) => cell.column.id === column.id)).filter((cell) => cell != null);
@@ -2746,7 +2820,8 @@ function TableRowInner({
                   rowIndex,
                   columnIndex,
                   isFocused,
-                  isTabStop
+                  isTabStop,
+                  onFillHandleMouseDown
                 }
               )
             },
@@ -2780,7 +2855,7 @@ function areRowPropsEqual(prev, next) {
   if (prev.table !== next.table) return false;
   return true;
 }
-var MemoizedTableRow = React3.memo(TableRowInner, areRowPropsEqual);
+var MemoizedTableRow = React4.memo(TableRowInner, areRowPropsEqual);
 function getPendingValuesKey(values) {
   if (!values) return "";
   return Object.keys(values).sort().map((key) => `${key}:${String(values[key])}`).join("|");
@@ -2998,8 +3073,8 @@ function StatusDivider() {
   return /* @__PURE__ */ jsx("span", { className: "yable-status-bar-divider", "aria-hidden": "true" });
 }
 function PanelGroup({ children }) {
-  const items = React3.Children.toArray(children).filter(Boolean);
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+  const items = React4.Children.toArray(children).filter(Boolean);
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child, i) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(StatusDivider, {}),
     child
   ] }, i)) });
@@ -4002,6 +4077,85 @@ function isEditableTarget(element) {
   }
   return element.isContentEditable;
 }
+function useFillHandle(table, options = {}) {
+  const { enabled = true } = options;
+  const [dragState, setDragState] = useState({
+    isDragging: false,
+    sourceCell: null,
+    currentCell: null
+  });
+  const dragRef = useRef(dragState);
+  dragRef.current = dragState;
+  const onFillHandleMouseDown = useCallback(
+    (rowIndex, columnIndex, e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setDragState({
+        isDragging: true,
+        sourceCell: { rowIndex, columnIndex },
+        currentCell: { rowIndex, columnIndex }
+      });
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    if (!dragState.isDragging) return;
+    const handleMouseMove = (e) => {
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) return;
+      const td = target.closest("td[data-column-id]");
+      const tr = target.closest("tr[data-row-id]");
+      if (!td || !tr) return;
+      const columnId = td.getAttribute("data-column-id");
+      const rowId = tr.getAttribute("data-row-id");
+      if (!columnId || !rowId) return;
+      const rows = table.getRowModel().rows;
+      const columns = table.getVisibleLeafColumns();
+      const rowIndex = rows.findIndex((r) => r.id === rowId);
+      const columnIndex = columns.findIndex((c) => c.id === columnId);
+      if (rowIndex === -1 || columnIndex === -1) return;
+      setDragState((prev) => ({
+        ...prev,
+        currentCell: { rowIndex, columnIndex }
+      }));
+    };
+    const handleMouseUp = () => {
+      const current = dragRef.current;
+      if (current.sourceCell && current.currentCell) {
+        const source = current.sourceCell;
+        const target = current.currentCell;
+        if (source.rowIndex !== target.rowIndex || source.columnIndex !== target.columnIndex) {
+          const sourceRange = {
+            startRow: source.rowIndex,
+            startCol: source.columnIndex,
+            endRow: source.rowIndex,
+            endCol: source.columnIndex
+          };
+          const targetRange = {
+            startRow: Math.min(source.rowIndex, target.rowIndex),
+            startCol: Math.min(source.columnIndex, target.columnIndex),
+            endRow: Math.max(source.rowIndex, target.rowIndex),
+            endCol: Math.max(source.columnIndex, target.columnIndex)
+          };
+          table.fillRange(sourceRange, targetRange);
+        }
+      }
+      setDragState({
+        isDragging: false,
+        sourceCell: null,
+        currentCell: null
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragState.isDragging, table]);
+  return { dragState, onFillHandleMouseDown };
+}
 function filterHeaderGroups(groups, visibleColumnIds) {
   return groups.map((group) => ({
     ...group,
@@ -4125,6 +4279,9 @@ function Table({
   const showColumnVirtualizationShell = canVirtualizeColumns;
   const contextMenu = useContextMenu();
   useKeyboardNavigation(table, { containerRef });
+  const { onFillHandleMouseDown } = useFillHandle(table, {
+    enabled: Boolean(table.options.enableFillHandle)
+  });
   const [announcement, setAnnouncement] = useState("");
   const prevSortingRef = useRef(table.getState().sorting);
   const prevFilterCountRef = useRef(rows.length);
@@ -4212,7 +4369,15 @@ function Table({
       children: [
         colgroup,
         /* @__PURE__ */ jsx(TableHeader, { table: renderTable, floatingFilters: resolvedFloatingFilters }),
-        /* @__PURE__ */ jsx(TableBody, { table: renderTable, clickableRows: resolvedClickableRows, colgroup }),
+        /* @__PURE__ */ jsx(
+          TableBody,
+          {
+            table: renderTable,
+            clickableRows: resolvedClickableRows,
+            colgroup,
+            onFillHandleMouseDown
+          }
+        ),
         footer && /* @__PURE__ */ jsx(TableFooter, { table: renderTable })
       ]
     }
@@ -4900,110 +5065,6 @@ function isEditableTarget2(el) {
   if (el.isContentEditable) return true;
   return false;
 }
-function useFillHandle(table, options = {}) {
-  const { enabled = true } = options;
-  const [dragState, setDragState] = useState({
-    isDragging: false,
-    sourceCell: null,
-    currentCell: null
-  });
-  const dragRef = useRef(dragState);
-  dragRef.current = dragState;
-  const onFillHandleMouseDown = useCallback(
-    (rowIndex, columnIndex, e) => {
-      if (!enabled) return;
-      e.preventDefault();
-      e.stopPropagation();
-      setDragState({
-        isDragging: true,
-        sourceCell: { rowIndex, columnIndex },
-        currentCell: { rowIndex, columnIndex }
-      });
-    },
-    [enabled]
-  );
-  useEffect(() => {
-    if (!dragState.isDragging) return;
-    const handleMouseMove = (e) => {
-      const target = document.elementFromPoint(e.clientX, e.clientY);
-      if (!target) return;
-      const td = target.closest("td[data-column-id]");
-      const tr = target.closest("tr[data-row-id]");
-      if (!td || !tr) return;
-      const columnId = td.getAttribute("data-column-id");
-      const rowId = tr.getAttribute("data-row-id");
-      if (!columnId || !rowId) return;
-      const rows = table.getRowModel().rows;
-      const columns = table.getVisibleLeafColumns();
-      const rowIndex = rows.findIndex((r) => r.id === rowId);
-      const columnIndex = columns.findIndex((c) => c.id === columnId);
-      if (rowIndex === -1 || columnIndex === -1) return;
-      setDragState((prev) => ({
-        ...prev,
-        currentCell: { rowIndex, columnIndex }
-      }));
-    };
-    const handleMouseUp = () => {
-      const current = dragRef.current;
-      if (current.sourceCell && current.currentCell) {
-        const source = current.sourceCell;
-        const target = current.currentCell;
-        if (source.rowIndex !== target.rowIndex || source.columnIndex !== target.columnIndex) {
-          const sourceRange = {
-            startRow: source.rowIndex,
-            startCol: source.columnIndex,
-            endRow: source.rowIndex,
-            endCol: source.columnIndex
-          };
-          const targetRange = {
-            startRow: Math.min(source.rowIndex, target.rowIndex),
-            startCol: Math.min(source.columnIndex, target.columnIndex),
-            endRow: Math.max(source.rowIndex, target.rowIndex),
-            endCol: Math.max(source.columnIndex, target.columnIndex)
-          };
-          table.fillRange(sourceRange, targetRange);
-        }
-      }
-      setDragState({
-        isDragging: false,
-        sourceCell: null,
-        currentCell: null
-      });
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [dragState.isDragging, table]);
-  return { dragState, onFillHandleMouseDown };
-}
-function FillHandle({
-  rowIndex,
-  columnIndex,
-  onMouseDown
-}) {
-  const handleMouseDown = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onMouseDown(rowIndex, columnIndex, e);
-    },
-    [rowIndex, columnIndex, onMouseDown]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "yable-fill-handle",
-      onMouseDown: handleMouseDown,
-      role: "presentation",
-      "aria-hidden": "true",
-      title: "Drag to fill",
-      children: /* @__PURE__ */ jsx("div", { className: "yable-fill-handle-dot" })
-    }
-  );
-}
 function GripIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",