@alfalab/core-components 25.8.0 → 26.0.1

package/modal/modern/Component.desktop.js

@@ -12,12 +12,14 @@ import './components/content/Component.js';
 import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { t as transitions } from './transitions.module-a20188ae.js';
+import { t as transitions } from './transitions.module-386b448e.js';
 
-var styles = {"wrapper":"modal__wrapper_1xs8c","component":"modal__component_1xs8c","fullscreen":"modal__fullscreen_1xs8c","s":"modal__s_1xs8c","m":"modal__m_1xs8c","l":"modal__l_1xs8c"};
+var styles = {"wrapper":"modal__wrapper_4l1kn","component":"modal__component_4l1kn","fullscreen":"modal__fullscreen_4l1kn","s":"modal__s_4l1kn","m":"modal__m_4l1kn","l":"modal__l_4l1kn","xl":"modal__xl_4l1kn"};
 require('./desktop.css');
 
 const ModalDesktopComponent = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, ...restProps }, ref) => {
+    // TODO: удалить, после удаления пропсы fullscreen
+    const componentSize = fullscreen ? 'fullscreen' : size;
     const modalRef = useRef(null);
     const handleEntered = useCallback((node, isAppearing) => {
         if (fixedPosition && modalRef.current) {
@@ -32,17 +34,15 @@ const ModalDesktopComponent = forwardRef(({ size = 's', fixedPosition, fullscree
         }
     }, [fixedPosition, transitionProps]);
     return (React.createElement(BaseModal, Object.assign({}, restProps, { ref: mergeRefs([ref, modalRef]), wrapperClassName: cn(styles.wrapper, wrapperClassName, {
-            [styles.fullscreen]: fullscreen,
-        }), className: cn(styles.component, className, !fullscreen && styles[size]), backdropProps: {
+            [styles.fullscreen]: componentSize === 'fullscreen',
+        }), className: cn(styles.component, className, styles[componentSize]), backdropProps: {
             ...restProps.backdropProps,
-            invisible: fullscreen,
+            invisible: componentSize === 'fullscreen',
         }, transitionProps: {
             classNames: transitions,
             ...transitionProps,
             onEntered: handleEntered,
-        } }), React.Children.map(children, child => isValidElement(child)
-        ? cloneElement(child, { size: child.props.size || size, fullscreen })
-        : child)));
+        } }), React.Children.map(children, child => isValidElement(child) ? cloneElement(child, { size: componentSize }) : child)));
 });
 const ModalDesktop = Object.assign(ModalDesktopComponent, {
     Content: ContentDesktop,

package/modal/modern/Component.mobile.js

@@ -1,7 +1,6 @@
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
-import { useMedia } from '@alfalab/hooks';
 import '@alfalab/icons-glyph/CrossMIcon';
 import { BaseModal } from '../../base-modal/modern';
 import './Context.js';
@@ -10,28 +9,19 @@ import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-a20188ae.js';
+import { t as transitions } from './transitions.module-386b448e.js';
 import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 
-var styles = {"component":"modal__component_lxs7u"};
+var styles = {"component":"modal__component_1wxv9"};
 require('./mobile.css');
 
 const ModalMobileComponent = forwardRef(({ children, className, ...restProps }, ref) => {
-    const [size] = useMedia([
-        ['s', '(max-width: 375px)'],
-        ['m', '(min-width: 376px)'],
-    ], 's');
     return (React.createElement(BaseModal, Object.assign({}, restProps, { ref: ref, transitionProps: {
             classNames: transitions,
             ...restProps.transitionProps,
-        }, className: cn(className, styles.component), backdropProps: {
-            ...restProps.backdropProps,
-            invisible: true,
-        } }), React.Children.map(children, child => isValidElement(child)
-        ? cloneElement(child, { size: child.props.size || size, fullscreen: true })
-        : child)));
+        }, className: cn(className, styles.component) }), children));
 });
 const ModalMobile = Object.assign(ModalMobileComponent, {
     Content: ContentMobile,

package/modal/modern/Component.responsive.d.ts

@@ -6,14 +6,14 @@ type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps;
 declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & {
-    size?: "s" | "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: 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.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
+    Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
 export { ModalResponsiveProps, ModalResponsive };

package/modal/modern/Component.responsive.js

@@ -2,8 +2,8 @@ import React, { forwardRef, useMemo, useContext } from 'react';
 import 'classnames';
 import 'react-merge-refs';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
-import { useMedia } from '@alfalab/hooks';
 import '@alfalab/icons-glyph/CrossMIcon';
+import { useMedia } from '@alfalab/hooks';
 import '../../base-modal/modern';
 import './Context.js';
 import './components/header/Component.js';
@@ -14,7 +14,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-a20188ae.js';
+import './transitions.module-386b448e.js';
 import { ModalDesktop } from './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
@@ -34,8 +34,8 @@ function createResponsive(desktop, mobile) {
 }
 const ModalResponsiveComponent = forwardRef(({ children, ...restProps }, ref) => {
     const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
     ], 'desktop');
     const contextValue = useMemo(() => ({ view }), [view]);
     const Component = view === 'desktop' ? ModalDesktop : ModalMobile;

package/modal/modern/components/closer/Component.d.ts

@@ -14,13 +14,16 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
      */
     size?: IconButtonProps['size'];
     /**
-     * Иконка
+     * Фиксирует крестик
      */
-    icon?: ElementType;
+    sticky?: boolean;
     /**
-     * Флаг, что модальное окно открыто на весь экран
+     * Иконка
      */
-    fullscreen?: boolean;
+    icon?: ElementType;
 };
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
 declare const Closer: FC<CloserProps>;
 export { CloserProps, Closer };

package/modal/modern/components/closer/Component.js

@@ -5,15 +5,21 @@ import '../../../../base-modal/modern';
 import { ModalContext } from '../../Context.js';
 import { IconButton } from '../../../../icon-button/modern';
 
-var styles = {"closer":"modal__closer_ai8qm","left":"modal__left_ai8qm","right":"modal__right_ai8qm","fullscreen":"modal__fullscreen_ai8qm"};
+var styles = {"closer":"modal__closer_1nic2","button":"modal__button_1nic2","sticky":"modal__sticky_1nic2"};
 require('./index.css');
 
-const Closer = ({ className, fullscreen, align, size = 's', icon = CrossHeavyMIcon, ...restProps }) => {
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+const Closer = ({ className, size = 's', sticky, icon = CrossHeavyMIcon, ...restProps }) => {
     const { onClose } = useContext(ModalContext);
     const handleClick = useCallback(event => {
         onClose(event, 'closerClick');
     }, [onClose]);
-    return (React.createElement(IconButton, Object.assign({ size: size, className: cn(styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps)));
+    return (React.createElement("div", { className: cn(styles.closer, className, {
+            [styles.sticky]: sticky,
+        }) },
+        React.createElement(IconButton, Object.assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
 };
 
 export { Closer };

package/modal/modern/components/closer/index.css

@@ -1,4 +1,7 @@
-/* hash: 1wu1k */
+/* hash: 1aw3z */
+:root {
+    --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
+}
 :root {
 
     /* Hard */
@@ -17,28 +20,31 @@
 
     /* paddings */
 
-    /* sticky */
-
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
-.modal__closer_ai8qm {
+:root {
+    --modal-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+}
+.modal__closer_1nic2 {
     flex-shrink: 0;
-
-    background: rgba(255, 255, 255, 0.4);
+    width: 48px;
+    height: 48px;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.modal__button_1nic2 {
+    background: var(--modal-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.modal__left_ai8qm,
-.modal__right_ai8qm {
+.modal__sticky_1nic2 {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__right_ai8qm {
-    margin-left: auto;
-}
-.modal__fullscreen_ai8qm {
-    top: 0;
-}

package/modal/modern/components/content/Component.d.ts

@@ -13,7 +13,5 @@ type ContentProps = {
      */
     flex?: boolean;
 };
-declare const Content: FC<ContentProps & {
-    styles: Record<string, string>;
-}>;
+declare const Content: FC<ContentProps>;
 export { ContentProps, Content };

package/modal/modern/components/content/Component.desktop.d.ts

@@ -1,14 +1,11 @@
 import { FC } from 'react';
 import { ContentProps } from "./Component";
+import { ModalDesktopProps } from "../../Component.desktop";
 type ContentDesktopProps = ContentProps & {
     /**
      * Размер
      */
-    size?: 's' | 'm' | 'l';
-    /**
-     * Флаг, что модальное окно открыто на весь экран
-     */
-    fullscreen?: boolean;
+    size?: ModalDesktopProps['size'];
 };
 declare const ContentDesktop: FC<ContentDesktopProps>;
 export { ContentDesktopProps, ContentDesktop };

package/modal/modern/components/content/Component.desktop.js

@@ -4,9 +4,9 @@ import '../../../../base-modal/modern';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"content":"modal__content_133lf modal__content_1679k","flex":"modal__flex_133lf modal__flex_1679k","s":"modal__s_133lf","m":"modal__m_133lf","l":"modal__l_133lf","fullscreen":"modal__fullscreen_133lf"};
+var styles = {"s":"modal__s_1r4mg","m":"modal__m_1r4mg","l":"modal__l_1r4mg","xl":"modal__xl_1r4mg","fullscreen":"modal__fullscreen_1r4mg"};
 require('./desktop.css');
 
-const ContentDesktop = ({ size, className, fullscreen, ...restProps }) => (React.createElement(Content, Object.assign({ className: cn(className, size && styles[size], fullscreen && styles.fullscreen), styles: styles }, restProps)));
+const ContentDesktop = ({ size, className, ...restProps }) => (React.createElement(Content, Object.assign({ className: cn(className, size && styles[size]) }, restProps)));
 
 export { ContentDesktop };

package/modal/modern/components/content/Component.js

@@ -3,7 +3,10 @@ import cn from 'classnames';
 import '../../../../base-modal/modern';
 import { ModalContext } from '../../Context.js';
 
-const Content = ({ children, flex, className, styles, }) => {
+var styles = {"content":"modal__content_n24k3","flex":"modal__flex_n24k3"};
+require('./index.css');
+
+const Content = ({ children, flex, className }) => {
     const { contentRef } = useContext(ModalContext);
     return (React.createElement("div", { className: cn(styles.content, className, {
             [styles.flex]: flex,

package/modal/modern/components/content/Component.mobile.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import 'classnames';
+import cn from 'classnames';
 import '../../../../base-modal/modern';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"content":"modal__content_190o4 modal__content_1679k","flex":"modal__flex_190o4 modal__flex_1679k"};
+var styles = {"content":"modal__content_136qu"};
 require('./mobile.css');
 
-const ContentMobile = props => (React.createElement(Content, Object.assign({ styles: styles }, props)));
+const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, Object.assign({ className: cn(className, styles.content) }, restProps)));
 
 export { ContentMobile };