@pisell/materials 3.0.62 → 6.0.2

package/lib/components/filter/components/Dropdown/index.d.ts

@@ -4,5 +4,6 @@ import { DropdownProps } from './types';
 declare const Dropdown: React.FC<DropdownProps & {
     onOpen: () => void;
     onClose: () => void;
+    renderItem?: (item: any, otherProps?: any) => React.ReactNode;
 }>;
 export default Dropdown;

package/lib/components/filter/components/Dropdown/index.js

@@ -81,7 +81,8 @@ var Dropdown = (props) => {
     quickFilterMaxLength,
     formFiltersPrefix,
     onOpen,
-    onClose
+    onClose,
+    renderItem
   } = props;
   const list = (0, import_react.useMemo)(() => {
     return {
@@ -130,7 +131,10 @@ var Dropdown = (props) => {
           listeners,
           style
         },
-        /* @__PURE__ */ import_react.default.createElement(
+        renderItem ? renderItem(item, {
+          onOpen,
+          onClose
+        }) : /* @__PURE__ */ import_react.default.createElement(
           import_FilterItem.default,
           {
             key: name.join("-"),

package/lib/components/filter/components/FilterButton/index.js

@@ -42,7 +42,8 @@ var Filter = ({
   value,
   onChange,
   quickFilterMaxLength,
-  formFiltersPrefix
+  formFiltersPrefix,
+  renderItem
 }) => {
   const ref = (0, import_react.useRef)(null);
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -66,10 +67,11 @@ var Filter = ({
         quickFilterMaxLength,
         formFiltersPrefix,
         onOpen: () => setDateRangeOpen(true),
-        onClose: () => setDateRangeOpen(false)
+        onClose: () => setDateRangeOpen(false),
+        renderItem
       }
     );
-  }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix]);
+  }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix, renderItem]);
   const isMobileBool = (0, import_platform.isMobile)();
   return /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Popover,

package/lib/components/filter/components/FilterButton/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterItemProps } from "../../types";
 export declare type FilterValueType = {
     quickFilter: FilterItemProps[];
@@ -8,4 +9,5 @@ export declare type FilterListProps = {
     onChange?: (value: FilterValueType) => void;
     quickFilterMaxLength: number;
     formFiltersPrefix: string;
+    renderItem?: (item: any, otherProps?: any) => React.ReactNode;
 };

package/lib/components/form/index.d.ts

@@ -1,8 +1,2 @@
-import React, { Component } from 'react';
-declare class Form extends Component<any, any> {
-    formRef: React.RefObject<any>;
-    componentDidUpdate(prevProps: any): void;
-    componentDidMount(): void;
-    render(): React.JSX.Element;
-}
-export default Form;
+declare const _default: any;
+export default _default;

package/lib/components/form/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(form_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_hoc = require("../../utils/hoc");
+var import_utils = require("@pisell/utils");
 var Form = class extends import_react.Component {
   constructor() {
     super(...arguments);
@@ -75,8 +76,8 @@ var Form = class extends import_react.Component {
   }
 };
 Form.Item = (props) => {
-  const { name, requiredobj, typeobj, patternobj, lenobj, validator } = props;
-  const rules = [];
+  const { name, rules: propsRules, requiredobj, typeobj, patternobj, lenobj, validator } = props;
+  const rules = (0, import_utils.isArr)(propsRules) ? propsRules : [];
   if (requiredobj && requiredobj.required) {
     rules.push(requiredobj);
   }

package/lib/components/iconfont/index.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(iconfont_exports);
 var import_icons = require("@ant-design/icons");
 var import_react = __toESM(require("react"));
 var MyIcon = (0, import_icons.createFromIconfontCN)({
-  scriptUrl: "https://static.pisellcdn.com/pisell2iconfont.js"
+  scriptUrl: "https://static.pisellcdn.com/pisell2iconfont1.0.js"
   // 在 iconfont.cn 上生成
 });
 var IconFont = (props) => {

package/lib/components/page/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(page_exports);
 var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_AdapterDayjs = require("@pisell/date-picker/es/AdapterDayjs");
+var import_VariablesProvider = __toESM(require("../dataSourceComponents/provider/variables/VariablesProvider"));
 var import_date_picker = require("@pisell/date-picker");
 var import_antd = require("antd");
 var import_en_US = __toESM(require("antd/locale/en_US"));
@@ -78,6 +79,7 @@ var Page = (props) => {
     if (props == null ? void 0 : props.theme) {
       return {
         ...props.theme,
+        // cssVar: { key: 'app' },
         token: {
           ...props.theme.token,
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
@@ -86,6 +88,7 @@ var Page = (props) => {
       };
     }
     return {
+      // cssVar: { key: 'app' },
       components: {
         Table: {
           colorFillContent: "#EAECF0",
@@ -268,14 +271,17 @@ var Page = (props) => {
           dateAdapter: import_AdapterDayjs.AdapterDayjs,
           adapterLocale: ((_d = localeDateMap == null ? void 0 : localeDateMap[locale]) == null ? void 0 : _d.adapterLocale) || "en"
         },
-        /* @__PURE__ */ import_react.default.createElement(import_date_picker.ThemeProvider, { theme: datePickerTheme }, /* @__PURE__ */ import_react.default.createElement(import_date_picker.LocaleProvider, { value: { locale } }, /* @__PURE__ */ import_react.default.createElement(import_pisell_config_provider.default, { locale }, /* @__PURE__ */ import_react.default.createElement(
+        /* @__PURE__ */ import_react.default.createElement(import_date_picker.ThemeProvider, { theme: datePickerTheme }, /* @__PURE__ */ import_react.default.createElement(import_date_picker.LocaleProvider, { value: { locale } }, /* @__PURE__ */ import_react.default.createElement(import_pisell_config_provider.default, { locale }, /* @__PURE__ */ import_react.default.createElement(import_VariablesProvider.default, null, /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            style: { ...style, "--theme-color": themeColor || "#7F56D9" },
+            style: {
+              ...style,
+              "--theme-color": themeColor || "#7F56D9"
+            },
             className
           },
           children
-        ))))
+        )))))
       )
     )
   );

package/lib/components/pisellUpload/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { UploadProps } from 'antd';
+import './index.less';
+export interface PisellUploadProps extends UploadProps {
+    title?: string;
+    text1?: string;
+    text2?: string;
+    uploadType?: 'button' | 'drop' | 'custom';
+}
+declare const PisellUpload: (props: PisellUploadProps) => React.JSX.Element;
+export default PisellUpload;

package/lib/components/pisellUpload/index.js

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellUpload/index.tsx
+var pisellUpload_exports = {};
+__export(pisellUpload_exports, {
+  default: () => pisellUpload_default
+});
+module.exports = __toCommonJS(pisellUpload_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var { Dragger } = import_antd.Upload;
+var PisellUpload = (props) => {
+  const { title, text1, text2, uploadType } = props;
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  if (uploadType === "custom") {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Upload, { ...props }, props.children);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", null, uploadType === "button" ? /* @__PURE__ */ import_react.default.createElement(import_antd.Upload, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UploadOutlined, null) }, "Upload")) : /* @__PURE__ */ import_react.default.createElement(Dragger, { ...props, className: (0, import_classnames.default)("pisell-upload-wapper") }, /* @__PURE__ */ import_react.default.createElement("p", { className: "ant-upload-drag-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icons.InboxOutlined, null)), /* @__PURE__ */ import_react.default.createElement("p", { className: "ant-upload-title" }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: "ant-upload-text1" }, text1), /* @__PURE__ */ import_react.default.createElement("p", { className: "ant-upload-text2" }, text2)));
+};
+var pisellUpload_default = PisellUpload;

package/lib/components/pisellUpload/index.less

@@ -0,0 +1,15 @@
+.pisell-upload-wapper {
+  .ant-upload-drag-icon {
+    font-size: 16px;
+  }
+  .ant-upload-title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .ant-upload-text {
+    font-size: 14px;
+  }
+  .ant-upload-text2 {
+    font-size: 14px;
+  }
+}

package/lib/components/radio/index.js

@@ -38,11 +38,11 @@ var Group = (props) => {
       return /* @__PURE__ */ React.createElement(
         RadioCpt,
         {
-          key: option.value,
-          value: option.value,
-          disabled: option.disabled
+          key: option == null ? void 0 : option.value,
+          value: option == null ? void 0 : option.value,
+          disabled: option == null ? void 0 : option.disabled
         },
-        option.label
+        option == null ? void 0 : option.label
       );
     });
   }, [options]);

package/lib/components/select/index.d.ts

@@ -1,4 +1,9 @@
-/// <reference types="react" />
-import "./index.less";
-declare const Select: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
+import React from 'react';
+import { Select as OriginalSelect } from 'antd';
+import type { SelectProps } from 'antd';
+import './index.less';
+interface CompoundedComponent extends React.ForwardRefExoticComponent<SelectProps> {
+    Option: typeof OriginalSelect.Option;
+}
+declare const Select: CompoundedComponent;
 export default Select;

package/lib/components/select/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/select/index.tsx
@@ -22,10 +32,15 @@ __export(select_exports, {
   default: () => select_default
 });
 module.exports = __toCommonJS(select_exports);
+var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_react = require("react");
-var import_locales = require("../../locales");
 var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var import_iconfont = __toESM(require("../iconfont"));
+var import_locales = require("../../locales");
+var import_hoc = require("../../utils/hoc");
+var import_browserSelect = __toESM(require("../browserSelect"));
+var import_usePisellConfig = __toESM(require("../pisell-config-provider/hooks/usePisellConfig"));
 var import_index = require("./index.less");
 var prefix = "pisell-lowcode-";
 var SelectBase = (0, import_react.forwardRef)((props, ref) => {
@@ -34,40 +49,85 @@ var SelectBase = (0, import_react.forwardRef)((props, ref) => {
     selectAll,
     mode,
     options,
-    dropdownRender: propsDropdownRender
+    dropdownRender: propsDropdownRender,
+    showSearch,
+    styleType,
+    optionFilterProp = "value",
+    popupClassName,
+    onDropdownVisibleChange
   } = props;
+  const { platform } = (0, import_usePisellConfig.default)();
+  const searchInputRef = (0, import_react.useRef)(null);
   const [state, setState] = (0, import_ahooks.useControllableValue)(props);
+  const [searchValue, setSearchValue] = (0, import_react.useState)("");
+  const filteredOptions = (0, import_react.useMemo)(() => {
+    if (!searchValue)
+      return options;
+    return options.filter(
+      (option) => {
+        var _a;
+        const optionValue = ((_a = option[optionFilterProp]) == null ? void 0 : _a.toString().toLowerCase()) || "";
+        return optionValue.includes(searchValue.toLowerCase());
+      }
+    );
+  }, [options, searchValue, optionFilterProp]);
   const onSelectAllChange = (0, import_ahooks.useMemoizedFn)((e) => {
     if (e.target.checked) {
       setState(
-        options.map((item) => item.value),
-        options
+        filteredOptions.map((item) => item.value),
+        filteredOptions
       );
     } else {
       setState([], []);
     }
   });
+  const handleDropdownVisibleChange = (0, import_ahooks.useMemoizedFn)((visible) => {
+    if (!visible) {
+      setSearchValue("");
+    } else {
+      if (platform === "pc") {
+        setTimeout(() => {
+          var _a;
+          (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+        }, 200);
+      }
+    }
+    onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(visible);
+  });
   const isShowSelectAll = (0, import_react.useMemo)(() => {
     return mode === "multiple" && isShowDropdown && selectAll;
   }, [mode, selectAll, isShowDropdown]);
   const checkboxChecked = (0, import_react.useMemo)(() => {
     if (mode !== "multiple")
       return false;
-    return (state == null ? void 0 : state.length) === (options == null ? void 0 : options.length) && state.sort().join("") === options.map((item) => item.value).sort().join("");
-  }, [state, options]);
+    return (state == null ? void 0 : state.length) === (filteredOptions == null ? void 0 : filteredOptions.length) && state.sort().join("") === filteredOptions.map((item) => item.value).sort().join("");
+  }, [state, filteredOptions]);
   const dropdownRender = (0, import_react.useCallback)(
     propsDropdownRender ? propsDropdownRender : (originNode) => {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, originNode, isShowDropdown && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showSearch && /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          ref: searchInputRef,
+          className: "pisell-select-search-input",
+          size: "middle",
+          placeholder: (0, import_locales.getText)("select-dropdown-render-search"),
+          value: searchValue,
+          onChange: (e) => setSearchValue(e.target.value),
+          bordered: false,
+          allowClear: true,
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { style: { color: "#98A2B3" }, type: "pisell2-search-lg" })
+        }
+      ), originNode, isShowDropdown && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Divider,
         {
           className: `${prefix}select-dropdown-render-divider`
         }
-      ), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
           className: `${prefix}select-dropdown-render-options-wrap`
         },
-        isShowSelectAll && /* @__PURE__ */ React.createElement(
+        isShowSelectAll && /* @__PURE__ */ import_react.default.createElement(
           import_antd.Checkbox,
           {
             onChange: onSelectAllChange,
@@ -77,18 +137,34 @@ var SelectBase = (0, import_react.forwardRef)((props, ref) => {
         )
       )));
     },
-    [isShowDropdown, isShowSelectAll, checkboxChecked, propsDropdownRender]
+    [
+      isShowDropdown,
+      isShowSelectAll,
+      checkboxChecked,
+      propsDropdownRender,
+      searchValue,
+      showSearch
+    ]
   );
-  return /* @__PURE__ */ React.createElement(
+  if (styleType === "system") {
+    return /* @__PURE__ */ import_react.default.createElement(import_browserSelect.default, { ...props });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Select,
     {
       ...props,
+      defaultActiveFirstOption: false,
+      onDropdownVisibleChange: handleDropdownVisibleChange,
+      showSearch: false,
       ref,
       value: state,
       onChange: (value, option) => setState(value, option),
-      dropdownRender
+      dropdownRender,
+      options: filteredOptions,
+      popupClassName: (0, import_classnames.default)("pisell-base-select-dropdown", popupClassName)
     }
   );
 });
-var Select = SelectBase;
+var Select = (0, import_hoc.withWrap)(SelectBase);
+Select.Option = import_antd.Select.Option;
 var select_default = Select;

package/lib/components/select/index.less

@@ -9,3 +9,22 @@
     padding: 0 5px 5px;
   }
 }
+
+// 添加选项间距
+.pisell-base-select-dropdown {
+  .pisell-lowcode-select-item {
+    margin-bottom: 4px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.pisell-select-search-input {
+  width: 100%;
+  margin-bottom: 4px;
+
+  box-shadow: none !important;
+  border-color: transparent !important;
+}

package/lib/components/sort/index.js

@@ -102,7 +102,7 @@ var Sort = ({
         key: d.name,
         label: d.label,
         children: sortChildrenMap[d.type](d.name, !!(d == null ? void 0 : d.localFilter)),
-        popupClassName: `${prefix}sort-sub-menu-popup-wrap`,
+        popupClassName: `${prefix}sort-sub-menu-popup-wrap ${prefix}dropdown-css-var`,
         // 增加显示隐藏配置
         className: `${d.isHidden ? `${prefix}sort-menu-wrap-hide` : ""}`
       };

package/lib/components/table/Actions/index.js

@@ -63,6 +63,9 @@ var Actions = ({
     preserve: true
   });
   const showActions = (0, import_react.useMemo)(() => {
+    if (import_react.default.isValidElement(filter)) {
+      return true;
+    }
     return (filter == null ? void 0 : filter.show) || (sort == null ? void 0 : sort.show) || (columnSetting == null ? void 0 : columnSetting.show) || (dataSourceGroup == null ? void 0 : dataSourceGroup.show) || view.multiple || (exportImport == null ? void 0 : exportImport.show);
   }, [
     filter == null ? void 0 : filter.show,
@@ -72,16 +75,22 @@ var Actions = ({
     view.multiple,
     exportImport == null ? void 0 : exportImport.show
   ]);
-  return showActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, /* @__PURE__ */ import_react.default.createElement(
-    import_filter.default,
-    {
-      filter,
-      isRenderFormContent: false,
-      tableId,
-      viewMode,
-      isMobile: isMobileBool
+  const filterRender = (0, import_react.useMemo)(() => {
+    if (import_react.default.isValidElement(filter)) {
+      return filter;
     }
-  )), /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_filter.default,
+      {
+        filter,
+        isRenderFormContent: false,
+        tableId,
+        viewMode,
+        isMobile: isMobileBool
+      }
+    );
+  }, [filter, tableId, viewMode, isMobileBool]);
+  return showActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, filterRender), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: "right-wrap",

package/lib/components/table/Gallery/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { GalleryProps } from "./types";
-import "./index.less";
+import React from 'react';
+import { GalleryProps } from './types';
+import './index.less';
 declare const _default: React.MemoExoticComponent<(props: GalleryProps) => React.JSX.Element>;
 export default _default;

package/lib/components/table/Gallery/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(Gallery_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
+var import_Pagination = require("../../Pagination");
 var import_useTransDataSource = __toESM(require("../hooks/useTransDataSource"));
 var import_hooks = require("../../../hooks");
 var import_model = require("../model");
@@ -96,6 +97,9 @@ var Gallery = (props) => {
     },
     [gallery_setting, gallery, columnsMap, column_setting]
   );
+  const total = (0, import_react.useMemo)(() => {
+    return pagination == null ? void 0 : pagination.total;
+  }, [pagination]);
   const gap = (0, import_react.useMemo)(() => {
     return [horizontalGutter, verticalGutter];
   }, [horizontalGutter, verticalGutter]);
@@ -153,6 +157,19 @@ var Gallery = (props) => {
       gap,
       rowHeight
     }
+  ), !pagination.localPagination && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      name: "pagination",
+      style: {
+        margin: 0,
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_Pagination.FormPagination, { ...pagination, total })
   )));
 };
 var Gallery_default = (0, import_react.memo)(Gallery);

package/lib/components/table/Gallery/index.less

@@ -14,6 +14,7 @@
     flex: 1 1 auto;
     height: 100%;
     overflow: hidden;
+    position: relative;
   }
   &-gallery-item-wrap {
     cursor: pointer;

package/lib/components/table/Header/index.d.ts

@@ -1,4 +1,11 @@
-import React from "react";
-import "./index.less";
-declare const Header: ({ buttons, title }: any) => React.JSX.Element | null;
+import React from 'react';
+import './index.less';
+export interface HeaderProps {
+    buttons: React.ReactNode | any[];
+    title: React.ReactNode | (() => React.ReactNode);
+    subTitle: React.ReactNode | (() => React.ReactNode);
+    showTitle?: boolean;
+    showSubTitle?: boolean;
+}
+declare const Header: ({ buttons, title, subTitle, showTitle, showSubTitle, }: HeaderProps) => React.JSX.Element | null;
 export default Header;

package/lib/components/table/Header/index.js

@@ -33,12 +33,37 @@ __export(Header_exports, {
 });
 module.exports = __toCommonJS(Header_exports);
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
 var import_Buttons = __toESM(require("./Buttons"));
 var import_index = require("./index.less");
-var Header = ({ buttons, title }) => {
+var Header = ({
+  buttons,
+  title,
+  subTitle,
+  showTitle,
+  showSubTitle
+}) => {
   const showHeader = (0, import_react.useMemo)(() => {
-    return title || (buttons == null ? void 0 : buttons.length);
-  }, [buttons, title]);
-  return showHeader ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, title && title()), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_Buttons.default, { list: buttons }))) : null;
+    return title && showTitle || (Array.isArray(buttons) ? buttons.length > 0 : buttons) || subTitle && showSubTitle;
+  }, [buttons, title, subTitle, showTitle, showSubTitle]);
+  const titleNode = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isFunction)(title)) {
+      return title();
+    }
+    return title;
+  }, [title]);
+  const buttonsNode = (0, import_react.useMemo)(() => {
+    if (Array.isArray(buttons)) {
+      return /* @__PURE__ */ import_react.default.createElement(import_Buttons.default, { list: buttons });
+    }
+    return buttons;
+  }, [buttons]);
+  const subTitleNode = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isFunction)(subTitle)) {
+      return subTitle();
+    }
+    return subTitle;
+  }, [subTitle]);
+  return showHeader ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-header" }, showTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, titleNode), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, buttonsNode)), showSubTitle && subTitleNode && /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-sub-title" }, subTitleNode)) : null;
 };
 var Header_default = Header;

package/lib/components/table/Header/index.less

@@ -1,8 +1,12 @@
+.materials-grid-header-wrap {
+  margin-bottom: 16px;
+}
+
 .materials-grid-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 0;
 
   .left-wrap {}
 
@@ -10,7 +14,11 @@
     display: flex;
     align-items: center;
     gap: 8px;
+  }
+}
 
 
-  }
+.materials-grid-sub-title {
+  margin-top: 8px;
+  color: #425569;
 }