@equinor/apollo-components 3.6.0-beta.0 → 3.6.0

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, Table, Row, SortingState, OnChangeFn, Cell, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column, Header } from '@tanstack/react-table';
+import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } 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,6 +27,38 @@ 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>;
 }
@@ -76,13 +108,6 @@ 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
-     */
-    getCellColor?: (cell: Cell<T, unknown>) => string;
 }
 type RowSelectionMode = 'single' | 'multiple';
 type TableLayout = 'auto' | 'fixed';
@@ -197,36 +222,6 @@ 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,17 +2603,15 @@ 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 }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
-  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
-function DynamicCell({ cell, cellConfig }) {
-  var _a, _b, _c, _d, _e;
+function DynamicCell({ cell, highlight, getStickyCellColor }) {
+  var _a, _b;
   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,
@@ -2622,7 +2620,7 @@ function DynamicCell({ cell, cellConfig }) {
         style: __spreadValues({
           position: "sticky",
           top: 0,
-          backgroundColor: stickyCellColor != null ? stickyCellColor : "inherit",
+          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
           zIndex: 5,
           backgroundClip: "padding-box",
           display: "table-cell"
@@ -2637,10 +2635,10 @@ function DynamicCell({ cell, cellConfig }) {
       }
     );
   }
-  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 });
+  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 });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: regularCellColor, children: cellContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
@@ -3146,7 +3144,18 @@ 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) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicCell, { cell, cellConfig }, cell.id))
+      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
+        );
+      })
     }
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;

package/dist/index.mjs

@@ -2548,17 +2548,15 @@ var StickyHeaderCell = styled4(StickyCell)`
 // src/cells/DynamicCell.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
-  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = styled5(EdsTable.Cell)`
-  background-color: ${({ backgroundColor }) => backgroundColor ? `${backgroundColor} !important` : `inherit`};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
-function DynamicCell({ cell, cellConfig }) {
-  var _a, _b, _c, _d, _e;
+function DynamicCell({ cell, highlight, getStickyCellColor }) {
+  var _a, _b;
   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,
@@ -2567,7 +2565,7 @@ function DynamicCell({ cell, cellConfig }) {
         style: __spreadValues({
           position: "sticky",
           top: 0,
-          backgroundColor: stickyCellColor != null ? stickyCellColor : "inherit",
+          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
           zIndex: 5,
           backgroundClip: "padding-box",
           display: "table-cell"
@@ -2582,10 +2580,10 @@ function DynamicCell({ cell, cellConfig }) {
       }
     );
   }
-  if ((_e = cell.column.columnDef.meta) == null ? void 0 : _e.sticky) {
-    return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: stickyCellColor, "data-column": cell.column.id, children: cellContent });
+  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 });
   }
-  return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: regularCellColor, children: cellContent });
+  return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
@@ -3099,7 +3097,18 @@ 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) => /* @__PURE__ */ jsx14(DynamicCell, { cell, cellConfig }, cell.id))
+      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
+        );
+      })
     }
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;

package/package.json

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