@darajs/core 1.23.0 → 1.23.2-alpha.1

package/dist/umd/dara.core.umd.cjs

@@ -27789,8 +27789,10 @@
 `;
   styled.div`
     display: flex;
+    align-items: center;
     gap: 0.5rem;
     width: 100%;
+    line-height: 1;
 `;
   styled.div`
     color: ${(props) => props.theme.colors.grey3};
@@ -39077,6 +39079,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       style: Object.assign(Object.assign(Object.assign({}, floatingStyles), { maxHeight: 800, minWidth: 150, zIndex: 9999 }), style)
     }), { isOpen, children: jsxRuntimeExports.jsx(SectionedList, { items: allowColumnHiding ? [resetFunctions, columnToggles] : [resetFunctions], onSelect: onOptionSelect }, isOpen ? "open" : "closed") })), document.body)] });
   };
+  const { fontSize } = window.getComputedStyle(document.documentElement);
+  const DEFAULT_ROW_HEIGHT = parseFloat(fontSize) * 2.5;
   var __rest$1 = function(s, e2) {
     var t2 = {};
     for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2) && e2.indexOf(p2) < 0)
@@ -39088,8 +39092,6 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       }
     return t2;
   };
-  const { fontSize } = window.getComputedStyle(document.documentElement);
-  const ROW_HEIGHT = parseFloat(fontSize) * 2.5;
   const shouldForwardProp$2 = (prop) => !["isSorted", "onClickRow"].includes(prop);
   const Row = styled.div.withConfig({ shouldForwardProp: shouldForwardProp$2 })`
     cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
@@ -39145,7 +39147,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     align-items: center;
 
     min-width: 80px;
-    height: ${() => `${ROW_HEIGHT}px`};
+    height: ${({ rowHeight }) => `${rowHeight}px`};
 
     color: ${(props) => props.theme.colors.grey6};
 
@@ -39169,7 +39171,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     var _a;
     return areEqual(prevProps, nextProps) && !(((_a = nextProps.data) === null || _a === void 0 ? void 0 : _a.headerGroups) || []).some((headerGroup) => ((headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers) || []).some((header) => header.isResizing));
   };
-  const RenderRow = React__namespace.memo(({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns }, index: index2, style: renderRowStyle }) => {
+  const RenderRow = React__namespace.memo(({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, rowHeight }, index: index2, style: renderRowStyle }) => {
     let row = rows[index2];
     if (getItem) {
       const value = getItem(index2);
@@ -39182,8 +39184,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     if (!row) {
       return jsxRuntimeExports.jsx("div", { children: headerGroups.map((headerGroup, gidx) => jsxRuntimeExports.jsx(RowPlaceholder, { style: {
-        height: ROW_HEIGHT,
-        top: (index2 + 1) * ROW_HEIGHT,
+        height: rowHeight,
+        top: (index2 + 1) * rowHeight,
         width: totalColumnsWidth > width ? totalColumnsWidth : "100%"
       }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
         const headerProps = col.getHeaderProps();
@@ -39201,15 +39203,23 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       }
     };
     const _a = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a, restRow = __rest$1(_a, ["style"]);
-    return React$1.createElement(Row, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index2 + 1) * ROW_HEIGHT, width: totalColumnsWidth > width ? totalColumnsWidth : "100%" }) }), row.cells.map((cell, colIdx) => {
-      var _a2;
+    return React$1.createElement(Row, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), {
+      // The first row is the header row which is not controlled by this rowHeight prop so it needs to be part of the calculation.
+      top: index2 === 0 ? DEFAULT_ROW_HEIGHT : index2 * rowHeight + DEFAULT_ROW_HEIGHT,
+      width: totalColumnsWidth > width ? totalColumnsWidth : "100%"
+    }) }), row.cells.map((cell, colIdx) => {
+      var _a2, _b, _c, _d, _e2;
       const cellProps = cell.getCellProps();
       return React$1.createElement(
         Cell,
-        Object.assign({}, cellProps, { key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a2 = cell.column) === null || _a2 === void 0 ? void 0 : _a2.maxWidth, width: (
+        Object.assign({}, cellProps, { rowHeight, key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a2 = cell.column) === null || _a2 === void 0 ? void 0 : _a2.maxWidth, width: (
           // If width calc has messed up then use the raw width from the column
           cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width
-        ) }) }),
+        ) }), ((_b = mappedColumns[colIdx]) === null || _b === void 0 ? void 0 : _b.sticky) === "left" && typeof ((_c = mappedColumns[colIdx]) === null || _c === void 0 ? void 0 : _c.stickyOffset) === "number" ? {
+          left: `${mappedColumns[colIdx].stickyOffset}px`
+        } : {}), ((_d = mappedColumns[colIdx]) === null || _d === void 0 ? void 0 : _d.sticky) === "right" && typeof ((_e2 = mappedColumns[colIdx]) === null || _e2 === void 0 ? void 0 : _e2.stickyOffset) === "number" ? {
+          right: `${mappedColumns[colIdx].stickyOffset}px`
+        } : {}) }),
         jsxRuntimeExports.jsx(CellContent, { children: cell.render("Cell", {
           colIdx,
           currentEditCell,
@@ -39290,7 +39300,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     justify-content: space-between;
 
     min-width: 80px;
-    height: ${ROW_HEIGHT}px;
+    height: ${DEFAULT_ROW_HEIGHT}px;
 
     color: ${(props) => props.theme.colors.text};
 
@@ -39375,6 +39385,26 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     });
     return [...leftStickyCols, ...nonStickyCols, ...rightStickyCols];
   };
+  const appendStickyOffsets = (columns) => {
+    let leftOffset = 0;
+    let rightOffset = 0;
+    const rightStickyColumnWidths = columns.filter((col) => col.sticky === "right").slice(1).map((col) => parseInt(col.width) || 150);
+    return columns.map((col) => {
+      if (col.sticky === "left") {
+        const nextCol = Object.assign(Object.assign({}, col), { stickyOffset: leftOffset });
+        const width = parseInt(col.width) || 150;
+        leftOffset += width;
+        return nextCol;
+      }
+      if (col.sticky === "right") {
+        rightOffset = rightStickyColumnWidths.reduce((acc, width) => acc + width, 0);
+        const nextCol = Object.assign(Object.assign({}, col), { stickyOffset: rightOffset });
+        rightStickyColumnWidths.shift();
+        return nextCol;
+      }
+      return col;
+    });
+  };
   const filterComponentMap = {
     categorical: CategoricalFilter,
     datetime: DatetimeFilter,
@@ -39392,12 +39422,26 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       return Object.assign(Object.assign({}, col), { Filter: filterComponentMap[col.filter] });
     });
   };
+  const createActionColumn = (actions, accessor, sticky, disableSelectAll = false) => {
+    const width = actions.includes(Actions.SELECT) ? 52 : actions.length * 24 + 24;
+    return {
+      Cell: ActionCell,
+      Header: actions.includes(Actions.SELECT) && !disableSelectAll ? SelectHeader : "",
+      accessor: accessor || "actions",
+      actions,
+      disableSortBy: true,
+      maxWidth: width,
+      minWidth: actions.includes(Actions.SELECT) ? 52 : 48,
+      sticky: sticky || null,
+      width
+    };
+  };
   const cells = {
     DATETIME: DatetimeCell,
     EDIT_INPUT: EditInputCell,
     EDIT_SELECT: EditSelectCell
   };
-  const createItemData$1 = memoizeOne$1((width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns) => ({
+  const createItemData$1 = memoizeOne$1((width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, rowHeight) => ({
     backgroundColor,
     currentEditCell,
     getItem,
@@ -39406,12 +39450,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     onClickRow,
     prepareRow,
     rows,
+    rowHeight,
     throttledClickRow,
     totalColumnsWidth,
     width
   }));
-  const Table = React$1.forwardRef(({ allowHiding, backgroundColor, className, columns, data: data2, getItem, initialSort = [], itemCount, maxRows, onAction, onChange: onChange2, onClickRow, onItemsRendered, onFilter, onSort, showTableOptions, style, tableOptionsStyle }, ref) => {
+  const Table = React$1.forwardRef(({ allowHiding, actions, backgroundColor, className, columns, data: data2, getItem, initialSort = [], itemCount, maxRows, onAction, onChange: onChange2, onClickRow, onItemsRendered, onFilter, onSort, rowHeight, showTableOptions, style, tableOptionsStyle }, ref) => {
     const [currentSortBy, setCurrentSortBy] = React$1.useState(initialSort);
+    const tableRowHeight = rowHeight || DEFAULT_ROW_HEIGHT;
     React$1.useEffect(
       () => {
         setCurrentSortBy(initialSort);
@@ -39441,7 +39487,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       throttledSetEditCell([Number(cell[0]), cell[1]]);
     };
     const infiniteData = React$1.useMemo(() => Array(itemCount).fill(0), [itemCount]);
-    const mappedColumns = React$1.useMemo(() => appendFilterComponents(orderStickyCols(columns)), [columns]);
+    const mappedColumns = React$1.useMemo(() => {
+      let processedColumns = columns;
+      if (actions && actions.length > 0) {
+        const actionColumn = createActionColumn(actions);
+        processedColumns = [...columns, actionColumn];
+      }
+      return appendStickyOffsets(appendFilterComponents(orderStickyCols(processedColumns)));
+    }, [columns, actions]);
     const hasFixedColumns = React$1.useMemo(() => mappedColumns.some((column) => "sticky" in column), [mappedColumns]);
     const totalColumnsWidth = React$1.useMemo(() => mappedColumns.reduce((acc, column) => acc + (parseInt(column.width) || 150), 0), [mappedColumns]);
     const filterTypes = React$1.useMemo(() => ({
@@ -39497,11 +39550,15 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
           const showHeaderCellButtonContainer = showSort || showFilter || showOptions;
           return React$1.createElement(
             HeaderCell,
-            Object.assign({}, headerProps, { key: `col-${gidx}-${cidx}`, style: Object.assign(Object.assign({}, headerProps.style), {
+            Object.assign({}, headerProps, { key: `col-${gidx}-${cidx}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, headerProps.style), {
               maxWidth: col.maxWidth,
               // If width calc has messed up then use the raw width from the column
               width: headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width
-            }) }),
+            }), col.sticky === "left" && typeof col.stickyOffset === "number" ? {
+              left: `${col.stickyOffset}px`
+            } : {}), col.sticky === "right" && typeof col.stickyOffset === "number" ? {
+              right: `${col.stickyOffset}px`
+            } : {}) }),
             jsxRuntimeExports.jsxs(HeaderTooltipContainer, { isPrimitiveHeader: typeof headerContent === "string", children: [jsxRuntimeExports.jsx(HeaderContentWrapper, Object.assign({}, sortProps, { isPrimitiveHeader: typeof headerContent === "string", title: typeof headerContent === "string" ? headerContent : "", children: headerContent })), col.tooltip && jsxRuntimeExports.jsx(Tooltip, { content: col.tooltip, children: jsxRuntimeExports.jsx(TooltipIcon, { icon: faCircleQuestion }) })] }),
             showHeaderCellButtonContainer && jsxRuntimeExports.jsxs(HeaderCellButtonContainer, { children: [jsxRuntimeExports.jsxs(HeaderIconsWrapper, { children: [showSort && jsxRuntimeExports.jsx(HeaderIconWrapper, { children: jsxRuntimeExports.jsx(SortIcon, Object.assign({}, sortProps, { className: "tableSortArrow", icon: getSortIcon(col.isSorted, col.isSortedDesc), isSorted: col.isSorted })) }), showFilter ? jsxRuntimeExports.jsx(FilterContainer, { col }) : null, showOptions && jsxRuntimeExports.jsx(OptionsMenu, { allColumns, allowColumnHiding: allowHiding, numVisibleColumns, resetResizing, setAllFilters, style: tableOptionsStyle })] }), jsxRuntimeExports.jsx(ResizeBorder, Object.assign({}, resizerProps))] })
           );
@@ -39510,28 +39567,15 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       // eslint-disable-next-line react-hooks/exhaustive-deps
       useDeepCompare([tableProps, totalColumnsWidth, headerGroups])
     );
-    return jsxRuntimeExports.jsx(Wrapper$2, Object.assign({}, getTableProps(), { "$hasMaxRows": !!maxRows, className: `${className} ${hasFixedColumns ? "sticky" : ""}`, style: Object.assign({ height: maxRows ? (Math.min(rows.length, maxRows) + 1) * ROW_HEIGHT : "100%" }, style), children: jsxRuntimeExports.jsx(AutoSizer, { children: ({ height, width }) => {
-      return jsxRuntimeExports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: createItemData$1(width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns), itemSize: ROW_HEIGHT, onItemsRendered, style: {
+    return jsxRuntimeExports.jsx(Wrapper$2, Object.assign({}, getTableProps(), { "$hasMaxRows": !!maxRows, className: `${className} ${hasFixedColumns ? "sticky" : ""}`, style: Object.assign({ height: maxRows ? (Math.min(rows.length, maxRows) + 1) * tableRowHeight : "100%" }, style), children: jsxRuntimeExports.jsx(AutoSizer, { children: ({ height, width }) => {
+      return jsxRuntimeExports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: createItemData$1(width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, tableRowHeight), itemSize: tableRowHeight, onItemsRendered, style: {
         overflowX: width < totalColumnsWidth ? "auto" : "hidden",
-        overflowY: height < (rows.length + 1) * ROW_HEIGHT ? "auto" : "hidden"
+        overflowY: height < (rows.length + 1) * tableRowHeight ? "auto" : "hidden"
       }, width, children: RenderRow }, "table-list");
     } }) }));
   });
   Table.displayName = "Table";
-  Table.ActionColumn = (actions, accessor, sticky, disableSelectAll = false) => {
-    const width = actions.includes(Actions.SELECT) ? 52 : actions.length * 24 + 24;
-    return {
-      Cell: ActionCell,
-      Header: actions.includes(Actions.SELECT) && !disableSelectAll ? SelectHeader : "",
-      accessor: accessor || "actions",
-      actions,
-      disableSortBy: true,
-      maxWidth: width,
-      minWidth: actions.includes(Actions.SELECT) ? 52 : 48,
-      sticky: sticky || null,
-      width
-    };
-  };
+  Table.ActionColumn = createActionColumn;
   Table.Actions = Actions;
   Table.cells = cells;
   styled.div`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/core",
-  "version": "1.23.0",
+  "version": "1.23.2-alpha.1",
   "description": "Dara Framework core",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,9 +39,9 @@
     "@babel/preset-env": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@darajs/eslint-config": "1.23.0",
-    "@darajs/prettier-config": "1.23.0",
-    "@darajs/stylelint-config": "1.23.0",
+    "@darajs/eslint-config": "1.23.2-alpha.1",
+    "@darajs/prettier-config": "1.23.2-alpha.1",
+    "@darajs/stylelint-config": "1.23.2-alpha.1",
     "@rollup/plugin-inject": "^4.0.4",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^6.0.0",
@@ -75,10 +75,10 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
-    "@darajs/styled-components": "1.23.0",
-    "@darajs/ui-components": "1.23.0",
-    "@darajs/ui-notifications": "1.23.0",
-    "@darajs/ui-utils": "1.23.0",
+    "@darajs/styled-components": "1.23.2-alpha.1",
+    "@darajs/ui-components": "1.23.2-alpha.1",
+    "@darajs/ui-notifications": "1.23.2-alpha.1",
+    "@darajs/ui-utils": "1.23.2-alpha.1",
     "@fortawesome/fontawesome-free": "~6.4.0",
     "@recoiljs/refine": "^0.1.1",
     "@tanstack/query-core": "^4.40.0",
@@ -117,5 +117,5 @@
   "engines": {
     "node": ">=20.19.0"
   },
-  "gitHead": "1dee57b6df63904db955f9abf4f984040baab0eb"
+  "gitHead": "b74533efadb8254c40fde6d3203d8c1e4bc6067a"
 }