@kep-platform/basic-component 0.0.25 → 0.0.27

package/dist/BoxShadowBox/BoxShadowBox.d.ts

@@ -4,5 +4,7 @@ export type BoxShadowBoxProps = {
     offsetLeft?: string;
     height: string;
 };
-declare const BoxShadowBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxShadowBoxProps>> & string;
+declare const BoxShadowBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, BoxShadowBoxProps>> & string;
 export default BoxShadowBox;

package/dist/BoxShadowBox/BoxShadowBox.js

@@ -1,5 +1,9 @@
 import styled from 'styled-components';
-var BoxShadowBox = styled.div.withConfig({
+var BoxShadowBox = styled('div').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['offsetLeft'].includes(prop);
+  }
+}).withConfig({
   displayName: "BoxShadowBox",
   componentId: "basic-component-347b__sc-18cvhyx-0"
 })(["z-index:", ";width:", ";box-shadow:var(--kep-platform-box-shadow-inset);background-color:transparent;position:absolute;top:0;left:", ";height:", ";transition:opacity 0.5s;"], function (props) {

package/dist/Columns/Columns.d.ts

@@ -1,4 +1,5 @@
 import React, { HtmlHTMLAttributes } from 'react';
+import { ListItemProps } from '../List/List';
 export declare const DefaultColumnWidth = 200;
 export type ColumnsProps = {
     columns: ColumnType[];
@@ -8,9 +9,12 @@ export type ColumnsProps = {
     leftBase?: number;
     columnsKey?: string;
 } & HtmlHTMLAttributes<HTMLUListElement>;
-export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, Omit<ColumnType, "render" | "dataIndex"> & {
+export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    key: React.Key;
+    title?: React.ReactNode;
+    index?: number | undefined;
+    itemRender?: ListItemRender | undefined;
+} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, Omit<ColumnType, "render" | "dataIndex"> & {
     key: React.Key;
     title?: React.ReactNode;
     index?: number | undefined;
@@ -18,8 +22,9 @@ export declare const Column: import("styled-components/dist/types").IStyledCompo
 } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title"> & {
     isFlex: boolean;
     bordered?: boolean | undefined;
+    focused?: boolean | undefined;
 } & {
     left?: string | undefined;
     right?: string | undefined;
-}>> & string;
+}>> & string & Omit<React.FC<ListItemProps>, keyof React.Component<any, {}, any>>;
 export default function Columns({ columns, rowData, rowIndex, isFlex, leftBase, columnsKey, ...columnsRestProps }: ColumnsProps): React.JSX.Element;

package/dist/Columns/Columns.js

@@ -10,7 +10,7 @@ export var DefaultColumnWidth = 200;
 //如果是flex模式的话，就不使用宽度来控制，而是直接交给flex布局
 var ColumnList = styled(List).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['widthSum', 'isFlex'].includes(prop);
+    return !['widthSum', 'bordered', 'isFlex', 'rowIndex'].includes(prop);
   }
 }).withConfig({
   displayName: "ColumnList",
@@ -24,7 +24,7 @@ var ColumnList = styled(List).withConfig({
 });
 export var Column = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['width', 'isFlex', 'border'].includes(prop);
+    return !['width', 'isFlex', 'bordered', 'hideInTable', 'filter', 'sorter', 'rowIndex', 'focused'].includes(prop);
   }
 }).withConfig({
   displayName: "Column",
@@ -52,6 +52,9 @@ export var Column = styled(ListItem).withConfig({
   if (props.fixed === 'right' && !props.isFlex) {
     return css(["right:", ";z-index:var(--kep-platform-z-index-fixed) - 1;"], props.right);
   }
+  if (props.focused) {
+    return css(["z-index:20 !important;"]);
+  }
 });
 var displayColumnsCache = {};
 export default function Columns(_ref) {

package/dist/Input/Input.d.ts

@@ -0,0 +1,6 @@
+import React, { HtmlHTMLAttributes } from 'react';
+export type InputProps = Omit<HtmlHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    value?: string;
+    onChange?: (value: string) => void;
+};
+export default function Input(props: InputProps): React.JSX.Element;

package/dist/Input/Input.js

@@ -0,0 +1,21 @@
+var _excluded = ["value", "onChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import styled from 'styled-components';
+var StyledInput = styled.input.withConfig({
+  displayName: "StyledInput",
+  componentId: "basic-component-347b__sc-ojuww7-0"
+})(["outline:none;box-shadow:none;border:1px solid var(--kep-platform-color-border);border-radius:var(--kep-platform-border-radius-sm);&:hover{border-color:var(--kep-platform-color-primary);}"]);
+export default function Input(props) {
+  var value = props.value,
+    _onChange = props.onChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    value: value,
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 || _onChange(e.target.value);
+    }
+  }));
+}

package/dist/Input/index.d.ts

@@ -0,0 +1 @@
+export { default as Input, type InputProps } from './Input';

package/dist/Input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input";

package/dist/List/List.d.ts

@@ -14,6 +14,16 @@ export type ListItemProps = {
     index?: number;
     itemRender?: ListItemRender;
 } & Omit<HtmlHTMLAttributes<HTMLLIElement>, 'title'>;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const StyledLi: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, {
+    key: Key;
+    title?: ReactNode;
+    index?: number | undefined;
+    itemRender?: ListItemRender | undefined;
+} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title"> & {
+    focused: boolean;
+}>> & string;
+export declare const ListItem: React.FC<ListItemProps>;
 declare const List: React.FC<ListProps>;
 export default List;

package/dist/List/List.js

@@ -1,10 +1,18 @@
-var _excluded = ["items", "direction", "itemRender", "children"],
-  _excluded2 = ["key", "title"];
+var _excluded = ["onClick"],
+  _excluded2 = ["items", "direction", "itemRender", "children"],
+  _excluded3 = ["key", "title"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from 'react';
-import styled from 'styled-components';
+import { useClickOutsize } from '@kep-platform/hooks';
+import React, { useCallback, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
 
 //因为UL自带有title属性
 
@@ -14,10 +22,40 @@ var StyledUL = styled.ul.withConfig({
 })(["display:flex;flex-direction:", ";"], function (props) {
   return props.direction || 'row';
 });
-export var ListItem = styled.li.withConfig({
-  displayName: "ListItem",
+export var StyledLi = styled('li').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['focused'].includes(prop);
+  }
+}).withConfig({
+  displayName: "StyledLi",
   componentId: "basic-component-347b__sc-1ombcxm-1"
-})(["flex:0 0 auto;"]);
+})(["flex:0 0 auto;", ""], function (props) {
+  if (props.focused) {
+    return css(["z-index:20 !important;"]);
+  }
+});
+export var ListItem = function ListItem(props) {
+  var onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var onClickHandler = useCallback(function (e) {
+    onClick === null || onClick === void 0 || onClick(e);
+    setFocused(true);
+  }, [onClick, setFocused]);
+  useClickOutsize('click', ref, function () {
+    setFocused(false);
+  });
+  return /*#__PURE__*/React.createElement(StyledLi, _extends({}, rest, {
+    title: "li",
+    focused: focused,
+    onClick: onClickHandler,
+    ref: ref
+  }));
+};
 
 /* 理论上来说所有list相关的数据结构都应该交给List组件来完成,但是List组件只处理List结构不处理任何其他样式问题 */
 var List = function List(_ref) {
@@ -26,13 +64,13 @@ var List = function List(_ref) {
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     itemRender = _ref.itemRender,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded2);
   return /*#__PURE__*/React.createElement(StyledUL, _extends({
     direction: direction
   }, rest), items && Array.isArray(items) ? items.map(function (item, index) {
     var key = item.key,
       title = item.title,
-      rest = _objectWithoutProperties(item, _excluded2);
+      rest = _objectWithoutProperties(item, _excluded3);
     return /*#__PURE__*/React.createElement(ListItem, _extends({
       key: key
     }, rest), itemRender ? itemRender(item, index) : title);

package/dist/Menu/Menu.js

@@ -17,6 +17,10 @@ var MenuList = styled(List).withConfig({
   componentId: "basic-component-347b__sc-d665dh-0"
 })([""]);
 var MenuListItem = styled(ListItem).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['active'].includes(prop);
+  }
+}).withConfig({
   displayName: "MenuListItem",
   componentId: "basic-component-347b__sc-d665dh-1"
 })(["background-color:var(--kep-platform-color-bg-base);border-radius:var(--kep-platform-border-radius-sm);margin:var(--kep-platform-margin-xxxs);padding:0 var(--kep-platform-padding-xs);height:var(--kep-platform-menu-item-height);line-height:var(--kep-platform-menu-item-line-height);color:var(--kep-platform-color-text) !important;&:hover{background-color:var(--kep-platform-color-bg-hover);}", ""], function (props) {

package/dist/PopupBox/PopupBox.d.ts

@@ -17,5 +17,5 @@ export declare function Popup(props: {
     trigger?: TriggerType;
     content?: ReactNode;
     onVisibleChange?: (visible: boolean) => void;
-}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+}): React.JSX.Element | undefined;
 export default PopupBox;

package/dist/PopupBox/PopupBox.js

@@ -6,7 +6,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useClickOutsize } from '@kep-platform/hooks';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import styled, { css } from 'styled-components';
 var PopupBox = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -18,8 +17,6 @@ var PopupBox = styled('div').withConfig({
 })(["background-color:var(--kep-platform-color-bg-base);padding:var(--kep-platform-padding-xs);border-radius:var(--kep-platform-border-radius-sm);position:fixed;box-shadow:var(--kep-platform-box-shadow);z-index:999;", ";"], function (props) {
   if (props.visible) return css(["left:", "px;top:", "px;"], props.left || -999, props.top || -999);else return css(["left:-9999px;top:-9999px;"]);
 });
-var dom;
-var root;
 export function Popup(props) {
   var children = props.children,
     _props$trigger = props.trigger,
@@ -73,21 +70,13 @@ export function Popup(props) {
   useEffect(function () {
     if (typeof outerVisible === 'boolean') setVisible(outerVisible);
   }, [outerVisible]);
-  useEffect(function () {
-    if (!root) {
-      dom = document.createElement('div');
-      document.body.appendChild(dom);
-      root = createRoot(dom);
-    }
-    root.render( /*#__PURE__*/React.createElement(PopupBox, {
+  if ( /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupBox, {
       left: pos.left,
       top: pos.top,
       visible: visible,
       ref: popupBox
-    }, content));
-  }, [visible, content]);
-  if ( /*#__PURE__*/React.isValidElement(children)) {
-    return /*#__PURE__*/React.cloneElement(children, mergeProps);
+    }, content), /*#__PURE__*/React.cloneElement(children, mergeProps));
   } else console.warn('PopupMenu需要一个触发元素!');
 }
 export default PopupBox;

package/dist/Select/Select.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { ListItemProps } from '../List/List';
 export type SelectOption = {
     label: ReactNode;
     value: string;
@@ -10,4 +11,16 @@ export type SelectProps = {
     onChange?: (value: string) => void;
     children?: ReactNode;
 };
-export default function Select(props: SelectProps): React.JSX.Element;
+type SelectListItemProps = ListItemProps & {
+    active?: boolean;
+};
+declare function Select(props: SelectProps): React.JSX.Element;
+declare namespace Select {
+    var Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+        key: React.Key;
+        title?: React.ReactNode;
+        index?: number | undefined;
+        itemRender?: ListItemRender | undefined;
+    } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, SelectListItemProps>> & string & Omit<React.FC<ListItemProps>, keyof React.Component<any, {}, any>>;
+}
+export default Select;

package/dist/Select/Select.js

@@ -21,7 +21,11 @@ var SelectInput = styled.input.withConfig({
   componentId: "basic-component-347b__sc-z3izsh-2"
 })(["border-width:0;"]);
 var fadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-var SelectPannel = styled.div.withConfig({
+var SelectPannel = styled('div').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['visible'].includes(prop);
+  }
+}).withConfig({
   displayName: "SelectPannel",
   componentId: "basic-component-347b__sc-z3izsh-3"
 })(["position:absolute;left:0;top:40px;width:100%;box-shadow:var(--kep-platform-box-shadow);border-radius:var(--kep-platform-border-radius);z-index:var(--kep-platform-z-index-popup-base);", ""], function (props) {
@@ -36,6 +40,10 @@ var SelectList = styled(List).withConfig({
   componentId: "basic-component-347b__sc-z3izsh-4"
 })([""]);
 var SelectListItem = styled(ListItem).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['active'].includes(prop);
+  }
+}).withConfig({
   displayName: "SelectListItem",
   componentId: "basic-component-347b__sc-z3izsh-5"
 })(["background-color:var(--kep-platform-color-bg-base);border-radius:var(--kep-platform-border-radius-sm);margin:var(--kep-platform-margin-xxxs);padding:0 var(--kep-platform-padding-xs);height:var(--kep-platform-menu-item-height);line-height:var(--kep-platform-menu-item-line-height);&:hover{background-color:var(--kep-platform-color-bg-hover);}", ""], function (props) {
@@ -83,7 +91,7 @@ export default function Select(props) {
   });
   var selectItems = useMemo(function () {
     if (options) {
-      return options === null || options === void 0 ? void 0 : options.map(function (option) {
+      return options.map(function (option) {
         return /*#__PURE__*/React.createElement(SelectListItem, {
           key: option.value,
           active: option.value === mergeValue,
@@ -93,7 +101,7 @@ export default function Select(props) {
       });
     } else {
       return React.Children.map(children, function (child) {
-        return /*#__PURE__*/React.createElement(SelectListItem, {
+        if ( /*#__PURE__*/React.isValidElement(child)) return /*#__PURE__*/React.createElement(SelectListItem, {
           key: child.props.value,
           "data-key": child.props.value,
           active: child.props.value === mergeValue,
@@ -118,4 +126,5 @@ export default function Select(props) {
   }, /*#__PURE__*/React.createElement(SelectList, {
     direction: "column"
   }, selectItems)));
-}
+}
+Select.Option = SelectListItem;

package/dist/Spin/Spin.js

@@ -5,10 +5,14 @@ var SpinContainer = styled.div.withConfig({
   displayName: "SpinContainer",
   componentId: "basic-component-347b__sc-1s1g2fa-0"
 })(["position:relative;"]);
-var SpinMark = styled.div.withConfig({
+var SpinMark = styled('div').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['spinning'].includes(prop);
+  }
+}).withConfig({
   displayName: "SpinMark",
   componentId: "basic-component-347b__sc-1s1g2fa-1"
-})(["position:absolute;inset:0 0 0 0;background-color:rgba(255,255,255,0.5);display:flex;justify-content:center;align-items:center;color:var(--kep-platform-color-primary);box-shadow:var(--kep-platform-box-shadow-mask);"]);
+})(["position:absolute;inset:0 0 0 0;background-color:rgba(255,255,255,0.706);display:flex;justify-content:center;align-items:center;color:var(--kep-platform-color-primary);"]);
 export default function Spin(props) {
   return /*#__PURE__*/React.createElement(SpinContainer, null, props.children, /*#__PURE__*/React.createElement(SpinMark, {
     spinning: props.spinning,

package/dist/Table/Table.js

@@ -27,6 +27,7 @@ import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
 import { DefaultColumnWidth } from "../Columns/Columns";
 import { Col, Row } from "../Grid";
+import { Input } from "../Input";
 import { List, ListItem } from "../List";
 import { Pagination } from "../Pagination";
 import { Popup } from "../PopupBox";
@@ -52,6 +53,10 @@ var TableBody = styled(List).withConfig({
   componentId: "basic-component-347b__sc-12r61fm-4"
 })([""]);
 var TableBodyRow = styled(ListItem).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['isActive'].includes(prop);
+  }
+}).withConfig({
   displayName: "TableBodyRow",
   componentId: "basic-component-347b__sc-12r61fm-5"
 })(["& ", "{", "}"], Column, function (props) {
@@ -73,6 +78,10 @@ var SortIconList = styled(List).withConfig({
   componentId: "basic-component-347b__sc-12r61fm-7"
 })([""]);
 var SortIconListItem = styled(ListItem).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['active'].includes(prop);
+  }
+}).withConfig({
   displayName: "SortIconListItem",
   componentId: "basic-component-347b__sc-12r61fm-8"
 })(["height:10px;line-height:10px;font-size:10px;cursor:pointer;user-select:none;color:", ";"], function (props) {
@@ -99,8 +108,10 @@ var SortIconGroup = function SortIconGroup(_ref) {
     onClick: onSortIconGroupClickHandler,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(SortIconListItem, {
+    key: "asc",
     active: sorter === 'asc'
   }, /*#__PURE__*/React.createElement(CaretUpOutlined, null)), /*#__PURE__*/React.createElement(SortIconListItem, {
+    key: "desc",
     active: sorter === 'desc'
   }, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
 };
@@ -111,7 +122,7 @@ var ColumnTitle = styled.div.withConfig({
 var FilterValue = styled.span.withConfig({
   displayName: "FilterValue",
   componentId: "basic-component-347b__sc-12r61fm-10"
-})(["color:var(--kep-platform-color-primary);cursor:pointer;"]);
+})(["color:var(--kep-platform-color-primary);cursor:pointer;padding:var(--kep-platform-padding-xxs);border-radius:var(--kep-platform-border-radius-sm);&:hover{background-color:var(--kep-platform-color-bg-active);}"]);
 var ColumnTitleController = function ColumnTitleController(_ref2) {
   var onSorterChange = _ref2.onSorterChange,
     title = _ref2.title,
@@ -130,10 +141,10 @@ var ColumnTitleController = function ColumnTitleController(_ref2) {
     onSorterChange: onSorterChange,
     hidden: !hasSorter
   }), hasFilter && /*#__PURE__*/React.createElement(Popup, {
-    content: /*#__PURE__*/React.createElement("input", {
-      value: filterValue,
-      onChange: function onChange(e) {
-        onFilterValueChange === null || onFilterValueChange === void 0 || onFilterValueChange(e.target.value);
+    content: /*#__PURE__*/React.createElement(Input, {
+      value: filterValue || '',
+      onChange: function onChange(value) {
+        onFilterValueChange === null || onFilterValueChange === void 0 || onFilterValueChange(value);
       }
     })
   }, filter)));
@@ -348,7 +359,6 @@ export default function Table(_ref3) {
     formatedDataSource = filterTableRows(formatedDataSource, filterValues);
     return formatedDataSource;
   }, [sorterController, dataSource, formatedColumns, pagination, filterValues]);
-  console.log(filterValues);
   return /*#__PURE__*/React.createElement(TableContainer, null, (title || actions) && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     span: 8
   }, /*#__PURE__*/React.createElement(TableTitle, null, title)), /*#__PURE__*/React.createElement(Col, {

package/dist/Tree/Tree.js

@@ -10,7 +10,11 @@ import { DefaultColumnWidth } from "../Columns/Columns";
 import { List } from "../List";
 import { MainArea, MainProperty } from "./MainProperties";
 import { TreeNodeController, nodeTypeMap } from "./TreeNode";
-var TreeContainer = styled.div.withConfig({
+var TreeContainer = styled('div').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['bordered'].includes(prop);
+  }
+}).withConfig({
   displayName: "TreeContainer",
   componentId: "basic-component-347b__sc-n4lkq9-0"
 })(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
@@ -20,7 +24,11 @@ var TreeBody = styled(List).withConfig({
   displayName: "TreeBody",
   componentId: "basic-component-347b__sc-n4lkq9-1"
 })([""]);
-var TreeHeader = styled.div.withConfig({
+var TreeHeader = styled('div').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['width', 'isFlex'].includes(prop);
+  }
+}).withConfig({
   displayName: "TreeHeader",
   componentId: "basic-component-347b__sc-n4lkq9-2"
 })(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {

package/dist/Tree/TreeNode.js

@@ -14,6 +14,10 @@ import { ListItem } from "../List";
 import { Menu } from "../Menu";
 import { MainArea, MainProperty } from "./MainProperties";
 var ExpandedIcon = styled(CaretRightOutlined).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['expanded'].includes(prop);
+  }
+}).withConfig({
   displayName: "ExpandedIcon",
   componentId: "basic-component-347b__sc-tzoomn-0"
 })(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
@@ -204,6 +208,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
     })
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, node.nodeType !== nodeTypeMap.virtual && /*#__PURE__*/React.createElement(TreeNode, {
+    key: node[fieldNames.key],
     selected: selectedKeys.includes(node[fieldNames.key]),
     width: width,
     onClick: onClickNodeHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "A react library developed with dumi",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -74,10 +74,10 @@
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
   },
-  "gitHead": "15bc8e6e9752eafbab1fa1af313274e2d71236ed",
+  "gitHead": "e15c151ba5b1e41e42047a5b438620cf13c9c1bc",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@kep-platform/hooks": "^0.0.25",
+    "@kep-platform/hooks": "^0.0.27",
     "color": "^4.2.3",
     "rc-pagination": "^4.1.0",
     "styled-components": "^6.1.11"