@progress/kendo-react-layout 4.14.0-dev.202112301830 → 4.14.0-dev.202201131128

package/dist/es/expansionpanel/ExpansionPanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces';
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle>>;

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export var ExpansionPanel = React.forwardRef(function (props, target) {
+    var _a;
+    validatePackage(packageMetadata);
+    var elementRef = React.useRef(null);
+    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
+    React.useImperativeHandle(target, getImperativeHandle);
+    var _c = props.expanded, expanded = _c === void 0 ? false : _c, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var onClick = React.useCallback(function (event) {
+        dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+    }, [onAction, expanded]);
+    var onKeyDown = React.useCallback(function (event) {
+        if (event.keyCode === Keys.enter || event.keyCode === Keys.space) {
+            dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+        }
+    }, [onAction, expanded]);
+    var handleFocus = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(true);
+    }, [props.disabled]);
+    var handleBlur = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(false);
+    }, [props.disabled]);
+    var _d = useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
+    return (React.createElement("div", { ref: elementRef, className: classNames('k-expander', props.className, {
+            'k-expanded': expanded,
+            'k-state-focus': focused && !disabled,
+            'k-state-disabled': disabled
+        }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: useRtl(elementRef, props.dir), tabIndex: getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
+        React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
+            title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,
+            React.createElement("span", { className: "k-spacer" }),
+            subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
+            React.createElement("span", { className: "k-expander-indicator" },
+                React.createElement("span", { className: classNames((_a = {},
+                        // expand icon
+                        _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
+                        _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
+                        // collapse icon
+                        _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
+                        _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
+                        _a)) }))),
+        props.children));
+});
+ExpansionPanel.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    dir: PropTypes.string,
+    id: PropTypes.string,
+    tabIndex: PropTypes.number,
+    title: PropTypes.node,
+    subtitle: PropTypes.node,
+    expandIcon: PropTypes.string,
+    collapseIcon: PropTypes.string,
+    expanded: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onAction: PropTypes.func
+};
+ExpansionPanel.displayName = 'KendoReactExpansionPanel';

package/dist/es/expansionpanel/ExpansionPanelContent.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export declare const ExpansionPanelContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/es/expansionpanel/ExpansionPanelContent.js

@@ -0,0 +1,21 @@
+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 { classNames } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export var ExpansionPanelContent = React.forwardRef(function (props, ref) {
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: classNames('k-expander-content-wrapper', props.className) }),
+        React.createElement("div", { className: 'k-expander-content' }, props.children)));
+});
+ExpansionPanelContent.displayName = 'KendoReactExpansionPanelContent';

package/dist/es/expansionpanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';
+export * from './interfaces';

package/dist/es/expansionpanel/index.js

@@ -0,0 +1,2 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';

package/dist/es/expansionpanel/interfaces.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The ExpansionPanel ref.
+ */
+export interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+/**
+ * The props of the ExpansionPanel component.
+ */
+export interface ExpansionPanelProps {
+    /**
+     * The React elements that will be rendered inside the ExpansionPanel.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ExpansionPanel.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     */
+    disabled?: boolean;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}

package/dist/es/main.d.ts

@@ -74,3 +74,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
 export * from './breadcrumb/BreadcrumbListItem';
 export * from './breadcrumb/BreadcrumbDelimiter';
 export * from './breadcrumb/BreadcrumbLink';
+export * from './expansionpanel';

package/dist/es/main.js

@@ -41,3 +41,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
 export * from './breadcrumb/BreadcrumbListItem';
 export * from './breadcrumb/BreadcrumbDelimiter';
 export * from './breadcrumb/BreadcrumbLink';
+export * from './expansionpanel';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1640888048,
+    publishDate: 1642072088,
     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/expansionpanel/ExpansionPanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces';
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle>>;

package/dist/npm/expansionpanel/ExpansionPanel.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var package_metadata_1 = require("../package-metadata");
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+exports.ExpansionPanel = React.forwardRef(function (props, target) {
+    var _a;
+    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+    var elementRef = React.useRef(null);
+    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
+    React.useImperativeHandle(target, getImperativeHandle);
+    var _c = props.expanded, expanded = _c === void 0 ? false : _c, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var onClick = React.useCallback(function (event) {
+        kendo_react_common_1.dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+    }, [onAction, expanded]);
+    var onKeyDown = React.useCallback(function (event) {
+        if (event.keyCode === kendo_react_common_1.Keys.enter || event.keyCode === kendo_react_common_1.Keys.space) {
+            kendo_react_common_1.dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+        }
+    }, [onAction, expanded]);
+    var handleFocus = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(true);
+    }, [props.disabled]);
+    var handleBlur = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(false);
+    }, [props.disabled]);
+    var _d = kendo_react_common_1.useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
+    return (React.createElement("div", { ref: elementRef, className: kendo_react_common_1.classNames('k-expander', props.className, {
+            'k-expanded': expanded,
+            'k-state-focus': focused && !disabled,
+            'k-state-disabled': disabled
+        }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: kendo_react_common_1.useRtl(elementRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
+        React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
+            title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,
+            React.createElement("span", { className: "k-spacer" }),
+            subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
+            React.createElement("span", { className: "k-expander-indicator" },
+                React.createElement("span", { className: kendo_react_common_1.classNames((_a = {},
+                        // expand icon
+                        _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
+                        _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
+                        // collapse icon
+                        _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
+                        _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
+                        _a)) }))),
+        props.children));
+});
+exports.ExpansionPanel.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    dir: PropTypes.string,
+    id: PropTypes.string,
+    tabIndex: PropTypes.number,
+    title: PropTypes.node,
+    subtitle: PropTypes.node,
+    expandIcon: PropTypes.string,
+    collapseIcon: PropTypes.string,
+    expanded: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onAction: PropTypes.func
+};
+exports.ExpansionPanel.displayName = 'KendoReactExpansionPanel';

package/dist/npm/expansionpanel/ExpansionPanelContent.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export declare const ExpansionPanelContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/npm/expansionpanel/ExpansionPanelContent.js

@@ -0,0 +1,23 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var React = require("react");
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+exports.ExpansionPanelContent = React.forwardRef(function (props, ref) {
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: kendo_react_common_1.classNames('k-expander-content-wrapper', props.className) }),
+        React.createElement("div", { className: 'k-expander-content' }, props.children)));
+});
+exports.ExpansionPanelContent.displayName = 'KendoReactExpansionPanelContent';

package/dist/npm/expansionpanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';
+export * from './interfaces';

package/dist/npm/expansionpanel/index.js

@@ -0,0 +1,7 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./ExpansionPanel"));
+__export(require("./ExpansionPanelContent"));

package/dist/npm/expansionpanel/interfaces.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The ExpansionPanel ref.
+ */
+export interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+/**
+ * The props of the ExpansionPanel component.
+ */
+export interface ExpansionPanelProps {
+    /**
+     * The React elements that will be rendered inside the ExpansionPanel.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ExpansionPanel.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     */
+    disabled?: boolean;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}

package/dist/npm/expansionpanel/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/main.d.ts

@@ -74,3 +74,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
 export * from './breadcrumb/BreadcrumbListItem';
 export * from './breadcrumb/BreadcrumbDelimiter';
 export * from './breadcrumb/BreadcrumbLink';
+export * from './expansionpanel';

package/dist/npm/main.js

@@ -46,3 +46,4 @@ __export(require("./breadcrumb/BreadcrumbOrderedList"));
 __export(require("./breadcrumb/BreadcrumbListItem"));
 __export(require("./breadcrumb/BreadcrumbDelimiter"));
 __export(require("./breadcrumb/BreadcrumbLink"));
+__export(require("./expansionpanel"));

package/dist/npm/package-metadata.js

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