@equinor/apollo-components 3.6.1 → 3.7.1

package/dist/index.d.mts

@@ -0,0 +1,342 @@
+import { IconData } from '@equinor/eds-icons';
+import * as react from 'react';
+import { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
+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';
+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 { Variants } from '@equinor/eds-core-react/dist/types/components/types';
+import { FieldError } from 'react-hook-form';
+
+interface AppShellProps {
+    children?: ReactNode;
+    sidebar?: ReactNode;
+    icon?: IconData;
+    title?: string;
+}
+declare const AppShell: ({ children, icon, title, sidebar }: AppShellProps) => JSX.Element;
+
+declare function AppSidebar(): JSX.Element;
+
+declare function CheckboxCell<T>(context: CellContext<T, boolean>): JSX.Element;
+
+declare const ChipsCell: (props: {
+    values?: string[];
+}) => JSX.Element;
+
+interface ColumnSelectProps<T> {
+    table: Table<T>;
+    columnSelectPlaceholder?: string;
+}
+declare function ColumnSelect<T>({ table, columnSelectPlaceholder }: ColumnSelectProps<T>): JSX.Element;
+
+interface TableHeaderProps<T> {
+    table: Table<T>;
+    sticky?: boolean;
+}
+declare function TableHeader<T>({ table, sticky }: TableHeaderProps<T>): JSX.Element;
+
+interface TableRowWrapper<T> {
+    (props: TableRowWrapperProps<T>): ReactElement;
+}
+interface TableRowWrapperProps<T> {
+    row: Row<T>;
+    children: ReactNode;
+}
+interface RowConfig<T> {
+    /**
+     * ! Unstable - Row Wrapper has not been tested for compatibility with virtualization. Use with caution.
+     */
+    rowWrapper?: TableRowWrapper<T>;
+    getRowBackground?: (row: Row<T>) => string | undefined;
+    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;
+}
+type TruncateMode = 'wrap' | 'hover';
+type SortConfig = {
+    enableSorting?: boolean;
+    manualSorting?: boolean;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+};
+interface CellConfig<T> {
+    getStickyCellColor?: (cell: Cell<T, unknown>) => string;
+    getShouldHighlight?: (cell: Cell<T, unknown>) => boolean;
+    /**
+     * Whether to wrap or truncate default cells. Accepts `"wrap"` or `"hover"` and  or a function returning a boolean.
+     * Defauls to `"hover"` (i.e. all cells is truncated by default).
+     *
+     * ***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';
+interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
+    ref?: MutableRefObject<T | null> | null;
+}
+interface InfiniteScrollConfig {
+    /** Called on scroll below offset. */
+    onBottomScroll: () => void;
+    /** Pixels above bottom. Defines when the onBottomScroll should be called. Defaults to `300`. */
+    offset?: number;
+}
+interface DataTableProps<T> {
+    tableCaption: string;
+    data: T[];
+    columns: ColumnDef<T, any>[];
+    cellConfig?: CellConfig<T>;
+    rowConfig?: RowConfig<T>;
+    isLoading?: boolean;
+    height?: string;
+    width?: string;
+    stickyHeader?: boolean;
+    /**
+     * Defaults to `'auto'`.
+     *
+     * `'auto'` determines column width based on cell content.
+     *
+     * `'fixed'` uses fixed column width. Specify width (`size` property) in ColumnDef.
+     * Default size is 150px.
+     */
+    tableLayout?: TableLayout;
+    virtual?: boolean;
+    getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
+    getSubRows?: (originalRow: T) => T[] | undefined;
+    columnResizing?: boolean | ColumnResizeMode;
+    rowSelection?: Partial<ControlledState<RowSelectionState>> & {
+        mode?: RowSelectionMode;
+        selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
+        includeExpansionButton?: boolean;
+    };
+    expansion?: Partial<ControlledState<ExpandedState>> & {
+        expandAllByDefault?: boolean;
+    };
+    sorting?: Partial<ControlledState<SortingState>> & {
+        enableSorting?: boolean;
+        manualSorting?: boolean;
+    };
+    columnPinning?: boolean | (ControlledState<ColumnPinningState> & {
+        enable?: boolean;
+    });
+    globalFilter?: ControlledState<string>;
+    columnVisibility?: ControlledState<VisibilityState>;
+    /**
+     * Everything that has todo with the area (banner) over the table
+     */
+    bannerConfig?: {
+        enableTableCaption?: boolean;
+        totalRowCount?: number;
+        enableColumnSelect?: boolean;
+        enableGlobalFilterInput?: boolean;
+        globalFilterPlaceholder?: string;
+        columnSelectPlaceholder?: string;
+        filterFromLeafRows?: boolean;
+        /**
+         * @deprecated Use `customActionsLeft` instead
+         */
+        customActions?: <T>(table: Table<T>) => ReactNode;
+        customActionsLeft?: <T>(table: Table<T>) => ReactNode;
+        customActionsRight?: <T>(table: Table<T>) => ReactNode;
+        /**
+         * Default 1rem
+         * Accepts any CSS padding value
+         */
+        padding?: string;
+    };
+    tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
+    infiniteScroll?: InfiniteScrollConfig;
+}
+type ControlledState<T> = {
+    state?: T;
+    /** Callback when state chagnes. Using this requires the state to be fully controlled. */
+    onChange?: Dispatch<SetStateAction<T>>;
+};
+
+declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;
+
+/**
+ * Capitalize the table header.
+ *
+ * React table utility function.
+ * @param context
+ * @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>[];
+/** 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;
+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>;
+
+type TypographyProps = {
+    truncate?: boolean;
+    enableShowAllOnHover?: boolean;
+} & TypographyProps$1;
+declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
+
+/**
+ * Generate a HSL color based on a given string.
+ *
+ * @param str - Any given string
+ * @returns A valid hsl color
+ */
+declare function stringToHslColor(str: string, s?: number, l?: number): string;
+/** Wrap an event handler and stop event propagation */
+declare function stopPropagation<T extends HTMLElement>(handler: (e: SyntheticEvent<T>) => void): (e: SyntheticEvent<T>) => void;
+/** Used for calculating the `right` px value of pinned cells */
+declare function getTotalRight<TData>(table: Table<TData>, column: Column<TData>): number;
+declare function getIsFirstRightPinnedColumn<TData>(column: Column<TData>): boolean;
+declare function getIsLastLeftPinnedColumn<TData>(table: Table<TData>, column: Column<TData>): boolean;
+
+type FormMeta = {
+    _isNew?: boolean;
+    _editMode?: boolean;
+    _hasRemoteChange?: boolean;
+};
+type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
+
+/**
+ * Subscribes to the `_editMode` field in a `react-hook-form` context.
+ *
+ * @returns edit mode value
+ */
+declare function useEditMode(): boolean;
+/**
+ * Subscribes to the `_hasRemoteChange` field in a `react-hook-form` context.
+ *
+ * @returns edit mode value
+ */
+declare function useHasRemoteChange(): boolean;
+/**
+ * @returns function getting is new meta
+ */
+declare function useGetIsNew(): () => boolean;
+declare function useSetFormMeta<T extends FormMeta>(): (newValues: Partial<T>) => void;
+declare function removeFormMeta<T extends FormMeta>(withFormMeta: T): Omit<T, keyof FormMeta>;
+declare function addFormMeta<T>(withoutFormMeta: T): T & FormMeta;
+
+interface GetHelperTextPropsProps {
+    error?: {
+        message?: string;
+    };
+    warning?: {
+        message: string;
+    };
+    helperText?: string;
+}
+interface GetHelperTextProps {
+    variant?: Variants;
+    helperText?: string;
+    helperIcon: JSX.Element | null;
+}
+interface EditableCellBaseProps<T extends FormMeta, Value> extends CellContext<T, Value> {
+    /**
+     * FieldError object used to overwrite react-hook-form validation result. It is prioritized over react-hook-form's validation. If prefixed with the exported `WARNING_PREFIX` it will be displayed as an warning.
+     */
+    error?: FieldError;
+    /**
+     * Custom `onChange` called on input change after react-hook-form's `onChange`. E.g. used to trigger actions on change.
+     */
+    onChange?: (value: Value) => void;
+}
+
+declare function EditableCheckboxCell<T extends FormMeta>({ onChange: onChangeFromProps, ...context }: EditableCellBaseProps<T, boolean>): JSX.Element;
+
+interface EditableDateCellProps<T extends FormMeta> extends EditableCellBaseProps<T, string> {
+    dateStringFormatter?: (date: string) => string;
+}
+declare function EditableDateCell<T extends FormMeta>({ dateStringFormatter, error: errorFromProps, onChange: onChangeFromProps, ...context }: EditableDateCellProps<T>): JSX.Element;
+
+interface Option {
+    label: string;
+    value: string;
+}
+interface EditableDropdownSingleCellProps<T extends FormMeta> extends Omit<EditableCellBaseProps<T, unknown>, 'onChange'> {
+    /**
+     * `Option.value` is used internally to get and update selection state. `Option.label` is *only* for visual purposes.
+     */
+    options: Option[];
+    onChange?: (value: Option) => void;
+}
+declare function EditableDropdownSingleCell<T extends FormMeta>({ options, error: errorFromProps, onChange: onChangeFromProps, ...context }: EditableDropdownSingleCellProps<T>): JSX.Element;
+
+declare function EditableNumberCell<T extends FormMeta>({ error: errorFromProps, ...context }: EditableCellBaseProps<T, number>): JSX.Element;
+
+interface EdtiableTextAreaProps<T extends FormMeta> extends EditableCellBaseProps<T, string> {
+    title: string;
+}
+declare function EditableTextAreaCell<T extends FormMeta>({ title, error: errorFromProps, onChange: onChangeFromProps, ...context }: EdtiableTextAreaProps<T>): JSX.Element;
+
+declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromProps, ...context }: EditableCellBaseProps<T, string>): JSX.Element;
+
+declare const WARNING_PREFIX = "WARNING";
+declare function getHelperTextProps({ error, warning, helperText, }: GetHelperTextPropsProps): GetHelperTextProps;
+
+export { AppShell, AppSidebar, type CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, type DataTableProps, DynamicCell, type EditableCellBaseProps, EditableCheckboxCell, EditableDateCell, type EditableDateCellProps, EditableDropdownSingleCell, type EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, type FormMeta, type GetHelperTextProps, type GetHelperTextPropsProps, type HTMLPropsRef, HeaderCell, HierarchyCell, type InfiniteScrollConfig, type Option, PopoverCell, type RowConfig, type RowSelectionMode, SelectColumnDef, type SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, type TableLayout, type TableRowWrapper, type TableRowWrapperProps, type TruncateMode, TypographyCustom, type TypographyProps, WARNING_PREFIX, type WithoutFormMeta, addFormMeta, capitalizeHeader, enableOrUndefined, getColumnHeader, getFunctionValueOrDefault, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, prependSelectColumnIfEnabled, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };

package/dist/index.d.ts

@@ -29,8 +29,9 @@ declare const ChipsCell: (props: {
 
 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>;
@@ -144,6 +145,7 @@ interface DataTableProps<T> {
         enableColumnSelect?: boolean;
         enableGlobalFilterInput?: boolean;
         globalFilterPlaceholder?: string;
+        columnSelectPlaceholder?: string;
         filterFromLeafRows?: boolean;
         /**
          * @deprecated Use `customActionsLeft` instead
@@ -337,4 +339,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, enableOrUndefined, getColumnHeader, getFunctionValueOrDefault, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, prependSelectColumnIfEnabled, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };
+export { AppShell, AppSidebar, type CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, type DataTableProps, DynamicCell, type EditableCellBaseProps, EditableCheckboxCell, EditableDateCell, type EditableDateCellProps, EditableDropdownSingleCell, type EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, type FormMeta, type GetHelperTextProps, type GetHelperTextPropsProps, type HTMLPropsRef, HeaderCell, HierarchyCell, type InfiniteScrollConfig, type Option, PopoverCell, type RowConfig, type RowSelectionMode, SelectColumnDef, type SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, type TableLayout, type TableRowWrapper, type TableRowWrapperProps, type TruncateMode, TypographyCustom, type TypographyProps, WARNING_PREFIX, type WithoutFormMeta, addFormMeta, capitalizeHeader, enableOrUndefined, getColumnHeader, getFunctionValueOrDefault, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, prependSelectColumnIfEnabled, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };