@progress/kendo-react-dropdowns 5.13.0-dev.202304051130 → 5.13.0-dev.202304131123

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
+import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events';
 import { DropDownsPopupSettings } from '../common/settings';
 import { TagData } from '../MultiSelect/TagList';
 /**
@@ -64,6 +64,11 @@ export interface MultiSelectTreeFocusEvent extends FocusEvent<MultiSelectTreeHan
  */
 export interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> {
 }
+/**
+ * Represents the object of the `onCancel` MultiSelectTree event.
+ */
+export interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> {
+}
 /**
  * Represents the object of the `onExpandChange` MultiSelectTree event.
  */
@@ -242,6 +247,10 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
      */
     onChange?: (event: MultiSelectTreeChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
+     */
+    onCancel?: (event: MultiSelectTreeCancelEvent) => void;
     /**
      * Fires each time the user types in the filter input
      * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
@@ -300,4 +309,12 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string | React.ReactNode;
 }

package/dist/npm/common/AdaptiveMode.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** @hidden */
+export interface AdaptiveModeProps {
+    navigatable?: boolean;
+    navigatableElements?: string[];
+    expand: boolean;
+    animation?: boolean;
+    adaptiveTitle?: string | React.ReactNode;
+    onClose?: (event: React.SyntheticEvent) => void;
+    windowWidth?: number;
+    mobileFilter?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: {
+        cancelText: string;
+        onCancel: (event: React.SyntheticEvent) => void;
+        applyText: string;
+        onApply: (event: React.SyntheticEvent) => void;
+    };
+}
+/** @hidden */
+export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/npm/common/AdaptiveMode.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptiveMode = void 0;
+var React = require("react");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+/** @hidden */
+var MOBILE_SMALL_DEVISE = 500;
+/** @hidden */
+var AdaptiveMode = function (props) {
+    var footer = props.footer, children = props.children, _a = props.windowWidth, windowWidth = _a === void 0 ? 0 : _a, navigatable = props.navigatable, navigatableElements = props.navigatableElements, expand = props.expand, animation = props.animation, onClose = props.onClose, adaptiveTitle = props.adaptiveTitle, mobileFilter = props.mobileFilter;
+    var defaultProps = {
+        navigatable: navigatable || false,
+        navigatableElements: navigatableElements || [],
+        expand: expand,
+        animation: animation || true,
+        onClose: onClose,
+        animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: windowWidth <= MOBILE_SMALL_DEVISE
+            ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
+            : 'k-adaptive-actionsheet k-actionsheet-bottom'
+    };
+    return (React.createElement(kendo_react_layout_1.ActionSheet, __assign({}, defaultProps),
+        React.createElement(kendo_react_layout_1.ActionSheetHeader, { className: 'k-text-center' },
+            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                React.createElement("div", { className: "k-actionsheet-title" },
+                    React.createElement("div", null, adaptiveTitle)),
+                React.createElement("div", { className: "k-actionsheet-actions" },
+                    React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, onClick: onClose }))),
+            mobileFilter &&
+                React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, mobileFilter)),
+        children,
+        footer && React.createElement(kendo_react_layout_1.ActionSheetFooter, { className: 'k-actions k-actions-stretched' },
+            React.createElement(kendo_react_buttons_1.Button, { size: "large", tabIndex: 0, "aria-label": footer.cancelText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onCancel(event); } }, footer.cancelText),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, themeColor: "primary", size: "large", "aria-label": footer.applyText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onApply(event); } }, footer.applyText))));
+};
+exports.AdaptiveMode = AdaptiveMode;

package/dist/npm/common/events.d.ts

@@ -60,6 +60,11 @@ export interface FocusEvent<T> extends DropdownEvent<T> {
  */
 export interface BlurEvent<T> extends DropdownEvent<T> {
 }
+/**
+ * @hidden
+ */
+export interface CancelEvent<T> extends DropdownEvent<T> {
+}
 /**
  * @hidden
  */

package/dist/npm/messages/index.d.ts

@@ -18,6 +18,14 @@ export declare const comboArrowBtnAriaLabelCollapse = "dropdowns.comboArrowBtnAr
  * @hidden
  */
 export declare const dropDownListArrowBtnAriaLabel = "dropdowns.dropDownListArrowBtnAriaLabel";
+/**
+ * @hidden
+ */
+export declare const adaptiveModeFooterApply = "dropdowns.apply";
+/**
+ * @hidden
+ */
+export declare const adaptiveModeFooterCancel = "dropdowns.cancel";
 /**
  * @hidden
  */
@@ -27,4 +35,6 @@ export declare const messages: {
     "dropdowns.comboArrowBtnAriaLabelExpand": string;
     "dropdowns.comboArrowBtnAriaLabelCollapse": string;
     "dropdowns.dropDownListArrowBtnAriaLabel": string;
+    "dropdowns.apply": string;
+    "dropdowns.cancel": string;
 };

package/dist/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.dropDownListArrowBtnAriaLabel = exports.comboArrowBtnAriaLabelCollapse = exports.comboArrowBtnAriaLabelExpand = exports.clear = exports.nodata = void 0;
+exports.messages = exports.adaptiveModeFooterCancel = exports.adaptiveModeFooterApply = exports.dropDownListArrowBtnAriaLabel = exports.comboArrowBtnAriaLabelCollapse = exports.comboArrowBtnAriaLabelExpand = exports.clear = exports.nodata = void 0;
 /**
  * @hidden
  */
@@ -22,6 +22,14 @@ exports.comboArrowBtnAriaLabelCollapse = 'dropdowns.comboArrowBtnAriaLabelCollap
  * @hidden
  */
 exports.dropDownListArrowBtnAriaLabel = 'dropdowns.dropDownListArrowBtnAriaLabel';
+/**
+ * @hidden
+ */
+exports.adaptiveModeFooterApply = 'dropdowns.apply';
+/**
+ * @hidden
+ */
+exports.adaptiveModeFooterCancel = 'dropdowns.cancel';
 /**
  * @hidden
  */
@@ -31,4 +39,6 @@ exports.messages = (_a = {},
     _a[exports.comboArrowBtnAriaLabelExpand] = 'expand combobox',
     _a[exports.comboArrowBtnAriaLabelCollapse] = 'collapse combobox',
     _a[exports.dropDownListArrowBtnAriaLabel] = 'select',
+    _a[exports.adaptiveModeFooterApply] = 'Apply',
+    _a[exports.adaptiveModeFooterCancel] = 'Cancel',
     _a);

package/dist/npm/package-metadata.js

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