@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/es/components/FlameGraph/index.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { flamegraph } from 'd3-flame-graph';
+import * as d3 from 'd3';
+import 'd3-flame-graph/dist/d3-flamegraph.css';
+import { defaultFlamegraphTooltip } from './customTooltip';
+import { SDK_PREFIX } from '../../constants/style';
+var CELL_HEIGHT = 24;
+var MIN_HEIGHT = 300;
+var DEFAULT_OPACITY = 0.8;
+var FlameGraph = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height, depth = _a.depth, searchFilters = _a.searchFilters;
+    var flameGraphRef = useRef(null);
+    var flameGraphInstance = useRef(null); // 存储 flamegraph 实例
+    var svgRef = useRef(null); // 存储 flamegraph 实例
+    var currentNodeRef = useRef(null);
+    var colorFunction = function (d) {
+        return d.data.color;
+    };
+    var flameHeight = useMemo(function () {
+        if (height)
+            return height;
+        if (depth) {
+            return depth * CELL_HEIGHT;
+        }
+        return MIN_HEIGHT;
+    }, [height, depth]);
+    useEffect(function () {
+        if (flameGraphInstance.current && svgRef.current) {
+            flameGraphInstance.current.width(width).height(flameHeight);
+            svgRef.current
+                .select('svg')
+                .attr('width', width)
+                .attr('height', flameHeight);
+        }
+    }, [width, flameHeight]);
+    useEffect(function () {
+        if (!data || !flameGraphRef.current)
+            return;
+        if (!flameGraphInstance.current) {
+            var flame = flamegraph()
+                .width(width)
+                .height(flameHeight)
+                .cellHeight(CELL_HEIGHT)
+                .transitionDuration(750)
+                .inverted(true);
+            var tip = defaultFlamegraphTooltip();
+            flame.tooltip(tip);
+            flame.setColorMapper(colorFunction);
+            flame.onClick(function (d) {
+                var preCurrentNode = currentNodeRef.current;
+                if (preCurrentNode && d === preCurrentNode) {
+                    // 如果点击的是当前节点，回调到root）
+                    if (preCurrentNode.parent) {
+                        flameGraphInstance.current.resetZoom();
+                    }
+                }
+                else {
+                    // 否则，进入子节点
+                    currentNodeRef.current = d;
+                }
+            });
+            flameGraphInstance.current = flame;
+        }
+        // 渲染火焰图到指定的 DOM 元素
+        svgRef.current = d3
+            .select(flameGraphRef.current)
+            .datum(data)
+            .call(flameGraphInstance.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+    useEffect(function () {
+        if (svgRef.current && searchFilters) {
+            svgRef.current.selectAll('rect').style('opacity', function (d) {
+                // 清空选中的值后，图名都需要恢复
+                if (searchFilters.length === 0)
+                    return DEFAULT_OPACITY;
+                var matchCount = 0;
+                searchFilters.forEach(function (item) {
+                    if (item.field === 'method' && d.data.name === item.value[0]) {
+                        matchCount += 1;
+                    }
+                    else if (item.field === 'file' &&
+                        d.data.source.file === item.value[0]) {
+                        matchCount += 1;
+                    }
+                });
+                if (matchCount === searchFilters.length) {
+                    return DEFAULT_OPACITY;
+                }
+                return 0.2;
+            });
+        }
+    }, [searchFilters]);
+    return (React.createElement("div", { ref: flameGraphRef, className: SDK_PREFIX + "-flame-graph-wrapper" }));
+};
+export default FlameGraph;

package/es/components/FlameGraph/style.css

@@ -0,0 +1,8 @@
+.pandora-sdk-flame-graph-wrapper :global .d3-flame-graph-label {
+  padding: 4px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  cursor: pointer;
+  overflow: hidden;
+}

package/es/components/FlameGraph/style.less

@@ -0,0 +1,14 @@
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-flame-graph-wrapper {
+  :global {
+    .d3-flame-graph-label {
+      padding: 4px 8px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 11px;
+      cursor: pointer;
+      overflow: hidden;
+    }
+  }
+}

package/es/components/Input/index.d.ts

@@ -6,7 +6,7 @@ export declare type TInputProps = Omit<InputProps, 'value' | 'onChange'> & {
 };
 declare function Input(props: TInputProps): React.JSX.Element;
 declare namespace Input {
-    var DebounceInput: (props: Pick<InputProps, "type" | "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "list" | "step" | "size" | "prefixCls" | "pattern" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "onPressEnter" | "addonBefore" | "addonAfter" | "suffix" | "allowClear" | "bordered" | "htmlSize"> & {
+    var DebounceInput: (props: Pick<InputProps, "type" | "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "list" | "status" | "step" | "size" | "prefixCls" | "pattern" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "onPressEnter" | "showCount" | "htmlSize" | "suffix" | "addonBefore" | "addonAfter" | "allowClear" | "bordered"> & {
         value?: string | undefined;
         onChange?: ((value: string) => void) | undefined;
     } & {

package/es/components/Input/style.css

@@ -17,19 +17,20 @@
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
-  /* stylelint-disable-next-line selector-no-vendor-prefix */
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
-.ant-input-affix-wrapper::-moz-placeholder {
-  opacity: 1;
-}
 .ant-input-affix-wrapper::-webkit-input-placeholder {
   color: #bfbfbf;
   -webkit-user-select: none;
           user-select: none;
 }
+.ant-input-affix-wrapper::-moz-placeholder {
+  color: #bfbfbf;
+  -moz-user-select: none;
+       user-select: none;
+}
 .ant-input-affix-wrapper::-ms-input-placeholder {
   color: #bfbfbf;
   -ms-user-select: none;
@@ -46,8 +47,8 @@
   text-overflow: ellipsis;
 }
 .ant-input-affix-wrapper:hover {
-  border-color: #2c6dd2;
-  border-right-width: 1px !important;
+  border-color: #436bff;
+  border-right-width: 1px;
 }
 .ant-input-rtl .ant-input-affix-wrapper:hover {
   border-right-width: 0;
@@ -55,10 +56,10 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  border-color: #9ca0a6;
-  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-  border-right-width: 1px !important;
+  border-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+  border-right-width: 1px;
   outline: 0;
 }
 .ant-input-rtl .ant-input-affix-wrapper:focus,
@@ -77,7 +78,7 @@
 }
 .ant-input-affix-wrapper-disabled:hover {
   border-color: #bfbfbf;
-  border-right-width: 1px !important;
+  border-right-width: 1px;
 }
 .ant-input-affix-wrapper[disabled] {
   color: rgba(0, 0, 0, 0.25);
@@ -90,7 +91,7 @@
 }
 .ant-input-affix-wrapper[disabled]:hover {
   border-color: #bfbfbf;
-  border-right-width: 1px !important;
+  border-right-width: 1px;
 }
 .ant-input-affix-wrapper-borderless,
 .ant-input-affix-wrapper-borderless:hover,
@@ -123,8 +124,8 @@ textarea.ant-input-affix-wrapper {
   direction: rtl;
 }
 .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-  border-color: #2c6dd2;
-  border-right-width: 1px !important;
+  border-color: #436bff;
+  border-right-width: 1px;
   z-index: 1;
 }
 .ant-input-rtl .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
@@ -139,18 +140,22 @@ textarea.ant-input-affix-wrapper {
   z-index: 1;
 }
 .ant-input-affix-wrapper-disabled .ant-input[disabled] {
-  background: transparent;
+  background: rgba(255, 255, 255, 0);
 }
-.ant-input-affix-wrapper > input.ant-input {
-  padding: 0;
+.ant-input-affix-wrapper > .ant-input {
+  font-size: inherit;
   border: none;
   outline: none;
 }
-.ant-input-affix-wrapper > input.ant-input:focus {
+.ant-input-affix-wrapper > .ant-input:focus {
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
+.ant-input-affix-wrapper > .ant-input:not(textarea) {
+  padding: 0;
+}
 .ant-input-affix-wrapper::before {
+  display: inline-block;
   width: 0;
   visibility: hidden;
   content: '\a0';
@@ -167,13 +172,24 @@ textarea.ant-input-affix-wrapper {
       -ms-flex-align: center;
           align-items: center;
 }
+.ant-input-prefix > *:not(:last-child),
+.ant-input-suffix > *:not(:last-child) {
+  margin-right: 8px;
+}
+.ant-input-show-count-suffix {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-show-count-has-suffix {
+  margin-right: 2px;
+}
 .ant-input-prefix {
   margin-right: 4px;
 }
 .ant-input-suffix {
   margin-left: 4px;
 }
-.anticon.ant-input-clear-icon {
+.anticon.ant-input-clear-icon,
+.ant-input-clear-icon {
   margin: 0;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
@@ -182,28 +198,109 @@ textarea.ant-input-affix-wrapper {
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
-.anticon.ant-input-clear-icon:hover {
+.anticon.ant-input-clear-icon:hover,
+.ant-input-clear-icon:hover {
   color: rgba(0, 0, 0, 0.45);
 }
-.anticon.ant-input-clear-icon:active {
+.anticon.ant-input-clear-icon:active,
+.ant-input-clear-icon:active {
   color: rgba(0, 0, 0, 0.65);
 }
-.anticon.ant-input-clear-icon-hidden {
+.anticon.ant-input-clear-icon-hidden,
+.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.anticon.ant-input-clear-icon-has-suffix {
+.anticon.ant-input-clear-icon-has-suffix,
+.ant-input-clear-icon-has-suffix {
   margin: 0 4px;
 }
-.ant-input-affix-wrapper-textarea-with-clear-btn {
-  padding: 0 !important;
-  border: 0 !important;
+.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea-with-clear-btn {
+  padding: 0;
 }
-.ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-clear-icon {
+.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-clear-icon {
   position: absolute;
   top: 8px;
   right: 8px;
   z-index: 1;
 }
+.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {
+  background: transparent;
+  border-color: #f5222d;
+}
+.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,
+.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused {
+  border-color: #ff4d4f;
+  -webkit-box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+          box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-input-status-error .ant-input-prefix {
+  color: #f5222d;
+}
+.ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+.ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {
+  background: transparent;
+  border-color: #f0a818;
+}
+.ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,
+.ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused {
+  border-color: #fcc442;
+  -webkit-box-shadow: 0 0 0 2px rgba(240, 168, 24, 0.2);
+          box-shadow: 0 0 0 2px rgba(240, 168, 24, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-input-status-warning .ant-input-prefix {
+  color: #f0a818;
+}
+.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
+  background: transparent;
+  border-color: #f5222d;
+}
+.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus,
+.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused {
+  border-color: #ff4d4f;
+  -webkit-box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+          box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-input-affix-wrapper-status-error .ant-input-prefix {
+  color: #f5222d;
+}
+.ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+.ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
+  background: transparent;
+  border-color: #f0a818;
+}
+.ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus,
+.ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused {
+  border-color: #fcc442;
+  -webkit-box-shadow: 0 0 0 2px rgba(240, 168, 24, 0.2);
+          box-shadow: 0 0 0 2px rgba(240, 168, 24, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-input-affix-wrapper-status-warning .ant-input-prefix {
+  color: #f0a818;
+}
+.ant-input-textarea-status-error.ant-input-textarea-has-feedback .ant-input,
+.ant-input-textarea-status-warning.ant-input-textarea-has-feedback .ant-input,
+.ant-input-textarea-status-success.ant-input-textarea-has-feedback .ant-input,
+.ant-input-textarea-status-validating.ant-input-textarea-has-feedback .ant-input {
+  padding-right: 24px;
+}
+.ant-input-group-wrapper-status-error .ant-input-group-addon {
+  color: #f5222d;
+  border-color: #f5222d;
+}
+.ant-input-group-wrapper-status-warning .ant-input-group-addon {
+  color: #f0a818;
+  border-color: #f0a818;
+}
 .ant-input {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -228,16 +325,17 @@ textarea.ant-input-affix-wrapper {
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
-  /* stylelint-disable-next-line selector-no-vendor-prefix */
-}
-.ant-input::-moz-placeholder {
-  opacity: 1;
 }
 .ant-input::-webkit-input-placeholder {
   color: #bfbfbf;
   -webkit-user-select: none;
           user-select: none;
 }
+.ant-input::-moz-placeholder {
+  color: #bfbfbf;
+  -moz-user-select: none;
+       user-select: none;
+}
 .ant-input::-ms-input-placeholder {
   color: #bfbfbf;
   -ms-user-select: none;
@@ -254,8 +352,8 @@ textarea.ant-input-affix-wrapper {
   text-overflow: ellipsis;
 }
 .ant-input:hover {
-  border-color: #2c6dd2;
-  border-right-width: 1px !important;
+  border-color: #436bff;
+  border-right-width: 1px;
 }
 .ant-input-rtl .ant-input:hover {
   border-right-width: 0;
@@ -263,10 +361,10 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #9ca0a6;
-  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-  border-right-width: 1px !important;
+  border-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+  border-right-width: 1px;
   outline: 0;
 }
 .ant-input-rtl .ant-input:focus,
@@ -285,7 +383,7 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input-disabled:hover {
   border-color: #bfbfbf;
-  border-right-width: 1px !important;
+  border-right-width: 1px;
 }
 .ant-input[disabled] {
   color: rgba(0, 0, 0, 0.25);
@@ -298,7 +396,7 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input[disabled]:hover {
   border-color: #bfbfbf;
-  border-right-width: 1px !important;
+  border-right-width: 1px;
 }
 .ant-input-borderless,
 .ant-input-borderless:hover,
@@ -419,7 +517,7 @@ textarea.ant-input {
 }
 .ant-input-group-addon .ant-select-open .ant-select-selector,
 .ant-input-group-addon .ant-select-focused .ant-select-selector {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-input-group-addon .ant-cascader-picker {
   margin: -9px -12px;
@@ -526,11 +624,8 @@ textarea.ant-input {
   vertical-align: top;
   border-radius: 0;
 }
-.ant-input-group.ant-input-group-compact > .ant-input-affix-wrapper {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
+.ant-input-group.ant-input-group-compact > .ant-input-affix-wrapper,
+.ant-input-group.ant-input-group-compact > .ant-input-number-affix-wrapper,
 .ant-input-group.ant-input-group-compact > .ant-picker-range {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -609,6 +704,7 @@ textarea.ant-input {
 .ant-input-group-rtl .ant-input-group-addon:last-child {
   border-right: 0;
   border-left: 1px solid #bfbfbf;
+  border-radius: 2px 0 0 2px;
 }
 .ant-input-group-rtl.ant-input-group > .ant-input:last-child,
 .ant-input-group-rtl.ant-input-group-addon:last-child {
@@ -652,13 +748,13 @@ textarea.ant-input {
   text-align: start;
   vertical-align: top;
 }
-.ant-input-password-icon {
+.ant-input-password-icon.anticon {
   color: rgba(0, 0, 0, 0.45);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.ant-input-password-icon:hover {
+.ant-input-password-icon.anticon:hover {
   color: rgba(0, 0, 0, 0.85);
 }
 .ant-input[type='color'] {
@@ -672,6 +768,9 @@ textarea.ant-input {
   padding-top: 3px;
   padding-bottom: 3px;
 }
+.ant-input-textarea-show-count > .ant-input {
+  height: 100%;
+}
 .ant-input-textarea-show-count::after {
   float: right;
   color: rgba(0, 0, 0, 0.45);
@@ -679,13 +778,63 @@ textarea.ant-input {
   content: attr(data-count);
   pointer-events: none;
 }
+.ant-input-textarea-show-count.ant-input-textarea-in-form-item::after {
+  margin-bottom: -22px;
+}
+.ant-input-textarea-suffix {
+  position: absolute;
+  top: 0;
+  right: 11px;
+  bottom: 0;
+  z-index: 1;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: auto;
+}
+.ant-input-compact-item:not(.ant-input-compact-last-item):not(.ant-input-compact-item-rtl) {
+  margin-right: -1px;
+}
+.ant-input-compact-item:not(.ant-input-compact-last-item).ant-input-compact-item-rtl {
+  margin-left: -1px;
+}
+.ant-input-compact-item:hover,
+.ant-input-compact-item:focus,
+.ant-input-compact-item:active {
+  z-index: 2;
+}
+.ant-input-compact-item[disabled] {
+  z-index: 0;
+}
+.ant-input-compact-item:not(.ant-input-compact-first-item):not(.ant-input-compact-last-item).ant-input {
+  border-radius: 0;
+}
+.ant-input-compact-item.ant-input.ant-input-compact-first-item:not(.ant-input-compact-last-item):not(.ant-input-compact-item-rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ant-input-compact-item.ant-input.ant-input-compact-last-item:not(.ant-input-compact-first-item):not(.ant-input-compact-item-rtl) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-compact-item.ant-input.ant-input-compact-item-rtl.ant-input-compact-first-item:not(.ant-input-compact-last-item) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-compact-item.ant-input.ant-input-compact-item-rtl.ant-input-compact-last-item:not(.ant-input-compact-first-item) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .ant-input-search .ant-input:hover,
 .ant-input-search .ant-input:focus {
-  border-color: #2c6dd2;
+  border-color: #436bff;
 }
 .ant-input-search .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),
 .ant-input-search .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary) {
-  border-left-color: #2c6dd2;
+  border-left-color: #436bff;
 }
 .ant-input-search .ant-input-affix-wrapper {
   border-radius: 0;
@@ -725,6 +874,32 @@ textarea.ant-input {
 .ant-input-search-small .ant-input-search-button {
   height: 26px;
 }
+.ant-input-search.ant-input-compact-item:not(.ant-input-compact-item-rtl):not(.ant-input-compact-last-item) .ant-input-group-addon .ant-input-search-button {
+  margin-right: -1px;
+  border-radius: 0;
+}
+.ant-input-search.ant-input-compact-item:not(.ant-input-compact-first-item) .ant-input,
+.ant-input-search.ant-input-compact-item:not(.ant-input-compact-first-item) .ant-input-affix-wrapper {
+  border-radius: 0;
+}
+.ant-input-search.ant-input-compact-item > .ant-input-group-addon .ant-input-search-button:hover,
+.ant-input-search.ant-input-compact-item > .ant-input:hover,
+.ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:hover,
+.ant-input-search.ant-input-compact-item > .ant-input-group-addon .ant-input-search-button:focus,
+.ant-input-search.ant-input-compact-item > .ant-input:focus,
+.ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:focus,
+.ant-input-search.ant-input-compact-item > .ant-input-group-addon .ant-input-search-button:active,
+.ant-input-search.ant-input-compact-item > .ant-input:active,
+.ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:active {
+  z-index: 2;
+}
+.ant-input-search.ant-input-compact-item > .ant-input-affix-wrapper-focused {
+  z-index: 2;
+}
+.ant-input-search.ant-input-compact-item-rtl:not(.ant-input-compact-last-item) .ant-input-group-addon:last-child .ant-input-search-button {
+  margin-left: -1px;
+  border-radius: 0;
+}
 .ant-input-group-wrapper-rtl {
   direction: rtl;
 }
@@ -760,18 +935,21 @@ textarea.ant-input {
 }
 .ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),
 .ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary) {
-  border-right-color: #2c6dd2;
   border-left-color: #e5e5e5;
 }
+.ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover,
+.ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover {
+  border-left-color: #436bff;
+}
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper:hover,
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper-focused {
-  border-right-color: #2c6dd2;
+  border-right-color: #436bff;
 }
-.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon {
+.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child {
   right: -1px;
   left: auto;
 }
-.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon .ant-input-search-button {
+.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button {
   border-radius: 2px 0 0 2px;
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

package/es/components/Input/style.less

@@ -1,12 +1,12 @@
-@import 'antd/lib/input/style/index.less';
-@import '../../style/theme.less';
-
-.@{ant-prefix}-input {
-  &[disabled] {
-    border-color: @input-disabled-border-color;
-  }
-}
-
-.@{ant-prefix}-input-group-addon {
-  color: @font-color-6;
-}
+@import 'antd/lib/input/style/index.less';
+@import '../../style/theme.less';
+
+.@{ant-prefix}-input {
+  &[disabled] {
+    border-color: @input-disabled-border-color;
+  }
+}
+
+.@{ant-prefix}-input-group-addon {
+  color: @font-color-6;
+}