@akinon/ai-modal-table 1.0.1 → 1.0.3

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

@@ -17,8 +17,32 @@ const react_2 = require("react");
 const vitest_1 = require("vitest");
 vitest_1.vi.mock('@akinon/ui-theme', async (importOriginal) => {
     const actual = (await importOriginal());
-    return Object.assign(Object.assign({}, actual), { useToken: () => ({ token: {}, hashId: 'hash123' }) });
+    return Object.assign(Object.assign({}, actual), { useToken: () => ({
+            token: {
+                fontWeight: 400,
+                fontWeightStrong: 600,
+                fontSizeSM: 12,
+                colorTextBase: '#000000',
+                colorBgBase: '#ffffff',
+                fontSize: 14,
+                borderRadius: 4,
+                colorPrimary: '#1890ff'
+            },
+            hashId: 'hash123'
+        }) });
 });
+vitest_1.vi.mock('@akinon/ui-select', () => ({
+    Select: (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (react_2.default.createElement("select", Object.assign({ "data-testid": "select" }, props), children));
+    }
+}));
+vitest_1.vi.mock('@akinon/ui-button', () => ({
+    Button: (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (react_2.default.createElement("button", Object.assign({}, props), children));
+    }
+}));
 vitest_1.vi.mock('@akinon/ui-layout', () => ({
     Flex: ({ children }) => react_2.default.createElement("div", { "data-testid": "flex" }, children)
 }));
@@ -35,7 +59,8 @@ vitest_1.vi.mock('../ai-table', () => ({
         react_2.default.createElement("pre", { "data-testid": "ai-table-props" }, JSON.stringify({
             columns: props.columns,
             data: props.data,
-            isLoading: props.isLoading
+            isLoading: props.isLoading,
+            emptyText: props.emptyText
         })))),
     DEFAULT_ROW_KEY: 'id'
 }));
@@ -56,4 +81,13 @@ const index_1 = require("../index");
         react_1.fireEvent.click(react_1.screen.getByTestId('close-button'));
         (0, vitest_1.expect)(onCancel).toHaveBeenCalledTimes(1);
     });
+    (0, vitest_1.it)('passes emptyText prop to AiTable when provided', () => {
+        const columns = [{ title: 'Name', dataIndex: 'name' }];
+        const data = [{ id: 1, name: 'Alice' }];
+        const { rerender } = (0, react_1.render)(react_2.default.createElement(index_1.AiModalTable, { description: "My description", columns: columns, data: data, isLoading: true, submitAllLabel: "Submit All", submitSelectedLabel: "Submit Selected", filters: [], selectedRows: [], onChangeSelectedRows: () => { }, isSubmitting: false, onSubmitAllData: () => { }, onSubmitSelectedData: () => { } }));
+        (0, vitest_1.expect)(react_1.screen.getByText('My description')).toBeInTheDocument();
+        // Re-render with emptyText prop
+        rerender(react_2.default.createElement(index_1.AiModalTable, { description: "My description", columns: columns, data: data, isLoading: true, submitAllLabel: "Submit All", submitSelectedLabel: "Submit Selected", filters: [], selectedRows: [], onChangeSelectedRows: () => { }, isSubmitting: false, onSubmitAllData: () => { }, onSubmitSelectedData: () => { }, emptyText: "No data available" }));
+        (0, vitest_1.expect)(react_1.screen.getByText('My description')).toBeInTheDocument();
+    });
 });

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

@@ -8,10 +8,36 @@ vi.mock('@akinon/ui-theme', async importOriginal => {
 
   return {
     ...actual,
-    useToken: () => ({ token: {}, hashId: 'hash123' })
+    useToken: () => ({
+      token: {
+        fontWeight: 400,
+        fontWeightStrong: 600,
+        fontSizeSM: 12,
+        colorTextBase: '#000000',
+        colorBgBase: '#ffffff',
+        fontSize: 14,
+        borderRadius: 4,
+        colorPrimary: '#1890ff'
+      },
+      hashId: 'hash123'
+    })
   };
 });
 
+vi.mock('@akinon/ui-select', () => ({
+  Select: ({ children, ...props }: any) => (
+    <select data-testid="select" {...props}>
+      {children}
+    </select>
+  )
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({ children, ...props }: any) => (
+    <button {...props}>{children}</button>
+  )
+}));
+
 vi.mock('@akinon/ui-layout', () => ({
   Flex: ({ children }: any) => <div data-testid="flex">{children}</div>
 }));
@@ -32,7 +58,8 @@ vi.mock('../ai-table', () => ({
         {JSON.stringify({
           columns: props.columns,
           data: props.data,
-          isLoading: props.isLoading
+          isLoading: props.isLoading,
+          emptyText: props.emptyText
         })}
       </pre>
     </div>
@@ -95,4 +122,49 @@ describe('AiModalTable', () => {
     fireEvent.click(screen.getByTestId('close-button'));
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
+
+  it('passes emptyText prop to AiTable when provided', () => {
+    const columns = [{ title: 'Name', dataIndex: 'name' }];
+    const data = [{ id: 1, name: 'Alice' }];
+
+    const { rerender } = 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();
+
+    // Re-render with emptyText prop
+    rerender(
+      <AiModalTable
+        description="My description"
+        columns={columns}
+        data={data}
+        isLoading={true}
+        submitAllLabel="Submit All"
+        submitSelectedLabel="Submit Selected"
+        filters={[]}
+        selectedRows={[]}
+        onChangeSelectedRows={() => {}}
+        isSubmitting={false}
+        onSubmitAllData={() => {}}
+        onSubmitSelectedData={() => {}}
+        emptyText="No data available"
+      />
+    );
+
+    expect(screen.getByText('My description')).toBeInTheDocument();
+  });
 });

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

@@ -1,4 +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;
+export declare const AiModalTable: ({ columns, customActionButtons, data, description, editDataIndexes, filters, isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName, emptyText, ...modalProps }: AiModalTableProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,gSAqB1B,iBAAiB,sBAqEnB,CAAC"}

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

@@ -22,7 +22,7 @@ const React = require("react");
 const ai_table_1 = require("../ai-table");
 const constants_1 = require("../ai-table/constants");
 const AiModalTable = (_a) => {
-    var { columns = [], customActionButtons, data = [], description, editDataIndexes, filters = [], isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey = constants_1.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"]);
+    var { columns = [], customActionButtons, data = [], description, editDataIndexes, filters = [], isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey = constants_1.DEFAULT_ROW_KEY, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName, emptyText } = _a, modalProps = __rest(_a, ["columns", "customActionButtons", "data", "description", "editDataIndexes", "filters", "isLoading", "isSubmitting", "onChangeSelectedRows", "onEdit", "onSubmitAllData", "onSubmitSelectedData", "rowKey", "selectedRows", "submitAllLabel", "submitSelectedLabel", "mapperConfig", "tableClassName", "emptyText"]);
     const { onCancel, className } = modalProps, restModalProps = __rest(modalProps, ["onCancel", "className"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
@@ -49,6 +49,6 @@ const AiModalTable = (_a) => {
     return useStyle(React.createElement(ui_modal_1.Modal, Object.assign({ className: (0, classnames_1.default)(baseCls, hashId, className), footer: null, onCancel: handleCancel, centered: true, destroyOnClose: true, width: 1200 }, restModalProps),
         React.createElement(ui_layout_1.Flex, { gap: 10, vertical: true },
             React.createElement("div", { className: "text-neutral-50 text-sm mb-2" }, description),
-            React.createElement(ai_table_1.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 }))));
+            React.createElement(ai_table_1.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, emptyText: emptyText }))));
 };
 exports.AiModalTable = AiModalTable;

package/dist/cjs/ai-table/__tests__/index.test.js

@@ -345,4 +345,27 @@ vitest_1.vi.mock('@akinon/ui-layout', () => ({
             (0, vitest_1.expect)(react_1.screen.getByTestId('table-content')).toBeInTheDocument();
         });
     });
+    (0, vitest_1.describe)('Empty Text', () => {
+        (0, vitest_1.it)('should render table without emptyText prop', () => {
+            (0, react_1.render)(React.createElement(index_1.AiTable, Object.assign({}, defaultProps)));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should pass emptyText prop to TableContent when provided', () => {
+            const customEmptyText = 'No data found';
+            (0, react_1.render)(React.createElement(index_1.AiTable, Object.assign({}, defaultProps, { emptyText: customEmptyText })));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should handle React nodes as emptyText', () => {
+            const customEmptyNode = (React.createElement("div", { "data-testid": "custom-empty-message" },
+                React.createElement("p", null, "No results available")));
+            (0, react_1.render)(React.createElement(index_1.AiTable, Object.assign({}, defaultProps, { emptyText: customEmptyNode })));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should work with empty data and custom emptyText', () => {
+            const customEmptyText = 'The table is empty';
+            (0, react_1.render)(React.createElement(index_1.AiTable, Object.assign({}, defaultProps, { data: [], emptyText: customEmptyText })));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('table-content')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('row-1')).not.toBeInTheDocument();
+        });
+    });
 });

package/dist/cjs/ai-table/__tests__/index.test.tsx

@@ -569,4 +569,43 @@ describe('AiTable', () => {
       expect(screen.getByTestId('table-content')).toBeInTheDocument();
     });
   });
+
+  describe('Empty Text', () => {
+    it('should render table without emptyText prop', () => {
+      render(<AiTable {...defaultProps} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should pass emptyText prop to TableContent when provided', () => {
+      const customEmptyText = 'No data found';
+
+      render(<AiTable {...defaultProps} emptyText={customEmptyText} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should handle React nodes as emptyText', () => {
+      const customEmptyNode = (
+        <div data-testid="custom-empty-message">
+          <p>No results available</p>
+        </div>
+      );
+
+      render(<AiTable {...defaultProps} emptyText={customEmptyNode} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should work with empty data and custom emptyText', () => {
+      const customEmptyText = 'The table is empty';
+
+      render(
+        <AiTable {...defaultProps} data={[]} emptyText={customEmptyText} />
+      );
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+      expect(screen.queryByTestId('row-1')).not.toBeInTheDocument();
+    });
+  });
 });

package/dist/cjs/ai-table/components/__tests__/content.test.js

@@ -18,6 +18,7 @@ const user_event_1 = require("@testing-library/user-event");
 const antd_1 = require("antd");
 const react_2 = require("react");
 const vitest_1 = require("vitest");
+const constants_1 = require("../../constants");
 const content_1 = require("../content");
 vitest_1.vi.mock('@akinon/icons', () => ({
     Icon: (_a) => {
@@ -31,6 +32,12 @@ vitest_1.vi.mock('@akinon/ui-input', () => ({
         return (react_2.default.createElement("input", Object.assign({ onChange: onChange, value: value, className: className, "data-testid": "edit-input" }, props)));
     }
 }));
+vitest_1.vi.mock('@akinon/ui-select', () => ({
+    Select: (_a) => {
+        var { value, onChange, rootClassName, options } = _a, props = __rest(_a, ["value", "onChange", "rootClassName", "options"]);
+        return (react_2.default.createElement("select", Object.assign({ "data-testid": "edit-select", value: value !== null && value !== void 0 ? value : '', onChange: e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), className: rootClassName }, props), options === null || options === void 0 ? void 0 : options.map((opt) => (react_2.default.createElement("option", { key: opt.value, value: String(opt.value) }, opt.label)))));
+    }
+}));
 vitest_1.vi.mock('@akinon/ui-layout', () => ({
     Flex: (_a) => {
         var { children } = _a, props = __rest(_a, ["children"]);
@@ -337,12 +344,13 @@ vitest_1.vi.mock('../../i18n', () => ({
         });
         (0, vitest_1.it)('should apply collapsed style when not expanded', () => {
             renderComponent({ expandedRows: [] });
+            // Row 2 (pk: 2) has multiple mapper items, so it has the expand button
             const expandIcons = react_1.screen.getAllByTestId('icon-chevron_down');
             (0, vitest_1.expect)(expandIcons[0].className).toContain('ai-modal-table__icon--collapsed');
         });
         (0, vitest_1.it)('should not apply collapsed style when expanded', () => {
-            renderComponent({ expandedRows: [1] });
-            // First icon - for row 1
+            renderComponent({ expandedRows: [2] });
+            // Icon for row 2 (which has multiple mapper items)
             const icons = react_1.screen.getAllByTestId('icon-chevron_down');
             (0, vitest_1.expect)(icons[0].className).not.toContain('ai-modal-table__icon--collapsed');
         });
@@ -353,9 +361,10 @@ vitest_1.vi.mock('../../i18n', () => ({
             });
             (0, vitest_1.expect)(react_1.screen.queryByTestId('icon-chevron_down')).not.toBeInTheDocument();
         });
-        (0, vitest_1.it)('should render multiple expand buttons for multiple rows', () => {
+        (0, vitest_1.it)('should render expand button for rows with multiple mapper items', () => {
             renderComponent();
-            (0, vitest_1.expect)(react_1.screen.getAllByTestId('icon-chevron_down').length).toBe(2);
+            // Only row 2 has multiple mapper items (2 items), so only 1 expand button should be rendered
+            (0, vitest_1.expect)(react_1.screen.getAllByTestId('icon-chevron_down').length).toBe(1);
         });
     });
     (0, vitest_1.describe)('Mapper Column', () => {
@@ -552,8 +561,10 @@ vitest_1.vi.mock('../../i18n', () => ({
         });
         (0, vitest_1.it)('should render expand button in first column', () => {
             renderComponent();
-            const firstRow = react_1.screen.getAllByRole('row')[1];
-            const firstCell = (0, react_1.within)(firstRow).getAllByRole('cell')[0];
+            // Row 2 (index 2) has multiple mapper items, so it has the expand button
+            const rows = react_1.screen.getAllByRole('row');
+            const rowWithExpandButton = rows[2]; // Row 2 (pk: 2) has multiple mapper items
+            const firstCell = (0, react_1.within)(rowWithExpandButton).getAllByRole('cell')[0];
             (0, vitest_1.expect)(firstCell).toContainElement(react_1.screen.getAllByTestId('icon-chevron_down')[0]);
         });
         (0, vitest_1.it)('should handle missing optional data gracefully', () => {
@@ -788,18 +799,20 @@ vitest_1.vi.mock('../../i18n', () => ({
             });
             const expandButtons = react_1.screen.getAllByTestId('icon-chevron_down');
             react_1.fireEvent.click(expandButtons[0]);
-            (0, vitest_1.expect)(onToggleExpand).toHaveBeenCalledWith(1);
+            // Row 2 (pk: 2) has multiple mapper items and is the one with expand button
+            (0, vitest_1.expect)(onToggleExpand).toHaveBeenCalledWith(2);
         });
         (0, vitest_1.it)('should call onToggleExpand when expand button clicked on expanded row', () => {
             const onToggleExpand = vitest_1.vi.fn();
             renderComponent({
-                expandedRows: [1],
+                expandedRows: [2],
                 onToggleExpand
             });
             const expandButtons = react_1.screen.getAllByTestId('icon-chevron_down');
             react_1.fireEvent.click(expandButtons[0]);
             // The expand button is a toggle - it should call onToggleExpand to collapse the row
-            (0, vitest_1.expect)(onToggleExpand).toHaveBeenCalledWith(1);
+            // Row 2 (pk: 2) has multiple mapper items and is the one with expand button
+            (0, vitest_1.expect)(onToggleExpand).toHaveBeenCalledWith(2);
         });
         (0, vitest_1.it)('should call onAddItem with correct rowId and dataIndex when add button clicked', () => {
             const onAddItem = vitest_1.vi.fn();
@@ -1345,5 +1358,44 @@ vitest_1.vi.mock('../../i18n', () => ({
             const inputs = react_1.screen.queryAllByTestId('edit-input');
             (0, vitest_1.expect)(inputs.length).toBeGreaterThan(0);
         });
+        (0, vitest_1.it)('should render Select for editable column when editDataIndexes has SELECT config', async () => {
+            const user = user_event_1.default.setup();
+            const onEdit = vitest_1.vi.fn();
+            renderComponent({
+                data: [
+                    {
+                        pk: 1,
+                        name: 'Item 1',
+                        status: 'active',
+                        mappings: []
+                    }
+                ],
+                columns: [
+                    { title: 'Name', dataIndex: 'name' },
+                    { title: 'Status', dataIndex: 'status' }
+                ],
+                mapperConfig: undefined,
+                onEdit,
+                editDataIndexes: [
+                    'name',
+                    {
+                        key: 'status',
+                        type: constants_1.EDIT_FIELD_TYPES.SELECT,
+                        attributes: {
+                            options: [
+                                { label: 'Active', value: 'active' },
+                                { label: 'Inactive', value: 'inactive' }
+                            ]
+                        }
+                    }
+                ]
+            });
+            const editButton = react_1.screen.getByTestId('edit-button-1');
+            await user.click(editButton);
+            const inputs = react_1.screen.queryAllByTestId('edit-input');
+            const selects = react_1.screen.queryAllByTestId('edit-select');
+            (0, vitest_1.expect)(inputs.length).toBeGreaterThan(0);
+            (0, vitest_1.expect)(selects.length).toBeGreaterThan(0);
+        });
     });
 });

package/dist/cjs/ai-table/components/__tests__/content.test.tsx

@@ -7,6 +7,7 @@ import { ConfigProvider } from 'antd';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { EDIT_FIELD_TYPES } from '../../constants';
 import { TableContent } from '../content';
 
 vi.mock('@akinon/icons', () => ({
@@ -35,6 +36,24 @@ vi.mock('@akinon/ui-input', () => ({
   )
 }));
 
+vi.mock('@akinon/ui-select', () => ({
+  Select: ({ value, onChange, rootClassName, options, ...props }: any) => (
+    <select
+      data-testid="edit-select"
+      value={value ?? ''}
+      onChange={e => onChange?.(e.target.value)}
+      className={rootClassName}
+      {...props}
+    >
+      {options?.map((opt: { label: string; value: string | number }) => (
+        <option key={opt.value} value={String(opt.value)}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  )
+}));
+
 vi.mock('@akinon/ui-layout', () => ({
   Flex: ({ children, ...props }: any) => (
     <div data-testid="flex" {...props}>
@@ -434,6 +453,7 @@ describe('TableContent', () => {
 
     it('should apply collapsed style when not expanded', () => {
       renderComponent({ expandedRows: [] });
+      // Row 2 (pk: 2) has multiple mapper items, so it has the expand button
       const expandIcons = screen.getAllByTestId('icon-chevron_down');
       expect(expandIcons[0].className).toContain(
         'ai-modal-table__icon--collapsed'
@@ -441,8 +461,8 @@ describe('TableContent', () => {
     });
 
     it('should not apply collapsed style when expanded', () => {
-      renderComponent({ expandedRows: [1] });
-      // First icon - for row 1
+      renderComponent({ expandedRows: [2] });
+      // Icon for row 2 (which has multiple mapper items)
       const icons = screen.getAllByTestId('icon-chevron_down');
       expect(icons[0].className).not.toContain(
         'ai-modal-table__icon--collapsed'
@@ -457,9 +477,10 @@ describe('TableContent', () => {
       expect(screen.queryByTestId('icon-chevron_down')).not.toBeInTheDocument();
     });
 
-    it('should render multiple expand buttons for multiple rows', () => {
+    it('should render expand button for rows with multiple mapper items', () => {
       renderComponent();
-      expect(screen.getAllByTestId('icon-chevron_down').length).toBe(2);
+      // Only row 2 has multiple mapper items (2 items), so only 1 expand button should be rendered
+      expect(screen.getAllByTestId('icon-chevron_down').length).toBe(1);
     });
   });
 
@@ -691,8 +712,10 @@ describe('TableContent', () => {
 
     it('should render expand button in first column', () => {
       renderComponent();
-      const firstRow = screen.getAllByRole('row')[1];
-      const firstCell = within(firstRow).getAllByRole('cell')[0];
+      // Row 2 (index 2) has multiple mapper items, so it has the expand button
+      const rows = screen.getAllByRole('row');
+      const rowWithExpandButton = rows[2]; // Row 2 (pk: 2) has multiple mapper items
+      const firstCell = within(rowWithExpandButton).getAllByRole('cell')[0];
       expect(firstCell).toContainElement(
         screen.getAllByTestId('icon-chevron_down')[0]
       );
@@ -986,13 +1009,14 @@ describe('TableContent', () => {
       const expandButtons = screen.getAllByTestId('icon-chevron_down');
       fireEvent.click(expandButtons[0]);
 
-      expect(onToggleExpand).toHaveBeenCalledWith(1);
+      // Row 2 (pk: 2) has multiple mapper items and is the one with expand button
+      expect(onToggleExpand).toHaveBeenCalledWith(2);
     });
 
     it('should call onToggleExpand when expand button clicked on expanded row', () => {
       const onToggleExpand = vi.fn();
       renderComponent({
-        expandedRows: [1],
+        expandedRows: [2],
         onToggleExpand
       });
 
@@ -1000,7 +1024,8 @@ describe('TableContent', () => {
       fireEvent.click(expandButtons[0]);
 
       // The expand button is a toggle - it should call onToggleExpand to collapse the row
-      expect(onToggleExpand).toHaveBeenCalledWith(1);
+      // Row 2 (pk: 2) has multiple mapper items and is the one with expand button
+      expect(onToggleExpand).toHaveBeenCalledWith(2);
     });
 
     it('should call onAddItem with correct rowId and dataIndex when add button clicked', () => {
@@ -1633,5 +1658,48 @@ describe('TableContent', () => {
       const inputs = screen.queryAllByTestId('edit-input');
       expect(inputs.length).toBeGreaterThan(0);
     });
+
+    it('should render Select for editable column when editDataIndexes has SELECT config', async () => {
+      const user = userEvent.setup();
+      const onEdit = vi.fn();
+
+      renderComponent({
+        data: [
+          {
+            pk: 1,
+            name: 'Item 1',
+            status: 'active',
+            mappings: []
+          }
+        ],
+        columns: [
+          { title: 'Name', dataIndex: 'name' },
+          { title: 'Status', dataIndex: 'status' }
+        ],
+        mapperConfig: undefined,
+        onEdit,
+        editDataIndexes: [
+          'name',
+          {
+            key: 'status',
+            type: EDIT_FIELD_TYPES.SELECT,
+            attributes: {
+              options: [
+                { label: 'Active', value: 'active' },
+                { label: 'Inactive', value: 'inactive' }
+              ]
+            }
+          }
+        ]
+      });
+
+      const editButton = screen.getByTestId('edit-button-1');
+      await user.click(editButton);
+
+      const inputs = screen.queryAllByTestId('edit-input');
+      const selects = screen.queryAllByTestId('edit-select');
+      expect(inputs.length).toBeGreaterThan(0);
+      expect(selects.length).toBeGreaterThan(0);
+    });
   });
 });

package/dist/cjs/ai-table/components/content.d.ts

@@ -5,7 +5,8 @@ interface TableContentProps extends Omit<TableBaseProps, 'onChangeSelectedRows'
     expandedRows: Array<number | string>;
     onToggleExpand: (rowId: number | string) => void;
     rowKey: string;
+    emptyText?: React.ReactNode;
 }
-export declare const TableContent: ({ columns, customActionButtons, data, editDataIndexes, expandedRows, onEdit, onToggleExpand, onToggleSelection, rowKey, selectedRows, mapperConfig }: TableContentProps) => React.JSX.Element;
+export declare const TableContent: ({ columns, customActionButtons, data, editDataIndexes, expandedRows, onEdit, onToggleExpand, onToggleSelection, rowKey, selectedRows, mapperConfig, emptyText }: TableContentProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=content.d.ts.map

package/dist/cjs/ai-table/components/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAA8B,cAAc,EAAE,MAAM,aAAa,CAAC;AAQ9E,UAAU,iBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,sBAAsB,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,GAAI,sJAY1B,iBAAiB,sBAihBnB,CAAC"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAA8B,cAAc,EAAE,MAAM,aAAa,CAAC;AAY9E,UAAU,iBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,sBAAsB,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,GAAI,iKAa1B,iBAAiB,sBAuhBnB,CAAC"}