@hhgtech/hhg-components/build/esm/index-f7c27305.js

Hello Health Group common components

import { _ as __rest } from './tslib.es6-7984ef17.js';
import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
import { clsx } from '@mantine/core';
import { Drawer } from 'vaul';
import styled from '@emotion/styled';
import { Z as ZINDEX_SSO } from './index-18cb16b6.js';

const TIME_FOR_MOTION = 300;
const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {
    const [isDragging, setIsDragging] = useState(false);
    const handleDragStart = useCallback(() => {
        setIsDragging(true);
    }, []);
    const handleDragEnd = useCallback(() => {
        setTimeout(() => {
            setIsDragging(false);
        }, motionDelay);
    }, [motionDelay]);
    return {
        isDragging,
        handleDragStart,
        handleDragEnd,
    };
};

const StyledDrawerComponentContent = styled(Drawer.Content) `
  position: fixed;
  z-index: ${ZINDEX_SSO - 9e6 + 1};
  inset: 0;
  background-color: #fff;
  outline: none !important;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
  }

  &[data-vaul-drawer-direction='bottom'] {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  &[data-vaul-drawer-direction='top'] {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  &[data-vaul-drawer-direction='left'] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  &[data-vaul-drawer-direction='right'] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  ${(props) => props.isDragging &&
    `
      input {
        caret-color: transparent;
      }
    `}
`;
const StyledDrawerComponentOverlay = styled(Drawer.Overlay) `
  position: fixed;
  inset: 0;
  z-index: ${ZINDEX_SSO - 9e6};
  width: 100%;
  max-height: 100%;

  &[data-state='open'] {
    opacity: 0.6 !important;
  }
`;

const DrawerComponent = (props) => {
    const { open: openProps, onOpenChange: onOpenChangeProps, snapPoints, activeSnapPoint, setActiveSnapPoint, children, overlayClassName, className, fadeFromIndex = ZINDEX_SSO - 9e6, onClose } = props, restProps = __rest(props, ["open", "onOpenChange", "snapPoints", "activeSnapPoint", "setActiveSnapPoint", "children", "overlayClassName", "className", "fadeFromIndex", "onClose"]);
    const [open, setOpen] = useState(openProps);
    const [snap, setSnap] = useState(snapPoints ? snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0] : null);
    const { isDragging, handleDragStart, handleDragEnd } = useDrawerDrag();
    const onOpenChange = useCallback((_open) => {
        setOpen(_open);
        onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(_open);
    }, [onOpenChangeProps]);
    const isFullSnapPoint = useMemo(() => {
        if (snapPoints && snapPoints.length) {
            return Boolean(snap === snapPoints[snapPoints.length - 1]);
        }
        return open;
    }, [snap, snapPoints]);
    const mergedProps = useMemo(() => {
        const _mergedProps = {
            open,
            onOpenChange,
            fadeFromIndex,
        };
        if (snapPoints && (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.length)) {
            _mergedProps.snapPoints = snapPoints;
            _mergedProps.activeSnapPoint = snap;
            _mergedProps.setActiveSnapPoint = (snP) => {
                setSnap(snP);
                setActiveSnapPoint === null || setActiveSnapPoint === void 0 ? void 0 : setActiveSnapPoint(snP);
            };
        }
        return _mergedProps;
    }, [
        open,
        onOpenChange,
        snap,
        setSnap,
        setActiveSnapPoint,
        snapPoints,
        fadeFromIndex,
    ]);
    useEffect(() => {
        setOpen(openProps);
    }, [openProps]);
    useEffect(() => {
        setSnap(activeSnapPoint);
    }, [activeSnapPoint]);
    return (React__default.createElement(Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, onClose: onClose }, restProps, mergedProps),
        React__default.createElement(Drawer.Portal, null,
            React__default.createElement(StyledDrawerComponentOverlay, { className: clsx(overlayClassName, 'drawer__overlay', {
                    drawer__overlay_full: isFullSnapPoint,
                }) }),
            React__default.createElement(StyledDrawerComponentContent, { isDragging: isDragging, className: clsx(className, 'drawer__content', {
                    drawer__content_full: isFullSnapPoint,
                }) },
                React__default.createElement(Drawer.Handle, { className: "drawer__handle" }),
                React__default.createElement(Drawer.Title, { style: { display: 'none' } }),
                children))));
};

export { DrawerComponent as D, useDrawerDrag as u };