@arcblock/ux 2.5.40 → 2.5.42

package/lib/Datatable/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Datatable;
+exports.default = DataTable;
 exports.getDurableData = void 0;
 
 var _react = require("react");
@@ -56,10 +56,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function Datatable(_ref) {
-  let props = Object.assign({}, _ref);
+/**
+ * @typedef {{
+ *  icon: import('react').ReactElement,
+ *  title: string,
+ * }} DataTableCustomButton
+ */
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  label: string,
+ *  width?: number,
+ *  options?: {
+ *    filter?: boolean,
+ *    sort?: boolean,
+ *    customBodyRender?: (value: any) => import('react').ReactElement,
+ *    customBodyRenderLite?: (index: number) => import('react').ReactElement
+ *  } & import('mui-datatables').MUIDataTableColumnOptions
+ * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
+ */
+
+/**
+ * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
+ */
+
+/**
+ * @typedef {{
+ *  data: Array<object | number[] | string[]>,
+ *  columns: Array<DataTableColumn>,
+ *  locale?: string,
+ *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  style?: import('react').CSSProperties,
+ *  customButtons?: Array<DataTableCustomButton>,
+ *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
+ *  loading?: boolean,
+ *  disabled?: boolean,
+ *  stripped?: boolean,
+ *  verticalKeyWidth?: number | string,
+ *  hideTableHeader?: boolean,
+ *  components?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactElement,
+ *  durable?: string,
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ */
+
+/**
+ * @description
+ * @export
+ * @param {DataTableProps} props
+ * @return {import('react').ReactComponentElement}
+ */
+function DataTable(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDataTable, _objectSpread({}, props))
   });
 }
 
@@ -89,7 +140,7 @@ const fixCellProp = (tempObj, cellProps) => {
  */
 
 
-function ReDatatable(_ref2) {
+function ReDataTable(_ref) {
   let {
     data: originData,
     columns: originColumns,
@@ -108,8 +159,8 @@ function ReDatatable(_ref2) {
     emptyNode,
     durable,
     durableKeys
-  } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   const oldState = (0, _react.useRef)(null);
   const {
@@ -372,7 +423,7 @@ function ReDatatable(_ref2) {
   });
 }
 
-ReDatatable.propTypes = {
+ReDataTable.propTypes = {
   data: _propTypes.default.array.isRequired,
   columns: _propTypes.default.array.isRequired,
   options: _propTypes.default.object,
@@ -390,7 +441,7 @@ ReDatatable.propTypes = {
   durable: _propTypes.default.string,
   durableKeys: _propTypes.default.array
 };
-ReDatatable.defaultProps = {
+ReDataTable.defaultProps = {
   options: {},
   style: {},
   locale: 'en',

package/lib/SessionManager/index.js

@@ -522,7 +522,7 @@ SessionManager.defaultProps = {
   dark: false,
   size: 24
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:last-child:first-child {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-child):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref3 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:first-of-type:last-of-type {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-of-type):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref3 => {
   let {
     theme
   } = _ref3;

package/lib/SplitButton/index.js

@@ -144,5 +144,5 @@ SplitButton.defaultProps = {
   menuButtonProps: {}
 };
 SplitButton.Item = _MenuItem.default;
-const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-child {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
+const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-of-type {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
 const StyledPopper = (0, _Theme.styled)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])), props => props.theme.zIndex.tooltip);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.40",
+  "version": "2.5.42",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -45,11 +45,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "c3a5391f9516b4193ce5699c9302be745159371a",
+  "gitHead": "2644a25c631bdd648701fa3aa365a35edebfac34",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.40",
-    "@arcblock/react-hooks": "^2.5.40",
+    "@arcblock/icons": "^2.5.42",
+    "@arcblock/react-hooks": "^2.5.42",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Datatable/index.js

@@ -10,14 +10,66 @@ import clsx from 'clsx';
 import CircularProgress from '@mui/material/CircularProgress';
 import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
-import { DatatableProvider, useDatatableContext } from './DatatableContext';
+import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
 
-export default function Datatable({ ...props }) {
+/**
+ * @typedef {{
+ *  icon: import('react').ReactElement,
+ *  title: string,
+ * }} DataTableCustomButton
+ */
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  label: string,
+ *  width?: number,
+ *  options?: {
+ *    filter?: boolean,
+ *    sort?: boolean,
+ *    customBodyRender?: (value: any) => import('react').ReactElement,
+ *    customBodyRenderLite?: (index: number) => import('react').ReactElement
+ *  } & import('mui-datatables').MUIDataTableColumnOptions
+ * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
+ */
+
+/**
+ * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
+ */
+
+/**
+ * @typedef {{
+ *  data: Array<object | number[] | string[]>,
+ *  columns: Array<DataTableColumn>,
+ *  locale?: string,
+ *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  style?: import('react').CSSProperties,
+ *  customButtons?: Array<DataTableCustomButton>,
+ *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
+ *  loading?: boolean,
+ *  disabled?: boolean,
+ *  stripped?: boolean,
+ *  verticalKeyWidth?: number | string,
+ *  hideTableHeader?: boolean,
+ *  components?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactElement,
+ *  durable?: string,
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ */
+
+/**
+ * @description
+ * @export
+ * @param {DataTableProps} props
+ * @return {import('react').ReactComponentElement}
+ */
+export default function DataTable(props) {
   return (
-    <DatatableProvider>
-      <ReDatatable {...props} />
-    </DatatableProvider>
+    <DataTableProvider>
+      <ReDataTable {...props} />
+    </DataTableProvider>
   );
 }
 
@@ -46,7 +98,7 @@ const fixCellProp = (tempObj, cellProps) => {
  * @param {Boolean} props.loading For dynamic data, usually used with onChange
  * @returns
  */
-function ReDatatable({
+function ReDataTable({
   data: originData,
   columns: originColumns,
   locale,
@@ -298,7 +350,7 @@ function ReDatatable({
   );
 }
 
-ReDatatable.propTypes = {
+ReDataTable.propTypes = {
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
   options: PropTypes.object,
@@ -317,7 +369,7 @@ ReDatatable.propTypes = {
   durableKeys: PropTypes.array,
 };
 
-ReDatatable.defaultProps = {
+ReDataTable.defaultProps = {
   options: {},
   style: {},
   locale: 'en',

package/src/SessionManager/index.jsx

@@ -457,7 +457,7 @@ const StyledPopper = styled(Popper)`
     position: relative;
     padding-left: 8px;
     /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
-    &:last-child:first-child {
+    &:first-of-type:last-of-type {
       padding-left: 0;
       &:before,
       &:after {
@@ -473,7 +473,7 @@ const StyledPopper = styled(Popper)`
       height: 1px;
       background-color: #aeaeae;
     }
-    &:not(:last-child):after {
+    &:not(:last-of-type):after {
       position: absolute;
       content: '';
       left: 0px;

package/src/SplitButton/index.js

@@ -88,7 +88,7 @@ SplitButton.defaultProps = {
 SplitButton.Item = MenuItem;
 
 const StyledButtonGroup = styled(ButtonGroup)`
-  > .MuiButtonBase-root:last-child {
+  > .MuiButtonBase-root:last-of-type {
     min-width: 2em;
     padding-left: 0;
     padding-right: 0;