@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/plate/cssm/components/base-plate/Component.js

@@ -1,36 +1,47 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { IconButton } from '../../../../icon-button/cssm';
-import { useFocus } from '@alfalab/hooks';
-import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { ButtonList } from '../button-list/component.js';
-import commonStyles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var hooks = require('@alfalab/hooks');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+var components_buttonList_component = require('../button-list/component.js');
+var commonStyles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
 /* eslint-disable complexity */
-const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, rounded = true, limitContentWidth = true, leftAddons, subAddons, children, buttons, title, titleView = 'bold', view = 'common', border = view !== 'custom', shadow = view === 'custom', className, buttonsClassName, contentClassName, subAddonsClassName, dataTestId, onClick, onClose, onToggle, rowLimit, styles = {}, }, ref) => {
-    const plateRef = useRef(null);
-    const contentRef = useRef(null);
-    const subAddonsRef = useRef(null);
-    const [focused] = useFocus(plateRef, 'keyboard');
-    const [isHidden, setIsHidden] = useState(false);
-    const [foldedState, setFoldedState] = useState(defaultFolded);
-    const uncontrolled = foldedProp === undefined;
-    const foldable = !!title && !!children && foldableProp;
-    const folded = uncontrolled ? foldedState : foldedProp;
-    const hasButtons = !!buttons && typeof buttons !== 'boolean';
-    const hasContent = children || hasButtons;
-    const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
-    const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
-    const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`];
-    const handleClick = useCallback((event) => {
-        const target = event.target;
-        const eventInsideComponent = plateRef.current && plateRef.current.contains(target);
-        const eventInsideContent = contentRef.current && contentRef.current.contains(target);
-        const eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
-        const clickSimilarKeys = ['Enter', ' '].includes(event.key);
-        const shouldChangeIsFolded = eventInsideComponent &&
+var BasePlate = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var hasCloser = _a.hasCloser, _g = _a.foldable, foldableProp = _g === void 0 ? false : _g, foldedProp = _a.folded, _h = _a.defaultFolded, defaultFolded = _h === void 0 ? true : _h, _j = _a.rounded, rounded = _j === void 0 ? true : _j, _k = _a.limitContentWidth, limitContentWidth = _k === void 0 ? true : _k, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _l = _a.titleView, titleView = _l === void 0 ? 'bold' : _l, _m = _a.view, view = _m === void 0 ? 'common' : _m, _o = _a.border, border = _o === void 0 ? view !== 'custom' : _o, _p = _a.shadow, shadow = _p === void 0 ? view === 'custom' : _p, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle, rowLimit = _a.rowLimit, _q = _a.styles, styles = _q === void 0 ? {} : _q;
+    var plateRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var subAddonsRef = React.useRef(null);
+    var focused = hooks.useFocus(plateRef, 'keyboard')[0];
+    var _r = React.useState(false), isHidden = _r[0], setIsHidden = _r[1];
+    var _s = React.useState(defaultFolded), foldedState = _s[0], setFoldedState = _s[1];
+    var uncontrolled = foldedProp === undefined;
+    var foldable = !!title && !!children && foldableProp;
+    var folded = uncontrolled ? foldedState : foldedProp;
+    var hasButtons = !!buttons && typeof buttons !== 'boolean';
+    var hasContent = children || hasButtons;
+    var hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
+    var rowLimitStyles = rowLimit && commonStyles__default.default["rowLimit".concat(rowLimit)];
+    var handleClick = React.useCallback(function (event) {
+        var target = event.target;
+        var eventInsideComponent = plateRef.current && plateRef.current.contains(target);
+        var eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        var eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
+        var clickSimilarKeys = ['Enter', ' '].includes(event.key);
+        var shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
             !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
@@ -46,7 +57,7 @@ const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folde
             onClick(event);
         }
     }, [foldable, onClick, uncontrolled, onToggle, foldedState, foldedProp]);
-    const handleClose = useCallback((event) => {
+    var handleClose = React.useCallback(function (event) {
         setIsHidden(true);
         if (onClose) {
             onClose(event);
@@ -54,42 +65,42 @@ const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folde
     }, [onClose]);
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", { className: cn(commonStyles.component, commonStyles[view], {
-            [commonStyles.foldable]: foldable,
-            [commonStyles.focused]: focused,
-            [commonStyles.isHidden]: hasCloser && isHidden,
-            [commonStyles.isFolded]: foldable && folded,
-            [commonStyles.rounded]: rounded,
-            [commonStyles.rect]: !rounded,
-            [commonStyles.noBorder]: !border,
-            [commonStyles.shadow]: shadow,
-        }, className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
+    React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[view], (_b = {},
+            _b[commonStyles__default.default.foldable] = foldable,
+            _b[commonStyles__default.default.focused] = focused,
+            _b[commonStyles__default.default.isHidden] = hasCloser && isHidden,
+            _b[commonStyles__default.default.isFolded] = foldable && folded,
+            _b[commonStyles__default.default.rounded] = rounded,
+            _b[commonStyles__default.default.rect] = !rounded,
+            _b[commonStyles__default.default.noBorder] = !border,
+            _b[commonStyles__default.default.shadow] = shadow,
+            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default.default([plateRef, ref]), 
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
         tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React.createElement("div", { className: commonStyles.inner },
-            leftAddons && React.createElement("div", { className: commonStyles.leftAddons }, leftAddons),
-            React.createElement("div", { className: cn(commonStyles.contentContainer, contentClassName, {
-                    [commonStyles.withoutTitle]: !title && hasAnyAddons,
-                    [commonStyles.limitWidth]: limitContentWidth,
-                }) },
-                title && (React.createElement("div", { className: cn(commonStyles[titleView], {
-                        [styles[titleView]]: Boolean(styles[titleView]),
-                    }) }, title)),
-                hasContent && (React.createElement("div", { ref: contentRef, className: cn(commonStyles.content, {
-                        [commonStyles.isFolded]: foldable && folded,
-                    }) },
-                    children && (React.createElement("div", { className: cn(commonStyles.description, styles.description, rowLimitStyles) }, children)),
-                    hasButtons && (React.createElement("div", { className: styles.footer },
-                        React.createElement(ButtonList, { buttons: buttons, containerClassName: cn(commonStyles.containerButton, buttonsClassName), buttonClassName: cn(commonStyles.button, buttonsClassName) })))))),
-            hasSubAddons && (React.createElement("div", { ref: subAddonsRef, className: commonStyles.subAddons },
-                React.createElement(ButtonList, { buttons: subAddons, containerClassName: cn(subAddonsClassName, commonStyles.rowReverse), buttonClassName: commonStyles.button }))),
-            foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement("div", { className: cn(commonStyles.folder, {
-                        [commonStyles.isFolded]: folded,
-                    }) },
-                    React.createElement(ChevronDownMIcon, null)))),
-            hasCloser && !foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement(IconButton, { className: commonStyles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon, size: 'xxs', onClick: handleClose }))))));
+        React__default.default.createElement("div", { className: commonStyles__default.default.inner },
+            leftAddons && React__default.default.createElement("div", { className: commonStyles__default.default.leftAddons }, leftAddons),
+            React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.contentContainer, contentClassName, (_c = {},
+                    _c[commonStyles__default.default.withoutTitle] = !title && hasAnyAddons,
+                    _c[commonStyles__default.default.limitWidth] = limitContentWidth,
+                    _c)) },
+                title && (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default[titleView], (_d = {},
+                        _d[styles[titleView]] = Boolean(styles[titleView]),
+                        _d)) }, title)),
+                hasContent && (React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(commonStyles__default.default.content, (_e = {},
+                        _e[commonStyles__default.default.isFolded] = foldable && folded,
+                        _e)) },
+                    children && (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.description, styles.description, rowLimitStyles) }, children)),
+                    hasButtons && (React__default.default.createElement("div", { className: styles.footer },
+                        React__default.default.createElement(components_buttonList_component.ButtonList, { buttons: buttons, containerClassName: cn__default.default(commonStyles__default.default.containerButton, buttonsClassName), buttonClassName: cn__default.default(commonStyles__default.default.button, buttonsClassName) })))))),
+            hasSubAddons && (React__default.default.createElement("div", { ref: subAddonsRef, className: commonStyles__default.default.subAddons },
+                React__default.default.createElement(components_buttonList_component.ButtonList, { buttons: subAddons, containerClassName: cn__default.default(subAddonsClassName, commonStyles__default.default.rowReverse), buttonClassName: commonStyles__default.default.button }))),
+            foldable && (React__default.default.createElement("div", { className: commonStyles__default.default.rightAddons },
+                React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.folder, (_f = {},
+                        _f[commonStyles__default.default.isFolded] = folded,
+                        _f)) },
+                    React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
+            hasCloser && !foldable && (React__default.default.createElement("div", { className: commonStyles__default.default.rightAddons },
+                React__default.default.createElement(coreComponentsIconButton.IconButton, { className: commonStyles__default.default.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose }))))));
 });
 
-export { BasePlate };
+exports.BasePlate = BasePlate;

package/plate/cssm/components/base-plate/index.js

@@ -1,10 +1,7 @@
-export { BasePlate } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../button-list/component.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_basePlate_Component = require('./Component.js');
+
+
+
+exports.BasePlate = components_basePlate_Component.BasePlate;

package/plate/cssm/components/button-list/component.js

@@ -1,20 +1,30 @@
-import React from 'react';
-import cn from 'classnames';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ButtonList = ({ buttons, buttonClassName, containerClassName, }) => {
-    const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var ButtonList = function (_a) {
+    var buttons = _a.buttons, buttonClassName = _a.buttonClassName, containerClassName = _a.containerClassName;
+    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
     if (buttonsIsArray) {
-        return (React.createElement("div", { className: containerClassName }, buttons.map((button, index) => button
-            ? React.cloneElement(button, {
-                // eslint-disable-next-line react/no-array-index-key
-                key: index,
-                size: 'xxs',
-                view: index === 0 ? 'secondary' : 'link',
-                className: cn(button.props.className, buttonClassName),
-            })
-            : null)));
+        return (React__default.default.createElement("div", { className: containerClassName }, buttons.map(function (button, index) {
+            return button
+                ? React__default.default.cloneElement(button, {
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index,
+                    size: 'xxs',
+                    view: index === 0 ? 'secondary' : 'link',
+                    className: cn__default.default(button.props.className, buttonClassName),
+                })
+                : null;
+        })));
     }
-    return React.createElement("div", { className: containerClassName }, buttons);
+    return React__default.default.createElement("div", { className: containerClassName }, buttons);
 };
 
-export { ButtonList };
+exports.ButtonList = ButtonList;

package/plate/cssm/desktop/Component.desktop.js

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePlate } from '../components/base-plate/Component.js';
-import styles from './desktop.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-
-const PlateDesktop = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));
-
-export { PlateDesktop };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePlate_Component = require('../components/base-plate/Component.js');
+var styles = require('./desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PlateDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_basePlate_Component.BasePlate, tslib.__assign({}, restProps, { styles: styles__default.default, ref: ref }))); });
+
+exports.PlateDesktop = PlateDesktop;

package/plate/cssm/desktop/index.js

@@ -1,12 +1,7 @@
-export { PlateDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-import './desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.PlateDesktop = desktop_Component_desktop.PlateDesktop;

package/plate/cssm/index.js

@@ -1,16 +1,7 @@
-export { Plate } from './Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import './components/button-list/component.js';
-import './components/base-plate/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.Plate = Component_responsive.Plate;

package/plate/cssm/mobile/Component.mobile.js

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePlate } from '../components/base-plate/Component.js';
-import styles from './mobile.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-
-const PlateMobile = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));
-
-export { PlateMobile };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePlate_Component = require('../components/base-plate/Component.js');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PlateMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_basePlate_Component.BasePlate, tslib.__assign({}, restProps, { styles: styles__default.default, ref: ref }))); });
+
+exports.PlateMobile = PlateMobile;

package/plate/cssm/mobile/index.js

@@ -1,12 +1,7 @@
-export { PlateMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PlateMobile = mobile_Component_mobile.PlateMobile;

package/plate/esm/Component.responsive.js

@@ -1,19 +1,33 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import '@alfalab/hooks';
 import { PlateDesktop } from './desktop/Component.desktop.js';
 import { PlateMobile } from './mobile/Component.mobile.js';
 import './components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../icon-button/esm';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/button-list/component.js';
 
+var defaultComponentBreakpoint = 1024;
+var getCustomBreakpoint = function () {
+    var _a;
+    var breakpoint = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle(document.documentElement)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--global-breakpoint-desktop');
+    return breakpoint ? parseFloat(breakpoint) : null;
+};
+function getComponentBreakpoint() {
+    var customBreakpoint = getCustomBreakpoint();
+    if (customBreakpoint) {
+        return customBreakpoint;
+    }
+    return defaultComponentBreakpoint;
+}
+
 var Plate = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? PlateDesktop : PlateMobile;

package/plate/esm/index.js

@@ -2,12 +2,12 @@ export { Plate } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '@alfalab/hooks';
 import './desktop/Component.desktop.js';
 import './components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../icon-button/esm';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/button-list/component.js';

package/plate/modern/Component.responsive.js

@@ -1,17 +1,32 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import '@alfalab/hooks';
 import { PlateDesktop } from './desktop/Component.desktop.js';
 import { PlateMobile } from './mobile/Component.mobile.js';
 import './components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../icon-button/modern';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/button-list/component.js';
 
-const Plate = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
+const defaultComponentBreakpoint = 1024;
+const getCustomBreakpoint = () => {
+    const breakpoint = window
+        ?.getComputedStyle(document.documentElement)
+        ?.getPropertyValue('--global-breakpoint-desktop');
+    return breakpoint ? parseFloat(breakpoint) : null;
+};
+function getComponentBreakpoint() {
+    const customBreakpoint = getCustomBreakpoint();
+    if (customBreakpoint) {
+        return customBreakpoint;
+    }
+    return defaultComponentBreakpoint;
+}
+
+const Plate = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? PlateDesktop : PlateMobile;

package/plate/modern/index.js

@@ -1,12 +1,12 @@
 export { Plate } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '@alfalab/hooks';
 import './desktop/Component.desktop.js';
 import './components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../icon-button/modern';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/button-list/component.js';