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

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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { AppBarSectionProps } from './interfaces/AppBarSectionProps';
-/**
- * The AppBarSection ref.
- */
-export interface AppBarSectionHandle {
-    /**
-     * The AppBarSection element.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * Focus the AppBarSection.
-     */
-    focus: () => void;
-}
-/**
- * Represents the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
- *
- * @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 AppBarSection: React.ForwardRefExoticComponent<AppBarSectionProps & React.RefAttributes<AppBarSectionHandle | null>>;

package/dist/es/appbar/AppBarSection.js

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, focusFirstFocusableChild } from '@progress/kendo-react-common';
-/**
- * Represents the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
- *
- * @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 AppBarSection = React.forwardRef(function (props, target) {
-    var children = props.children, className = props.className, style = props.style;
-    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 sectionClasses = React.useMemo(function () { return classNames('k-appbar-section', className); }, [className]);
-    return (React.createElement("div", { className: sectionClasses, style: style }, children));
-});
-AppBarSection.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    style: PropTypes.object
-};
-AppBarSection.displayName = 'KendoAppBarSection';

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

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { AppBarSpacerProps } from './interfaces/AppBarSpacerProps';
-/**
- * The AppBarSpacer ref.
- */
-export interface AppBarSpacerHandle {
-    /**
-     * The AppBarSpacer element.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * Focus the AppBarSpacer.
-     */
-    focus: () => void;
-}
-/**
- * Represents the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
- *
- * @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 AppBarSpacer: React.ForwardRefExoticComponent<AppBarSpacerProps & React.RefAttributes<AppBarSpacerHandle | null>>;

package/dist/es/appbar/AppBarSpacer.js

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, focusFirstFocusableChild } from '@progress/kendo-react-common';
-/**
- * Represents the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
- *
- * @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 AppBarSpacer = React.forwardRef(function (props, target) {
-    var children = props.children, className = props.className, style = props.style;
-    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 spacerClasses = React.useMemo(function () { return classNames('k-appbar-spacer', {
-        'k-appbar-spacer-sized': style && style.width && style.width !== null
-    }, className); }, [className, style]);
-    var spacerStyles = React.useMemo(function () {
-        return {
-            flexBasis: style && style.width ? style.width : undefined
-        };
-    }, [style]);
-    return (React.createElement("span", { className: spacerClasses, style: spacerStyles }, children));
-});
-AppBarSpacer.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    style: PropTypes.object
-};
-AppBarSpacer.displayName = 'KendoAppBarSpacer';

package/dist/es/appbar/interfaces/AppBarProps.js

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

package/dist/es/appbar/interfaces/AppBarSectionProps.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the props of the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
- */
-export interface AppBarSectionProps {
-    /**
-     * Represents the children that are passed to the AppBarSection.
-     */
-    children?: any;
-    /**
-     * Sets additional CSS classes to the AppBarSection.
-     */
-    className?: string;
-    /**
-     * Sets additional CSS styles to the AppBarSection.
-     */
-    style?: React.CSSProperties;
-}

package/dist/es/appbar/interfaces/AppBarSectionProps.js

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

package/dist/es/appbar/interfaces/AppBarSpacerProps.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the props of the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
- */
-export interface AppBarSpacerProps {
-    /**
-     * Sets additional CSS classes to the AppBarSpacer.
-     */
-    className?: string;
-    /**
-     * Sets additional CSS styles to the AppBarSpacer.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Determines the children nodes.
-     */
-    children?: React.ReactNode;
-}

package/dist/es/appbar/interfaces/AppBarSpacerProps.js

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

package/dist/es/bottomnavigation/BottomNavigation.js

@@ -1,133 +0,0 @@
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { classNames, focusFirstFocusableChild, guid, useDir, dispatchEvent, Keys } from '@progress/kendo-react-common';
-import { ITEM_FLOW_CLASSES, POSITION_MODE_CLASSES } from './models/utils';
-import { BottomNavigationItem } from './BottomNavigationItem';
-/**
- * Represents the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
- * Used to switch between primary destinations in an application.
- *
- * @example
- * ```jsx
- * const items = [
- *    { text: 'Photos', icon: 'photo', selected: true },
- *    { text: 'Albums', icon: 'folder' },
- *    { text: 'Search', icon: 'search' },
- *    { text: 'More', icon: 'more-horizontal' },
- * ];
- *
- * const App = () => {
- *   return (
- *       <BottomNavigation items={items} />
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var BottomNavigation = React.forwardRef(function (props, ref) {
-    validatePackage(packageMetadata);
-    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(ref, getImperativeHandle);
-    var _a = props.positionMode, positionMode = _a === void 0 ? defaultProps.positionMode : _a, _b = props.itemFlow, itemFlow = _b === void 0 ? defaultProps.itemFlow : _b, _c = props.border, border = _c === void 0 ? defaultProps.border : _c, className = props.className, items = props.items, item = props.item, itemRender = props.itemRender, disabled = props.disabled, style = props.style, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown;
-    var navId = React.useMemo(function () { return guid(); }, []);
-    var dir = useDir(elementRef, props.dir);
-    var fillMode = React.useMemo(function () {
-        if (props.fillMode === null) {
-            return null;
-        }
-        else if (props.fill === null) {
-            return null;
-        }
-        else {
-            return props.fill || props.fillMode || defaultProps.fillMode;
-        }
-    }, [props.fillMode, props.fill]);
-    var themeColor = React.useMemo(function () { return props.themeColor || defaultProps.themeColor; }, [props.themeColor]);
-    var navClasses = React.useMemo(function () {
-        var _a;
-        return classNames('k-bottom-nav', POSITION_MODE_CLASSES[positionMode], ITEM_FLOW_CLASSES[itemFlow], (_a = {},
-            _a["k-bottom-nav-".concat(fillMode)] = fillMode,
-            _a["k-bottom-nav-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
-            _a['k-bottom-nav-border'] = border,
-            _a['k-disabled'] = disabled,
-            _a), className);
-    }, [positionMode, themeColor, fillMode, itemFlow, border, disabled, className]);
-    var dispatchSelectEvent = React.useCallback(function (dispatchedEvent, index) {
-        if (!items) {
-            return;
-        }
-        if (!items[index].disabled && onSelect) {
-            dispatchEvent(onSelect, dispatchedEvent, getImperativeHandle(), {
-                itemTarget: items[index],
-                itemIndex: index
-            });
-        }
-    }, [items, onSelect]);
-    var handleSelect = React.useCallback(function (event, clickedItemIndex) {
-        dispatchSelectEvent(event, clickedItemIndex);
-    }, [dispatchSelectEvent]);
-    var handleKeyDown = React.useCallback(function (event, clickedItemIndex) {
-        switch (event.keyCode) {
-            case Keys.enter:
-            case Keys.space:
-                dispatchSelectEvent(event, clickedItemIndex);
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-        dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
-    }, [dispatchSelectEvent, onKeyDown]);
-    return (React.createElement("nav", { ref: elementRef, className: navClasses, style: style, id: id || navId, dir: dir }, items && (items.map(function (element, index) {
-        return (React.createElement(BottomNavigationItem, __assign({}, element, { key: index, index: index, id: "".concat(id || navId, "-").concat(index), disabled: disabled || element.disabled, selected: element.selected, dataItem: element, item: item, render: itemRender, onSelect: handleSelect, onKeyDown: handleKeyDown })));
-    }))));
-});
-var defaultProps = {
-    themeColor: 'primary',
-    fillMode: 'flat',
-    itemFlow: 'vertical',
-    positionMode: 'fixed',
-    border: true
-};
-BottomNavigation.propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    id: PropTypes.string,
-    dir: PropTypes.string,
-    themeColor: PropTypes.oneOf([
-        'primary', 'secondary', 'tertiary',
-        'info', 'success', 'warning',
-        'error', 'dark', 'light', 'inverse'
-    ]),
-    fill: PropTypes.oneOf(['solid', 'flat']),
-    fillMode: PropTypes.oneOf(['solid', 'flat']),
-    itemFlow: PropTypes.oneOf(['vertical', 'horizontal']),
-    border: PropTypes.bool,
-    disabled: PropTypes.bool,
-    selected: PropTypes.number,
-    onSelect: PropTypes.func
-};
-BottomNavigation.defaultProps = defaultProps;
-BottomNavigation.displayName = 'KendoReactBottomNavigation';

package/dist/es/bottomnavigation/BottomNavigationItem.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { BottomNavigationItemProps } from '../main';
-/**
- * @hidden
- */
-export interface BottomNavigationItemHandle {
-    element: HTMLElement | null;
-}
-/**
- * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
- */
-export declare const BottomNavigationItem: React.ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & React.RefAttributes<BottomNavigationItemHandle | null>>;

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { IconWrap, svgIconPropType, validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
- */
-export var BottomNavigationItem = React.forwardRef(function (props, ref) {
-    validatePackage(packageMetadata);
-    var elementRef = React.useRef(null);
-    React.useImperativeHandle(ref, function () { return ({
-        element: elementRef.current
-    }); });
-    var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, svgIcon = props.svgIcon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
-    var itemClasses = React.useMemo(function () { return classNames('k-bottom-nav-item', {
-        'k-selected': selected,
-        'k-disabled': disabled
-    }, className); }, [selected, disabled, className]);
-    var handleClick = React.useCallback(function (event) {
-        if (onSelect && index !== undefined && !disabled) {
-            onSelect(event, index);
-        }
-    }, [onSelect, index, disabled]);
-    var handleKeyDown = React.useCallback(function (event) {
-        if (onKeyDown && index !== undefined && !disabled) {
-            onKeyDown(event, index);
-        }
-    }, [onKeyDown, index, disabled]);
-    var renderer = render;
-    var ItemComp = item;
-    var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
-        (React.createElement(React.Fragment, null,
-            (icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon, size: 'xlarge' }),
-            text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
-    return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
-});
-var defaultProps = {
-    tabIndex: 0
-};
-BottomNavigationItem.propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    id: PropTypes.string,
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    text: PropTypes.string,
-    tabIndex: PropTypes.number
-};
-BottomNavigationItem.defaultProps = defaultProps;
-BottomNavigationItem.displayName = 'KendoReactBottomNavigationItem';

package/dist/es/bottomnavigation/BottomNavigationItemProps.d.ts

@@ -1,61 +0,0 @@
-/// <reference types="react" />
-import { SVGIcon } from '@progress/kendo-react-common';
-/**
- * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
- */
-export interface BottomNavigationItemProps {
-    /**
-     * Sets additional CSS classes to the BottomNavigation item.
-     */
-    className?: string;
-    /**
-     * Sets additional CSS styles to the BottomNavigation item.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Disables the BottomNavigation item.
-     */
-    disabled?: boolean;
-    /**
-     * Specifies if the BottomNavigation item is selected.
-     */
-    selected?: boolean;
-    /**
-     * Defines the name for an existing icon in a KendoReact theme.
-     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
-     */
-    icon?: string;
-    /**
-     * Defines an SVG icon.
-     * The icon is rendered inside the BottomNavigation item.
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * Specifies the text content of the BottomNavigation item.
-     */
-    text?: React.ReactNode;
-    /**
-     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
-     */
-    tabIndex?: number;
-    /**
-     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
-     */
-    [customProp: string]: any;
-    /**
-     * @hidden
-     */
-    index?: number;
-    /**
-     * @hidden
-     */
-    item?: any;
-    /**
-     * @hidden
-     */
-    dataItem?: any;
-    /**
-     * @hidden
-     */
-    id?: string;
-}

package/dist/es/bottomnavigation/BottomNavigationItemProps.js

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

package/dist/es/bottomnavigation/BottomNavigationProps.js

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

package/dist/es/bottomnavigation/models/events.d.ts

@@ -1,20 +0,0 @@
-import { BottomNavigationHandle } from '../BottomNavigation';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onSelect` BottomNavigation event.
- */
-export interface BottomNavigationSelectEvent extends BaseEvent<BottomNavigationHandle> {
-    /**
-     * A BottomNavigation item event target.
-     */
-    itemTarget: any;
-    /**
-     * The index of the selected BottomNavigation item.
-     */
-    itemIndex: number;
-}
-/**
- * Represents the return type of the BottomNavigation events.
- */
-export interface BottomNavigationEvent extends BaseEvent<BottomNavigationHandle> {
-}

package/dist/es/bottomnavigation/models/events.js

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

package/dist/es/bottomnavigation/models/utils.d.ts

@@ -1,36 +0,0 @@
-/**
- * @hidden
- */
-export declare const THEME_COLOR_CLASSES: {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
-    dark: string;
-    light: string;
-    inverse: string;
-};
-/**
- * @hidden
- */
-export declare const FILL_CLASSES: {
-    flat: string;
-    solid: string;
-};
-/**
- * @hidden
- */
-export declare const ITEM_FLOW_CLASSES: {
-    vertical: string;
-    horizontal: string;
-};
-/**
- * @hidden
- */
-export declare const POSITION_MODE_CLASSES: {
-    fixed: string;
-    sticky: string;
-};

package/dist/es/bottomnavigation/models/utils.js

@@ -1,36 +0,0 @@
-/**
- * @hidden
- */
-export var THEME_COLOR_CLASSES = {
-    'primary': 'k-bottom-nav-primary',
-    'secondary': 'k-bottom-nav-secondary',
-    'tertiary': 'k-bottom-nav-tertiary',
-    'info': 'k-bottom-nav-info',
-    'success': 'k-bottom-nav-success',
-    'warning': 'k-bottom-nav-warning',
-    'error': 'k-bottom-nav-error',
-    'dark': 'k-bottom-nav-dark',
-    'light': 'k-bottom-nav-light',
-    'inverse': 'k-bottom-nav-inverse'
-};
-/**
- * @hidden
- */
-export var FILL_CLASSES = {
-    'flat': 'k-bottom-nav-flat',
-    'solid': 'k-bottom-nav-solid'
-};
-/**
- * @hidden
- */
-export var ITEM_FLOW_CLASSES = {
-    'vertical': 'k-bottom-nav-item-flow-vertical',
-    'horizontal': 'k-bottom-nav-item-flow-horizontal'
-};
-/**
- * @hidden
- */
-export var POSITION_MODE_CLASSES = {
-    'fixed': 'k-pos-fixed',
-    'sticky': 'k-pos-sticky'
-};