@alfalab/core-components-side-panel 2.5.2 → 2.5.4

package/cssm/components/footer/layout.module.css

@@ -1,17 +1,22 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
-}
-:root {
+} :root {
+} :root {
+} :root {
     --side-panel-footer-default-gap: var(--gap-m);
 
     /* sizes */
@@ -23,61 +28,45 @@
     /* desktop */
 
     /* mobile */
-}
-.column {
+} .column {
     display: flex;
     flex-direction: column
-}
-.column > * {
+} .column > * {
         margin-bottom: var(--side-panel-footer-default-gap);
-    }
-.column > *:last-child,
+    } .column > *:last-child,
     .column > *:only-child {
         margin-bottom: 0;
-    }
-.column.gap-16 > * {
+    } .column.gap-16 > * {
         margin-bottom: var(--gap-m);
-    }
-.column.gap-24 > * {
+    } .column.gap-24 > * {
         margin-bottom: var(--gap-xl);
-    }
-.column.gap-32 > * {
+    } .column.gap-32 > * {
         margin-bottom: var(--gap-2xl);
-    }
-.start {
+    } .start {
     justify-content: flex-start;
-}
-.center {
+} .center {
     justify-content: center;
-}
-.space-between {
+} .space-between {
     justify-content: space-between
-}
-.space-between > * {
+} .space-between > * {
         flex: 1;
-    }
-.start,
+    } .start,
 .center,
 .space-between {
     display: flex
-}
-.start > *, .center > *, .space-between > * {
+} .start > *, .center > *, .space-between > * {
         margin-right: var(--side-panel-footer-default-gap);
-    }
-.start > *:last-child,
+    } .start > *:last-child,
     .start > *:only-child,
     .center > *:last-child,
     .center > *:only-child,
     .space-between > *:last-child,
     .space-between > *:only-child {
         margin-right: 0;
-    }
-.start.gap-16 > *, .center.gap-16 > *, .space-between.gap-16 > * {
+    } .start.gap-16 > *, .center.gap-16 > *, .space-between.gap-16 > * {
         margin-right: var(--gap-m);
-    }
-.start.gap-24 > *, .center.gap-24 > *, .space-between.gap-24 > * {
+    } .start.gap-24 > *, .center.gap-24 > *, .space-between.gap-24 > * {
         margin-right: var(--gap-xl);
-    }
-.start.gap-32 > *, .center.gap-32 > *, .space-between.gap-32 > * {
+    } .start.gap-32 > *, .center.gap-32 > *, .space-between.gap-32 > * {
         margin-right: var(--gap-2xl);
     }

package/cssm/components/footer/mobile.module.css

@@ -1,15 +1,20 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-m: 16px;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
 
@@ -20,10 +25,8 @@
     /* desktop */
 
     /* mobile */
-}
-.footer {
+} .footer {
     padding: var(--gap-m);
-}
-.sticky {
+} .sticky {
     bottom: 0;
 }

package/cssm/components/header/desktop.module.css

@@ -1,21 +1,24 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
+} :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-}
-:root {
+} :root {
+} :root {
 
     /* sizes */
 
@@ -32,22 +35,17 @@
     --side-panel-header-desktop-font-family: var(--font-family-system);
 
     /* mobile */
-}
-.content {
+} .content {
     font-weight: var(--side-panel-header-desktop-font-weight);
     font-family: var(--side-panel-header-desktop-font-family);
-}
-.s .content {
+} .s .content {
     padding: var(--side-panel-s-header-desktop-content-paddings);
     font-size: var(--side-panel-s-header-desktop-font-size);
     line-height: var(--side-panel-s-header-desktop-line-height);
-}
-.s {
+} .s {
     padding: var(--side-panel-s-header-paddings)
-}
-.s:not(.hasContent) {
+} .s:not(.hasContent) {
         padding-bottom: 0;
-    }
-.sticky {
+    } .sticky {
     top: 0;
 }

package/cssm/components/header/index.module.css

@@ -1,15 +1,20 @@
 :root {
+} /* deprecated */ :root {
     --color-light-bg-primary: #fff;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
     --side-panel-header-background: var(--color-light-bg-primary);
 
     /* sizes */
@@ -23,66 +28,51 @@
     /* desktop */
 
     /* mobile */
-}
-.header {
+} .header {
     width: 100%;
     box-sizing: border-box;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     transition: box-shadow 0.2s ease, background 0.2s ease
-}
-.header:not(.hasContent) {
+} .header:not(.hasContent) {
         pointer-events: none;
-    }
-.highlighted {
+    } .highlighted {
     background: var(--side-panel-header-highlight-background);
     box-shadow: var(--side-panel-header-highlight-box-shadow);
-}
-.sticky {
+} .sticky {
     position: sticky;
     z-index: 1
-}
-.sticky.hasContent {
+} .sticky.hasContent {
         background: var(--side-panel-header-background);
-    }
-.header.backgroundImage {
+    } .header.backgroundImage {
     background: center no-repeat;
     background-size: cover;
-}
-.content {
+} .content {
     flex-grow: 1;
-}
-.title {
+} .title {
     word-break: break-word;
-}
-.addon {
+} .addon {
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: all;
-}
-.closer {
+} .closer {
     margin-left: auto;
-}
-.left {
+} .left {
     justify-content: flex-start;
     text-align: left;
-}
-.center {
+} .center {
     justify-content: center;
     text-align: center;
-}
-.right {
+} .right {
     justify-content: flex-end;
     text-align: right;
-}
-.trim {
+} .trim {
     overflow: hidden
-}
-.trim .title {
+} .trim .title {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/cssm/components/header/mobile.module.css

@@ -1,21 +1,24 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
+} :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-}
-:root {
+} :root {
+} :root {
 
     /* sizes */
 
@@ -32,11 +35,9 @@
     --side-panel-header-mobile-line-height: 24px;
     --side-panel-header-mobile-font-family: var(--font-family-system);
     --side-panel-header-mobile-font-weight: bold;
-}
-.sticky {
+} .sticky {
     top: 0;
-}
-.content {
+} .content {
     font-size: var(--side-panel-header-mobile-font-size);
     line-height: var(--side-panel-header-mobile-line-height);
     font-family: var(--side-panel-header-mobile-font-family);

package/cssm/desktop.module.css

@@ -1,12 +1,19 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
     --side-panel-s-width: 500px;
@@ -18,10 +25,8 @@
     /* desktop */
 
     /* mobile */
-}
-.s {
+} .s {
     width: var(--side-panel-s-width);
-}
-.hidden {
+} .hidden {
     overflow-x: hidden;
 }

package/cssm/index.js

@@ -4,7 +4,7 @@ var Component_responsive = require('./Component.responsive.js');
 var Context = require('./Context.js');
 require('./tslib.es6-bbd6cd2a.js');
 require('react');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq/cssm');
 require('./components/closer/Component.js');
 require('classnames');
 require('@alfalab/core-components-icon-button/cssm');

package/cssm/mobile.module.css

@@ -1,12 +1,19 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
 
@@ -17,8 +24,7 @@
     /* desktop */
 
     /* mobile */
-}
-.component {
+} .component {
     flex: 1;
     width: 100%;
 }

package/cssm/responsive.js

@@ -3,7 +3,7 @@
 var Component_responsive = require('./Component.responsive.js');
 require('./tslib.es6-bbd6cd2a.js');
 require('react');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq/cssm');
 require('./components/closer/Component.js');
 require('classnames');
 require('@alfalab/core-components-icon-button/cssm');

package/cssm/vars.css

@@ -1,12 +1,19 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
 

package/desktop.css

@@ -1,13 +1,20 @@
-/* hash: 1acdl */
+/* hash: bnt2b */
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
     --side-panel-s-width: 500px;
@@ -19,10 +26,8 @@
     /* desktop */
 
     /* mobile */
-}
-.side-panel__s_tms5n {
+} .side-panel__s_1jd76 {
     width: var(--side-panel-s-width);
-}
-.side-panel__hidden_tms5n {
+} .side-panel__hidden_1jd76 {
     overflow-x: hidden;
 }

package/desktop.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var Component_desktop = require('./Component.desktop.js');
-require('./tslib.es6-adf6ea2b.js');
+require('./tslib.es6-cf0bde8a.js');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/esm/Component.desktop.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-16bbef32.js';
+import { _ as __rest, a as __assign } from './tslib.es6-4ea62d19.js';
 import React, { forwardRef, useRef, isValidElement, cloneElement } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
@@ -15,10 +15,10 @@ import './components/closer/Component.js';
 import '@alfalab/core-components-icon-button/esm';
 import './components/header/Component.js';
 
-var styles = {"s":"side-panel__s_tms5n","hidden":"side-panel__hidden_tms5n"};
+var styles = {"s":"side-panel__s_1jd76","hidden":"side-panel__hidden_1jd76"};
 require('./desktop.css')
 
-var transitions = {"enterRight":"side-panel__enterRight_12k4z","enterLeft":"side-panel__enterLeft_12k4z","enterActive":"side-panel__enterActive_12k4z","exit":"side-panel__exit_12k4z","exitActiveRight":"side-panel__exitActiveRight_12k4z","exitActiveLeft":"side-panel__exitActiveLeft_12k4z"};
+var transitions = {"enterRight":"side-panel__enterRight_1ma8x","enterLeft":"side-panel__enterLeft_1ma8x","enterActive":"side-panel__enterActive_1ma8x","exit":"side-panel__exit_1ma8x","exitActiveRight":"side-panel__exitActiveRight_1ma8x","exitActiveLeft":"side-panel__exitActiveLeft_1ma8x"};
 require('./transitions.desktop.css')
 
 var SidePanelDesktopComponent = forwardRef(function (_a, ref) {

package/esm/Component.mobile.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-16bbef32.js';
+import { _ as __rest, a as __assign } from './tslib.es6-4ea62d19.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/esm';
@@ -13,10 +13,10 @@ import './components/closer/Component.js';
 import '@alfalab/core-components-icon-button/esm';
 import './components/header/Component.js';
 
-var styles = {"component":"side-panel__component_r64av"};
+var styles = {"component":"side-panel__component_1t6d7"};
 require('./mobile.css')
 
-var transitions = {"appear":"side-panel__appear_1478b","enter":"side-panel__enter_1478b","appearActive":"side-panel__appearActive_1478b","enterActive":"side-panel__enterActive_1478b","exit":"side-panel__exit_1478b","exitActive":"side-panel__exitActive_1478b","exitDone":"side-panel__exitDone_1478b"};
+var transitions = {"appear":"side-panel__appear_32msf","enter":"side-panel__enter_32msf","appearActive":"side-panel__appearActive_32msf","enterActive":"side-panel__enterActive_32msf","exit":"side-panel__exit_32msf","exitActive":"side-panel__exitActive_32msf","exitDone":"side-panel__exitDone_32msf"};
 require('./transitions.mobile.css')
 
 var SidePanelMobileComponent = forwardRef(function (_a, ref) {

package/esm/Component.responsive.d.ts

@@ -18,6 +18,10 @@ type SidePanelResponsiveProps = BaseModalProps & Pick<DrawerProps, 'contentTrans
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const SidePanelResponsive: React.ForwardRefExoticComponent<BaseModalProps & Pick<DrawerProps, "contentTransitionProps" | "nativeScrollbar" | "placement" | "scrollbarProps"> & {
     /**
@@ -35,6 +39,10 @@ declare const SidePanelResponsive: React.ForwardRefExoticComponent<BaseModalProp
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
     Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;

package/esm/Component.responsive.js

@@ -1,6 +1,6 @@
-import { _ as __rest, a as __assign } from './tslib.es6-16bbef32.js';
+import { _ as __rest, a as __assign } from './tslib.es6-4ea62d19.js';
 import React, { forwardRef, useMemo, useContext } from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq/esm';
 import { Closer } from './components/closer/Component.js';
 import { SidePanelDesktop } from './Component.desktop.js';
 import { SidePanelMobile } from './Component.mobile.js';
@@ -22,6 +22,8 @@ import './components/footer/Component.mobile.js';
 import './components/header/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
 
+var isClient = function () { return typeof window !== 'undefined'; };
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 var ResponsiveContext = React.createContext({
     view: 'desktop',
@@ -35,13 +37,13 @@ function createResponsive(desktop, mobile) {
     return ResponsiveChild;
 }
 var SidePanelResponsiveComponent = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
-    var view = useMedia([
-        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
-        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
-    ], 'desktop')[0];
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
+    var isDesktop = useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];
+    var view = isDesktop ? 'desktop' : 'mobile';
     var contextValue = useMemo(function () { return ({ view: view }); }, [view]);
-    var Component = view === 'desktop' ? SidePanelDesktop : SidePanelMobile;
+    var Component = isDesktop ? SidePanelDesktop : SidePanelMobile;
     return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
         React.createElement(Component, __assign({ ref: ref }, restProps), children)));
 });

package/esm/components/closer/Component.js

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-16bbef32.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-4ea62d19.js';
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import { IconButton } from '@alfalab/core-components-icon-button/esm';
 import { ModalContext } from '../../Context.js';
 import '@alfalab/core-components-base-modal/esm';
 
-var styles = {"closer":"side-panel__closer_4d47r","button":"side-panel__button_4d47r","sticky":"side-panel__sticky_4d47r"};
+var styles = {"closer":"side-panel__closer_1s5yt","button":"side-panel__button_1s5yt","sticky":"side-panel__sticky_1s5yt"};
 require('./index.css')
 
 /**

package/esm/components/closer/index.css

@@ -1,16 +1,21 @@
-/* hash: 8tyb8 */
+/* hash: 196hu */
 :root {
+} /* deprecated */ :root {
     --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
 
     /* sizes */
 
@@ -21,11 +26,9 @@
     /* desktop */
 
     /* mobile */
-}
-:root {
+} :root {
     --side-panel-closer-bg-color: var(--color-light-bg-primary-alpha-40);
-}
-.side-panel__closer_4d47r {
+} .side-panel__closer_1s5yt {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -33,14 +36,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
-.side-panel__button_4d47r {
+} .side-panel__button_1s5yt {
     background: var(--side-panel-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
-}
-.side-panel__sticky_4d47r {
+} .side-panel__sticky_1s5yt {
     position: sticky;
     top: 0;
 }