@progress/kendo-react-layout 5.13.1 → 5.14.0-dev.202305011423

package/dist/es/bottomnavigation/BottomNavigation.js

@@ -14,7 +14,7 @@ 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 { FILL_CLASSES, ITEM_FLOW_CLASSES, POSITION_MODE_CLASSES, THEME_COLOR_CLASSES } from './models/utils';
+import { ITEM_FLOW_CLASSES, POSITION_MODE_CLASSES } from './models/utils';
 import { BottomNavigationItem } from './BottomNavigationItem';
 /**
  * Represents the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
@@ -50,13 +50,30 @@ export var BottomNavigation = React.forwardRef(function (props, ref) {
         focus: focusElement
     }); }, [focusElement]);
     React.useImperativeHandle(ref, getImperativeHandle);
-    var _a = props.themeColor, themeColor = _a === void 0 ? defaultProps.themeColor : _a, _b = props.fill, fill = _b === void 0 ? defaultProps.fill : _b, _c = props.positionMode, positionMode = _c === void 0 ? defaultProps.positionMode : _c, _d = props.itemFlow, itemFlow = _d === void 0 ? defaultProps.itemFlow : _d, _e = props.border, border = _e === void 0 ? defaultProps.border : _e, 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 _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 navClasses = React.useMemo(function () { return classNames('k-bottom-nav', POSITION_MODE_CLASSES[positionMode], THEME_COLOR_CLASSES[themeColor], FILL_CLASSES[fill], ITEM_FLOW_CLASSES[itemFlow], {
-        'k-bottom-nav-border': border,
-        'k-disabled': disabled
-    }, className); }, [positionMode, themeColor, fill, itemFlow, border, disabled, className]);
+    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;
@@ -89,7 +106,7 @@ export var BottomNavigation = React.forwardRef(function (props, ref) {
 });
 var defaultProps = {
     themeColor: 'primary',
-    fill: 'flat',
+    fillMode: 'flat',
     itemFlow: 'vertical',
     positionMode: 'fixed',
     border: true
@@ -105,6 +122,7 @@ BottomNavigation.propTypes = {
         '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,

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

@@ -38,6 +38,13 @@ export interface BottomNavigationProps {
      * * `inverse` — Applies coloring based on the inverted theme color.
      */
     themeColor?: BottomNavigationThemeColor;
+    /**
+     * **Deprecated**. Use `fillMode` prop instead.
+     *
+     * @deprecated
+     *
+     */
+    fill?: BottomNavigationFill;
     /**
      * The fill style of the BottomNavigation
      * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
@@ -46,7 +53,7 @@ export interface BottomNavigationProps {
      * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
      * * `solid` — Sets the theme color as a background color.
      */
-    fill?: BottomNavigationFill;
+    fillMode?: BottomNavigationFill;
     /**
      * Specifies the position and behavior of the BottomNavigation when the page is scrolled
      * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).

package/dist/es/breadcrumb/Breadcrumb.js

@@ -63,9 +63,9 @@ export var Breadcrumb = React.forwardRef(function (props, ref) {
         React.createElement(OrderedListComponent, null,
             React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
                 var key = item[valueField];
-                return (React.createElement(ListItemComponent, { key: key },
+                return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
                     index !== 0 && React.createElement(DelimiterComponent, null),
-                    React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
+                    React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
             })))));
 });
 var propTypes = {

package/dist/es/breadcrumb/BreadcrumbLink.d.ts

@@ -56,6 +56,10 @@ export interface BreadcrumbLinkProps {
      * @hidden
      */
     isLast?: boolean;
+    /**
+     * @hidden
+     */
+    isFirst?: boolean;
 }
 /**
  * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.

package/dist/es/breadcrumb/BreadcrumbLink.js

@@ -28,14 +28,19 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
             dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
-    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
+    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames({
+            'k-breadcrumb-root-link': props.isFirst,
+            'k-breadcrumb-link': !props.isFirst,
+            'k-breadcrumb-icontext-link': props.iconClass !== undefined && props.text,
+            'k-breadcrumb-icon-link': props.iconClass !== undefined && !props.text,
             'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass
             ?
                 React.createElement("span", { className: classNames('k-icon', props.iconClass) })
             : props.icon ? props.icon : '',
-        props.text));
+        props.text &&
+            React.createElement("span", { className: "k-breadcrumb-item-text" }, props.text)));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/es/breadcrumb/BreadcrumbListItem.d.ts

@@ -19,6 +19,14 @@ export interface BreadcrumbListItemProps {
      * Determines the children nodes.
      */
     children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    isFirstItem: any;
+    /**
+     * @hidden
+     */
+    isLastItem: any;
 }
 /**
  * Represents the target (element, props, and focus()) of the BreadcrumbListItem.

package/dist/es/breadcrumb/BreadcrumbListItem.js

@@ -21,7 +21,10 @@ export var BreadcrumbListItem = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("li", { ref: breadcrumbLIRef, id: props.id, style: props.style, className: classNames('k-flex-none k-breadcrumb-item', props.className) }, props.children));
+    return (React.createElement("li", { ref: breadcrumbLIRef, id: props.id, style: props.style, className: classNames('k-breadcrumb-item', {
+            'k-breadcrumb-root-item': props.isFirstItem,
+            'k-breadcrumb-last-item': props.isLastItem
+        }, props.className) }, props.children));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/es/breadcrumb/BreadcrumbOrderedList.js

@@ -15,7 +15,7 @@ export var BreadcrumbOrderedList = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: useDir(orderedListRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-breadcrumb-container k-flex-wrap', {
+    return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: useDir(orderedListRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-breadcrumb-container', {
             'k-disabled': props.disabled
         }, props.className) }, props.children));
 });

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1682925883,
+    publishDate: 1682949228,
     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/bottomnavigation/BottomNavigation.js

@@ -53,13 +53,30 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
         focus: focusElement
     }); }, [focusElement]);
     React.useImperativeHandle(ref, getImperativeHandle);
-    var _a = props.themeColor, themeColor = _a === void 0 ? defaultProps.themeColor : _a, _b = props.fill, fill = _b === void 0 ? defaultProps.fill : _b, _c = props.positionMode, positionMode = _c === void 0 ? defaultProps.positionMode : _c, _d = props.itemFlow, itemFlow = _d === void 0 ? defaultProps.itemFlow : _d, _e = props.border, border = _e === void 0 ? defaultProps.border : _e, 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 _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 (0, kendo_react_common_2.guid)(); }, []);
     var dir = (0, kendo_react_common_2.useDir)(elementRef, props.dir);
-    var navClasses = React.useMemo(function () { return (0, kendo_react_common_2.classNames)('k-bottom-nav', utils_1.POSITION_MODE_CLASSES[positionMode], utils_1.THEME_COLOR_CLASSES[themeColor], utils_1.FILL_CLASSES[fill], utils_1.ITEM_FLOW_CLASSES[itemFlow], {
-        'k-bottom-nav-border': border,
-        'k-disabled': disabled
-    }, className); }, [positionMode, themeColor, fill, itemFlow, border, disabled, className]);
+    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 (0, kendo_react_common_2.classNames)('k-bottom-nav', utils_1.POSITION_MODE_CLASSES[positionMode], utils_1.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;
@@ -92,7 +109,7 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
 });
 var defaultProps = {
     themeColor: 'primary',
-    fill: 'flat',
+    fillMode: 'flat',
     itemFlow: 'vertical',
     positionMode: 'fixed',
     border: true
@@ -108,6 +125,7 @@ exports.BottomNavigation.propTypes = {
         '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,

package/dist/npm/bottomnavigation/BottomNavigationProps.d.ts

@@ -38,6 +38,13 @@ export interface BottomNavigationProps {
      * * `inverse` — Applies coloring based on the inverted theme color.
      */
     themeColor?: BottomNavigationThemeColor;
+    /**
+     * **Deprecated**. Use `fillMode` prop instead.
+     *
+     * @deprecated
+     *
+     */
+    fill?: BottomNavigationFill;
     /**
      * The fill style of the BottomNavigation
      * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
@@ -46,7 +53,7 @@ export interface BottomNavigationProps {
      * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
      * * `solid` — Sets the theme color as a background color.
      */
-    fill?: BottomNavigationFill;
+    fillMode?: BottomNavigationFill;
     /**
      * Specifies the position and behavior of the BottomNavigation when the page is scrolled
      * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).

package/dist/npm/breadcrumb/Breadcrumb.js

@@ -66,9 +66,9 @@ exports.Breadcrumb = React.forwardRef(function (props, ref) {
         React.createElement(OrderedListComponent, null,
             React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
                 var key = item[valueField];
-                return (React.createElement(ListItemComponent, { key: key },
+                return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
                     index !== 0 && React.createElement(DelimiterComponent, null),
-                    React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
+                    React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
             })))));
 });
 var propTypes = {

package/dist/npm/breadcrumb/BreadcrumbLink.d.ts

@@ -56,6 +56,10 @@ export interface BreadcrumbLinkProps {
      * @hidden
      */
     isLast?: boolean;
+    /**
+     * @hidden
+     */
+    isFirst?: boolean;
 }
 /**
  * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.

package/dist/npm/breadcrumb/BreadcrumbLink.js

@@ -31,14 +31,19 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
             (0, kendo_react_common_1.dispatchEvent)(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
-    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(linkRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
+    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(linkRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)({
+            'k-breadcrumb-root-link': props.isFirst,
+            'k-breadcrumb-link': !props.isFirst,
+            'k-breadcrumb-icontext-link': props.iconClass !== undefined && props.text,
+            'k-breadcrumb-icon-link': props.iconClass !== undefined && !props.text,
             'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass
             ?
                 React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-icon', props.iconClass) })
             : props.icon ? props.icon : '',
-        props.text));
+        props.text &&
+            React.createElement("span", { className: "k-breadcrumb-item-text" }, props.text)));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/breadcrumb/BreadcrumbListItem.d.ts

@@ -19,6 +19,14 @@ export interface BreadcrumbListItemProps {
      * Determines the children nodes.
      */
     children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    isFirstItem: any;
+    /**
+     * @hidden
+     */
+    isLastItem: any;
 }
 /**
  * Represents the target (element, props, and focus()) of the BreadcrumbListItem.

package/dist/npm/breadcrumb/BreadcrumbListItem.js

@@ -24,7 +24,10 @@ exports.BreadcrumbListItem = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("li", { ref: breadcrumbLIRef, id: props.id, style: props.style, className: (0, kendo_react_common_1.classNames)('k-flex-none k-breadcrumb-item', props.className) }, props.children));
+    return (React.createElement("li", { ref: breadcrumbLIRef, id: props.id, style: props.style, className: (0, kendo_react_common_1.classNames)('k-breadcrumb-item', {
+            'k-breadcrumb-root-item': props.isFirstItem,
+            'k-breadcrumb-last-item': props.isLastItem
+        }, props.className) }, props.children));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/breadcrumb/BreadcrumbOrderedList.js

@@ -18,7 +18,7 @@ exports.BreadcrumbOrderedList = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(orderedListRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-breadcrumb-container k-flex-wrap', {
+    return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(orderedListRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-breadcrumb-container', {
             'k-disabled': props.disabled
         }, props.className) }, props.children));
 });

package/dist/npm/package-metadata.js

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