@progress/kendo-react-layout 4.14.1 → 5.0.1

package/dist/es/card/Avatar.js

@@ -1,31 +1,33 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-import { avatarType, avatarShape, avatarSize, avatarFill, avatarThemeColor } from './interfaces/Enums';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
+import { avatarType } from './interfaces/Enums';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 export var Avatar = function (props) {
+    var _a;
     validatePackage(packageMetadata);
-    return (React.createElement("div", { style: props.style, className: classNames('k-avatar', "k-avatar-" + props.fill, "k-avatar-" + props.shape, "k-avatar-" + props.themeColor, {
-            'k-avatar-bordered': props.border,
-            'k-avatar-sm': props.size === 'small',
-            'k-avatar-md': props.size === 'medium',
-            'k-avatar-lg': props.size === 'large'
-        }, props.className) },
+    return (React.createElement("div", { style: props.style, className: classNames('k-avatar', "k-avatar-" + props.type, (_a = {},
+            _a["k-rounded-" + (kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-avatar-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-avatar-" + props.fillMode] = props.fillMode,
+            _a["k-avatar-" + props.fillMode + "-" + props.themeColor] = Boolean(props.fillMode && props.themeColor),
+            _a), props.className) },
         React.createElement("span", { className: "k-avatar-" + props.type }, props.children)));
 };
 Avatar.propTypes = {
     className: PropTypes.string,
-    shape: PropTypes.oneOf(['circle', 'square', 'rounded', 'rectangle']),
     type: PropTypes.oneOf(['text', 'image', 'icon']),
-    fill: PropTypes.oneOf(['solid', 'outline']),
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    themeColor: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse', 'inherit'])
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'outline']),
+    /* eslint-disable max-len */
+    themeColor: PropTypes.oneOf([null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'])
 };
 Avatar.defaultProps = {
     type: avatarType.TEXT,
-    shape: avatarShape.SQUARE,
-    size: avatarSize.MEDIUM,
-    fill: avatarFill.SOLID,
-    themeColor: avatarThemeColor.PRIMARY
+    size: 'medium',
+    rounded: 'full',
+    fillMode: 'solid',
+    themeColor: 'primary'
 };

package/dist/es/card/interfaces/AvatarProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { avatarShape, avatarSize, avatarType, avatarFill, avatarThemeColor } from './Enums';
+import { avatarType } from './Enums';
 export interface AvatarProps {
     /**
      * Sets the Avatar children elements.
@@ -14,61 +14,72 @@ export interface AvatarProps {
      */
     className?: string;
     /**
-     * Specifies the appearance fill style of the Avatar.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `outline`
+     * Set the type of the Avatar.
      *
+     * The supported values are:
+     * * `image`
+     * * `text`
+     * * `icon`
      */
-    fill?: avatarFill | string;
+    type?: avatarType | string;
     /**
-     * Set the shape of the Avatar.
+     * Configures the `size` of the Button.
      *
-     * The supported values are:
-     * * (Default) `square`
-     * * `circle`
-     * * `rounded`
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
      */
-    shape?: avatarShape | string;
+    size?: null | 'small' | 'medium' | 'large';
     /**
-     * Specifies the size of the Avatar
+     * Configures the `roundness` of the Button.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
      *
+     * @default `medium`
      */
-    size?: avatarSize | string;
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
      * Sets a border to the Avatar.
      */
     border?: boolean;
     /**
-     * Set the type of the Avatar.
+     * Configures the `fillMode` of the Button.
      *
-     * The supported values are:
-     * * `image`
-     * * `text`
-     * * `icon`
+     * The available options are:
+     * - solid
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
      */
-    type?: avatarType | string;
+    fillMode?: null | 'solid' | 'outline';
     /**
-     * Specifies the theme color of the Avatar.
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - error
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
      *
-     * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
-     * * `secondary`&mdash;Applies coloring based on secondary theme color.
-     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
-     * * `info`&mdash;Applies coloring based on info theme color.
-     * * `success`&mdash; Applies coloring based on success theme color.
-     * * `warning`&mdash; Applies coloring based on warning theme color.
-     * * `error`&mdash; Applies coloring based on error theme color.
-     * * `dark`&mdash; Applies coloring based on dark theme color.
-     * * `light`&mdash; Applies coloring based on light theme color.
-     * * `inverse`&mdash; Applies coloring based on inverse theme color.
-     * * `inherit`&mdash; Applies inherited coloring value.
+     * @default `base`
      */
-    themeColor?: avatarThemeColor | string;
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
 }

package/dist/es/card/interfaces/Enums.d.ts

@@ -1,36 +1,8 @@
-export declare enum avatarShape {
-    CIRCLE = "circle",
-    SQUARE = "square",
-    ROUNDED = "rounded",
-    RECTANGLE = "rectangle"
-}
 export declare enum avatarType {
     TEXT = "text",
     IMAGE = "image",
     ICON = "icon"
 }
-export declare enum avatarSize {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
-export declare enum avatarFill {
-    SOLID = "solid",
-    OUTLINE = "outline"
-}
-export declare enum avatarThemeColor {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary",
-    INFO = "info",
-    SUCCESS = "success",
-    WARNING = "warning",
-    ERROR = "error",
-    DARK = "dark",
-    LIGHT = "light",
-    INVERSE = "inverse",
-    INHERIT = "inherit"
-}
 export declare enum cardOrientation {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"

package/dist/es/card/interfaces/Enums.js

@@ -1,41 +1,9 @@
-export var avatarShape;
-(function (avatarShape) {
-    avatarShape["CIRCLE"] = "circle";
-    avatarShape["SQUARE"] = "square";
-    avatarShape["ROUNDED"] = "rounded";
-    avatarShape["RECTANGLE"] = "rectangle";
-})(avatarShape || (avatarShape = {}));
 export var avatarType;
 (function (avatarType) {
     avatarType["TEXT"] = "text";
     avatarType["IMAGE"] = "image";
     avatarType["ICON"] = "icon";
 })(avatarType || (avatarType = {}));
-export var avatarSize;
-(function (avatarSize) {
-    avatarSize["SMALL"] = "small";
-    avatarSize["MEDIUM"] = "medium";
-    avatarSize["LARGE"] = "large";
-})(avatarSize || (avatarSize = {}));
-export var avatarFill;
-(function (avatarFill) {
-    avatarFill["SOLID"] = "solid";
-    avatarFill["OUTLINE"] = "outline";
-})(avatarFill || (avatarFill = {}));
-export var avatarThemeColor;
-(function (avatarThemeColor) {
-    avatarThemeColor["PRIMARY"] = "primary";
-    avatarThemeColor["SECONDARY"] = "secondary";
-    avatarThemeColor["TERTIARY"] = "tertiary";
-    avatarThemeColor["INFO"] = "info";
-    avatarThemeColor["SUCCESS"] = "success";
-    avatarThemeColor["WARNING"] = "warning";
-    avatarThemeColor["ERROR"] = "error";
-    avatarThemeColor["DARK"] = "dark";
-    avatarThemeColor["LIGHT"] = "light";
-    avatarThemeColor["INVERSE"] = "inverse";
-    avatarThemeColor["INHERIT"] = "inherit";
-})(avatarThemeColor || (avatarThemeColor = {}));
 export var cardOrientation;
 (function (cardOrientation) {
     cardOrientation["HORIZONTAL"] = "horizontal";

package/dist/es/menu/components/MenuItemInternal.js

@@ -156,7 +156,7 @@ var MenuItemInternal = /** @class */ (function (_super) {
         return classNames('k-item', 'k-menu-item', {
             'k-first': isFirstItemFromSiblings(item.id),
             'k-last': item.isLastFromSiblings,
-            'k-state-disabled': item.disabled
+            'k-disabled': item.disabled
         }, item.cssClass);
     };
     return MenuItemInternal;

package/dist/es/menu/components/MenuItemLink.js

@@ -32,7 +32,7 @@ var MenuItemLink = /** @class */ (function (_super) {
     };
     MenuItemLink.prototype.getMenuItemClassName = function () {
         return classNames('k-link', 'k-menu-link', {
-            'k-state-active': this.props.opened
+            'k-active': this.props.opened
         });
     };
     /**

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642516530,
+    publishDate: 1642765153,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/card/Avatar.js

@@ -7,27 +7,29 @@ var Enums_1 = require("./interfaces/Enums");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 exports.Avatar = function (props) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    return (React.createElement("div", { style: props.style, className: kendo_react_common_1.classNames('k-avatar', "k-avatar-" + props.fill, "k-avatar-" + props.shape, "k-avatar-" + props.themeColor, {
-            'k-avatar-bordered': props.border,
-            'k-avatar-sm': props.size === 'small',
-            'k-avatar-md': props.size === 'medium',
-            'k-avatar-lg': props.size === 'large'
-        }, props.className) },
+    return (React.createElement("div", { style: props.style, className: kendo_react_common_1.classNames('k-avatar', "k-avatar-" + props.type, (_a = {},
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-avatar-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-avatar-" + props.fillMode] = props.fillMode,
+            _a["k-avatar-" + props.fillMode + "-" + props.themeColor] = Boolean(props.fillMode && props.themeColor),
+            _a), props.className) },
         React.createElement("span", { className: "k-avatar-" + props.type }, props.children)));
 };
 exports.Avatar.propTypes = {
     className: PropTypes.string,
-    shape: PropTypes.oneOf(['circle', 'square', 'rounded', 'rectangle']),
     type: PropTypes.oneOf(['text', 'image', 'icon']),
-    fill: PropTypes.oneOf(['solid', 'outline']),
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    themeColor: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse', 'inherit'])
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'outline']),
+    /* eslint-disable max-len */
+    themeColor: PropTypes.oneOf([null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'])
 };
 exports.Avatar.defaultProps = {
     type: Enums_1.avatarType.TEXT,
-    shape: Enums_1.avatarShape.SQUARE,
-    size: Enums_1.avatarSize.MEDIUM,
-    fill: Enums_1.avatarFill.SOLID,
-    themeColor: Enums_1.avatarThemeColor.PRIMARY
+    size: 'medium',
+    rounded: 'full',
+    fillMode: 'solid',
+    themeColor: 'primary'
 };

package/dist/npm/card/interfaces/AvatarProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { avatarShape, avatarSize, avatarType, avatarFill, avatarThemeColor } from './Enums';
+import { avatarType } from './Enums';
 export interface AvatarProps {
     /**
      * Sets the Avatar children elements.
@@ -14,61 +14,72 @@ export interface AvatarProps {
      */
     className?: string;
     /**
-     * Specifies the appearance fill style of the Avatar.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `outline`
+     * Set the type of the Avatar.
      *
+     * The supported values are:
+     * * `image`
+     * * `text`
+     * * `icon`
      */
-    fill?: avatarFill | string;
+    type?: avatarType | string;
     /**
-     * Set the shape of the Avatar.
+     * Configures the `size` of the Button.
      *
-     * The supported values are:
-     * * (Default) `square`
-     * * `circle`
-     * * `rounded`
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
      */
-    shape?: avatarShape | string;
+    size?: null | 'small' | 'medium' | 'large';
     /**
-     * Specifies the size of the Avatar
+     * Configures the `roundness` of the Button.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
      *
+     * @default `medium`
      */
-    size?: avatarSize | string;
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
      * Sets a border to the Avatar.
      */
     border?: boolean;
     /**
-     * Set the type of the Avatar.
+     * Configures the `fillMode` of the Button.
      *
-     * The supported values are:
-     * * `image`
-     * * `text`
-     * * `icon`
+     * The available options are:
+     * - solid
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
      */
-    type?: avatarType | string;
+    fillMode?: null | 'solid' | 'outline';
     /**
-     * Specifies the theme color of the Avatar.
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - error
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
      *
-     * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
-     * * `secondary`&mdash;Applies coloring based on secondary theme color.
-     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
-     * * `info`&mdash;Applies coloring based on info theme color.
-     * * `success`&mdash; Applies coloring based on success theme color.
-     * * `warning`&mdash; Applies coloring based on warning theme color.
-     * * `error`&mdash; Applies coloring based on error theme color.
-     * * `dark`&mdash; Applies coloring based on dark theme color.
-     * * `light`&mdash; Applies coloring based on light theme color.
-     * * `inverse`&mdash; Applies coloring based on inverse theme color.
-     * * `inherit`&mdash; Applies inherited coloring value.
+     * @default `base`
      */
-    themeColor?: avatarThemeColor | string;
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
 }

package/dist/npm/card/interfaces/Enums.d.ts

@@ -1,36 +1,8 @@
-export declare enum avatarShape {
-    CIRCLE = "circle",
-    SQUARE = "square",
-    ROUNDED = "rounded",
-    RECTANGLE = "rectangle"
-}
 export declare enum avatarType {
     TEXT = "text",
     IMAGE = "image",
     ICON = "icon"
 }
-export declare enum avatarSize {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
-export declare enum avatarFill {
-    SOLID = "solid",
-    OUTLINE = "outline"
-}
-export declare enum avatarThemeColor {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary",
-    INFO = "info",
-    SUCCESS = "success",
-    WARNING = "warning",
-    ERROR = "error",
-    DARK = "dark",
-    LIGHT = "light",
-    INVERSE = "inverse",
-    INHERIT = "inherit"
-}
 export declare enum cardOrientation {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"

package/dist/npm/card/interfaces/Enums.js

@@ -1,43 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var avatarShape;
-(function (avatarShape) {
-    avatarShape["CIRCLE"] = "circle";
-    avatarShape["SQUARE"] = "square";
-    avatarShape["ROUNDED"] = "rounded";
-    avatarShape["RECTANGLE"] = "rectangle";
-})(avatarShape = exports.avatarShape || (exports.avatarShape = {}));
 var avatarType;
 (function (avatarType) {
     avatarType["TEXT"] = "text";
     avatarType["IMAGE"] = "image";
     avatarType["ICON"] = "icon";
 })(avatarType = exports.avatarType || (exports.avatarType = {}));
-var avatarSize;
-(function (avatarSize) {
-    avatarSize["SMALL"] = "small";
-    avatarSize["MEDIUM"] = "medium";
-    avatarSize["LARGE"] = "large";
-})(avatarSize = exports.avatarSize || (exports.avatarSize = {}));
-var avatarFill;
-(function (avatarFill) {
-    avatarFill["SOLID"] = "solid";
-    avatarFill["OUTLINE"] = "outline";
-})(avatarFill = exports.avatarFill || (exports.avatarFill = {}));
-var avatarThemeColor;
-(function (avatarThemeColor) {
-    avatarThemeColor["PRIMARY"] = "primary";
-    avatarThemeColor["SECONDARY"] = "secondary";
-    avatarThemeColor["TERTIARY"] = "tertiary";
-    avatarThemeColor["INFO"] = "info";
-    avatarThemeColor["SUCCESS"] = "success";
-    avatarThemeColor["WARNING"] = "warning";
-    avatarThemeColor["ERROR"] = "error";
-    avatarThemeColor["DARK"] = "dark";
-    avatarThemeColor["LIGHT"] = "light";
-    avatarThemeColor["INVERSE"] = "inverse";
-    avatarThemeColor["INHERIT"] = "inherit";
-})(avatarThemeColor = exports.avatarThemeColor || (exports.avatarThemeColor = {}));
 var cardOrientation;
 (function (cardOrientation) {
     cardOrientation["HORIZONTAL"] = "horizontal";

package/dist/npm/menu/components/MenuItemInternal.js

@@ -158,7 +158,7 @@ var MenuItemInternal = /** @class */ (function (_super) {
         return kendo_react_common_1.classNames('k-item', 'k-menu-item', {
             'k-first': itemsIdsUtils_1.isFirstItemFromSiblings(item.id),
             'k-last': item.isLastFromSiblings,
-            'k-state-disabled': item.disabled
+            'k-disabled': item.disabled
         }, item.cssClass);
     };
     return MenuItemInternal;

package/dist/npm/menu/components/MenuItemLink.js

@@ -34,7 +34,7 @@ var MenuItemLink = /** @class */ (function (_super) {
     };
     MenuItemLink.prototype.getMenuItemClassName = function () {
         return kendo_react_common_1.classNames('k-link', 'k-menu-link', {
-            'k-state-active': this.props.opened
+            'k-active': this.props.opened
         });
     };
     /**

package/dist/npm/package-metadata.js

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