@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/cjs/tabletanstack/tabletanstack.cjs

@@ -32,28 +32,33 @@ __webpack_require__.d(__webpack_exports__, {
     DataTable: ()=>DataTable,
     DataTableColumnVisibility: ()=>DataTableColumnVisibility,
     DataTableContent: ()=>DataTableContent,
+    DataTableContentControl: ()=>DataTableContentControl,
     DataTableFooter: ()=>DataTableFooter,
+    DataTableFooterControl: ()=>DataTableFooterControl,
     DataTablePagination: ()=>DataTablePagination,
+    DataTablePaginationControl: ()=>DataTablePaginationControl,
     DataTableSearch: ()=>DataTableSearch,
     DataTableToolbar: ()=>DataTableToolbar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const use_formatted_text_cjs_namespaceObject = require("../shared/use-formatted-text.cjs");
 const react_table_namespaceObject = require("@tanstack/react-table");
 const react_virtual_namespaceObject = require("@tanstack/react-virtual");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../button/index.cjs");
-const external_checkbox_index_cjs_namespaceObject = require("../checkbox/index.cjs");
+const button_cjs_namespaceObject = require("../button/button.cjs");
+const checkbox_cjs_namespaceObject = require("../checkbox/checkbox.cjs");
+const component_defaults_cjs_namespaceObject = require("../config-provider/component-defaults.cjs");
 const context_cjs_namespaceObject = require("../config-provider/context.cjs");
 const form_cjs_namespaceObject = require("../form/form.cjs");
-const external_input_index_cjs_namespaceObject = require("../input/index.cjs");
-const external_pagination_index_cjs_namespaceObject = require("../pagination/index.cjs");
-const external_popover_index_cjs_namespaceObject = require("../popover/index.cjs");
-const external_radio_index_cjs_namespaceObject = require("../radio/index.cjs");
+const input_cjs_namespaceObject = require("../input/input.cjs");
+const pagination_cjs_namespaceObject = require("../pagination/pagination.cjs");
+const popover_cjs_namespaceObject = require("../popover/popover.cjs");
+const radio_cjs_namespaceObject = require("../radio/radio.cjs");
 const classes_cjs_namespaceObject = require("../shared/classes.cjs");
 const field_cjs_namespaceObject = require("../shared/field.cjs");
 const use_text_cjs_namespaceObject = require("../shared/use-text.cjs");
-const external_table_index_cjs_namespaceObject = require("../table/index.cjs");
+const table_cjs_namespaceObject = require("../table/table.cjs");
 const external_reordering_cjs_namespaceObject = require("./reordering.cjs");
 const DataTableContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
 function useDataTable() {
@@ -155,9 +160,9 @@ function DataTableRoot({ table, children, caption, size = 'md', bordered = false
                     },
                     children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableContent, {}),
-                            pagination && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableFooter, {
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTablePagination, {})
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableContentControl, {}),
+                            pagination && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableFooterControl, {
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTablePaginationControl, {})
                             })
                         ]
                     })
@@ -166,26 +171,28 @@ function DataTableRoot({ table, children, caption, size = 'md', bordered = false
         })
     });
 }
-function DataTableToolbar({ className, ...props }) {
+function DataTableToolbar(rawProps) {
+    const { className, ...props } = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTableToolbar', rawProps);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ...props,
         className: (0, classes_cjs_namespaceObject.classes)('leaf-data-table__toolbar', className)
     });
 }
-function DataTableFooter({ className, ...props }) {
+function DataTableFooterControl({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ...props,
         className: (0, classes_cjs_namespaceObject.classes)('leaf-data-table__footer', className)
     });
 }
-function DataTableSearch({ columnId, className, ...props }) {
+function DataTableSearch(rawProps) {
+    const { columnId, className, ...props } = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTableSearch', rawProps);
     const { table, loading, size } = useDataTable();
     const t = (0, use_text_cjs_namespaceObject.useText)();
     const column = columnId ? table.getColumn(columnId) : void 0;
     const value = columnId ? column?.getFilterValue() : table.getState().globalFilter;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_index_cjs_namespaceObject.Input, {
-        "aria-label": t('搜索表格', 'Search table'),
-        placeholder: t('搜索表格', 'Search table'),
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.InputControl, {
+        "aria-label": t('dataTable.searchTable'),
+        placeholder: t('dataTable.searchTable'),
         prefix: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
             size: 16
         }),
@@ -205,17 +212,18 @@ function columnLabel(column) {
     const meta = column.columnDef.meta;
     return meta?.label ?? ('string' == typeof column.columnDef.header ? column.columnDef.header : column.id);
 }
-function DataTableColumnVisibility({ children, label }) {
+function DataTableColumnVisibility(rawProps) {
+    const { children, label } = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTableColumnVisibility', rawProps);
     const { table, loading, size } = useDataTable();
     const t = (0, use_text_cjs_namespaceObject.useText)();
-    const title = label ?? t('显示列', 'Columns');
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_index_cjs_namespaceObject.Popover, {
+    const title = label ?? t('dataTable.columns');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(popover_cjs_namespaceObject.PopoverControl, {
         placement: "bottom-end",
         "aria-label": title,
         content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_cjs_namespaceObject.FieldScope, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "leaf-data-table__visibility",
-                children: table.getAllLeafColumns().map((column)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_checkbox_index_cjs_namespaceObject.Checkbox, {
+                children: table.getAllLeafColumns().map((column)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.CheckboxControl, {
                         checked: column.getIsVisible(),
                         disabled: loading || !column.getCanHide(),
                         onChange: column.getToggleVisibilityHandler(),
@@ -223,7 +231,7 @@ function DataTableColumnVisibility({ children, label }) {
                     }, column.id))
             })
         }),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
             size: size,
             variant: "outline",
             startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Columns3, {
@@ -245,13 +253,15 @@ function pinProps(column) {
 function ResizeHandle({ header }) {
     const { table, loading } = useDataTable();
     const { direction } = (0, context_cjs_namespaceObject.useLeafConfig)();
-    const t = (0, use_text_cjs_namespaceObject.useText)();
+    const format = (0, use_formatted_text_cjs_namespaceObject.useFormattedText)();
     const column = header.column;
     const min = column.columnDef.minSize ?? 20;
     const max = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("hr", {
         tabIndex: loading ? -1 : 0,
-        "aria-label": `${t('调整列宽', 'Resize column')}: ${columnLabel(column)}`,
+        "aria-label": format('dataTable.resizeColumn', {
+            label: columnLabel(column)
+        }),
         "aria-orientation": "vertical",
         "aria-valuemin": min,
         "aria-valuemax": max,
@@ -287,12 +297,12 @@ function SelectionHeader() {
     const t = (0, use_text_cjs_namespaceObject.useText)();
     if ('multiple' !== selection) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
         className: "leaf-table__sr-only",
-        children: t('选择行', 'Select rows')
+        children: t('dataTable.selectRows')
     });
     const page = 'page' === selectAllMode;
     const selectable = (page ? table.getRowModel() : table.getPrePaginationRowModel()).flatRows.filter((row)=>row.getCanSelect());
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_checkbox_index_cjs_namespaceObject.Checkbox, {
-        "aria-label": page ? t('选择本页所有行', 'Select all rows on this page') : t('选择所有行', 'Select all rows'),
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.CheckboxControl, {
+        "aria-label": page ? t('dataTable.selectAllRowsOnThisPage') : t('dataTable.selectAllRows'),
         checked: page ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(),
         indeterminate: page ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(),
         disabled: loading || !selectable.length,
@@ -302,7 +312,7 @@ function SelectionHeader() {
 function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
     const config = useDataTable();
     const { id, selection, loading, getRowLabel, renderExpandedRow, getRowProps, getCellProps } = config;
-    const t = (0, use_text_cjs_namespaceObject.useText)();
+    const format = (0, use_formatted_text_cjs_namespaceObject.useFormattedText)();
     const detailsId = `${id}-detail-${encodeURIComponent(row.id)}`;
     const label = getRowLabel?.(row) ?? row.id;
     const expandable = config.expandable;
@@ -346,37 +356,45 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                 "aria-rowindex": ariaRowIndex,
                 selected: selection ? row.getIsSelected() : custom?.selected,
                 children: [
-                    config.rowReordering && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Cell, {
+                    config.rowReordering && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Cell, {
                         className: "leaf-data-table__utility",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reordering_cjs_namespaceObject.ReorderHandle, {
-                            label: `${t('移动行', 'Reorder row')}: ${label}`
+                            label: format('dataTable.reorderRow', {
+                                label
+                            })
                         })
                     }),
-                    selection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Cell, {
+                    selection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Cell, {
                         className: "leaf-data-table__utility",
-                        children: 'single' === selection ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_radio_index_cjs_namespaceObject.Radio, {
+                        children: 'single' === selection ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_cjs_namespaceObject.RadioControl, {
                             name: `${id}-selection`,
                             form: `${id}-detached-selection`,
-                            "aria-label": `${t('选择行', 'Select row')}: ${label}`,
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
                             checked: row.getIsSelected(),
                             disabled: loading || !row.getCanSelect(),
                             onChange: ()=>config.table.setRowSelection({
                                     [row.id]: true
                                 })
-                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_checkbox_index_cjs_namespaceObject.Checkbox, {
-                            "aria-label": `${t('选择行', 'Select row')}: ${label}`,
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.CheckboxControl, {
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
                             checked: row.getIsSelected(),
                             indeterminate: row.getIsSomeSelected(),
                             disabled: loading || !row.getCanSelect(),
                             onChange: row.getToggleSelectedHandler()
                         })
                     }),
-                    expandable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Cell, {
+                    expandable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Cell, {
                         className: "leaf-data-table__utility",
                         children: row.getCanExpand() && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                             type: "button",
                             className: "leaf-data-table__expand",
-                            "aria-label": `${row.getIsExpanded() ? t('收起行', 'Collapse row') : t('展开行', 'Expand row')}: ${label}`,
+                            "aria-label": format(row.getIsExpanded() ? 'dataTable.collapseRow' : 'dataTable.expandRow', {
+                                label
+                            }),
                             "aria-expanded": row.getIsExpanded(),
                             "aria-controls": renderExpandedRow && !row.subRows.length ? detailsId : void 0,
                             disabled: loading,
@@ -394,7 +412,7 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                         const meta = cell.column.columnDef.meta;
                         const props = getCellProps?.(cell);
                         if (props?.colSpan === 0 || props?.rowSpan === 0) return null;
-                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_index_cjs_namespaceObject.Table.Cell, {
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(table_cjs_namespaceObject.TableControl.Cell, {
                             align: meta?.align,
                             ...pinProps(cell.column),
                             ...props,
@@ -414,13 +432,13 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                     })
                 ]
             }),
-            renderExpandedRow && row.getCanExpand() && !row.subRows.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Row, {
+            renderExpandedRow && row.getCanExpand() && !row.subRows.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Row, {
                 className: "leaf-data-table__detail",
                 id: detailsId,
                 "data-detail-row": row.id,
                 "aria-rowindex": ariaRowIndex && detail ? ariaRowIndex + 1 : void 0,
                 hidden: !detail,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Cell, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Cell, {
                     colSpan: Math.max(1, cells.length + utilityCount),
                     children: visited || detail ? renderExpandedRow?.(row) : null
                 })
@@ -491,7 +509,7 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
                 const gap = Math.max(0, item.start - (previous?.end ?? headerHeight.current));
                 return row ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
                     children: [
-                        gap > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Row, {
+                        gap > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Row, {
                             className: "leaf-data-table__spacer",
                             "aria-hidden": "true",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("td", {
@@ -510,7 +528,7 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
                     ]
                 }, row.id) : null;
             }),
-            bottom > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Row, {
+            bottom > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Row, {
                 className: "leaf-data-table__spacer",
                 "aria-hidden": "true",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("td", {
@@ -523,10 +541,11 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
         ]
     });
 }
-function DataTableContent({ className, ...props }) {
+function DataTableContentControl({ className, ...props }) {
     const config = useDataTable();
     const { table, caption, tableRef, loading, error, emptyContent, onRetry, selection, resizable, virtual } = config;
     const t = (0, use_text_cjs_namespaceObject.useText)();
+    const format = (0, use_formatted_text_cjs_namespaceObject.useFormattedText)();
     const viewport = (0, external_react_namespaceObject.useRef)(null);
     const element = (0, external_react_namespaceObject.useRef)(null);
     const [focusedRowId, setFocusedRowId] = (0, external_react_namespaceObject.useState)();
@@ -569,7 +588,7 @@ function DataTableContent({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ...props,
         className: className,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_index_cjs_namespaceObject.Table, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(table_cjs_namespaceObject.TableControl, {
             ref: (node)=>{
                 (0, field_cjs_namespaceObject.assignRef)(element, node);
                 (0, field_cjs_namespaceObject.assignRef)(tableRef, node);
@@ -591,7 +610,7 @@ function DataTableContent({ className, ...props }) {
             },
             loading: loading && Boolean(rows.length) && 'error' !== status,
             children: [
-                null != caption && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Caption, {
+                null != caption && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Caption, {
                     children: caption
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("colgroup", {
@@ -618,33 +637,33 @@ function DataTableContent({ className, ...props }) {
                             }, column.id))
                     ]
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Header, {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Header, {
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reordering_cjs_namespaceObject.ReorderItems, {
                         enabled: Boolean(config.columnReordering),
                         kind: "column",
                         ids: config.columnReordering ? columns.map((column)=>column.id) : [],
-                        children: headers.map((group, groupIndex)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_index_cjs_namespaceObject.Table.Row, {
+                        children: headers.map((group, groupIndex)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(table_cjs_namespaceObject.TableControl.Row, {
                                 "aria-rowindex": virtual ? groupIndex + 1 : void 0,
                                 children: [
-                                    0 === groupIndex && config.rowReordering && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.ColumnHeader, {
+                                    0 === groupIndex && config.rowReordering && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                             className: "leaf-table__sr-only",
-                                            children: t('移动行', 'Reorder rows')
+                                            children: t('dataTable.reorderRows')
                                         })
                                     }),
-                                    0 === groupIndex && selection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.ColumnHeader, {
+                                    0 === groupIndex && selection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectionHeader, {})
                                     }),
-                                    0 === groupIndex && expandable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.ColumnHeader, {
+                                    0 === groupIndex && expandable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                             className: "leaf-table__sr-only",
-                                            children: t('展开行', 'Expand rows')
+                                            children: t('dataTable.expandRows')
                                         })
                                     }),
                                     group.headers.map((header)=>{
@@ -654,7 +673,7 @@ function DataTableContent({ className, ...props }) {
                                         const canSort = !header.isPlaceholder && !column.columns.length && column.getCanSort();
                                         const SortIcon = 'asc' === sorted ? external_lucide_react_namespaceObject.ArrowUp : 'desc' === sorted ? external_lucide_react_namespaceObject.ArrowDown : external_lucide_react_namespaceObject.ArrowUpDown;
                                         const nextSort = column.getNextSortingOrder();
-                                        const sortLabel = 'asc' === nextSort ? t('升序排序', 'Sort ascending') : 'desc' === nextSort ? t('降序排序', 'Sort descending') : t('取消排序', 'Clear sorting');
+                                        const sortLabel = 'asc' === nextSort ? t('dataTable.sortAscending') : 'desc' === nextSort ? t('dataTable.sortDescending') : t('dataTable.clearSorting');
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_reordering_cjs_namespaceObject.ReorderColumnHeader, {
                                             enabled: Boolean(config.columnReordering && !header.isPlaceholder && !column.columns.length),
                                             disabled: !config.reorderColumns,
@@ -672,7 +691,9 @@ function DataTableContent({ className, ...props }) {
                                                     className: "leaf-data-table__heading",
                                                     children: [
                                                         config.reorderColumns && !header.isPlaceholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reordering_cjs_namespaceObject.ReorderHandle, {
-                                                            label: `${t('移动列', 'Reorder column')}: ${columnLabel(column)}`
+                                                            label: format('dataTable.reorderColumn', {
+                                                                label: columnLabel(column)
+                                                            })
                                                         }),
                                                         header.isPlaceholder ? null : canSort ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
                                                             type: "button",
@@ -703,18 +724,18 @@ function DataTableContent({ className, ...props }) {
                             }, group.id))
                     })
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Body, {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Body, {
                     onFocusCapture: virtual ? (event)=>setFocusedRowId(event.target.closest('[data-row-id], [data-detail-row]')?.getAttribute('data-row-id') ?? event.target.closest('[data-detail-row]')?.getAttribute('data-detail-row') ?? void 0) : void 0,
                     onBlurCapture: virtual ? (event)=>{
                         if (!event.currentTarget.contains(event.relatedTarget)) setFocusedRowId(void 0);
                     } : void 0,
-                    children: 'error' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Error, {
+                    children: 'error' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Error, {
                         colSpan: colSpan,
                         onRetry: onRetry,
                         children: error
-                    }) : 'loading' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Loading, {
+                    }) : 'loading' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Loading, {
                         colSpan: colSpan
-                    }) : 'empty' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_index_cjs_namespaceObject.Table.Empty, {
+                    }) : 'empty' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(table_cjs_namespaceObject.TableControl.Empty, {
                         colSpan: colSpan,
                         children: emptyContent
                     }) : virtual ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VirtualRows, {
@@ -739,36 +760,36 @@ function DataTableContent({ className, ...props }) {
         })
     });
 }
-function DataTablePagination({ className, hasNextPage, ...props }) {
+function DataTablePaginationControl({ className, hasNextPage, ...props }) {
     const { table, loading, size } = useDataTable();
     const { pageIndex, pageSize } = table.getState().pagination;
     const t = (0, use_text_cjs_namespaceObject.useText)();
     const pages = table.getPageCount();
     if (pages < 0) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
-        "aria-label": t('分页', 'Pagination'),
+        "aria-label": t('pagination.label'),
         className: (0, classes_cjs_namespaceObject.classes)('leaf-data-table__pagination', className),
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
-                size: size,
-                variant: "outline",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
                 disabled: props.disabled || loading || !table.getCanPreviousPage(),
                 onClick: ()=>table.previousPage(),
-                children: t('上一页', 'Previous page')
+                children: t('pagination.previousPage')
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                 children: pageIndex + 1
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
-                size: size,
-                variant: "outline",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
                 disabled: props.disabled || loading || !(hasNextPage ?? table.getCanNextPage()),
                 onClick: ()=>table.nextPage(),
-                children: t('下一页', 'Next page')
+                children: t('pagination.nextPage')
             })
         ]
     });
     const total = table.options.rowCount ?? (table.options.manualPagination && null != table.options.pageCount ? pages * pageSize : table.getRowCount());
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_pagination_index_cjs_namespaceObject.Pagination, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(pagination_cjs_namespaceObject.PaginationControl, {
         showSizeChanger: true,
         size: size,
         ...props,
@@ -814,7 +835,8 @@ function ManagedDataTable({ data, columns, rowKey, options, ...props }) {
         table: table
     });
 }
-function DataTableComponent(props) {
+function DataTableComponent(rawProps) {
+    const props = (0, component_defaults_cjs_namespaceObject.mergeComponentProps)((0, component_defaults_cjs_namespaceObject.useGenericComponentDefaults)('DataTable'), rawProps);
     return props.table ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableRoot, {
         ...props
     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ManagedDataTable, {
@@ -829,19 +851,43 @@ const DataTable = Object.assign(DataTableComponent, {
     Footer: DataTableFooter,
     Pagination: DataTablePagination
 });
+function DataTableContent(rawProps) {
+    const props = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTableContent', rawProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableContentControl, {
+        ...props
+    });
+}
+function DataTablePagination(rawProps) {
+    const props = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTablePagination', rawProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTablePaginationControl, {
+        ...props
+    });
+}
+function DataTableFooter(rawProps) {
+    const props = (0, component_defaults_cjs_namespaceObject.useComponentProps)('DataTableFooter', rawProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DataTableFooterControl, {
+        ...props
+    });
+}
 exports.DataTable = __webpack_exports__.DataTable;
 exports.DataTableColumnVisibility = __webpack_exports__.DataTableColumnVisibility;
 exports.DataTableContent = __webpack_exports__.DataTableContent;
+exports.DataTableContentControl = __webpack_exports__.DataTableContentControl;
 exports.DataTableFooter = __webpack_exports__.DataTableFooter;
+exports.DataTableFooterControl = __webpack_exports__.DataTableFooterControl;
 exports.DataTablePagination = __webpack_exports__.DataTablePagination;
+exports.DataTablePaginationControl = __webpack_exports__.DataTablePaginationControl;
 exports.DataTableSearch = __webpack_exports__.DataTableSearch;
 exports.DataTableToolbar = __webpack_exports__.DataTableToolbar;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DataTable",
     "DataTableColumnVisibility",
     "DataTableContent",
+    "DataTableContentControl",
     "DataTableFooter",
+    "DataTableFooterControl",
     "DataTablePagination",
+    "DataTablePaginationControl",
     "DataTableSearch",
     "DataTableToolbar"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];