@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/core/Table/TableRow.js

@@ -0,0 +1,254 @@
+'use client';
+import { objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Trash2, MoreVertical } from 'lucide-react';
+import ActionMenu from './ActionMenu.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText } from './helpers.js';
+
+/**
+ * Desktop table row component
+ */
+function TableRow(_ref) {
+  var _theme$accentColor, _theme$rowHover;
+  var row = _ref.row,
+    rowIndexInPage = _ref.rowIndexInPage,
+    startIndex = _ref.startIndex,
+    selectedRows = _ref.selectedRows,
+    expandedRows = _ref.expandedRows,
+    rowClass = _ref.rowClass,
+    stripedRows = _ref.stripedRows,
+    theme = _ref.theme,
+    onRowClick = _ref.onRowClick,
+    hasDetails = _ref.hasDetails,
+    hasDetailsColumn = _ref.hasDetailsColumn,
+    showSerial = _ref.showSerial,
+    selectable = _ref.selectable,
+    visibleColumns = _ref.visibleColumns,
+    cellClass = _ref.cellClass,
+    withAction = _ref.withAction,
+    visibleCount = _ref.visibleCount,
+    DetailsComponent = _ref.DetailsComponent,
+    actionsToUse = _ref.actionsToUse,
+    activeActionRowKey = _ref.activeActionRowKey,
+    activeAnchorEl = _ref.activeAnchorEl,
+    registerActionButton = _ref.registerActionButton,
+    actionMenuRef = _ref.actionMenuRef,
+    toggleExpandRow = _ref.toggleExpandRow,
+    handleSelectRow = _ref.handleSelectRow,
+    toggleActions = _ref.toggleActions,
+    handleOnAction = _ref.handleOnAction,
+    closeActionMenu = _ref.closeActionMenu,
+    renderCell = _ref.renderCell,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? false : _ref$interactive,
+    _ref$activeCell = _ref.activeCell,
+    activeCell = _ref$activeCell === void 0 ? null : _ref$activeCell,
+    _ref$editingCell = _ref.editingCell,
+    editingCell = _ref$editingCell === void 0 ? null : _ref$editingCell,
+    _ref$onCellClick = _ref.onCellClick,
+    onCellClick = _ref$onCellClick === void 0 ? null : _ref$onCellClick,
+    _ref$onCellDoubleClic = _ref.onCellDoubleClick,
+    onCellDoubleClick = _ref$onCellDoubleClic === void 0 ? null : _ref$onCellDoubleClic,
+    _ref$renderInteractiv = _ref.renderInteractiveCellInput,
+    renderInteractiveCellInput = _ref$renderInteractiv === void 0 ? null : _ref$renderInteractiv,
+    _ref$invalidCellSet = _ref.invalidCellSet,
+    invalidCellSet = _ref$invalidCellSet === void 0 ? null : _ref$invalidCellSet,
+    _ref$pendingEdits = _ref.pendingEdits,
+    pendingEdits = _ref$pendingEdits === void 0 ? null : _ref$pendingEdits,
+    _ref$isNewRow = _ref.isNewRow,
+    isNewRow = _ref$isNewRow === void 0 ? false : _ref$isNewRow,
+    _ref$onDeleteNewRow = _ref.onDeleteNewRow,
+    onDeleteNewRow = _ref$onDeleteNewRow === void 0 ? null : _ref$onDeleteNewRow,
+    _ref$showColumnPicker = _ref.showColumnPicker,
+    showColumnPicker = _ref$showColumnPicker === void 0 ? true : _ref$showColumnPicker,
+    _ref$wrapCells = _ref.wrapCells,
+    wrapCells = _ref$wrapCells === void 0 ? false : _ref$wrapCells;
+  var globalIndex = startIndex + rowIndexInPage;
+  var key = getRowKey(row, globalIndex);
+  var actionCellKey = "actions-".concat(key);
+  var isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(key));
+  var isExpanded = Boolean(expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.has(key));
+  // Only this row's actions are resolved. Memoized so that opening one row's
+  // menu (which re-renders every row) does not re-invoke a function-valued
+  // `actions` prop for all the other rows.
+  var _React$useMemo = React.useMemo(function () {
+      return resolveActions(actionsToUse, row, globalIndex);
+    }, [actionsToUse, row, globalIndex]),
+    inlineActions = _React$useMemo.inlineActions,
+    menuActions = _React$useMemo.menuActions;
+  var showDetailsToggle = rowHasDetails(hasDetails, row, globalIndex);
+  var extraRowClass = typeof rowClass === "function" ? rowClass({
+    row: row,
+    rowIndex: globalIndex
+  }) : "";
+  var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+  var stripeColors = theme === null || theme === void 0 ? void 0 : theme.stripedColors;
+  var stripeBg = stripedRows && !isSelected && Array.isArray(stripeColors) && stripeColors.length > 0 ? stripeColors[globalIndex % stripeColors.length] : undefined;
+  var rowKey = isNewRow ? row._key : key;
+  var isRowActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey;
+  var effectiveRow = React.useMemo(function () {
+    if (!interactive || !pendingEdits || !pendingEdits[rowKey]) return row;
+    return _objectSpread2(_objectSpread2({}, row), pendingEdits[rowKey]);
+  }, [interactive, pendingEdits, rowKey, row]);
+  return jsxs(React.Fragment, {
+    children: [jsxs("tr", {
+      style: stripeBg ? {
+        backgroundColor: stripeBg
+      } : undefined,
+      className: cn(theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
+        "cursor-pointer": !!onRowClick,
+        "bg-primary-50": isSelected,
+        "bg-primary-50/20": isRowActive && !isSelected,
+        "bg-amber-50/40": isNewRow && !isSelected && !isRowActive
+      }, safeExtraRowClass),
+      onClick: function onClick() {
+        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(effectiveRow, globalIndex);
+      },
+      children: [hasDetailsColumn && jsx("td", {
+        className: "px-4 py-4 text-sm",
+        children: showDetailsToggle && jsx("button", {
+          type: "button",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            toggleExpandRow(effectiveRow, rowIndexInPage);
+          },
+          "aria-expanded": isExpanded,
+          "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
+          className: "p-1 rounded hover:bg-gray-100",
+          children: isExpanded ? "▾" : "▸"
+        })
+      }), showSerial && jsx("td", {
+        className: "px-4 py-4 whitespace-nowrap text-sm",
+        children: globalIndex + 1
+      }), selectable && jsx("td", {
+        className: "px-6 py-4",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: jsx("input", {
+          type: "checkbox",
+          className: "rounded border-gray-300",
+          checked: isSelected,
+          onChange: function onChange() {
+            return handleSelectRow(effectiveRow, rowIndexInPage);
+          }
+        })
+      }), visibleColumns.map(function (column, columnIndex) {
+        var extraCellClass = typeof cellClass === "function" ? cellClass({
+          row: effectiveRow,
+          rowIndex: globalIndex,
+          column: column,
+          columnIndex: columnIndex
+        }) : "";
+        var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+        var isCellActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.colKey) === column.key;
+        var isCellEditing = interactive && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key;
+        var isCellInvalid = interactive && (invalidCellSet === null || invalidCellSet === void 0 ? void 0 : invalidCellSet.has("".concat(rowKey, ":").concat(column.key)));
+        // Per-column `wrap` wins over the table-level `wrapCells` default.
+        var wrapCell = typeof column.wrap === "boolean" ? column.wrap : wrapCells;
+        return jsx("td", {
+          title: isCellInvalid ? "Field \"".concat(column.label || column.key, "\" is required or invalid") : undefined,
+          className: cn("px-6 py-4 text-sm transition-all", wrapCell ? "whitespace-normal break-words" : "whitespace-nowrap", {
+            "ring-2 ring-error-500 ring-inset bg-error-50/40 relative z-10": isCellInvalid && !isCellEditing,
+            "ring-2 ring-error-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && isCellInvalid,
+            "ring-2 ring-primary-500 ring-inset bg-primary-50/50 relative z-10": isCellActive && !isCellEditing && !isCellInvalid,
+            "ring-2 ring-primary-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && !isCellInvalid
+          }, safeExtraCellClass),
+          onClick: function onClick() {
+            if (interactive && onCellClick) {
+              onCellClick(rowKey, column.key, effectiveRow, column, globalIndex);
+            }
+          },
+          onDoubleClick: function onDoubleClick() {
+            if (interactive && onCellDoubleClick && column.editable !== false) {
+              onCellDoubleClick(rowKey, column.key, effectiveRow, column, globalIndex);
+            }
+          },
+          children: isCellEditing && renderInteractiveCellInput ? renderInteractiveCellInput(column, effectiveRow, globalIndex, rowKey) : renderCell(column, effectiveRow, globalIndex)
+        }, column.key);
+      }), showColumnPicker && jsx("td", {
+        className: "px-4 py-4"
+      }), withAction && jsx("td", {
+        className: "px-4 py-4 text-sm text-right",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: jsxs("div", {
+          className: "flex items-center justify-end gap-1",
+          children: [isNewRow && onDeleteNewRow && jsx("button", {
+            type: "button",
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              onDeleteNewRow(row._key || key);
+            },
+            className: "p-1.5 text-error-600 hover:text-error-800 hover:bg-error-50 rounded",
+            title: "Delete new row",
+            children: jsx(Trash2, {
+              className: "w-4 h-4"
+            })
+          }), inlineActions.map(function (action, idx) {
+            var _action$icon, _action$name;
+            var actionLabel = getActionLabelText(action);
+            return jsx("button", {
+              type: "button",
+              title: actionLabel,
+              "aria-label": actionLabel,
+              disabled: action.disabled,
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                if (action.disabled) return;
+                handleOnAction(action, row);
+              },
+              className: cn("p-1 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100"),
+              children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
+                className: "text-xs",
+                children: actionLabel
+              })
+            }, (_action$name = action.name) !== null && _action$name !== void 0 ? _action$name : "inline-".concat(idx));
+          }), menuActions.length > 0 && jsxs("div", {
+            className: "relative inline-block",
+            children: [jsx("button", {
+              ref: function ref(el) {
+                return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
+              },
+              onClick: function onClick(e) {
+                return toggleActions(e, actionCellKey, row);
+              },
+              "aria-expanded": activeActionRowKey === actionCellKey,
+              className: "p-1 rounded hover:bg-gray-100",
+              title: "Actions",
+              children: jsx(MoreVertical, {
+                className: "h-4 w-4"
+              })
+            }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
+              actions: menuActions,
+              row: row,
+              onAction: function onAction(action) {
+                return handleOnAction(action, row);
+              },
+              menuRef: actionMenuRef,
+              anchorEl: activeAnchorEl,
+              onClose: closeActionMenu,
+              theme: theme
+            })]
+          })]
+        })
+      })]
+    }), showDetailsToggle && isExpanded && DetailsComponent && jsx("tr", {
+      children: jsx("td", {
+        colSpan: visibleCount,
+        className: cn(_defineProperty(_defineProperty({
+          "px-6 py-4": true
+        }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-gray-50", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-gray-50", true)),
+        children: jsx(DetailsComponent, {
+          row: row,
+          index: globalIndex
+        })
+      })
+    })]
+  }, key);
+}
+
+export { TableRow as default };

package/dist/esm/components/core/Table/constants.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Edit, Trash, Eye } from 'lucide-react';
+
+var DEFAULT_ACTIONS = [{
+  name: "edit",
+  label: "Edit",
+  onClick: function onClick() {
+    return console.log("Edit action clicked");
+  },
+  icon: jsx(Edit, {
+    size: 16
+  })
+}, {
+  name: "delete",
+  label: "Delete",
+  onClick: function onClick() {
+    return console.log("Delete action clicked");
+  },
+  icon: jsx(Trash, {
+    size: 16
+  })
+}, {
+  name: "view",
+  label: "View",
+  onClick: function onClick() {
+    return console.log("View action clicked");
+  },
+  icon: jsx(Eye, {
+    size: 16
+  })
+}];
+
+export { DEFAULT_ACTIONS };

package/dist/esm/components/core/Table/helpers.js

@@ -0,0 +1,124 @@
+import { createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
+/**
+ * Generate a unique key for a row based on id, _id, or index
+ */
+var getRowKey = function getRowKey(row, globalIndex) {
+  if (row == null) return String(globalIndex);
+  if (row._key !== undefined && row._key !== null) return String(row._key);
+  if (row.id !== undefined && row.id !== null) return String(row.id);
+  if (row._id !== undefined && row._id !== null) return String(row._id);
+  return String(globalIndex);
+};
+/**
+ * Resolve a value that may be supplied directly or as a per-row producer.
+ * Used for an action's `label`, `icon`, `hidden` and `disabled`.
+ */
+var callIfFn = function callIfFn(value, row, index) {
+  return typeof value === "function" ? value(row, index) : value;
+};
+/**
+ * Does THIS row get an expand toggle?
+ * `hasDetails` is either a boolean (every row) or a `(row, index)` predicate.
+ */
+var rowHasDetails = function rowHasDetails(hasDetails, row, index) {
+  return typeof hasDetails === "function" ? !!hasDetails(row, index) : !!hasDetails;
+};
+/**
+ * Best-effort accessible name for an action. `label` may be an arbitrary
+ * ReactNode, so fall back to `name` and finally to a generic string.
+ */
+var getActionLabelText = function getActionLabelText(action) {
+  return typeof (action === null || action === void 0 ? void 0 : action.label) === "string" && action.label.trim() || typeof (action === null || action === void 0 ? void 0 : action.name) === "string" && action.name.trim() || "Action";
+};
+/**
+ * Patch `defaults` with `overrides`, matched by `name`.
+ *
+ * Result order is the defaults' order, then any unmatched or unnamed overrides
+ * appended. Each match is a shallow spread, so `{ name: "edit", onClick }`
+ * keeps the default's `label` and `icon`, and `{ name: "delete", hidden: true }`
+ * removes a default without needing a dedicated API.
+ *
+ * @param {Array} overrides consumer-supplied actions
+ * @param {Array} defaults  the built-in action set
+ * @returns {Array}
+ */
+var mergeDefaultActions = function mergeDefaultActions(overrides, defaults) {
+  if (!Array.isArray(overrides)) return defaults;
+  if (!Array.isArray(defaults) || defaults.length === 0) return overrides;
+  var byName = new Map();
+  var _iterator = _createForOfIteratorHelper(overrides),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var action = _step.value;
+      if (action && action.name) byName.set(action.name, action);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var merged = defaults.map(function (d) {
+    return d !== null && d !== void 0 && d.name && byName.has(d.name) ? _objectSpread2(_objectSpread2({}, d), byName.get(d.name)) : d;
+  });
+  var defaultNames = new Set(defaults.map(function (d) {
+    return d === null || d === void 0 ? void 0 : d.name;
+  }).filter(Boolean));
+  var appended = overrides.filter(function (a) {
+    return a && (!a.name || !defaultNames.has(a.name));
+  });
+  return [].concat(_toConsumableArray(merged), _toConsumableArray(appended));
+};
+var EMPTY_RESOLVED = Object.freeze({
+  inlineActions: Object.freeze([]),
+  menuActions: Object.freeze([])
+});
+/**
+ * Normalize the `actions` prop for a single row.
+ *
+ * Accepts either an array or a `(row, index) => array` producer. Entries whose
+ * `hidden` resolves truthy are dropped; `label`/`icon` are resolved against the
+ * row; `disabled` is coerced to a boolean; `inline` entries are split out so
+ * they can render as icon buttons in the cell rather than inside the menu.
+ *
+ * `render` is deliberately passed through untouched — it is already a
+ * `(row) => ReactNode` renderer with its own contract, not a value producer.
+ *
+ * @param {Array|Function} actions array, or (row, index) => array
+ * @param {object} row
+ * @param {number} index the GLOBAL row index (startIndex + rowIndexInPage)
+ * @returns {{ inlineActions: Array, menuActions: Array }}
+ */
+var resolveActions = function resolveActions(actions, row, index) {
+  var source = typeof actions === "function" ? actions(row, index) : actions;
+  if (!Array.isArray(source) || source.length === 0) return EMPTY_RESOLVED;
+  var inlineActions = [];
+  var menuActions = [];
+  var _iterator2 = _createForOfIteratorHelper(source),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var action = _step2.value;
+      if (!action || _typeof(action) !== "object") continue;
+      if (callIfFn(action.hidden, row, index)) continue;
+      var resolved = _objectSpread2(_objectSpread2({}, action), {}, {
+        label: callIfFn(action.label, row, index),
+        icon: callIfFn(action.icon, row, index),
+        disabled: !!callIfFn(action.disabled, row, index),
+        inline: !!action.inline
+      });
+      (resolved.inline ? inlineActions : menuActions).push(resolved);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return {
+    inlineActions: inlineActions,
+    menuActions: menuActions
+  };
+};
+
+export { getActionLabelText, getRowKey, mergeDefaultActions, resolveActions, rowHasDetails };

package/dist/esm/components/core/Table/useClickOutside.js

@@ -0,0 +1,26 @@
+'use client';
+import { useEffect } from 'react';
+
+/**
+ * Custom hook to detect clicks outside of specified refs
+ * @param {Array} refs - Array of React refs to check
+ * @param {boolean} isActive - Whether the hook should be active
+ * @param {Function} onClickOutside - Callback when click is detected outside
+ */
+function useClickOutside(refs, isActive, onClickOutside) {
+  useEffect(function () {
+    if (!isActive) return;
+    var handler = function handler(e) {
+      var isOutside = refs.every(function (ref) {
+        return !ref.current || !ref.current.contains(e.target);
+      });
+      if (isOutside) onClickOutside();
+    };
+    document.addEventListener("mousedown", handler, true);
+    return function () {
+      return document.removeEventListener("mousedown", handler, true);
+    };
+  }, [refs, isActive, onClickOutside]);
+}
+
+export { useClickOutside };