@equinor/apollo-components 3.5.2 → 3.6.0-beta.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
-import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
+import { CellContext, Table, Row, SortingState, OnChangeFn, Cell, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column, Header } from '@tanstack/react-table';
 export { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState, createColumnHelper } from '@tanstack/react-table';
 import * as styled_components from 'styled-components';
 import * as _equinor_eds_core_react from '@equinor/eds-core-react';
@@ -27,38 +27,6 @@ declare const ChipsCell: (props: {
     values?: string[];
 }) => JSX.Element;
 
-type TableCellProps<T> = {
-    cell: Cell<T, unknown>;
-    highlight?: boolean;
-    getStickyCellColor?: (cell: Cell<T, unknown>) => string;
-};
-type StyledStickyCellProps = {
-    highlight?: boolean;
-    backgroundColor?: string;
-};
-declare const StyledStickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<_equinor_eds_core_react.CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & _equinor_eds_core_react.CellProps) & StyledStickyCellProps, never>;
-declare function DynamicCell<T>({ cell, highlight, getStickyCellColor }: TableCellProps<T>): JSX.Element;
-
-interface HeaderCellProps<TData, TValue> {
-    header: Header<TData, TValue>;
-    /** Needed for column resizing */
-    table: Table<TData>;
-}
-declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
-
-type HierarchyCellOptions = {
-    getRowDepth?: () => number;
-    getDisplayName?: () => string;
-};
-declare function HierarchyCell<T>(cell: CellContext<T, any>, options?: HierarchyCellOptions): JSX.Element;
-
-interface PopoverCellProps {
-    id: string;
-    value: string;
-    title?: string | JSX.Element | ReactNode;
-}
-declare function PopoverCell(props: PopoverCellProps): JSX.Element;
-
 interface ColumnSelectProps<T> {
     table: Table<T>;
 }
@@ -86,6 +54,10 @@ interface RowConfig<T> {
     onClick?: (row: Row<T>) => void;
     onMouseEnter?: (row: Row<T>) => void;
     onMouseLeave?: (row: Row<T>) => void;
+    /**
+     * Whatever is returned from this function will be added as a data-id attribute on the tr in the dom.
+     */
+    getDataIdAttribute?: (row: Row<T>) => string | undefined;
 }
 type TruncateMode = 'wrap' | 'hover';
 type SortConfig = {
@@ -104,6 +76,13 @@ interface CellConfig<T> {
      * ***Note**: This only applies to default cells. Custom cells need custom implementation.*
      */
     truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
+    /**
+     * Manually set the cell background color. Prioritized over highlight color.
+     *
+     * @param cell
+     * @returns color in hex, rgb or rgba, undefined to use default
+     */
+    getCellColor?: (cell: Cell<T, unknown>) => string | undefined;
 }
 type RowSelectionMode = 'single' | 'multiple';
 type TableLayout = 'auto' | 'fixed';
@@ -218,6 +197,36 @@ declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTa
 /** Useful in cases where you either have a value, function or undefined. */
 declare function getFunctionValueOrDefault<T extends boolean | string | number, P>(valueOrFn: ((props: P) => T) | T | undefined, fnProps: P, defaultValue: T): T;
 
+type TableCellProps<T> = {
+    cell: Cell<T, unknown>;
+    cellConfig?: CellConfig<T>;
+};
+type StyledStickyCellProps = {
+    backgroundColor?: string;
+};
+declare const StyledStickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<_equinor_eds_core_react.CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & _equinor_eds_core_react.CellProps) & StyledStickyCellProps, never>;
+declare function DynamicCell<T>({ cell, cellConfig }: TableCellProps<T>): JSX.Element;
+
+interface HeaderCellProps<TData, TValue> {
+    header: Header<TData, TValue>;
+    /** Needed for column resizing */
+    table: Table<TData>;
+}
+declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
+
+type HierarchyCellOptions = {
+    getRowDepth?: () => number;
+    getDisplayName?: () => string;
+};
+declare function HierarchyCell<T>(cell: CellContext<T, any>, options?: HierarchyCellOptions): JSX.Element;
+
+interface PopoverCellProps {
+    id: string;
+    value: string;
+    title?: string | JSX.Element | ReactNode;
+}
+declare function PopoverCell(props: PopoverCellProps): JSX.Element;
+
 declare function SelectColumnDef<T>(props: SetRequired<DataTableProps<T>, 'rowSelection'>['rowSelection']): ColumnDef$1<T, any>;
 
 declare const leftCellShadow: styled_components.FlattenSimpleInterpolation;

package/dist/index.js

@@ -2603,15 +2603,17 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
 // src/cells/DynamicCell.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
-  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
+  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
 `;
 var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
-  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
+  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
 `;
-function DynamicCell({ cell, highlight, getStickyCellColor }) {
-  var _a, _b;
+function DynamicCell({ cell, cellConfig }) {
+  var _a, _b, _c, _d, _e;
   const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
   const columnPinningDirection = cell.column.getIsPinned();
+  const stickyCellColor = (_a = cellConfig == null ? void 0 : cellConfig.getStickyCellColor) == null ? void 0 : _a.call(cellConfig, cell);
+  const regularCellColor = (_d = (_b = cellConfig == null ? void 0 : cellConfig.getCellColor) == null ? void 0 : _b.call(cellConfig, cell)) != null ? _d : ((_c = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _c.call(cellConfig, cell)) ? "#d5eaf4" : void 0;
   if (columnPinningDirection) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_eds_core_react5.Table.Cell,
@@ -2620,7 +2622,7 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
         style: __spreadValues({
           position: "sticky",
           top: 0,
-          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
+          backgroundColor: stickyCellColor != null ? stickyCellColor : "inherit",
           zIndex: 5,
           backgroundClip: "padding-box",
           display: "table-cell"
@@ -2635,10 +2637,10 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
       }
     );
   }
-  if ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
+  if ((_e = cell.column.columnDef.meta) == null ? void 0 : _e.sticky) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: stickyCellColor, "data-column": cell.column.id, children: cellContent });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: regularCellColor, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
@@ -3124,17 +3126,19 @@ function TableRow({
   measureElement,
   index
 }) {
-  var _a;
+  var _a, _b;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  const dataIdValue = (_a = rowConfig == null ? void 0 : rowConfig.getDataIdAttribute) == null ? void 0 : _a.call(rowConfig, row);
   const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     StyledTableRow,
     {
       active: row.getIsSelected(),
       "data-index": index,
+      "data-id": dataIdValue,
       ref: measureElement,
       style: {
         cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
-        backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
+        backgroundColor: (_b = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _b.call(rowConfig, row)
       },
       onClick: () => {
         var _a2;
@@ -3142,18 +3146,7 @@ function TableRow({
       },
       onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
       onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
-      children: row.getVisibleCells().map((cell) => {
-        var _a2;
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          DynamicCell,
-          {
-            cell,
-            getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
-            highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
-          },
-          cell.id
-        );
-      })
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicCell, { cell, cellConfig }, cell.id))
     }
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;

package/dist/index.mjs

@@ -2548,15 +2548,17 @@ var StickyHeaderCell = styled4(StickyCell)`
 // src/cells/DynamicCell.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
-  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
+  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
 `;
 var StyledCell = styled5(EdsTable.Cell)`
-  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
+  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
 `;
-function DynamicCell({ cell, highlight, getStickyCellColor }) {
-  var _a, _b;
+function DynamicCell({ cell, cellConfig }) {
+  var _a, _b, _c, _d, _e;
   const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
   const columnPinningDirection = cell.column.getIsPinned();
+  const stickyCellColor = (_a = cellConfig == null ? void 0 : cellConfig.getStickyCellColor) == null ? void 0 : _a.call(cellConfig, cell);
+  const regularCellColor = (_d = (_b = cellConfig == null ? void 0 : cellConfig.getCellColor) == null ? void 0 : _b.call(cellConfig, cell)) != null ? _d : ((_c = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _c.call(cellConfig, cell)) ? "#d5eaf4" : void 0;
   if (columnPinningDirection) {
     return /* @__PURE__ */ jsx5(
       EdsTable.Cell,
@@ -2565,7 +2567,7 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
         style: __spreadValues({
           position: "sticky",
           top: 0,
-          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
+          backgroundColor: stickyCellColor != null ? stickyCellColor : "inherit",
           zIndex: 5,
           backgroundClip: "padding-box",
           display: "table-cell"
@@ -2580,10 +2582,10 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
       }
     );
   }
-  if ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.sticky) {
-    return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
+  if ((_e = cell.column.columnDef.meta) == null ? void 0 : _e.sticky) {
+    return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: stickyCellColor, "data-column": cell.column.id, children: cellContent });
   }
-  return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
+  return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: regularCellColor, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
@@ -3077,17 +3079,19 @@ function TableRow({
   measureElement,
   index
 }) {
-  var _a;
+  var _a, _b;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  const dataIdValue = (_a = rowConfig == null ? void 0 : rowConfig.getDataIdAttribute) == null ? void 0 : _a.call(rowConfig, row);
   const tableRowContent = /* @__PURE__ */ jsx14(
     StyledTableRow,
     {
       active: row.getIsSelected(),
       "data-index": index,
+      "data-id": dataIdValue,
       ref: measureElement,
       style: {
         cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
-        backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
+        backgroundColor: (_b = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _b.call(rowConfig, row)
       },
       onClick: () => {
         var _a2;
@@ -3095,18 +3099,7 @@ function TableRow({
       },
       onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
       onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
-      children: row.getVisibleCells().map((cell) => {
-        var _a2;
-        return /* @__PURE__ */ jsx14(
-          DynamicCell,
-          {
-            cell,
-            getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
-            highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
-          },
-          cell.id
-        );
-      })
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx14(DynamicCell, { cell, cellConfig }, cell.id))
     }
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.5.2",
+  "version": "3.6.0-beta.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",