awing-library 2.1.2-dev.98 → 2.1.2-preview.1

package/dist/AWING/TableEditable/Container.test.js

@@ -0,0 +1,186 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useTranslation } from "react-i18next";
+import { FIELD_TYPE } from "../DataInput/index.js";
+import Container from "./Container.js";
+jest.mock('react-i18next', ()=>({
+        useTranslation: jest.fn()
+    }));
+jest.mock('@mui/material', ()=>({
+        ...jest.requireActual('@mui/material'),
+        Button: jest.fn(({ children, onClick, ...props })=>/*#__PURE__*/ jsx("button", {
+                onClick: onClick,
+                ...props,
+                children: children
+            }))
+    }));
+jest.mock('lodash', ()=>({
+        ...jest.requireActual('lodash'),
+        cloneDeep: jest.fn((x)=>JSON.parse(JSON.stringify(x)))
+    }));
+describe('TableEditable Component', ()=>{
+    const mockColumnDefinitions = [
+        {
+            editFieldDefinition: {
+                fieldName: 'name',
+                required: true,
+                type: 'multiple-select'
+            },
+            headerName: 'Name'
+        }
+    ];
+    const mockItems = [
+        {
+            id: 1,
+            name: 'John',
+            age: 30
+        },
+        {
+            id: 2,
+            name: 'Jane',
+            age: 25
+        }
+    ];
+    const defaultProps = {
+        columnDefinitions: mockColumnDefinitions,
+        items: mockItems,
+        onChange: jest.fn(),
+        getRowId: (row)=>row.id,
+        selected: [],
+        onSelectedChange: jest.fn(),
+        onAddNew: jest.fn()
+    };
+    beforeEach(()=>{
+        useTranslation.mockReturnValue({
+            t: jest.fn((key)=>{
+                const translations = {
+                    'Common.Create': 'Create'
+                };
+                return translations[key] || key;
+            })
+        });
+    });
+    it('should render table with correct number of items', ()=>{
+        render(/*#__PURE__*/ jsx(Container, {
+            ...defaultProps
+        }));
+        const table = screen.getByRole('table');
+        expect(table).toBeInTheDocument();
+    });
+    it('should render add new item button when onAddNew is provided', ()=>{
+        render(/*#__PURE__*/ jsx(Container, {
+            ...defaultProps
+        }));
+        const createButton = screen.getByText('Create');
+        expect(createButton).toBeInTheDocument();
+        fireEvent.click(createButton);
+        expect(defaultProps.onAddNew).toHaveBeenCalledTimes(1);
+    });
+    it('should handle row selection', ()=>{
+        const mockOnSelectedChange = jest.fn();
+        const propsWithSelection = {
+            ...defaultProps,
+            selected: [],
+            onSelectedChange: mockOnSelectedChange
+        };
+        render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithSelection
+        }));
+        const checkboxes = screen.getAllByRole('checkbox');
+        fireEvent.click(checkboxes[1]);
+        expect(mockOnSelectedChange).toHaveBeenCalledWith([
+            1
+        ]);
+    });
+    it('should render top bar actions when items are selected', ()=>{
+        const propsWithSelectedActions = {
+            ...defaultProps,
+            selected: [
+                1
+            ],
+            selectionActions: [
+                {
+                    icon: /*#__PURE__*/ jsx("div", {
+                        "data-testid": "mock-icon"
+                    }),
+                    action: jest.fn(),
+                    tooltipTitle: 'Test Action'
+                }
+            ]
+        };
+        render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithSelectedActions
+        }));
+        expect(screen.getByText('1 selected')).toBeInTheDocument();
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    });
+    it('should validate data based on column definitions', ()=>{
+        const mockOnChange = jest.fn();
+        const propsWithValidation = {
+            ...defaultProps,
+            onChange: mockOnChange,
+            columnDefinitions: [
+                {
+                    editFieldDefinition: {
+                        fieldName: 'name',
+                        required: true,
+                        type: FIELD_TYPE.TEXT,
+                        customeFieldChange: (value)=>{
+                            if ('Special' === value) return 'extraField:test';
+                            return '';
+                        }
+                    },
+                    headerName: 'Name'
+                }
+            ]
+        };
+        render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithValidation
+        }));
+        expect(mockOnChange).not.toHaveBeenCalled();
+    });
+    it('should handle row deletion', ()=>{
+        const mockOnChange = jest.fn();
+        const propsWithDelete = {
+            ...defaultProps,
+            includeDelete: true,
+            onChange: mockOnChange
+        };
+        render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithDelete
+        }));
+    });
+    it('should use custom getRowId function when provided', ()=>{
+        const customGetRowId = jest.fn((row)=>row.customId);
+        const propsWithCustomId = {
+            ...defaultProps,
+            items: [
+                {
+                    customId: 'custom1',
+                    name: 'John',
+                    age: 30
+                },
+                {
+                    customId: 'custom2',
+                    name: 'Jane',
+                    age: 25
+                }
+            ],
+            getRowId: customGetRowId
+        };
+        render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithCustomId
+        }));
+        expect(customGetRowId).toHaveBeenCalledTimes(2);
+    });
+    it('should hide header when hideHeader is true', ()=>{
+        const propsWithHiddenHeader = {
+            ...defaultProps,
+            hideHeader: true
+        };
+        const { container } = render(/*#__PURE__*/ jsx(Container, {
+            ...propsWithHiddenHeader
+        }));
+    });
+    it('should handle auto-calculation for fields with formulas', ()=>{});
+});

package/dist/AWING/TableEditable/components/TableCellEditable.d.ts

@@ -0,0 +1,3 @@
+import { TableCellEditableProps } from '../interface';
+export default function TableCellEditable<T extends object>(props: TableCellEditableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TableCellEditable.d.ts.map

package/dist/AWING/TableEditable/components/TableCellEditable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellEditable.d.ts","sourceRoot":"","sources":["../../../../src/AWING/TableEditable/components/TableCellEditable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAiBtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CA6C3F"}

package/dist/AWING/TableEditable/components/TableCellEditable.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { TableCell } from "@mui/material";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
+import DataInput, { FIELD_TYPE } from "../../DataInput/index.js";
+const StyleTooltip = styled(({ className, ...props })=>/*#__PURE__*/ jsx(Tooltip, {
+        ...props,
+        arrow: true,
+        classes: {
+            popper: className
+        }
+    }))(()=>({
+        [`& .${tooltipClasses.arrow}`]: {
+            color: '#bbbbbb',
+            maxWidth: 450
+        },
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: '#f5f5f5',
+            maxWidth: 900,
+            boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)'
+        }
+    }));
+function TableCellEditable(props) {
+    const { cellDefinition, numOfRowSpan } = props;
+    const { TableCellProps, isTooltip, getTitleTooltip, value, error } = cellDefinition;
+    const renderDataInput = ()=>{
+        const inputProps = {
+            ...![
+                FIELD_TYPE.ASYNC_AUTOCOMPLETE,
+                FIELD_TYPE.AUTOCOMPLETE
+            ].includes(cellDefinition?.type) ? {
+                InputProps: {
+                    disableUnderline: true,
+                    style: {
+                        textAlign: cellDefinition?.TableCellProps?.align == 'right' ? 'end' : void 0,
+                        padding: '0px 8px'
+                    }
+                }
+            } : {},
+            ...cellDefinition,
+            disableHelperText: true
+        };
+        return /*#__PURE__*/ jsx(DataInput, {
+            ...inputProps
+        });
+    };
+    return /*#__PURE__*/ jsx(TableCell, {
+        sx: {
+            p: 0,
+            border: error ? '2px solid #ED1D25' : '1px solid rgb(224, 224, 224)'
+        },
+        rowSpan: numOfRowSpan,
+        ...TableCellProps,
+        children: isTooltip ? /*#__PURE__*/ jsx(StyleTooltip, {
+            title: getTitleTooltip && getTitleTooltip(value) || '',
+            placement: "top-start",
+            children: /*#__PURE__*/ jsx("div", {
+                children: renderDataInput()
+            })
+        }) : renderDataInput()
+    });
+}
+export { TableCellEditable as default };

package/dist/AWING/TableEditable/components/TableEditableBody.d.ts

@@ -0,0 +1,3 @@
+import type { TableEditableBodyProps } from '../interface';
+export default function TableEditableBody<T>(props: TableEditableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TableEditableBody.d.ts.map

package/dist/AWING/TableEditable/components/TableEditableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditableBody.d.ts","sourceRoot":"","sources":["../../../../src/AWING/TableEditable/components/TableEditableBody.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAkB3D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CAyL5E"}

package/dist/AWING/TableEditable/components/TableEditableBody.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { uniqBy } from "lodash";
+import { Delete } from "@mui/icons-material";
+import { Checkbox, IconButton, TableBody, TableCell, TableRow, Tooltip, tooltipClasses } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import TableCellEditable from "./TableCellEditable.js";
+const StyleTooltip = styled(({ className, ...props })=>/*#__PURE__*/ jsx(Tooltip, {
+        ...props,
+        arrow: true,
+        classes: {
+            popper: className
+        }
+    }))(()=>({
+        [`& .${tooltipClasses.arrow}`]: {
+            color: '#bbbbbb',
+            maxWidth: 450
+        },
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: '#f5f5f5',
+            maxWidth: 900,
+            boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)'
+        }
+    }));
+function TableEditableBody(props) {
+    const { items, getId, selected, onSelectedChange, onSelect, columnDefinitions, dataValidation, includeDelete, spanningRows, onChange, onDelete, mergeRowsBy } = props;
+    const convertToMergeAbleItems = (keyValue)=>{
+        const result = [];
+        const temp = [
+            ...items.map((item, index)=>({
+                    ...item,
+                    originalIndex: index
+                }))
+        ];
+        uniqBy(temp, keyValue).map((t)=>{
+            const childs = temp.filter((item)=>item[keyValue] === t[keyValue]);
+            result.push(...childs);
+        });
+        return result;
+    };
+    const convertItems = mergeRowsBy ? convertToMergeAbleItems(mergeRowsBy) : items;
+    return /*#__PURE__*/ jsxs(TableBody, {
+        children: [
+            convertItems.map((row, index)=>{
+                const rowIdx = row.originalIndex ?? index;
+                const id = getId(row) ?? rowIdx;
+                return /*#__PURE__*/ jsxs(TableRow, {
+                    children: [
+                        selected && onSelectedChange && /*#__PURE__*/ jsx(TableCell, {
+                            padding: "checkbox",
+                            sx: {
+                                border: '1px solid rgb(224, 224, 224)'
+                            },
+                            children: /*#__PURE__*/ jsx(Checkbox, {
+                                color: "primary",
+                                checked: selected.includes(Number(id)),
+                                onClick: (e)=>e.stopPropagation(),
+                                onChange: ()=>onSelect(Number(id)),
+                                slotProps: {
+                                    input: {
+                                        'aria-braillelabel': `enhanced-table-checkbox-${id}`
+                                    }
+                                }
+                            })
+                        }),
+                        columnDefinitions.map((colDef, idx)=>{
+                            if (colDef.contentGetter) {
+                                const content = colDef.contentGetter(row, rowIdx);
+                                const fieldName = colDef.fieldName ?? '';
+                                const isMergeColumn = fieldName === mergeRowsBy;
+                                const isDisplay = isMergeColumn ? 0 == index || convertItems[index - 1][fieldName] !== row[fieldName] : true;
+                                const numOfRowSpan = isMergeColumn ? convertItems.filter((c)=>c[fieldName] === row[fieldName]).length : 1;
+                                return isDisplay && /*#__PURE__*/ jsx(TableCell, {
+                                    sx: {
+                                        border: '1px solid rgb(224, 224, 224)'
+                                    },
+                                    ...colDef.TableCellProps,
+                                    rowSpan: numOfRowSpan,
+                                    children: colDef.isTooltip ? /*#__PURE__*/ jsx(StyleTooltip, {
+                                        title: colDef.getTitleTooltip && colDef.getTitleTooltip(content) || '',
+                                        placement: "top-start",
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            children: content
+                                        })
+                                    }) : colDef.contentGetter(row, rowIdx)
+                                }, idx);
+                            }
+                            if (colDef.editFieldDefinition) {
+                                const { fieldName } = colDef.editFieldDefinition;
+                                const currentValue = row[fieldName] ?? '';
+                                const isMergeColumn = fieldName === mergeRowsBy;
+                                const isDisplay = isMergeColumn ? 0 == index || convertItems[index - 1][fieldName] !== row[fieldName] : true;
+                                const numOfRowSpan = isMergeColumn ? convertItems.filter((c)=>c[fieldName] === row[fieldName]).length : 1;
+                                const error = dataValidation?.[rowIdx]?.[fieldName] !== void 0 && !dataValidation?.[rowIdx]?.[fieldName];
+                                return isDisplay && /*#__PURE__*/ jsx(TableCellEditable, {
+                                    cellDefinition: {
+                                        ...colDef.editFieldDefinition,
+                                        row,
+                                        TableCellProps: colDef.TableCellProps,
+                                        isTooltip: colDef.isTooltip,
+                                        getTitleTooltip: colDef.getTitleTooltip,
+                                        error: error,
+                                        value: currentValue,
+                                        onChange: (newValue, valid)=>{
+                                            let indexes = [
+                                                rowIdx
+                                            ];
+                                            if (isMergeColumn) indexes = convertItems.filter((c)=>c[fieldName] === row[fieldName]).map((c)=>c?.originalIndex ?? 0);
+                                            onChange(indexes, fieldName, newValue, valid);
+                                        },
+                                        type: colDef.editFieldDefinition.type,
+                                        fieldName: colDef.editFieldDefinition.fieldName || ''
+                                    },
+                                    numOfRowSpan: numOfRowSpan
+                                }, idx);
+                            }
+                        }),
+                        true === includeDelete && /*#__PURE__*/ jsx(TableCell, {
+                            align: "center",
+                            sx: {
+                                p: 0,
+                                border: '1px solid rgb(224, 224, 224)'
+                            },
+                            children: /*#__PURE__*/ jsx(IconButton, {
+                                "aria-label": "delete",
+                                onClick: ()=>onDelete(rowIdx),
+                                children: /*#__PURE__*/ jsx(Delete, {})
+                            })
+                        })
+                    ]
+                }, rowIdx);
+            }),
+            spanningRows?.map((row, index)=>/*#__PURE__*/ jsx(Fragment, {
+                    children: row
+                }, index))
+        ]
+    });
+}
+export { TableEditableBody as default };

package/dist/AWING/TableEditable/components/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderProps } from '../interface';
+export default function TableHeader<T>(props: TableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/AWING/TableEditable/components/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/AWING/TableEditable/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAqDhE"}

package/dist/AWING/TableEditable/components/TableHeader.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, TableCell, TableHead, TableRow } from "@mui/material";
+function TableHeader(props) {
+    const { selected, onSelectedChange, numOfRows, onSelectAll, includeDelete, columnDefinitions } = props;
+    return /*#__PURE__*/ jsx(TableHead, {
+        children: /*#__PURE__*/ jsxs(TableRow, {
+            children: [
+                selected && onSelectedChange && /*#__PURE__*/ jsx(TableCell, {
+                    padding: "checkbox",
+                    sx: {
+                        border: '1px solid rgb(224, 224, 224)'
+                    },
+                    children: /*#__PURE__*/ jsx(Checkbox, {
+                        color: "primary",
+                        indeterminate: selected.length > 0 && selected.length < numOfRows,
+                        checked: selected.length > 0 && selected.length === numOfRows,
+                        onChange: ()=>onSelectAll(),
+                        slotProps: {
+                            input: {
+                                'aria-label': 'select all desserts'
+                            }
+                        }
+                    })
+                }),
+                columnDefinitions.map((colDef, idx)=>{
+                    const { headerName, width, TableCellProps } = colDef;
+                    return /*#__PURE__*/ jsx(TableCell, {
+                        sx: {
+                            border: '1px solid rgb(224, 224, 224)',
+                            ...width && {
+                                width: width
+                            }
+                        },
+                        ...TableCellProps,
+                        children: `${headerName}${colDef?.editFieldDefinition?.required ? '*' : ''}`
+                    }, idx);
+                }),
+                true === includeDelete && /*#__PURE__*/ jsx(TableCell, {
+                    sx: {
+                        width: 60,
+                        border: '1px solid rgb(224, 224, 224)'
+                    }
+                })
+            ]
+        })
+    });
+}
+export { TableHeader as default };

package/dist/AWING/TableEditable/components/TopBarActions.d.ts

@@ -0,0 +1,3 @@
+import { TopBarActionsProps } from '../interface';
+export default function TopBarActions(props: TopBarActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TopBarActions.d.ts.map

package/dist/AWING/TableEditable/components/TopBarActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarActions.d.ts","sourceRoot":"","sources":["../../../../src/AWING/TableEditable/components/TopBarActions.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAsC9D"}

package/dist/AWING/TableEditable/components/TopBarActions.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, IconButton, Tooltip, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+function TopBarActions(props) {
+    const { t } = useTranslation();
+    const { selected, selectionActions } = props;
+    return /*#__PURE__*/ jsx(Box, {
+        sx: {
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ jsxs(Box, {
+            sx: {
+                padding: '10px 16px',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                background: '#EEEEEE'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "body1",
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center'
+                    },
+                    children: `${selected.length} ${t('Common.Selected').toLowerCase()}`
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'flex-end'
+                    },
+                    children: selectionActions && selectionActions.map((actionDef, actIdx)=>/*#__PURE__*/ jsx(Tooltip, {
+                            title: actionDef.tooltipTitle,
+                            children: /*#__PURE__*/ jsx(IconButton, {
+                                size: "small",
+                                onClick: ()=>actionDef.action(),
+                                sx: {
+                                    mx: 0.5
+                                },
+                                disabled: actionDef.disabled,
+                                children: actionDef.icon
+                            })
+                        }, actIdx))
+                })
+            ]
+        })
+    });
+}
+export { TopBarActions as default };

package/dist/AWING/TableEditable/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from './Container';
+export { default as TableHeader } from './components/TableHeader';
+export { default as TableEditableBody } from './components/TableEditableBody';
+export { default as TableCellEditable } from './components/TableCellEditable';
+export { default as TopBarActions } from './components/TopBarActions';
+export * from './interface';
+//# sourceMappingURL=index.d.ts.map

package/dist/AWING/TableEditable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AWING/TableEditable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,aAAa,CAAC"}

package/dist/AWING/TableEditable/index.js

@@ -0,0 +1,7 @@
+import Container from "./Container.js";
+import TableHeader from "./components/TableHeader.js";
+import TableEditableBody from "./components/TableEditableBody.js";
+import TableCellEditable from "./components/TableCellEditable.js";
+import TopBarActions from "./components/TopBarActions.js";
+export * from "./interface.js";
+export { TableCellEditable, TableEditableBody, TableHeader, TopBarActions, Container as default };

package/dist/AWING/TableEditable/interface.d.ts

@@ -0,0 +1,75 @@
+import { TableCellProps } from '@mui/material/TableCell';
+import { ReactNode } from 'react';
+import type { SelectionActionDefinition } from '../DataGrid/interface';
+import { FieldDefinitionProps } from '../DataInput/interfaces';
+export type CellDefinition<T extends object> = FieldDefinitionProps<T> & {
+    TableCellProps?: TableCellProps;
+    isTooltip?: boolean;
+    row?: Partial<T>;
+    getTitleTooltip?: (value: T[keyof T]) => NonNullable<ReactNode>;
+};
+export interface ColumnDefinition<T extends object> {
+    headerName: ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    editFieldDefinition?: CellDefinition<T>;
+    isRowGroup?: boolean;
+    contentGetter?: (obj: T, idx?: number) => ReactNode;
+    fieldName?: string;
+    isTooltip?: boolean;
+    getTitleTooltip?: (value: T[keyof T]) => NonNullable<ReactNode>;
+}
+export type TableEditableProps<T> = {
+    columnDefinitions: Array<ColumnDefinition<Partial<T>>>;
+    items: Array<Partial<T>>;
+    onChange(newData: Array<Partial<T>>, dataValid: boolean, fieldName?: keyof T): void;
+    getRowId?(obj: Partial<T>): number;
+    selected?: number[];
+    onSelectedChange?(ids: number[]): void;
+    hideHeader?: boolean;
+    onAddNew?(): void;
+    includeDelete?: boolean;
+    spanningRows?: ReactNode[];
+    selectionActions?: SelectionActionDefinition[];
+    mergeRowsBy?: string;
+    observation?: {
+        objObserve: Array<keyof T>;
+        callback: (fieldName?: keyof T, columnValue?: unknown, index?: number) => void;
+    }[];
+};
+export interface TopBarActionsProps {
+    selected: number[];
+    selectionActions?: SelectionActionDefinition[];
+}
+export interface TableHeaderProps<T> {
+    selected?: number[];
+    onSelectedChange?: (selected: number[]) => void;
+    numOfRows: number;
+    onSelectAll: () => void;
+    includeDelete?: boolean;
+    columnDefinitions: Array<ColumnDefinition<Partial<T>>>;
+}
+export interface TableEditableBodyProps<T> {
+    items: Array<Partial<T>>;
+    getId: (item: Partial<T>) => string | number | undefined;
+    selected?: number[];
+    onSelectedChange?: (selected: number[]) => void;
+    onSelect: (id: number) => void;
+    columnDefinitions: Array<ColumnDefinition<Partial<T>>>;
+    dataValidation: Partial<{
+        [K in keyof T]: boolean;
+    }>[];
+    includeDelete?: boolean;
+    spanningRows?: ReactNode[];
+    onChange: (indexes: number[], fieldName: keyof T, newValue: T[keyof T], valid: boolean) => void;
+    onDelete: (rowIdx: number) => void;
+    mergeRowsBy?: string;
+}
+export interface TableCellEditableProps<T extends object> {
+    cellDefinition: CellDefinition<T>;
+    numOfRowSpan?: number;
+}
+//# sourceMappingURL=interface.d.ts.map

package/dist/AWING/TableEditable/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/AWING/TableEditable/interface.ts"],"names":[],"mappings":"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"}

package/dist/AWING/TableEditableCollapsible/Container.d.ts

@@ -0,0 +1,3 @@
+import type { TableEditableProps } from './interface';
+export default function TableEditable<T>(props: TableEditableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Container.d.ts.map

package/dist/AWING/TableEditableCollapsible/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/AWING/TableEditableCollapsible/Container.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAwUpE"}