@equinor/apollo-components 1.4.0 → 1.5.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { Cell, CellContext, ColumnDef, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { Cell, CellContext, ColumnDef, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
@@ -28,7 +28,11 @@ declare type TableCellProps<T> = {
 };
 declare function DynamicCell<T>({ cell, highlight }: TableCellProps<T>): JSX.Element;
 
-declare function HierarchyCell<T>(cell: CellContext<T, any>): JSX.Element;
+declare type HierarchyCellOptions = {
+    getRowDepth?: () => number;
+    getDisplayName?: () => string;
+};
+declare function HierarchyCell<T>(cell: CellContext<T, any>, options?: HierarchyCellOptions): JSX.Element;
 
 interface HeaderConfig {
     captionPadding?: string;
@@ -48,6 +52,8 @@ declare type DataTableConfig<T> = {
     width?: string;
     selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
     getSubRows?: (originalRow: T) => T[] | undefined;
+    getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
+    onRowClick?: (row: Row<T>) => void;
 } & ExpansionConfig;
 interface ExpansionConfig {
     expandAllByDefault?: boolean;

package/dist/index.js

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var src_exports = {};
 __export(src_exports, {
   AppShell: () => AppShell,
@@ -324,15 +324,16 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
       }
     `}
 `;
-function HierarchyCell(cell) {
+function HierarchyCell(cell, options = {}) {
+  var _a, _b;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CellWrapper, {
-    depth: cell.row.depth,
+    depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {
         className: "--divider"
       }),
-      cell.getValue()
+      ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
     ]
   });
 }
@@ -347,6 +348,7 @@ var CellWrapper2 = import_styled_components9.default.div`
   align-items: center;
   width: 48px;
   margin-left: -16px;
+  z-index: 2;
 `;
 function SelectColumnDef(selectionMode) {
   return {
@@ -369,18 +371,27 @@ function SelectColumnDef(selectionMode) {
             selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: row.getToggleSelectedHandler()
+              onChange: (e) => {
+                e.stopPropagation();
+                row.getToggleSelectedHandler()(e);
+              }
             }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: row.getToggleSelectedHandler()
+              onChange: (e) => {
+                e.stopPropagation();
+                row.getToggleSelectedHandler()(e);
+              }
             }),
             row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: row.getToggleExpandedHandler(),
+              onClick: (e) => {
+                e.stopPropagation();
+                row.getToggleExpandedHandler()();
+              },
               style: { cursor: "pointer" },
               children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
                 data: row.getIsExpanded() ? import_eds_icons3.chevron_up : import_eds_icons3.chevron_down
@@ -500,7 +511,7 @@ var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime1
 
 // src/DataTable/components/BasicTable.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function BasicTable({ table, stickyHeader, isLoading }) {
+function BasicTable({ table, config, stickyHeader, isLoading }) {
   const tableRows = table.getRowModel().rows;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table, {
     children: [
@@ -510,6 +521,10 @@ function BasicTable({ table, stickyHeader, isLoading }) {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Body, {
         children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+          onClick: () => {
+            var _a;
+            return (_a = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a.call(config, row);
+          },
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
             children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
@@ -765,7 +780,7 @@ var PaddingRow = (props) => {
 
 // src/DataTable/components/VirtualTable.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function VirtualTable({ table, containerRef, ...props }) {
+function VirtualTable({ table, config, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -791,6 +806,10 @@ function VirtualTable({ table, containerRef, ...props }) {
             const row = rows[virtualRow.index];
             return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Row, {
               active: row.getIsSelected(),
+              onClick: () => {
+                var _a2;
+                return (_a2 = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a2.call(config, row);
+              },
               children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Cell, {
                 children: (0, import_react_table4.flexRender)(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
@@ -869,7 +888,8 @@ function DataTable({
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
-    getSubRows: config == null ? void 0 : config.getSubRows
+    getSubRows: config == null ? void 0 : config.getSubRows,
+    getRowId: config == null ? void 0 : config.getRowId
   });
   (0, import_react4.useEffect)(() => {
     if (config && config.expandAllByDefault) {
@@ -897,10 +917,12 @@ function DataTable({
         children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          config,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicTable, {
           table,
+          config,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })

package/dist/index.mjs

@@ -282,15 +282,16 @@ var CellWrapper = styled7(TypographyCustom)`
       }
     `}
 `;
-function HierarchyCell(cell) {
+function HierarchyCell(cell, options = {}) {
+  var _a, _b;
   return /* @__PURE__ */ jsxs4(CellWrapper, {
-    depth: cell.row.depth,
+    depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
       /* @__PURE__ */ jsx6("span", {
         className: "--divider"
       }),
-      cell.getValue()
+      ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
     ]
   });
 }
@@ -305,6 +306,7 @@ var CellWrapper2 = styled8.div`
   align-items: center;
   width: 48px;
   margin-left: -16px;
+  z-index: 2;
 `;
 function SelectColumnDef(selectionMode) {
   return {
@@ -327,18 +329,27 @@ function SelectColumnDef(selectionMode) {
             selectionMode === "single" ? /* @__PURE__ */ jsx7(Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: row.getToggleSelectedHandler()
+              onChange: (e) => {
+                e.stopPropagation();
+                row.getToggleSelectedHandler()(e);
+              }
             }) : /* @__PURE__ */ jsx7(Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: row.getToggleSelectedHandler()
+              onChange: (e) => {
+                e.stopPropagation();
+                row.getToggleSelectedHandler()(e);
+              }
             }),
             row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx7(Button2, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: row.getToggleExpandedHandler(),
+              onClick: (e) => {
+                e.stopPropagation();
+                row.getToggleExpandedHandler()();
+              },
               style: { cursor: "pointer" },
               children: /* @__PURE__ */ jsx7(Icon3, {
                 data: row.getIsExpanded() ? chevron_up : chevron_down
@@ -464,7 +475,7 @@ var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx10(Table5.Head, {
 
 // src/DataTable/components/BasicTable.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function BasicTable({ table, stickyHeader, isLoading }) {
+function BasicTable({ table, config, stickyHeader, isLoading }) {
   const tableRows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxs7(EdsTable, {
     children: [
@@ -474,6 +485,10 @@ function BasicTable({ table, stickyHeader, isLoading }) {
       }),
       /* @__PURE__ */ jsx11(EdsTable.Body, {
         children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx11(EdsTable.Row, {
+          onClick: () => {
+            var _a;
+            return (_a = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a.call(config, row);
+          },
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(EdsTable.Cell, {
             children: flexRender3(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
@@ -729,7 +744,7 @@ var PaddingRow = (props) => {
 
 // src/DataTable/components/VirtualTable.tsx
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-function VirtualTable({ table, containerRef, ...props }) {
+function VirtualTable({ table, config, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
@@ -755,6 +770,10 @@ function VirtualTable({ table, containerRef, ...props }) {
             const row = rows[virtualRow.index];
             return /* @__PURE__ */ jsx16(Table8.Row, {
               active: row.getIsSelected(),
+              onClick: () => {
+                var _a2;
+                return (_a2 = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a2.call(config, row);
+              },
               children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx16(Table8.Cell, {
                 children: flexRender4(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
@@ -833,7 +852,8 @@ function DataTable({
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
-    getSubRows: config == null ? void 0 : config.getSubRows
+    getSubRows: config == null ? void 0 : config.getSubRows,
+    getRowId: config == null ? void 0 : config.getRowId
   });
   useEffect2(() => {
     if (config && config.expandAllByDefault) {
@@ -861,10 +881,12 @@ function DataTable({
         children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx17(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          config,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ jsx17(BasicTable, {
           table,
+          config,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -9,10 +9,10 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
     "build-storybook": "storybook build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
     "lint": "TIMING=1 eslint . --fix",
     "storybook": "storybook dev"
   },