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

package/dist/npm/MultiSelectTree/MultiSelectTree.d.ts

@@ -12,5 +12,70 @@ export declare const MultiSelectTreePropsContext: React.Context<(p: MultiSelectT
  *
  * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
  * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
+ *
+ * @example
+ * ```jsx
+ *   const dataItemKey = 'id';
+ *   const checkField = 'checkField';
+ *   const checkIndeterminateField = 'checkIndeterminateField';
+ *   const subItemsField = 'items';
+ *   const expandField = 'expanded';
+ *   const textField = 'text';
+ *   const fields = {
+ *    dataItemKey,
+ *    checkField,
+ *    checkIndeterminateField,
+ *    expandField,
+ *    subItemsField,
+ *   };
+ *   const App = () => {
+ *    const [value, setValue] = React.useState([]);
+ *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *    const onChange = (event) =>
+ *       setValue(
+ *       getMultiSelectTreeValue(data, {
+ *           ...fields,
+ *           ...event,
+ *           value,
+ *       })
+ *       );
+ *   const onExpandChange = React.useCallback(
+ *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *       [expanded]
+ *   );
+ *   const treeData = React.useMemo(
+ *       () =>
+ *       processMultiSelectTreeData(data, {
+ *           expanded,
+ *           value,
+ *           ...fields,
+ *       }),
+ *       [expanded, value]
+ *   );
+ *
+ *   return (
+ *       <div>
+ *       <div>Categories:</div>
+ *       <MultiSelectTree
+ *           style={{
+ *           width: '300px',
+ *           }}
+ *           data={treeData}
+ *           value={value}
+ *           onChange={onChange}
+ *           placeholder="Please select ..."
+ *           textField={textField}
+ *           dataItemKey={dataItemKey}
+ *           checkField={checkField}
+ *           checkIndeterminateField={checkIndeterminateField}
+ *           expandField={expandField}
+ *           subItemsField={subItemsField}
+ *           onExpandChange={onExpandChange}
+ *       />
+ *       </div>
+ *   );
+ *   };
+ *   ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export declare const MultiSelectTree: React.ForwardRefExoticComponent<MultiSelectTreeProps & React.RefAttributes<MultiSelectTreeHandle | null>>;

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -81,6 +81,71 @@ exports.MultiSelectTreePropsContext = (0, kendo_react_common_1.createPropsContex
  *
  * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
  * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
+ *
+ * @example
+ * ```jsx
+ *   const dataItemKey = 'id';
+ *   const checkField = 'checkField';
+ *   const checkIndeterminateField = 'checkIndeterminateField';
+ *   const subItemsField = 'items';
+ *   const expandField = 'expanded';
+ *   const textField = 'text';
+ *   const fields = {
+ *    dataItemKey,
+ *    checkField,
+ *    checkIndeterminateField,
+ *    expandField,
+ *    subItemsField,
+ *   };
+ *   const App = () => {
+ *    const [value, setValue] = React.useState([]);
+ *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *    const onChange = (event) =>
+ *       setValue(
+ *       getMultiSelectTreeValue(data, {
+ *           ...fields,
+ *           ...event,
+ *           value,
+ *       })
+ *       );
+ *   const onExpandChange = React.useCallback(
+ *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *       [expanded]
+ *   );
+ *   const treeData = React.useMemo(
+ *       () =>
+ *       processMultiSelectTreeData(data, {
+ *           expanded,
+ *           value,
+ *           ...fields,
+ *       }),
+ *       [expanded, value]
+ *   );
+ *
+ *   return (
+ *       <div>
+ *       <div>Categories:</div>
+ *       <MultiSelectTree
+ *           style={{
+ *           width: '300px',
+ *           }}
+ *           data={treeData}
+ *           value={value}
+ *           onChange={onChange}
+ *           placeholder="Please select ..."
+ *           textField={textField}
+ *           dataItemKey={dataItemKey}
+ *           checkField={checkField}
+ *           checkIndeterminateField={checkIndeterminateField}
+ *           expandField={expandField}
+ *           subItemsField={subItemsField}
+ *           onExpandChange={onExpandChange}
+ *       />
+ *       </div>
+ *   );
+ *   };
+ *   ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _a, _b;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1694449449,
+    publishDate: 1694510545,
     version: '',
     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'
 };