@progress/kendo-react-dropdowns 5.18.0-dev.202309120912 → 5.18.0-dev.202309120952

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.
@@ -81,6 +81,71 @@ exports.MultiSelectTreePropsContext = (0, kendo_react_common_1.createPropsContex
81
81
  *
82
82
  * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
83
83
  * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
84
+ *
85
+ * @example
86
+ * ```jsx
87
+ * const dataItemKey = 'id';
88
+ * const checkField = 'checkField';
89
+ * const checkIndeterminateField = 'checkIndeterminateField';
90
+ * const subItemsField = 'items';
91
+ * const expandField = 'expanded';
92
+ * const textField = 'text';
93
+ * const fields = {
94
+ * dataItemKey,
95
+ * checkField,
96
+ * checkIndeterminateField,
97
+ * expandField,
98
+ * subItemsField,
99
+ * };
100
+ * const App = () => {
101
+ * const [value, setValue] = React.useState([]);
102
+ * const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
103
+ * const onChange = (event) =>
104
+ * setValue(
105
+ * getMultiSelectTreeValue(data, {
106
+ * ...fields,
107
+ * ...event,
108
+ * value,
109
+ * })
110
+ * );
111
+ * const onExpandChange = React.useCallback(
112
+ * (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
113
+ * [expanded]
114
+ * );
115
+ * const treeData = React.useMemo(
116
+ * () =>
117
+ * processMultiSelectTreeData(data, {
118
+ * expanded,
119
+ * value,
120
+ * ...fields,
121
+ * }),
122
+ * [expanded, value]
123
+ * );
124
+ *
125
+ * return (
126
+ * <div>
127
+ * <div>Categories:</div>
128
+ * <MultiSelectTree
129
+ * style={{
130
+ * width: '300px',
131
+ * }}
132
+ * data={treeData}
133
+ * value={value}
134
+ * onChange={onChange}
135
+ * placeholder="Please select ..."
136
+ * textField={textField}
137
+ * dataItemKey={dataItemKey}
138
+ * checkField={checkField}
139
+ * checkIndeterminateField={checkIndeterminateField}
140
+ * expandField={expandField}
141
+ * subItemsField={subItemsField}
142
+ * onExpandChange={onExpandChange}
143
+ * />
144
+ * </div>
145
+ * );
146
+ * };
147
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
148
+ * ```
84
149
  */
85
150
  exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
86
151
  var _a, _b;
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-dropdowns',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1694508042,
11
+ publishDate: 1694510545,
12
12
  version: '',
13
13
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
14
14
  };