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

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('@emotion/react');
var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
var react = require('react');
var useIsMobileView = require('../../hooks/useIsMobileView.cjs');
var animations = require('../../styles/animations.cjs');
var Dialog = require('./Dialog.cjs');
var Drawer = require('./Drawer.cjs');

const FlexModalContext = react.createContext(null);
function useFlexModalContext() {
  const context = react.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 ? Drawer.Root : Dialog.Root;
  return jsxRuntime.jsx(RootComponent, {
    ...props,
    ...(isMobile && {
      autoFocus: true
    }),
    children: children
  });
};
const Portal = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const PortalComponent = isMobile ? Drawer.Portal : Dialog.Portal;
  return jsxRuntime.jsx(PortalComponent, {
    ...props
  });
};
const Description = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const DescriptionComponent = isMobile ? Drawer.Description : Dialog.Description;
  return jsxRuntime.jsx(DescriptionComponent, {
    ...props
  });
};
const Overlay = react.forwardRef((props, ref) => {
  const theme = react$1.useTheme();
  const {
    isMobile
  } = useFlexModalContext();
  const OverlayComponent = isMobile ? Drawer.Overlay : Dialog.Overlay;
  return jsxRuntime.jsx(OverlayComponent, {
    ref: ref,
    css: {
      position: 'fixed',
      inset: 0,
      zIndex: 49,
      backgroundColor: theme.overlayBackground,
      backdropFilter: theme.overlayBackdropFilter,
      '&[data-state="open"]': {
        animation: `${animations.fadeIn} 150ms ease-out`
      },
      '&[data-state="closed"]': {
        animation: `${animations.fadeOut} 150ms ease-out`
      }
    },
    ...props
  });
});
Overlay.displayName = Dialog.Overlay.displayName;
const Content = react.forwardRef((props, ref) => {
  const {
    isMobile
  } = useFlexModalContext();
  const ContentComponent = isMobile ? Drawer.Content : Dialog.Content;
  const theme = react$1.useTheme();
  return jsxRuntime.jsx(ContentComponent, {
    ref: ref,
    css: {
      backgroundColor: theme.modalBackground
    },
    ...props
  });
});
Content.displayName = Dialog.Content.displayName;
const Title = props => {
  const {
    isMobile
  } = useFlexModalContext();
  const TitleComponent = isMobile ? Drawer.Title : Dialog.Title;
  return jsxRuntime.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.useIsMobileView();
  const contextValue = react.useMemo(() => ({
    isMobile
  }), [isMobile]);
  return jsxRuntime.jsx(FlexModalContext.Provider, {
    value: contextValue,
    children: jsxRuntime.jsx(Root, {
      modal: true,
      defaultOpen: defaultOpen,
      open: open,
      onOpenChange: onOpenChange,
      children: jsxRuntime.jsxs(Portal, {
        children: [jsxRuntime.jsx(Overlay, {}), jsxRuntime.jsxs(Content, {
          forceMount: true,
          children: [jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, {
            children: jsxRuntime.jsx(Title, {})
          }), jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, {
            children: jsxRuntime.jsx(Description, {})
          }), children]
        })]
      })
    })
  });
};

exports.Content = Content;
exports.FlexModal = FlexModal;
exports.Overlay = Overlay;
exports.Portal = Portal;
exports.Root = Root;
exports.Title = Title;