@akinon/ai-modal-table 1.0.0

package/dist/cjs/ai-table/utils/render-mapper-fields/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMapperRow = void 0;
+const ui_input_1 = require("@akinon/ui-input");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_select_1 = require("@akinon/ui-select");
+const React = require("react");
+const constants_1 = require("../../constants");
+const renderDivider = (row, index) => {
+    const isLastItem = Object.keys(row).length - 1 === index;
+    if (isLastItem)
+        return null;
+    return React.createElement("div", { className: "w-3 h-1 bg-ebonyClay-550" });
+};
+const renderSelectItem = ({ key, value, index, options, handleItemChange }) => (React.createElement(ui_select_1.Select, { value: value || undefined, rootClassName: "w-40", size: "large", options: options || [], onChange: selectedValue => handleItemChange({
+        index,
+        key,
+        value: selectedValue
+    }) }));
+const renderTextItem = ({ key, value, index, handleItemChange }) => (React.createElement(ui_input_1.Input, { value: value, className: "w-40", size: "large", onChange: e => handleItemChange({ index, key, value: e.target.value }) }));
+const renderItemByType = ({ key, index, item, handleItemChange }) => {
+    const { type, options, value } = item;
+    switch (type) {
+        case constants_1.MAPPER_ITEM_TYPES.SELECT:
+            return renderSelectItem({
+                key,
+                value,
+                index,
+                options,
+                handleItemChange
+            });
+        case constants_1.MAPPER_ITEM_TYPES.TEXT:
+            return renderTextItem({ key, value, index, handleItemChange });
+        default:
+            return renderTextItem({ key, value, index, handleItemChange });
+    }
+};
+const renderMapperRow = ({ row, index, handleItemChange }) => {
+    return (React.createElement(ui_layout_1.Flex, { align: "center" }, Object.entries(row).map(([fieldKey, item], itemIndex) => (React.createElement(React.Fragment, { key: itemIndex },
+        renderItemByType({
+            key: fieldKey,
+            index,
+            item,
+            handleItemChange
+        }),
+        renderDivider(row, itemIndex))))));
+};
+exports.renderMapperRow = renderMapperRow;

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export { AiModalTable } from './ai-modal-table';
+export { AiTable } from './ai-table';
+export type { AiModalTableProps, AiTableProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiTable = exports.AiModalTable = void 0;
+var ai_modal_table_1 = require("./ai-modal-table");
+Object.defineProperty(exports, "AiModalTable", { enumerable: true, get: function () { return ai_modal_table_1.AiModalTable; } });
+var ai_table_1 = require("./ai-table");
+Object.defineProperty(exports, "AiTable", { enumerable: true, get: function () { return ai_table_1.AiTable; } });

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,134 @@
+import type { ModalProps } from '@akinon/ui-modal';
+import { MAPPER_ITEM_TYPES } from '../ai-table/constants';
+type MapperItemTypes = (typeof MAPPER_ITEM_TYPES)[keyof typeof MAPPER_ITEM_TYPES];
+export type HandleMapperItemChange = ({ index, key, value }: {
+    index: number;
+    key: string;
+    value: MapperItemValue;
+}) => void;
+export type MapperItemValue = string | number;
+export type MapperSelectItemOption = {
+    label: string;
+    value: MapperItemValue;
+};
+export interface MapperRow {
+    [key: string]: {
+        value: MapperItemValue;
+        type: MapperItemTypes;
+        options?: MapperSelectItemOption[];
+    };
+}
+type Filter = {
+    key: string;
+    type: string;
+    placeholder?: string;
+};
+type Column = {
+    title: string;
+    dataIndex: string;
+    hasSparkle?: boolean;
+    hasGradientLine?: boolean;
+    render?: (value: unknown, record: Record<string, unknown>) => React.ReactNode;
+};
+export interface MapperConfig {
+    /**
+     * Callback fired when items are added to a mapper field. Receives the row ID, the dataIndex of the mapper field, and the new item to be added. The new item is an object containing 'key' and 'value' properties.
+     */
+    onAddItem: (pk: string | number, dataIndex: string) => void;
+    /**
+     * Callback fired when items are removed from a mapper field. Receives the row ID, the dataIndex of the mapper field, and the index of the item to be removed.
+     */
+    onRemoveItem: ({ pk, dataIndex, index }: {
+        pk: string | number;
+        dataIndex: string;
+        index: number;
+    }) => void;
+    /**
+     * Callback fired when a mapper item is changed. Receives the row ID, the dataIndex of the mapper field, the key of the item, the index of the item in the array, and the new value.
+     */
+    onItemChange: (pk: string | number, payload: Record<string, MapperRow[]>) => void;
+    /**
+     * Column data indexes that have mapper functionality.
+     */
+    dataIndex: string;
+}
+export interface TableBaseProps {
+    /**
+     * The unique key field name for identifying rows
+     */
+    rowKey?: string;
+    /**
+     * Array of data objects to display in the table
+     */
+    data: Record<string, unknown>[];
+    /**
+     * Array of column configurations defining table structure and appearance
+     */
+    columns: Column[];
+    /**
+     * Array of filter configurations for filtering the table data
+     */
+    filters: Filter[];
+    /**
+     * Array of data keys that should be editable in the table
+     */
+    editDataIndexes?: string[];
+    /**
+     * Callback fired when a row is edited. Returns the row ID and the modified data. To work properly, editDataIndexes prop must be provided
+     */
+    onEdit?: (pk: number | string, payload: Record<string, string>) => void;
+    /**
+     * Function to render custom action buttons for each row. Receives the row ID.
+     */
+    customActionButtons?: (rowId: number | string) => React.ReactNode;
+    /**
+     * Array of currently selected row IDs
+     */
+    selectedRows: Array<number | string>;
+    /**
+     * Callback fired when the selection of rows changes
+     */
+    onChangeSelectedRows: (rows: Array<number | string>) => void;
+    /**
+     *  Configuration for mapper functionality. If provided, the table will render mapper fields based on the specified dataIndex and use the provided callbacks to manage adding, removing, and changing items in the mapper fields.
+     */
+    mapperConfig?: MapperConfig;
+    /**
+     * CSS class name to apply to the table wrapper element
+     */
+    tableClassName?: string;
+}
+export interface AiTableProps extends TableBaseProps {
+    /**
+     * Shows loading state for the table data
+     */
+    isLoading: boolean;
+    /**
+     * Shows loading state for the submit buttons
+     */
+    isSubmitting: boolean;
+    /**
+     * Label text for the "Submit All" button
+     */
+    submitAllLabel: string;
+    /**
+     * Label text for the "Submit Selected" button
+     */
+    submitSelectedLabel: string;
+    /**
+     * Callback fired when "Submit All" button is clicked.
+     */
+    onSubmitAllData: () => void;
+    /**
+     * Callback fired when "Submit Selected" button is clicked.
+     */
+    onSubmitSelectedData: () => void;
+}
+export interface AiModalTableProps extends AiTableProps, ModalProps {
+    /**
+     * Description text displayed in the modal header
+     */
+    description: string;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/types/index.d.ts.map

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

package/dist/cjs/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/esm/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/index.test.tsx"],"names":[],"mappings":""}

package/dist/esm/__tests__/index.test.js

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, expect, it } from 'vitest';
+import { AiModalTable, AiTable } from '../index';
+import * as indexModule from '../index';
+describe('index.tsx - Public API', () => {
+    describe('Component Exports', () => {
+        it('should export AiModalTable and AiTable components', () => {
+            expect(indexModule).toHaveProperty('AiModalTable');
+            expect(indexModule).toHaveProperty('AiTable');
+            expect(typeof indexModule.AiModalTable).toBe('function');
+            expect(typeof indexModule.AiTable).toBe('function');
+        });
+        it('should have only named exports (no default export)', () => {
+            const exports = Object.keys(indexModule).sort();
+            expect(exports).toContain('AiModalTable');
+            expect(exports).toContain('AiTable');
+            expect(indexModule.default).toBeUndefined();
+        });
+        it('should maintain export consistency', () => {
+            expect(indexModule.AiModalTable).toBe(AiModalTable);
+            expect(indexModule.AiTable).toBe(AiTable);
+        });
+        it('should export components as separate instances', () => {
+            const { AiModalTable, AiTable } = indexModule;
+            expect(AiModalTable).not.toBe(AiTable);
+            expect(typeof AiModalTable).toBe('function');
+            expect(typeof AiTable).toBe('function');
+        });
+    });
+    describe('Module Structure', () => {
+        it('should be importable as ES module with all exports', () => {
+            expect(Object.keys(indexModule).length).toBeGreaterThanOrEqual(2);
+        });
+        it('should have React components with proper names', () => {
+            const getComponentName = (comp) => comp.name || comp.displayName || 'Unknown';
+            expect(getComponentName(indexModule.AiModalTable)).toBeDefined();
+            expect(getComponentName(indexModule.AiTable)).toBeDefined();
+        });
+        it('should not have circular or broken dependencies', () => {
+            // Should be able to destructure without errors
+            expect(() => {
+                const { AiModalTable: ModalTable, AiTable: Table } = indexModule;
+                if (!ModalTable || !Table)
+                    throw new Error('Missing export');
+            }).not.toThrow();
+        });
+    });
+    describe('Export Stability', () => {
+        it('should maintain stable export references across multiple imports', () => {
+            const import1 = indexModule.AiModalTable;
+            const import2 = indexModule.AiModalTable;
+            const import3 = indexModule.AiTable;
+            const import4 = indexModule.AiTable;
+            expect(import1).toBe(import2);
+            expect(import3).toBe(import4);
+        });
+        it('should support destructuring without errors', () => {
+            // Common user pattern - destructuring from index
+            const { AiModalTable, AiTable } = indexModule;
+            expect(AiModalTable).toBeDefined();
+            expect(AiTable).toBeDefined();
+            expect(typeof AiModalTable).toBe('function');
+            expect(typeof AiTable).toBe('function');
+        });
+        it('should support namespace import pattern', () => {
+            // Common user pattern - namespace import
+            const exports = indexModule;
+            expect(exports.AiModalTable).toBeDefined();
+            expect(exports.AiTable).toBeDefined();
+        });
+        it('should export both wrapper and content components', () => {
+            // Verify architectural separation:
+            // - AiModalTable wraps content (modal + AiTable)
+            // - AiTable provides table functionality independently
+            const { AiModalTable, AiTable } = indexModule;
+            expect(AiModalTable).not.toBe(AiTable);
+            expect(AiModalTable !== AiTable).toBe(true);
+        });
+    });
+});

package/dist/esm/__tests__/index.test.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, expect, it } from 'vitest';
+
+import { AiModalTable, AiTable } from '../index';
+import * as indexModule from '../index';
+
+describe('index.tsx - Public API', () => {
+  describe('Component Exports', () => {
+    it('should export AiModalTable and AiTable components', () => {
+      expect(indexModule).toHaveProperty('AiModalTable');
+      expect(indexModule).toHaveProperty('AiTable');
+      expect(typeof indexModule.AiModalTable).toBe('function');
+      expect(typeof indexModule.AiTable).toBe('function');
+    });
+
+    it('should have only named exports (no default export)', () => {
+      const exports = Object.keys(indexModule).sort();
+      expect(exports).toContain('AiModalTable');
+      expect(exports).toContain('AiTable');
+      expect((indexModule as Record<string, any>).default).toBeUndefined();
+    });
+
+    it('should maintain export consistency', () => {
+      expect(indexModule.AiModalTable).toBe(AiModalTable);
+      expect(indexModule.AiTable).toBe(AiTable);
+    });
+
+    it('should export components as separate instances', () => {
+      const { AiModalTable, AiTable } = indexModule;
+      expect(AiModalTable).not.toBe(AiTable);
+      expect(typeof AiModalTable).toBe('function');
+      expect(typeof AiTable).toBe('function');
+    });
+  });
+
+  describe('Module Structure', () => {
+    it('should be importable as ES module with all exports', () => {
+      expect(Object.keys(indexModule).length).toBeGreaterThanOrEqual(2);
+    });
+
+    it('should have React components with proper names', () => {
+      const getComponentName = (comp: any) =>
+        comp.name || comp.displayName || 'Unknown';
+
+      expect(getComponentName(indexModule.AiModalTable)).toBeDefined();
+      expect(getComponentName(indexModule.AiTable)).toBeDefined();
+    });
+
+    it('should not have circular or broken dependencies', () => {
+      // Should be able to destructure without errors
+      expect(() => {
+        const { AiModalTable: ModalTable, AiTable: Table } = indexModule;
+        if (!ModalTable || !Table) throw new Error('Missing export');
+      }).not.toThrow();
+    });
+  });
+
+  describe('Export Stability', () => {
+    it('should maintain stable export references across multiple imports', () => {
+      const import1 = indexModule.AiModalTable;
+      const import2 = indexModule.AiModalTable;
+      const import3 = indexModule.AiTable;
+      const import4 = indexModule.AiTable;
+
+      expect(import1).toBe(import2);
+      expect(import3).toBe(import4);
+    });
+
+    it('should support destructuring without errors', () => {
+      // Common user pattern - destructuring from index
+      const { AiModalTable, AiTable } = indexModule;
+      expect(AiModalTable).toBeDefined();
+      expect(AiTable).toBeDefined();
+      expect(typeof AiModalTable).toBe('function');
+      expect(typeof AiTable).toBe('function');
+    });
+
+    it('should support namespace import pattern', () => {
+      // Common user pattern - namespace import
+      const exports = indexModule;
+      expect(exports.AiModalTable).toBeDefined();
+      expect(exports.AiTable).toBeDefined();
+    });
+
+    it('should export both wrapper and content components', () => {
+      // Verify architectural separation:
+      // - AiModalTable wraps content (modal + AiTable)
+      // - AiTable provides table functionality independently
+      const { AiModalTable, AiTable } = indexModule;
+      expect(AiModalTable).not.toBe(AiTable);
+      expect(AiModalTable !== AiTable).toBe(true);
+    });
+  });
+});

package/dist/esm/ai-modal-table/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/esm/ai-modal-table/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../src/ai-modal-table/__tests__/index.test.tsx"],"names":[],"mappings":""}

package/dist/esm/ai-modal-table/__tests__/index.test.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('@akinon/ui-theme', async (importOriginal) => {
+    const actual = (await importOriginal());
+    return Object.assign(Object.assign({}, actual), { useToken: () => ({ token: {}, hashId: 'hash123' }) });
+});
+vi.mock('@akinon/ui-layout', () => ({
+    Flex: ({ children }) => React.createElement("div", { "data-testid": "flex" }, children)
+}));
+vi.mock('@akinon/ui-modal', () => ({
+    Modal: (_a) => {
+        var { children, onCancel, className } = _a, rest = __rest(_a, ["children", "onCancel", "className"]);
+        return (React.createElement("div", Object.assign({ "data-testid": "modal", className: className }, rest),
+            React.createElement("button", { "data-testid": "close-button", onClick: onCancel }),
+            children));
+    }
+}));
+vi.mock('../ai-table', () => ({
+    AiTable: (props) => (React.createElement("div", { "data-testid": "ai-table" },
+        React.createElement("pre", { "data-testid": "ai-table-props" }, JSON.stringify({
+            columns: props.columns,
+            data: props.data,
+            isLoading: props.isLoading
+        })))),
+    DEFAULT_ROW_KEY: 'id'
+}));
+import { AiModalTable } from '../index';
+describe('AiModalTable', () => {
+    it('renders description and passes props to AiTable', () => {
+        const columns = [{ title: 'Name', dataIndex: 'name' }];
+        const data = [{ id: 1, name: 'Alice' }];
+        render(React.createElement(AiModalTable, { description: "My description", columns: columns, data: data, isLoading: true, submitAllLabel: "Submit All", submitSelectedLabel: "Submit Selected", filters: [], selectedRows: [], onChangeSelectedRows: () => { }, isSubmitting: false, onSubmitAllData: () => { }, onSubmitSelectedData: () => { } }));
+        expect(screen.getByText('My description')).toBeInTheDocument();
+    });
+    it('calls onCancel when modal close clicked and applies class names', () => {
+        const onCancel = vi.fn();
+        render(React.createElement(AiModalTable, { description: "My description", columns: [], data: [], isLoading: true, submitAllLabel: "Submit All", submitSelectedLabel: "Submit Selected", filters: [], selectedRows: [], onChangeSelectedRows: () => { }, isSubmitting: false, onSubmitAllData: () => { }, onSubmitSelectedData: () => { }, onCancel: onCancel }));
+        const modal = screen.getByTestId('modal');
+        expect(modal.className).toContain('ai-modal-table');
+        expect(modal.className).toContain('hash123');
+        fireEvent.click(screen.getByTestId('close-button'));
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/esm/ai-modal-table/__tests__/index.test.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@akinon/ui-theme', async importOriginal => {
+  const actual = (await importOriginal()) as Record<string, any>;
+
+  return {
+    ...actual,
+    useToken: () => ({ token: {}, hashId: 'hash123' })
+  };
+});
+
+vi.mock('@akinon/ui-layout', () => ({
+  Flex: ({ children }: any) => <div data-testid="flex">{children}</div>
+}));
+
+vi.mock('@akinon/ui-modal', () => ({
+  Modal: ({ children, onCancel, className, ...rest }: any) => (
+    <div data-testid="modal" className={className} {...rest}>
+      <button data-testid="close-button" onClick={onCancel} />
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('../ai-table', () => ({
+  AiTable: (props: any) => (
+    <div data-testid="ai-table">
+      <pre data-testid="ai-table-props">
+        {JSON.stringify({
+          columns: props.columns,
+          data: props.data,
+          isLoading: props.isLoading
+        })}
+      </pre>
+    </div>
+  ),
+  DEFAULT_ROW_KEY: 'id'
+}));
+
+import { AiModalTable } from '../index';
+
+describe('AiModalTable', () => {
+  it('renders description and passes props to AiTable', () => {
+    const columns = [{ title: 'Name', dataIndex: 'name' }];
+    const data = [{ id: 1, name: 'Alice' }];
+
+    render(
+      <AiModalTable
+        description="My description"
+        columns={columns}
+        data={data}
+        isLoading={true}
+        submitAllLabel="Submit All"
+        submitSelectedLabel="Submit Selected"
+        filters={[]}
+        selectedRows={[]}
+        onChangeSelectedRows={() => {}}
+        isSubmitting={false}
+        onSubmitAllData={() => {}}
+        onSubmitSelectedData={() => {}}
+      />
+    );
+
+    expect(screen.getByText('My description')).toBeInTheDocument();
+  });
+
+  it('calls onCancel when modal close clicked and applies class names', () => {
+    const onCancel = vi.fn();
+
+    render(
+      <AiModalTable
+        description="My description"
+        columns={[]}
+        data={[]}
+        isLoading={true}
+        submitAllLabel="Submit All"
+        submitSelectedLabel="Submit Selected"
+        filters={[]}
+        selectedRows={[]}
+        onChangeSelectedRows={() => {}}
+        isSubmitting={false}
+        onSubmitAllData={() => {}}
+        onSubmitSelectedData={() => {}}
+        onCancel={onCancel}
+      />
+    );
+
+    const modal = screen.getByTestId('modal');
+    expect(modal.className).toContain('ai-modal-table');
+    expect(modal.className).toContain('hash123');
+
+    fireEvent.click(screen.getByTestId('close-button'));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { AiModalTableProps } from '../types';
+export declare const AiModalTable: ({ columns, customActionButtons, data, description, editDataIndexes, filters, isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName, ...modalProps }: AiModalTableProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ai-modal-table/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,YAAY,GAAI,qRAoB1B,iBAAiB,sBAoEnB,CAAC"}

package/dist/esm/ai-modal-table/index.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Flex } from '@akinon/ui-layout';
+import { Modal } from '@akinon/ui-modal';
+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 { AiTable } from '../ai-table';
+import { DEFAULT_ROW_KEY } from '../ai-table/constants';
+export const AiModalTable = (_a) => {
+    var { columns = [], customActionButtons, data = [], description, editDataIndexes, filters = [], isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey = DEFAULT_ROW_KEY, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName } = _a, modalProps = __rest(_a, ["columns", "customActionButtons", "data", "description", "editDataIndexes", "filters", "isLoading", "isSubmitting", "onChangeSelectedRows", "onEdit", "onSubmitAllData", "onSubmitSelectedData", "rowKey", "selectedRows", "submitAllLabel", "submitSelectedLabel", "mapperConfig", "tableClassName"]);
+    const { onCancel, className } = modalProps, restModalProps = __rest(modalProps, ["onCancel", "className"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const handleCancel = (e) => {
+        if (onCancel)
+            onCancel(e);
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['AiModalTable'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [prefixCls]: {
+                '.akinon-modal-title': {
+                    borderBottom: 'none !important'
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(Modal, Object.assign({ className: classNames(baseCls, hashId, className), footer: null, onCancel: handleCancel, centered: true, destroyOnClose: true, width: 1200 }, restModalProps),
+        React.createElement(Flex, { gap: 10, vertical: true },
+            React.createElement("div", { className: "text-neutral-50 text-sm mb-2" }, description),
+            React.createElement(AiTable, { columns: columns, customActionButtons: customActionButtons, data: data, editDataIndexes: editDataIndexes, filters: filters, isLoading: isLoading, isSubmitting: isSubmitting, onChangeSelectedRows: onChangeSelectedRows, onEdit: onEdit, onSubmitAllData: onSubmitAllData, onSubmitSelectedData: onSubmitSelectedData, rowKey: rowKey, selectedRows: selectedRows, submitAllLabel: submitAllLabel, submitSelectedLabel: submitSelectedLabel, mapperConfig: mapperConfig, tableClassName: tableClassName }))));
+};

package/dist/esm/ai-table/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/__tests__/index.test.tsx"],"names":[],"mappings":""}