@razorpay/blade
Version:
The Design System that powers Razorpay
27 lines (24 loc) • 2.82 kB
JavaScript
import React__default from 'react';
import { PopoverContentWrapper } from './PopoverContentWrapper.native.js';
import { PopoverCloseButton } from './PopoverCloseButton.js';
import { usePopoverContext } from './PopoverContext.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import useTheme from '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var PopoverHeader=function PopoverHeader(_ref){var title=_ref.title,titleLeading=_ref.titleLeading;var _usePopoverContext=usePopoverContext(),titleId=_usePopoverContext.titleId,openInteraction=_usePopoverContext.openInteraction;var showCloseButton=openInteraction==='click';var isFloating=!(title||titleLeading);if(isFloating){if(!showCloseButton){return null;}return jsx(BaseBox,{borderRadius:"max",position:"absolute",padding:"spacing.2",top:"spacing.3",right:"spacing.3",zIndex:1,children:jsx(PopoverCloseButton,{})});}return jsxs(BaseBox,{display:"flex",flexDirection:"row",flexWrap:isReactNative()?'wrap':'nowrap',alignItems:"center",gap:"spacing.3",children:[titleLeading?React__default.cloneElement(titleLeading,{size:'medium'}):null,title?jsx(BaseBox,{id:titleId,paddingRight:"spacing.4",children:jsx(Text,{size:"large",weight:"semibold",children:title})}):null,showCloseButton?jsx(BaseBox,{marginLeft:"auto",children:jsx(PopoverCloseButton,{})}):null]});};var PopoverContent=React__default.forwardRef(function(_ref2,ref){var children=_ref2.children,title=_ref2.title,titleLeading=_ref2.titleLeading,footer=_ref2.footer,arrow=_ref2.arrow,side=_ref2.side,style=_ref2.style,isVisible=_ref2.isVisible;var isMobile=useIsMobile();var _useTheme=useTheme(),colorScheme=_useTheme.colorScheme;return jsxs(PopoverContentWrapper,{ref:ref,styles:style,side:side,isVisible:isVisible,isMobile:isMobile,colorScheme:colorScheme,children:[jsxs(BaseBox,{padding:"spacing.5",display:"flex",flexDirection:"column",gap:"spacing.5",children:[jsxs(BaseBox,{display:"flex",flexDirection:"column",gap:"spacing.2",children:[jsx(PopoverHeader,{title:title,titleLeading:titleLeading}),jsx(BaseBox,{children:children})]}),footer?jsx(BaseBox,{children:footer}):null]}),arrow]});});
export { PopoverContent };
//# sourceMappingURL=PopoverContent.js.map