@hhgtech/hhg-components/build/index-e16696c3.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var vaul = require('vaul');
var styled = require('@emotion/styled');
var index = require('./index-1ee4ebb8.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledDrawerComponentContent = styled__default["default"](vaul.Drawer.Content) `
  position: fixed;
  z-index: ${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;
  }
`;
const StyledDrawerComponentOverlay = styled__default["default"](vaul.Drawer.Overlay) `
  position: fixed;
  inset: 0;
  z-index: ${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 = index.ZINDEX_SSO - 9e6 } = props, restProps = tslib_es6.__rest(props, ["open", "onOpenChange", "snapPoints", "activeSnapPoint", "setActiveSnapPoint", "children", "overlayClassName", "className", "fadeFromIndex"]);
    const [open, setOpen] = React.useState(openProps);
    const [snap, setSnap] = React.useState(snapPoints ? snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0] : null);
    const onOpenChange = React.useCallback((_open) => {
        setOpen(_open);
        onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(_open);
    }, [onOpenChangeProps]);
    const isFullSnapPoint = React.useMemo(() => {
        if (snapPoints && snapPoints.length) {
            return Boolean(snap === snapPoints[snapPoints.length - 1]);
        }
        return open;
    }, [snap, snapPoints]);
    const mergedProps = React.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,
    ]);
    React.useEffect(() => {
        setOpen(openProps);
    }, [openProps]);
    React.useEffect(() => {
        setSnap(activeSnapPoint);
    }, [activeSnapPoint]);
    return (React__default["default"].createElement(vaul.Drawer.Root, Object.assign({}, restProps, mergedProps),
        React__default["default"].createElement(vaul.Drawer.Portal, null,
            React__default["default"].createElement(StyledDrawerComponentOverlay, { className: core.clsx(overlayClassName, 'drawer__overlay', {
                    drawer__overlay_full: isFullSnapPoint,
                }) }),
            React__default["default"].createElement(StyledDrawerComponentContent, { className: core.clsx(className, 'drawer__content', {
                    drawer__content_full: isFullSnapPoint,
                }) },
                React__default["default"].createElement(vaul.Drawer.Handle, { className: "drawer__handle" }),
                React__default["default"].createElement(vaul.Drawer.Title, { style: { display: 'none' } }),
                children))));
};

exports.DrawerComponent = DrawerComponent;