@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.10

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 (177) hide show
  1. package/{dist/es/AutoComplete → AutoComplete}/AutoComplete.d.ts +12 -8
  2. package/{dist/npm/AutoComplete → AutoComplete}/AutoCompleteProps.d.ts +4 -1
  3. package/{dist/es/ComboBox → ComboBox}/ComboBox.d.ts +12 -8
  4. package/{dist/es/ComboBox → ComboBox}/ComboBoxProps.d.ts +4 -1
  5. package/{dist/es/DropDownList → DropDownList}/DropDownList.d.ts +9 -5
  6. package/{dist/es/DropDownList → DropDownList}/DropDownListProps.d.ts +4 -1
  7. package/{dist/es/DropDownTree → DropDownTree}/DropDownTree.d.ts +4 -0
  8. package/{dist/npm/DropDownTree → DropDownTree}/DropDownTreeProps.d.ts +4 -1
  9. package/DropDownTree/ListNoData.d.ts +10 -0
  10. package/DropDownTree/useDropdownWidth.d.ts +9 -0
  11. package/LICENSE.md +1 -1
  12. package/{dist/es/MultiColumnComboBox → MultiColumnComboBox}/MultiColumnComboBox.d.ts +4 -0
  13. package/{dist/npm/MultiSelect → MultiSelect}/MultiSelect.d.ts +9 -5
  14. package/{dist/es/MultiSelect → MultiSelect}/MultiSelectProps.d.ts +4 -1
  15. package/{dist/npm/MultiSelect → MultiSelect}/TagList.d.ts +5 -1
  16. package/{dist/es/MultiSelectTree → MultiSelectTree}/MultiSelectTree.d.ts +4 -0
  17. package/{dist/es/MultiSelectTree → MultiSelectTree}/MultiSelectTreeProps.d.ts +5 -1
  18. package/{dist/npm/MultiSelectTree → MultiSelectTree}/utils.d.ts +5 -1
  19. package/{dist/npm/common → common}/AdaptiveMode.d.ts +5 -1
  20. package/common/ClearButton.d.ts +18 -0
  21. package/{dist/npm/common → common}/DropDownBase.d.ts +5 -1
  22. package/{dist/es/common → common}/GroupStickyHeader.d.ts +5 -1
  23. package/{dist/es/common → common}/List.d.ts +8 -3
  24. package/common/ListContainer.d.ts +22 -0
  25. package/common/ListDefaultItem.d.ts +20 -0
  26. package/{dist/npm/common → common}/ListFilter.d.ts +4 -0
  27. package/{dist/npm/common → common}/ListGroupItem.d.ts +5 -1
  28. package/{dist/npm/common → common}/ListItem.d.ts +5 -1
  29. package/common/MultiColumnList.d.ts +9 -0
  30. package/common/Navigation.d.ts +17 -0
  31. package/{dist/es/common → common}/SearchBar.d.ts +5 -1
  32. package/{dist/npm/common → common}/VirtualScroll.d.ts +4 -1
  33. package/common/constants.d.ts +8 -0
  34. package/{dist/es/common → common}/events.d.ts +4 -1
  35. package/{dist/npm/common → common}/filterDescriptor.d.ts +4 -0
  36. package/{dist/es/common → common}/settings.d.ts +5 -2
  37. package/{dist/npm/common → common}/utils.d.ts +4 -0
  38. package/dist/cdn/js/kendo-react-dropdowns.js +5 -1
  39. package/index.d.ts +29 -0
  40. package/index.js +5 -0
  41. package/index.mjs +4397 -0
  42. package/{dist/npm/messages → messages}/index.d.ts +4 -0
  43. package/package-metadata.d.ts +9 -0
  44. package/package.json +34 -62
  45. package/about.md +0 -3
  46. package/dist/es/AutoComplete/AutoComplete.js +0 -652
  47. package/dist/es/AutoComplete/AutoCompleteProps.d.ts +0 -243
  48. package/dist/es/AutoComplete/AutoCompleteProps.js +0 -2
  49. package/dist/es/ComboBox/ComboBox.js +0 -915
  50. package/dist/es/ComboBox/ComboBoxProps.js +0 -2
  51. package/dist/es/DropDownList/DropDownList.js +0 -887
  52. package/dist/es/DropDownList/DropDownListProps.js +0 -2
  53. package/dist/es/DropDownTree/DropDownTree.js +0 -540
  54. package/dist/es/DropDownTree/DropDownTreeProps.d.ts +0 -294
  55. package/dist/es/DropDownTree/DropDownTreeProps.js +0 -2
  56. package/dist/es/DropDownTree/ListNoData.d.ts +0 -6
  57. package/dist/es/DropDownTree/ListNoData.js +0 -8
  58. package/dist/es/DropDownTree/useDropdownWidth.d.ts +0 -5
  59. package/dist/es/DropDownTree/useDropdownWidth.js +0 -13
  60. package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js +0 -213
  61. package/dist/es/MultiSelect/MultiSelect.d.ts +0 -256
  62. package/dist/es/MultiSelect/MultiSelect.js +0 -1110
  63. package/dist/es/MultiSelect/MultiSelectProps.js +0 -2
  64. package/dist/es/MultiSelect/TagList.d.ts +0 -38
  65. package/dist/es/MultiSelect/TagList.js +0 -39
  66. package/dist/es/MultiSelectTree/MultiSelectTree.js +0 -619
  67. package/dist/es/MultiSelectTree/MultiSelectTreeProps.js +0 -2
  68. package/dist/es/MultiSelectTree/utils.d.ts +0 -17
  69. package/dist/es/MultiSelectTree/utils.js +0 -191
  70. package/dist/es/common/AdaptiveMode.d.ts +0 -21
  71. package/dist/es/common/AdaptiveMode.js +0 -45
  72. package/dist/es/common/ClearButton.d.ts +0 -14
  73. package/dist/es/common/ClearButton.js +0 -39
  74. package/dist/es/common/DropDownBase.d.ts +0 -175
  75. package/dist/es/common/DropDownBase.js +0 -297
  76. package/dist/es/common/GroupStickyHeader.js +0 -34
  77. package/dist/es/common/List.js +0 -75
  78. package/dist/es/common/ListContainer.d.ts +0 -18
  79. package/dist/es/common/ListContainer.js +0 -43
  80. package/dist/es/common/ListDefaultItem.d.ts +0 -16
  81. package/dist/es/common/ListDefaultItem.js +0 -36
  82. package/dist/es/common/ListFilter.d.ts +0 -19
  83. package/dist/es/common/ListFilter.js +0 -37
  84. package/dist/es/common/ListGroupItem.d.ts +0 -33
  85. package/dist/es/common/ListGroupItem.js +0 -33
  86. package/dist/es/common/ListItem.d.ts +0 -61
  87. package/dist/es/common/ListItem.js +0 -44
  88. package/dist/es/common/MultiColumnList.d.ts +0 -6
  89. package/dist/es/common/MultiColumnList.js +0 -22
  90. package/dist/es/common/Navigation.d.ts +0 -13
  91. package/dist/es/common/Navigation.js +0 -34
  92. package/dist/es/common/SearchBar.js +0 -62
  93. package/dist/es/common/VirtualScroll.d.ts +0 -42
  94. package/dist/es/common/VirtualScroll.js +0 -161
  95. package/dist/es/common/constants.d.ts +0 -4
  96. package/dist/es/common/constants.js +0 -4
  97. package/dist/es/common/events.js +0 -1
  98. package/dist/es/common/filterDescriptor.d.ts +0 -41
  99. package/dist/es/common/filterDescriptor.js +0 -2
  100. package/dist/es/common/settings.js +0 -8
  101. package/dist/es/common/utils.d.ts +0 -62
  102. package/dist/es/common/utils.js +0 -194
  103. package/dist/es/main.d.ts +0 -25
  104. package/dist/es/main.js +0 -19
  105. package/dist/es/messages/index.d.ts +0 -40
  106. package/dist/es/messages/index.js +0 -41
  107. package/dist/es/package-metadata.d.ts +0 -5
  108. package/dist/es/package-metadata.js +0 -11
  109. package/dist/npm/AutoComplete/AutoComplete.d.ts +0 -230
  110. package/dist/npm/AutoComplete/AutoComplete.js +0 -655
  111. package/dist/npm/AutoComplete/AutoCompleteProps.js +0 -3
  112. package/dist/npm/ComboBox/ComboBox.d.ts +0 -248
  113. package/dist/npm/ComboBox/ComboBox.js +0 -918
  114. package/dist/npm/ComboBox/ComboBoxProps.d.ts +0 -313
  115. package/dist/npm/ComboBox/ComboBoxProps.js +0 -3
  116. package/dist/npm/DropDownList/DropDownList.d.ts +0 -258
  117. package/dist/npm/DropDownList/DropDownList.js +0 -890
  118. package/dist/npm/DropDownList/DropDownListProps.d.ts +0 -326
  119. package/dist/npm/DropDownList/DropDownListProps.js +0 -3
  120. package/dist/npm/DropDownTree/DropDownTree.d.ts +0 -70
  121. package/dist/npm/DropDownTree/DropDownTree.js +0 -543
  122. package/dist/npm/DropDownTree/DropDownTreeProps.js +0 -3
  123. package/dist/npm/DropDownTree/ListNoData.d.ts +0 -6
  124. package/dist/npm/DropDownTree/ListNoData.js +0 -12
  125. package/dist/npm/DropDownTree/useDropdownWidth.d.ts +0 -5
  126. package/dist/npm/DropDownTree/useDropdownWidth.js +0 -17
  127. package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts +0 -287
  128. package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js +0 -216
  129. package/dist/npm/MultiSelect/MultiSelect.js +0 -1113
  130. package/dist/npm/MultiSelect/MultiSelectProps.d.ts +0 -314
  131. package/dist/npm/MultiSelect/MultiSelectProps.js +0 -3
  132. package/dist/npm/MultiSelect/TagList.js +0 -41
  133. package/dist/npm/MultiSelectTree/MultiSelectTree.d.ts +0 -81
  134. package/dist/npm/MultiSelectTree/MultiSelectTree.js +0 -622
  135. package/dist/npm/MultiSelectTree/MultiSelectTreeProps.d.ts +0 -320
  136. package/dist/npm/MultiSelectTree/MultiSelectTreeProps.js +0 -3
  137. package/dist/npm/MultiSelectTree/utils.js +0 -196
  138. package/dist/npm/common/AdaptiveMode.js +0 -49
  139. package/dist/npm/common/ClearButton.d.ts +0 -14
  140. package/dist/npm/common/ClearButton.js +0 -41
  141. package/dist/npm/common/DropDownBase.js +0 -299
  142. package/dist/npm/common/GroupStickyHeader.d.ts +0 -24
  143. package/dist/npm/common/GroupStickyHeader.js +0 -36
  144. package/dist/npm/common/List.d.ts +0 -45
  145. package/dist/npm/common/List.js +0 -77
  146. package/dist/npm/common/ListContainer.d.ts +0 -18
  147. package/dist/npm/common/ListContainer.js +0 -45
  148. package/dist/npm/common/ListDefaultItem.d.ts +0 -16
  149. package/dist/npm/common/ListDefaultItem.js +0 -38
  150. package/dist/npm/common/ListFilter.js +0 -39
  151. package/dist/npm/common/ListGroupItem.js +0 -35
  152. package/dist/npm/common/ListItem.js +0 -46
  153. package/dist/npm/common/MultiColumnList.d.ts +0 -6
  154. package/dist/npm/common/MultiColumnList.js +0 -26
  155. package/dist/npm/common/Navigation.d.ts +0 -13
  156. package/dist/npm/common/Navigation.js +0 -37
  157. package/dist/npm/common/SearchBar.d.ts +0 -43
  158. package/dist/npm/common/SearchBar.js +0 -64
  159. package/dist/npm/common/VirtualScroll.js +0 -163
  160. package/dist/npm/common/constants.d.ts +0 -4
  161. package/dist/npm/common/constants.js +0 -7
  162. package/dist/npm/common/events.d.ts +0 -73
  163. package/dist/npm/common/events.js +0 -2
  164. package/dist/npm/common/filterDescriptor.js +0 -3
  165. package/dist/npm/common/settings.d.ts +0 -114
  166. package/dist/npm/common/settings.js +0 -11
  167. package/dist/npm/common/utils.js +0 -211
  168. package/dist/npm/main.d.ts +0 -25
  169. package/dist/npm/main.js +0 -62
  170. package/dist/npm/messages/index.js +0 -44
  171. package/dist/npm/package-metadata.d.ts +0 -5
  172. package/dist/npm/package-metadata.js +0 -14
  173. package/dist/systemjs/kendo-react-dropdowns.js +0 -1
  174. package/e2e-next/combobox.basic.ts +0 -24
  175. package/e2e-next/dropdownlist.basic.tests.ts +0 -24
  176. package/e2e-next/dropdowntree.basic.tests.ts +0 -24
  177. package/e2e-next/multicolumncombobox.basic.tests.ts +0 -24
@@ -1,543 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
14
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
15
- if (ar || !(i in from)) {
16
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
17
- ar[i] = from[i];
18
- }
19
- }
20
- return to.concat(ar || Array.prototype.slice.call(from));
21
- };
22
- var _this = this;
23
- Object.defineProperty(exports, "__esModule", { value: true });
24
- exports.DropDownTree = exports.DropDownTreePropsContext = void 0;
25
- var React = require("react");
26
- var PropTypes = require("prop-types");
27
- var kendo_react_common_1 = require("@progress/kendo-react-common");
28
- var kendo_react_popup_1 = require("@progress/kendo-react-popup");
29
- var kendo_react_intl_1 = require("@progress/kendo-react-intl");
30
- var kendo_react_treeview_1 = require("@progress/kendo-react-treeview");
31
- var kendo_react_common_2 = require("@progress/kendo-react-common");
32
- var package_metadata_1 = require("./../package-metadata");
33
- var utils_1 = require("../common/utils");
34
- var useDropdownWidth_1 = require("./useDropdownWidth");
35
- var ListNoData_1 = require("./ListNoData");
36
- var messages_1 = require("./../messages");
37
- var kendo_react_labels_1 = require("@progress/kendo-react-labels");
38
- var ListFilter_1 = require("../common/ListFilter");
39
- var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
40
- var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
41
- var AdaptiveMode_1 = require("../common/AdaptiveMode");
42
- var kendo_react_layout_1 = require("@progress/kendo-react-layout");
43
- var constants_1 = require("../common/constants");
44
- var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
45
- var VALIDATION_MESSAGE = 'Please select a value from the list!';
46
- var ValueHolder = function (props) {
47
- return React.createElement("span", { className: "k-input-value-text" }, props.children);
48
- };
49
- var toLevel = function (hierarchicalIndex) {
50
- return hierarchicalIndex.split('_').map(function (i) { return parseInt(i, 10); });
51
- };
52
- var getValidity = function (parameters, hasValue) {
53
- var validationMessage = parameters.validationMessage, valid = parameters.valid, required = parameters.required;
54
- return ({
55
- customError: validationMessage !== undefined,
56
- valid: Boolean(valid !== undefined ? valid : (!required || hasValue)),
57
- valueMissing: !hasValue
58
- });
59
- };
60
- var defaultProps = {
61
- selectField: 'selected',
62
- subItemsField: 'items',
63
- popupSettings: {
64
- animate: true,
65
- width: '200px',
66
- height: '200px'
67
- },
68
- data: [],
69
- required: false,
70
- style: {},
71
- validityStyles: true,
72
- size: 'medium',
73
- rounded: 'medium',
74
- fillMode: 'solid'
75
- };
76
- /**
77
- * Represents the PropsContext of the `DropDownTree` component.
78
- * Used for global configuration of all `DropDownTree` instances.
79
- *
80
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
81
- */
82
- exports.DropDownTreePropsContext = (0, kendo_react_common_1.createPropsContext)();
83
- /**
84
- * Represents the DropDownTree component.
85
- *
86
- * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
87
- * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
88
- *
89
- * @example
90
- * ```jsx
91
- * const selectField = "selected";
92
- * const expandField = "expanded";
93
- * const dataItemKey = "id";
94
- * const textField = "text";
95
- * const subItemsField = "items";
96
- * const fields = {
97
- * selectField,
98
- * expandField,
99
- * dataItemKey,
100
- * subItemsField,
101
- * };
102
- * const App = () => {
103
- * const [value, setValue] = React.useState(null);
104
- * const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
105
- * const onChange = (event) => setValue(event.value);
106
- * const onExpandChange = React.useCallback(
107
- * (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
108
- * [expanded]
109
- * );
110
- * const treeData = React.useMemo(
111
- * () =>
112
- * processTreeData(
113
- * data,
114
- * {
115
- * expanded,
116
- * value,
117
- * },
118
- * fields
119
- * ),
120
- * [expanded, value]
121
- * );
122
- *
123
- * return (
124
- * <DropDownTree
125
- * style={{
126
- * width: '300px',
127
- * }}
128
- * placeholder="Please select ..."
129
- * data={treeData}
130
- * value={value}
131
- * onChange={onChange}
132
- * textField={textField}
133
- * dataItemKey={dataItemKey}
134
- * selectField={selectField}
135
- * expandField={expandField}
136
- * onExpandChange={onExpandChange}
137
- * />
138
- * );
139
- * };
140
- * ReactDOM.render(<App />, document.querySelector('my-app'));
141
- * ```
142
- */
143
- exports.DropDownTree = React.forwardRef(function (directProps, ref) {
144
- var _a;
145
- (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
146
- var props = (0, kendo_react_common_1.usePropsContext)(exports.DropDownTreePropsContext, directProps);
147
- var combinedProps = __assign(__assign({}, defaultProps), props);
148
- var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
149
- var id = combinedProps.id || calculatedId;
150
- var data = combinedProps.data, dataItemKey = combinedProps.dataItemKey, popupSettings = combinedProps.popupSettings, style = combinedProps.style, opened = combinedProps.opened, disabled = combinedProps.disabled, _b = combinedProps.onOpen, onOpen = _b === void 0 ? kendo_react_common_1.noop : _b, _c = combinedProps.onClose, onClose = _c === void 0 ? kendo_react_common_1.noop : _c, placeholder = combinedProps.placeholder, label = combinedProps.label, name = combinedProps.name, selectField = combinedProps.selectField, subItemsField = combinedProps.subItemsField, validationMessage = combinedProps.validationMessage, valid = combinedProps.valid, required = combinedProps.required, validityStyles = combinedProps.validityStyles;
151
- var tabIndex = (0, kendo_react_common_1.getTabIndex)(combinedProps.tabIndex, disabled);
152
- var target = React.useRef(null);
153
- var elementRef = React.useRef(null);
154
- var inputRef = React.useRef(null);
155
- var adaptiveInputRef = React.useRef(null);
156
- var selectRef = React.useRef(null);
157
- var treeViewRef = React.useRef(null);
158
- var skipFocusRef = React.useRef(false);
159
- var _d = React.useState(undefined), stateValue = _d[0], setStateValue = _d[1];
160
- var controlled = combinedProps.value !== undefined;
161
- var value = controlled ? combinedProps.value : (stateValue !== undefined ? stateValue : combinedProps.defaultValue);
162
- var hasValue = (0, utils_1.isPresent)(value);
163
- var currentValueText = hasValue ? (0, utils_1.getItemValue)(value, combinedProps.textField) : '';
164
- var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
165
- var focus = React.useCallback(function () { return elementRef.current && elementRef.current.focus(); }, []);
166
- React.useImperativeHandle(target, function () { return ({
167
- props: combinedProps,
168
- element: elementRef.current,
169
- focus: focus
170
- }); });
171
- React.useImperativeHandle(ref, function () { return target.current; });
172
- var dir = (0, kendo_react_common_1.useRtl)(elementRef, combinedProps.dir);
173
- var initialStyleWidth = popupSettings.width !== undefined ?
174
- popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
175
- var popupWidth = (0, useDropdownWidth_1.useDropdownWidth)(elementRef, initialStyleWidth);
176
- var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
177
- var _e = React.useState(false), open = _e[0], setOpen = _e[1];
178
- var isOpen = opened !== undefined ? opened : open;
179
- var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
180
- var _g = React.useState(), windowWidth = _g[0], setWindowWidth = _g[1];
181
- var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && combinedProps.adaptive);
182
- var _h = React.useState(''), filter = _h[0], setFilter = _h[1];
183
- var setValidity = React.useCallback(function () {
184
- if (selectRef.current && selectRef.current.setCustomValidity) {
185
- selectRef.current.setCustomValidity(validity.valid
186
- ? ''
187
- : validationMessage === undefined ? VALIDATION_MESSAGE : validationMessage);
188
- }
189
- }, [validationMessage, validity]);
190
- React.useEffect(setValidity);
191
- React.useEffect(function () {
192
- var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(calculateMedia.bind(_this));
193
- if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
194
- observerResize.observe(document.body);
195
- }
196
- return function () {
197
- if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
198
- observerResize.disconnect();
199
- }
200
- };
201
- }, []);
202
- var openPopup = React.useCallback(function (event) {
203
- if (!isOpen) {
204
- if (onOpen) {
205
- var openEvent = __assign({}, event);
206
- onOpen.call(undefined, openEvent);
207
- }
208
- if (opened === undefined) {
209
- setOpen(true);
210
- }
211
- }
212
- }, [isOpen, opened, onOpen]);
213
- var closePopup = React.useCallback(function (event) {
214
- if (isOpen) {
215
- if (onClose) {
216
- var closeEvent = __assign({}, event);
217
- onClose.call(undefined, closeEvent);
218
- }
219
- if (opened === undefined) {
220
- setOpen(false);
221
- if (isAdaptive) {
222
- setTimeout(function () {
223
- var _a;
224
- focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
225
- }, 300);
226
- }
227
- }
228
- }
229
- }, [isOpen, opened, onClose, isAdaptive]);
230
- var onWrapperClick = React.useCallback(function (event) {
231
- if (!event.isDefaultPrevented() && target.current) {
232
- setFocused(true);
233
- var ev = {
234
- syntheticEvent: event,
235
- nativeEvent: event.nativeEvent,
236
- target: target.current
237
- };
238
- (isOpen ? closePopup : openPopup)(ev);
239
- }
240
- }, [isOpen, opened, onOpen, onClose]);
241
- var switchFocus = React.useCallback(function (focusFn) {
242
- skipFocusRef.current = true;
243
- focusFn();
244
- window.setTimeout(function () { return skipFocusRef.current = false; }, 0);
245
- }, []);
246
- var onWrapperKeyDown = React.useCallback(function (event) {
247
- var _a, _b;
248
- var keyCode = event.keyCode, altKey = event.altKey;
249
- var treeview = treeViewRef.current && treeViewRef.current.element;
250
- if (!target.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
251
- return;
252
- }
253
- var ev = {
254
- syntheticEvent: event,
255
- nativeEvent: event.nativeEvent,
256
- target: target.current
257
- };
258
- if (isOpen) {
259
- if (keyCode === kendo_react_common_1.Keys.esc || (altKey && keyCode === kendo_react_common_1.Keys.up)) {
260
- event.preventDefault();
261
- closePopup(ev);
262
- }
263
- else if (treeview && treeview.querySelector('.k-focus') &&
264
- (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down ||
265
- keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
266
- keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
267
- if (keyCode === kendo_react_common_1.Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
268
- var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
269
- var focusedItem = __spreadArray([], items, true).reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
270
- if (focusedItem && items.indexOf(focusedItem) === 0) {
271
- return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
272
- }
273
- }
274
- switchFocus(kendo_react_common_1.noop);
275
- }
276
- else if (keyCode === kendo_react_common_1.Keys.down) {
277
- switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeview); });
278
- }
279
- }
280
- else if (altKey && keyCode === kendo_react_common_1.Keys.down) {
281
- event.preventDefault();
282
- openPopup(ev);
283
- }
284
- else if (!isOpen) {
285
- if (keyCode === kendo_react_common_1.Keys.esc) {
286
- onClear(event);
287
- }
288
- }
289
- }, [isOpen, opened, onOpen, onClose]);
290
- var onInputKeyDown = React.useCallback(function (event) {
291
- var keyCode = event.keyCode, altKey = event.altKey;
292
- if (altKey || (keyCode !== kendo_react_common_1.Keys.up && keyCode !== kendo_react_common_1.Keys.down)) {
293
- return;
294
- }
295
- event.preventDefault();
296
- switchFocus(keyCode === kendo_react_common_1.Keys.up ?
297
- function () { focusElement(elementRef.current); } :
298
- function () { focusElement(treeViewRef.current && treeViewRef.current.element); });
299
- }, []);
300
- var focusElement = React.useCallback(function (element) {
301
- if (element) {
302
- switchFocus(function () { return element.focus(); });
303
- }
304
- }, []);
305
- var onPopupOpened = React.useCallback(function () {
306
- var _a;
307
- if (!focused && isOpen && !opened) {
308
- closePopup({ target: target.current });
309
- }
310
- else {
311
- if (props.filterable) {
312
- focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
313
- }
314
- else {
315
- focusElement(treeViewRef.current && treeViewRef.current.element);
316
- }
317
- }
318
- }, [onClose, props.filterable, focused, opened, isOpen]);
319
- var onPopupClosed = React.useCallback(function () {
320
- if (focused) {
321
- // Move the focus from treeview to dropdown without triggering Focus or Blur events.
322
- focusElement(elementRef.current);
323
- }
324
- }, [focused]);
325
- var onFocus = React.useCallback(function (event) {
326
- if (!focused && !skipFocusRef.current) {
327
- setFocused(true);
328
- if (props.onFocus && target.current) {
329
- var focusEvent = {
330
- syntheticEvent: event,
331
- nativeEvent: event.nativeEvent,
332
- target: target.current
333
- };
334
- props.onFocus.call(undefined, focusEvent);
335
- }
336
- }
337
- }, [focused, props.onFocus]);
338
- var onBlur = React.useCallback(function (event) {
339
- if (focused && !skipFocusRef.current && target.current) {
340
- setFocused(false);
341
- var ev = {
342
- syntheticEvent: event,
343
- nativeEvent: event.nativeEvent,
344
- target: target.current
345
- };
346
- if (props.onBlur) {
347
- var focusEvent = __assign({}, ev);
348
- props.onBlur.call(undefined, focusEvent);
349
- }
350
- if (!isAdaptive) {
351
- closePopup(ev);
352
- }
353
- }
354
- }, [focused, props.onBlur, isOpen, opened, onClose]);
355
- var onWrapperMouseDown = React.useCallback(function () {
356
- if (focused) {
357
- // moving focus from treeview to dropdown triggers Focus and Blur events.
358
- switchFocus(kendo_react_common_1.noop);
359
- }
360
- if (isAdaptive) {
361
- setTimeout(function () {
362
- var _a;
363
- focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
364
- }, 300);
365
- }
366
- }, [focused, isAdaptive]);
367
- var changeValue = React.useCallback(function (event, newValue, hierarchicalIndex) {
368
- if (props.onChange) {
369
- var changeEvent = __assign({ value: newValue, level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [] }, event);
370
- props.onChange.call(undefined, changeEvent);
371
- }
372
- if (!controlled) {
373
- setStateValue(newValue);
374
- }
375
- }, [props.onChange, controlled]);
376
- var onChange = React.useCallback(function (event) {
377
- if ((0, utils_1.areSame)(event.item, value, dataItemKey) || !target.current) {
378
- return;
379
- }
380
- var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
381
- var ev = {
382
- syntheticEvent: syntheticEvent,
383
- nativeEvent: nativeEvent,
384
- target: target.current
385
- };
386
- changeValue(ev, item, itemHierarchicalIndex);
387
- closePopup(ev);
388
- }, [controlled, value, props.onChange, dataItemKey, isOpen, opened, onClose]);
389
- var onClear = React.useCallback(function (event) {
390
- if (!target.current) {
391
- return;
392
- }
393
- var ev = {
394
- syntheticEvent: event,
395
- nativeEvent: event.nativeEvent,
396
- target: target.current
397
- };
398
- changeValue(ev, null);
399
- closePopup(ev);
400
- event.preventDefault();
401
- }, [controlled, props.onChange, isOpen, opened, onClose]);
402
- var onExpand = React.useCallback(function (event) {
403
- event.syntheticEvent.stopPropagation();
404
- if (props.onExpandChange && target.current) {
405
- var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
406
- var expandEvent = {
407
- level: toLevel(itemHierarchicalIndex),
408
- item: item,
409
- nativeEvent: nativeEvent,
410
- syntheticEvent: syntheticEvent,
411
- target: target.current
412
- };
413
- props.onExpandChange.call(undefined, expandEvent);
414
- }
415
- }, [props.onExpandChange]);
416
- var onFilterChange = React.useCallback(function (event) {
417
- if (props.onFilterChange && target.current) {
418
- var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
419
- var ev = {
420
- filter: filterDesc,
421
- syntheticEvent: event.syntheticEvent,
422
- nativeEvent: event.nativeEvent,
423
- target: target.current
424
- };
425
- props.onFilterChange.call(undefined, ev);
426
- if (props.filter === undefined) {
427
- setFilter(event.target.value);
428
- }
429
- }
430
- }, [props.onFilterChange, props.filter, props.textField]);
431
- var renderAdaptiveListContainer = function () {
432
- var mobileFilter = combinedProps.filterable ? (React.createElement(ListFilter_1.default, { value: combinedProps.filter === undefined ? filter : combinedProps.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
433
- var actionSheetProps = {
434
- adaptiveTitle: combinedProps.adaptiveTitle,
435
- expand: isOpen,
436
- onClose: function (event) { return closePopup(event); },
437
- windowWidth: windowWidth,
438
- mobileFilter: mobileFilter
439
- };
440
- return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
441
- React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
442
- React.createElement("div", { className: 'k-list-container' },
443
- React.createElement("div", { className: 'k-list k-list-lg' }, data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: combinedProps.textField, selectField: selectField, expandField: combinedProps.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: combinedProps.item, dir: dir })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))))));
444
- };
445
- var calculateMedia = React.useCallback(function (entries) {
446
- for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
447
- var entry = entries_1[_i];
448
- setWindowWidth(entry.target.clientWidth);
449
- }
450
- ;
451
- }, []);
452
- var treeViewData = React.useMemo(function () {
453
- return (controlled || !hasValue) ? data :
454
- (0, kendo_react_common_1.mapTree)(data, subItemsField, function (item) {
455
- var _a;
456
- return (0, kendo_react_common_1.extendDataItem)(item, subItemsField, (_a = {}, _a[selectField] = (0, utils_1.areSame)(item, value, dataItemKey), _a));
457
- });
458
- }, [data, value, controlled, hasValue, selectField, subItemsField]);
459
- var NoData = combinedProps.listNoData || ListNoData_1.ListNoData;
460
- var ValueComponent = combinedProps.valueHolder || ValueHolder;
461
- var localization = (0, kendo_react_intl_1.useLocalization)();
462
- var isValid = !validityStyles || validity.valid;
463
- var size = combinedProps.size, rounded = combinedProps.rounded, fillMode = combinedProps.fillMode;
464
- var dropdowntree = (React.createElement(React.Fragment, null,
465
- React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', combinedProps.className, (_a = {},
466
- _a["k-picker-".concat(sizeMap[size] || size)] = size,
467
- _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
468
- _a["k-picker-".concat(fillMode)] = fillMode,
469
- _a['k-focus'] = focused,
470
- _a['k-invalid'] = !isValid,
471
- _a['k-loading'] = combinedProps.loading,
472
- _a['k-required'] = required,
473
- _a['k-disabled'] = combinedProps.disabled,
474
- _a)), tabIndex: tabIndex, accessKey: combinedProps.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": combinedProps.ariaLabelledBy, "aria-describedby": combinedProps.ariaDescribedBy, "aria-required": required },
475
- React.createElement("span", { className: "k-input-inner" },
476
- React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
477
- combinedProps.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
478
- hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
479
- React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
480
- React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
481
- React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
482
- React.createElement("option", { value: combinedProps.valueMap ? combinedProps.valueMap.call(undefined, value) : value })),
483
- !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
484
- combinedProps.filterable && (React.createElement(ListFilter_1.default, { value: combinedProps.filter === undefined ? filter : combinedProps.filter, ref: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
485
- data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: combinedProps.textField, selectField: selectField, expandField: combinedProps.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: combinedProps.item, dir: dir })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))),
486
- isAdaptive && renderAdaptiveListContainer()));
487
- return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
488
- });
489
- var propTypes = {
490
- opened: PropTypes.bool,
491
- disabled: PropTypes.bool,
492
- dir: PropTypes.string,
493
- tabIndex: PropTypes.number,
494
- accessKey: PropTypes.string,
495
- data: PropTypes.array,
496
- value: PropTypes.any,
497
- valueMap: PropTypes.func,
498
- placeholder: PropTypes.string,
499
- dataItemKey: PropTypes.string.isRequired,
500
- textField: PropTypes.string.isRequired,
501
- selectField: PropTypes.string,
502
- expandField: PropTypes.string,
503
- subItemsField: PropTypes.string,
504
- className: PropTypes.string,
505
- style: PropTypes.object,
506
- label: PropTypes.string,
507
- validationMessage: PropTypes.string,
508
- validityStyles: PropTypes.bool,
509
- valid: PropTypes.bool,
510
- required: PropTypes.bool,
511
- name: PropTypes.string,
512
- id: PropTypes.string,
513
- ariaLabelledBy: PropTypes.string,
514
- ariaDescribedBy: PropTypes.string,
515
- filterable: PropTypes.bool,
516
- filter: PropTypes.string,
517
- loading: PropTypes.bool,
518
- popupSettings: PropTypes.shape({
519
- animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
520
- openDuration: PropTypes.number,
521
- closeDuration: PropTypes.number
522
- })]),
523
- popupClass: PropTypes.string,
524
- className: PropTypes.string,
525
- appendTo: PropTypes.any,
526
- width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
527
- height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
528
- }),
529
- onOpen: PropTypes.func,
530
- onClose: PropTypes.func,
531
- onFocus: PropTypes.func,
532
- onBlur: PropTypes.func,
533
- onChange: PropTypes.func,
534
- onFilterChange: PropTypes.func,
535
- onExpandChange: PropTypes.func,
536
- item: PropTypes.func,
537
- valueHolder: PropTypes.func,
538
- listNoData: PropTypes.func,
539
- adaptiveTitle: PropTypes.string,
540
- adaptive: PropTypes.bool
541
- };
542
- exports.DropDownTree.displayName = 'KendoReactDropDownTree';
543
- exports.DropDownTree.propTypes = propTypes;
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- // tslint:enable:max-line-length
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import { ListNoDataProps } from './DropDownTreeProps';
3
- /**
4
- * @hidden
5
- */
6
- export declare const ListNoData: React.FunctionComponent<ListNoDataProps>;
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ListNoData = void 0;
4
- var React = require("react");
5
- /**
6
- * @hidden
7
- */
8
- var ListNoData = function (props) {
9
- return React.createElement("div", { className: "k-nodata" },
10
- React.createElement("div", null, props.children));
11
- };
12
- exports.ListNoData = ListNoData;
@@ -1,5 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * @hidden
4
- */
5
- export declare function useDropdownWidth(elementRef: React.RefObject<HTMLElement | null>, initialStyleWidth?: string | number, args?: any): string | number | undefined;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDropdownWidth = void 0;
4
- var React = require("react");
5
- /**
6
- * @hidden
7
- */
8
- function useDropdownWidth(elementRef, initialStyleWidth, args) {
9
- var _a = React.useState(initialStyleWidth), width = _a[0], setWidth = _a[1];
10
- React.useEffect(function () {
11
- if (width !== undefined && elementRef.current) {
12
- setWidth(elementRef.current.offsetWidth);
13
- }
14
- }, args);
15
- return width;
16
- }
17
- exports.useDropdownWidth = useDropdownWidth;