@oliasoft-open-source/react-ui-library 3.12.0-beta-19 → 3.12.0-beta-21

package/dist/components/table/cell/cell.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import cx from "classnames";
+import styles from "./cell.module.less";
+import { getCellAlignment } from "../helper";
+import { CellWrapper } from "./cell-wrapper";
+import { Align } from "../../../common-enum";
+import { CellType } from "../enum";
+export const Cell = ({ cell, isHeader, columnHeaderAlignment = Align.RIGHT, columnAlignment, width: columnWidthProp, snapshot, testId, }) => {
+    const { style: styleProp, colSpan, rowSpan, width: cellWidthProp, type, } = cell;
+    const ref = useRef(null);
+    const alignment = {
+        bodyAlignment: columnAlignment,
+        headerAlignment: columnHeaderAlignment,
+        isHeader,
+    };
+    const cellAlignmentStyle = getCellAlignment(alignment, styles);
+    const cellAlignmentText = getCellAlignment(alignment, styles, true);
+    const cellTypeClassName = cell.type === CellType.INPUT ||
+        cell.type === CellType.NUMBER_INPUT ||
+        cell.type === CellType.SELECT ||
+        cell.type === CellType.POPOVER
+        ? styles.inputCell
+        : cell.type === CellType.SLIDER
+            ? styles.sliderCell
+            : cell.type === CellType.CHECKBOX
+                ? styles.checkBoxCell
+                : cell.type === CellType.ACTIONS
+                    ? styles.actionsCell
+                    : styles.staticCell;
+    const className = cx(styles.cell, cellTypeClassName, cell.hasSort ? styles.sortingCell : null, cellAlignmentStyle, cell.breakWord ? styles.breakWord : '');
+    // Width defined in following precedence:
+    // 1. Width defined in cell
+    // 2. Width defined in columnWidths
+    // 3. Width defined in snapshot (dragging)
+    const width = cellWidthProp ??
+        columnWidthProp ??
+        (snapshot?.isDragging && ref.current && ref.current.offsetWidth) ??
+        undefined;
+    // Cells cannot be smaller than width, but they may exceed it (if table width exceeds sum of cell widths)
+    // Style prop takes precedence
+    const style = { width, minWidth: width, ...styleProp };
+    const Element = isHeader ? 'th' : 'td';
+    return (_jsx(Element, { ref: ref, className: className, style: style, colSpan: colSpan, rowSpan: rowSpan, children: _jsx(CellWrapper, { cell: cell, columnAlignment: cellAlignmentText, isHeader: isHeader, testId: testId }) }));
+};

package/dist/components/table/cell/cell.stories.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Colspan: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const ColspanWithWidths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const CellWidths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const CellStyleProp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Rowspan: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Checkboxes: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Icons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Links: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Menus: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const JSXContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const StaticCellTooltips: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const WordbreakLongContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Popover: () => import("react/jsx-runtime").JSX.Element;
+export declare const SinglePopoverAtOnce: () => import("react/jsx-runtime").JSX.Element;
+export declare const OverflowingCells: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const TestScrolling: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/dist/components/table/cell/cell.stories.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Table } from '../table';
+import { Field } from '../../form/field';
+import { Button } from '../../button/button';
+import { Input } from '../../input/input';
+import { Flex } from '../../layout/flex/flex';
+import * as storyData from '../table.stories-data';
+export default {
+    title: 'Basic/Table/Cell',
+    component: Table,
+    args: {
+        table: {
+            ...storyData.table,
+        },
+    },
+};
+const Template = (args) => {
+    return (_jsx(Table
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args }));
+};
+export const Editable = Template.bind({});
+Editable.args = {
+    table: storyData.tableEditable,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    table: storyData.tableDisabled,
+};
+export const Colspan = Template.bind({});
+Colspan.args = {
+    table: storyData.tableColspan,
+};
+export const ColspanWithWidths = Template.bind({});
+ColspanWithWidths.args = { table: storyData.tableColspanWidths };
+export const CellWidths = Template.bind({});
+CellWidths.args = { table: storyData.tableCellWidths };
+export const CellStyleProp = Template.bind({});
+CellStyleProp.args = { table: storyData.tableCellStyleProp };
+export const Rowspan = Template.bind({});
+Rowspan.args = {
+    table: storyData.tableRowspan,
+};
+export const Checkboxes = Template.bind({});
+Checkboxes.args = {
+    table: storyData.tableCheckboxes,
+};
+export const Icons = Template.bind({});
+Icons.args = {
+    table: storyData.tableIcons,
+};
+export const Links = Template.bind({});
+Links.args = {
+    table: storyData.tableLinks,
+};
+export const Actions = Template.bind({});
+Actions.args = {
+    table: storyData.tableActions,
+};
+export const Menus = Template.bind({});
+Menus.args = {
+    table: storyData.tableWithSubActions,
+};
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+    table: storyData.tableJsxContent,
+};
+export const StaticCellTooltips = Template.bind({});
+StaticCellTooltips.args = {
+    table: storyData.tableStaticTooltips,
+};
+export const WordbreakLongContent = Template.bind({});
+WordbreakLongContent.args = {
+    table: storyData.tableBreakLongContent,
+};
+WordbreakLongContent.parameters = {
+    docs: {
+        description: {
+            story: 'Setting `breakWord: true` on a cell will allow very long text strings to break',
+        },
+    },
+};
+export const Popover = () => {
+    const headings = ['Section', 'Width', 'Height'];
+    let units = ['', 'm', 'm'];
+    let data = [...Array(10).keys()].map((c, i) => [i, i * 2, i * 2]);
+    /*
+        Mock table data store (real apps should use Redux or similar)
+      */
+    const PopoverTable = () => {
+        const CellInputForm = ({ close, value }) => (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Input", children: _jsx(Input, { value: value, width: "100%" }) }), _jsxs(Flex, { gap: true, children: [_jsx(Button, { colored: true, label: "Save", onClick: () => { } }), _jsx(Button, { label: "Cancel", onClick: close })] })] }));
+        const table = {
+            fixedWidth: '100%',
+            headers: [
+                {
+                    cells: headings.map((h) => ({ value: h })),
+                },
+                {
+                    cells: [
+                        {},
+                        {
+                            menu: [
+                                { label: 'm', value: 'm' },
+                                { label: 'ft', value: 'ft' },
+                            ],
+                            value: units[1],
+                            type: 'Unit',
+                        },
+                        {
+                            menu: [
+                                { label: 'm', value: 'm' },
+                                { label: 'ft', value: 'ft' },
+                            ],
+                            value: units[2],
+                            type: 'Unit',
+                        },
+                    ],
+                },
+            ],
+            rows: data.map((row, i) => {
+                return {
+                    cells: [...Array(3).keys()].map((c, i) => ({
+                        //https://stackoverflow.com/a/33352604
+                        value: row[i],
+                        type: 'Popover',
+                        content: _jsx(CellInputForm, { value: row[i] }),
+                    })),
+                };
+            }),
+        };
+        return _jsx(Table, { table: table });
+    };
+    return _jsx(PopoverTable, {});
+};
+export const SinglePopoverAtOnce = () => {
+    const headings = ['Section', 'Width', 'Height'];
+    let units = ['', 'm', 'm'];
+    let data = [...Array(10).keys()].map((c, i) => [i, i * 2, i * 2]);
+    /*
+      Mock table data store (real apps should use Redux or similar)
+    */
+    const SinglePopoverOpenedTable = () => {
+        const [isPopOverCellOpened, setIsPopOverCellOpened] = useState(false);
+        const CellInputForm = ({ close, value }) => {
+            useEffect(() => {
+                if (!isPopOverCellOpened) {
+                    setIsPopOverCellOpened(true);
+                }
+            }, []);
+            const onClosePopOver = () => {
+                setIsPopOverCellOpened(false);
+                close();
+            };
+            return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Input", children: _jsx(Input, { value: value, width: "100%" }) }), _jsxs(Flex, { gap: true, children: [_jsx(Button, { colored: true, label: "Save", onClick: onClosePopOver }), _jsx(Button, { label: "Cancel", onClick: onClosePopOver })] })] }));
+        };
+        const table = {
+            headers: [
+                {
+                    cells: headings.map((h) => ({ value: h })),
+                },
+                {
+                    cells: [
+                        {},
+                        {
+                            menu: [
+                                { label: 'm', value: 'm' },
+                                { label: 'ft', value: 'ft' },
+                            ],
+                            value: units[1],
+                            type: 'Unit',
+                        },
+                        {
+                            menu: [
+                                { label: 'm', value: 'm' },
+                                { label: 'ft', value: 'ft' },
+                            ],
+                            value: units[2],
+                            type: 'Unit',
+                        },
+                    ],
+                },
+            ],
+            rows: data.map((row, i) => {
+                return {
+                    cells: [...Array(3).keys()].map((c, i) => ({
+                        //https://stackoverflow.com/a/33352604
+                        value: row[i],
+                        type: 'Popover',
+                        disabled: isPopOverCellOpened,
+                        closeOnOutsideClick: false,
+                        content: _jsx(CellInputForm, { value: row[i] }),
+                    })),
+                };
+            }),
+        };
+        return _jsx(Table, { table: table });
+    };
+    return _jsx(SinglePopoverOpenedTable, {});
+};
+export const OverflowingCells = Template.bind({});
+OverflowingCells.args = { table: storyData.tableOverflowing };
+export const TestScrolling = Template.bind({});
+TestScrolling.args = {
+    table: { ...storyData.tableActions, name: 'Food' },
+};
+TestScrolling.decorators = [
+    (Story) => (_jsx("div", { style: { width: 180, height: 180, overflow: 'hidden', resize: 'both' }, children: _jsx(Story, {}) })),
+];

package/dist/components/table/cell/input-cell-wrapper.d.ts

@@ -0,0 +1,7 @@
+import { Align } from "../../../common-enum";
+export interface IInputCellWrapperProps {
+    cell: any;
+    columnAlignment: Align.LEFT | Align.RIGHT;
+    testId?: string;
+}
+export declare const InputCellWrapper: ({ cell, columnAlignment, testId, }: IInputCellWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/cell/input-cell-wrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./cell.module.less";
+import { InputCell } from "./cell-types/input-cell";
+import { NumberInputCell } from "./cell-types/number-input-cell";
+import { SelectCell } from "./cell-types/select-cell";
+export const InputCellWrapper = ({ cell, columnAlignment, testId, }) => {
+    return (_jsx("div", { className: styles.inputWrapper, children: cell.type === 'Input' ? (_jsx(InputCell, { cell: cell, columnAlignment: columnAlignment, testId: testId })) : cell.type === 'NumberInput' ? (_jsx(NumberInputCell, { cell: cell, testId: testId })) : cell.type === 'Select' ? (_jsx(SelectCell, { cell: cell, columnAlignment: columnAlignment, testId: testId })) : null }));
+};

package/dist/components/table/enum.d.ts

@@ -0,0 +1,9 @@
+export declare enum CellType {
+    INPUT = "Input",
+    NUMBER_INPUT = "NumberInput",
+    SELECT = "Select",
+    POPOVER = "Popover",
+    SLIDER = "Slider",
+    CHECKBOX = "CheckBox",
+    ACTIONS = "Actions"
+}

package/dist/components/table/enum.js

@@ -0,0 +1,10 @@
+export var CellType;
+(function (CellType) {
+    CellType["INPUT"] = "Input";
+    CellType["NUMBER_INPUT"] = "NumberInput";
+    CellType["SELECT"] = "Select";
+    CellType["POPOVER"] = "Popover";
+    CellType["SLIDER"] = "Slider";
+    CellType["CHECKBOX"] = "CheckBox";
+    CellType["ACTIONS"] = "Actions";
+})(CellType || (CellType = {}));

package/dist/components/table/footer/footer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { IPagination } from '../../pagination/pagination';
+import { IAction } from '../../actions/actions.interface';
+export interface IFooterProps {
+    colSpan?: number;
+    pagination: IPagination;
+    actions?: IAction[];
+    content?: ReactNode;
+}
+export declare const Footer: ({ colSpan, pagination, actions, content, }: IFooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table/footer/footer.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './footer.module.less';
+import { Pagination } from '../../pagination/pagination';
+import { Actions } from '../../actions/actions';
+export const Footer = ({ colSpan, pagination, actions, content, }) => {
+    const hasActions = actions && actions.length;
+    const hasContent = content != null;
+    const hasPagination = () => {
+        if (pagination) {
+            const { rowCount, rowsPerPage } = pagination;
+            const minRows = Number(rowsPerPage?.options?.[0]?.value);
+            return rowCount > minRows;
+        }
+        return false;
+    };
+    const showFooter = hasActions || hasContent || hasPagination();
+    return showFooter ? (_jsxs("div", { className: styles.footer, children: [hasContent ? (_jsx("div", { className: styles.section, children: _jsx("div", { children: content }) })) : null, hasActions || hasPagination() ? (_jsxs("div", { className: styles.section, children: [hasPagination() ? _jsx(Pagination, { pagination: pagination }) : _jsx("div", {}), hasActions && (_jsx("div", { children: _jsx(Actions, { actions: actions }) }))] })) : null] })) : null;
+};

package/dist/components/table/footer/footer.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Footer: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/dist/components/table/footer/footer.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from '../table';
+import * as storyData from '../table.stories-data';
+export default {
+    title: 'Basic/Table/Footer',
+    component: Table,
+    args: {
+        table: {
+            ...storyData.table,
+        },
+    },
+};
+const Template = (args) => {
+    return _jsx(Table, { ...args });
+};
+export const Footer = Template.bind({});
+Footer.args = {
+    table: storyData.tableFooter,
+};

package/dist/components/table/helper.d.ts

@@ -0,0 +1,22 @@
+interface IAlignmentProps {
+    bodyAlignment?: string;
+    headerAlignment?: string;
+    isHeader: boolean;
+}
+/**
+ * getCellAlignment - returns string or class name
+ * @param {IAlignmentProps} alignment - body cell alignment
+ * @param {Record<string, string>} styles - styles object
+ * @param {boolean} isGetText - get text for example ('left', 'right' or 'center') or class name. Default value false.
+ * @returns {string|null}
+ */
+export declare const getCellAlignment: (alignment?: IAlignmentProps, styles?: Record<string, string>, isGetText?: boolean) => string | null;
+/**
+ * Returns alignments or empty array
+ * @param {Array<string | string[]>} alignments can be array of arrays or array of strings
+ * @param {boolean} isHeader
+ * @param {number} rowIndex
+ * @returns {Array<string>}
+ */
+export declare const getHeaderAlignment: (alignments?: Array<string | string[]>, isHeader?: boolean, rowIndex?: number) => string[];
+export {};

package/dist/components/table/helper.js

@@ -0,0 +1,49 @@
+import { Align } from "../../common-enum";
+/**
+ * getCellAlignment - returns string or class name
+ * @param {IAlignmentProps} alignment - body cell alignment
+ * @param {Record<string, string>} styles - styles object
+ * @param {boolean} isGetText - get text for example ('left', 'right' or 'center') or class name. Default value false.
+ * @returns {string|null}
+ */
+export const getCellAlignment = (alignment, styles = { leftAligned: '', rightAligned: '', centerAligned: '' }, isGetText = false) => {
+    if (!alignment)
+        return null;
+    const { bodyAlignment, headerAlignment, isHeader } = alignment;
+    const cellAlignment = isHeader && headerAlignment ? headerAlignment : bodyAlignment;
+    switch (cellAlignment) {
+        case Align.LEFT:
+            return isGetText ? Align.LEFT : styles.leftAligned;
+        case Align.RIGHT:
+            return isGetText ? Align.RIGHT : styles.rightAligned;
+        case Align.CENTER:
+            return isGetText ? Align.CENTER : styles.centerAligned;
+        default:
+            return isGetText ? Align.LEFT : styles.leftAligned;
+    }
+};
+/**
+ * Returns alignments or empty array
+ * @param {Array<string | string[]>} alignments can be array of arrays or array of strings
+ * @param {boolean} isHeader
+ * @param {number} rowIndex
+ * @returns {Array<string>}
+ */
+export const getHeaderAlignment = (alignments, isHeader = false, rowIndex = 0) => {
+    if (!alignments || alignments.length === 0) {
+        return [];
+    }
+    const isArrays = alignments.every(alignment => Array.isArray(alignment));
+    const isStrings = alignments.every(alignment => typeof alignment === 'string');
+    if (isArrays && isHeader) {
+        const alignmentRow = alignments[rowIndex];
+        return alignmentRow || [];
+    }
+    else if (isStrings) {
+        return alignments;
+    }
+    else {
+        console.warn('getHeaderAlignment: alignments array contains a mix of strings and arrays, returning an empty array.');
+        return [];
+    }
+};

package/dist/components/table/helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/table/helper.test.js

@@ -0,0 +1,127 @@
+import { getCellAlignment, getHeaderAlignment } from './helper';
+const styles = {
+    leftAligned: 'cell-module-leftAligned-eBFS4',
+    rightAligned: 'cell-module-rightAligned-ahWpT',
+    centerAligned: 'cell-module-centerAligned-_ktBT',
+};
+describe('helper', () => {
+    describe('getCellAlignment', () => {
+        test('should return style alignment for header row', () => {
+            const alignment = {
+                bodyAlignment: undefined,
+                headerAlignment: 'right',
+                isHeader: true,
+            };
+            const result = getCellAlignment(alignment, styles);
+            expect(result).toBe('cell-module-rightAligned-ahWpT');
+        });
+        test('should return text alignment for header row', () => {
+            const alignment = {
+                bodyAlignment: undefined,
+                headerAlignment: 'right',
+                isHeader: true,
+            };
+            const result = getCellAlignment(alignment, styles, true);
+            expect(result).toBe('right');
+        });
+        test('should return default text alignment', () => {
+            const alignment = {
+                bodyAlignment: undefined,
+                headerAlignment: undefined,
+                isHeader: false,
+            };
+            const result = getCellAlignment(alignment, styles, true);
+            expect(result).toBe('left');
+        });
+        test('should return default style alignment', () => {
+            const alignment = {
+                bodyAlignment: undefined,
+                headerAlignment: undefined,
+                isHeader: false,
+            };
+            const result = getCellAlignment(alignment, styles);
+            expect(result).toBe('cell-module-leftAligned-eBFS4');
+        });
+        test('should return style alignment for body row', () => {
+            const alignment = {
+                bodyAlignment: 'center',
+                headerAlignment: undefined,
+                isHeader: false,
+            };
+            const result = getCellAlignment(alignment, styles);
+            expect(result).toBe('cell-module-centerAligned-_ktBT');
+        });
+        test('should return default style alignment for header row', () => {
+            const alignment = {
+                bodyAlignment: undefined,
+                headerAlignment: undefined,
+                isHeader: true,
+            };
+            const result = getCellAlignment(alignment, styles);
+            expect(result).toBe('cell-module-leftAligned-eBFS4');
+        });
+        test('should return null when set no arguments', () => {
+            const result = getCellAlignment();
+            expect(result).toBeNull();
+        });
+    });
+    describe('getHeaderAlignment', () => {
+        test('should return array of alignments when was set array of arrays', () => {
+            const aligments = [
+                ['right', 'center', 'right'],
+                ['right', 'center', 'left', 'left', 'left', 'left', 'left', 'left'],
+                ['right', 'center', 'left', 'left', 'right', 'left', 'left', 'left'],
+            ];
+            const result = getHeaderAlignment(aligments, true, 2);
+            expect(result).toEqual([
+                'right',
+                'center',
+                'left',
+                'left',
+                'right',
+                'left',
+                'left',
+                'left',
+            ]);
+        });
+        test('should return array of alignments when was set array of strings', () => {
+            const aligments = [
+                'center',
+                'center',
+                'center',
+                'left',
+                'left',
+                'left',
+                'right',
+                'left',
+            ];
+            const result = getHeaderAlignment(aligments);
+            expect(result).toEqual([
+                'center',
+                'center',
+                'center',
+                'left',
+                'left',
+                'left',
+                'right',
+                'left',
+            ]);
+        });
+        test('should return empty array when was set empty array', () => {
+            const result = getHeaderAlignment([]);
+            expect(result).toEqual([]);
+        });
+        test('should return empty array when set falsy values or set no arguments', () => {
+            const result1 = getHeaderAlignment(null);
+            expect(result1).toEqual([]);
+            const result2 = getHeaderAlignment(undefined);
+            expect(result2).toEqual([]);
+            const result3 = getHeaderAlignment(false);
+            expect(result3).toEqual([]);
+            const result4 = getHeaderAlignment('');
+            expect(result4).toEqual([]);
+            const result5 = getHeaderAlignment();
+            expect(result5).toEqual([]);
+        });
+    });
+});

package/dist/components/table/row/expanded-content-row.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface IExpandedContentRowProps {
+    colSpan: number;
+    children: ReactNode;
+    flush?: boolean;
+}
+export declare const ExpandedContentRow: ({ colSpan, children, flush, }: IExpandedContentRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/row/expanded-content-row.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './row.module.less';
+export const ExpandedContentRow = ({ colSpan, children, flush, }) => {
+    return (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: cx(styles.expandableRow, flush ? styles.flush : ''), children: children }) }));
+};

package/dist/components/table/row/row.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { ICellProps } from '../cell/cell';
+interface IOnRowClickFunction {
+    (): any;
+    noStyle?: boolean;
+}
+export interface IRowProps {
+    row: {
+        active?: boolean;
+        cells: ICellProps['cell'][];
+        noDrag?: boolean;
+        onRowClick?: IOnRowClickFunction;
+        onRowFocus?: IOnRowClickFunction;
+        onRowMouseEnter?: IOnRowClickFunction;
+        onRowMouseLeave?: IOnRowClickFunction;
+        expandedContent?: {
+            content: ReactNode;
+            flush?: boolean;
+        };
+        actions?: any[];
+    };
+    rowIndex: number;
+    isHeader?: boolean;
+    columnCount: number;
+    colSpan: number;
+    columnHeaderAlignments?: string[] | string[][];
+    columnAlignment?: string[];
+    hasRowActions: boolean;
+    draggableTable?: boolean;
+    snapshot?: any;
+    provided?: any;
+    width?: string | number;
+    columnWidths?: string[];
+    testId?: string;
+}
+export declare const Row: ({ row, rowIndex, isHeader, columnCount, colSpan, columnHeaderAlignments, columnAlignment, hasRowActions, draggableTable, snapshot, provided, width, columnWidths, testId, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};