@equinor/apollo-components 3.6.0 → 3.7.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, 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,42 +27,11 @@ 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>;
+    columnSelectPlaceholder?: string;
 }
-declare function ColumnSelect<T>({ table }: ColumnSelectProps<T>): JSX.Element;
+declare function ColumnSelect<T>({ table, columnSelectPlaceholder }: ColumnSelectProps<T>): JSX.Element;
 
 interface TableHeaderProps<T> {
     table: Table<T>;
@@ -108,6 +77,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';
@@ -169,6 +145,7 @@ interface DataTableProps<T> {
         enableColumnSelect?: boolean;
         enableGlobalFilterInput?: boolean;
         globalFilterPlaceholder?: string;
+        columnSelectPlaceholder?: string;
         filterFromLeafRows?: boolean;
         /**
          * @deprecated Use `customActionsLeft` instead
@@ -222,6 +199,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
@@ -3008,24 +3010,34 @@ var ActionsWrapper = import_styled_components10.default.div`
   justify-content: flex-end;
   gap: 0.5rem;
 `;
-function ColumnSelect({ table }) {
+function ColumnSelect({ table, columnSelectPlaceholder }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const referenceElement = (0, import_react3.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_eds_core_react10.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_eds_core_react10.Tooltip,
       {
-        "aria-haspopup": true,
-        id: "column-select-anchor",
-        "aria-controls": "column-select-popover",
-        "aria-expanded": isOpen,
-        ref: referenceElement,
-        variant: "ghost_icon",
-        onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "view_column", data: import_eds_icons5.view_column })
+        title: columnSelectPlaceholder ? "" : "Select columns",
+        placement: "left",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_eds_core_react10.Button,
+          {
+            "aria-haspopup": true,
+            id: "column-select-anchor",
+            "aria-controls": "column-select-popover",
+            "aria-expanded": isOpen,
+            ref: referenceElement,
+            variant: columnSelectPlaceholder ? "ghost" : "ghost_icon",
+            onClick: () => setIsOpen(true),
+            children: [
+              columnSelectPlaceholder,
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "view_column", data: import_eds_icons5.view_column })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_eds_core_react10.Popover,
       {
@@ -3144,18 +3156,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;
@@ -3289,7 +3290,7 @@ function TableBanner({
           onChange: (value) => globalFilter.onChange(String(value))
         }
       ),
-      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, { table }),
+      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, { table, columnSelectPlaceholder: bannerConfig.columnSelectPlaceholder }),
       (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
         table.options.data.length.toLocaleString(),
         " /",

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
@@ -2955,24 +2957,34 @@ var ActionsWrapper = styled10.div`
   justify-content: flex-end;
   gap: 0.5rem;
 `;
-function ColumnSelect({ table }) {
+function ColumnSelect({ table, columnSelectPlaceholder }) {
   const [isOpen, setIsOpen] = useState3(false);
   const referenceElement = useRef2(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ jsx11(
-      Button3,
+    /* @__PURE__ */ jsx11(
+      Tooltip,
       {
-        "aria-haspopup": true,
-        id: "column-select-anchor",
-        "aria-controls": "column-select-popover",
-        "aria-expanded": isOpen,
-        ref: referenceElement,
-        variant: "ghost_icon",
-        onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx11(Icon5, { name: "view_column", data: view_column })
+        title: columnSelectPlaceholder ? "" : "Select columns",
+        placement: "left",
+        children: /* @__PURE__ */ jsxs7(
+          Button3,
+          {
+            "aria-haspopup": true,
+            id: "column-select-anchor",
+            "aria-controls": "column-select-popover",
+            "aria-expanded": isOpen,
+            ref: referenceElement,
+            variant: columnSelectPlaceholder ? "ghost" : "ghost_icon",
+            onClick: () => setIsOpen(true),
+            children: [
+              columnSelectPlaceholder,
+              /* @__PURE__ */ jsx11(Icon5, { name: "view_column", data: view_column })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxs7(
       Popover2,
       {
@@ -3097,18 +3109,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;
@@ -3242,7 +3243,7 @@ function TableBanner({
           onChange: (value) => globalFilter.onChange(String(value))
         }
       ),
-      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, { table }),
+      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, { table, columnSelectPlaceholder: bannerConfig.columnSelectPlaceholder }),
       (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", { children: [
         table.options.data.length.toLocaleString(),
         " /",

package/package.json

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