@yamada-ui/popover
Version:
Yamada UI popover component
1 lines • 6.57 kB
Source Map (JSON)
{"version":3,"sources":["../src/popover-content.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { PropsWithChildren } from \"react\"\nimport type { PopoverProps } from \"./popover\"\nimport { ui } from \"@yamada-ui/core\"\nimport { motion, motionForwardRef } from \"@yamada-ui/motion\"\nimport { scaleFadeProps, slideFadeProps } from \"@yamada-ui/transitions\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\nimport { PopoverCloseButton } from \"./popover-close-button\"\n\nexport interface PopoverContentProps\n extends MotionPropsWithoutChildren<\"section\">,\n PropsWithChildren {\n /**\n * The props of the container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n}\n\nconst getPopoverContentProps = (\n animation: PopoverProps[\"animation\"] = \"scale\",\n duration?: PopoverProps[\"duration\"],\n) => {\n const custom = {\n duration,\n enter: { visibility: \"visible\" },\n reverse: true,\n transitionEnd: { exit: { visibility: \"hidden\" } },\n }\n\n switch (animation) {\n case \"scale\":\n return {\n ...scaleFadeProps,\n custom: { ...custom, scale: 0.95 },\n }\n case \"top\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: -16 },\n }\n case \"right\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 16, offsetY: 0 },\n }\n case \"left\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: -16, offsetY: 0 },\n }\n case \"bottom\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: 16 },\n }\n }\n}\n\nexport const PopoverContent = motionForwardRef<PopoverContentProps, \"section\">(\n (\n {\n className,\n children,\n maxW,\n maxWidth = maxW,\n minW,\n minWidth = minW,\n w,\n width = w,\n z,\n zIndex = z,\n containerProps,\n __css,\n ...rest\n },\n ref,\n ) => {\n const {\n animation,\n closeOnButton,\n duration,\n open,\n shouldRenderContent,\n styles,\n getPopoverProps,\n getPopperProps,\n onAnimationComplete,\n } = usePopover()\n\n if (!shouldRenderContent) return null\n\n const validChildren = getValidChildren(children)\n const [customPopoverCloseButton, ...cloneChildren] = findChildren(\n validChildren,\n PopoverCloseButton,\n )\n const css = __css ?? styles.container ?? {}\n const computedCSS: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n position: \"relative\",\n w: \"100%\",\n ...css,\n }\n\n width ??= (css.width ?? css.w) as CSSUIProps[\"width\"]\n minWidth ??= (css.minWidth ?? css.minW) as CSSUIProps[\"minWidth\"]\n maxWidth ??= (css.maxWidth ?? css.maxW) as CSSUIProps[\"maxWidth\"]\n zIndex ??= (css.zIndex ?? css.z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: open ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n maxWidth={maxWidth}\n minWidth={minWidth}\n outline=\"none\"\n width={width}\n zIndex={zIndex}\n {...containerProps}\n >\n <motion.section\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...getPopoverProps(rest, ref)}\n animate={open ? \"enter\" : \"exit\"}\n exit=\"exit\"\n initial=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={computedCSS}\n >\n {customPopoverCloseButton ??\n (closeOnButton ? <PopoverCloseButton /> : null)}\n\n {cloneChildren}\n </motion.section>\n </ui.div>\n )\n },\n)\n\nPopoverContent.displayName = \"PopoverContent\"\nPopoverContent.__ui__ = \"PopoverContent\"\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AACnB,SAAS,QAAQ,wBAAwB;AACzC,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,IAAI,cAAc,SAAS,wBAAwB;AAuHpD,SAgBqB,KAhBrB;AA1GR,IAAM,yBAAyB,CAC7B,YAAuC,SACvC,aACG;AACH,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO,EAAE,YAAY,UAAU;AAAA,IAC/B,SAAS;AAAA,IACT,eAAe,EAAE,MAAM,EAAE,YAAY,SAAS,EAAE;AAAA,EAClD;AAEA,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,OAAO,KAAK;AAAA,MACnC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,GAAG,SAAS,IAAI;AAAA,MAChD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,IAAI,SAAS,EAAE;AAAA,MAC/C;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,KAAK,SAAS,EAAE;AAAA,MAChD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,GAAG,SAAS,GAAG;AAAA,MAC/C;AAAA,EACJ;AACF;AAEO,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA9EP;AA+EI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,WAAW;AAEf,QAAI,CAAC,oBAAqB,QAAO;AAEjC,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,CAAC,0BAA0B,GAAG,aAAa,IAAI;AAAA,MACnD;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAM,6BAAS,OAAO,cAAhB,YAA6B,CAAC;AAC1C,UAAM,cAA2B;AAAA,MAC/B,SAAS;AAAA,MACT,eAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,qCAAW,SAAI,UAAJ,YAAa,IAAI;AAC5B,8CAAc,SAAI,aAAJ,YAAgB,IAAI;AAClC,8CAAc,SAAI,aAAJ,YAAgB,IAAI;AAClC,wCAAY,SAAI,WAAJ,YAAc,IAAI;AAE9B,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACE,GAAG,eAAe;AAAA,UACjB,OAAO,EAAE,YAAY,OAAO,YAAY,SAAS;AAAA,QACnD,CAAC;AAAA,QACD,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,YAC7C,GAAI,cAAc,SACf,uBAAuB,WAAW,QAAQ,IAC1C,CAAC;AAAA,YACJ,GAAG,gBAAgB,MAAM,GAAG;AAAA,YAC7B,SAAS,OAAO,UAAU;AAAA,YAC1B,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,qBAAqB;AAAA,cACnB;AAAA,cACA,KAAK;AAAA,YACP;AAAA,YACA,OAAO;AAAA,YAEN;AAAA,4EACE,gBAAgB,oBAAC,sBAAmB,IAAK;AAAA,cAE3C;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}