musae 1.3.1-beta.24 → 1.3.1-beta.25

package/dist/components/input/styles.stylex.cjs

@@ -16,9 +16,8 @@ var root = {
     kXLuUW: "musaex-3ajldb",
     kI3sdo: "musaex-4fx59i",
     kZKoxP: "musaex-1s2k5h2",
-    kmuXW: "musaex-2lah0s",
     k7Eaqz: "musaex-1rdiejn",
-    kzqmXN: "musaex-92755x",
+    kzqmXN: "musaex-mz87aw",
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",

package/dist/components/input/styles.stylex.d.ts

@@ -12,7 +12,6 @@ declare const styles: {
             readonly verticalAlign: import("@stylexjs/stylex").StyleXClassNameFor<"verticalAlign", "bottom">;
             readonly outline: import("@stylexjs/stylex").StyleXClassNameFor<"outline", string>;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
-            readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
             readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
             readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;

package/dist/components/input/styles.stylex.mjs

@@ -12,9 +12,8 @@ var root = {
     kXLuUW: "musaex-3ajldb",
     kI3sdo: "musaex-4fx59i",
     kZKoxP: "musaex-1s2k5h2",
-    kmuXW: "musaex-2lah0s",
     k7Eaqz: "musaex-1rdiejn",
-    kzqmXN: "musaex-92755x",
+    kzqmXN: "musaex-mz87aw",
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",

package/dist/components/table/body.cjs

@@ -38,7 +38,7 @@ var Body = function Body() {
       var cellStyled = stylex.props(isFirstChildDataCell && styles.default.body.child);
       return /*#__PURE__*/React.createElement("td", {
         key: cell.id,
-        className: className.stringify(styled.className, cellStyled.className, cell.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn),
+        className: className.stringify(styled.className, cellStyled.className, cell.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn, cell.column.id === context.SELECT_COLUMN_ID && classNames.selectColumn),
         style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), cellStyled.style), isFirstChildDataCell && {
           "--depth": row.depth
         })

package/dist/components/table/body.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import styles from './styles.mjs';
 import React from 'react';
-import { useTable, EXPAND_COLUMN_ID } from './context.mjs';
+import { useTable, EXPAND_COLUMN_ID, SELECT_COLUMN_ID } from './context.mjs';
 import { flexRender } from '@tanstack/react-table';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { isEmpty } from '@aiszlab/relax';
@@ -34,7 +34,7 @@ var Body = function Body() {
       var cellStyled = props(isFirstChildDataCell && styles.body.child);
       return /*#__PURE__*/React.createElement("td", {
         key: cell.id,
-        className: stringify(styled.className, cellStyled.className, cell.column.id === EXPAND_COLUMN_ID && classNames.expandColumn),
+        className: stringify(styled.className, cellStyled.className, cell.column.id === EXPAND_COLUMN_ID && classNames.expandColumn, cell.column.id === SELECT_COLUMN_ID && classNames.selectColumn),
         style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), cellStyled.style), isFirstChildDataCell && {
           "--depth": row.depth
         })

package/dist/components/table/context.cjs

@@ -3,11 +3,13 @@
 var React = require('react');
 
 var EXPAND_COLUMN_ID = "__table_expand";
+var SELECT_COLUMN_ID = "__table_select";
 var CLASS_NAMES = {
   table: "table",
   header: "table__header",
   body: "table__body",
   expandColumn: "table__expand-column",
+  selectColumn: "table__select-column",
   expandableRow: "table__row--expandable",
   childRow: "table__row--child"
 };
@@ -27,4 +29,5 @@ var useTable = function useTable() {
 exports.CLASS_NAMES = CLASS_NAMES;
 exports.Context = Context;
 exports.EXPAND_COLUMN_ID = EXPAND_COLUMN_ID;
+exports.SELECT_COLUMN_ID = SELECT_COLUMN_ID;
 exports.useTable = useTable;

package/dist/components/table/context.d.ts

@@ -1,10 +1,12 @@
 import type { ContextValue } from "../../types/table";
 export declare const EXPAND_COLUMN_ID = "__table_expand";
+export declare const SELECT_COLUMN_ID = "__table_select";
 export declare const CLASS_NAMES: {
     readonly table: "table";
     readonly header: "table__header";
     readonly body: "table__body";
     readonly expandColumn: "table__expand-column";
+    readonly selectColumn: "table__select-column";
     readonly expandableRow: "table__row--expandable";
     readonly childRow: "table__row--child";
 };

package/dist/components/table/context.mjs

@@ -1,11 +1,13 @@
 import { createContext, useContext } from 'react';
 
 var EXPAND_COLUMN_ID = "__table_expand";
+var SELECT_COLUMN_ID = "__table_select";
 var CLASS_NAMES = {
   table: "table",
   header: "table__header",
   body: "table__body",
   expandColumn: "table__expand-column",
+  selectColumn: "table__select-column",
   expandableRow: "table__row--expandable",
   childRow: "table__row--child"
 };
@@ -22,4 +24,4 @@ var useTable = function useTable() {
   return useContext(Context);
 };
 
-export { CLASS_NAMES, Context, EXPAND_COLUMN_ID, useTable };
+export { CLASS_NAMES, Context, EXPAND_COLUMN_ID, SELECT_COLUMN_ID, useTable };

package/dist/components/table/header/header.cjs

@@ -30,7 +30,7 @@ var Header = function Header(props) {
     }, headerGroup.headers.map(function (header) {
       return /*#__PURE__*/React.createElement("th", {
         key: header.id,
-        className: className.stringify(styled.className, header.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn),
+        className: className.stringify(styled.className, header.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn, header.column.id === context.SELECT_COLUMN_ID && classNames.selectColumn),
         style: styled.style
       }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()));
     }));

package/dist/components/table/header/header.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import styles from '../styles.mjs';
 import React from 'react';
-import { useTable, EXPAND_COLUMN_ID } from '../context.mjs';
+import { useTable, EXPAND_COLUMN_ID, SELECT_COLUMN_ID } from '../context.mjs';
 import { flexRender } from '@tanstack/react-table';
 import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
@@ -26,7 +26,7 @@ var Header = function Header(props$1) {
     }, headerGroup.headers.map(function (header) {
       return /*#__PURE__*/React.createElement("th", {
         key: header.id,
-        className: stringify(styled.className, header.column.id === EXPAND_COLUMN_ID && classNames.expandColumn),
+        className: stringify(styled.className, header.column.id === EXPAND_COLUMN_ID && classNames.expandColumn, header.column.id === SELECT_COLUMN_ID && classNames.selectColumn),
         style: styled.style
       }, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()));
     }));

package/dist/components/table/hooks.cjs

@@ -7,6 +7,7 @@ var React = require('react');
 var cell = require('./header/cell.cjs');
 var relax = require('@aiszlab/relax');
 var context = require('./context.cjs');
+var index = require('../checkbox/index.cjs');
 var button = require('../button/button.cjs');
 var expandLess = require('../icon/icons/navigation/expand-less.cjs');
 var expandMore = require('../icon/icons/navigation/expand-more.cjs');
@@ -18,7 +19,9 @@ var expandMore = require('../icon/icons/navigation/expand-more.cjs');
 var useColumns = function useColumns(_ref) {
   var columns = _ref.columns,
     _ref$expandable = _ref.expandable,
-    expandable = _ref$expandable === void 0 ? false : _ref$expandable;
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
+    _ref$selectable = _ref.selectable,
+    selectable = _ref$selectable === void 0 ? false : _ref$selectable;
   var helper = React.useRef(reactTable.createColumnHelper());
   return React.useMemo(function () {
     var dataColumns = columns.map(function (_ref2, index) {
@@ -48,34 +51,62 @@ var useColumns = function useColumns(_ref) {
         }
       });
     });
-    if (!expandable) return dataColumns;
-    return [helper.current.display({
-      id: context.EXPAND_COLUMN_ID,
-      header: null,
-      cell: function cell(_ref4) {
-        var row = _ref4.row;
-        return row.getCanExpand() ? (/*#__PURE__*/React.createElement(button.Button, {
-          variant: "text",
-          size: "small",
-          "aria-label": row.getIsExpanded() ? "收起" : "展开",
-          "aria-expanded": row.getIsExpanded(),
-          onClick: row.getToggleExpandedHandler()
-        }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(expandLess.default, null) : /*#__PURE__*/React.createElement(expandMore.default, null))) : null;
-      }
-    })].concat(_toConsumableArray(dataColumns));
-  }, [columns, expandable]);
+    var leadingColumns = [];
+    if (selectable) {
+      leadingColumns.push(helper.current.display({
+        id: context.SELECT_COLUMN_ID,
+        header: function header(_ref4) {
+          var table = _ref4.table;
+          return /*#__PURE__*/React.createElement(index.Checkbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            indeterminate: table.getIsSomePageRowsSelected(),
+            onChange: table.getToggleAllPageRowsSelectedHandler(),
+            ripple: false
+          });
+        },
+        cell: function cell(_ref5) {
+          var row = _ref5.row;
+          return /*#__PURE__*/React.createElement(index.Checkbox, {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onChange: row.getToggleSelectedHandler(),
+            ripple: false
+          });
+        }
+      }));
+    }
+    if (expandable) {
+      leadingColumns.push(helper.current.display({
+        id: context.EXPAND_COLUMN_ID,
+        header: function header() {
+          return null;
+        },
+        cell: function cell(_ref6) {
+          var row = _ref6.row;
+          return row.getCanExpand() ? (/*#__PURE__*/React.createElement(button.Button, {
+            variant: "text",
+            size: "small",
+            "aria-label": row.getIsExpanded() ? "收起" : "展开",
+            "aria-expanded": row.getIsExpanded(),
+            onClick: row.getToggleExpandedHandler()
+          }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(expandLess.default, null) : /*#__PURE__*/React.createElement(expandMore.default, null))) : null;
+        }
+      }));
+    }
+    return [].concat(leadingColumns, _toConsumableArray(dataColumns));
+  }, [columns, expandable, selectable]);
 };
 /**
  * @author murukal
  * @description
  * for context value
  */
-var useContextValue = function useContextValue(_ref5) {
-  var _table = _ref5.table,
-    bordered = _ref5.bordered,
-    _sortDescriptor = _ref5.sortDescriptor,
-    _onSortChange = _ref5.onSortChange,
-    classNames = _ref5.classNames;
+var useContextValue = function useContextValue(_ref7) {
+  var _table = _ref7.table,
+    bordered = _ref7.bordered,
+    _sortDescriptor = _ref7.sortDescriptor,
+    _onSortChange = _ref7.onSortChange,
+    classNames = _ref7.classNames;
   var _useControlledState = relax.useControlledState(_sortDescriptor),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     sortDescriptor = _useControlledState2[0],

package/dist/components/table/hooks.d.ts

@@ -5,9 +5,10 @@ import { type CLASS_NAMES } from "./context";
  * @description
  * use columns
  */
-export declare const useColumns: <T>({ columns, expandable, }: {
+export declare const useColumns: <T>({ columns, expandable, selectable, }: {
     columns: Column<T>[];
     expandable?: boolean;
+    selectable?: boolean;
 }) => ColumnDef<T, DeepValue<T, DeepKeys<T>>>[];
 /**
  * @author murukal

package/dist/components/table/hooks.mjs

@@ -4,7 +4,8 @@ import { createColumnHelper } from '@tanstack/react-table';
 import React, { useRef, useMemo } from 'react';
 import Cell from './header/cell.mjs';
 import { useControlledState, useEvent } from '@aiszlab/relax';
-import { EXPAND_COLUMN_ID } from './context.mjs';
+import { SELECT_COLUMN_ID, EXPAND_COLUMN_ID } from './context.mjs';
+import { Checkbox } from '../checkbox/index.mjs';
 import { Button } from '../button/button.mjs';
 import IconExpandLess from '../icon/icons/navigation/expand-less.mjs';
 import IconExpandMore from '../icon/icons/navigation/expand-more.mjs';
@@ -16,7 +17,9 @@ import IconExpandMore from '../icon/icons/navigation/expand-more.mjs';
 var useColumns = function useColumns(_ref) {
   var columns = _ref.columns,
     _ref$expandable = _ref.expandable,
-    expandable = _ref$expandable === void 0 ? false : _ref$expandable;
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
+    _ref$selectable = _ref.selectable,
+    selectable = _ref$selectable === void 0 ? false : _ref$selectable;
   var helper = useRef(createColumnHelper());
   return useMemo(function () {
     var dataColumns = columns.map(function (_ref2, index) {
@@ -46,34 +49,62 @@ var useColumns = function useColumns(_ref) {
         }
       });
     });
-    if (!expandable) return dataColumns;
-    return [helper.current.display({
-      id: EXPAND_COLUMN_ID,
-      header: null,
-      cell: function cell(_ref4) {
-        var row = _ref4.row;
-        return row.getCanExpand() ? (/*#__PURE__*/React.createElement(Button, {
-          variant: "text",
-          size: "small",
-          "aria-label": row.getIsExpanded() ? "收起" : "展开",
-          "aria-expanded": row.getIsExpanded(),
-          onClick: row.getToggleExpandedHandler()
-        }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(IconExpandLess, null) : /*#__PURE__*/React.createElement(IconExpandMore, null))) : null;
-      }
-    })].concat(_toConsumableArray(dataColumns));
-  }, [columns, expandable]);
+    var leadingColumns = [];
+    if (selectable) {
+      leadingColumns.push(helper.current.display({
+        id: SELECT_COLUMN_ID,
+        header: function header(_ref4) {
+          var table = _ref4.table;
+          return /*#__PURE__*/React.createElement(Checkbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            indeterminate: table.getIsSomePageRowsSelected(),
+            onChange: table.getToggleAllPageRowsSelectedHandler(),
+            ripple: false
+          });
+        },
+        cell: function cell(_ref5) {
+          var row = _ref5.row;
+          return /*#__PURE__*/React.createElement(Checkbox, {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onChange: row.getToggleSelectedHandler(),
+            ripple: false
+          });
+        }
+      }));
+    }
+    if (expandable) {
+      leadingColumns.push(helper.current.display({
+        id: EXPAND_COLUMN_ID,
+        header: function header() {
+          return null;
+        },
+        cell: function cell(_ref6) {
+          var row = _ref6.row;
+          return row.getCanExpand() ? (/*#__PURE__*/React.createElement(Button, {
+            variant: "text",
+            size: "small",
+            "aria-label": row.getIsExpanded() ? "收起" : "展开",
+            "aria-expanded": row.getIsExpanded(),
+            onClick: row.getToggleExpandedHandler()
+          }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(IconExpandLess, null) : /*#__PURE__*/React.createElement(IconExpandMore, null))) : null;
+        }
+      }));
+    }
+    return [].concat(leadingColumns, _toConsumableArray(dataColumns));
+  }, [columns, expandable, selectable]);
 };
 /**
  * @author murukal
  * @description
  * for context value
  */
-var useContextValue = function useContextValue(_ref5) {
-  var _table = _ref5.table,
-    bordered = _ref5.bordered,
-    _sortDescriptor = _ref5.sortDescriptor,
-    _onSortChange = _ref5.onSortChange,
-    classNames = _ref5.classNames;
+var useContextValue = function useContextValue(_ref7) {
+  var _table = _ref7.table,
+    bordered = _ref7.bordered,
+    _sortDescriptor = _ref7.sortDescriptor,
+    _onSortChange = _ref7.onSortChange,
+    classNames = _ref7.classNames;
   var _useControlledState = useControlledState(_sortDescriptor),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     sortDescriptor = _useControlledState2[0],

package/dist/components/table/table.cjs

@@ -40,20 +40,31 @@ var Table = function Table(_ref) {
     defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
     onExpandedKeysChange = _ref.onExpandedKeysChange,
     rowKey = _ref.rowKey,
-    _pagination = _ref.pagination;
+    _pagination = _ref.pagination,
+    rowSelection = _ref.rowSelection;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var columns = hooks.useColumns({
     columns: _columns,
-    expandable: expandable
+    expandable: expandable,
+    selectable: Boolean(rowSelection)
   });
   var _useState = React.useState(function () {
-      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+      var _rowSelection$default;
+      return Object.fromEntries(((_rowSelection$default = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.defaultSelectedRowKeys) !== null && _rowSelection$default !== void 0 ? _rowSelection$default : []).map(function (key) {
         return [String(key), true];
       }));
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledExpanded = _useState2[0],
-    setUncontrolledExpanded = _useState2[1];
+    uncontrolledSelection = _useState2[0],
+    setUncontrolledSelection = _useState2[1];
+  var _useState3 = React.useState(function () {
+      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+        return [String(key), true];
+      }));
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    uncontrolledExpanded = _useState4[0],
+    setUncontrolledExpanded = _useState4[1];
   var _usePagination = usePagination_hook.usePagination({
       pagination: _pagination
     }),
@@ -67,11 +78,15 @@ var Table = function Table(_ref) {
       return [String(key), true];
     }));
   }, [expandedKeys, uncontrolledExpanded]);
-  var table = reactTable.useReactTable(_objectSpread(_objectSpread(_objectSpread({
+  var table = reactTable.useReactTable(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
     getCoreRowModel: reactTable.getCoreRowModel(),
-    state: _objectSpread(_objectSpread({}, expandable && {
+    state: _objectSpread(_objectSpread(_objectSpread({}, rowSelection && {
+      rowSelection: relax.isUndefined(rowSelection.selectedRowKeys) ? uncontrolledSelection : Object.fromEntries(rowSelection.selectedRowKeys.map(function (key) {
+        return [String(key), true];
+      }))
+    }), expandable && {
       expanded: expanded
     }), !isPaginationHidden && {
       pagination: {
@@ -79,7 +94,32 @@ var Table = function Table(_ref) {
         pageSize: pagination$1.pageSize
       }
     })
-  }, !isPaginationHidden && {
+  }, rowSelection && {
+    enableRowSelection: true,
+    onRowSelectionChange: function onRowSelectionChange(updater) {
+      var _rowSelection$onChang;
+      var current = relax.isUndefined(rowSelection.selectedRowKeys) ? uncontrolledSelection : Object.fromEntries(rowSelection.selectedRowKeys.map(function (key) {
+        return [String(key), true];
+      }));
+      var next = relax.isFunction(updater) ? updater(current) : updater;
+      if (relax.isUndefined(rowSelection.selectedRowKeys)) setUncontrolledSelection(next);
+      var selectedRowIds = Object.keys(next);
+      var rowsById = table.getCoreRowModel().rowsById;
+      var selectedRows = selectedRowIds.flatMap(function (key) {
+        return rowsById[key] ? [rowsById[key].original] : [];
+      });
+      var selectedRowKeys = selectedRowIds.map(function (key) {
+        var row = rowsById[key];
+        if (!row || !rowKey) return key;
+        if (relax.isFunction(rowKey)) {
+          var _rowsById$row$parentI;
+          return rowKey(row.original, row.index, row.parentId ? (_rowsById$row$parentI = rowsById[row.parentId]) === null || _rowsById$row$parentI === void 0 ? void 0 : _rowsById$row$parentI.original : undefined);
+        }
+        return relax.get(row.original, rowKey);
+      });
+      (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, selectedRowKeys, selectedRows);
+    }
+  }), !isPaginationHidden && {
     getPaginationRowModel: reactTable.getPaginationRowModel(),
     onPaginationChange: function onPaginationChange(updater) {
       var next = relax.isFunction(updater) ? updater(pagination$1) : updater;

package/dist/components/table/table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TableProps } from "../../types/table";
-declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, className, style, loading, expandable, expandedKeys, defaultExpandedKeys, onExpandedKeysChange, rowKey, pagination: _pagination, }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, className, style, loading, expandable, expandedKeys, defaultExpandedKeys, onExpandedKeysChange, rowKey, pagination: _pagination, rowSelection, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/components/table/table.mjs

@@ -36,20 +36,31 @@ var Table = function Table(_ref) {
     defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
     onExpandedKeysChange = _ref.onExpandedKeysChange,
     rowKey = _ref.rowKey,
-    _pagination = _ref.pagination;
+    _pagination = _ref.pagination,
+    rowSelection = _ref.rowSelection;
   var classNames = useClassNames(CLASS_NAMES);
   var columns = useColumns({
     columns: _columns,
-    expandable: expandable
+    expandable: expandable,
+    selectable: Boolean(rowSelection)
   });
   var _useState = useState(function () {
-      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+      var _rowSelection$default;
+      return Object.fromEntries(((_rowSelection$default = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.defaultSelectedRowKeys) !== null && _rowSelection$default !== void 0 ? _rowSelection$default : []).map(function (key) {
         return [String(key), true];
       }));
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledExpanded = _useState2[0],
-    setUncontrolledExpanded = _useState2[1];
+    uncontrolledSelection = _useState2[0],
+    setUncontrolledSelection = _useState2[1];
+  var _useState3 = useState(function () {
+      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+        return [String(key), true];
+      }));
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    uncontrolledExpanded = _useState4[0],
+    setUncontrolledExpanded = _useState4[1];
   var _usePagination = usePagination({
       pagination: _pagination
     }),
@@ -63,11 +74,15 @@ var Table = function Table(_ref) {
       return [String(key), true];
     }));
   }, [expandedKeys, uncontrolledExpanded]);
-  var table = useReactTable(_objectSpread(_objectSpread(_objectSpread({
+  var table = useReactTable(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
     getCoreRowModel: getCoreRowModel(),
-    state: _objectSpread(_objectSpread({}, expandable && {
+    state: _objectSpread(_objectSpread(_objectSpread({}, rowSelection && {
+      rowSelection: isUndefined(rowSelection.selectedRowKeys) ? uncontrolledSelection : Object.fromEntries(rowSelection.selectedRowKeys.map(function (key) {
+        return [String(key), true];
+      }))
+    }), expandable && {
       expanded: expanded
     }), !isPaginationHidden && {
       pagination: {
@@ -75,7 +90,32 @@ var Table = function Table(_ref) {
         pageSize: pagination.pageSize
       }
     })
-  }, !isPaginationHidden && {
+  }, rowSelection && {
+    enableRowSelection: true,
+    onRowSelectionChange: function onRowSelectionChange(updater) {
+      var _rowSelection$onChang;
+      var current = isUndefined(rowSelection.selectedRowKeys) ? uncontrolledSelection : Object.fromEntries(rowSelection.selectedRowKeys.map(function (key) {
+        return [String(key), true];
+      }));
+      var next = isFunction(updater) ? updater(current) : updater;
+      if (isUndefined(rowSelection.selectedRowKeys)) setUncontrolledSelection(next);
+      var selectedRowIds = Object.keys(next);
+      var rowsById = table.getCoreRowModel().rowsById;
+      var selectedRows = selectedRowIds.flatMap(function (key) {
+        return rowsById[key] ? [rowsById[key].original] : [];
+      });
+      var selectedRowKeys = selectedRowIds.map(function (key) {
+        var row = rowsById[key];
+        if (!row || !rowKey) return key;
+        if (isFunction(rowKey)) {
+          var _rowsById$row$parentI;
+          return rowKey(row.original, row.index, row.parentId ? (_rowsById$row$parentI = rowsById[row.parentId]) === null || _rowsById$row$parentI === void 0 ? void 0 : _rowsById$row$parentI.original : undefined);
+        }
+        return get(row.original, rowKey);
+      });
+      (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, selectedRowKeys, selectedRows);
+    }
+  }), !isPaginationHidden && {
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: function onPaginationChange(updater) {
       var next = isFunction(updater) ? updater(pagination) : updater;

package/dist/styles.css

@@ -2673,6 +2673,10 @@
     width: var(--musaex-mw242b);
   }
 
+  .musaex-mz87aw {
+    width: var(--musaex-p6w1jl);
+  }
+
   .musaex-t4hhhd {
     width: var(--musaex-qe7ci9);
   }

package/dist/types/table.d.ts

@@ -8,6 +8,18 @@ export type SortDescriptor = {
     key: Key;
     direction: SortDirection;
 };
+/**
+ * @zh 表格行选择配置。
+ * @en Table row selection configuration.
+ */
+export type RowSelection<T> = {
+    /** @zh 受控的已选行标识。 @en Controlled selected row keys. */
+    selectedRowKeys?: Key[];
+    /** @zh 非受控模式下的初始已选行标识。 @en Initial selected row keys in uncontrolled mode. */
+    defaultSelectedRowKeys?: Key[];
+    /** @zh 已选行变化时触发。 @en Called when selected rows change. */
+    onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void;
+};
 /**
  * @description
  * column def
@@ -104,6 +116,11 @@ export type TableProps<T> = ComponentProps & {
      * @en Configure built-in pagination. Set to `false` or omit to hide it.
      */
     pagination?: false | PagiantionProps;
+    /**
+     * @zh 配置行选择；设置后表格会显示选择框列。
+     * @en Configure row selection. A selection column is shown when provided.
+     */
+    rowSelection?: RowSelection<T>;
 };
 /** Recursive record shape used by the built-in hierarchical-row reader. */
 export type ExpandableRecord<T> = T & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.3.1-beta.24",
+  "version": "1.3.1-beta.25",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",