@alfalab/core-components 47.6.0-beta.0 → 47.7.0

package/bottom-sheet/moderncssm/component.js

@@ -1,418 +0,0 @@
-import React, { forwardRef, useRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
-import { use100vh } from 'react-div-100vh';
-import mergeRefs from 'react-merge-refs';
-import { useSwipeable } from 'react-swipeable';
-import cn from 'classnames';
-import { BaseModal, unlockScroll } from '../../base-modal/moderncssm';
-import { isClient, os, getDataTestId, fnUtils } from '../../shared/moderncssm';
-import { Footer } from './components/footer/Component.js';
-import { Header } from './components/header/Component.js';
-import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-import { horizontalDirections } from './consts/swipeConsts.js';
-import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
-import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
-import styles from './index.module.css';
-import './components/footer/index.module.css';
-import '../../navigation-bar-private/moderncssm';
-import './components/header/index.module.css';
-import '../../backdrop/moderncssm';
-import './enums/swipeEnums.js';
-
-const { isNil } = fnUtils;
-const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
-    const windowHeight = use100vh() ?? 0;
-    const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
-    const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
-    // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
-    const isFirstRender = fullHeight === 0;
-    const initialIndexRef = useRef(initialActiveAreaIndex);
-    const magneticAreas = useMemo(() => {
-        if (magneticAreasProp) {
-            return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight, headerOffset));
-        }
-        const iOSViewHeight = isClient()
-            ? document?.documentElement?.clientHeight || window?.innerHeight
-            : 0;
-        const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
-        return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
-    const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    const [sheetOffset, setSheetOffset] = useState(0);
-    const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const [activeAreaIdx, setActiveAreaIdx] = useState(-1);
-    const [swipingInProgress, setSwipingInProgress] = useState(null);
-    const scrollOccurred = useRef(false);
-    const headerRef = useRef(null);
-    const contentRef = useRef(null);
-    const sheetHeight = useRef(0);
-    const sheetRef = useRef(null);
-    const scrollableContainer = useRef(null);
-    const activeArea = magneticAreas[activeAreaIdx];
-    const emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
-    const titleIsReactElement = React.isValidElement(title);
-    const headerProps = {
-        ...(titleIsReactElement
-            ? { children: title }
-            : { title: title ? title?.toString() : undefined }),
-        scrollableParentRef: scrollableContainer,
-        headerRef,
-        headerOffset,
-        className: headerClassName,
-        addonClassName,
-        closerClassName,
-        backButtonClassName: backerClassName,
-        leftAddons,
-        rightAddons,
-        bottomAddons,
-        hasCloser,
-        hasBackButton: hasBacker,
-        align: titleAlign,
-        trim: trimTitle,
-        sticky: stickyHeader,
-        dataTestId: getDataTestId(dataTestId, 'header'),
-        onBack,
-        titleSize,
-        subtitle,
-        onClose,
-        backButtonProps,
-    };
-    const startSwiping = (event) => {
-        setSwipingInProgress((p) => {
-            if (!p)
-                onSwipeStart?.(event);
-            return true;
-        });
-    };
-    const stopSwiping = (event) => {
-        setSwipingInProgress((p) => {
-            if (p)
-                onSwipeEnd?.(event);
-            return false;
-        });
-        scrollOccurred.current = false;
-    };
-    const getBackdropOpacity = (offset) => {
-        const canClose = magneticAreas[0] === 0;
-        const secondArea = magneticAreas[1];
-        const isSecondArea = secondArea === activeArea;
-        if (canClose && isSecondArea && sheetOffset > lastMagneticArea - secondArea) {
-            const opacity = 1 - (offset - (lastMagneticArea - secondArea)) / secondArea;
-            return Math.max(0, Number(opacity.toFixed(2)));
-        }
-        return 1;
-    };
-    const getSheetOffset = (deltaY) => {
-        let offset = lastMagneticArea - activeArea + deltaY;
-        const maxOffset = magneticAreas[0] === 0 ? 0 : lastMagneticArea - magneticAreas[0];
-        if (maxOffset) {
-            offset = Math.min(maxOffset, offset);
-        }
-        return Math.max(0, Math.round(offset));
-    };
-    const getActiveAreaIndex = (area) => magneticAreas.findIndex((a) => a === area);
-    const setSheetHeight = () => {
-        if (sheetRef.current) {
-            sheetHeight.current = sheetRef.current.getBoundingClientRect().height - sheetOffset;
-        }
-    };
-    const handleTransitionEnd = (event) => {
-        setSheetHeight();
-        if (event.propertyName === 'transform' && event.target === event.currentTarget) {
-            onMagnetizeEnd?.(getActiveAreaIndex(activeArea));
-        }
-    };
-    const scrollToArea = (idx) => {
-        if (isFirstRender) {
-            initialIndexRef.current = idx;
-            return;
-        }
-        stopSwiping(null);
-        const nextArea = magneticAreas[idx];
-        const nextAreaIdx = getActiveAreaIndex(nextArea);
-        if (nextArea === 0) {
-            if (iOSLock) {
-                unlockScroll();
-            }
-            onClose();
-            return;
-        }
-        if (nextAreaIdx !== -1) {
-            setActiveAreaIdx(nextAreaIdx);
-            setSheetOffset(lastMagneticArea - nextArea);
-            onMagnetize?.(nextAreaIdx);
-        }
-    };
-    const magnetize = (velocity, deltaY) => {
-        const shouldMagnetizeDownByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
-        const shouldMagnetizeUpByVelocity = deltaY < 0 && velocity >= SWIPE_VELOCITY;
-        const updatePosition = (nextOffset, nextAreaIdx) => {
-            setSheetOffset(nextOffset);
-            setActiveAreaIdx((prevState) => (nextAreaIdx === -1 ? prevState : nextAreaIdx));
-            if (nextAreaIdx !== -1) {
-                onMagnetize?.(nextAreaIdx);
-                // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
-                if (sheetOffset === nextOffset) {
-                    onMagnetizeEnd?.(nextAreaIdx);
-                    setSheetHeight();
-                }
-            }
-        };
-        if (shouldMagnetizeDownByVelocity) {
-            const nextArea = magneticAreas
-                .slice()
-                .reverse()
-                .find((area) => area < activeArea);
-            if (nextArea === 0) {
-                if (iOSLock) {
-                    unlockScroll();
-                }
-                onClose();
-                return;
-            }
-            const nextOffset = nextArea
-                ? lastMagneticArea - nextArea
-                : lastMagneticArea - activeArea;
-            const nextAreaIdx = getActiveAreaIndex(nextArea);
-            updatePosition(nextOffset, nextAreaIdx);
-            return;
-        }
-        if (shouldMagnetizeUpByVelocity) {
-            const nextArea = magneticAreas.find((area) => area > activeArea);
-            const nextAreaIdx = getActiveAreaIndex(nextArea);
-            const nextOffset = nextArea ? lastMagneticArea - nextArea : 0;
-            updatePosition(nextOffset, nextAreaIdx);
-            return;
-        }
-        const offset = getSheetOffset(deltaY);
-        const currentSheetHeight = lastMagneticArea - offset;
-        const secondArea = magneticAreas[1];
-        const isSecondArea = activeArea === secondArea;
-        const canClose = magneticAreas[0] === 0 && deltaY >= 0;
-        const shouldCloseByOffset = isSecondArea && canClose && 1 - currentSheetHeight / activeArea > CLOSE_OFFSET;
-        if (shouldCloseByOffset) {
-            if (iOSLock) {
-                unlockScroll();
-            }
-            onClose();
-            return;
-        }
-        const { nearestArea } = magneticAreas.reduceRight((res, area) => {
-            if (Math.abs(area - currentSheetHeight) < res.minOffset) {
-                res.minOffset = area - currentSheetHeight;
-                res.nearestArea = area;
-            }
-            return res;
-        }, {
-            nearestArea: lastMagneticArea,
-            minOffset: lastMagneticArea,
-        });
-        if (nearestArea === 0) {
-            if (iOSLock) {
-                unlockScroll();
-            }
-            onClose();
-        }
-        else {
-            const nextOffset = lastMagneticArea - nearestArea;
-            const nextAreaIdx = getActiveAreaIndex(nearestArea);
-            setBackdropOpacity(1);
-            updatePosition(nextOffset, nextAreaIdx);
-        }
-    };
-    /**
-     * Если контент внутри шторки скроллится - то шторка не должна свайпаться
-     * Если шапка внутри шторки зафиксирована - то шторка должна свайпаться только в области шапки
-     */
-    const shouldSkipSwiping = (swipeParams) => {
-        const { deltaY, startY, event, dir } = swipeParams;
-        if (scrollLockedProp || swipingInProgress)
-            return false;
-        if (!swipeableContent && contentRef.current?.contains(event.target)) {
-            return true;
-        }
-        const scrollableNode = scrollableContainer.current;
-        // Точка верхней границы (y координата)
-        const bottomSheetTopY = fullHeight - sheetHeight.current;
-        if (!scrollableNode ||
-            (!stickyHeader && Math.abs(bottomSheetTopY - startY) <= MARKER_HEIGHT) ||
-            (stickyHeader &&
-                headerRef.current &&
-                Math.abs(bottomSheetTopY - startY) <= headerRef.current.clientHeight)) {
-            return false;
-        }
-        const shouldScroll = deltaY >= 0
-            ? scrollableNode.scrollTop > 0
-            : scrollableNode.scrollHeight -
-                scrollableNode.scrollTop -
-                scrollableNode.clientHeight >
-                SCROLL_OFFSET;
-        if (!scrollOccurred.current && shouldScroll) {
-            scrollOccurred.current = true;
-        }
-        // Если контент внутри шторки скроллится горизонально - то шторка не должна закрываться
-        if (horizontalDirections.includes(dir)) {
-            return true;
-        }
-        return shouldScroll;
-    };
-    const handleSheetSwipeEnd = (swipeParams) => {
-        const { initial, velocity, deltaY, event, dir } = swipeParams;
-        const shouldPreventSwipe = scrollOccurred.current ||
-            shouldSkipSwiping({ deltaY, startY: initial[1], event, dir });
-        if (shouldPreventSwipe) {
-            return;
-        }
-        magnetize(velocity, deltaY);
-    };
-    const handleSheetSwipeStart = (swipeParams) => {
-        const { deltaY, initial, event, dir } = swipeParams;
-        if (shouldSkipSwiping({ deltaY, startY: initial[1], event, dir })) {
-            return;
-        }
-        startSwiping(event);
-    };
-    const handleTouchEnd = ({ event }) => stopSwiping(event);
-    const handleSheetSwipeMove = (swipeParams) => {
-        const { initial, deltaY, event, dir } = swipeParams;
-        const shouldPreventSwipe = scrollOccurred.current ||
-            shouldSkipSwiping({ deltaY, startY: initial[1], event, dir });
-        if (shouldPreventSwipe) {
-            return;
-        }
-        if (!swipingInProgress) {
-            startSwiping(event);
-        }
-        const offset = getSheetOffset(deltaY);
-        const opacity = getBackdropOpacity(offset);
-        setSheetOffset(offset);
-        setBackdropOpacity(opacity);
-    };
-    const sheetSwipeableHandlers = useSwipeable({
-        onSwipeStart: handleSheetSwipeStart,
-        onSwiping: handleSheetSwipeMove,
-        onSwiped: handleSheetSwipeEnd,
-        onTouchEndOrOnMouseUp: handleTouchEnd,
-        trackMouse: swipeable,
-        trackTouch: swipeable,
-        delta: swipeThreshold,
-    });
-    const handleExited = (node) => {
-        const idx = initialIndexRef.current;
-        setBackdropOpacity(1);
-        setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
-        setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
-        onMagnetizeEnd?.(0);
-        if (transitionProps.onExited) {
-            transitionProps.onExited(node);
-        }
-    };
-    const handleEnter = (node, isAppearing) => {
-        onMagnetize?.(initialIndexRef.current ?? magneticAreas.length - 1);
-        if (transitionProps.onEnter) {
-            transitionProps.onEnter(node, isAppearing);
-        }
-    };
-    const handleExit = (node) => {
-        onMagnetize?.(0);
-        if (transitionProps.onExit) {
-            transitionProps.onExit(node);
-        }
-    };
-    const handleEntered = (node, isAppearing) => {
-        setBackdropOpacity(1);
-        setSheetHeight();
-        // Ready for swiping
-        setSwipingInProgress(false);
-        onMagnetizeEnd?.(getActiveAreaIndex(activeArea));
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    };
-    useEffect(() => {
-        if (!isFirstRender) {
-            // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
-            if (activeAreaIdx === -1) {
-                const idx = initialIndexRef.current;
-                setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
-                setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
-            }
-            else {
-                setSheetOffset(activeArea ? lastMagneticArea - activeArea : 0);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFirstRender, magneticAreas, lastMagneticArea]);
-    useEffect(() => {
-        if (!sheetRef.current)
-            return;
-        const maxOffset = fullHeight - headerOffset;
-        const offset = open ? sheetOffset : maxOffset;
-        const percent = (offset / maxOffset) * 100;
-        onOffsetChange?.(offset, percent);
-    }, [fullHeight, headerOffset, onOffsetChange, open, sheetOffset]);
-    useImperativeHandle(bottomSheetInstanceRef, () => ({
-        scrollToArea,
-    }));
-    const getSwipeStyles = () => sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
-    const getHeightStyles = () => ({
-        height: !isFirstRender && (initialHeight === 'full' || magneticAreasProp)
-            ? `${lastMagneticArea}px`
-            : 'unset',
-        maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
-        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
-            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
-            : undefined,
-    });
-    const renderMarker = () => {
-        if (swipeable) {
-            if (swipeableMarker) {
-                return (React.createElement("div", { className: cn(styles.marker, swipeableMarkerClassName) }, swipeableMarker));
-            }
-            return (React.createElement("div", { className: cn(styles.marker, styles.defaultMarker, swipeableMarkerClassName) }));
-        }
-        return null;
-    };
-    const bgClassName = backgroundColor && styles[`background-${backgroundColor}`];
-    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, usePortal: usePortal, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
-            ...backdropProps,
-            className: styles.disabledPointerEvents,
-            opacity: backdropOpacity,
-            opacityTimeout: TIMEOUT,
-            invisible: hideOverlay,
-        }, disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn(styles.modal, modalClassName), wrapperClassName: cn(modalWrapperClassName, {
-            [styles.disabledPointerEvents]: hideOverlay,
-        }), disableBlockingScroll: disableBlockingScroll, disableFocusLock: disableFocusLock, transitionProps: {
-            appear: true,
-            timeout: TIMEOUT,
-            classNames: styles,
-            ...transitionProps,
-            onExited: handleExited,
-            onEntered: handleEntered,
-            onEnter: handleEnter,
-            onExit: handleExit,
-        }, disableAutoFocus: disableAutoFocus, disableEscapeKeyDown: disableEscapeKeyDown, disableRestoreFocus: disableRestoreFocus, keepMounted: keepMounted, iOSLock: iOSLock },
-        React.createElement("div", { className: cn(styles.wrapper, {
-                [styles.fullscreen]: headerOffset === 0 && sheetOffset === 0,
-            }), onTransitionEnd: setSheetHeight },
-            React.createElement("div", { className: cn(styles.component, bgClassName, className, {
-                    [styles.withTransition]: swipingInProgress === false,
-                    [styles.safeAreaBottom]: os.isIOS(),
-                }), style: {
-                    ...getSwipeStyles(),
-                    ...getHeightStyles(),
-                }, ...sheetSwipeableHandlers, ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: handleTransitionEnd },
-                renderMarker(),
-                React.createElement("div", { ...containerProps, className: cn(styles.scrollableContainer, containerProps?.className, containerClassName, {
-                        [styles.scrollLocked]: scrollLockedProp || swipingInProgress,
-                        [styles.hiddenScrollbar]: hideScrollbar,
-                    }), ref: mergeRefs([scrollableContainer, scrollableContainerRef]) },
-                    !hideHeader && !emptyHeader && React.createElement(Header, { ...headerProps }),
-                    React.createElement("div", { ref: contentRef, className: cn(styles.content, contentClassName, {
-                            [styles.noHeader]: hideHeader || emptyHeader,
-                            [styles.noFooter]: !actionButton,
-                        }), "data-test-id": getDataTestId(dataTestId, 'content') }, children),
-                    actionButton && (React.createElement(Footer, { sticky: stickyFooter, className: cn(bgClassName, footerClassName), dataTestId: getDataTestId(dataTestId, 'footer') }, actionButton)))))));
-});
-BottomSheet.displayName = 'BottomSheet';
-
-export { BottomSheet };

package/bottom-sheet/moderncssm/components/footer/Component.d.ts

@@ -1,21 +0,0 @@
-import { FC, ReactNode } from 'react';
-type FooterProps = {
-    /**
-     * Контент футера
-     */
-    children?: ReactNode;
-    /**
-     * Фиксирует футер
-     */
-    sticky?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Footer: FC<FooterProps>;
-export { FooterProps, Footer };

package/bottom-sheet/moderncssm/components/footer/Component.js

@@ -1,17 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import cn from 'classnames';
-import { BaseModalContext } from '../../../../base-modal/moderncssm';
-import styles from './index.module.css';
-
-const Footer = ({ children, className, sticky, dataTestId }) => {
-    const { footerHighlighted, setHasFooter } = useContext(BaseModalContext);
-    useEffect(() => {
-        setHasFooter(true);
-    }, [setHasFooter]);
-    return (React.createElement("div", { className: cn(styles.footer, className, {
-            [styles.sticky]: sticky,
-            [styles.highlighted]: footerHighlighted && sticky,
-        }), "data-test-id": dataTestId }, children));
-};
-
-export { Footer };

package/bottom-sheet/moderncssm/components/footer/index.module.css

@@ -1,88 +0,0 @@
-/* */
-:root {
-
-    /* header */
-
-    /* footer */
-    --bottom-sheet-footer-border-top: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-footer-background-color: var(--color-light-modal-bg-primary);
-}
-.footer {
-    padding: var(--gap-m) var(--gap-m);
-    background-color: var(--color-light-modal-bg-primary);
-}
-.sticky {
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-}
-.highlighted {
-    border-top: var(--bottom-sheet-footer-border-top);
-    background-color: var(--bottom-sheet-footer-background-color);
-}
-.background-accent {
-            background-color: var(--color-light-bg-accent);
-        }
-.background-info {
-            background-color: var(--color-light-bg-info);
-        }
-.background-attention-muted {
-            background-color: var(--color-light-bg-attention-muted);
-        }
-.background-positive-muted {
-            background-color: var(--color-light-bg-positive-muted);
-        }
-.background-negative-muted {
-            background-color: var(--color-light-bg-negative-muted);
-        }
-.background-primary {
-            background-color: var(--color-light-bg-primary);
-        }
-.background-primary-inverted {
-            background-color: var(--color-light-bg-primary-inverted);
-        }
-.background-secondary {
-            background-color: var(--color-light-bg-secondary);
-        }
-.background-secondary-inverted {
-            background-color: var(--color-light-bg-secondary-inverted);
-        }
-.background-tertiary {
-            background-color: var(--color-light-bg-tertiary);
-        }
-.background-tertiary-inverted {
-            background-color: var(--color-light-bg-tertiary-inverted);
-        }
-.background-quaternary {
-            background-color: var(--color-light-bg-quaternary);
-        }
-.background-quaternary-inverted {
-            background-color: var(--color-light-bg-quaternary-inverted);
-        }
-.background-specialbg-component {
-            background-color: var(--color-light-specialbg-component);
-        }
-.background-specialbg-component-inverted {
-            background-color: var(--color-light-specialbg-component-inverted);
-        }
-.background-specialbg-primary-grouped {
-            background-color: var(--color-light-specialbg-primary-grouped);
-        }
-.background-specialbg-secondary-grouped {
-            background-color: var(--color-light-specialbg-secondary-grouped);
-        }
-.background-specialbg-tertiary-grouped {
-            background-color: var(--color-light-specialbg-tertiary-grouped);
-        }
-.background-specialbg-secondary-transparent {
-            background-color: var(--color-light-specialbg-secondary-transparent);
-        }
-.background-specialbg-secondary-transparent-inverted {
-            background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        }
-.background-specialbg-tertiary-transparent {
-            background-color: var(--color-light-specialbg-tertiary-transparent);
-        }
-.background-specialbg-tertiary-transparent-inverted {
-            background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
-        }

package/bottom-sheet/moderncssm/components/header/Component.d.ts

@@ -1,8 +0,0 @@
-import { FC, RefObject } from 'react';
-import { NavigationBarPrivateProps } from "../../../../navigation-bar-private";
-type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
-    headerRef: RefObject<HTMLDivElement>;
-    headerOffset: number;
-};
-declare const Header: FC<HeaderProps>;
-export { HeaderProps, Header };

package/bottom-sheet/moderncssm/components/header/Component.js

@@ -1,23 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import cn from 'classnames';
-import { BaseModalContext } from '../../../../base-modal/moderncssm';
-import { NavigationBarPrivate } from '../../../../navigation-bar-private/moderncssm';
-import styles from './index.module.css';
-
-const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {
-    const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } = useContext(BaseModalContext);
-    useEffect(() => {
-        setHeaderOffset(headerOffset);
-    }, [headerOffset, setHeaderOffset]);
-    useEffect(() => {
-        setHasHeader(true);
-    }, [setHasHeader]);
-    const hasContent = Boolean(title || children);
-    return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, {
-            [styles.highlighted]: hasContent && headerHighlighted && sticky,
-            [styles.sticky]: sticky,
-            [styles.hasContent]: hasContent,
-        }), contentClassName: cn(styles.title) }, children));
-};
-
-export { Header };

package/bottom-sheet/moderncssm/components/header/index.module.css

@@ -1,63 +0,0 @@
-/* */
-:root {
-
-    /* header */
-    --bottom-sheet-header-border-bottom: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-title-font-size: 18px;
-    --bottom-sheet-title-font-weight: 700;
-    --bottom-sheet-title-line-height: 24px;
-    --bottom-sheet-title-font-family: var(--font-family-system);
-
-    /* footer */
-}
-.headerWrapper {
-    padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    z-index: 1;
-}
-.hasContent {
-    background-color: inherit;
-}
-.header {
-    display: flex;
-}
-.sticky {
-    position: sticky;
-    top: 0;
-}
-.highlighted {
-    border-bottom: var(--bottom-sheet-header-border-bottom);
-}
-.justifyEnd {
-    justify-content: flex-end;
-}
-.addon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 48px;
-    height: 48px;
-}
-.addonFixed {
-    position: fixed;
-}
-.title {
-    padding: var(--gap-s) var(--gap-xs);
-    width: 100%;
-    font-size: var(--bottom-sheet-title-font-size);
-    font-weight: var(--bottom-sheet-title-font-weight);
-    line-height: var(--bottom-sheet-title-line-height);
-    font-family: var(--bottom-sheet-title-font-family);
-}
-.titleCenter {
-    text-align: center;
-}
-.titleLeft {
-    text-align: left;
-}
-.trimTitle {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

package/bottom-sheet/moderncssm/components/swipeable-backdrop/Component.d.ts

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-import { SwipeableHandlers } from 'react-swipeable';
-import { BackdropProps } from "../../../../backdrop";
-type SwipeableBackdropProps = BackdropProps & {
-    /**
-     * Прозрачность бэкдропа
-     */
-    opacity?: number;
-    /**
-     * Обработчики свайпа
-     */
-    handlers?: SwipeableHandlers;
-    /**
-     * Время анимации opacity
-     */
-    opacityTimeout?: number;
-};
-declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
-export { SwipeableBackdropProps, SwipeableBackdrop };

package/bottom-sheet/moderncssm/components/swipeable-backdrop/Component.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Backdrop } from '../../../../backdrop/moderncssm';
-
-const SwipeableBackdrop = ({ opacity, handlers, opacityTimeout, style, ...backdropProps }) => (React.createElement("div", { ...handlers, style: {
-        opacity,
-        transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
-        position: 'relative',
-        ...style,
-    } },
-    React.createElement(Backdrop, { ...backdropProps })));
-
-export { SwipeableBackdrop };

package/bottom-sheet/moderncssm/consts/swipeConsts.d.ts

@@ -1,2 +0,0 @@
-declare const horizontalDirections: [string, string];
-export { horizontalDirections };