@alfalab/core-components-side-panel 1.1.0

package/dist/modern/Component.desktop.js

@@ -0,0 +1,36 @@
+import React, { forwardRef, useRef, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { Drawer } from '@alfalab/core-components-drawer/dist/modern';
+import mergeRefs from 'react-merge-refs';
+import '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import { HeaderDesktop } from './components/header/Component.desktop.js';
+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';
+
+var styles = {"s":"side-panel__s_1ysbr","hidden":"side-panel__hidden_1ysbr"};
+require('./desktop.css')
+
+var transitions = {"appear":"side-panel__appear_1hpwc","enter":"side-panel__enter_1hpwc","appearActive":"side-panel__appearActive_1hpwc","enterActive":"side-panel__enterActive_1hpwc","exit":"side-panel__exit_1hpwc","exitActive":"side-panel__exitActive_1hpwc","exitDone":"side-panel__exitDone_1hpwc"};
+require('./transitions.desktop.css')
+
+const SidePanelDesktopComponent = forwardRef(({ size = 's', children, className, wrapperClassName, contentTransitionProps = {}, backdropProps, ...restProps }, ref) => {
+    const modalRef = useRef(null);
+    return (React.createElement(Drawer, Object.assign({}, restProps, { ref: mergeRefs([ref, modalRef]), wrapperClassName: wrapperClassName, className: cn(className, styles[size], styles.hidden), backdropProps: backdropProps, contentTransitionProps: {
+            classNames: transitions,
+            ...contentTransitionProps,
+        } }), React.Children.map(children, child => isValidElement(child) ? cloneElement(child, { size }) : child)));
+});
+const SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {
+    Content: ContentDesktop,
+    Header: HeaderDesktop,
+    Footer: FooterDesktop,
+});
+
+export { SidePanelDesktop };

package/dist/modern/Component.mobile.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type SidePanelMobileProps = BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+declare const SidePanelMobile: React.ForwardRefExoticComponent<BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./components/content/Component").ContentProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
+};
+export { SidePanelMobileProps, SidePanelMobile };

package/dist/modern/Component.mobile.js

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { BaseModal } from '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import './components/content/Component.js';
+import './components/footer/Component.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+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":"side-panel__component_y5ha2"};
+require('./mobile.css')
+
+var transitions = {"appear":"side-panel__appear_kozij","enter":"side-panel__enter_kozij","appearActive":"side-panel__appearActive_kozij","enterActive":"side-panel__enterActive_kozij","exit":"side-panel__exit_kozij","exitActive":"side-panel__exitActive_kozij","exitDone":"side-panel__exitDone_kozij"};
+require('./transitions.mobile.css')
+
+const SidePanelMobileComponent = forwardRef(({ children, className, transitionProps, ...restProps }, ref) => {
+    return (React.createElement(BaseModal, Object.assign({}, restProps, { ref: ref, transitionProps: {
+            classNames: transitions,
+            ...transitionProps,
+        }, className: cn(className, styles.component) }), children));
+});
+const SidePanelMobile = Object.assign(SidePanelMobileComponent, {
+    Content: ContentMobile,
+    Header: HeaderMobile,
+    Footer: FooterMobile,
+});
+
+export { SidePanelMobile };

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from 'react';
+import { SidePanelDesktopProps } from "./Component.desktop";
+import { SidePanelMobileProps } from "./Component.mobile";
+type SidePanelResponsiveProps = SidePanelMobileProps & SidePanelDesktopProps;
+declare const SidePanelResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
+    hasCloser?: boolean | undefined;
+} & Pick<import("packages/base-modal/src").BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
+    contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
+} & {
+    size?: "s" | 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").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 { SidePanelResponsiveProps, SidePanelResponsive };

package/dist/modern/Component.responsive.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useMemo, useContext } from 'react';
+import 'classnames';
+import '@alfalab/core-components-drawer/dist/modern';
+import 'react-merge-refs';
+import '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
+import './components/header/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/footer/Component.desktop.js';
+import { SidePanelDesktop } from './Component.desktop.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.mobile.js';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+import { SidePanelMobile } from './Component.mobile.js';
+import { useMedia } from '@alfalab/hooks';
+
+const ResponsiveContext = React.createContext({
+    view: 'desktop',
+});
+function createResponsive(desktop, mobile) {
+    function ResponsiveChild(props) {
+        const { view } = useContext(ResponsiveContext);
+        const Child = view === 'desktop' ? desktop : mobile;
+        return React.createElement(Child, Object.assign({}, props));
+    }
+    return ResponsiveChild;
+}
+const SidePanelResponsiveComponent = forwardRef(({ children, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const contextValue = useMemo(() => ({ view }), [view]);
+    const Component = view === 'desktop' ? SidePanelDesktop : SidePanelMobile;
+    return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
+        React.createElement(Component, Object.assign({ ref: ref }, restProps), children)));
+});
+const SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
+    Header: createResponsive(SidePanelDesktop.Header, SidePanelMobile.Header),
+    Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
+    Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
+    Closer,
+});
+
+export { SidePanelResponsive };

package/dist/modern/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "@alfalab/core-components-base-modal";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/dist/modern/Context.js

@@ -0,0 +1,5 @@
+import { BaseModalContext } from '@alfalab/core-components-base-modal/dist/modern';
+
+const ModalContext = BaseModalContext;
+
+export { ModalContext };

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

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, ElementType, FC } from 'react';
+import { IconButtonProps } from "@alfalab/core-components-icon-button";
+type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: 'left' | 'right';
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps['size'];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+};
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };

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

@@ -0,0 +1,25 @@
+import React, { useContext, useCallback } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import { ModalContext } from '../../Context.js';
+import { IconButton } from '@alfalab/core-components-icon-button/dist/modern';
+import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
+
+var styles = {"closer":"side-panel__closer_8pghy","button":"side-panel__button_8pghy","sticky":"side-panel__sticky_8pghy"};
+require('./index.css')
+
+/**
+ * @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("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/dist/modern/components/closer/index.css

@@ -0,0 +1,46 @@
+/* hash: rxean */
+:root {
+    --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+:root {
+    --side-panel-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+}
+.side-panel__closer_8pghy {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.side-panel__button_8pghy {
+    background: var(--side-panel-closer-bg-color);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
+}
+.side-panel__sticky_8pghy {
+    position: sticky;
+    top: 0;
+}

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Content: FC<ContentProps>;
+export { ContentProps, Content };

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type ContentDesktopProps = ContentProps & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+};
+declare const ContentDesktop: FC<ContentDesktopProps>;
+export { ContentDesktopProps, ContentDesktop };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Content } from './Component.js';
+
+var styles = {"s":"side-panel__s_lq99o"};
+require('./desktop.css')
+
+const ContentDesktop = ({ size, className, ...restProps }) => (React.createElement(Content, Object.assign({ className: cn(className, size && styles[size]) }, restProps)));
+
+export { ContentDesktop };

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

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"content":"side-panel__content_1yxkj","flex":"side-panel__flex_1yxkj"};
+require('./index.css')
+
+const Content = ({ children, className }) => {
+    const { contentRef } = useContext(ModalContext);
+    return (React.createElement("div", { className: cn(styles.content, className, styles.flex), ref: contentRef }, children));
+};
+
+export { Content };

package/dist/modern/components/content/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentMobileProps = ContentProps;
+declare const ContentMobile: FC<ContentMobileProps>;
+export { ContentMobileProps, ContentMobile };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Content } from './Component.js';
+
+var styles = {"content":"side-panel__content_7gese"};
+require('./mobile.css')
+
+const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, Object.assign({ className: cn(className, styles.content) }, restProps)));
+
+export { ContentMobile };

package/dist/modern/components/content/desktop.css

@@ -0,0 +1,31 @@
+/* hash: 1e1gn */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-content-paddings: 0 56px;
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__s_lq99o {
+    padding: var(--side-panel-s-content-paddings)
+}
+.side-panel__s_lq99o:last-child {
+        padding-bottom: var(--gap-2xl);
+    }

package/dist/modern/components/content/index.css

@@ -0,0 +1,28 @@
+/* hash: gtex2 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__content_1yxkj {
+    box-sizing: border-box;
+    width: 100%;
+}
+.side-panel__flex_1yxkj {
+    flex: 1 1 auto;
+}

package/dist/modern/components/content/mobile.css

@@ -0,0 +1,30 @@
+/* hash: 1bi3k */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__content_7gese {
+    padding: 0 var(--gap-m)
+}
+.side-panel__content_7gese:last-child {
+        padding-bottom: var(--gap-m);
+    }

package/dist/modern/components/footer/Component.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+export { FooterProps, Footer };

package/dist/modern/components/footer/Component.desktop.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type FooterDesktopProps = FooterProps & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+};
+declare const FooterDesktop: FC<FooterDesktopProps>;
+export { FooterDesktopProps, FooterDesktop };

package/dist/modern/components/footer/Component.desktop.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Footer } from './Component.js';
+
+var styles = {"sticky":"side-panel__sticky_1nka4","s":"side-panel__s_1nka4"};
+require('./desktop.css')
+
+const FooterDesktop = ({ size, className, sticky, ...restProps }) => (React.createElement(Footer, Object.assign({ className: cn(className, size && styles[size], {
+        [styles.sticky]: sticky,
+    }), sticky: sticky }, restProps)));
+
+export { FooterDesktop };

package/dist/modern/components/footer/Component.js

@@ -0,0 +1,23 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"footer":"side-panel__footer_1efth","sticky":"side-panel__sticky_1efth","highlighted":"side-panel__highlighted_1efth"};
+require('./index.css')
+
+var layoutStyles = {"column":"side-panel__column_158ux","gap-16":"side-panel__gap-16_158ux","gap-24":"side-panel__gap-24_158ux","gap-32":"side-panel__gap-32_158ux","start":"side-panel__start_158ux","center":"side-panel__center_158ux","space-between":"side-panel__space-between_158ux"};
+require('./layout.css')
+
+const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
+    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    useEffect(() => {
+        setHasFooter(true);
+    }, [setHasFooter]);
+    return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
+            [styles.highlighted]: sticky && footerHighlighted,
+            [styles.sticky]: sticky,
+        }) }, children));
+};
+
+export { Footer };

package/dist/modern/components/footer/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterMobileProps = FooterProps;
+declare const FooterMobile: FC<FooterMobileProps>;
+export { FooterMobileProps, FooterMobile };

package/dist/modern/components/footer/Component.mobile.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Footer } from './Component.js';
+
+var styles = {"footer":"side-panel__footer_6188a","sticky":"side-panel__sticky_6188a"};
+require('./mobile.css')
+
+const FooterMobile = ({ className, sticky, ...restProps }) => (React.createElement(Footer, Object.assign({ className: cn(className, styles.footer, {
+        [styles.sticky]: sticky,
+    }), sticky: sticky }, restProps)));
+
+export { FooterMobile };

package/dist/modern/components/footer/desktop.css

@@ -0,0 +1,32 @@
+/* hash: 1kcn0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-footer-paddings: var(--gap-xl) 56px var(--gap-2xl);
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__sticky_1nka4 {
+    bottom: 0;
+}
+.side-panel__s_1nka4 {
+    padding: var(--side-panel-s-footer-paddings);
+}

package/dist/modern/components/footer/index.css

@@ -0,0 +1,41 @@
+/* hash: ylr82 */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --side-panel-footer-background: var(--color-light-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-footer-highlight-background: var(--color-light-bg-primary);
+    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-primary);
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__footer_1efth {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+}
+.side-panel__sticky_1efth {
+    background: var(--side-panel-footer-background);
+    position: sticky;
+}
+.side-panel__highlighted_1efth {
+    background: var(--side-panel-footer-highlight-background);
+    box-shadow: var(--side-panel-footer-highlight-box-shadow);
+}