@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/components/content.js

@@ -0,0 +1,305 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Icon } from '@akinon/icons';
+import { Input } from '@akinon/ui-input';
+import { Flex } from '@akinon/ui-layout';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash-es';
+import * as React from 'react';
+import { IS_EDITING_INITIAL_VALUE } from '../constants';
+import { i18n } from '../i18n';
+import { TableMapper } from './mapper';
+import { ActionButtons } from './row-actions';
+const { t } = i18n;
+export const TableContent = ({ columns, customActionButtons, data, editDataIndexes, expandedRows, onEdit, onToggleExpand, onToggleSelection, rowKey, selectedRows, mapperConfig }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const [isEditingPk, setIsEditingPk] = React.useState(IS_EDITING_INITIAL_VALUE);
+    const [gradientLinePositions, setGradientLinePositions] = React.useState([]);
+    const [badgePositions, setBadgePositions] = React.useState([]);
+    const [tableHeight, setTableHeight] = React.useState(0);
+    const tableRef = React.useRef(null);
+    const headerRefs = React.useRef(new Map());
+    const rowRefs = React.useRef(new Map());
+    const { dataIndex: mapperDataIndex, onAddItem, onItemChange, onRemoveItem } = mapperConfig || {};
+    const hasMapper = !!mapperDataIndex;
+    const hasEdit = !!onEdit && !!editDataIndexes && editDataIndexes.length > 0;
+    const gradientColumnIndexes = React.useMemo(() => {
+        return columns
+            .map((col, index) => (col.hasGradientLine ? index : -1))
+            .filter(index => index !== -1);
+    }, [columns]);
+    const calculateGradientLinePositions = React.useCallback(() => {
+        const positions = [];
+        gradientColumnIndexes.forEach(colIndex => {
+            const headerCell = headerRefs.current.get(colIndex);
+            if (headerCell) {
+                positions.push(headerCell.offsetLeft);
+            }
+        });
+        return positions;
+    }, [gradientColumnIndexes]);
+    /**
+     * Calculates badge positions for rows with multiple mapper fields.
+     * Badges are displayed on the gradient line to indicate field count.
+     */
+    const calculateGradientBadgePositions = React.useCallback((gradientX) => {
+        const badges = [];
+        if (gradientX === undefined || !hasMapper) {
+            return badges;
+        }
+        data.forEach(row => {
+            const rowId = get(row, rowKey);
+            const rowEl = rowRefs.current.get(rowId);
+            if (rowEl) {
+                const fields = row[mapperDataIndex];
+                const count = Array.isArray(fields) ? fields.length : 0;
+                if (count > 1) {
+                    badges.push({
+                        x: gradientX + 1,
+                        y: rowEl.offsetTop + rowEl.offsetHeight / 2,
+                        count,
+                        rowId
+                    });
+                }
+            }
+        });
+        return badges;
+    }, [hasMapper, mapperDataIndex, data, rowKey]);
+    const calculateAllPositions = React.useCallback(() => {
+        if (tableRef.current) {
+            setTableHeight(tableRef.current.offsetHeight);
+        }
+        const linePositions = calculateGradientLinePositions();
+        setGradientLinePositions(linePositions);
+        if (!hasMapper)
+            return;
+        const badges = calculateGradientBadgePositions(linePositions[0]);
+        setBadgePositions(badges);
+    }, [calculateGradientLinePositions, calculateGradientBadgePositions]);
+    // initial mount and resize changes
+    React.useEffect(() => {
+        calculateAllPositions();
+        window.addEventListener('resize', calculateAllPositions);
+        return () => window.removeEventListener('resize', calculateAllPositions);
+    }, [calculateAllPositions]);
+    React.useEffect(() => {
+        // wait for the DOM to update, then recalculate positions
+        const rafId = requestAnimationFrame(() => {
+            calculateAllPositions();
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [data, expandedRows, isEditingPk, calculateAllPositions]);
+    const isMapperColumn = (dataIndex) => {
+        return hasMapper && mapperDataIndex === dataIndex;
+    };
+    const checkIsEditing = (rowId) => {
+        return isEditingPk === rowId;
+    };
+    const getRowId = (row) => {
+        return get(row, rowKey);
+    };
+    const isRowSelected = (rowId) => {
+        return selectedRows.includes(rowId);
+    };
+    const isRowExpanded = (rowId) => {
+        return expandedRows.includes(rowId);
+    };
+    const renderMapper = ({ rowId, value, dataIndex }) => {
+        const isExpanded = isRowExpanded(rowId);
+        const displayedValues = isExpanded ? value : value.slice(0, 1);
+        const handleExpand = () => {
+            if (!isExpanded) {
+                onToggleExpand(rowId);
+            }
+        };
+        const handleAddItem = () => {
+            if (!onAddItem)
+                return;
+            handleExpand();
+            onAddItem(rowId, dataIndex);
+        };
+        const handleRemoveItem = (index) => () => {
+            if (!onRemoveItem)
+                return;
+            onRemoveItem({
+                pk: rowId,
+                dataIndex,
+                index
+            });
+        };
+        const handleItemChange = ({ key, value, index }) => {
+            if (!onItemChange)
+                return;
+            // Build the updated array with the changed field value
+            const updatedArray = displayedValues.map((item, i) => i === index
+                ? Object.assign(Object.assign({}, item), { [key]: Object.assign(Object.assign({}, item[key]), { value }) }) : item);
+            onItemChange(rowId, {
+                [dataIndex]: updatedArray
+            });
+        };
+        return (React.createElement(TableMapper, { values: displayedValues, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleItemChange: handleItemChange }));
+    };
+    const renderCellValue = ({ column, row, rowId }) => {
+        const dataIndex = get(column, 'dataIndex', '');
+        const value = get(row, dataIndex, '');
+        if (hasEdit &&
+            checkIsEditing(rowId) &&
+            editDataIndexes.includes(dataIndex)) {
+            const handleOnChangeValue = (e) => {
+                const currentValue = e.target.value;
+                onEdit(rowId, {
+                    [dataIndex]: currentValue
+                });
+            };
+            return (React.createElement(Input, { className: "w-44 h-9", onChange: handleOnChangeValue, value: value }));
+        }
+        if (hasMapper && isMapperColumn(dataIndex)) {
+            return renderMapper({
+                rowId,
+                value,
+                dataIndex
+            });
+        }
+        if (column.render) {
+            return column.render(value, row);
+        }
+        if (typeof value === 'object') {
+            return '';
+        }
+        return value;
+    };
+    const renderExpandButton = (rowId) => {
+        const isExpanded = isRowExpanded(rowId);
+        const handleClick = () => {
+            onToggleExpand(rowId);
+        };
+        return (React.createElement(Icon, { size: 10, color: "var(--color-azure-500)", icon: "chevron_down", className: classNames('mr-3 cursor-pointer', hashId, {
+                [`${baseCls}__icon--collapsed`]: !isExpanded
+            }), onClick: handleClick }));
+    };
+    const renderTableCells = (row, rowId) => {
+        return columns.map((column, colIndex) => {
+            const isFirstColumn = colIndex === 0;
+            return (React.createElement("td", { className: "text-blue-50 font-normal text-base whitespace-nowrap py-0 px-5", key: `cell-${rowId}-${column.dataIndex || colIndex}` },
+                isFirstColumn && hasMapper && renderExpandButton(rowId),
+                renderCellValue({
+                    column,
+                    row,
+                    rowId
+                })));
+        });
+    };
+    const getRowRef = React.useCallback((rowId) => {
+        return (el) => {
+            if (el) {
+                rowRefs.current.set(rowId, el);
+            }
+        };
+    }, []);
+    const renderTableRow = (row, isLastChild) => {
+        const rowId = getRowId(row);
+        const isSelected = isRowSelected(rowId);
+        return (React.createElement("tr", { ref: getRowRef(rowId), className: classNames('border-0 border-b border-solid border-ebonyClay-200 h-12', {
+                'bg-green-952-10': isSelected,
+                'border-b-0': isLastChild
+            }), key: rowId },
+            renderTableCells(row, rowId),
+            React.createElement("td", { className: "text-blue-50 font-normal text-base py-0 px-4 whitespace-nowrap text-center min-w-24" },
+                React.createElement(ActionButtons, { customActionButtons: customActionButtons, hasEdit: hasEdit, isEditing: checkIsEditing(rowId), isSelected: isSelected, onToggleSelection: onToggleSelection, rowId: rowId, setIsEditingPk: setIsEditingPk }))));
+    };
+    const renderEmptyRow = () => {
+        return (React.createElement("tr", null,
+            React.createElement("td", { className: "font-normal text-center text-gray-500 text-sm py-10 px-4", colSpan: columns.length + 1 }, t('filter.no.match'))));
+    };
+    const renderGradientOverlay = () => {
+        return (React.createElement(React.Fragment, null,
+            gradientLinePositions.map((left, index) => (React.createElement("div", { key: `gradient-line-${index}`, className: `${baseCls}__gradient-line ${hashId} absolute z-10 pointer-events-none rounded-sm top-5`, style: {
+                    left,
+                    height: tableHeight > 0 ? tableHeight - 28 : 'calc(100% - 28px)'
+                } }))),
+            hasMapper &&
+                badgePositions.map(badge => (React.createElement("div", { key: `gradient-badge-${badge.rowId}`, className: `${baseCls}__gradient-badge ${hashId} absolute size-5 text-xs text-neutral-50 font-medium z-20 rounded-full flex items-center justify-center`, style: {
+                        left: badge.x,
+                        top: badge.y,
+                        transform: 'translate(-50%, -50%)'
+                    } }, badge.count)))));
+    };
+    const renderTableRows = () => {
+        if (data.length === 0) {
+            return renderEmptyRow();
+        }
+        return data.map((row, index) => {
+            const isLastChild = index === data.length - 1;
+            return renderTableRow(row, isLastChild);
+        });
+    };
+    const getHeaderRef = React.useCallback((index, hasGradientLine) => {
+        if (!hasGradientLine)
+            return undefined;
+        return (el) => {
+            if (el)
+                headerRefs.current.set(index, el);
+        };
+    }, []);
+    const renderTableHeaders = () => {
+        return (React.createElement("tr", null, columns.map((column, index) => (React.createElement("th", { ref: getHeaderRef(index, column.hasGradientLine), className: "p-5 uppercase font-medium text-xs text-left text-gray-400", key: `header-${column.dataIndex || index}` },
+            React.createElement(Flex, { align: "center", gap: 8 },
+                React.createElement("span", null, column.title),
+                column.hasSparkle && (React.createElement(Icon, { color: "var(--color-azure-500)", icon: "ai-star", size: 17 }))))))));
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['AiModalTableContent'],
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__table-wrapper`]: {
+                maxHeight: '420px',
+                scrollbarGutter: 'stable',
+                '&::-webkit-scrollbar': {
+                    width: '8px',
+                    height: '8px'
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: 'transparent'
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: 'var(--color-ebonyClay-50)',
+                    borderRadius: '4px'
+                },
+                '&::-webkit-scrollbar-thumb:hover': {
+                    background: 'var(--color-ebonyClay-300)'
+                },
+                '&::-webkit-scrollbar-corner': {
+                    background: 'transparent'
+                },
+                scrollbarColor: 'var(--color-ebonyClay-200) transparent'
+            },
+            [`${prefixCls}__table-element`]: {
+                borderCollapse: 'collapse'
+            },
+            [`${prefixCls}__icon--collapsed`]: {
+                transform: 'rotate(-90deg)'
+            },
+            [`${prefixCls}__gradient-line`]: {
+                width: '2px',
+                background: 'linear-gradient(180deg, var(--color-red-400) 0%, var(--color-azure-500) 100%)'
+            },
+            [`${prefixCls}__gradient-badge`]: {
+                background: 'linear-gradient(180deg, var(--color-red-400) 0%, var(--color-azure-500) 100%)'
+            }
+        };
+    });
+    return useStyle(React.createElement("div", { className: "bg-ebonyClay-450 rounded-lg overflow-hidden" },
+        React.createElement("div", { className: `${baseCls}__table-wrapper ${hashId} overflow-x-auto overflow-y-auto` },
+            React.createElement("div", { className: "relative" },
+                renderGradientOverlay(),
+                React.createElement("table", { ref: tableRef, className: `${baseCls}__table-element ${hashId} w-full bg-ebonyClay-450` },
+                    React.createElement("thead", null, renderTableHeaders()),
+                    React.createElement("tbody", null, renderTableRows()))))));
+};

package/dist/esm/ai-table/components/filters.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { TableBaseProps } from '../../types';
+interface TableFiltersProps {
+    filters: TableBaseProps['filters'];
+    filterValues: Record<string, string>;
+    onFilterChange: (key: string, value: string) => void;
+}
+export declare const TableFilters: ({ filters, filterValues, onFilterChange }: TableFiltersProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=filters.d.ts.map

package/dist/esm/ai-table/components/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,iBAAiB;IACzB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,GAAI,2CAI1B,iBAAiB,6BA4FnB,CAAC"}

package/dist/esm/ai-table/components/filters.js

@@ -0,0 +1,51 @@
+import { Icon } from '@akinon/icons';
+import { Input } from '@akinon/ui-input';
+import { Flex } from '@akinon/ui-layout';
+import { debounce } from 'lodash-es';
+import * as React from 'react';
+import { DEBOUNCE_DELAY, FILTER_TYPES } from '../constants';
+export const TableFilters = ({ filters, filterValues, onFilterChange }) => {
+    const [localValues, setLocalValues] = React.useState({});
+    const debouncedOnFilterChange = React.useRef(null);
+    React.useEffect(() => {
+        debouncedOnFilterChange.current = debounce((key, value) => {
+            onFilterChange(key, value);
+        }, DEBOUNCE_DELAY);
+        return () => {
+            if (debouncedOnFilterChange.current) {
+                debouncedOnFilterChange.current.cancel();
+            }
+        };
+    }, [onFilterChange]);
+    React.useEffect(() => {
+        setLocalValues(filterValues);
+    }, [filterValues]);
+    const handleInputChange = (key, value) => {
+        setLocalValues(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        if (debouncedOnFilterChange.current) {
+            debouncedOnFilterChange.current(key, value);
+        }
+    };
+    const renderInputFilter = (filter, index) => {
+        const { key, placeholder } = filter;
+        const handleOnChange = (e) => {
+            handleInputChange(key, e.target.value);
+        };
+        return (React.createElement(Flex, { align: "center", rootClassName: "relative", key: `filter-${key}-${index}` },
+            React.createElement(Input, { className: "h-9 w-44", name: key, onChange: handleOnChange, placeholder: placeholder, value: localValues[key] || '' }),
+            React.createElement(Icon, { className: "absolute cursor-pointer right-2 top-2", icon: "search", color: "var(--color-gray-500)", size: 16 })));
+    };
+    const renderFilter = (filter, index) => {
+        const { type } = filter;
+        switch (type) {
+            case FILTER_TYPES.INPUT:
+                return renderInputFilter(filter, index);
+            default:
+                return null;
+        }
+    };
+    if (!filters || filters.length === 0) {
+        return null;
+    }
+    return (React.createElement(Flex, { flex: 1, gap: 12, wrap: true }, filters.map((filter, index) => renderFilter(filter, index))));
+};

package/dist/esm/ai-table/components/footer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface TableFooterProps {
+    isSubmitting: boolean;
+    selectedCount: number;
+    submitAllLabel: string;
+    submitSelectedLabel: string;
+    onSubmitAll?: () => void;
+    onSubmitSelected?: () => void;
+}
+export declare const TableFooter: ({ isSubmitting, selectedCount, submitAllLabel, submitSelectedLabel, onSubmitAll, onSubmitSelected }: TableFooterProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=footer.d.ts.map

package/dist/esm/ai-table/components/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,gBAAgB;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,GAAI,qGAOzB,gBAAgB,sBAmClB,CAAC"}

package/dist/esm/ai-table/components/footer.js

@@ -0,0 +1,20 @@
+import { Button } from '@akinon/ui-button';
+import { Flex } from '@akinon/ui-layout';
+import * as React from 'react';
+export const TableFooter = ({ isSubmitting, selectedCount, submitAllLabel, submitSelectedLabel, onSubmitAll, onSubmitSelected }) => {
+    const handleSubmitAll = () => {
+        if (onSubmitAll) {
+            onSubmitAll();
+        }
+    };
+    const handleSubmitSelected = () => {
+        if (onSubmitSelected) {
+            onSubmitSelected();
+        }
+    };
+    return (React.createElement(Flex, { justify: "end", gap: 10 },
+        React.createElement(Button, { className: "uppercase font-semibold", disabled: isSubmitting, loading: isSubmitting, onClick: handleSubmitAll }, submitAllLabel),
+        React.createElement(Button, { className: "uppercase font-semibold", disabled: selectedCount === 0 || isSubmitting, loading: isSubmitting, onClick: handleSubmitSelected, type: "primary" },
+            submitSelectedLabel,
+            selectedCount > 0 && ` (${selectedCount})`)));
+};

package/dist/esm/ai-table/components/mapper.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { HandleMapperItemChange, MapperRow } from '../../types';
+interface TableMapperProps {
+    values: MapperRow[];
+    handleAddItem: () => void;
+    handleRemoveItem: (index: number) => () => void;
+    handleItemChange: HandleMapperItemChange;
+}
+export declare const TableMapper: ({ values, handleAddItem, handleRemoveItem, handleItemChange }: TableMapperProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=mapper.d.ts.map

package/dist/esm/ai-table/components/mapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapper.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/mapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGrE,UAAU,gBAAgB;IACxB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;IAChD,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,GAAI,+DAKzB,gBAAgB,sBAgClB,CAAC"}

package/dist/esm/ai-table/components/mapper.js

@@ -0,0 +1,17 @@
+import { Icon } from '@akinon/icons';
+import { Flex } from '@akinon/ui-layout';
+import * as React from 'react';
+import { renderMapperRow } from '../utils/render-mapper-fields';
+export const TableMapper = ({ values, handleAddItem, handleRemoveItem, handleItemChange }) => {
+    return (React.createElement(Flex, { gap: 5, vertical: true, rootClassName: "py-1" }, values.map((row, index) => {
+        return (React.createElement(Flex, { gap: 12, align: "center", key: index },
+            renderMapperRow({
+                row,
+                index,
+                handleItemChange
+            }),
+            React.createElement(Flex, { gap: 10 },
+                React.createElement(Icon, { icon: "plus", size: 20, color: "var(--color-green-500)", className: "cursor-pointer", onClick: handleAddItem }),
+                React.createElement(Icon, { icon: "minus", size: 20, color: "var(--color-red-425)", className: "cursor-pointer", onClick: handleRemoveItem(index) }))));
+    })));
+};

package/dist/esm/ai-table/components/pagination.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface TablePaginationProps {
+    currentPage: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+}
+export declare const TablePagination: ({ currentPage, onPageChange, onPageSizeChange, pageSize, total }: TablePaginationProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/esm/ai-table/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/pagination.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,oBAAoB;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,GAAI,kEAM7B,oBAAoB,sBA+HtB,CAAC"}

package/dist/esm/ai-table/components/pagination.js

@@ -0,0 +1,102 @@
+import { Flex } from '@akinon/ui-layout';
+import { Pagination } from '@akinon/ui-pagination';
+import { Select } from '@akinon/ui-select';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import * as React from 'react';
+import { DEFAULT_CURRENT_PAGE, PAGE_SIZE_OPTIONS } from '../constants';
+import { i18n } from '../i18n';
+const { t } = i18n;
+export const TablePagination = ({ currentPage, onPageChange, onPageSizeChange, pageSize, total }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const handlePageChange = (page) => {
+        onPageChange(page);
+    };
+    const handlePageSizeChange = (value) => {
+        onPageSizeChange(value);
+        onPageChange(DEFAULT_CURRENT_PAGE);
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['AiModalTablePagination'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__pagination-element`]: {
+                '&.akinon-pagination': {
+                    '.akinon-pagination-prev, .akinon-pagination-next': {
+                        height: 'unset !important',
+                        lineHeight: 'unset !important',
+                        margin: '0 !important',
+                        display: 'inline-block !important',
+                        verticalAlign: 'middle',
+                        '&.akinon-pagination-disabled': {
+                            button: {
+                                cursor: 'not-allowed'
+                            }
+                        },
+                        '.akinon-btn': {
+                            backgroundColor: 'var(--color-ebonyClay-475) !important',
+                            borderColor: 'var(--color-ebonyClay-550) !important',
+                            borderLeft: 'none',
+                            borderRight: 'none',
+                            height: '40px !important',
+                            '.akinon-btn-icon': {
+                                color: 'var(--color-gray-500) !important'
+                            },
+                            '&:hover': {
+                                backgroundColor: 'var(--color-ebonyClay-475) !important',
+                                borderColor: 'var(--color-ebonyClay-550) !important',
+                                '.anticon': {
+                                    color: 'var(--color-gray-500) !important'
+                                }
+                            }
+                        }
+                    },
+                    '.akinon-pagination-prev': {
+                        borderRadius: '5px 0 0 5px !important'
+                    },
+                    '.akinon-pagination-next': {
+                        borderRadius: '0 5px 5px 0 !important'
+                    },
+                    '.akinon-pagination-simple-pager': {
+                        margin: '0 !important',
+                        backgroundColor: 'var(--color-ebonyClay-475) !important',
+                        border: '1px solid var(--color-ebonyClay-550) !important',
+                        borderLeft: 'none !important',
+                        borderRight: 'none !important',
+                        borderRadius: 0,
+                        color: 'var(--color-gray-500) !important',
+                        padding: '0 8px',
+                        height: '40px',
+                        display: 'inline-flex !important',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        verticalAlign: 'middle',
+                        input: {
+                            color: 'var(--color-gray-500) !important',
+                            backgroundColor: 'transparent !important',
+                            border: 'none !important',
+                            textAlign: 'center',
+                            boxShadow: 'none !important'
+                        },
+                        '.akinon-pagination-slash': {
+                            color: 'var(--color-gray-500) !important',
+                            margin: '0 4px'
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(Flex, { align: "center", rootClassName: "ml-auto", gap: 8 },
+        React.createElement(Flex, { align: "center", gap: 12, rootClassName: "mr-5" },
+            React.createElement("span", { className: "text-sm text-gray-500" }, t('show.value')),
+            React.createElement(Select, { onChange: handlePageSizeChange, options: PAGE_SIZE_OPTIONS, value: pageSize })),
+        React.createElement(Pagination, { className: `${baseCls}__pagination-element ${hashId}`, current: currentPage, onChange: handlePageChange, pageSize: pageSize, showSizeChanger: false, theme: "dark", total: total })));
+};

package/dist/esm/ai-table/components/row-actions.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { TableBaseProps } from '../../types';
+interface ActionButtonsProps {
+    hasEdit: boolean;
+    isEditing: boolean;
+    isSelected: boolean;
+    rowId: number | string;
+    setIsEditingPk: React.Dispatch<React.SetStateAction<null | number | string>>;
+    onToggleSelection: (rowId: number | string) => void;
+    customActionButtons?: TableBaseProps['customActionButtons'];
+}
+export declare const ActionButtons: ({ customActionButtons, hasEdit, isEditing, isSelected, onToggleSelection, rowId, setIsEditingPk }: ActionButtonsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=row-actions.d.ts.map

package/dist/esm/ai-table/components/row-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-actions.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/row-actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IAC7E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,GAAI,mGAQ3B,kBAAkB,sBAuEpB,CAAC"}

package/dist/esm/ai-table/components/row-actions.js

@@ -0,0 +1,48 @@
+import { Button } from '@akinon/ui-button';
+import { Flex } from '@akinon/ui-layout';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import * as React from 'react';
+import { IS_EDITING_INITIAL_VALUE } from '../constants';
+export const ActionButtons = ({ customActionButtons, hasEdit, isEditing, isSelected, onToggleSelection, rowId, setIsEditingPk }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggleSelection(rowId);
+    };
+    const handleOnClickEdit = () => {
+        setIsEditingPk(isEditing ? IS_EDITING_INITIAL_VALUE : rowId);
+    };
+    const renderCustomActionButtons = () => {
+        if (!customActionButtons)
+            return null;
+        return customActionButtons(rowId);
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['AiModalTableActionButtons'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__action-button`]: {
+                width: '1.75rem !important',
+                transition: 'all 0.2s',
+                '&:hover': {
+                    opacity: 0.8
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(Flex, { gap: 10 },
+        renderCustomActionButtons(),
+        hasEdit && (React.createElement(Button, { className: `${baseCls}__action-button ${hashId} border border-ebonyClay-200 bg-ebonyClay-400 h-7`, icon: "edit", iconSize: 16, onClick: handleOnClickEdit, type: "icon" })),
+        React.createElement(Button, { className: classNames(`${baseCls}__action-button ${hashId} border border-ebonyClay-200 bg-ebonyClay-400 h-7`, {
+                'bg-green-600 border-green-600': isSelected
+            }), icon: "katalogkontrol", iconSize: 16, onClick: handleToggle, type: "icon" })));
+};

package/dist/esm/ai-table/constants/index.d.ts

@@ -0,0 +1,17 @@
+export declare const FILTER_TYPES: {
+    INPUT: string;
+};
+export declare const DEBOUNCE_DELAY = 300;
+export declare const DEFAULT_PAGE_SIZE = 20;
+export declare const DEFAULT_CURRENT_PAGE = 1;
+export declare const PAGE_SIZE_OPTIONS: {
+    label: number;
+    value: number;
+}[];
+export declare const DEFAULT_ROW_KEY = "pk";
+export declare const IS_EDITING_INITIAL_VALUE: null;
+export declare const MAPPER_ITEM_TYPES: {
+    readonly SELECT: "select";
+    readonly TEXT: "text";
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ai-table/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;CAExB,CAAC;AAEF,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC,eAAO,MAAM,iBAAiB;;;GAG3B,CAAC;AAEJ,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,eAAO,MAAM,wBAAwB,MAAO,CAAC;AAE7C,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC"}