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

package/dist/es/AutoComplete/AutoComplete.js

@@ -190,6 +190,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             var focusedIndex = _this.focusedIndex();
             var focusedItem = data[focusedIndex];
             var keyCode = event.keyCode;
+            var altOrOptionsKeyPressed = event.altKey;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
@@ -198,7 +199,23 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                     event.preventDefault();
                 }
             };
-            if (keyCode === Keys.enter || keyCode === Keys.esc) {
+            if (altOrOptionsKeyPressed && keyCode === Keys.down) {
+                _this.setState({
+                    opened: true
+                });
+            }
+            else if (altOrOptionsKeyPressed && keyCode === Keys.up) {
+                _this.setState({
+                    opened: false
+                });
+            }
+            else if (opened && keyCode === Keys.pageUp) {
+                _this.base.scrollPopupByPageSize(-1);
+            }
+            else if (opened && keyCode === Keys.pageDown) {
+                _this.base.scrollPopupByPageSize(1);
+            }
+            else if (opened && (keyCode === Keys.enter || keyCode === Keys.esc)) {
                 preventDefault();
                 if (skipDisabledItems === false && focusedItem && focusedItem.disabled) {
                     if (opened) {
@@ -210,6 +227,15 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                     _this.applyInputValue(event.currentTarget.value, state, event.keyCode);
                 }
             }
+            else if (!opened && keyCode === Keys.esc) {
+                var newValue = '';
+                _this._suggested = '';
+                _this.triggerOnChange(newValue, state);
+                if (_this.state.focusedItem !== undefined) {
+                    state.data.focusedItem = undefined;
+                }
+                _this.applyState(state);
+            }
             else if (keyCode === Keys.up || keyCode === Keys.down) {
                 if (groupField !== '' && textField) {
                     if (!_this.props.skipDisabledItems && opened) {

package/dist/es/DropDownTree/DropDownTree.d.ts

@@ -12,5 +12,59 @@ export declare const DropDownTreePropsContext: React.Context<(p: DropDownTreePro
  *
  * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
+ *
+ * @example
+ * ```jsx
+ * const selectField = "selected";
+ * const expandField = "expanded";
+ * const dataItemKey = "id";
+ * const textField = "text";
+ * const subItemsField = "items";
+ * const fields = {
+ *  selectField,
+ *  expandField,
+ *  dataItemKey,
+ *  subItemsField,
+ * };
+ *  const App = () => {
+ *  const [value, setValue] = React.useState(null);
+ *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *  const onChange = (event) => setValue(event.value);
+ *  const onExpandChange = React.useCallback(
+ *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *    [expanded]
+ *  );
+ *  const treeData = React.useMemo(
+ *    () =>
+ *      processTreeData(
+ *        data,
+ *        {
+ *          expanded,
+ *          value,
+ *        },
+ *        fields
+ *      ),
+ *    [expanded, value]
+ *  );
+ *
+ *  return (
+ *      <DropDownTree
+ *        style={{
+ *          width: '300px',
+ *        }}
+ *        placeholder="Please select ..."
+ *        data={treeData}
+ *        value={value}
+ *        onChange={onChange}
+ *        textField={textField}
+ *        dataItemKey={dataItemKey}
+ *        selectField={selectField}
+ *        expandField={expandField}
+ *        onExpandChange={onExpandChange}
+ *      />
+ *  );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export declare const DropDownTree: React.ForwardRefExoticComponent<DropDownTreeProps & React.RefAttributes<DropDownTreeHandle | null>>;

package/dist/es/DropDownTree/DropDownTree.js

@@ -80,6 +80,60 @@ export var DropDownTreePropsContext = createPropsContext();
  *
  * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
+ *
+ * @example
+ * ```jsx
+ * const selectField = "selected";
+ * const expandField = "expanded";
+ * const dataItemKey = "id";
+ * const textField = "text";
+ * const subItemsField = "items";
+ * const fields = {
+ *  selectField,
+ *  expandField,
+ *  dataItemKey,
+ *  subItemsField,
+ * };
+ *  const App = () => {
+ *  const [value, setValue] = React.useState(null);
+ *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *  const onChange = (event) => setValue(event.value);
+ *  const onExpandChange = React.useCallback(
+ *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *    [expanded]
+ *  );
+ *  const treeData = React.useMemo(
+ *    () =>
+ *      processTreeData(
+ *        data,
+ *        {
+ *          expanded,
+ *          value,
+ *        },
+ *        fields
+ *      ),
+ *    [expanded, value]
+ *  );
+ *
+ *  return (
+ *      <DropDownTree
+ *        style={{
+ *          width: '300px',
+ *        }}
+ *        placeholder="Please select ..."
+ *        data={treeData}
+ *        value={value}
+ *        onChange={onChange}
+ *        textField={textField}
+ *        dataItemKey={dataItemKey}
+ *        selectField={selectField}
+ *        expandField={expandField}
+ *        onExpandChange={onExpandChange}
+ *      />
+ *  );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var _a;

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -246,5 +246,42 @@ export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiCol
  * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
  * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
  *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector("my-app"));
+ * ```
  */
 export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle | null>>;

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -46,6 +46,43 @@ export var MultiColumnComboBoxPropsContext = createPropsContext();
  * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
  * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
  *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector("my-app"));
+ * ```
  */
 export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var props = usePropsContext(MultiColumnComboBoxPropsContext, directProps);

package/dist/es/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/es/MultiSelectTree/MultiSelectTree.js

@@ -78,6 +78,71 @@ export var MultiSelectTreePropsContext = createPropsContext();
  *
  * 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 var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _a, _b;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var 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'
 };

package/dist/npm/AutoComplete/AutoComplete.js

@@ -193,6 +193,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             var focusedIndex = _this.focusedIndex();
             var focusedItem = data[focusedIndex];
             var keyCode = event.keyCode;
+            var altOrOptionsKeyPressed = event.altKey;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
@@ -201,7 +202,23 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                     event.preventDefault();
                 }
             };
-            if (keyCode === kendo_react_common_1.Keys.enter || keyCode === kendo_react_common_1.Keys.esc) {
+            if (altOrOptionsKeyPressed && keyCode === kendo_react_common_1.Keys.down) {
+                _this.setState({
+                    opened: true
+                });
+            }
+            else if (altOrOptionsKeyPressed && keyCode === kendo_react_common_1.Keys.up) {
+                _this.setState({
+                    opened: false
+                });
+            }
+            else if (opened && keyCode === kendo_react_common_1.Keys.pageUp) {
+                _this.base.scrollPopupByPageSize(-1);
+            }
+            else if (opened && keyCode === kendo_react_common_1.Keys.pageDown) {
+                _this.base.scrollPopupByPageSize(1);
+            }
+            else if (opened && (keyCode === kendo_react_common_1.Keys.enter || keyCode === kendo_react_common_1.Keys.esc)) {
                 preventDefault();
                 if (skipDisabledItems === false && focusedItem && focusedItem.disabled) {
                     if (opened) {
@@ -213,6 +230,15 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                     _this.applyInputValue(event.currentTarget.value, state, event.keyCode);
                 }
             }
+            else if (!opened && keyCode === kendo_react_common_1.Keys.esc) {
+                var newValue = '';
+                _this._suggested = '';
+                _this.triggerOnChange(newValue, state);
+                if (_this.state.focusedItem !== undefined) {
+                    state.data.focusedItem = undefined;
+                }
+                _this.applyState(state);
+            }
             else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down) {
                 if (groupField !== '' && textField) {
                     if (!_this.props.skipDisabledItems && opened) {

package/dist/npm/DropDownTree/DropDownTree.d.ts

@@ -12,5 +12,59 @@ export declare const DropDownTreePropsContext: React.Context<(p: DropDownTreePro
  *
  * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
+ *
+ * @example
+ * ```jsx
+ * const selectField = "selected";
+ * const expandField = "expanded";
+ * const dataItemKey = "id";
+ * const textField = "text";
+ * const subItemsField = "items";
+ * const fields = {
+ *  selectField,
+ *  expandField,
+ *  dataItemKey,
+ *  subItemsField,
+ * };
+ *  const App = () => {
+ *  const [value, setValue] = React.useState(null);
+ *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *  const onChange = (event) => setValue(event.value);
+ *  const onExpandChange = React.useCallback(
+ *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *    [expanded]
+ *  );
+ *  const treeData = React.useMemo(
+ *    () =>
+ *      processTreeData(
+ *        data,
+ *        {
+ *          expanded,
+ *          value,
+ *        },
+ *        fields
+ *      ),
+ *    [expanded, value]
+ *  );
+ *
+ *  return (
+ *      <DropDownTree
+ *        style={{
+ *          width: '300px',
+ *        }}
+ *        placeholder="Please select ..."
+ *        data={treeData}
+ *        value={value}
+ *        onChange={onChange}
+ *        textField={textField}
+ *        dataItemKey={dataItemKey}
+ *        selectField={selectField}
+ *        expandField={expandField}
+ *        onExpandChange={onExpandChange}
+ *      />
+ *  );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export declare const DropDownTree: React.ForwardRefExoticComponent<DropDownTreeProps & React.RefAttributes<DropDownTreeHandle | null>>;

package/dist/npm/DropDownTree/DropDownTree.js

@@ -83,6 +83,60 @@ exports.DropDownTreePropsContext = (0, kendo_react_common_1.createPropsContext)(
  *
  * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
+ *
+ * @example
+ * ```jsx
+ * const selectField = "selected";
+ * const expandField = "expanded";
+ * const dataItemKey = "id";
+ * const textField = "text";
+ * const subItemsField = "items";
+ * const fields = {
+ *  selectField,
+ *  expandField,
+ *  dataItemKey,
+ *  subItemsField,
+ * };
+ *  const App = () => {
+ *  const [value, setValue] = React.useState(null);
+ *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *  const onChange = (event) => setValue(event.value);
+ *  const onExpandChange = React.useCallback(
+ *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *    [expanded]
+ *  );
+ *  const treeData = React.useMemo(
+ *    () =>
+ *      processTreeData(
+ *        data,
+ *        {
+ *          expanded,
+ *          value,
+ *        },
+ *        fields
+ *      ),
+ *    [expanded, value]
+ *  );
+ *
+ *  return (
+ *      <DropDownTree
+ *        style={{
+ *          width: '300px',
+ *        }}
+ *        placeholder="Please select ..."
+ *        data={treeData}
+ *        value={value}
+ *        onChange={onChange}
+ *        textField={textField}
+ *        dataItemKey={dataItemKey}
+ *        selectField={selectField}
+ *        expandField={expandField}
+ *        onExpandChange={onExpandChange}
+ *      />
+ *  );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var _a;

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -246,5 +246,42 @@ export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiCol
  * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
  * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
  *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector("my-app"));
+ * ```
  */
 export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle | null>>;

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -49,6 +49,43 @@ exports.MultiColumnComboBoxPropsContext = (0, kendo_react_common_1.createPropsCo
  * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
  * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
  *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector("my-app"));
+ * ```
  */
 exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var props = (0, kendo_react_common_1.usePropsContext)(exports.MultiColumnComboBoxPropsContext, directProps);