@kdcloudjs/kdesign 1.7.17 → 1.7.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/kdesign-complete.less +54 -21
  3. package/dist/kdesign.css +23 -15
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +329 -248
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +6 -6
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/carousel/style/index.css +4 -0
  11. package/es/carousel/style/index.less +31 -5
  12. package/es/cascader/cascader.js +63 -62
  13. package/es/cascader/style/index.css +16 -6
  14. package/es/cascader/style/index.less +20 -6
  15. package/es/collapse/collapse.d.ts +1 -1
  16. package/es/dropdown/dropdown.d.ts +1 -0
  17. package/es/dropdown/dropdown.js +22 -7
  18. package/es/input/ClearableLabeledInput.js +9 -1
  19. package/es/select/option.js +6 -2
  20. package/es/select/select.js +32 -14
  21. package/es/select/style/index.css +2 -8
  22. package/es/select/style/index.less +3 -10
  23. package/es/upload/upload.js +87 -63
  24. package/lib/carousel/style/index.css +4 -0
  25. package/lib/carousel/style/index.less +31 -5
  26. package/lib/cascader/cascader.js +62 -61
  27. package/lib/cascader/style/index.css +16 -6
  28. package/lib/cascader/style/index.less +20 -6
  29. package/lib/collapse/collapse.d.ts +1 -1
  30. package/lib/dropdown/dropdown.d.ts +1 -0
  31. package/lib/dropdown/dropdown.js +22 -7
  32. package/lib/input/ClearableLabeledInput.js +8 -0
  33. package/lib/select/option.js +6 -2
  34. package/lib/select/select.js +32 -14
  35. package/lib/select/style/index.css +2 -8
  36. package/lib/select/style/index.less +3 -10
  37. package/lib/upload/upload.js +86 -62
  38. package/package.json +1 -1
@@ -167,9 +167,11 @@
167
167
  }
168
168
  .kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
169
169
  opacity: 1;
170
+ z-index: 1;
170
171
  }
171
172
  .kd-carousel-list-fade .kd-carousel-list-item-hidden {
172
173
  opacity: 0;
174
+ z-index: 0;
173
175
  }
174
176
  .kd-carousel-list-display {
175
177
  width: 100%;
@@ -187,6 +189,7 @@
187
189
  position: absolute;
188
190
  list-style: none;
189
191
  padding: 0;
192
+ z-index: 1;
190
193
  }
191
194
  .kd-carousel-slidebar-left {
192
195
  display: -webkit-box;
@@ -299,6 +302,7 @@
299
302
  right: 16px;
300
303
  -webkit-transform: translateY(-50%);
301
304
  transform: translateY(-50%);
305
+ z-index: 1;
302
306
  }
303
307
  .kd-carousel-jump-left {
304
308
  left: 16px;
@@ -1,6 +1,7 @@
1
1
  @import '../../style/themes/index';
2
2
  @import './mixin.less';
3
3
  @carousel-prefix-cls: ~'@{kd-prefix}-carousel';
4
+
4
5
  .@{carousel-prefix-cls} {
5
6
  &-root {
6
7
  position: relative;
@@ -27,18 +28,23 @@
27
28
 
28
29
  &-slide {
29
30
  width: 100%;
31
+
30
32
  .@{carousel-prefix-cls}-list-item {
31
33
  opacity: 1;
32
34
  border-radius: @carousel-boder-radius;
35
+
33
36
  &-animation {
34
37
  transition: opacity 0.3s ease;
35
38
  }
39
+
36
40
  &-none-animation {
37
41
  transition: none;
38
42
  }
43
+
39
44
  &-not-hidden {
40
45
  opacity: 1;
41
46
  }
47
+
42
48
  &-hidden {
43
49
  opacity: 0;
44
50
  }
@@ -47,30 +53,40 @@
47
53
 
48
54
  &-fade {
49
55
  flex: 1;
56
+
50
57
  .@{carousel-prefix-cls}-list-item {
51
58
  opacity: 1;
59
+
52
60
  &-animation {
53
61
  transition: opacity 0.3s ease;
54
62
  }
63
+
55
64
  &-none-animation {
56
65
  transition: none;
57
66
  }
67
+
58
68
  &-not-hidden {
59
69
  opacity: 1;
70
+ z-index: 1;
60
71
  }
72
+
61
73
  &-hidden {
62
74
  opacity: 0;
75
+ z-index: 0;
63
76
  }
64
77
  }
65
78
  }
66
79
 
67
80
  &-display {
68
81
  width: 100%;
82
+
69
83
  .@{carousel-prefix-cls}-list-item {
70
84
  display: block;
85
+
71
86
  &-not-hidden {
72
87
  display: block;
73
88
  }
89
+
74
90
  &-hidden {
75
91
  display: none;
76
92
  }
@@ -82,25 +98,29 @@
82
98
  position: absolute;
83
99
  list-style: none;
84
100
  padding: 0;
101
+ z-index: 1;
85
102
 
86
103
  &-left {
87
104
  .vertical;
88
105
  left: @carousel-dots-margin-left;
89
106
  }
107
+
90
108
  &-right {
91
109
  .vertical;
92
110
  right: @carousel-dots-margin-right;
93
111
  }
112
+
94
113
  &-bottom {
95
114
  .horizontal;
96
115
  bottom: @carousel-dots-margin-bottom;
97
116
  }
117
+
98
118
  &-top {
99
119
  .horizontal;
100
120
  top: @carousel-dots-margin-top;
101
121
  }
102
122
 
103
- &-dot > button {
123
+ &-dot>button {
104
124
  display: block;
105
125
  border-radius: @carousel-dots-boder-radius;
106
126
  box-sizing: border-box;
@@ -123,9 +143,11 @@
123
143
  width: 100%;
124
144
  cursor: pointer;
125
145
  outline: none;
146
+
126
147
  &-active {
127
148
  opacity: 1;
128
- & > button {
149
+
150
+ &>button {
129
151
  background-color: @carousel-dots-color-background-active;
130
152
  opacity: 1;
131
153
  }
@@ -139,6 +161,7 @@
139
161
  left: unset;
140
162
  right: 16px;
141
163
  transform: translateY(-50%);
164
+ z-index: 1;
142
165
 
143
166
  &-left {
144
167
  left: 16px;
@@ -149,7 +172,7 @@
149
172
  cursor: pointer;
150
173
  }
151
174
 
152
- > *:first-child {
175
+ >*:first-child {
153
176
  display: flex;
154
177
  align-items: center;
155
178
  justify-content: center;
@@ -173,12 +196,14 @@
173
196
  }
174
197
  }
175
198
  }
199
+
176
200
  .vertical {
177
201
  display: flex;
178
202
  flex-direction: column;
179
203
  top: 50%;
180
204
  transform: translateY(-50%);
181
- & > li {
205
+
206
+ &>li {
182
207
  margin: @carousel-dots-marigin 0;
183
208
  width: @carousel-dots-height;
184
209
  height: @carousel-dots-width;
@@ -190,7 +215,8 @@
190
215
  flex-direction: row;
191
216
  left: 50%;
192
217
  transform: translateX(-50%);
193
- & > li {
218
+
219
+ &>li {
194
220
  margin: 0 @carousel-dots-marigin;
195
221
  height: @carousel-dots-height;
196
222
  width: @carousel-dots-width;
@@ -16,7 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
16
16
  }
17
17
  return t;
18
18
  };
19
- import React, { useMemo, useCallback } from 'react';
19
+ import React, { useMemo, useCallback, useState, useRef } from 'react';
20
20
  import classNames from 'classnames';
21
21
  import { tuple } from '../_utils/type';
22
22
  import { getCompProps } from '../_utils';
@@ -59,38 +59,41 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
59
59
  onPopupVisibleChange = allProps.onPopupVisibleChange,
60
60
  onPopperVisibleChange = allProps.onPopperVisibleChange,
61
61
  customPrefixcls = allProps.prefixCls,
62
+ customAllowClear = allProps.allowClear,
63
+ popupPlacement = allProps.popupPlacement,
64
+ maxTagCount = allProps.maxTagCount,
62
65
  otherProps = __rest(allProps
63
66
  // className前缀
64
- , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls"]);
67
+ , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount"]);
65
68
  // className前缀
66
69
  var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
67
- var pickerRef = React.useRef();
68
- var triggerRef = React.useRef();
69
- var wrapperRef = React.useRef();
70
+ var pickerRef = useRef();
71
+ var triggerRef = useRef();
72
+ var wrapperRef = useRef();
70
73
  var mergeRef = ref || pickerRef;
71
- var _React$useState = React.useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
72
- _React$useState2 = _slicedToArray(_React$useState, 2),
73
- visible = _React$useState2[0],
74
- setVisible = _React$useState2[1];
74
+ var _useState = useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
75
+ _useState2 = _slicedToArray(_useState, 2),
76
+ visible = _useState2[0],
77
+ setVisible = _useState2[1];
75
78
  React.useEffect(function () {
76
79
  setVisible(!!props.popperVisible || !!props.popupVisible);
77
80
  }, [props.popperVisible, props.popupVisible]);
78
- var _React$useState3 = React.useState([options]),
79
- _React$useState4 = _slicedToArray(_React$useState3, 2),
80
- menus = _React$useState4[0],
81
- setMenus = _React$useState4[1];
82
- var _React$useState5 = React.useState([]),
83
- _React$useState6 = _slicedToArray(_React$useState5, 2),
84
- currentOptions = _React$useState6[0],
85
- setCurrentOptions = _React$useState6[1];
86
- var _React$useState7 = React.useState([]),
87
- _React$useState8 = _slicedToArray(_React$useState7, 2),
88
- selectedOptions = _React$useState8[0],
89
- setSelectedOptions = _React$useState8[1];
90
- var _React$useState9 = React.useState(props.value || defaultValue || []),
91
- _React$useState10 = _slicedToArray(_React$useState9, 2),
92
- value = _React$useState10[0],
93
- setValue = _React$useState10[1];
81
+ var _useState3 = useState([options]),
82
+ _useState4 = _slicedToArray(_useState3, 2),
83
+ menus = _useState4[0],
84
+ setMenus = _useState4[1];
85
+ var _useState5 = useState([]),
86
+ _useState6 = _slicedToArray(_useState5, 2),
87
+ currentOptions = _useState6[0],
88
+ setCurrentOptions = _useState6[1];
89
+ var _useState7 = useState([]),
90
+ _useState8 = _slicedToArray(_useState7, 2),
91
+ selectedOptions = _useState8[0],
92
+ setSelectedOptions = _useState8[1];
93
+ var _useState9 = useState(props.value || defaultValue || []),
94
+ _useState10 = _slicedToArray(_useState9, 2),
95
+ value = _useState10[0],
96
+ setValue = _useState10[1];
94
97
  React.useEffect(function () {
95
98
  props.value && setValue(props.value);
96
99
  }, [props.value]);
@@ -192,37 +195,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
192
195
  });
193
196
  });
194
197
  }, [currentOptions, isMultiple]);
195
- var allowClear = allProps.allowClear && value.length > 0;
196
- var locatorProps = {
197
- style: style,
198
- tabIndex: 0,
199
- className: classNames("".concat(prefixCls, "-picker"), className, {
200
- expand: visible,
201
- allowClear: allowClear,
202
- disabled: disabled
203
- })
204
- };
198
+ var allowClear = customAllowClear && value.length > 0;
205
199
  var handleClear = function handleClear() {
206
200
  onChange([]);
207
201
  };
208
- var inputProps = {
209
- value: value,
210
- placeholder: placeholder,
211
- readOnly: true,
212
- disabled: disabled,
213
- className: classNames("".concat(prefixCls, "-picker-input"), {
214
- expand: visible
215
- }),
216
- suffix: props.suffixIcon || /*#__PURE__*/React.createElement(Icon, {
217
- type: "arrow-down",
218
- className: classNames({
219
- expand: visible
220
- })
221
- })
222
- };
223
- if (bordered) {
224
- inputProps.borderType = 'bordered';
225
- }
226
202
  var renderSuffix = function renderSuffix() {
227
203
  var _classNames;
228
204
  var suffixIcon = allProps.suffixIcon;
@@ -260,8 +236,6 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
260
236
  };
261
237
  var renderMultiple = function renderMultiple() {
262
238
  var _classNames3, _classNames4;
263
- var maxTagCount = allProps.maxTagCount,
264
- maxTagPlaceholder = allProps.maxTagPlaceholder;
265
239
  var multipleCls = classNames((_classNames3 = {
266
240
  disabled: disabled
267
241
  }, _defineProperty(_classNames3, "".concat(prefixCls, "-multiple"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
@@ -300,19 +274,44 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
300
274
  }, renderSuffix())));
301
275
  };
302
276
  var renderSingle = function renderSingle() {
303
- return /*#__PURE__*/React.createElement("span", _extends({}, locatorProps, {
277
+ var inputProps = {
278
+ value: value,
279
+ placeholder: placeholder,
280
+ readOnly: true,
281
+ borderType: bordered ? 'bordered' : 'underline',
282
+ disabled: disabled,
283
+ className: classNames("".concat(prefixCls, "-picker-input"), {
284
+ expand: visible
285
+ }),
286
+ suffix: props.suffixIcon || /*#__PURE__*/React.createElement(Icon, {
287
+ type: "arrow-down",
288
+ className: classNames({
289
+ expand: visible
290
+ })
291
+ })
292
+ };
293
+ var singleProps = {
294
+ style: style,
295
+ tabIndex: 0,
296
+ className: classNames("".concat(prefixCls, "-picker"), className, _defineProperty({
297
+ expand: visible,
298
+ allowClear: allowClear,
299
+ disabled: disabled
300
+ }, "".concat(prefixCls, "-bordered"), bordered))
301
+ };
302
+ return /*#__PURE__*/React.createElement("div", _extends({}, singleProps, {
304
303
  ref: mergeRef
305
304
  }, otherProps), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
306
305
  ref: triggerRef
307
- }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
306
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
308
307
  ref: triggerRef
309
308
  }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
310
309
  className: "".concat(prefixCls, "-picker-label")
311
- }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
310
+ }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/React.createElement(Icon, {
312
311
  type: "close-solid",
313
312
  className: "".concat(prefixCls, "-picker-close"),
314
313
  onClick: handleClear
315
- })));
314
+ }))));
316
315
  };
317
316
  var cascaderLocator = isMultiple ? renderMultiple() : renderSingle();
318
317
  var onExpend = function onExpend(index, opt, opts) {
@@ -358,8 +357,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
358
357
  var value = _ref5[fieldNames.value];
359
358
  return value;
360
359
  });
361
- setCurrentOptions(selectedOptions);
362
- props.value === undefined && setValue(selectedValue);
360
+ if (typeof props.value === 'undefined') {
361
+ setCurrentOptions(selectedOptions);
362
+ setValue(selectedValue);
363
+ }
363
364
  props.onChange && props.onChange(selectedValue, selectedOptions);
364
365
  };
365
366
  var onVisibleChange = function onVisibleChange(visible) {
@@ -424,7 +425,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
424
425
  trigger: 'click',
425
426
  getPopupContainer: getPopupContainer,
426
427
  prefixCls: "".concat(prefixCls, "-menus"),
427
- placement: allProps.popperPlacement || allProps.popupPlacement,
428
+ placement: allProps.popperPlacement || popupPlacement,
428
429
  popperClassName: allProps.popperClassName || allProps.popupClassName,
429
430
  getTriggerElement: function getTriggerElement() {
430
431
  return triggerRef.current;
@@ -108,9 +108,9 @@
108
108
  /** 浮层箭头样式 **/
109
109
  .kd-cascader-picker {
110
110
  position: relative;
111
- display: inline-block;
112
111
  outline: none;
113
112
  cursor: pointer;
113
+ background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
114
114
  }
115
115
  .kd-cascader-picker:focus > .kd-cascader-picker-input {
116
116
  border-color: var(--kd-c-cascader-color-active, #999);
@@ -139,7 +139,7 @@
139
139
  left: 0;
140
140
  width: 100%;
141
141
  height: 20px;
142
- padding: 0 24px 0 9px;
142
+ padding: 0 24px 0 0;
143
143
  line-height: 20px;
144
144
  -webkit-transform: translateY(-50%);
145
145
  transform: translateY(-50%);
@@ -169,7 +169,7 @@
169
169
  -webkit-transition: all 0.2s;
170
170
  transition: all 0.2s;
171
171
  }
172
- .kd-cascader-picker.allowClear:hover > .kd-cascader-picker-close {
172
+ .kd-cascader-picker.allowClear:hover .kd-cascader-picker-close {
173
173
  opacity: 1;
174
174
  visibility: visible;
175
175
  -webkit-transition: all 0.2s;
@@ -186,7 +186,7 @@
186
186
  .kd-cascader-picker-close {
187
187
  position: absolute;
188
188
  top: 50%;
189
- right: 9px;
189
+ right: 0;
190
190
  opacity: 0;
191
191
  cursor: pointer;
192
192
  visibility: hidden;
@@ -278,11 +278,20 @@
278
278
  .kd-cascader-menus .kd-empty {
279
279
  padding: 10px 0 20px;
280
280
  }
281
- .kd-cascader-bordered {
281
+ .kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-label {
282
+ padding-left: 9px;
283
+ }
284
+ .kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-close {
285
+ right: 10px;
286
+ }
287
+ .kd-cascader-bordered.kd-cascader-multiple {
282
288
  border: 1px solid #d9d9d9;
283
- padding-left: 8px !important;
289
+ padding-left: 8px;
284
290
  border-radius: 2px;
285
291
  }
292
+ .kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
293
+ right: 9px;
294
+ }
286
295
  .kd-cascader-multiple {
287
296
  padding: 1px 28px 1px 0;
288
297
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -301,6 +310,7 @@
301
310
  overflow-x: hidden;
302
311
  position: relative;
303
312
  border-bottom: 1px solid #d9d9d9;
313
+ background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
304
314
  }
305
315
  .kd-cascader-multiple-wrapper {
306
316
  display: -webkit-box;
@@ -8,9 +8,9 @@
8
8
 
9
9
  .@{cascader-picker-prefix-cls} {
10
10
  position: relative;
11
- display: inline-block;
12
11
  outline: none;
13
12
  cursor: pointer;
13
+ background: @cascader-bg-color;
14
14
 
15
15
  &:focus > &-input {
16
16
  border-color: @cascader-active-color;
@@ -47,7 +47,7 @@
47
47
  left: 0;
48
48
  width: 100%;
49
49
  height: 20px;
50
- padding: 0 24px 0 9px;
50
+ padding: 0 24px 0 0;
51
51
  line-height: 20px;
52
52
  transform: translateY(-50%);
53
53
  .ellipsis;
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  &.allowClear:hover {
81
- > .@{cascader-picker-prefix-cls}-close {
81
+ .@{cascader-picker-prefix-cls}-close {
82
82
  opacity: 1;
83
83
  visibility: visible;
84
84
  transition: all 0.2s;
@@ -95,7 +95,7 @@
95
95
  &-close {
96
96
  position: absolute;
97
97
  top: 50%;
98
- right: 9px;
98
+ right: 0;
99
99
  opacity: 0;
100
100
  cursor: pointer;
101
101
  visibility: hidden;
@@ -183,10 +183,23 @@
183
183
  }
184
184
 
185
185
  .@{kd-prefix}-cascader {
186
- &-bordered {
186
+ &-bordered:not(.@{kd-prefix}-cascader-multiple) {
187
+ .@{cascader-picker-prefix-cls}-label {
188
+ padding-left: 9px;
189
+ }
190
+ .@{cascader-picker-prefix-cls}-close {
191
+ right: 10px;
192
+ }
193
+ }
194
+
195
+ &-bordered&-multiple {
187
196
  border: 1px solid #d9d9d9;
188
- padding-left: 8px !important;
197
+ padding-left: 8px;
189
198
  border-radius: 2px;
199
+
200
+ .@{kd-prefix}-cascader-suffix {
201
+ right: 9px;
202
+ }
190
203
  }
191
204
 
192
205
  &-multiple {
@@ -203,6 +216,7 @@
203
216
  overflow-x: hidden;
204
217
  position: relative;
205
218
  border-bottom: 1px solid #d9d9d9;
219
+ background: @cascader-bg-color;
206
220
  }
207
221
 
208
222
  &-multiple-wrapper {
@@ -11,7 +11,7 @@ export interface CollapseProps {
11
11
  defaultActiveKey?: string[] | string | number[] | number;
12
12
  expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
13
13
  expandIconPosition?: IconPositionType;
14
- onChange?: () => void;
14
+ onChange?: (v: any) => void;
15
15
  style?: React.CSSProperties;
16
16
  className?: string;
17
17
  children?: React.ReactNode;
@@ -19,6 +19,7 @@ export interface DropDownProps extends PopperProps {
19
19
  children?: React.ReactNode;
20
20
  onItemClick?: (key: string) => void;
21
21
  menu: React.ReactElement | Array<MenuItem>;
22
+ menuAnimation?: boolean;
22
23
  }
23
24
  interface DropdownType extends React.ForwardRefExoticComponent<DropDownProps & React.RefAttributes<HTMLElement>> {
24
25
  Menu: typeof Menu;
@@ -30,9 +30,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
30
30
  onItemClick = allProps.onItemClick,
31
31
  defaultVisible = allProps.defaultVisible,
32
32
  onVisibleChange = allProps.onVisibleChange,
33
- customPrefixcls = allProps.prefixCls;
34
- // className前缀
33
+ trigger = allProps.trigger,
34
+ customPrefixcls = allProps.prefixCls,
35
+ menuAnimation = allProps.menuAnimation,
36
+ popperStyle = allProps.popperStyle;
35
37
  var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown', customPrefixcls);
38
+ var innerAnimation = typeof menuAnimation === 'boolean' ? menuAnimation : trigger !== 'contextMenu';
36
39
  var _React$useState = React.useState(!!props.visible || defaultVisible),
37
40
  _React$useState2 = _slicedToArray(_React$useState, 2),
38
41
  visible = _React$useState2[0],
@@ -40,10 +43,23 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
40
43
  React.useEffect(function () {
41
44
  setVisible(!!props.visible);
42
45
  }, [props.visible]);
46
+ var handleVisibleChange = function handleVisibleChange(visible) {
47
+ props.visible === undefined && setVisible(visible);
48
+ onVisibleChange && onVisibleChange(visible);
49
+ };
43
50
  var child = children && ((_a = children === null || children === void 0 ? void 0 : children.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Input' ? /*#__PURE__*/React.createElement("span", {
44
51
  className: classNames("".concat(prefixCls, "-trigger"), "".concat(prefixCls, "-trigger-container")),
45
52
  ref: ref
46
- }, children) : /*#__PURE__*/React.cloneElement(React.Children.only(children), {
53
+ }, trigger === 'focus' ? /*#__PURE__*/React.cloneElement(React.Children.only(children), {
54
+ onFocus: function onFocus(e) {
55
+ children.props.onFocus && children.props.onFocus(e);
56
+ handleVisibleChange(true);
57
+ },
58
+ onBlur: function onBlur(e) {
59
+ children.props.onBlur && children.props.onBlur(e);
60
+ handleVisibleChange(false);
61
+ }
62
+ }) : children) : /*#__PURE__*/React.cloneElement(React.Children.only(children), {
47
63
  ref: children.ref || ref,
48
64
  className: classNames("".concat(prefixCls, "-trigger"), children.props.className, {
49
65
  disabled: disabled
@@ -110,13 +126,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
110
126
  role: "menuitem"
111
127
  }, href === undefined || disabled ? /*#__PURE__*/React.createElement("span", null, label) : /*#__PURE__*/React.createElement("a", _extends({}, alinkProps), /*#__PURE__*/React.createElement("span", null, label)));
112
128
  }));
113
- var handleVisibleChange = function handleVisibleChange(visible) {
114
- props.visible === undefined && setVisible(visible);
115
- onVisibleChange && onVisibleChange(visible);
116
- };
117
129
  var popperProps = _extends(_extends({}, allProps), {
118
130
  visible: visible,
119
131
  prefixCls: prefixCls,
132
+ popperStyle: innerAnimation ? popperStyle : _extends({
133
+ animation: 'none'
134
+ }, popperStyle),
120
135
  onVisibleChange: handleVisibleChange
121
136
  });
122
137
  return usePopper(child, menuElement, popperProps);
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
3
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
- import React, { useState } from 'react';
4
+ import React, { useRef, useState } from 'react';
5
5
  import { Icon } from '../index';
6
6
  import classNames from 'classnames';
7
7
  import { tuple } from '../_utils/type';
@@ -30,6 +30,7 @@ var ClearableInput = function ClearableInput(props) {
30
30
  inputCount = props.inputCount,
31
31
  count = props.count,
32
32
  status = props.status;
33
+ var fixRef = useRef(null);
33
34
  var _useState = useState(false),
34
35
  _useState2 = _slicedToArray(_useState, 2),
35
36
  isMouseEnter = _useState2[0],
@@ -44,6 +45,11 @@ var ClearableInput = function ClearableInput(props) {
44
45
  e.stopPropagation();
45
46
  e.preventDefault();
46
47
  };
48
+ var clickHandle = function clickHandle(e) {
49
+ var _a, _b;
50
+ e.stopPropagation();
51
+ (_b = (_a = fixRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
52
+ };
47
53
  var renderClearIcon = function renderClearIcon() {
48
54
  var _classNames;
49
55
  if (!allowClear) {
@@ -85,7 +91,9 @@ var ClearableInput = function ClearableInput(props) {
85
91
  var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
86
92
  return /*#__PURE__*/React.createElement("span", {
87
93
  className: inputWrapperClasses,
94
+ ref: fixRef,
88
95
  style: style,
96
+ onClick: clickHandle,
89
97
  onMouseEnter: mouseEnterHandle,
90
98
  onMouseLeave: mouseLeaveHandle
91
99
  }, prefixNode, /*#__PURE__*/React.cloneElement(originElement, {
@@ -48,9 +48,12 @@ var InternalOption = function InternalOption(props, ref) {
48
48
  }
49
49
  onChangeSelect && onChangeSelect(value, children, isSelected);
50
50
  };
51
- var handleOnMouseMove = function handleOnMouseMove() {
51
+ var handleOnMouseEnter = function handleOnMouseEnter() {
52
52
  onChangeActiveIndex && onChangeActiveIndex(index);
53
53
  };
54
+ var handleOnMouseLeave = function handleOnMouseLeave() {
55
+ onChangeActiveIndex && onChangeActiveIndex(-1);
56
+ };
54
57
  var titleText = title || (_typeof(children) !== 'object' ? children : null);
55
58
  var checkStyle = {
56
59
  minHeight: '22px',
@@ -61,7 +64,8 @@ var InternalOption = function InternalOption(props, ref) {
61
64
  className: optionCls,
62
65
  title: titleText,
63
66
  onClick: handleClick,
64
- onMouseMove: handleOnMouseMove
67
+ onMouseEnter: handleOnMouseEnter,
68
+ onMouseLeave: handleOnMouseLeave
65
69
  }, /*#__PURE__*/React.createElement("div", {
66
70
  className: contentCls
67
71
  }, isMultiple ? /*#__PURE__*/React.createElement(Checkbox, {