@progress/kendo-react-layout 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/npm/panelbar/util.js

@@ -10,10 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isArrayEqual = exports.PanelBarUtils = exports.isPresent = exports.flatVisibleChildren = exports.flatChildren = exports.flatVisibleItems = exports.getInitialState = exports.getFirstId = exports.renderChildren = void 0;
@@ -38,11 +42,11 @@ var renderChildren = function (_a) {
                     children: child.props.children,
                     parentExpanded: (expanded || []).indexOf(privateKey) > -1,
                     level: level + 1,
-                    parentPrivateKey: __spreadArray(__spreadArray([], parentPrivateKey), [privateKey])
+                    parentPrivateKey: __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false)
                 };
-                nestedChildren = exports.renderChildren(renderState);
+                nestedChildren = (0, exports.renderChildren)(renderState);
             }
-            return React.cloneElement(child, __assign(__assign({}, child.props), { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
+            return React.cloneElement(child, __assign(__assign({}, child.props), { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-".concat(privateKey), uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
         }
         else {
             return React.createElement("div", { className: "k-panelbar-content k-content" }, child);
@@ -92,7 +96,7 @@ var getInitialState = function (props, expandMode, result, parentExpanded, paren
                     }
                 }
                 if (child.props.children) {
-                    result = exports.getInitialState(child.props, expandMode, result, !!child.props.expanded, __spreadArray(__spreadArray([], parentPrivateKey), [privateKey]));
+                    result = (0, exports.getInitialState)(child.props, expandMode, result, !!child.props.expanded, __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false));
                 }
             }
         }
@@ -107,8 +111,8 @@ var getId = function (child, parentPrivateKey, idx) {
     return child && child.props && child.props.id
         ? child.props.id
         : parentPrivateKey.length
-            ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
-            : "." + idx;
+            ? parentPrivateKey[parentPrivateKey.length - 1] + ".".concat(idx)
+            : ".".concat(idx);
 };
 /**
  * @hidden

package/dist/npm/splitter/Splitter.js

@@ -89,6 +89,7 @@ var Splitter = /** @class */ (function (_super) {
      */
     function Splitter(props) {
         var _this = _super.call(this, props) || this;
+        _this._container = null;
         _this.validatePanes = function (panesOptions) {
             var withoutSize = panesOptions.filter(function (pane) { return pane.size === undefined; });
             if (!withoutSize.length) {
@@ -204,15 +205,15 @@ var Splitter = /** @class */ (function (_super) {
         _this.elementSize = function (el, isContainer) {
             var sizeType = isContainer ? 'client' : 'offset';
             if (_this.orientation === 'vertical') {
-                return el[sizeType + "Height"];
+                return el["".concat(sizeType, "Height")];
             }
             else {
-                return el[sizeType + "Width"];
+                return el["".concat(sizeType, "Width")];
             }
         };
         _this.clamp = function (min, max, v) { return Math.min(max, Math.max(min, v)); };
         _this.fixedSize = function (size) { return size && size.length > 0; };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         _this.state = {
             isDragging: false,
             dragIndex: undefined,
@@ -269,7 +270,7 @@ var Splitter = /** @class */ (function (_super) {
         var _this = this;
         var panesContent = this.panesContent;
         var panesOptions = this.panesOptions(panesContent);
-        var className = kendo_react_common_1.classNames('k-widget', 'k-splitter', 'k-splitter-flex', "k-splitter-" + this.orientation, this.props.className);
+        var className = (0, kendo_react_common_1.classNames)('k-widget', 'k-splitter', 'k-splitter-flex', "k-splitter-".concat(this.orientation), this.props.className);
         this.validatePanes(panesOptions);
         return (React.createElement("div", { style: this.props.style, ref: function (ref) { return _this._container = ref; }, className: className }, this.mapSplitterPanes(panesOptions, panesContent)));
     };

package/dist/npm/splitter/SplitterBar.js

@@ -25,6 +25,7 @@ var SplitterBar = /** @class */ (function (_super) {
     __extends(SplitterBar, _super);
     function SplitterBar(props) {
         var _this = _super.call(this, props) || this;
+        _this.draggable = null;
         _this.onDrag = function (data, isFirst, isLast) {
             var event = data.event;
             var _a = _this.props, onDrag = _a.onDrag, index = _a.index;
@@ -100,7 +101,7 @@ var SplitterBar = /** @class */ (function (_super) {
             var prev = _this.props.prev;
             var isCollapsible = prev.collapsible;
             var isCollapsed = prev.collapsed;
-            return kendo_react_common_1.classNames('k-icon', (_a = {},
+            return (0, kendo_react_common_1.classNames)('k-icon', (_a = {},
                 _a['k-hidden'] = !isCollapsible,
                 _a['k-collapse-prev'] = isCollapsible,
                 _a['k-i-arrow-60-left'] = isCollapsible && isHorizontal && !isCollapsed,
@@ -114,7 +115,7 @@ var SplitterBar = /** @class */ (function (_super) {
             var next = _this.props.next;
             var isCollapsible = next.collapsible;
             var isCollapsed = next.collapsed;
-            return kendo_react_common_1.classNames('k-icon', (_a = {},
+            return (0, kendo_react_common_1.classNames)('k-icon', (_a = {},
                 _a['k-hidden'] = !isCollapsible,
                 _a['k-collapse-next'] = isCollapsible,
                 _a['k-i-arrow-60-right'] = isCollapsible && isHorizontal && !isCollapsed,
@@ -161,7 +162,7 @@ var SplitterBar = /** @class */ (function (_super) {
         var isDraggable = this.isDraggable;
         var isStatic = this.isStatic;
         var isHorizontal = this.isHorizontal;
-        var barClasses = kendo_react_common_1.classNames('k-splitbar', (_a = {},
+        var barClasses = (0, kendo_react_common_1.classNames)('k-splitbar', (_a = {},
             _a['k-focus'] = this.state.focused,
             _a['k-splitbar-horizontal'] = isHorizontal,
             _a['k-splitbar-vertical'] = !isHorizontal,

package/dist/npm/splitter/SplitterPane.js

@@ -33,7 +33,7 @@ var SplitterPane = /** @class */ (function (_super) {
         var style = {
             flexBasis: size
         };
-        var paneClasses = kendo_react_common_1.classNames('k-pane', (_a = {},
+        var paneClasses = (0, kendo_react_common_1.classNames)('k-pane', (_a = {},
             _a['k-state-hidden'] = collapsed,
             _a['hidden'] = collapsed,
             _a['k-pane-flex'] = containsSplitter,

package/dist/npm/stacklayout/StackLayout.d.ts

@@ -34,4 +34,4 @@ export interface StackLayoutHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const StackLayout: React.ForwardRefExoticComponent<StackLayoutProps & React.RefAttributes<StackLayoutHandle>>;
+export declare const StackLayout: React.ForwardRefExoticComponent<StackLayoutProps & React.RefAttributes<StackLayoutHandle | null>>;

package/dist/npm/stacklayout/StackLayout.js

@@ -42,19 +42,19 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
  * ```
  */
 exports.StackLayout = React.forwardRef(function (props, ref) {
-    kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
     var elementRef = React.useRef(null);
     var getImperativeHandle = React.useCallback(function () { return ({
         element: elementRef.current
     }); }, []);
     React.useImperativeHandle(ref, getImperativeHandle);
     var className = props.className, style = props.style, id = props.id, children = props.children;
-    var layoutId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
+    var layoutId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var orientation = React.useMemo(function () { return props.orientation || defaultProps.orientation; }, [props.orientation]);
     var isHorizontal = orientation === 'horizontal';
     var hAlign = React.useMemo(function () { return props.align && props.align.horizontal ? props.align.horizontal : defaultProps.hAlign; }, [props.align]);
     var vAlign = React.useMemo(function () { return props.align && props.align.vertical ? props.align.vertical : defaultProps.vAlign; }, [props.align]);
-    var stackLayoutClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-stack-layout', {
+    var stackLayoutClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-stack-layout', {
         'k-hstack': orientation === 'horizontal',
         'k-vstack': orientation === 'vertical',
         'k-justify-content-start': isHorizontal && hAlign === 'start' || !isHorizontal && vAlign === 'top',
@@ -66,7 +66,7 @@ exports.StackLayout = React.forwardRef(function (props, ref) {
         'k-align-items-end': !isHorizontal && hAlign === 'end' || isHorizontal && vAlign === 'bottom',
         'k-align-items-stretch': !isHorizontal && hAlign === 'stretch' || isHorizontal && vAlign === 'stretch'
     }, className); }, [orientation, isHorizontal, hAlign, vAlign, className]);
-    var stackLayoutStyles = __assign({ gap: "" + (typeof props.gap === 'number' ? props.gap + 'px' : props.gap) }, style);
+    var stackLayoutStyles = __assign({ gap: "".concat(typeof props.gap === 'number' ? props.gap + 'px' : props.gap) }, style);
     return (React.createElement("div", { ref: elementRef, className: stackLayoutClasses, style: stackLayoutStyles, id: id || layoutId }, children));
 });
 var defaultProps = {

package/dist/npm/stepper/Step.d.ts

@@ -20,4 +20,4 @@ import { StepProps } from './interfaces/StepProps';
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const Step: React.ForwardRefExoticComponent<Pick<StepProps, string | number> & React.RefAttributes<StepHandle>>;
+export declare const Step: React.ForwardRefExoticComponent<Pick<StepProps, keyof StepProps> & React.RefAttributes<StepHandle | null>>;

package/dist/npm/stepper/Step.js

@@ -57,7 +57,7 @@ exports.Step = React.forwardRef(function (props, target) {
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_1.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -67,7 +67,7 @@ exports.Step = React.forwardRef(function (props, target) {
     React.useImperativeHandle(target, getImperativeHandle);
     var allowClick = !linear || (index === value - 1 || index === value || index === value + 1);
     var isInLabel = mode === 'labels' || (Boolean(icon) && Boolean(label));
-    var localizationService = kendo_react_intl_1.useLocalization();
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
     var localizeMessage = function (message) {
         return localizationService.toLanguageString(message, messages_1.messages[message]);
     };
@@ -79,15 +79,15 @@ exports.Step = React.forwardRef(function (props, target) {
             : contants_1.NO_ANIMATION;
     var handleClick = React.useCallback(function (event) {
         if (onChange && !disabled) {
-            kendo_react_common_1.dispatchEvent(onChange, event, getImperativeHandle(), { value: index });
+            (0, kendo_react_common_1.dispatchEvent)(onChange, event, getImperativeHandle(), { value: index });
         }
     }, [onChange, value, disabled]);
     var handleFocus = React.useCallback(function (event) {
         if (onFocus && !disabled) {
-            kendo_react_common_1.dispatchEvent(onFocus, event, getImperativeHandle(), undefined);
+            (0, kendo_react_common_1.dispatchEvent)(onFocus, event, getImperativeHandle(), undefined);
         }
     }, [onFocus, disabled]);
-    var itemClassNames = React.useMemo(function () { return kendo_react_common_1.classNames('k-step', {
+    var itemClassNames = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-step', {
         'k-step-first': index === 0,
         'k-step-last': numOfSteps && index === numOfSteps - 1,
         'k-step-done': index < value,
@@ -98,16 +98,16 @@ exports.Step = React.forwardRef(function (props, target) {
         'k-step-error': isValid !== undefined && !isValid,
         'k-step-success': isValid
     }, className); }, [index, numOfSteps, value, current, optional, disabled, focused, isValid, className]);
-    var itemStyles = React.useMemo(function () { return (__assign({ maxWidth: !isVertical ? "calc(100% / " + numOfSteps + ")" : undefined, maxHeight: isVertical ? "calc(100% / " + numOfSteps + ")" : undefined, pointerEvents: !allowClick ? 'none' : undefined }, style)); }, [isVertical, numOfSteps, style, allowClick]);
+    var itemStyles = React.useMemo(function () { return (__assign({ maxWidth: !isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, maxHeight: isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, pointerEvents: !allowClick ? 'none' : undefined }, style)); }, [isVertical, numOfSteps, style, allowClick]);
     var validationIconClasses = (isValid
-        ? successIcon ? "" + successIcon : 'k-icon k-i-check'
-        : errorIcon ? "" + errorIcon : 'k-icon k-i-warning');
+        ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check'
+        : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-warning');
     var validationIcons = (React.createElement("span", { className: 'k-step-indicator-icon ' + validationIconClasses, "aria-hidden": "true" }));
     var stepIndicator = (React.createElement(React.Fragment, null, mode !== 'labels' ?
         React.createElement("span", { className: "k-step-indicator", "aria-hidden": true, style: { transitionDuration: progressAnimation + 'ms' } }, icon
             ? !isInLabel && isValid !== undefined
                 ? validationIcons
-                : React.createElement("span", { className: "k-step-indicator-icon k-icon " + icon })
+                : React.createElement("span", { className: "k-step-indicator-icon k-icon ".concat(icon) })
             : isValid !== undefined
                 ? validationIcons
                 : React.createElement("span", { className: "k-step-indicator-text" }, text ? text : index + 1)) :

package/dist/npm/stepper/Stepper.d.ts

@@ -20,4 +20,4 @@ import { StepperHandle } from './interfaces/StepperHandle';
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperHandle>>;
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperHandle | null>>;

package/dist/npm/stepper/Stepper.js

@@ -41,12 +41,12 @@ var package_metadata_1 = require("../package-metadata");
  * ```
  */
 exports.Stepper = React.forwardRef(function (props, target) {
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, onChange = props.onChange, onFocus = props.onFocus;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_1.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -58,7 +58,7 @@ exports.Stepper = React.forwardRef(function (props, target) {
     var _a = React.useState(value), focusedIdx = _a[0], setFocusedIdx = _a[1];
     var numOfSteps = items ? items.length : 0;
     var isVertical = orientation === 'vertical';
-    var dir = kendo_react_common_1.useRtl(elementRef, props.dir);
+    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
     var animation = typeof animationDuration === 'number'
         ? animationDuration
         : animationDuration !== false
@@ -70,7 +70,7 @@ exports.Stepper = React.forwardRef(function (props, target) {
         var nextIdx = val === value + 1;
         var allowClick = !linear || (prevIdx || currIdx || nextIdx);
         if (value !== val && onChange && !disabled && allowClick) {
-            kendo_react_common_1.dispatchEvent(onChange, event, getImperativeHandle(), { value: val });
+            (0, kendo_react_common_1.dispatchEvent)(onChange, event, getImperativeHandle(), { value: val });
             setFocusedIdx(val);
         }
     }, [value, linear, onChange, disabled, setFocusedIdx]);
@@ -81,7 +81,7 @@ exports.Stepper = React.forwardRef(function (props, target) {
     }, [dispatchChangeEvent]);
     var handleFocus = React.useCallback(function (event) {
         if (onFocus && !disabled) {
-            kendo_react_common_1.dispatchEvent(onFocus, event.syntheticEvent, getImperativeHandle(), undefined);
+            (0, kendo_react_common_1.dispatchEvent)(onFocus, event.syntheticEvent, getImperativeHandle(), undefined);
         }
     }, [onFocus, disabled]);
     var handleEnter = React.useCallback(function (event) {
@@ -146,11 +146,11 @@ exports.Stepper = React.forwardRef(function (props, target) {
             default:
         }
     }, [items, setFocusedIdx, focusedIdx, dir, handleEnter]);
-    var stepperClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-stepper', {
+    var stepperClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-stepper', {
         'k-stepper-linear': linear
     }, className); }, [linear, className]);
     var stepperStyles = React.useMemo(function () { return (__assign({ display: 'grid', gridTemplateColumns: !isVertical ? 'repeat(' + numOfSteps * 2 + ', 1fr)' : undefined, gridTemplateRows: isVertical ? 'repeat(' + numOfSteps + ', 1fr)' : undefined }, style)); }, [isVertical, numOfSteps, style]);
-    var listClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-step-list', {
+    var listClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-step-list', {
         'k-step-list-horizontal': !isVertical,
         'k-step-list-vertical': isVertical
     }); }, [isVertical]);
@@ -191,15 +191,18 @@ exports.Stepper = React.forwardRef(function (props, target) {
 });
 exports.Stepper.propTypes = {
     animationDuration: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    children: PropTypes.any,
     className: PropTypes.string,
     dir: PropTypes.string,
     disabled: PropTypes.bool,
+    errorIcon: PropTypes.string,
     item: PropTypes.any,
-    items: PropTypes.arrayOf(PropTypes.any),
+    items: PropTypes.any,
     linear: PropTypes.bool,
     mode: PropTypes.oneOf(['steps', 'labels']),
     orientation: PropTypes.oneOf(['horizontal', 'vertical']),
     style: PropTypes.object,
+    successIcon: PropTypes.string,
     value: PropTypes.number.isRequired,
     onChange: PropTypes.func,
     onFocus: PropTypes.func

package/dist/npm/stepper/interfaces/StepperOnNavigateEvent.js

@@ -9,6 +9,7 @@ var StepperOnNavigateEvent = /** @class */ (function () {
      * @hidden
      */
     function StepperOnNavigateEvent(target, prevIndex, nextIndex) {
+        this.syntheticEvent = null;
         this.target = target;
         this.prevIndex = prevIndex;
         this.nextIndex = nextIndex;

package/dist/npm/tabstrip/TabStrip.js

@@ -159,7 +159,7 @@ var TabStrip = /** @class */ (function (_super) {
                 }
             }
         };
-        kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     /**
@@ -170,7 +170,7 @@ var TabStrip = /** @class */ (function (_super) {
         var tabProps = __assign(__assign({}, this.props), { children: this.children(), onKeyDown: this.onKeyDown, onSelect: this.onSelect });
         var tabPosition = tabProps.tabPosition, _a = tabProps.tabIndex, tabIndex = _a === void 0 ? 0 : _a;
         var bottom = tabPosition === 'bottom';
-        var componentClasses = kendo_react_common_1.classNames('k-tabstrip', 'k-floatwrap', {
+        var componentClasses = (0, kendo_react_common_1.classNames)('k-tabstrip', 'k-floatwrap', {
             'k-tabstrip-left': tabPosition === 'left',
             'k-tabstrip-right': tabPosition === 'right',
             'k-tabstrip-bottom': tabPosition === 'bottom',

package/dist/npm/tabstrip/TabStripContent.d.ts

@@ -24,6 +24,10 @@ export interface TabStripContentProps {
      * @hidden
      */
     keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
 }
 export declare class TabStripContent extends React.Component<TabStripContentProps, {}> {
     /**
@@ -31,7 +35,7 @@ export declare class TabStripContent extends React.Component<TabStripContentProp
      */
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
         selected: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
     };

package/dist/npm/tabstrip/TabStripContent.js

@@ -35,7 +35,7 @@ var TabStripContent = /** @class */ (function (_super) {
     __extends(TabStripContent, _super);
     function TabStripContent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.contentId = kendo_react_common_1.guid();
+        _this.contentId = (0, kendo_react_common_1.guid)();
         _this.childFactory = function (child) {
             return React.cloneElement(child, __assign(__assign({}, child.props), { in: child.props.children.props.id === String(_this.contentId + _this.props.selected) }));
         };
@@ -48,7 +48,7 @@ var TabStripContent = /** @class */ (function (_super) {
         var _a = this.props, children = _a.children, selected = _a.selected;
         var selectedTab = children && typeof selected === 'number' &&
             React.Children.toArray(children)[selected];
-        var contentClasses = kendo_react_common_1.classNames('k-content', 'k-active', selectedTab && selectedTab.props.contentClassName);
+        var contentClasses = (0, kendo_react_common_1.classNames)('k-content', 'k-active', selectedTab && selectedTab.props.contentClassName);
         return (React.createElement("div", { className: contentClasses, style: this.props.style }, this.renderContent(children)));
     };
     TabStripContent.prototype.renderContent = function (children) {

package/dist/npm/tabstrip/TabStripNavigation.d.ts

@@ -34,7 +34,7 @@ export declare class TabStripNavigation extends React.Component<TabStripNavigati
      * @hidden
      */
     static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         selected: PropTypes.Requireable<number>;

package/dist/npm/tabstrip/TabStripNavigation.js

@@ -63,11 +63,11 @@ var TabStripNavigation = /** @class */ (function (_super) {
                 return (React.createElement(TabStripNavigationItem_1.TabStripNavigationItem, __assign({ key: index }, tabProps)));
             });
         }
-        var wrapperClasses = kendo_react_common_1.classNames('k-tabstrip-items-wrapper', {
+        var wrapperClasses = (0, kendo_react_common_1.classNames)('k-tabstrip-items-wrapper', {
             'k-hstack': tabPosition === 'top' || tabPosition === 'bottom',
             'k-vstack': tabPosition === 'left' || tabPosition === 'right'
         });
-        var navClasses = kendo_react_common_1.classNames('k-tabstrip-items', 'k-reset');
+        var navClasses = (0, kendo_react_common_1.classNames)('k-tabstrip-items', 'k-reset');
         return (React.createElement("div", { className: wrapperClasses },
             React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs)));
     };

package/dist/npm/tabstrip/TabStripNavigationItem.js

@@ -56,7 +56,7 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
             'role': 'tab',
             onClick: !disabled ? this.onClick : undefined
         };
-        var itemClasses = kendo_react_common_1.classNames('k-item', (_a = {},
+        var itemClasses = (0, kendo_react_common_1.classNames)('k-item', (_a = {},
             _a['k-first'] = first,
             _a['k-last'] = last,
             _a['k-disabled'] = disabled,

package/dist/npm/tabstrip/TabStripTab.d.ts

@@ -28,11 +28,11 @@ export declare class TabStripTab extends React.Component<TabStripTabProps, {}> {
     static propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         contentClassName: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        title: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
     /**
      * @hidden
      */
-    render(): any;
+    render(): null;
 }

package/dist/npm/tilelayout/InternalTile.d.ts

@@ -9,6 +9,7 @@ export interface InternalTileProps extends TileLayoutItem {
     index: number;
     defaultPosition: TileStrictPosition;
     ignoreDrag?: (event: any) => boolean;
+    children?: React.ReactNode;
 }
 /**
  * @hidden
@@ -53,7 +54,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     dragging: boolean;
     resizing: boolean;
     element: HTMLElement | null;
-    get dragElement(): HTMLElement;
+    get dragElement(): HTMLElement | null | undefined;
     ignoreDrag: boolean;
     pressOffset: {
         x: number;
@@ -80,7 +81,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     /**
      * @hidden
      */
-    getSnapshotBeforeUpdate(_: any): any;
+    getSnapshotBeforeUpdate(_: any): null;
     /**
      * @hidden
      */

package/dist/npm/tilelayout/InternalTile.js

@@ -75,7 +75,7 @@ var InternalTile = /** @class */ (function (_super) {
                 else {
                     _this.dragElement.style.marginRight = -dX + 'px';
                 }
-                _this.dragElement.style.height = "calc(100% + " + dY + "px)";
+                _this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
             }
             _this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
             if (_this.preventDataOps) {
@@ -102,9 +102,6 @@ var InternalTile = /** @class */ (function (_super) {
             }
         };
         _this.handlePress = function (e) {
-            if (!_this.reorderable) {
-                return;
-            }
             if (!_this.dragElement) {
                 return;
             }
@@ -130,7 +127,7 @@ var InternalTile = /** @class */ (function (_super) {
             };
         };
         _this.handleDrag = function (e) {
-            if (!_this.reorderable || _this.ignoreDrag) {
+            if (_this.ignoreDrag) {
                 return;
             }
             var dragElement = _this.dragElement;
@@ -144,7 +141,7 @@ var InternalTile = /** @class */ (function (_super) {
                 x: e.event.clientX - rec.x - _this.pressOffset.x + _this.currentTranslate.x,
                 y: e.event.clientY - rec.y - _this.pressOffset.y + _this.currentTranslate.y
             };
-            dragElement.style.transform = "translate(" + _this.currentTranslate.x + "px, " + _this.currentTranslate.y + "px)";
+            dragElement.style.transform = "translate(".concat(_this.currentTranslate.x, "px, ").concat(_this.currentTranslate.y, "px)");
             dragElement.style.transition = 'transform 0s';
             if (_this.preventDataOps) {
                 return;
@@ -166,9 +163,6 @@ var InternalTile = /** @class */ (function (_super) {
             _this.props.update(_this.props.index, row, _this.state.rtl ? -col : col, 0, 0);
         };
         _this.handleRelease = function () {
-            if (!_this.reorderable) {
-                return;
-            }
             _this.dragging = _this.resizing = false;
             _this.currentTranslate = { x: 0, y: 0 };
             if (_this.element) {
@@ -178,7 +172,7 @@ var InternalTile = /** @class */ (function (_super) {
             var dragElement = _this.dragElement;
             if (dragElement) {
                 dragElement.style.transform = 'translate(0px, 0px)';
-                dragElement.style.transition = "transform " + ANIMATION_DURATION + "ms cubic-bezier(0.2, 0, 0, 1) 0s";
+                dragElement.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
                 dragElement.style.marginRight = '0px';
                 dragElement.style.marginLeft = '0px';
                 dragElement.style.height = '100%';
@@ -220,12 +214,12 @@ var InternalTile = /** @class */ (function (_super) {
         }
         var position = this.props.defaultPosition;
         var resizable = this.props.resizable !== undefined ? this.props.resizable : InternalTile.defaultProps.resizable;
-        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span " + position.colSpan, gridRowStart: position.row, gridRowEnd: "span " + position.rowSpan, outline: 'none', order: position.order }, this.props.hintStyle);
-        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: kendo_react_common_1.classNames('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
+        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order }, this.props.hintStyle);
+        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: (0, kendo_react_common_1.classNames)('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
             this.props.children,
             React.createElement(ResizeHandlers_1.ResizeHandlers, { onPress: this.handlePress, onResize: this.handleResize, resizable: resizable, rtl: this.state.rtl })));
         return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles, className: this.props.hintClassName },
-            React.createElement(kendo_react_common_1.Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.handleDrag, onRelease: this.handleRelease, onPress: this.handlePress }, card)));
+            React.createElement(kendo_react_common_1.Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.props.reorderable ? this.handleDrag : undefined, onRelease: this.props.reorderable ? this.handleRelease : undefined, onPress: this.props.reorderable ? this.handlePress : undefined }, card)));
     };
     /**
      * @hidden
@@ -261,7 +255,7 @@ var InternalTile = /** @class */ (function (_super) {
             this.pressXY.x += this.state.rtl ? -diffCol : diffCol;
             var diffRow = newBox.height - oldBox.height;
             var currentBot = parseFloat(dragElement.style.height.substring(12));
-            dragElement.style.height = "calc(100% + " + (currentBot + diffRow) + "px)";
+            dragElement.style.height = "calc(100% + ".concat((currentBot + diffRow), "px)");
             this.pressXY.y += diffRow;
         }
         var deltaX = oldBox.left - newBox.left;
@@ -287,11 +281,11 @@ var InternalTile = /** @class */ (function (_super) {
             if (!domNode) {
                 return;
             }
-            domNode.style.transform = "translate(" + deltaX + "px, " + deltaY + "px)";
+            domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
             domNode.style.transition = 'transform 0s';
             requestAnimationFrame(function () {
                 domNode.style.transform = '';
-                domNode.style.transition = "transform " + ANIMATION_DURATION + "ms cubic-bezier(0.2, 0, 0, 1) 0s";
+                domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
             });
         });
     };

package/dist/npm/tilelayout/ResizeHandlers.d.ts

@@ -16,5 +16,5 @@ export interface ResizeHandlersProps {
  */
 export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
     handleResize: (event: any, isEnd: boolean, direction: any) => void;
-    render(): JSX.Element;
+    render(): JSX.Element | null;
 }

package/dist/npm/tilelayout/TileLayout.d.ts

@@ -138,7 +138,7 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
             rowSpan: number;
             colSpan: number;
         } & TilePosition)[];
-    };
+    } | null;
     /**
      * @hidden
      */

package/dist/npm/tilelayout/TileLayout.js

@@ -101,7 +101,7 @@ var TileLayout = /** @class */ (function (_super) {
             }
             if (shouldUpdate) {
                 _this.setState({ positions: positions });
-                kendo_react_common_1.dispatchEvent(_this.props.onReposition, {}, _this, { value: positions });
+                (0, kendo_react_common_1.dispatchEvent)(_this.props.onReposition, {}, _this, { value: positions });
             }
         };
         return _this;
@@ -138,11 +138,11 @@ var TileLayout = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? '1fr' : _c, gap = _a.gap, _d = _a.rowHeight, rowHeight = _d === void 0 ? '1fr' : _d, style = _a.style, _e = _a.autoFlow, autoFlow = _e === void 0 ? 'column' : _e, _f = _a.items, items = _f === void 0 ? [] : _f;
         var gapValue = gap
-            ? "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + ("" + (typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns))
+            ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns)
             : 16;
-        var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(" + columns + ", minmax(0px, " + (typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth) + "))", gridAutoRows: "minmax(0px, " + (typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight) + ")", gap: gapValue, padding: gapValue }, style);
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: kendo_react_common_1.classNames('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(InternalTile_1.InternalTile, { key: _this.props.dataItemKey ? kendo_react_common_1.getter(_this.props.dataItemKey)(tile) : index, update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
+        var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"), gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"), gap: gapValue, padding: gapValue }, style);
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
+                return (React.createElement(InternalTile_1.InternalTile, { key: _this.props.dataItemKey ? (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(tile) : index, update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
                     React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))));
             }) }));