@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
33 lines • 1.59 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Drawer } from '@mui/material';
import { forwardRef, startTransition, useCallback, useImperativeHandle, useRef, useState, } from 'react';
import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js';
import { modalProps, slotProps } from '../Dialog.js';
export const BottomSheet = forwardRef(({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
const getContainer = useGetScrollableContainer();
const openRef = useRef(open);
const [drawerOpen, setDrawerOpen] = useState(open);
const [isInert, setIsInert] = useState(!open);
const close = useCallback(() => {
// Set inert first to prevent focus issues
setIsInert(true);
// Push the state update to the next event loop tick
// to ensure the inert is applied to before the drawer is closed
startTransition(() => {
setDrawerOpen(false);
openRef.current = false;
onClose?.();
});
}, [onClose]);
useImperativeHandle(ref, () => ({
isOpen: () => openRef.current,
open: () => {
setIsInert(false);
setDrawerOpen(true);
openRef.current = true;
},
close,
}), [close]);
return (_jsx(Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, slotProps: slotProps, disableAutoFocus: true, keepMounted: keepMounted, inert: isInert, children: children }));
});
//# sourceMappingURL=BottomSheet.js.map