@kdcloudjs/kdesign 1.6.16 → 1.6.18

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 (50) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/kdesign-complete.less +38 -7
  3. package/dist/kdesign.css +46 -24
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +134 -177
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.js +2 -0
  11. package/es/checkbox/checkbox.d.ts +1 -4
  12. package/es/checkbox/checkbox.js +26 -19
  13. package/es/checkbox/group.d.ts +11 -1
  14. package/es/checkbox/group.js +43 -71
  15. package/es/checkbox/index.d.ts +2 -1
  16. package/es/checkbox/index.js +1 -1
  17. package/es/checkbox/style/index.css +3 -0
  18. package/es/checkbox/style/index.less +3 -0
  19. package/es/config-provider/compDefaultProps.d.ts +4 -1
  20. package/es/config-provider/compDefaultProps.js +4 -1
  21. package/es/message/index.js +1 -1
  22. package/es/select/select.js +4 -7
  23. package/es/select/style/index.css +32 -23
  24. package/es/select/style/index.less +23 -7
  25. package/es/stepper/style/index.css +2 -0
  26. package/es/stepper/style/index.less +3 -0
  27. package/es/tag/style/index.css +8 -0
  28. package/es/tag/style/index.less +9 -0
  29. package/es/tag/tag.js +5 -1
  30. package/lib/_utils/usePopper.js +2 -0
  31. package/lib/checkbox/checkbox.d.ts +1 -4
  32. package/lib/checkbox/checkbox.js +32 -25
  33. package/lib/checkbox/group.d.ts +11 -1
  34. package/lib/checkbox/group.js +49 -75
  35. package/lib/checkbox/index.d.ts +2 -1
  36. package/lib/checkbox/index.js +4 -4
  37. package/lib/checkbox/style/index.css +3 -0
  38. package/lib/checkbox/style/index.less +3 -0
  39. package/lib/config-provider/compDefaultProps.d.ts +4 -1
  40. package/lib/config-provider/compDefaultProps.js +4 -1
  41. package/lib/message/index.js +1 -1
  42. package/lib/select/select.js +4 -7
  43. package/lib/select/style/index.css +32 -23
  44. package/lib/select/style/index.less +23 -7
  45. package/lib/stepper/style/index.css +2 -0
  46. package/lib/stepper/style/index.less +3 -0
  47. package/lib/tag/style/index.css +8 -0
  48. package/lib/tag/style/index.less +9 -0
  49. package/lib/tag/tag.js +5 -1
  50. package/package.json +1 -1
@@ -556,10 +556,12 @@ function usePopper(locatorElement, popperElement, props) {
556
556
  focus: 'mousedown',
557
557
  contextMenu: 'mousedown'
558
558
  };
559
+ popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('mouseleave', debounceHidePopper);
559
560
  Array.isArray(trigger) ? trigger.forEach(function (action) {
560
561
  return document.addEventListener(mapEvent[action], debounceHidePopper);
561
562
  }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
562
563
  return function () {
564
+ popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('mouseleave', debounceHidePopper);
563
565
  Array.isArray(trigger) ? trigger.forEach(function (action) {
564
566
  return document.removeEventListener(mapEvent[action], debounceHidePopper);
565
567
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
@@ -1,8 +1,5 @@
1
1
  import React from 'react';
2
- export declare const CheckboxTypes: ["default", "square"];
3
- export declare type CheckboxType = typeof CheckboxTypes[number];
4
- export declare const CheckboxSizes: ["large", "middle", "small"];
5
- export declare type CheckboxSize = typeof CheckboxSizes[number];
2
+ import type { CheckboxType, CheckboxSize } from './group';
6
3
  export interface CheckboxProps {
7
4
  checked?: boolean;
8
5
  defaultChecked?: boolean;
@@ -19,14 +19,12 @@ var __rest = this && this.__rest || function (s, e) {
19
19
 
20
20
  import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
21
21
  import classNames from 'classnames';
22
+ import { GroupContext, CheckboxTypes, CheckboxSizes } from './group';
22
23
  import ConfigContext from '../config-provider/ConfigContext';
23
24
  import { getCompProps } from '../_utils';
24
- import { tuple } from '../_utils/type';
25
25
  import isBoolean from 'lodash/isBoolean';
26
26
  import Icon from '../icon';
27
27
  import devWarning from '../_utils/devwarning';
28
- export var CheckboxTypes = tuple('default', 'square');
29
- export var CheckboxSizes = tuple('large', 'middle', 'small');
30
28
 
31
29
  var InternalCheckbox = function InternalCheckbox(props, ref) {
32
30
  var _context, _context2, _context3, _classNames, _context4, _context5, _context6, _classNames2, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _classNames4, _context15, _context16, _context17, _classNames5, _context18;
@@ -53,38 +51,47 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
53
51
  name = CheckboxProps.name,
54
52
  rest = __rest(CheckboxProps, ["checkboxType", "className", "prefixCls", "defaultChecked", "checked", "size", "onChange", "disabled", "children", "style", "value", "indeterminate", "name"]);
55
53
 
56
- var getChecked = function getChecked() {
57
- return isBoolean(checked) ? checked : defaultChecked;
58
- };
54
+ var checkboxGroup = React.useContext(GroupContext);
55
+ var mergedDisabled = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled) || disabled;
56
+ var mergedCheckboxType = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.checkboxType) || checkboxType;
57
+ var mergedName = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.name) || name;
58
+ var initChecked = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue) ? (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue.indexOf(value)) > -1 : isBoolean(checked) ? checked : defaultChecked;
59
59
 
60
- var _useState = useState(getChecked()),
60
+ var _useState = useState(initChecked),
61
61
  _useState2 = _slicedToArray(_useState, 2),
62
62
  selected = _useState2[0],
63
63
  setSelected = _useState2[1];
64
64
 
65
65
  var labelRef = useRef(null);
66
- devWarning(CheckboxTypes.indexOf(checkboxType) === -1, 'checkbox', "cannot found checkbox type '".concat(checkboxType, "'"));
66
+ React.useEffect(function () {
67
+ setSelected((checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue) ? (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue.indexOf(value)) > -1 : isBoolean(checked) ? checked : defaultChecked);
68
+ }, [checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue, checked, defaultChecked]);
69
+ devWarning(CheckboxTypes.indexOf(mergedCheckboxType) === -1, 'checkbox', "cannot found checkbox type '".concat(mergedCheckboxType, "'"));
67
70
  devWarning(CheckboxSizes.indexOf(size) === -1, 'checkbox', "cannot found size type '".concat(size, "'"));
68
71
  var checkboxPrefixCls = getPrefixCls(prefixCls, 'checkbox', customPrefixcls);
69
72
 
70
73
  var isDefaultType = function isDefaultType() {
71
- return checkboxType === 'default';
74
+ return mergedCheckboxType === 'default';
72
75
  };
73
76
 
74
77
  var getIndeterminate = function getIndeterminate() {
75
78
  return selected ? false : indeterminate;
76
79
  };
77
80
 
78
- var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, checkboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, checkboxType, "-disabled"), disabled), _defineProperty(_classNames, "checked", selected), _classNames));
79
- var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, checkboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, checkboxType, "-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, checkboxType, "-checked"), selected && !disabled), _defineProperty(_classNames2, "checked", selected), _classNames2));
81
+ var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames, "checked", selected), _classNames));
82
+ var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-checked"), selected && !mergedDisabled), _defineProperty(_classNames2, "checked", selected), _classNames2));
80
83
  var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
81
84
  var inputClassName = classNames(_defineProperty({}, "".concat(checkboxPrefixCls, "-input"), true));
82
- var checkedWrapperClassName = classNames((_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, checkboxType, "-no-child"), !children), _defineProperty(_classNames4, _concatInstanceProperty(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, checkboxType, "-wrapper"), true), _defineProperty(_classNames4, _concatInstanceProperty(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, checkboxType, "-wrapper-size"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, checkboxType, "-margin"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, checkboxType, "-checked"), selected), _defineProperty(_classNames4, _concatInstanceProperty(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, checkboxType, "-indeterminate"), getIndeterminate()), _defineProperty(_classNames4, _concatInstanceProperty(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, checkboxType, "-disabled"), disabled && !selected), _defineProperty(_classNames4, _concatInstanceProperty(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, checkboxType, "-checked-disabled"), disabled && selected), _classNames4));
83
- var triangleClassName = classNames((_classNames5 = {}, _defineProperty(_classNames5, _concatInstanceProperty(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, checkboxType, "-triangle"), !selected), _defineProperty(_classNames5, _concatInstanceProperty(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, checkboxType, "-triangle-checked"), selected), _defineProperty(_classNames5, _concatInstanceProperty(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, checkboxType, "-triangle-disabled"), disabled), _classNames5));
84
- var innerIconClassName = classNames(_defineProperty({}, _concatInstanceProperty(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, checkboxType, "-inner"), true));
85
+ var checkedWrapperClassName = classNames((_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-no-child"), !children), _defineProperty(_classNames4, _concatInstanceProperty(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-wrapper"), true), _defineProperty(_classNames4, _concatInstanceProperty(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper-size"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-margin"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-checked"), selected), _defineProperty(_classNames4, _concatInstanceProperty(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-indeterminate"), getIndeterminate()), _defineProperty(_classNames4, _concatInstanceProperty(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), _defineProperty(_classNames4, _concatInstanceProperty(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));
86
+ var triangleClassName = classNames((_classNames5 = {}, _defineProperty(_classNames5, _concatInstanceProperty(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, mergedCheckboxType, "-triangle"), !selected), _defineProperty(_classNames5, _concatInstanceProperty(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, mergedCheckboxType, "-triangle-checked"), selected), _defineProperty(_classNames5, _concatInstanceProperty(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, mergedCheckboxType, "-triangle-disabled"), mergedDisabled), _classNames5));
87
+ var innerIconClassName = classNames(_defineProperty({}, _concatInstanceProperty(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-inner"), true));
85
88
  var handleChange = useCallback(function (e) {
86
89
  onChange && onChange(e);
87
- setSelected(e.target.checked);
90
+ (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked));
91
+
92
+ if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
93
+ setSelected(e.target.checked);
94
+ }
88
95
  }, [onChange]);
89
96
  useEffect(function () {
90
97
  isBoolean(checked) && checked !== selected && setSelected(checked);
@@ -125,7 +132,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
125
132
  className: innerIconClassName
126
133
  }, /*#__PURE__*/React.createElement(Icon, {
127
134
  type: "right-bold",
128
- className: _concatInstanceProperty(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, checkboxType, "-inner-icon")
135
+ className: _concatInstanceProperty(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, mergedCheckboxType, "-inner-icon")
129
136
  })), /*#__PURE__*/React.createElement("input", {
130
137
  type: "checkbox",
131
138
  className: inputClassName,
@@ -133,8 +140,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
133
140
  ref: ref,
134
141
  value: value,
135
142
  checked: selected,
136
- disabled: disabled,
137
- name: name
143
+ disabled: mergedDisabled,
144
+ name: mergedName
138
145
  })), children && /*#__PURE__*/React.createElement("span", {
139
146
  className: "".concat(checkboxPrefixCls, "-children")
140
147
  }, children), !isDefaultType() && /*#__PURE__*/React.createElement("span", {
@@ -143,7 +150,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
143
150
  className: innerIconClassName
144
151
  }, /*#__PURE__*/React.createElement(Icon, {
145
152
  type: "right-bold",
146
- className: _concatInstanceProperty(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, checkboxType, "-inner-icon")
153
+ className: _concatInstanceProperty(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, mergedCheckboxType, "-inner-icon")
147
154
  }))))
148
155
  );
149
156
  };
@@ -3,10 +3,20 @@ export declare const CheckboxTypes: ["default", "square"];
3
3
  export declare type CheckboxType = typeof CheckboxTypes[number];
4
4
  export declare const CheckboxSizes: ["large", "middle", "small"];
5
5
  export declare type CheckboxSize = typeof CheckboxSizes[number];
6
+ export declare type CheckboxValueType = string | number;
7
+ export interface CheckboxGroupContext {
8
+ name?: string;
9
+ isControlled?: boolean;
10
+ groupValue?: Array<CheckboxValueType>;
11
+ checkboxType?: CheckboxType;
12
+ disabled?: boolean;
13
+ onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean) => void;
14
+ }
15
+ export declare const GroupContext: React.Context<CheckboxGroupContext | null>;
6
16
  export interface CheckboxGroupProps {
7
17
  name?: string;
8
18
  size?: CheckboxSize;
9
- value?: string[];
19
+ value?: Array<CheckboxValueType>;
10
20
  checkboxType?: CheckboxType;
11
21
  disabled?: boolean;
12
22
  defaultValue?: string[] | string;
@@ -1,7 +1,5 @@
1
- import _extends from "@babel/runtime-corejs3/helpers/extends";
2
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
3
- import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
4
- import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
2
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
5
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
6
4
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
7
5
  import React, { useContext } from 'react'; // import { Icon } from '../index'
@@ -11,12 +9,11 @@ import ConfigContext from '../config-provider/ConfigContext';
11
9
  import { getCompProps } from '../_utils';
12
10
  import { tuple } from '../_utils/type';
13
11
  import { isArrayValueRepeat } from '../_utils/arrayUtil';
14
- import isArray from 'lodash/isArray';
15
12
  import Checkbox from './checkbox';
16
- import isBoolean from 'lodash/isBoolean';
17
13
  import devWarning from '../_utils/devwarning';
18
14
  export var CheckboxTypes = tuple('default', 'square');
19
15
  export var CheckboxSizes = tuple('large', 'middle', 'small');
16
+ export var GroupContext = /*#__PURE__*/React.createContext(null);
20
17
  var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
18
  // const CheckboxGroup = (props: CheckboxGroupProps): FunctionComponentElement<CheckboxGroupProps> => {
22
19
  var _useContext = useContext(ConfigContext),
@@ -38,111 +35,86 @@ var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
38
35
  defaultValue = CheckboxProps.defaultValue,
39
36
  value = CheckboxProps.value,
40
37
  name = CheckboxProps.name;
38
+ var initData = value || (Array.isArray(defaultValue) ? defaultValue : typeof defaultValue !== 'undefined' ? [defaultValue] : []);
41
39
 
42
- var _React$useState = React.useState(defaultValue),
40
+ var _React$useState = React.useState([]),
43
41
  _React$useState2 = _slicedToArray(_React$useState, 2),
44
42
  groupValue = _React$useState2[0],
45
43
  setGroupValue = _React$useState2[1];
46
44
 
45
+ var innerValue = React.useRef(initData);
47
46
  React.useEffect(function () {
48
- if (value) {
49
- setGroupValue(value);
50
- }
51
- }, [value]);
47
+ innerValue.current = value || (Array.isArray(defaultValue) ? defaultValue : typeof defaultValue !== 'undefined' ? [defaultValue] : []);
48
+ setGroupValue(innerValue.current);
49
+ }, [value, defaultValue]);
50
+ var isControlled = typeof value !== 'undefined';
52
51
  var checkboxGroupPrefixCls = getPrefixCls(prefixCls, 'checkbox-group', customPrefixcls); // 按钮样式前缀
53
52
 
54
- devWarning(isArrayValueRepeat(value), 'checkboxGroup', "variable value's value should be unique ");
55
-
56
- var getDisabled = function getDisabled(optionDisabled) {
57
- return isBoolean(optionDisabled) ? optionDisabled : disabled;
58
- };
59
-
60
- var getChecked = function getChecked(props, value) {
61
- return isArray(value) ? _includesInstanceProperty(value).call(value, (props === null || props === void 0 ? void 0 : props.value) || props) || _includesInstanceProperty(value).call(value, String((props === null || props === void 0 ? void 0 : props.value) || props)) : String(value) === String((props === null || props === void 0 ? void 0 : props.value) || props);
62
- };
53
+ devWarning(isArrayValueRepeat(groupValue), 'checkboxGroup', "variable value's value should be unique ");
63
54
 
64
55
  var getReduceItem = function getReduceItem(targetValue) {
65
- var index = value.indexOf(targetValue);
66
-
67
- _spliceInstanceProperty(value).call(value, index, 1);
56
+ var _context;
68
57
 
69
- return value;
58
+ return _filterInstanceProperty(_context = innerValue.current).call(_context, function (d) {
59
+ return d !== targetValue;
60
+ });
70
61
  };
71
62
 
72
63
  var getAddItem = function getAddItem(targetValue) {
73
- return _concatInstanceProperty(value).call(value, targetValue);
74
- };
64
+ var _context2;
75
65
 
76
- var onCheckboxChange = function onCheckboxChange(ev, item) {
77
- var _a;
66
+ return innerValue.current.indexOf(targetValue) > -1 ? innerValue.current : _concatInstanceProperty(_context2 = innerValue.current).call(_context2, targetValue);
67
+ };
78
68
 
79
- var val = ev.target.value;
80
- var checked = ev.target.checked;
69
+ var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked) {
81
70
  var newVal = [];
82
71
 
83
- if (checked) {
84
- newVal = getAddItem(val);
72
+ if (isChecked) {
73
+ newVal = getAddItem(checkedValue);
85
74
  } else {
86
- newVal = getReduceItem(val);
75
+ newVal = getReduceItem(checkedValue);
76
+ }
77
+
78
+ if (!isControlled) {
79
+ innerValue.current = newVal;
87
80
  }
88
81
 
89
- setGroupValue(newVal);
90
82
  onChange && onChange(newVal);
91
- ((_a = item.props) === null || _a === void 0 ? void 0 : _a.onChange) && item.props.onChange(ev);
83
+ };
84
+
85
+ var context = {
86
+ groupValue: groupValue,
87
+ disabled: disabled,
88
+ name: name,
89
+ isControlled: isControlled,
90
+ checkboxType: checkboxType,
91
+ onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked) {
92
+ onCheckboxChange(checkedValue, isChecked);
93
+ }
92
94
  };
93
95
 
94
96
  var renderByOptions = function renderByOptions() {
95
97
  return _mapInstanceProperty(options).call(options, function (option, index) {
96
98
  return /*#__PURE__*/React.createElement(Checkbox, {
97
99
  size: size,
98
- disabled: getDisabled(option.disabled),
100
+ disabled: option.disabled,
99
101
  key: index,
100
102
  name: name,
101
- defaultChecked: getChecked(option, defaultValue),
102
- checked: getChecked(option, groupValue),
103
+ defaultChecked: option.defaultValue,
104
+ checked: option.checked,
103
105
  checkboxType: checkboxType,
104
106
  value: (option === null || option === void 0 ? void 0 : option.value) || option,
105
- onChange: function onChange(e) {
106
- return onCheckboxChange(e, option);
107
- }
107
+ onChange: option.onChange
108
108
  }, option.label || option);
109
109
  });
110
110
  };
111
111
 
112
- var renderChildren = function renderChildren() {
113
- var _context;
114
-
115
- return _mapInstanceProperty(_context = React.Children).call(_context, children, function (item) {
116
- var _a, _b;
117
-
118
- var groupProps = {};
119
- groupProps = {
120
- name: name,
121
- size: size,
122
- onChange: function onChange(e) {
123
- return onCheckboxChange(e, item);
124
- },
125
- checkboxType: checkboxType || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.checkboxType),
126
- disabled: isBoolean(disabled) ? disabled : (_b = item.props) === null || _b === void 0 ? void 0 : _b.disabled,
127
- checked: getChecked(item.props, groupValue),
128
- defaultChecked: getChecked(item.props, defaultValue)
129
- };
130
- return /*#__PURE__*/React.cloneElement(item, _extends(_extends({}, item.props), groupProps));
131
- });
132
- };
133
-
134
- var renderCheckbox = function renderCheckbox() {
135
- if (isArray(options)) {
136
- return renderByOptions();
137
- } else if (children) {
138
- return renderChildren();
139
- }
140
- };
141
-
142
112
  return /*#__PURE__*/React.createElement("ul", {
143
113
  className: classnames(checkboxGroupPrefixCls, className),
144
114
  style: style,
145
115
  ref: ref
146
- }, renderCheckbox());
116
+ }, /*#__PURE__*/React.createElement(GroupContext.Provider, {
117
+ value: context
118
+ }, options && options.length > 0 ? renderByOptions() : children));
147
119
  });
148
120
  export default /*#__PURE__*/React.memo(CheckboxGroup);
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { CheckboxProps } from './checkbox';
3
3
  import Group from './group';
4
- export { CheckboxProps, CheckboxSizes, CheckboxTypes } from './checkbox';
4
+ export { CheckboxSizes, CheckboxTypes, CheckboxSize, CheckboxType, CheckboxValueType } from './group';
5
5
  export { CheckboxGroupProps } from './group';
6
+ export { CheckboxProps } from './checkbox';
6
7
  interface CompoundedComponent extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>> {
7
8
  Group: typeof Group;
8
9
  }
@@ -1,6 +1,6 @@
1
1
  import InternalCheckbox from './checkbox';
2
2
  import Group from './group';
3
- export { CheckboxSizes, CheckboxTypes } from './checkbox';
3
+ export { CheckboxSizes, CheckboxTypes } from './group';
4
4
  var Checkbox = InternalCheckbox;
5
5
  Checkbox.Group = Group;
6
6
  export { Group };
@@ -155,6 +155,9 @@
155
155
  -moz-user-select: none;
156
156
  -ms-user-select: none;
157
157
  user-select: none;
158
+ overflow: hidden;
159
+ white-space: nowrap;
160
+ text-overflow: ellipsis;
158
161
  }
159
162
  .kd-checkbox-children .kd-input-underline {
160
163
  background-color: transparent;
@@ -39,6 +39,9 @@
39
39
  align-items: center;
40
40
  z-index: 999;
41
41
  user-select: none;
42
+ overflow: hidden;
43
+ white-space: nowrap;
44
+ text-overflow: ellipsis;
42
45
 
43
46
  .kd-input-underline {
44
47
  background-color: transparent;
@@ -188,7 +188,10 @@ declare const compDefaultProps: {
188
188
  disabled: boolean;
189
189
  popupOffset: number[];
190
190
  };
191
- Message: {};
191
+ Message: {
192
+ closable: boolean;
193
+ duration: number;
194
+ };
192
195
  Notice: {};
193
196
  Notification: {};
194
197
  Pagination: {
@@ -194,7 +194,10 @@ var compDefaultProps = {
194
194
  disabled: false,
195
195
  popupOffset: [0, 0]
196
196
  },
197
- Message: {},
197
+ Message: {
198
+ closable: false,
199
+ duration: 3000
200
+ },
198
201
  Notice: {},
199
202
  Notification: {},
200
203
  Pagination: {
@@ -4,7 +4,7 @@ import NotificationApi from '../notification-base';
4
4
  import Content from './content';
5
5
  var defaultStyle = {};
6
6
  var defaultDuration = 3000;
7
- var defaultClosable = true;
7
+ var defaultClosable = false;
8
8
  var defaultOffset = '40px';
9
9
  var defaultSuffixCls = 'message';
10
10
  var defaultPlacement = 'message';
@@ -596,21 +596,16 @@ var InternalSelect = function InternalSelect(props, ref) {
596
596
 
597
597
  var handleMaxTagHolder = useCallback(function () {
598
598
  var maxTagPlaceholder = selectProps.maxTagPlaceholder;
599
- var TagStyle = {
600
- margin: '2px 8px 2px 0'
601
- };
602
599
 
603
600
  if (typeof maxTagPlaceholder === 'function') {
604
601
  return /*#__PURE__*/React.createElement(Tag, {
605
602
  type: "edit",
606
- style: TagStyle,
607
603
  size: size,
608
604
  disabled: disabled
609
605
  }, maxTagPlaceholder(mulOptions));
610
606
  } else {
611
607
  return /*#__PURE__*/React.createElement(Tag, {
612
608
  type: "edit",
613
- style: TagStyle,
614
609
  size: size,
615
610
  disabled: disabled
616
611
  }, maxTagPlaceholder);
@@ -653,7 +648,8 @@ var InternalSelect = function InternalSelect(props, ref) {
653
648
  var multipleCls = classNames(commCls, (_classNames10 = {}, _defineProperty(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames10, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames10));
654
649
  var itemCls = classNames((_classNames11 = {}, _defineProperty(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames11, _concatInstanceProperty(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
655
650
  var TagStyle = {
656
- margin: '2px 8px 2px 0'
651
+ margin: '2px 8px 2px 0',
652
+ maxWidth: '100%'
657
653
  };
658
654
  return /*#__PURE__*/React.createElement("div", {
659
655
  className: multipleCls,
@@ -662,7 +658,8 @@ var InternalSelect = function InternalSelect(props, ref) {
662
658
  var label = item.label,
663
659
  value = item.value;
664
660
  return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement("span", {
665
- key: value
661
+ key: value,
662
+ className: classNames("".concat(selectPrefixCls, "-selection-tag"))
666
663
  }, /*#__PURE__*/React.createElement(Tag, {
667
664
  type: "edit",
668
665
  style: TagStyle,
@@ -239,7 +239,6 @@
239
239
  box-sizing: border-box;
240
240
  background-color: transparent;
241
241
  cursor: pointer;
242
- margin: 0 8px 2px 0;
243
242
  vertical-align: middle;
244
243
  }
245
244
  .kd-select-selector:hover .kd-select-icon-active {
@@ -393,19 +392,16 @@
393
392
  min-width: 75px;
394
393
  }
395
394
  .kd-select-item-option-content {
396
- display: -webkit-box;
397
- display: -ms-flexbox;
398
- display: flex;
399
- -webkit-box-align: center;
400
- -ms-flex-align: center;
401
- align-items: center;
402
- -webkit-box-flex: 1;
403
- -ms-flex: auto;
404
- flex: auto;
405
395
  overflow: hidden;
406
396
  white-space: nowrap;
407
397
  text-overflow: ellipsis;
408
398
  }
399
+ .kd-select-item-option-content .kd-checkbox {
400
+ width: 100%;
401
+ }
402
+ .kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
403
+ display: inline-block;
404
+ }
409
405
  .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
410
406
  background-color: var(--kd-c-select-color-background, #f5f5f5);
411
407
  }
@@ -455,13 +451,13 @@
455
451
  justify-content: center;
456
452
  margin-left: 8px;
457
453
  }
458
- .kd-select-single .kd-select-selection-search {
454
+ .kd-select .kd-select-single .kd-select-selection-search {
459
455
  position: absolute;
460
456
  right: 28px;
461
457
  left: 0;
462
458
  height: 100%;
463
459
  }
464
- .kd-select-single .kd-select-selection-search-input {
460
+ .kd-select .kd-select-single .kd-select-selection-search-input {
465
461
  outline: 0;
466
462
  border-radius: 0;
467
463
  border: none;
@@ -469,35 +465,41 @@
469
465
  height: 100%;
470
466
  width: 100%;
471
467
  }
472
- .kd-select-single-focused {
468
+ .kd-select .kd-select-single .kd-select-selection-item {
469
+ display: inline-block;
470
+ overflow: hidden;
471
+ white-space: nowrap;
472
+ text-overflow: ellipsis;
473
+ }
474
+ .kd-select .kd-select-single-focused {
473
475
  border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
474
476
  }
475
- .kd-select-single-disabled {
477
+ .kd-select .kd-select-single-disabled {
476
478
  background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
477
479
  color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
478
480
  }
479
- .kd-select-single-disabled:hover {
481
+ .kd-select .kd-select-single-disabled:hover {
480
482
  cursor: not-allowed;
481
483
  }
482
- .kd-select-single-disabled .kd-select-suffix {
484
+ .kd-select .kd-select-single-disabled .kd-select-suffix {
483
485
  color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
484
486
  }
485
- .kd-select-single:hover .kd-select-icon-clear {
487
+ .kd-select .kd-select-single:hover .kd-select-icon-clear {
486
488
  opacity: 1;
487
489
  }
488
- .kd-select-single .kd-select-icon-clear {
490
+ .kd-select .kd-select-single .kd-select-icon-clear {
489
491
  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
490
492
  }
491
- .kd-select-single .kd-select-icon-clear:hover {
493
+ .kd-select .kd-select-single .kd-select-icon-clear:hover {
492
494
  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
493
495
  }
494
- .kd-select-single-text {
496
+ .kd-select .kd-select-single-text {
495
497
  color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
496
498
  overflow: hidden;
497
499
  white-space: nowrap;
498
500
  text-overflow: ellipsis;
499
501
  }
500
- .kd-select-single-disabled-text {
502
+ .kd-select .kd-select-single-disabled-text {
501
503
  color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
502
504
  }
503
505
  .kd-select .kd-select-selection-item {
@@ -521,13 +523,13 @@
521
523
  user-select: none;
522
524
  }
523
525
  .kd-select .kd-select-selection-item-small {
524
- height: 18px;
526
+ height: 20px;
525
527
  line-height: 18px;
526
528
  font-size: 12px;
527
529
  }
528
530
  .kd-select .kd-select-selection-item-middle {
529
531
  font-size: 12px;
530
- height: 18px;
532
+ height: 20px;
531
533
  line-height: 18px;
532
534
  }
533
535
  .kd-select .kd-select-selection-item-large {
@@ -569,6 +571,13 @@
569
571
  width: 100%;
570
572
  min-width: 20px;
571
573
  }
574
+ .kd-select-multiple .kd-select-selection-tag {
575
+ max-width: calc(100% - 5px);
576
+ }
577
+ .kd-select-multiple .kd-select-selection-tag .kd-tag {
578
+ margin: 2px 8px 2px 0;
579
+ max-width: 100%;
580
+ }
572
581
  .kd-select-multiple .kd-select-selection-search {
573
582
  position: relative;
574
583
  max-width: 100%;