@equinor/apollo-components 3.1.8-cell.0 → 3.2.0

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import * as _equinor_eds_core_react from '@equinor/eds-core-react';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import { SetRequired } from 'type-fest';
+import { TableOptions } from '@tanstack/table-core/build/lib/types';
 
 interface AppShellProps {
     children?: ReactNode;
@@ -38,8 +39,10 @@ declare function DynamicCell<T>({ cell, highlight, getStickyCellColor }: TableCe
 
 interface HeaderCellProps<TData, TValue> {
     header: Header<TData, TValue>;
+    /** Needed for column resizing */
+    table: Table<TData>;
 }
-declare const HeaderCell: <TData, TValue>({ header }: HeaderCellProps<TData, TValue>) => JSX.Element;
+declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
 
 declare type HierarchyCellOptions = {
     getRowDepth?: () => number;
@@ -133,6 +136,7 @@ interface DataTableProps<T> {
     virtual?: boolean;
     getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
     getSubRows?: (originalRow: T) => T[] | undefined;
+    columnResizing?: boolean | TableOptions<T>['columnResizeMode'];
     rowSelection?: Partial<ControlledState<RowSelectionState>> & {
         mode?: RowSelectionMode;
         selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);

package/dist/index.js

@@ -2594,16 +2594,40 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 // src/cells/HeaderCell.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
+var import_eds_tokens3 = require("@equinor/eds-tokens");
 var import_react_table2 = require("@tanstack/react-table");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components6.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  z-index: 5;
+var resizeCellStyle = import_styled_components6.css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    opacity: 0;
+    background: #aaa;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${import_eds_tokens3.tokens.colors.interactive.focus.hex};
+    opacity: 1;
+  }
+
+  &:hover .resizer {
+    opacity: 1;
+  }
+`;
+var StickyCell2 = (0, import_styled_components6.default)(StickyHeaderCell)`
+  ${resizeCellStyle}
 `;
-var HeaderCell = ({ header }) => {
+var Cell2 = (0, import_styled_components6.default)(import_eds_core_react6.Table.Cell)`
+  ${resizeCellStyle}
+`;
+var HeaderCell = ({ header, table }) => {
   var _a;
   const style = {
     width: header.column.getSize(),
@@ -2616,21 +2640,29 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyHeaderCell, {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, {
       ...cellProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
-        header
+        header,
+        table
       })
     }, header.id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cell2, {
     ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
-      header
+      header,
+      table
     })
   }, header.id);
 };
-function HeaderContent({ header }) {
+var HeaderDiv = import_styled_components6.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 5;
+`;
+function HeaderContent({ header, table }) {
   if (header.isPlaceholder)
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, {
@@ -2646,7 +2678,16 @@ function HeaderContent({ header }) {
         none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
           data: import_eds_icons3.arrow_drop_down
         })
-      }[header.column.getIsSorted()] ?? null
+      }[header.column.getIsSorted()] ?? null,
+      table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onClick: (e) => e.stopPropagation(),
+        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+        style: {
+          transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+        }
+      })
     ]
   });
 }
@@ -2664,12 +2705,12 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_eds_tokens5 = require("@equinor/eds-tokens");
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_eds_tokens3 = require("@equinor/eds-tokens");
+var import_eds_tokens4 = require("@equinor/eds-tokens");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var truncateStyle = {
@@ -2703,7 +2744,7 @@ var TypographyCustom = (props) => {
   });
 };
 var HoverCapture = import_styled_components7.default.div`
-  height: ${import_eds_tokens3.tokens.typography.table.cell_text.lineHeight};
+  height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2738,11 +2779,11 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
   ${({ depth }) => depth > 0 && import_styled_components8.css`
-      border-left: 3px solid ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -2998,7 +3039,8 @@ function TableHeader({ table, sticky }) {
     sticky,
     children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
       children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, {
-        header
+        header,
+        table
       }, header.id))
     }, headerGroup.id))
   });
@@ -3460,6 +3502,8 @@ function DataTable(props) {
         });
       }
     },
+    enableColumnResizing: Boolean(props.columnResizing),
+    columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
     enableSorting: sorting == null ? void 0 : sorting.enableSorting,
     manualSorting: sorting == null ? void 0 : sorting.manualSorting,
     enableExpanding: Boolean(props.expansion),

package/dist/index.mjs

@@ -2547,18 +2547,42 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 }
 
 // src/cells/HeaderCell.tsx
-import { Icon as Icon3, Table as Table3 } from "@equinor/eds-core-react";
+import { Icon as Icon3, Table as EdsTable } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
+import { tokens as tokens3 } from "@equinor/eds-tokens";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import styled6 from "styled-components";
+import styled6, { css as css3 } from "styled-components";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var HeaderDiv = styled6.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  z-index: 5;
+var resizeCellStyle = css3`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    opacity: 0;
+    background: #aaa;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${tokens3.colors.interactive.focus.hex};
+    opacity: 1;
+  }
+
+  &:hover .resizer {
+    opacity: 1;
+  }
+`;
+var StickyCell2 = styled6(StickyHeaderCell)`
+  ${resizeCellStyle}
 `;
-var HeaderCell = ({ header }) => {
+var Cell2 = styled6(EdsTable.Cell)`
+  ${resizeCellStyle}
+`;
+var HeaderCell = ({ header, table }) => {
   var _a;
   const style = {
     width: header.column.getSize(),
@@ -2571,21 +2595,29 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ jsx6(StickyHeaderCell, {
+    return /* @__PURE__ */ jsx6(StickyCell2, {
       ...cellProps,
       children: /* @__PURE__ */ jsx6(HeaderContent, {
-        header
+        header,
+        table
       })
     }, header.id);
   }
-  return /* @__PURE__ */ jsx6(Table3.Cell, {
+  return /* @__PURE__ */ jsx6(Cell2, {
     ...cellProps,
     children: /* @__PURE__ */ jsx6(HeaderContent, {
-      header
+      header,
+      table
     })
   }, header.id);
 };
-function HeaderContent({ header }) {
+var HeaderDiv = styled6.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 5;
+`;
+function HeaderContent({ header, table }) {
   if (header.isPlaceholder)
     return null;
   return /* @__PURE__ */ jsxs3(HeaderDiv, {
@@ -2601,7 +2633,16 @@ function HeaderContent({ header }) {
         none: /* @__PURE__ */ jsx6(Icon3, {
           data: arrow_drop_down
         })
-      }[header.column.getIsSorted()] ?? null
+      }[header.column.getIsSorted()] ?? null,
+      table.options.enableColumnResizing && /* @__PURE__ */ jsx6("div", {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onClick: (e) => e.stopPropagation(),
+        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+        style: {
+          transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+        }
+      })
     ]
   });
 }
@@ -2619,14 +2660,14 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-import { tokens as tokens4 } from "@equinor/eds-tokens";
-import styled8, { css as css3 } from "styled-components";
+import { tokens as tokens5 } from "@equinor/eds-tokens";
+import styled8, { css as css4 } from "styled-components";
 
 // src/cells/TypographyCustom.tsx
 import {
   Typography as EdsTypography
 } from "@equinor/eds-core-react";
-import { tokens as tokens3 } from "@equinor/eds-tokens";
+import { tokens as tokens4 } from "@equinor/eds-tokens";
 import styled7 from "styled-components";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var truncateStyle = {
@@ -2660,7 +2701,7 @@ var TypographyCustom = (props) => {
   });
 };
 var HoverCapture = styled7.div`
-  height: ${tokens3.typography.table.cell_text.lineHeight};
+  height: ${tokens4.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2694,12 +2735,12 @@ var CellWrapper = styled8(TypographyCustom)`
 
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
-  ${({ depth }) => depth > 0 && css3`
-      border-left: 3px solid ${tokens4.colors.infographic.primary__moss_green_34.hex};
+  ${({ depth }) => depth > 0 && css4`
+      border-left: 3px solid ${tokens5.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${tokens4.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${tokens5.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -2955,7 +2996,8 @@ function TableHeader({ table, sticky }) {
     sticky,
     children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, {
       children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, {
-        header
+        header,
+        table
       }, header.id))
     }, headerGroup.id))
   });
@@ -2973,7 +3015,7 @@ import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } fro
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
-import { Table as EdsTable } from "@equinor/eds-core-react";
+import { Table as EdsTable2 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
 import { DotProgress, Table as Table5, Typography as Typography2 } from "@equinor/eds-core-react";
@@ -3068,9 +3110,9 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs8(EdsTable, {
+  return /* @__PURE__ */ jsxs8(EdsTable2, {
     children: [
-      /* @__PURE__ */ jsx15(EdsTable.Caption, {
+      /* @__PURE__ */ jsx15(EdsTable2.Caption, {
         hidden: true,
         children: tableCaption
       }),
@@ -3423,6 +3465,8 @@ function DataTable(props) {
         });
       }
     },
+    enableColumnResizing: Boolean(props.columnResizing),
+    columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
     enableSorting: sorting == null ? void 0 : sorting.enableSorting,
     manualSorting: sorting == null ? void 0 : sorting.manualSorting,
     enableExpanding: Boolean(props.expansion),

package/package.json

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