@sheinx/base 3.6.0-beta.9 → 3.6.0

package/esm/table/thead-filter.js

@@ -0,0 +1,270 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { useFilter, util } from '@sheinx/hooks';
+import Icons from "../icons";
+import Tree from "../tree";
+import Input from "../input";
+import Button from "../button";
+import Popover from "../popover";
+import Radio from "../radio";
+import Empty from "../empty";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FilterFooter = function FilterFooter(props) {
+  var tableClasses = props.tableClasses;
+  return /*#__PURE__*/_jsxs("footer", {
+    className: tableClasses.filterFooter,
+    children: [/*#__PURE__*/_jsx(Button, {
+      htmlType: "reset",
+      jssStyle: props.jssStyle,
+      size: "small",
+      onClick: props.onReset,
+      disabled: !props.resetable,
+      children: "\u91CD\u7F6E"
+    }), /*#__PURE__*/_jsx(Button, {
+      jssStyle: props.jssStyle,
+      size: "small",
+      type: "primary",
+      onClick: props.onConfirm,
+      children: "\u786E\u5B9A"
+    })]
+  });
+};
+export var FilterSelect = function FilterSelect(props) {
+  var _props$filterInfo;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverVisible = _useState2[0],
+    setPopoverVisible = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tempValue = _useState4[0],
+    setTempValue = _useState4[1];
+  var tableClasses = props.tableClasses,
+    filter = props.filter;
+  var config = filter.config;
+  var currentFilter = (_props$filterInfo = props.filterInfo) === null || _props$filterInfo === void 0 ? void 0 : _props$filterInfo.get(props.columnKey);
+  var treeOptions = (config === null || config === void 0 ? void 0 : config.data) || [];
+  var onReset = function onReset() {
+    setTempValue(undefined);
+    props.onFilterChange(props.columnKey, undefined);
+    setPopoverVisible(false);
+  };
+  var onConfirm = function onConfirm() {
+    props.onFilterChange(props.columnKey, tempValue);
+    setPopoverVisible(false);
+  };
+  var onVisibleChange = function onVisibleChange(visible) {
+    // 关闭popover时就提交筛选条件，包括click away触发的
+    if (!visible) {
+      props.onFilterChange(props.columnKey, tempValue);
+    }
+    setPopoverVisible(visible);
+  };
+  var treeKeygen = function treeKeygen(d) {
+    return d.value;
+  };
+  var treeProps = config !== null && config !== void 0 && config.multiple ? {
+    value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value,
+    onChange: function onChange(v) {
+      setTempValue(v);
+    },
+    renderItem: (config === null || config === void 0 ? void 0 : config.renderItem) || 'label'
+  } : {
+    active: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value,
+    setActive: function setActive(v) {
+      setTempValue(v);
+    },
+    renderItem: function renderItem(d, _, active) {
+      var renderProp = util.isFunc(config === null || config === void 0 ? void 0 : config.renderItem) ? config === null || config === void 0 ? void 0 : config.renderItem : function (d) {
+        return d.label;
+      };
+      return /*#__PURE__*/_jsxs("div", {
+        className: tableClasses.filterRadio,
+        children: [/*#__PURE__*/_jsx(Radio, {
+          checked: active,
+          jssStyle: props.jssStyle
+        }), renderProp(d)]
+      });
+    }
+  };
+  var _useFilter = useFilter({
+      treeData: treeOptions,
+      keygen: treeKeygen,
+      childrenKey: 'children',
+      onAdvancedFilter: false,
+      onFilter: function onFilter(text) {
+        return function (item) {
+          return item.label.includes(text);
+        };
+      }
+    }),
+    filterData = _useFilter.filterData,
+    rawData = _useFilter.rawData,
+    onFilter = _useFilter.onFilter,
+    inputText = _useFilter.inputText,
+    setInputText = _useFilter.setInputText;
+  var displayData = filterData || rawData;
+  return /*#__PURE__*/_jsxs(Button, {
+    jssStyle: props.jssStyle,
+    shape: "circle",
+    size: "small",
+    className: classnames(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive),
+    style: {
+      border: 'none'
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      className: tableClasses.filterIcon,
+      children: filter.icon || Icons.table.Filter
+    }), /*#__PURE__*/_jsx(Popover, {
+      jssStyle: props.jssStyle,
+      trigger: "click",
+      showArrow: false,
+      visible: popoverVisible,
+      onVisibleChange: onVisibleChange,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classnames(tableClasses.filterContainer),
+        children: [(config === null || config === void 0 ? void 0 : config.search) && /*#__PURE__*/_jsx("header", {
+          className: tableClasses.filterHeader,
+          children: /*#__PURE__*/_jsx(Input, {
+            value: inputText,
+            onChange: function onChange(v) {
+              if (onFilter) onFilter(v || '');
+              setInputText(v);
+            },
+            jssStyle: props.jssStyle,
+            placeholder: "\u5728\u7B5B\u9009\u9879\u4E2D\u641C\u7D22",
+            className: tableClasses.filterInput,
+            prefix: /*#__PURE__*/_jsx("span", {
+              className: tableClasses.filterInputIcon,
+              children: Icons.table.Search
+            })
+          })
+        }), /*#__PURE__*/_jsx("section", {
+          className: tableClasses.filterBody,
+          children: displayData && displayData.length > 0 ? /*#__PURE__*/_jsx(Tree, _objectSpread({
+            keygen: function keygen(d) {
+              return d.value;
+            },
+            jssStyle: props.jssStyle,
+            data: displayData,
+            actionOnClick: ['check']
+          }, treeProps)) : /*#__PURE__*/_jsx(Empty, {
+            jssStyle: props.jssStyle,
+            icon: null,
+            style: {
+              padding: '24px 0'
+            }
+          })
+        }), /*#__PURE__*/_jsx(FilterFooter, {
+          jssStyle: props.jssStyle,
+          tableClasses: tableClasses,
+          onReset: onReset,
+          onConfirm: onConfirm,
+          resetable: !!tempValue
+        })]
+      })
+    })]
+  });
+};
+export var FilterSearch = function FilterSearch(props) {
+  var _props$filterInfo2;
+  var tableClasses = props.tableClasses,
+    filter = props.filter;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popoverVisible = _useState6[0],
+    setPopoverVisible = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tempValue = _useState8[0],
+    setTempValue = _useState8[1];
+  var inputRef = useRef(null);
+  var onReset = function onReset() {
+    setTempValue(undefined);
+    props.onFilterChange(props.columnKey, undefined);
+    setPopoverVisible(false);
+  };
+  var onConfirm = function onConfirm() {
+    props.onFilterChange(props.columnKey, tempValue);
+    setPopoverVisible(false);
+  };
+  var onVisibleChange = function onVisibleChange(visible) {
+    // 关闭popover时就提交筛选条件，包括click away触发的
+    if (!visible) {
+      props.onFilterChange(props.columnKey, tempValue);
+    }
+
+    // 打开时自动focus input
+    if (visible) {
+      setTimeout(function () {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    }
+    setPopoverVisible(visible);
+  };
+  var currentFilter = (_props$filterInfo2 = props.filterInfo) === null || _props$filterInfo2 === void 0 ? void 0 : _props$filterInfo2.get(props.columnKey);
+  useEffect(function () {
+    if ((currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) !== undefined) {
+      setTempValue(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value);
+    }
+  }, [currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value]);
+  return /*#__PURE__*/_jsxs(Button, {
+    jssStyle: props.jssStyle,
+    shape: "circle",
+    size: "small",
+    className: classnames(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive),
+    style: {
+      border: 'none'
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      className: tableClasses.filterIcon,
+      children: filter.icon || Icons.table.Search
+    }), /*#__PURE__*/_jsx(Popover, {
+      jssStyle: props.jssStyle,
+      trigger: "click",
+      showArrow: false,
+      visible: popoverVisible,
+      onVisibleChange: onVisibleChange,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classnames(tableClasses.filterContainer),
+        children: [/*#__PURE__*/_jsx("header", {
+          className: tableClasses.filterHeader,
+          children: /*#__PURE__*/_jsx(Input, {
+            jssStyle: props.jssStyle,
+            placeholder: "\u5728\u7B5B\u9009\u9879\u4E2D\u641C\u7D22",
+            className: tableClasses.filterInput,
+            prefix: /*#__PURE__*/_jsx("span", {
+              className: tableClasses.filterInputIcon,
+              children: Icons.table.Search
+            }),
+            value: tempValue,
+            onChange: setTempValue,
+            onEnterPress: onConfirm,
+            forwardRef: inputRef
+          })
+        }), /*#__PURE__*/_jsx(FilterFooter, {
+          jssStyle: props.jssStyle,
+          tableClasses: tableClasses,
+          onReset: onReset,
+          onConfirm: onConfirm,
+          resetable: !!tempValue
+        })]
+      })
+    })]
+  });
+};

package/esm/table/thead.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { TheadProps } from './thead.type';
-declare const _default: (props: TheadProps) => JSX.Element;
+declare const _default: (props: TheadProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 //# sourceMappingURL=thead.d.ts.map

package/esm/table/thead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["thead.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;gCAUnB,UAAU;AAAjC,wBAyRE"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["thead.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;gCAWnB,UAAU;AAAjC,wBAsUE"}

package/esm/table/thead.js

@@ -10,6 +10,7 @@ import Icons from "../icons";
 import classNames from 'classnames';
 import Checkbox from "../checkbox";
 import { useConfig } from "../config";
+import { FilterSearch, FilterSelect } from "./thead-filter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -111,6 +112,34 @@ export default (function (props) {
       })
     });
   };
+  var renderFilter = function renderFilter(column, columnIndex) {
+    if (!column.filter) {
+      return null;
+    }
+    var mode = column.filter.mode;
+    var columnKey = typeof column.render === 'string' ? column.render : String(columnIndex);
+    if (mode === 'search') {
+      return /*#__PURE__*/_jsx(FilterSearch, {
+        tableClasses: tableClasses,
+        jssStyle: props.jssStyle,
+        filter: column.filter,
+        filterInfo: props.filterInfo,
+        onFilterChange: props.onFilterChange,
+        columnKey: columnKey
+      });
+    }
+    if (mode === 'select') {
+      return /*#__PURE__*/_jsx(FilterSelect, {
+        tableClasses: tableClasses,
+        jssStyle: props.jssStyle,
+        filter: column.filter,
+        filterInfo: props.filterInfo,
+        onFilterChange: props.onFilterChange,
+        columnKey: columnKey
+      });
+    }
+    return null;
+  };
   var renderDrag = function renderDrag(index) {
     if (!props.columnResizable) return null;
     return /*#__PURE__*/_jsx("div", {
@@ -164,7 +193,7 @@ export default (function (props) {
       position: 'sticky'
     };
   };
-  var createTh = function createTh(trs, col, level, isLast) {
+  var createTh = function createTh(trs, col, level, isLast, columnIndex) {
     var colTemp = col;
     var colTemp2 = col;
     var fixedStyle = getFixedStyle(col.fixed, col.index, colTemp2.colSpan || 1, level);
@@ -172,14 +201,15 @@ export default (function (props) {
     var isExpand = colTemp.type === 'expand' || colTemp.type === 'row-expand';
     if (colTemp.title || isExpand) {
       var sorter = renderSort(colTemp);
+      var filter = renderFilter(colTemp, columnIndex);
       trs[level].push( /*#__PURE__*/_jsx("th", {
         className: cellClassName,
         rowSpan: columnLevel - level + 1,
         style: fixedStyle,
         dir: config.direction,
         children: /*#__PURE__*/_jsxs("div", {
-          className: classNames(sorter && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.hasSorter)),
-          children: [renderTitle(colTemp.title), renderSort(colTemp), colTemp.columnResizable !== false && renderDrag(colTemp.index)]
+          className: classNames(sorter && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.hasSorter), filter && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.hasFilter)),
+          children: [renderTitle(colTemp.title), sorter, filter, colTemp.columnResizable !== false && renderDrag(colTemp.index)]
         })
       }, col.key));
       return;
@@ -229,7 +259,7 @@ export default (function (props) {
     }, colTemp2.key));
     if (colTemp2.columns) {
       colTemp2.columns.forEach(function (c, index) {
-        return createTh(trs, c, level + 1, isLast && colTemp2.columns.length - 1 === index);
+        return createTh(trs, c, level + 1, isLast && colTemp2.columns.length - 1 === index, index);
       });
     }
   };
@@ -241,7 +271,7 @@ export default (function (props) {
     });
     groupColumns.forEach(function (col, index) {
       var isLast = index === groupColumns.length - 1;
-      createTh(trs, col, 0, isLast);
+      createTh(trs, col, 0, isLast, index);
     });
     return trs.map(function (tr, i) {
       return /*#__PURE__*/_jsx("tr", {

package/esm/table/thead.type.d.ts

@@ -1,8 +1,8 @@
 import { TableProps, ListDatum } from './table.type';
-import { useTableSort, useTableLayout } from '@sheinx/hooks';
+import { useTableSort, useTableFilter, useTableLayout } from '@sheinx/hooks';
 import type { TableFormatColumn, OptionalToRequired } from '@sheinx/hooks';
 export type UseTableLayoutResultFunc = ReturnType<typeof useTableLayout>['func'];
-export interface TheadProps extends Pick<OptionalToRequired<TableProps<any, any>>, 'data' | 'jssStyle' | 'onColumnResize' | 'columnResizable' | 'showSelectAll' | 'renderSorter' | 'radio' | 'disabled' | 'treeCheckAll' | 'sortDirections'>, Pick<ReturnType<typeof useTableSort<any>>, 'sortInfo' | 'onSorterChange'>, Pick<UseTableLayoutResultFunc, 'dragCol' | 'resizeCol'> {
+export interface TheadProps extends Pick<OptionalToRequired<TableProps<any, any>>, 'data' | 'jssStyle' | 'onColumnResize' | 'columnResizable' | 'showSelectAll' | 'renderSorter' | 'radio' | 'disabled' | 'treeCheckAll' | 'sortDirections'>, Pick<ReturnType<typeof useTableSort<any>>, 'sortInfo' | 'onSorterChange'>, Pick<ReturnType<typeof useTableFilter<any>>, 'filterInfo' | 'onFilterChange'>, Pick<UseTableLayoutResultFunc, 'dragCol' | 'resizeCol'> {
     columns: TableFormatColumn<any>[];
     isScrollY?: boolean;
     bordered?: boolean;

package/esm/table/thead.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thead.type.d.ts","sourceRoot":"","sources":["thead.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjF,MAAM,WAAW,UACf,SAAQ,IAAI,CACR,kBAAkB,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EACtC,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,OAAO,GACP,UAAU,GACV,cAAc,GACd,gBAAgB,CACnB,EACD,IAAI,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC,EACzE,IAAI,CAAC,wBAAwB,EAAE,SAAS,GAAG,WAAW,CAAC;IACzD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC"}
+{"version":3,"file":"thead.type.d.ts","sourceRoot":"","sources":["thead.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjF,MAAM,WAAW,UACf,SAAQ,IAAI,CACR,kBAAkB,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EACtC,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,OAAO,GACP,UAAU,GACV,cAAc,GACd,gBAAgB,CACnB,EACD,IAAI,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC,EACzE,IAAI,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,gBAAgB,CAAC,EAC7E,IAAI,CAAC,wBAAwB,EAAE,SAAS,GAAG,WAAW,CAAC;IACzD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC"}

package/esm/table/tr.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TableFormatColumn } from '@sheinx/hooks';
 import { TbodyProps, UseTableRowResult } from './tbody.type';
 interface TrProps extends Pick<TbodyProps, 'jssStyle' | 'rowClassName' | 'datum' | 'treeFunc' | 'treeExpandLevel' | 'treeEmptyExpand' | 'expandIcon' | 'treeExpandIcon' | 'loader' | 'isEmptyTree' | 'setRowHeight' | 'fixLeftNum' | 'fixRightNum' | 'striped' | 'radio' | 'onRowClick' | 'rowClickAttr' | 'rowEvents' | 'bodyScrollWidth' | 'resizeFlag' | 'treeCheckAll' | 'onCellClick'> {
@@ -25,6 +24,6 @@ interface TrProps extends Pick<TbodyProps, 'jssStyle' | 'rowClassName' | 'datum'
     isSelect: boolean;
     disabled?: boolean;
 }
-declare const Tr: (props: TrProps) => JSX.Element;
+declare const Tr: (props: TrProps) => import("react/jsx-runtime").JSX.Element;
 export default Tr;
 //# sourceMappingURL=tr.d.ts.map

package/esm/table/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["tr.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOvD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAI7D,UAAU,OACR,SAAQ,IAAI,CACV,UAAU,EACR,UAAU,GACV,cAAc,GACd,OAAO,GACP,UAAU,GACV,iBAAiB,GACjB,iBAAiB,GACjB,YAAY,GACZ,gBAAgB,GAChB,QAAQ,GACR,aAAa,GACb,cAAc,GACd,YAAY,GACZ,aAAa,GACb,SAAS,GACT,OAAO,GACP,YAAY,GACZ,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,YAAY,GACZ,cAAc,GACd,aAAa,CAChB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,GAAG,EAAE,CAAC;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,OAAO,EAAE,GAAG,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,EAAE,UAAW,OAAO,gBA6ZzB,CAAC;AAEF,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["tr.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOvD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAI7D,UAAU,OACR,SAAQ,IAAI,CACV,UAAU,EACR,UAAU,GACV,cAAc,GACd,OAAO,GACP,UAAU,GACV,iBAAiB,GACjB,iBAAiB,GACjB,YAAY,GACZ,gBAAgB,GAChB,QAAQ,GACR,aAAa,GACb,cAAc,GACd,YAAY,GACZ,aAAa,GACb,SAAS,GACT,OAAO,GACP,YAAY,GACZ,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,YAAY,GACZ,cAAc,GACd,aAAa,CAChB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,GAAG,EAAE,CAAC;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,OAAO,EAAE,GAAG,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,EAAE,UAAW,OAAO,4CA6ZzB,CAAC;AAEF,eAAe,EAAE,CAAC"}

package/esm/tabs/tabs-header.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { TabsHeaderProps } from './tabs-header.type';
-declare const TabsHeader: (props: TabsHeaderProps) => JSX.Element;
+declare const TabsHeader: (props: TabsHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TabsHeader;
 //# sourceMappingURL=tabs-header.d.ts.map

package/esm/tabs/tabs-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBA4QzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,4CA4QzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/tabs/tabs-header.js

@@ -10,7 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTabsContext, useTransform, util } from '@sheinx/hooks';
 import Tab from "./tab";
@@ -125,7 +125,7 @@ var TabsHeader = function TabsHeader(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     currentTabRect = _useState4[0],
     setCurrentTabRect = _useState4[1];
-  useEffect(function () {
+  useLayoutEffect(function () {
     var _currentTab$getBoundi;
     if (shape !== 'line' && shape !== 'dash') return;
     var currentTab = tabRef.current[active];

package/esm/tabs/tabs-panel.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { TabsPanelProps } from './tabs-panel.type';
-declare const TabsPanel: (props: TabsPanelProps) => JSX.Element | null;
+declare const TabsPanel: (props: TabsPanelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TabsPanel;
 //# sourceMappingURL=tabs-panel.d.ts.map

package/esm/tabs/tabs-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["tabs-panel.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD,QAAA,MAAM,SAAS,UAAW,cAAc,uBAqEvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["tabs-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD,QAAA,MAAM,SAAS,UAAW,cAAc,mDAqEvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/tabs/tabs.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { TabsProps } from './tabs.type';
 import { TabsPanelProps } from './tabs-panel.type';
 declare const Tabs: {
-    (props: TabsProps): JSX.Element;
-    Panel: (props: TabsPanelProps) => JSX.Element | null;
+    (props: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Panel: (props: TabsPanelProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Tabs;
 //# sourceMappingURL=tabs.d.ts.map

package/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI;YAAW,SAAS;;CA4Q7B,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI;YAAW,SAAS;;CA4Q7B,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/esm/tag/tag-input.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { TagInputProps } from './tag.type';
-declare const TagInput: (props: TagInputProps) => JSX.Element;
+declare const TagInput: (props: TagInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TagInput;
 //# sourceMappingURL=tag-input.d.ts.map

package/esm/tag/tag-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-input.d.ts","sourceRoot":"","sources":["tag-input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvD,QAAA,MAAM,QAAQ,UAAW,aAAa,gBAwDrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tag-input.d.ts","sourceRoot":"","sources":["tag-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvD,QAAA,MAAM,QAAQ,UAAW,aAAa,4CAwDrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/tag/tag.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TagProps } from './tag.type';
 declare const Tag: {
-    (props: TagProps): JSX.Element | null;
-    Input: (props: import("./tag.type").BaseTagInputProps) => JSX.Element;
+    (props: TagProps): import("react/jsx-runtime").JSX.Element | null;
+    Input: (props: import("./tag.type").BaseTagInputProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Tag;
 //# sourceMappingURL=tag.d.ts.map

package/esm/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,YAAY,CAAC;AASlD,QAAA,MAAM,GAAG;YAAW,QAAQ;;CAqI3B,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,YAAY,CAAC;AASlD,QAAA,MAAM,GAAG;YAAW,QAAQ;;CAqI3B,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/esm/textarea/simple-textarea.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { SimpleTextareaProps } from './textarea.type';
-declare const Textarea: (props: SimpleTextareaProps) => JSX.Element;
+declare const Textarea: (props: SimpleTextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;
 //# sourceMappingURL=simple-textarea.d.ts.map

package/esm/textarea/simple-textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea.d.ts","sourceRoot":"","sources":["simple-textarea.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,QAAA,MAAM,QAAQ,UAAW,mBAAmB,gBAoF3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"simple-textarea.d.ts","sourceRoot":"","sources":["simple-textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAItD,QAAA,MAAM,QAAQ,UAAW,mBAAmB,4CA+G3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/textarea/simple-textarea.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["jssStyle", "className", "style", "status", "size", "prefix", "suffix", "underline", "autosize", "border", "resize", "onEnterPress", "getStatus", "renderTextarea"];
+var _excluded = ["jssStyle", "className", "style", "status", "size", "prefix", "suffix", "underline", "autosize", "border", "resize", "onEnterPress", "onStatusChange", "renderTextarea", "limit", "clearable"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,6 +11,7 @@ import { useKeyEvent, usePersistFn, useTextarea, util } from '@sheinx/hooks';
 import classNames from 'classnames';
 import React, { useContext, useEffect } from 'react';
 import { FormFieldContext } from "../form/form-field-context";
+import Icons from "../icons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Textarea = function Textarea(props) {
@@ -29,8 +30,10 @@ var Textarea = function Textarea(props) {
     _props$resize = props.resize,
     resize = _props$resize === void 0 ? false : _props$resize,
     _onEnterPress = props.onEnterPress,
-    getStatus = props.getStatus,
+    onStatusChange = props.onStatusChange,
     renderTextarea = props.renderTextarea,
+    limit = props.limit,
+    clearable = props.clearable,
     rest = _objectWithoutProperties(props, _excluded);
   var textareaClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$textarea = jssStyle.textarea) === null || _jssStyle$textarea === void 0 ? void 0 : _jssStyle$textarea.call(jssStyle);
   var _useTextarea = useTextarea(_objectSpread({}, rest)),
@@ -56,8 +59,8 @@ var Textarea = function Textarea(props) {
     onKeyUp: onKeyUp
   });
   useEffect(function () {
-    if (getStatus) {
-      getStatus({
+    if (onStatusChange) {
+      onStatusChange({
         focused: focused
       });
     }
@@ -66,13 +69,32 @@ var Textarea = function Textarea(props) {
   if (typeof renderTextarea === 'function') {
     textareaEl = renderTextarea(textareaEl);
   }
+  var limitEl = null;
+  if (limit) {
+    var _props$value;
+    limitEl = /*#__PURE__*/_jsx("div", {
+      className: textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.limit,
+      children: typeof limit === 'number' ? "".concat(((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) || 0, "/").concat(limit) : limit(props.value)
+    });
+  }
+  var clearEl = null;
+  if (clearable && props.value) {
+    clearEl = /*#__PURE__*/_jsx("div", {
+      className: textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.clear,
+      onClick: function onClick() {
+        var _props$onChange;
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, '');
+      },
+      children: Icons.textarea.Close
+    });
+  }
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread(_objectSpread({
     id: fieldId
   }, util.getDataAttribute(_defineProperty({}, 'input-border', 'true'))), getRootProps({
     className: rootClass,
     style: style
   })), {}, {
-    children: [prefix, textareaEl, suffix]
+    children: [prefix, textareaEl, suffix, limitEl, clearEl]
   }));
 };
 export default Textarea;

package/esm/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TextareaProps } from './textarea.type';
-declare const _default: React.MemoExoticComponent<(props0: TextareaProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props0: TextareaProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=textarea.d.ts.map

package/esm/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAmNhD,wBAAoC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AA6NhD,wBAAoC"}