@progress/kendo-react-layout 6.1.1 → 7.0.0-develop.1

package/dist/es/actionsheet/ActionSheet.js

@@ -1,267 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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);
-};
-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));
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Animation } from '@progress/kendo-react-animation';
-import { validatePackage, Navigation, FOCUSABLE_ELEMENTS, classNames } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { ActionSheetItem } from './ActionSheetItem';
-import { headerDisplayName } from './ActionSheetHeader';
-import { footerDisplayName } from './ActionSheetFooter';
-import { contentDisplayName } from './ActionSheetContent';
-/**
- * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
- */
-var ActionSheet = /** @class */ (function (_super) {
-    __extends(ActionSheet, _super);
-    /** @hidden */
-    function ActionSheet(props) {
-        var _this = _super.call(this, props) || this;
-        _this.actionSheetRef = React.createRef();
-        _this.actionSheetTitleClass = 'k-actionsheet-title';
-        _this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
-        _this.animationDuration = 300;
-        _this.bottomPosition = { bottom: '0', width: '100%' };
-        _this.handleKeyDown = function (e) {
-            if (_this.props.navigatable) {
-                _this.navigation.triggerKeyboardEvent(e);
-            }
-        };
-        _this.onTab = function (target, nav, ev) {
-            ev.preventDefault();
-            if (ev.shiftKey) {
-                nav.focusPrevious(target);
-            }
-            else {
-                nav.focusNext(target);
-            }
-        };
-        _this.handleOverlayClick = function (ev) {
-            /** Deprecated */
-            if (_this.props.onOverlayClick) {
-                _this.props.onOverlayClick.call(undefined, ev);
-            }
-            if (_this.props.onClose) {
-                _this.props.onClose.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.handleItemClick = function (ev) {
-            /** Deprecated */
-            if (_this.props.onItemClick) {
-                _this.props.onItemClick.call(undefined, ev);
-            }
-            if (_this.props.onItemSelect) {
-                _this.props.onItemSelect.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.onEnter = function (target, nav, ev) {
-            if (target.ariaDisabled) {
-                return;
-            }
-            var isItem = target.className && target.className.indexOf
-                ? target.className.indexOf('k-actionsheet-item') !== -1
-                : false;
-            var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
-            /** Deprecated */
-            if (isItem && _this.props.onItemClick) {
-                ev.preventDefault();
-                var item = _this.props.items[allItems.indexOf(target)];
-                _this.props.onItemClick.call(undefined, {
-                    syntheticEvent: ev,
-                    item: item,
-                    title: item && item.title
-                });
-            }
-            if (isItem && _this.props.onItemSelect) {
-                ev.preventDefault();
-                var item = _this.props.items[allItems.indexOf(target)];
-                _this.props.onItemSelect.call(undefined, {
-                    syntheticEvent: ev,
-                    item: item,
-                    title: item && item.title
-                });
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.onEscape = function (_target, _nav, ev) {
-            /** Deprecated */
-            if (_this.props.onOverlayClick) {
-                ev.preventDefault();
-                _this.props.onOverlayClick.call(undefined, ev);
-            }
-            if (_this.props.onClose) {
-                ev.preventDefault();
-                _this.props.onClose.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.hideActionSheet = function () {
-            _this.setState({ show: false });
-        };
-        _this.children = function (children) {
-            var components = {};
-            React.Children.forEach(children, function (child) {
-                if (child) {
-                    components[child.type.displayName] = child;
-                }
-                ;
-            });
-            return components;
-        };
-        _this.state = {
-            show: false,
-            slide: false
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    /** @hidden */
-    ActionSheet.prototype.componentDidMount = function () {
-        if (this.props.expand && !this.state.show) {
-            this.setState({ show: true });
-        }
-    };
-    /** @hidden */
-    ActionSheet.prototype.componentDidUpdate = function (_prevProps, prevState) {
-        var _this = this;
-        var currentRef = this.actionSheetRef.current;
-        if (this.props.expand && !this.state.show) {
-            this.setState({ show: true });
-        }
-        if (this.props.expand && this.state.show && !this.state.slide) {
-            this.setState({ slide: true });
-        }
-        if (!this.props.expand && this.state.show && this.state.slide) {
-            this.setState({ slide: false });
-        }
-        if (prevState !== this.state && this.state.slide && currentRef && !this.props.className) {
-            currentRef.style.setProperty('--kendo-actionsheet-height', 'auto');
-            currentRef.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
-        if (currentRef) {
-            if (this.props.navigatable) {
-                var innerElements = [
-                    '.k-actionsheet-footer',
-                    '.k-actionsheet-content',
-                    '.k-actionsheet-titlebar'
-                ].map(function (selector) {
-                    return FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
-                });
-                var selectors = __spreadArray([
-                    '.k-actionsheet-item'
-                ], innerElements.flat(), true);
-                this.navigation = new Navigation({
-                    tabIndex: this.props.tabIndex || 0,
-                    root: this.actionSheetRef,
-                    rovingTabIndex: false,
-                    selectors: selectors,
-                    keyboardEvents: {
-                        keydown: {
-                            'Tab': this.onTab,
-                            'Enter': this.onEnter,
-                            'Escape': this.onEscape
-                        }
-                    }
-                });
-                this.navigation.focusElement(this.navigation.first, null);
-            }
-        }
-    };
-    ;
-    /** @hidden */
-    ActionSheet.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
-        var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
-        var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
-        var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
-        var children = this.children(this.props.children);
-        var animationDuration = this.props.animationDuration || this.animationDuration;
-        var actionSheetPanel = this.state.slide && React.createElement("div", { className: classNames('k-actionsheet', this.props.className, {
-                'k-actionsheet-bottom': !this.props.className
-            }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
-            (children[headerDisplayName] && !title && !subTitle) && children[headerDisplayName],
-            (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
-                React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
-                        title && React.createElement("div", null, title),
-                        subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
-            children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
-                React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
-                })),
-                shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
-                React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
-                }))),
-            children[footerDisplayName]);
-        return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "k-actionsheet-container" },
-                React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
-                animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
-                    : actionSheetPanel)))
-            : null));
-    };
-    ;
-    /** @hidden */
-    ActionSheet.displayName = 'KendoReactActionSheet';
-    /** @hidden */
-    ActionSheet.propTypes = {
-        items: PropTypes.array,
-        subTitle: PropTypes.string,
-        title: PropTypes.string,
-        navigatable: PropTypes.bool,
-        navigatableElements: PropTypes.array
-    };
-    /** @hidden */
-    ActionSheet.defaultProps = {
-        navigatable: true,
-        navigatableElements: []
-    };
-    return ActionSheet;
-}(React.Component));
-export { ActionSheet };
-;

package/dist/es/actionsheet/ActionSheetContent.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps';
-/**
- * @hidden
- */
-export declare const contentDisplayName = "ActionSheetContent";
-/**
- * The KendoReact ActionSheetContent component.
- */
-export declare const ActionSheetContent: React.FunctionComponent<ActionSheetChildrenProps>;

package/dist/es/actionsheet/ActionSheetContent.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var contentDisplayName = 'ActionSheetContent';
-/**
- * The KendoReact ActionSheetContent component.
- */
-export var ActionSheetContent = function (props) {
-    return (React.createElement("div", { className: classNames('k-actionsheet-content', props.className) }, props.children));
-};
-ActionSheetContent.propTypes = {
-    className: PropTypes.string
-};
-/**
- * @hidden
- */
-ActionSheetContent.displayName = contentDisplayName;
-/**
- * @hidden
- */
-ActionSheetContent.propTypes = {
-    children: PropTypes.any
-};

package/dist/es/actionsheet/ActionSheetFooter.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps';
-/**
- * @hidden
- */
-export declare const footerDisplayName = "ActionSheetFooter";
-/**
- * The KendoReact ActionSheetFooter component.
- */
-export declare const ActionSheetFooter: React.FunctionComponent<ActionSheetChildrenProps>;

package/dist/es/actionsheet/ActionSheetFooter.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var footerDisplayName = 'ActionSheetFooter';
-/**
- * The KendoReact ActionSheetFooter component.
- */
-export var ActionSheetFooter = function (props) {
-    return (React.createElement("div", { className: classNames('k-actionsheet-footer', props.className) }, props.children));
-};
-ActionSheetFooter.propTypes = {
-    className: PropTypes.string
-};
-/**
- * @hidden
- */
-ActionSheetFooter.displayName = footerDisplayName;
-/**
- * @hidden
- */
-ActionSheetFooter.propTypes = {
-    children: PropTypes.any
-};

package/dist/es/actionsheet/ActionSheetHeader.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps';
-/**
- * @hidden
- */
-export declare const headerDisplayName = "ActionSheetHeader";
-/**
- * The KendoReact ActionSheetHeader component.
- */
-export declare const ActionSheetHeader: React.FunctionComponent<ActionSheetChildrenProps>;

package/dist/es/actionsheet/ActionSheetHeader.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var headerDisplayName = 'ActionSheetHeader';
-/**
- * The KendoReact ActionSheetHeader component.
- */
-export var ActionSheetHeader = function (props) {
-    return (React.createElement("div", { className: classNames('k-actionsheet-titlebar', props.className) }, props.children));
-};
-ActionSheetHeader.propTypes = {
-    className: PropTypes.string
-};
-/**
- * @hidden
- */
-ActionSheetHeader.displayName = headerDisplayName;
-/**
- * @hidden
- */
-ActionSheetHeader.propTypes = {
-    children: PropTypes.any
-};

package/dist/es/actionsheet/ActionSheetItem.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { ActionSheetItemProps } from './interfaces/ActionSheetItemProps';
-/**
- * The KendoReact ActionSheetItem component.
- */
-export declare const ActionSheetItem: React.FunctionComponent<ActionSheetItemProps>;

package/dist/es/actionsheet/ActionSheetItem.js

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * The KendoReact ActionSheetItem component.
- */
-export var ActionSheetItem = function (props) {
-    var itemRef = React.useRef(null);
-    var onClick = React.useCallback(function (event) {
-        if (props.onClick) {
-            props.onClick.call(undefined, {
-                syntheticEvent: event,
-                item: props.item,
-                title: props.title
-            });
-        }
-    }, [props.item, props.title, props.onClick]);
-    React.useEffect(function () {
-        if (itemRef.current && props.focused) {
-            itemRef.current.focus();
-        }
-    }, [props.focused]);
-    return (React.createElement("span", { style: props.style, tabIndex: props.tabIndex, className: classNames('k-actionsheet-item', 'k-cursor-pointer', props.disabled && 'k-disabled', props.className), ref: itemRef, role: "button", "aria-disabled": props.disabled, onClick: onClick },
-        React.createElement("span", { className: "k-actionsheet-action" },
-            props.icon && React.createElement("span", { className: "k-icon-wrap" }, props.icon),
-            (props.title || props.description) && (React.createElement("span", { className: "k-actionsheet-item-text" },
-                props.title && React.createElement("span", { className: "k-actionsheet-item-title" }, props.title),
-                props.description && React.createElement("span", { className: "k-actionsheet-item-description" }, props.description))))));
-};
-ActionSheetItem.propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    description: PropTypes.string,
-    disabled: PropTypes.bool,
-    group: PropTypes.oneOf(['top', 'bottom']),
-    icon: PropTypes.element,
-    title: PropTypes.string
-};

package/dist/es/actionsheet/interfaces/ActionSheetChildrenProps.d.ts

@@ -1,13 +0,0 @@
-/**
- * @hidden
- */
-export interface ActionSheetChildrenProps {
-    /**
-     * ClassName of the rendered element.
-     */
-    className?: any;
-    /**
-     * Represents the children that are passed to the ActionSheet.
-     */
-    children?: any;
-}

package/dist/es/actionsheet/interfaces/ActionSheetChildrenProps.js

@@ -1,5 +0,0 @@
-/**
- * @hidden
- */
-;
-export {};

package/dist/es/actionsheet/interfaces/ActionSheetItemProps.d.ts

@@ -1,67 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the props of the KendoReact ActionSheet component.
- */
-export interface ActionSheetItemProps {
-    /**
-     * Sets additional CSS classes to the ActionSheet.
-     */
-    className?: string;
-    /**
-     * Sets additional CSS styles to the ActionSheet.
-     */
-    style?: React.CSSProperties;
-    /**
-     * **Deprecated**. Specifies the `tabIndex` of the ActionSheetItem.
-     *
-     * Set the tabIndex to the ActionSheet component instead.
-     *
-     * @deprecated
-     *
-     */
-    tabIndex?: number;
-    /**
-     * Specifies additional text rendered under the item's title.
-     */
-    description?: string;
-    /**
-     * Specifies if the ActionSheet item is initially disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
-     * Each specifying whether the ActionSheet item will be rendered over the separator or under it.
-     */
-    group?: 'top' | 'bottom';
-    /**
-     * Defines the icon rendered inside the ActionSheet item.
-     */
-    icon?: React.ReactElement;
-    /**
-     * Specifies the text content of the ActionSheet item.
-     */
-    title?: string;
-    /**
-     * Specifies the ActionSheet item.
-     */
-    item?: any;
-    /**
-     * @hidden
-     */
-    onClick?: (event: {
-        syntheticEvent: React.SyntheticEvent;
-        title?: string;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onKeyDown?: (event: React.SyntheticEvent, title: string | undefined, id: number | undefined) => void;
-    /**
-     * @hidden
-     */
-    focused?: boolean;
-    /**
-     * @hidden
-     */
-    id?: number;
-}

package/dist/es/actionsheet/interfaces/ActionSheetItemProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/appbar/AppBar.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { AppBarProps } from './interfaces/AppBarProps';
-/**
- * The AppBar ref.
- */
-export interface AppBarHandle {
-    /**
-     * The AppBar element.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * Focus the AppBar.
-     */
-    focus: () => void;
-}
-/**
- * Represents the [KendoReact AppBar component]({% slug overview_appbar %}).
- * Used to display information, actions, branding titles and additional navigation on the current screen.
- *
- * @example
- * ```jsx
- *
- * const App = () => {
- *   return (
- *       <AppBar>
- *           <AppBarSection>
- *               <span className="k-icon k-i-menu" />
- *           </AppBarSection>
- *
- *           <AppBarSpacer style={{ width: 8 }} />
- *
- *           <AppBarSection>
- *               <h1 className="title">{tc.text} AppBar</h1>
- *           </AppBarSection>
- *
- *           <AppBarSpacer />
- *
- *           <AppBarSection>
- *               <BadgeContainer>
- *                   <span className="k-icon k-i-bell" />
- *                   <Badge themeColor="info" shape="dot" />
- *               </BadgeContainer>
- *           </AppBarSection>
- *      </AppBar>
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<AppBarHandle | null>>;

package/dist/es/appbar/AppBar.js

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, focusFirstFocusableChild, guid } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-/**
- * Represents the [KendoReact AppBar component]({% slug overview_appbar %}).
- * Used to display information, actions, branding titles and additional navigation on the current screen.
- *
- * @example
- * ```jsx
- *
- * const App = () => {
- *   return (
- *       <AppBar>
- *           <AppBarSection>
- *               <span className="k-icon k-i-menu" />
- *           </AppBarSection>
- *
- *           <AppBarSpacer style={{ width: 8 }} />
- *
- *           <AppBarSection>
- *               <h1 className="title">{tc.text} AppBar</h1>
- *           </AppBarSection>
- *
- *           <AppBarSpacer />
- *
- *           <AppBarSection>
- *               <BadgeContainer>
- *                   <span className="k-icon k-i-bell" />
- *                   <Badge themeColor="info" shape="dot" />
- *               </BadgeContainer>
- *           </AppBarSection>
- *      </AppBar>
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var AppBar = React.forwardRef(function (props, target) {
-    validatePackage(packageMetadata);
-    var children = props.children, className = props.className, style = props.style, id = props.id;
-    var elementRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            focusFirstFocusableChild(elementRef.current);
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    var calculatedId = React.useMemo(function () { return guid(); }, []);
-    var themeColor = React.useMemo(function () { return props.themeColor || defaultProps.themeColor; }, [props.themeColor]);
-    var position = React.useMemo(function () { return props.position || defaultProps.position; }, [props.position]);
-    var positionMode = React.useMemo(function () { return props.positionMode || defaultProps.positionMode; }, [props.positionMode]);
-    var appbarClasses = React.useMemo(function () { return classNames('k-appbar', {
-        'k-appbar-top': position === 'top',
-        'k-appbar-bottom': position === 'bottom',
-        'k-appbar-static': positionMode === 'static',
-        'k-appbar-sticky': positionMode === 'sticky',
-        'k-appbar-fixed': positionMode === 'fixed',
-        'k-appbar-light': themeColor === 'light',
-        'k-appbar-dark': themeColor === 'dark',
-        'k-appbar-inherit': themeColor === 'inherit'
-    }, className); }, [position, positionMode, themeColor, className]);
-    return (React.createElement("div", { className: appbarClasses, style: style, id: id || calculatedId }, children));
-});
-AppBar.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    id: PropTypes.string,
-    themeColor: PropTypes.string,
-    position: PropTypes.oneOf(['top', 'bottom']),
-    positionMode: PropTypes.oneOf(['static', 'sticky', 'fixed'])
-};
-var defaultProps = {
-    themeColor: 'light',
-    position: 'top',
-    positionMode: 'static'
-};
-AppBar.displayName = 'KendoAppBar';