eidos-ui 1.1.0 → 2.0.0

package/dist/{chunk-A5JVDHML.cjs → chunk-2ZENLZEQ.cjs}

@@ -11,7 +11,7 @@
 
 
 
-var _chunkPA4IT2XQcjs = require('./chunk-PA4IT2XQ.cjs');
+var _chunkXVSODE4Kcjs = require('./chunk-XVSODE4K.cjs');
 
 
 var _chunkTROYIUDHcjs = require('./chunk-TROYIUDH.cjs');
@@ -71,6 +71,7 @@ var _reactdom = require('react-dom');
 var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
 var MIN_COLUMN_WIDTH_PX = 100;
+var cellOf = (row, key) => row[key];
 var QUICK_FILTER_RESET_VALUE = "";
 var hasFilterValue = (value) => {
   if (value === void 0 || value === null || value === "") return false;
@@ -84,7 +85,7 @@ function SortableTableRow({
   className,
   children
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = _chunkPA4IT2XQcjs.useSortable.call(void 0, {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = _chunkXVSODE4Kcjs.useSortable.call(void 0, {
     id,
     disabled
   });
@@ -94,7 +95,7 @@ function SortableTableRow({
       ref: setNodeRef,
       className: [className, isDragging ? "eidos-datagrid-row--dragging" : ""].filter(Boolean).join(" "),
       style: {
-        transform: _chunkPA4IT2XQcjs.CSS.Transform.toString(transform),
+        transform: _chunkXVSODE4Kcjs.CSS.Transform.toString(transform),
         transition: _nullishCoalesce(transition, () => ( void 0)),
         opacity: isDragging ? 0.4 : 1
       },
@@ -167,9 +168,9 @@ function ExpandedCardPanel({
 }
 function DataGridInner({
   // ── Existing props ─────────────────────────────────────────────────────────
-  columns,
+  columns: columnsProp,
   data,
-  rowKey = "id",
+  rowKey,
   onChange,
   onRowAdd,
   editable = false,
@@ -219,6 +220,8 @@ function DataGridInner({
   cardViewBreakpoint = 640,
   cardMinWidth = 280
 }) {
+  const columns = columnsProp;
+  const rowKeyField = _nullishCoalesce(rowKey, () => ( "id"));
   const [localData, _setLocalData] = _react.useState.call(void 0, data);
   const localDataRef = _react.useRef.call(void 0, data);
   const [editingCell, _setEditingCell] = _react.useState.call(void 0, null);
@@ -326,15 +329,15 @@ function DataGridInner({
     [isControlledSelection, controlledSelectedRows, internalSelectedKeys]
   );
   const allKeys = _react.useMemo.call(void 0, 
-    () => localData.map((row, idx) => String(_nullishCoalesce(row[rowKey], () => ( idx)))),
-    [localData, rowKey]
+    () => localData.map((row, idx) => String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( idx)))),
+    [localData, rowKeyField]
   );
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
   const someSelected = !allSelected && allKeys.some((k) => selectedSet.has(k));
   const hasSelection = selectedSet.size > 0;
   const selectedItems = _react.useMemo.call(void 0, 
-    () => localData.filter((row, idx) => selectedSet.has(String(_nullishCoalesce(row[rowKey], () => ( idx))))),
-    [localData, selectedSet, rowKey]
+    () => localData.filter((row, idx) => selectedSet.has(String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( idx))))),
+    [localData, selectedSet, rowKeyField]
   );
   const expandedSet = _react.useMemo.call(void 0, 
     () => new Set(isControlledExpansion ? _nullishCoalesce(controlledExpandedRows, () => ( [])) : [...internalExpandedKeys]),
@@ -373,7 +376,7 @@ function DataGridInner({
     if (filterEntries.length === 0) return localData;
     return localData.filter(
       (row) => filterEntries.every(([key, filterValue]) => {
-        const cellValue = row[key];
+        const cellValue = cellOf(row, key);
         if (Array.isArray(filterValue)) {
           return filterValue.includes(String(_nullishCoalesce(cellValue, () => ( ""))));
         }
@@ -394,8 +397,8 @@ function DataGridInner({
   const sortedData = _react.useMemo.call(void 0, () => {
     if (onSortChange || !activeSort) return filteredData;
     return [...filteredData].sort((a, b) => {
-      const aVal = a[activeSort.key];
-      const bVal = b[activeSort.key];
+      const aVal = cellOf(a, activeSort.key);
+      const bVal = cellOf(b, activeSort.key);
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -509,7 +512,7 @@ function DataGridInner({
     localData.forEach((row, rowIndex) => {
       for (const col of columns) {
         if (!isCellEditable(col)) continue;
-        const error = validateCell(col, row[col.key]);
+        const error = validateCell(col, cellOf(row, col.key));
         if (error) errors[cellErrorKey(rowIndex, col.key)] = error;
       }
     });
@@ -575,19 +578,20 @@ function DataGridInner({
   );
   const handleCellClick = _react.useCallback.call(void 0, 
     (rowIndex, col) => {
-      const value = _optionalChain([localDataRef, 'access', _12 => _12.current, 'access', _13 => _13[rowIndex], 'optionalAccess', _14 => _14[col.key]]);
+      const row = localDataRef.current[rowIndex];
+      const value = row === void 0 ? void 0 : cellOf(row, col.key);
       if (col.type === "checkbox") {
         if (!editable || col.editable === false) return;
         const newData = localDataRef.current.map(
-          (row, idx) => idx === rowIndex ? { ...row, [col.key]: !value } : row
+          (row2, idx) => idx === rowIndex ? { ...row2, [col.key]: !value } : row2
         );
         setLocalData(newData);
-        _optionalChain([onChange, 'optionalCall', _15 => _15(newData)]);
+        _optionalChain([onChange, 'optionalCall', _12 => _12(newData)]);
         return;
       }
       if (!isCellEditable(col)) return;
       const cell = editingCellRef.current;
-      if (_optionalChain([cell, 'optionalAccess', _16 => _16.rowIndex]) === rowIndex && _optionalChain([cell, 'optionalAccess', _17 => _17.colKey]) === col.key) return;
+      if (_optionalChain([cell, 'optionalAccess', _13 => _13.rowIndex]) === rowIndex && _optionalChain([cell, 'optionalAccess', _14 => _14.colKey]) === col.key) return;
       if (cell) commitEdit();
       startEdit(rowIndex, col.key, value);
     },
@@ -620,7 +624,7 @@ function DataGridInner({
         commitValue(rowIndex, colKey, editValueRef.current);
         if (next) {
           setEditingCell(next);
-          setEditValue(localDataRef.current[next.rowIndex][next.colKey]);
+          setEditValue(cellOf(localDataRef.current[next.rowIndex], next.colKey));
           setEditError(_nullishCoalesce(cellErrors[cellErrorKey(next.rowIndex, next.colKey)], () => ( null)));
         } else {
           setEditingCell(null);
@@ -644,18 +648,18 @@ function DataGridInner({
     const newRow = onRowAdd();
     const newData = [newRow, ...localDataRef.current];
     setLocalData(newData);
-    _optionalChain([onChange, 'optionalCall', _18 => _18(newData)]);
+    _optionalChain([onChange, 'optionalCall', _15 => _15(newData)]);
     setCurrentPage(1);
   }, [onRowAdd, onChange, setLocalData]);
   const commitSelection = _react.useCallback.call(void 0, 
     (keys) => {
       if (!isControlledSelection) setInternalSelectedKeys(new Set(keys));
       const rows = localDataRef.current.filter(
-        (row, idx) => keys.includes(String(_nullishCoalesce(row[rowKey], () => ( idx))))
+        (row, idx) => keys.includes(String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( idx))))
       );
-      _optionalChain([onSelectionChange, 'optionalCall', _19 => _19(keys, rows)]);
+      _optionalChain([onSelectionChange, 'optionalCall', _16 => _16(keys, rows)]);
     },
-    [isControlledSelection, rowKey, onSelectionChange]
+    [isControlledSelection, rowKeyField, onSelectionChange]
   );
   const toggleRow = _react.useCallback.call(void 0, 
     (key) => {
@@ -671,7 +675,7 @@ function DataGridInner({
   const commitExpanded = _react.useCallback.call(void 0, 
     (keys) => {
       if (!isControlledExpansion) setInternalExpandedKeys(new Set(keys));
-      _optionalChain([onExpandedRowsChange, 'optionalCall', _20 => _20(keys)]);
+      _optionalChain([onExpandedRowsChange, 'optionalCall', _17 => _17(keys)]);
     },
     [isControlledExpansion, onExpandedRowsChange]
   );
@@ -686,11 +690,11 @@ function DataGridInner({
   const handleSortClick = _react.useCallback.call(void 0, 
     (colKey) => {
       if (onSortChange) {
-        const newDir = _optionalChain([currentSort, 'optionalAccess', _21 => _21.key]) === colKey && _optionalChain([currentSort, 'optionalAccess', _22 => _22.direction]) === "asc" ? "desc" : "asc";
+        const newDir = _optionalChain([currentSort, 'optionalAccess', _18 => _18.key]) === colKey && _optionalChain([currentSort, 'optionalAccess', _19 => _19.direction]) === "asc" ? "desc" : "asc";
         onSortChange(colKey, newDir);
       } else {
         setInternalSort((prev) => {
-          if (_optionalChain([prev, 'optionalAccess', _23 => _23.key]) === colKey) {
+          if (_optionalChain([prev, 'optionalAccess', _20 => _20.key]) === colKey) {
             return prev.direction === "asc" ? { key: colKey, direction: "desc" } : null;
           }
           return { key: colKey, direction: "asc" };
@@ -735,7 +739,7 @@ function DataGridInner({
   const handlePageChange = _react.useCallback.call(void 0, 
     (page) => {
       setCurrentPage(page);
-      _optionalChain([onPageChange, 'optionalCall', _24 => _24(page, currentPageSize)]);
+      _optionalChain([onPageChange, 'optionalCall', _21 => _21(page, currentPageSize)]);
     },
     [currentPageSize, onPageChange]
   );
@@ -743,13 +747,13 @@ function DataGridInner({
     (newPageSize) => {
       setCurrentPageSize(newPageSize);
       setCurrentPage(1);
-      _optionalChain([onPageChange, 'optionalCall', _25 => _25(1, newPageSize)]);
+      _optionalChain([onPageChange, 'optionalCall', _22 => _22(1, newPageSize)]);
     },
     [onPageChange]
   );
-  const sensors = _chunkPA4IT2XQcjs.useSensors.call(void 0, 
-    _chunkPA4IT2XQcjs.useSensor.call(void 0, _chunkPA4IT2XQcjs.PointerSensor, { activationConstraint: { distance: 5 } }),
-    _chunkPA4IT2XQcjs.useSensor.call(void 0, _chunkPA4IT2XQcjs.KeyboardSensor)
+  const sensors = _chunkXVSODE4Kcjs.useSensors.call(void 0, 
+    _chunkXVSODE4Kcjs.useSensor.call(void 0, _chunkXVSODE4Kcjs.PointerSensor, { activationConstraint: { distance: 5 } }),
+    _chunkXVSODE4Kcjs.useSensor.call(void 0, _chunkXVSODE4Kcjs.KeyboardSensor)
   );
   const handleRowDragEnd = _react.useCallback.call(void 0, 
     (event) => {
@@ -757,18 +761,18 @@ function DataGridInner({
       const { active, over } = event;
       if (!over || active.id === over.id) return;
       const oldIndex = localDataRef.current.findIndex(
-        (row, i) => String(_nullishCoalesce(row[rowKey], () => ( i))) === String(active.id)
+        (row, i) => String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( i))) === String(active.id)
       );
       const newIndex = localDataRef.current.findIndex(
-        (row, i) => String(_nullishCoalesce(row[rowKey], () => ( i))) === String(over.id)
+        (row, i) => String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( i))) === String(over.id)
       );
       if (oldIndex === -1 || newIndex === -1) return;
-      const newData = _chunkPA4IT2XQcjs.arrayMove.call(void 0, localDataRef.current, oldIndex, newIndex);
+      const newData = _chunkXVSODE4Kcjs.arrayMove.call(void 0, localDataRef.current, oldIndex, newIndex);
       setLocalData(newData);
-      _optionalChain([onChange, 'optionalCall', _26 => _26(newData)]);
-      _optionalChain([onRowReorder, 'optionalCall', _27 => _27(newData)]);
+      _optionalChain([onChange, 'optionalCall', _23 => _23(newData)]);
+      _optionalChain([onRowReorder, 'optionalCall', _24 => _24(newData)]);
     },
-    [draggableRows, rowKey, setLocalData, onChange, onRowReorder]
+    [draggableRows, rowKeyField, setLocalData, onChange, onRowReorder]
   );
   const renderViewCell = (col, value, row, rowIndex) => {
     if (col.renderCell) return col.renderCell(value, row, rowIndex);
@@ -784,7 +788,7 @@ function DataGridInner({
           }
         );
       case "select": {
-        const option = _optionalChain([col, 'access', _28 => _28.options, 'optionalAccess', _29 => _29.find, 'call', _30 => _30((o) => o.value === String(_nullishCoalesce(value, () => ( ""))))]);
+        const option = _optionalChain([col, 'access', _25 => _25.options, 'optionalAccess', _26 => _26.find, 'call', _27 => _27((o) => o.value === String(_nullishCoalesce(value, () => ( ""))))]);
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: option ? option.label : String(_nullishCoalesce(value, () => ( ""))) });
       }
       case "readonly":
@@ -850,7 +854,7 @@ function DataGridInner({
                 (r, i) => i === rowIndex ? { ...r, [col.key]: selected } : r
               );
               setLocalData(newData);
-              _optionalChain([onChange, 'optionalCall', _31 => _31(newData)]);
+              _optionalChain([onChange, 'optionalCall', _28 => _28(newData)]);
               setEditingCell(null);
             },
             clearable: false
@@ -874,8 +878,8 @@ function DataGridInner({
     }
   };
   const renderCardValue = (col, row, localIndex, baseClassName) => {
-    const value = row[col.key];
-    const isEditing = _optionalChain([editingCell, 'optionalAccess', _32 => _32.rowIndex]) === localIndex && _optionalChain([editingCell, 'optionalAccess', _33 => _33.colKey]) === col.key;
+    const value = cellOf(row, col.key);
+    const isEditing = _optionalChain([editingCell, 'optionalAccess', _29 => _29.rowIndex]) === localIndex && _optionalChain([editingCell, 'optionalAccess', _30 => _30.colKey]) === col.key;
     const canEdit = isCellEditable(col);
     const isFlagged = cellErrorKey(localIndex, col.key) in cellErrors;
     const hasError = isEditing && Boolean(editError);
@@ -948,7 +952,7 @@ function DataGridInner({
     [dataColumns]
   );
   const totalCols = dataColumns.length + (showRowNumbers ? 1 : 0) + (actionsColumn ? 1 : 0) + (draggableRows ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0);
-  const rowIds = displayData.map((row, i) => String(_nullishCoalesce(row[rowKey], () => ( i))));
+  const rowIds = displayData.map((row, i) => String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( i))));
   const containerStyle = {};
   if (stickyHeader && maxHeight) {
     containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
@@ -1167,7 +1171,7 @@ function DataGridInner({
               }
             ),
             showFilters && filterDropdownColumns.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkPA4IT2XQcjs.TableFiltersDropdown,
+              _chunkXVSODE4Kcjs.TableFiltersDropdown,
               {
                 columns: filterDropdownColumns,
                 filters: dropdownFilters,
@@ -1186,7 +1190,7 @@ function DataGridInner({
               style: { "--eidos-datagrid-card-min-width": `${cardMinWidth}px` },
               children: displayData.length > 0 ? displayData.map((row, displayIndex) => {
                 const localIndex = localData.indexOf(row);
-                const rowKeyValue = String(_nullishCoalesce(row[rowKey], () => ( displayIndex)));
+                const rowKeyValue = String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( displayIndex)));
                 const isRowSelected = selectable && selectedSet.has(rowKeyValue);
                 const isRowExpanded = expandable && expandedSet.has(rowKeyValue);
                 const canExpandRow = !isRowExpandable || isRowExpandable(row);
@@ -1276,10 +1280,10 @@ function DataGridInner({
             }
           )
         ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkPA4IT2XQcjs.DndContext,
+          _chunkXVSODE4Kcjs.DndContext,
           {
             sensors,
-            collisionDetection: _chunkPA4IT2XQcjs.closestCenter,
+            collisionDetection: _chunkXVSODE4Kcjs.closestCenter,
             onDragEnd: handleRowDragEnd,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-data-grid-scroll", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: ["eidos-data-grid", densityClass].filter(Boolean).join(" "), children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { ref: theadRef, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
@@ -1344,8 +1348,9 @@ function DataGridInner({
                 sortedColumns.map((col) => {
                   const colKey = col.key;
                   const isSortable = !!col.sortable;
-                  const isCurrentlySorted = _optionalChain([activeSort, 'optionalAccess', _34 => _34.key]) === colKey;
+                  const isCurrentlySorted = _optionalChain([activeSort, 'optionalAccess', _31 => _31.key]) === colKey;
                   const sortDir = isCurrentlySorted ? activeSort.direction : null;
+                  const alignClass = `eidos-datagrid-align-${_nullishCoalesce(col.align, () => ( "left"))}`;
                   const { style: pinnedStyle, className: pinnedClass } = getHeaderPinnedProps(colKey);
                   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "th",
@@ -1354,6 +1359,7 @@ function DataGridInner({
                         "eidos-data-grid-header-cell",
                         isSortable && "eidos-datagrid-header-cell--sortable",
                         isCurrentlySorted && "eidos-datagrid-header-cell--sorted",
+                        alignClass,
                         pinnedClass
                       ].filter(Boolean).join(" "),
                       style: {
@@ -1363,7 +1369,7 @@ function DataGridInner({
                       },
                       "data-col-key": colKey,
                       onClick: isSortable ? () => handleSortClick(colKey) : void 0,
-                      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-datagrid-header-content", children: [
+                      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `eidos-datagrid-header-content ${alignClass}`, children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-datagrid-header-label", children: col.header }),
                         isSortable && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-datagrid-sort-icon", children: [
                           sortDir === "asc" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUp, { size: 14 }),
@@ -1383,9 +1389,9 @@ function DataGridInner({
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA4IT2XQcjs.SortableContext, { items: rowIds, strategy: _chunkPA4IT2XQcjs.verticalListSortingStrategy, children: displayData.length > 0 ? displayData.map((row, displayIndex) => {
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXVSODE4Kcjs.SortableContext, { items: rowIds, strategy: _chunkXVSODE4Kcjs.verticalListSortingStrategy, children: displayData.length > 0 ? displayData.map((row, displayIndex) => {
                 const localIndex = localData.indexOf(row);
-                const rowKeyValue = String(_nullishCoalesce(row[rowKey], () => ( displayIndex)));
+                const rowKeyValue = String(_nullishCoalesce(cellOf(row, rowKeyField), () => ( displayIndex)));
                 const isRowSelected = selectable && selectedSet.has(rowKeyValue);
                 const isRowExpanded = expandable && expandedSet.has(rowKeyValue);
                 const canExpandRow = !isRowExpandable || isRowExpandable(row);
@@ -1487,8 +1493,8 @@ function DataGridInner({
                             }
                           ),
                           sortedColumns.map((col) => {
-                            const value = row[col.key];
-                            const isEditing = _optionalChain([editingCell, 'optionalAccess', _35 => _35.rowIndex]) === localIndex && _optionalChain([editingCell, 'optionalAccess', _36 => _36.colKey]) === col.key;
+                            const value = cellOf(row, col.key);
+                            const isEditing = _optionalChain([editingCell, 'optionalAccess', _32 => _32.rowIndex]) === localIndex && _optionalChain([editingCell, 'optionalAccess', _33 => _33.colKey]) === col.key;
                             const canEdit = isCellEditable(col);
                             const isFlagged = cellErrorKey(localIndex, col.key) in cellErrors;
                             const hasError = isEditing && Boolean(editError);
@@ -1500,6 +1506,7 @@ function DataGridInner({
                               isFlagged && !hasError && "eidos-data-grid-cell--has-error",
                               canEdit && !isEditing && "eidos-data-grid-cell--editable",
                               col.type === "readonly" && "eidos-data-grid-cell--readonly",
+                              `eidos-datagrid-align-${_nullishCoalesce(col.align, () => ( "left"))}`,
                               pinnedClass
                             ].filter(Boolean).join(" ");
                             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1606,4 +1613,4 @@ var DataGrid = Object.assign(DataGridInner, { displayName: "DataGrid" });
 
 
 exports.DataGrid = DataGrid;
-//# sourceMappingURL=chunk-A5JVDHML.cjs.map
+//# sourceMappingURL=chunk-2ZENLZEQ.cjs.map