@payloadcms/ui 3.0.0-canary.a0b06af → 3.0.0-canary.a5aaf21

package/dist/elements/Popup/index.d.ts

@@ -4,16 +4,18 @@ import React from 'react';
 import './index.scss';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
-    boundingRef?: React.MutableRefObject<HTMLElement>;
+    boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
     buttonClassName?: string;
     buttonType?: 'custom' | 'default' | 'none';
     caret?: boolean;
     children?: React.ReactNode;
     className?: string;
+    disabled?: boolean;
     forceOpen?: boolean;
     horizontalAlign?: 'center' | 'left' | 'right';
     initActive?: boolean;
+    noBackground?: boolean;
     onToggleOpen?: (active: boolean) => void;
     render?: (any: any) => React.ReactNode;
     showOnHover?: boolean;

package/dist/elements/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgKtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoLtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -1,159 +1,165 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
-import { PopupTrigger } from './PopupTrigger/index.js';
 import './index.scss';
+import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
-export const Popup = (props)=>{
-    const { boundingRef, button, buttonClassName, buttonType = 'default', caret = true, children, className, forceOpen, horizontalAlign: horizontalAlignFromProps = 'left', initActive = false, onToggleOpen, render, showOnHover = false, showScrollbar = false, size = 'medium', verticalAlign: verticalAlignFromProps = 'top' } = props;
-    const { height: windowHeight, width: windowWidth } = useWindowInfo();
-    const [intersectionRef, intersectionEntry] = useIntersect({
-        root: boundingRef?.current || null,
-        rootMargin: '-100px 0px 0px 0px',
-        threshold: 1
-    });
-    const contentRef = useRef(null);
-    const [active, setActive] = useState(initActive);
-    const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
-    const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
-    const setPosition = useCallback(({ horizontal = false, vertical = false })=>{
-        if (contentRef.current) {
-            const bounds = contentRef.current.getBoundingClientRect();
-            const { bottom: contentBottomPos, left: contentLeftPos, right: contentRightPos, top: contentTopPos } = bounds;
-            let boundingTopPos = 100;
-            let boundingRightPos = document.documentElement.clientWidth;
-            let boundingBottomPos = document.documentElement.clientHeight;
-            let boundingLeftPos = 0;
-            if (boundingRef?.current) {
-                ({ bottom: boundingBottomPos, left: boundingLeftPos, right: boundingRightPos, top: boundingTopPos } = boundingRef.current.getBoundingClientRect());
-            }
-            if (horizontal) {
-                if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
-                    setHorizontalAlign('right');
-                } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
-                    setHorizontalAlign('left');
-                }
-            }
-            if (vertical) {
-                if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
-                    setVerticalAlign('bottom');
-                } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
-                    setVerticalAlign('top');
-                }
-            }
-        }
-    }, [
-        boundingRef
-    ]);
-    const handleClickOutside = useCallback((e)=>{
-        if (contentRef.current.contains(e.target)) {
-            return;
+export const Popup = props => {
+  const {
+    boundingRef,
+    button,
+    buttonClassName,
+    buttonType = 'default',
+    caret = true,
+    children,
+    className,
+    disabled,
+    forceOpen,
+    horizontalAlign: horizontalAlignFromProps = 'left',
+    initActive = false,
+    noBackground,
+    onToggleOpen,
+    render,
+    showOnHover = false,
+    showScrollbar = false,
+    size = 'medium',
+    verticalAlign: verticalAlignFromProps = 'top'
+  } = props;
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = useWindowInfo();
+  const [intersectionRef, intersectionEntry] = useIntersect({
+    root: boundingRef?.current || null,
+    rootMargin: '-100px 0px 0px 0px',
+    threshold: 1
+  });
+  const contentRef = useRef(null);
+  const [active, setActive] = useState(initActive);
+  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
+  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
+  const setPosition = useCallback(({
+    horizontal = false,
+    vertical = false
+  }) => {
+    if (contentRef.current) {
+      const bounds = contentRef.current.getBoundingClientRect();
+      const {
+        bottom: contentBottomPos,
+        left: contentLeftPos,
+        right: contentRightPos,
+        top: contentTopPos
+      } = bounds;
+      let boundingTopPos = 100;
+      let boundingRightPos = document.documentElement.clientWidth;
+      let boundingBottomPos = document.documentElement.clientHeight;
+      let boundingLeftPos = 0;
+      if (boundingRef?.current) {
+        ({
+          bottom: boundingBottomPos,
+          left: boundingLeftPos,
+          right: boundingRightPos,
+          top: boundingTopPos
+        } = boundingRef.current.getBoundingClientRect());
+      }
+      if (horizontal) {
+        if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
+          setHorizontalAlign('right');
+        } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
+          setHorizontalAlign('left');
         }
-        setActive(false);
-    }, [
-        contentRef
-    ]);
-    useEffect(()=>{
-        setPosition({
-            horizontal: true
-        });
-    }, [
-        intersectionEntry,
-        setPosition,
-        windowWidth
-    ]);
-    useEffect(()=>{
-        setPosition({
-            vertical: true
-        });
-    }, [
-        intersectionEntry,
-        setPosition,
-        windowHeight
-    ]);
-    useEffect(()=>{
-        if (typeof onToggleOpen === 'function') onToggleOpen(active);
-        if (active) {
-            document.addEventListener('mousedown', handleClickOutside);
-        } else {
-            document.removeEventListener('mousedown', handleClickOutside);
+      }
+      if (vertical) {
+        if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
+          setVerticalAlign('bottom');
+        } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
+          setVerticalAlign('top');
         }
-        return ()=>{
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [
-        active,
-        handleClickOutside,
-        onToggleOpen
-    ]);
-    useEffect(()=>{
-        setActive(forceOpen);
-    }, [
-        forceOpen
-    ]);
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}--size-${size}`,
-        `${baseClass}--v-align-${verticalAlign}`,
-        `${baseClass}--h-align-${horizontalAlign}`,
-        active && `${baseClass}--active`,
-        showScrollbar && `${baseClass}--show-scrollbar`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__trigger-wrap`,
-                children: showOnHover ? /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__on-hover-watch`,
-                    onMouseEnter: ()=>setActive(true),
-                    onMouseLeave: ()=>setActive(false),
-                    children: /*#__PURE__*/ _jsx(PopupTrigger, {
-                        active,
-                        button,
-                        buttonType,
-                        className: buttonClassName,
-                        setActive
-                    })
-                }) : /*#__PURE__*/ _jsx(PopupTrigger, {
-                    active,
-                    button,
-                    buttonType,
-                    className: buttonClassName,
-                    setActive
-                })
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__content`,
-                ref: contentRef,
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__hide-scrollbar`,
-                        ref: intersectionRef,
-                        children: /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__scroll-container`,
-                            children: /*#__PURE__*/ _jsxs("div", {
-                                className: `${baseClass}__scroll-content`,
-                                children: [
-                                    render && render({
-                                        close: ()=>setActive(false)
-                                    }),
-                                    children && children
-                                ]
-                            })
-                        })
-                    }),
-                    caret && /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__caret`
-                    })
-                ]
-            })
-        ]
+      }
+    }
+  }, [boundingRef]);
+  const handleClickOutside = useCallback(e => {
+    if (contentRef.current.contains(e.target)) {
+      return;
+    }
+    setActive(false);
+  }, [contentRef]);
+  useEffect(() => {
+    setPosition({
+      horizontal: true
+    });
+  }, [intersectionEntry, setPosition, windowWidth]);
+  useEffect(() => {
+    setPosition({
+      vertical: true
     });
+  }, [intersectionEntry, setPosition, windowHeight]);
+  useEffect(() => {
+    if (typeof onToggleOpen === 'function') {
+      onToggleOpen(active);
+    }
+    if (active) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [active, handleClickOutside, onToggleOpen]);
+  useEffect(() => {
+    setActive(forceOpen);
+  }, [forceOpen]);
+  const classes = [baseClass, className, `${baseClass}--size-${size}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__trigger-wrap`,
+      children: showOnHover ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__on-hover-watch`,
+        onMouseEnter: () => setActive(true),
+        onMouseLeave: () => setActive(false),
+        children: /*#__PURE__*/_jsx(PopupTrigger, {
+          active,
+          button,
+          buttonType,
+          className: buttonClassName,
+          disabled,
+          noBackground,
+          setActive
+        })
+      }) : /*#__PURE__*/_jsx(PopupTrigger, {
+        active,
+        button,
+        buttonType,
+        className: buttonClassName,
+        disabled,
+        noBackground,
+        setActive
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      ref: contentRef,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__hide-scrollbar`,
+        ref: intersectionRef,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__scroll-container`,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__scroll-content`,
+            children: [render && render({
+              close: () => setActive(false)
+            }), children && children]
+          })
+        })
+      }), caret && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__caret`
+      })]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Popup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.MutableRefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') onToggleOpen(active)\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{ active, button, buttonType, className: buttonClassName, setActive }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{ active, button, buttonType, className: buttonClassName, setActive }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","div","onMouseEnter","onMouseLeave","ref","close"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') {\n      onToggleOpen(active)\n    }\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/index.scss

@@ -9,6 +9,12 @@
   --popup-padding: calc(var(--base) * 0.5);
   position: relative;
 
+  &__trigger-wrap {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+  }
+
   &__content {
     position: absolute;
     background: var(--popup-bg);

package/dist/elements/PreviewButton/index.d.ts

@@ -1,6 +1,7 @@
+import type { MappedComponent } from 'payload';
 import React from 'react';
 type Props = {
-    CustomComponent?: React.ReactNode;
+    CustomComponent?: MappedComponent;
 };
 export declare const PreviewButton: React.FC<Props>;
 export {};

package/dist/elements/PreviewButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAA;AA8BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzC,CAAA"}

package/dist/elements/PreviewButton/index.js

@@ -1,25 +1,55 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { Button } from '../Button/index.js';
 import { usePreviewURL } from './usePreviewURL.js';
 const baseClass = 'preview-btn';
-const DefaultPreviewButton = ()=>{
-    const { generatePreviewURL, label } = usePreviewURL();
-    return /*#__PURE__*/ _jsx(Button, {
-        buttonStyle: "secondary",
-        className: baseClass,
-        // disabled={disabled}
-        onClick: ()=>generatePreviewURL({
-                openPreviewWindow: true
-            }),
-        size: "small",
-        children: label
+const DefaultPreviewButton = () => {
+  const $ = _c(5);
+  const {
+    generatePreviewURL,
+    label
+  } = usePreviewURL();
+  let t0;
+  if ($[0] !== generatePreviewURL) {
+    t0 = () => generatePreviewURL({
+      openPreviewWindow: true
+    });
+    $[0] = generatePreviewURL;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0 || $[3] !== label) {
+    t1 = _jsx(Button, {
+      buttonStyle: "secondary",
+      className: baseClass,
+      icon: "link",
+      iconPosition: "left",
+      onClick: t0,
+      size: "medium",
+      children: label
     });
+    $[2] = t0;
+    $[3] = label;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
 };
-export const PreviewButton = ({ CustomComponent })=>{
-    if (CustomComponent) return CustomComponent;
-    return /*#__PURE__*/ _jsx(DefaultPreviewButton, {});
+export const PreviewButton = ({
+  CustomComponent
+}) => {
+  if (CustomComponent) {
+    return /*#__PURE__*/_jsx(RenderComponent, {
+      mappedComponent: CustomComponent
+    });
+  }
+  return /*#__PURE__*/_jsx(DefaultPreviewButton, {});
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/PreviewButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"small\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: React.ReactNode\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) return CustomComponent\n\n  return <DefaultPreviewButton />\n}\n"],"names":["React","Button","usePreviewURL","baseClass","DefaultPreviewButton","generatePreviewURL","label","buttonStyle","className","onClick","openPreviewWindow","size","PreviewButton","CustomComponent"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,aAAa,QAAQ,qBAAoB;AAElD,MAAMC,YAAY;AAElB,MAAMC,uBAAiC;IACrC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGJ;IAEtC,qBACE,KAACD;QACCM,aAAY;QACZC,WAAWL;QACX,sBAAsB;QACtBM,SAAS,IACPJ,mBAAmB;gBACjBK,mBAAmB;YACrB;QAEFC,MAAK;kBAEJL;;AAGP;AAMA,OAAO,MAAMM,gBAAiC,CAAC,EAAEC,eAAe,EAAE;IAChE,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,KAACT;AACV,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","RenderComponent","Button","usePreviewURL","baseClass","DefaultPreviewButton","$","generatePreviewURL","label","t0","openPreviewWindow","t1","_jsx","buttonStyle","className","icon","iconPosition","onClick","size","children","PreviewButton","CustomComponent","mappedComponent"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { MappedComponent } from 'payload'\n\nimport React from 'react'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      icon={'link'}\n      iconPosition=\"left\"\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"medium\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: MappedComponent\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) {\n    return <RenderComponent mappedComponent={CustomComponent} />\n  }\n\n  return <DefaultPreviewButton />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAE9B,MAAMC,SAAA,GAAY;AAElB,MAAMC,oBAAA,GAAiCA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACrC;IAAAQ,kBAAA;IAAAC;EAAA,IAAsCL,aAAA;EAAA,IAAAM,EAAA;EAAA,IAAAH,CAAA,QAAAC,kBAAA;IASzBE,EAAA,GAAAA,CAAA,KACPF,kBAAA;MAAAG,iBAAA;IAAA,CAEA;IAAAJ,CAAA,MAAAC,kBAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAL,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,KAAA;IATJG,EAAA,GAAAC,IAAA,CAAAV,MAAA;MAAAW,WAAA,EACc;MAAAC,SAAA,EAAAV,SAAA;MAAAW,IAAA,EAEN;MAAAC,YAAA,EACO;MAAAC,OAAA,EAEJR,EAGP;MAAAS,IAAA,EAEG;MAAAC,QAAA,EAEJX;IAAA,C;;;;;;;SAbHG,E;CAgBJ;AAMA,OAAO,MAAMS,aAAA,GAAiCA,CAAC;EAAEC;AAAe,CAAE;EAChE,IAAIA,eAAA,EAAiB;IACnB,oBAAOT,IAAA,CAACX,eAAA;MAAgBqB,eAAA,EAAiBD;;EAC3C;EAEA,oBAAOT,IAAA,CAACP,oBAAA;AACV","ignoreList":[]}

package/dist/elements/PreviewButton/usePreviewURL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CAwDnB,CAAA"}
+{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA8EnB,CAAA"}