@equinor/apollo-components 3.5.1 → 3.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +34 -16
- package/dist/index.js +24 -6
- package/dist/index.mjs +13 -0
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { IconData } from '@equinor/eds-icons';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
|
|
4
|
-
import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
|
|
4
|
+
import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
|
|
5
|
+
export { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState, createColumnHelper } from '@tanstack/react-table';
|
|
5
6
|
import * as styled_components from 'styled-components';
|
|
6
7
|
import * as _equinor_eds_core_react from '@equinor/eds-core-react';
|
|
7
8
|
import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
|
|
8
9
|
import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
|
|
9
10
|
import { SetRequired } from 'type-fest';
|
|
10
|
-
import { TableOptions } from '@tanstack/table-core/build/lib/types';
|
|
11
11
|
import { Variants } from '@equinor/eds-core-react/dist/types/components/types';
|
|
12
12
|
import { FieldError } from 'react-hook-form';
|
|
13
13
|
|
|
@@ -27,12 +27,12 @@ declare const ChipsCell: (props: {
|
|
|
27
27
|
values?: string[];
|
|
28
28
|
}) => JSX.Element;
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
type TableCellProps<T> = {
|
|
31
31
|
cell: Cell<T, unknown>;
|
|
32
32
|
highlight?: boolean;
|
|
33
33
|
getStickyCellColor?: (cell: Cell<T, unknown>) => string;
|
|
34
34
|
};
|
|
35
|
-
|
|
35
|
+
type StyledStickyCellProps = {
|
|
36
36
|
highlight?: boolean;
|
|
37
37
|
backgroundColor?: string;
|
|
38
38
|
};
|
|
@@ -46,7 +46,7 @@ interface HeaderCellProps<TData, TValue> {
|
|
|
46
46
|
}
|
|
47
47
|
declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
type HierarchyCellOptions = {
|
|
50
50
|
getRowDepth?: () => number;
|
|
51
51
|
getDisplayName?: () => string;
|
|
52
52
|
};
|
|
@@ -87,8 +87,8 @@ interface RowConfig<T> {
|
|
|
87
87
|
onMouseEnter?: (row: Row<T>) => void;
|
|
88
88
|
onMouseLeave?: (row: Row<T>) => void;
|
|
89
89
|
}
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
type TruncateMode = 'wrap' | 'hover';
|
|
91
|
+
type SortConfig = {
|
|
92
92
|
enableSorting?: boolean;
|
|
93
93
|
manualSorting?: boolean;
|
|
94
94
|
sorting?: SortingState;
|
|
@@ -105,8 +105,8 @@ interface CellConfig<T> {
|
|
|
105
105
|
*/
|
|
106
106
|
truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
|
|
107
107
|
}
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
type RowSelectionMode = 'single' | 'multiple';
|
|
109
|
+
type TableLayout = 'auto' | 'fixed';
|
|
110
110
|
interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
|
|
111
111
|
ref?: MutableRefObject<T | null> | null;
|
|
112
112
|
}
|
|
@@ -138,7 +138,7 @@ interface DataTableProps<T> {
|
|
|
138
138
|
virtual?: boolean;
|
|
139
139
|
getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
|
|
140
140
|
getSubRows?: (originalRow: T) => T[] | undefined;
|
|
141
|
-
columnResizing?: boolean |
|
|
141
|
+
columnResizing?: boolean | ColumnResizeMode;
|
|
142
142
|
rowSelection?: Partial<ControlledState<RowSelectionState>> & {
|
|
143
143
|
mode?: RowSelectionMode;
|
|
144
144
|
selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
|
|
@@ -181,7 +181,7 @@ interface DataTableProps<T> {
|
|
|
181
181
|
tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
|
|
182
182
|
infiniteScroll?: InfiniteScrollConfig;
|
|
183
183
|
}
|
|
184
|
-
|
|
184
|
+
type ControlledState<T> = {
|
|
185
185
|
state?: T;
|
|
186
186
|
/** Callback when state chagnes. Using this requires the state to be fully controlled. */
|
|
187
187
|
onChange?: Dispatch<SetStateAction<T>>;
|
|
@@ -197,8 +197,26 @@ declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;
|
|
|
197
197
|
* @returns A capitalized header
|
|
198
198
|
*/
|
|
199
199
|
declare function capitalizeHeader<T>(context: HeaderContext<T, any>): string;
|
|
200
|
+
/**
|
|
201
|
+
* Used to conditionally return any given value.
|
|
202
|
+
*
|
|
203
|
+
* @param enabled - A bool whether the value should be enabled or not
|
|
204
|
+
* @param value - Any given value.
|
|
205
|
+
* @returns Value or undefined
|
|
206
|
+
*/
|
|
207
|
+
declare function enableOrUndefined<T>(enabled: boolean | undefined, value: T): T | undefined;
|
|
208
|
+
/**
|
|
209
|
+
* Get column header if set
|
|
210
|
+
* @param column
|
|
211
|
+
* @returns Column label
|
|
212
|
+
*/
|
|
213
|
+
declare function getColumnHeader<T>(column: Column<T, any>): string;
|
|
214
|
+
/** Prepend a column definition array with a select column if enabled in the config. */
|
|
215
|
+
declare function prependSelectColumnIfEnabled<T>(columns: ColumnDef<T, any>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T, any>[];
|
|
200
216
|
/** Prepend a column definition array with a select column. */
|
|
201
|
-
declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T
|
|
217
|
+
declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T>[];
|
|
218
|
+
/** Useful in cases where you either have a value, function or undefined. */
|
|
219
|
+
declare function getFunctionValueOrDefault<T extends boolean | string | number, P>(valueOrFn: ((props: P) => T) | T | undefined, fnProps: P, defaultValue: T): T;
|
|
202
220
|
|
|
203
221
|
declare function SelectColumnDef<T>(props: SetRequired<DataTableProps<T>, 'rowSelection'>['rowSelection']): ColumnDef$1<T, any>;
|
|
204
222
|
|
|
@@ -206,7 +224,7 @@ declare const leftCellShadow: styled_components.FlattenSimpleInterpolation;
|
|
|
206
224
|
declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
|
|
207
225
|
declare const StickyHeaderCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & CellProps) & CellProps, never>;
|
|
208
226
|
|
|
209
|
-
|
|
227
|
+
type TypographyProps = {
|
|
210
228
|
truncate?: boolean;
|
|
211
229
|
enableShowAllOnHover?: boolean;
|
|
212
230
|
} & TypographyProps$1;
|
|
@@ -226,12 +244,12 @@ declare function getTotalRight<TData>(table: Table<TData>, column: Column<TData>
|
|
|
226
244
|
declare function getIsFirstRightPinnedColumn<TData>(column: Column<TData>): boolean;
|
|
227
245
|
declare function getIsLastLeftPinnedColumn<TData>(table: Table<TData>, column: Column<TData>): boolean;
|
|
228
246
|
|
|
229
|
-
|
|
247
|
+
type FormMeta = {
|
|
230
248
|
_isNew?: boolean;
|
|
231
249
|
_editMode?: boolean;
|
|
232
250
|
_hasRemoteChange?: boolean;
|
|
233
251
|
};
|
|
234
|
-
|
|
252
|
+
type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
|
|
235
253
|
|
|
236
254
|
/**
|
|
237
255
|
* Subscribes to the `_editMode` field in a `react-hook-form` context.
|
|
@@ -310,4 +328,4 @@ declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromPro
|
|
|
310
328
|
declare const WARNING_PREFIX = "WARNING";
|
|
311
329
|
declare function getHelperTextProps({ error, warning, helperText, }: GetHelperTextPropsProps): GetHelperTextProps;
|
|
312
330
|
|
|
313
|
-
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 };
|
|
331
|
+
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
CHANGED
|
@@ -2397,12 +2397,17 @@ __export(src_exports, {
|
|
|
2397
2397
|
WARNING_PREFIX: () => WARNING_PREFIX,
|
|
2398
2398
|
addFormMeta: () => addFormMeta,
|
|
2399
2399
|
capitalizeHeader: () => capitalizeHeader,
|
|
2400
|
+
createColumnHelper: () => import_react_table3.createColumnHelper,
|
|
2401
|
+
enableOrUndefined: () => enableOrUndefined,
|
|
2402
|
+
getColumnHeader: () => getColumnHeader,
|
|
2403
|
+
getFunctionValueOrDefault: () => getFunctionValueOrDefault,
|
|
2400
2404
|
getHelperTextProps: () => getHelperTextProps,
|
|
2401
2405
|
getIsFirstRightPinnedColumn: () => getIsFirstRightPinnedColumn,
|
|
2402
2406
|
getIsLastLeftPinnedColumn: () => getIsLastLeftPinnedColumn,
|
|
2403
2407
|
getTotalRight: () => getTotalRight,
|
|
2404
2408
|
leftCellShadow: () => leftCellShadow,
|
|
2405
2409
|
prependSelectColumn: () => prependSelectColumn,
|
|
2410
|
+
prependSelectColumnIfEnabled: () => prependSelectColumnIfEnabled,
|
|
2406
2411
|
removeFormMeta: () => removeFormMeta,
|
|
2407
2412
|
stopPropagation: () => stopPropagation,
|
|
2408
2413
|
stringToHslColor: () => stringToHslColor,
|
|
@@ -2954,6 +2959,7 @@ var import_react3 = require("react");
|
|
|
2954
2959
|
var import_styled_components10 = __toESM(require("styled-components"));
|
|
2955
2960
|
|
|
2956
2961
|
// src/DataTable/utils.tsx
|
|
2962
|
+
var import_react_table3 = require("@tanstack/react-table");
|
|
2957
2963
|
function capitalizeHeader(context) {
|
|
2958
2964
|
const header = context.header.id;
|
|
2959
2965
|
return header.charAt(0).toUpperCase() + header.slice(1);
|
|
@@ -2967,6 +2973,13 @@ function getColumnHeader(column) {
|
|
|
2967
2973
|
return column.id;
|
|
2968
2974
|
return typeof columnHeader === "string" ? columnHeader : column.id;
|
|
2969
2975
|
}
|
|
2976
|
+
function prependSelectColumnIfEnabled(columns, config) {
|
|
2977
|
+
if (!config)
|
|
2978
|
+
return columns;
|
|
2979
|
+
if (!Boolean(config == null ? void 0 : config.mode))
|
|
2980
|
+
return columns;
|
|
2981
|
+
return prependSelectColumn(columns, config);
|
|
2982
|
+
}
|
|
2970
2983
|
function prependSelectColumn(columns, config) {
|
|
2971
2984
|
if (!(config == null ? void 0 : config.selectColumn))
|
|
2972
2985
|
return columns;
|
|
@@ -3072,7 +3085,7 @@ function TableHeader({ table, sticky }) {
|
|
|
3072
3085
|
}
|
|
3073
3086
|
|
|
3074
3087
|
// src/DataTable/DataTable.tsx
|
|
3075
|
-
var
|
|
3088
|
+
var import_react_table4 = require("@tanstack/react-table");
|
|
3076
3089
|
var import_react7 = require("react");
|
|
3077
3090
|
var import_styled_components16 = __toESM(require("styled-components"));
|
|
3078
3091
|
|
|
@@ -3462,7 +3475,7 @@ function DataTable(props) {
|
|
|
3462
3475
|
typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
|
|
3463
3476
|
typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
|
|
3464
3477
|
];
|
|
3465
|
-
const table = (0,
|
|
3478
|
+
const table = (0, import_react_table4.useReactTable)({
|
|
3466
3479
|
columns: prependSelectColumn(columns, props.rowSelection),
|
|
3467
3480
|
data,
|
|
3468
3481
|
globalFilterFn: enableGlobalFilter(fuzzyFilter),
|
|
@@ -3489,10 +3502,10 @@ function DataTable(props) {
|
|
|
3489
3502
|
enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
|
|
3490
3503
|
filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
|
|
3491
3504
|
enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
|
|
3492
|
-
getFilteredRowModel: enableGlobalFilter((0,
|
|
3493
|
-
getCoreRowModel: (0,
|
|
3494
|
-
getExpandedRowModel: (0,
|
|
3495
|
-
getSortedRowModel: (0,
|
|
3505
|
+
getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
|
|
3506
|
+
getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
|
|
3507
|
+
getExpandedRowModel: (0, import_react_table4.getExpandedRowModel)(),
|
|
3508
|
+
getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
|
|
3496
3509
|
onExpandedChange: setExpandedState,
|
|
3497
3510
|
onRowSelectionChange: setRowSelectionState,
|
|
3498
3511
|
onColumnPinningChange: setColumnPinning,
|
|
@@ -4143,12 +4156,17 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
|
|
|
4143
4156
|
WARNING_PREFIX,
|
|
4144
4157
|
addFormMeta,
|
|
4145
4158
|
capitalizeHeader,
|
|
4159
|
+
createColumnHelper,
|
|
4160
|
+
enableOrUndefined,
|
|
4161
|
+
getColumnHeader,
|
|
4162
|
+
getFunctionValueOrDefault,
|
|
4146
4163
|
getHelperTextProps,
|
|
4147
4164
|
getIsFirstRightPinnedColumn,
|
|
4148
4165
|
getIsLastLeftPinnedColumn,
|
|
4149
4166
|
getTotalRight,
|
|
4150
4167
|
leftCellShadow,
|
|
4151
4168
|
prependSelectColumn,
|
|
4169
|
+
prependSelectColumnIfEnabled,
|
|
4152
4170
|
removeFormMeta,
|
|
4153
4171
|
stopPropagation,
|
|
4154
4172
|
stringToHslColor,
|
package/dist/index.mjs
CHANGED
|
@@ -2906,6 +2906,7 @@ import { useRef as useRef2, useState as useState3 } from "react";
|
|
|
2906
2906
|
import styled10 from "styled-components";
|
|
2907
2907
|
|
|
2908
2908
|
// src/DataTable/utils.tsx
|
|
2909
|
+
import { createColumnHelper } from "@tanstack/react-table";
|
|
2909
2910
|
function capitalizeHeader(context) {
|
|
2910
2911
|
const header = context.header.id;
|
|
2911
2912
|
return header.charAt(0).toUpperCase() + header.slice(1);
|
|
@@ -2919,6 +2920,13 @@ function getColumnHeader(column) {
|
|
|
2919
2920
|
return column.id;
|
|
2920
2921
|
return typeof columnHeader === "string" ? columnHeader : column.id;
|
|
2921
2922
|
}
|
|
2923
|
+
function prependSelectColumnIfEnabled(columns, config) {
|
|
2924
|
+
if (!config)
|
|
2925
|
+
return columns;
|
|
2926
|
+
if (!Boolean(config == null ? void 0 : config.mode))
|
|
2927
|
+
return columns;
|
|
2928
|
+
return prependSelectColumn(columns, config);
|
|
2929
|
+
}
|
|
2922
2930
|
function prependSelectColumn(columns, config) {
|
|
2923
2931
|
if (!(config == null ? void 0 : config.selectColumn))
|
|
2924
2932
|
return columns;
|
|
@@ -4100,12 +4108,17 @@ export {
|
|
|
4100
4108
|
WARNING_PREFIX,
|
|
4101
4109
|
addFormMeta,
|
|
4102
4110
|
capitalizeHeader,
|
|
4111
|
+
createColumnHelper,
|
|
4112
|
+
enableOrUndefined,
|
|
4113
|
+
getColumnHeader,
|
|
4114
|
+
getFunctionValueOrDefault,
|
|
4103
4115
|
getHelperTextProps,
|
|
4104
4116
|
getIsFirstRightPinnedColumn,
|
|
4105
4117
|
getIsLastLeftPinnedColumn,
|
|
4106
4118
|
getTotalRight,
|
|
4107
4119
|
leftCellShadow,
|
|
4108
4120
|
prependSelectColumn,
|
|
4121
|
+
prependSelectColumnIfEnabled,
|
|
4109
4122
|
removeFormMeta,
|
|
4110
4123
|
stopPropagation,
|
|
4111
4124
|
stringToHslColor,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@equinor/apollo-components",
|
|
3
|
-
"version": "3.5.
|
|
3
|
+
"version": "3.5.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"eslint-config-custom": "*",
|
|
47
47
|
"storybook": "^7.0.0-alpha.38",
|
|
48
48
|
"tsconfig": "*",
|
|
49
|
-
"typescript": "^
|
|
49
|
+
"typescript": "^5.2.2"
|
|
50
50
|
},
|
|
51
51
|
"publishConfig": {
|
|
52
52
|
"access": "public"
|