@sky-mavis/tanto-widget/dist/mjs/components/flex-modal/FlexModal.mjs

Tanto Widget

import {jsx,jsxs}from'@emotion/react/jsx-runtime';import {useTheme}from'@emotion/react';import {VisuallyHidden}from'@radix-ui/react-visually-hidden';import {createContext,forwardRef,useContext,useMemo}from'react';import {useIsMobileView}from'../../hooks/useIsMobileView.mjs';import {fadeOut,fadeIn}from'../../styles/animations.mjs';import {Overlay as Overlay$2,Content as Content$2,Root as Root$2,Portal as Portal$2,Title as Title$2,Description as Description$2}from'./Dialog.mjs';import {Overlay as Overlay$1,Content as Content$1,Root as Root$1,Portal as Portal$1,Title as Title$1,Description as Description$1}from'./Drawer.mjs';const FlexModalContext = createContext(null);
function useFlexModalContext() {
  const context = useContext(FlexModalContext);
  if (!context) {
    throw new Error('FlexModal components cannot be rendered outside the FlexModal Context');
  }
  return context;
}
const Root = ({
  children,
  ...props
}) => {
  const {
    isMobile
  } = useFlexModalContext();
  const RootComponent = isMobile ? Root$1 : Root$2;
  return jsx(RootComponent, {
    ...props,
    ...(isMobile && {
      autoFocus: true
    }),
    children: children
  });
};
const Portal = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const PortalComponent = isMobile ? Portal$1 : Portal$2;
  return jsx(PortalComponent, {
    ...props
  });
};
const Description = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const DescriptionComponent = isMobile ? Description$1 : Description$2;
  return jsx(DescriptionComponent, {
    ...props
  });
};
const Overlay = forwardRef((props, ref) => {
  const theme = useTheme();
  const {
    isMobile
  } = useFlexModalContext();
  const OverlayComponent = isMobile ? Overlay$1 : Overlay$2;
  return jsx(OverlayComponent, {
    ref: ref,
    css: {
      position: 'fixed',
      inset: 0,
      zIndex: 49,
      backgroundColor: theme.overlayBackground,
      backdropFilter: theme.overlayBackdropFilter,
      '&[data-state="open"]': {
        animation: `${fadeIn} 150ms ease-out`
      },
      '&[data-state="closed"]': {
        animation: `${fadeOut} 150ms ease-out`
      }
    },
    ...props
  });
});
Overlay.displayName = Overlay$2.displayName;
const Content = forwardRef((props, ref) => {
  const {
    isMobile
  } = useFlexModalContext();
  const ContentComponent = isMobile ? Content$1 : Content$2;
  const theme = useTheme();
  return jsx(ContentComponent, {
    ref: ref,
    css: {
      backgroundColor: theme.modalBackground
    },
    ...props
  });
});
Content.displayName = Content$2.displayName;
const Title = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const TitleComponent = isMobile ? Title$1 : Title$2;
  return jsx(TitleComponent, {
    css: {
      flex: 1,
      fontSize: '1.25em',
      fontWeight: 500,
      wordBreak: 'break-word'
    },
    ...props
  });
};
const FlexModal = props => {
  const {
    children,
    defaultOpen,
    open,
    onOpenChange
  } = props;
  const isMobile = useIsMobileView();
  const contextValue = useMemo(() => ({
    isMobile
  }), [isMobile]);
  return jsx(FlexModalContext.Provider, {
    value: contextValue,
    children: jsx(Root, {
      modal: true,
      defaultOpen: defaultOpen,
      open: open,
      onOpenChange: onOpenChange,
      children: jsxs(Portal, {
        children: [jsx(Overlay, {}), jsxs(Content, {
          forceMount: true,
          children: [jsx(VisuallyHidden, {
            children: jsx(Title, {})
          }), jsx(VisuallyHidden, {
            children: jsx(Description, {})
          }), children]
        })]
      })
    })
  });
};export{Content,FlexModal,Overlay,Portal,Root,Title};