@equinor/apollo-components 3.5.1 → 3.5.2-beta.0

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 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, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } 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';
 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';
 import { Variants } from '@equinor/eds-core-react/dist/types/components/types';
 import { FieldError } from 'react-hook-form';
 
@@ -27,12 +27,12 @@ declare const ChipsCell: (props: {
     values?: string[];
 }) => JSX.Element;
 
-declare type TableCellProps<T> = {
+type TableCellProps<T> = {
     cell: Cell<T, unknown>;
     highlight?: boolean;
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
 };
-declare type StyledStickyCellProps = {
+type StyledStickyCellProps = {
     highlight?: boolean;
     backgroundColor?: string;
 };
@@ -46,7 +46,7 @@ interface HeaderCellProps<TData, TValue> {
 }
 declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
 
-declare type HierarchyCellOptions = {
+type HierarchyCellOptions = {
     getRowDepth?: () => number;
     getDisplayName?: () => string;
 };
@@ -86,9 +86,13 @@ 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;
 }
-declare type TruncateMode = 'wrap' | 'hover';
-declare type SortConfig = {
+type TruncateMode = 'wrap' | 'hover';
+type SortConfig = {
     enableSorting?: boolean;
     manualSorting?: boolean;
     sorting?: SortingState;
@@ -105,8 +109,8 @@ interface CellConfig<T> {
      */
     truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
 }
-declare type RowSelectionMode = 'single' | 'multiple';
-declare type TableLayout = 'auto' | 'fixed';
+type RowSelectionMode = 'single' | 'multiple';
+type TableLayout = 'auto' | 'fixed';
 interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
     ref?: MutableRefObject<T | null> | null;
 }
@@ -138,7 +142,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'];
+    columnResizing?: boolean | ColumnResizeMode;
     rowSelection?: Partial<ControlledState<RowSelectionState>> & {
         mode?: RowSelectionMode;
         selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
@@ -181,7 +185,7 @@ interface DataTableProps<T> {
     tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
     infiniteScroll?: InfiniteScrollConfig;
 }
-declare type ControlledState<T> = {
+type ControlledState<T> = {
     state?: T;
     /** Callback when state chagnes. Using this requires the state to be fully controlled. */
     onChange?: Dispatch<SetStateAction<T>>;
@@ -197,8 +201,26 @@ declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;
  * @returns A capitalized header
  */
 declare function capitalizeHeader<T>(context: HeaderContext<T, any>): string;
+/**
+ * Used to conditionally return any given value.
+ *
+ * @param enabled - A bool whether the value should be enabled or not
+ * @param value - Any given value.
+ * @returns Value or undefined
+ */
+declare function enableOrUndefined<T>(enabled: boolean | undefined, value: T): T | undefined;
+/**
+ * Get column header if set
+ * @param column
+ * @returns Column label
+ */
+declare function getColumnHeader<T>(column: Column<T, any>): string;
+/** Prepend a column definition array with a select column if enabled in the config. */
+declare function prependSelectColumnIfEnabled<T>(columns: ColumnDef<T, any>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T, any>[];
 /** Prepend a column definition array with a select column. */
-declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T, unknown>[];
+declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T>[];
+/** 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;
 
 declare function SelectColumnDef<T>(props: SetRequired<DataTableProps<T>, 'rowSelection'>['rowSelection']): ColumnDef$1<T, any>;
 
@@ -206,7 +228,7 @@ declare const leftCellShadow: styled_components.FlattenSimpleInterpolation;
 declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
 declare const StickyHeaderCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & CellProps) & CellProps, never>;
 
-declare type TypographyProps = {
+type TypographyProps = {
     truncate?: boolean;
     enableShowAllOnHover?: boolean;
 } & TypographyProps$1;
@@ -226,12 +248,12 @@ declare function getTotalRight<TData>(table: Table<TData>, column: Column<TData>
 declare function getIsFirstRightPinnedColumn<TData>(column: Column<TData>): boolean;
 declare function getIsLastLeftPinnedColumn<TData>(table: Table<TData>, column: Column<TData>): boolean;
 
-declare type FormMeta = {
+type FormMeta = {
     _isNew?: boolean;
     _editMode?: boolean;
     _hasRemoteChange?: boolean;
 };
-declare type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
+type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
 
 /**
  * Subscribes to the `_editMode` field in a `react-hook-form` context.
@@ -310,4 +332,4 @@ declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromPro
 declare const WARNING_PREFIX = "WARNING";
 declare function getHelperTextProps({ error, warning, helperText, }: GetHelperTextPropsProps): GetHelperTextProps;
 
-export { AppShell, AppSidebar, CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, EditableCellBaseProps, EditableCheckboxCell, EditableDateCell, EditableDateCellProps, EditableDropdownSingleCell, EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, FormMeta, GetHelperTextProps, GetHelperTextPropsProps, HTMLPropsRef, HeaderCell, HierarchyCell, InfiniteScrollConfig, Option, PopoverCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, TypographyProps, WARNING_PREFIX, WithoutFormMeta, addFormMeta, capitalizeHeader, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };
+export { AppShell, AppSidebar, CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, EditableCellBaseProps, EditableCheckboxCell, EditableDateCell, EditableDateCellProps, EditableDropdownSingleCell, EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, FormMeta, GetHelperTextProps, GetHelperTextPropsProps, HTMLPropsRef, HeaderCell, HierarchyCell, InfiniteScrollConfig, Option, PopoverCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, TypographyProps, WARNING_PREFIX, WithoutFormMeta, addFormMeta, capitalizeHeader, enableOrUndefined, getColumnHeader, getFunctionValueOrDefault, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, prependSelectColumnIfEnabled, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };

package/dist/index.js

@@ -2397,12 +2397,17 @@ __export(src_exports, {
   WARNING_PREFIX: () => WARNING_PREFIX,
   addFormMeta: () => addFormMeta,
   capitalizeHeader: () => capitalizeHeader,
+  createColumnHelper: () => import_react_table3.createColumnHelper,
+  enableOrUndefined: () => enableOrUndefined,
+  getColumnHeader: () => getColumnHeader,
+  getFunctionValueOrDefault: () => getFunctionValueOrDefault,
   getHelperTextProps: () => getHelperTextProps,
   getIsFirstRightPinnedColumn: () => getIsFirstRightPinnedColumn,
   getIsLastLeftPinnedColumn: () => getIsLastLeftPinnedColumn,
   getTotalRight: () => getTotalRight,
   leftCellShadow: () => leftCellShadow,
   prependSelectColumn: () => prependSelectColumn,
+  prependSelectColumnIfEnabled: () => prependSelectColumnIfEnabled,
   removeFormMeta: () => removeFormMeta,
   stopPropagation: () => stopPropagation,
   stringToHslColor: () => stringToHslColor,
@@ -2954,6 +2959,7 @@ var import_react3 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
+var import_react_table3 = require("@tanstack/react-table");
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -2967,6 +2973,13 @@ function getColumnHeader(column) {
     return column.id;
   return typeof columnHeader === "string" ? columnHeader : column.id;
 }
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!config)
+    return columns;
+  if (!Boolean(config == null ? void 0 : config.mode))
+    return columns;
+  return prependSelectColumn(columns, config);
+}
 function prependSelectColumn(columns, config) {
   if (!(config == null ? void 0 : config.selectColumn))
     return columns;
@@ -3072,7 +3085,7 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_react_table3 = require("@tanstack/react-table");
+var import_react_table4 = require("@tanstack/react-table");
 var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
@@ -3111,17 +3124,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;
@@ -3462,7 +3477,7 @@ function DataTable(props) {
     typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
     typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
   ];
-  const table = (0, import_react_table3.useReactTable)({
+  const table = (0, import_react_table4.useReactTable)({
     columns: prependSelectColumn(columns, props.rowSelection),
     data,
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
@@ -3489,10 +3504,10 @@ function DataTable(props) {
     enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
     filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
     enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
-    getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
-    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
-    getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
-    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
+    getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
+    getExpandedRowModel: (0, import_react_table4.getExpandedRowModel)(),
+    getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
     onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
     onColumnPinningChange: setColumnPinning,
@@ -4143,12 +4158,17 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
   WARNING_PREFIX,
   addFormMeta,
   capitalizeHeader,
+  createColumnHelper,
+  enableOrUndefined,
+  getColumnHeader,
+  getFunctionValueOrDefault,
   getHelperTextProps,
   getIsFirstRightPinnedColumn,
   getIsLastLeftPinnedColumn,
   getTotalRight,
   leftCellShadow,
   prependSelectColumn,
+  prependSelectColumnIfEnabled,
   removeFormMeta,
   stopPropagation,
   stringToHslColor,

package/dist/index.mjs

@@ -2906,6 +2906,7 @@ import { useRef as useRef2, useState as useState3 } from "react";
 import styled10 from "styled-components";
 
 // src/DataTable/utils.tsx
+import { createColumnHelper } from "@tanstack/react-table";
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -2919,6 +2920,13 @@ function getColumnHeader(column) {
     return column.id;
   return typeof columnHeader === "string" ? columnHeader : column.id;
 }
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!config)
+    return columns;
+  if (!Boolean(config == null ? void 0 : config.mode))
+    return columns;
+  return prependSelectColumn(columns, config);
+}
 function prependSelectColumn(columns, config) {
   if (!(config == null ? void 0 : config.selectColumn))
     return columns;
@@ -3069,17 +3077,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;
@@ -4100,12 +4110,17 @@ export {
   WARNING_PREFIX,
   addFormMeta,
   capitalizeHeader,
+  createColumnHelper,
+  enableOrUndefined,
+  getColumnHeader,
+  getFunctionValueOrDefault,
   getHelperTextProps,
   getIsFirstRightPinnedColumn,
   getIsLastLeftPinnedColumn,
   getTotalRight,
   leftCellShadow,
   prependSelectColumn,
+  prependSelectColumnIfEnabled,
   removeFormMeta,
   stopPropagation,
   stringToHslColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.5.1",
+  "version": "3.5.2-beta.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -46,7 +46,7 @@
     "eslint-config-custom": "*",
     "storybook": "^7.0.0-alpha.38",
     "tsconfig": "*",
-    "typescript": "^4.5.2"
+    "typescript": "^5.2.2"
   },
   "publishConfig": {
     "access": "public"