@payloadcms/ui 3.68.0-internal-debug.56c9b68 → 3.68.0-internal-debug.185cc5f

package/dist/elements/Popup/index.js

@@ -1,5 +1,4 @@
 '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';
@@ -8,175 +7,179 @@ import { useIntersect } from '../../hooks/useIntersect.js';
 import { PopupTrigger } from './PopupTrigger/index.js';
 import './index.scss';
 const baseClass = 'popup';
-export const Popup = props => {
-  const {
-    id,
-    boundingRef,
-    button,
-    buttonClassName,
-    buttonSize,
-    buttonType = 'default',
-    caret = true,
-    children,
-    className,
-    disabled,
-    forceOpen,
-    horizontalAlign: horizontalAlignFromProps = 'left',
-    initActive = false,
-    noBackground,
-    onToggleClose,
-    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 triggerRef = useRef(null);
-  const [active, setActive_Internal] = useState(initActive);
-  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
-  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
-  const setActive = React.useCallback(active_0 => {
-    if (active_0 && typeof onToggleOpen === 'function') {
-      onToggleOpen(true);
-    }
-    if (!active_0 && typeof onToggleClose === 'function') {
-      onToggleClose();
-    }
-    setActive_Internal(active_0);
-  }, [onToggleClose, onToggleOpen]);
-  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');
+export const Popup = (props)=>{
+    const { id, boundingRef, button, buttonClassName, buttonSize, buttonType = 'default', caret = true, children, className, disabled, forceOpen, horizontalAlign: horizontalAlignFromProps = 'left', initActive = false, noBackground, onToggleClose, 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 triggerRef = useRef(null);
+    const [active, setActive_Internal] = useState(initActive);
+    const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
+    const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
+    const setActive = React.useCallback((active)=>{
+        if (active && typeof onToggleOpen === 'function') {
+            onToggleOpen(true);
         }
-      }
-      if (vertical) {
-        if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
-          setVerticalAlign('bottom');
-        } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
-          setVerticalAlign('top');
+        if (!active && typeof onToggleClose === 'function') {
+            onToggleClose();
         }
-      }
-    }
-  }, [boundingRef]);
-  const handleClickOutside = useCallback(e => {
-    if (contentRef.current.contains(e.target) || triggerRef.current.contains(e.target)) {
-      return;
-    }
-    setActive(false);
-  }, [contentRef, setActive]);
-  useEffect(() => {
-    setPosition({
-      horizontal: true
-    });
-  }, [intersectionEntry, setPosition, windowWidth]);
-  useEffect(() => {
-    setPosition({
-      vertical: true
-    });
-  }, [intersectionEntry, setPosition, windowHeight]);
-  useEffect(() => {
-    if (active) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [active, handleClickOutside, onToggleOpen]);
-  useEffect(() => {
-    setActive(forceOpen);
-  }, [forceOpen, setActive]);
-  const classes = [baseClass, className, `${baseClass}--size-${size}`, buttonSize && `${baseClass}--button-size-${buttonSize}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes,
-    id: id,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__trigger-wrap`,
-      ref: triggerRef,
-      children: showOnHover ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__on-hover-watch`,
-        onMouseEnter: () => setActive(true),
-        onMouseLeave: () => setActive(false),
-        role: "button",
-        tabIndex: 0,
-        children: /*#__PURE__*/_jsx(PopupTrigger, {
-          active,
-          button,
-          buttonType,
-          className: buttonClassName,
-          disabled,
-          noBackground,
-          setActive,
-          size: buttonSize
-        })
-      }) : /*#__PURE__*/_jsx(PopupTrigger, {
+        setActive_Internal(active);
+    }, [
+        onToggleClose,
+        onToggleOpen
+    ]);
+    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) || triggerRef.current.contains(e.target)) {
+            return;
+        }
+        setActive(false);
+    }, [
+        contentRef,
+        setActive
+    ]);
+    useEffect(()=>{
+        setPosition({
+            horizontal: true
+        });
+    }, [
+        intersectionEntry,
+        setPosition,
+        windowWidth
+    ]);
+    useEffect(()=>{
+        setPosition({
+            vertical: true
+        });
+    }, [
+        intersectionEntry,
+        setPosition,
+        windowHeight
+    ]);
+    useEffect(()=>{
+        if (active) {
+            document.addEventListener('mousedown', handleClickOutside);
+        } else {
+            document.removeEventListener('mousedown', handleClickOutside);
+        }
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [
         active,
-        button,
-        buttonType,
-        className: buttonClassName,
-        disabled,
-        noBackground,
-        setActive,
-        size: buttonSize
-      })
-    }), /*#__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]
-          })
-        })
-      }), caret && /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__caret`
-      })]
-    })]
-  });
+        handleClickOutside,
+        onToggleOpen
+    ]);
+    useEffect(()=>{
+        setActive(forceOpen);
+    }, [
+        forceOpen,
+        setActive
+    ]);
+    const classes = [
+        baseClass,
+        className,
+        `${baseClass}--size-${size}`,
+        buttonSize && `${baseClass}--button-size-${buttonSize}`,
+        `${baseClass}--v-align-${verticalAlign}`,
+        `${baseClass}--h-align-${horizontalAlign}`,
+        active && `${baseClass}--active`,
+        showScrollbar && `${baseClass}--show-scrollbar`
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        id: id,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__trigger-wrap`,
+                ref: triggerRef,
+                children: showOnHover ? /*#__PURE__*/ _jsx("div", {
+                    className: `${baseClass}__on-hover-watch`,
+                    onMouseEnter: ()=>setActive(true),
+                    onMouseLeave: ()=>setActive(false),
+                    role: "button",
+                    tabIndex: 0,
+                    children: /*#__PURE__*/ _jsx(PopupTrigger, {
+                        active,
+                        button,
+                        buttonType,
+                        className: buttonClassName,
+                        disabled,
+                        noBackground,
+                        setActive,
+                        size: buttonSize
+                    })
+                }) : /*#__PURE__*/ _jsx(PopupTrigger, {
+                    active,
+                    button,
+                    buttonType,
+                    className: buttonClassName,
+                    disabled,
+                    noBackground,
+                    setActive,
+                    size: buttonSize
+                })
+            }),
+            /*#__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
+                                ]
+                            })
+                        })
+                    }),
+                    caret && /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__caret`
+                    })
+                ]
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","id","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleClose","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","triggerRef","active","setActive_Internal","setVerticalAlign","setHorizontalAlign","setActive","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","ref","onMouseEnter","onMouseLeave","role","tabIndex","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 { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\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  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\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  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\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    id,\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\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\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 triggerRef = useRef(null)\n  const [active, setActive_Internal] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setActive = React.useCallback(\n    (active: boolean) => {\n      if (active && typeof onToggleOpen === 'function') {\n        onToggleOpen(true)\n      }\n      if (!active && typeof onToggleClose === 'function') {\n        onToggleClose()\n      }\n      setActive_Internal(active)\n    },\n    [onToggleClose, onToggleOpen],\n  )\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) || triggerRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef, setActive],\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 (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, setActive])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    buttonSize && `${baseClass}--button-size-${buttonSize}`,\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} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n                size: buttonSize,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n              size: buttonSize,\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}\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":[]}
+{"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.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\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  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\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    id,\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\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\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 triggerRef = useRef(null)\n  const [active, setActive_Internal] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setActive = React.useCallback(\n    (active: boolean) => {\n      if (active && typeof onToggleOpen === 'function') {\n        onToggleOpen(true)\n      }\n      if (!active && typeof onToggleClose === 'function') {\n        onToggleClose()\n      }\n      setActive_Internal(active)\n    },\n    [onToggleClose, onToggleOpen],\n  )\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) || triggerRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef, setActive],\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 (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, setActive])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    buttonSize && `${baseClass}--button-size-${buttonSize}`,\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} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n                size: buttonSize,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n              size: buttonSize,\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}\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","id","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleClose","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","triggerRef","active","setActive_Internal","setVerticalAlign","setHorizontalAlign","setActive","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","ref","onMouseEnter","onMouseLeave","role","tabIndex","close"],"mappings":"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"}

package/dist/elements/PreviewButton/index.js

@@ -1,6 +1,4 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ExternalLinkIcon } from '../../icons/ExternalLink/index.js';
@@ -9,33 +7,20 @@ import { usePreviewURL } from '../../providers/LivePreview/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 const baseClass = 'preview-btn';
 export function PreviewButton(props) {
-  const $ = _c(3);
-  const {
-    previewURL
-  } = usePreviewURL();
-  const {
-    t
-  } = useTranslation();
-  if (!previewURL) {
-    return null;
-  }
-  let t0;
-  if ($[0] !== previewURL || $[1] !== t) {
-    t0 = _jsx("a", {
-      "aria-label": t("version:preview"),
-      className: baseClass,
-      href: previewURL,
-      id: "preview-button",
-      target: "_blank",
-      title: t("version:preview"),
-      children: _jsx(ExternalLinkIcon, {})
+    const { previewURL } = usePreviewURL();
+    const { t } = useTranslation();
+    if (!previewURL) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("a", {
+        "aria-label": t('version:preview'),
+        className: baseClass,
+        href: previewURL,
+        id: "preview-button",
+        target: "_blank",
+        title: t('version:preview'),
+        children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
     });
-    $[0] = previewURL;
-    $[1] = t;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ExternalLinkIcon","usePreviewURL","useTranslation","baseClass","PreviewButton","props","$","previewURL","t","t0","_jsx","className","href","id","target","title","children"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { PreviewButtonClientProps } from 'payload'\n\nimport React from 'react'\n\nimport { ExternalLinkIcon } from '../../icons/ExternalLink/index.js'\nimport './index.scss'\nimport { usePreviewURL } from '../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'preview-btn'\n\nexport function PreviewButton(props: PreviewButtonClientProps) {\n  const { previewURL } = usePreviewURL()\n  const { t } = useTranslation()\n\n  if (!previewURL) {\n    return null\n  }\n\n  return (\n    <a\n      aria-label={t('version:preview')}\n      className={baseClass}\n      href={previewURL}\n      id=\"preview-button\"\n      target=\"_blank\"\n      title={t('version:preview')}\n    >\n      <ExternalLinkIcon />\n    </a>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,gBAAgB,QAAQ;AACjC,OAAO;AACP,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,cAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACL;IAAAS;EAAA,IAAuBN,aAAA;EACvB;IAAAO;EAAA,IAAcN,cAAA;EAAA,KAETK,UAAA;IAAA;EAAA;EAAA,IAAAE,EAAA;EAAA,IAAAH,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,CAAA;IAKHC,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaF,CAAA,CAAE;MAAAG,SAAA,EAAAR,SAAA;MAAAS,IAAA,EAERL,UAAA;MAAAM,EAAA,EACH;MAAAC,MAAA,EACI;MAAAC,KAAA,EACAP,CAAA,CAAE;MAAAQ,QAAA,EAETN,IAAA,CAAAV,gBAAA,IAAC;IAAA,C;;;;;;;SARHS,E","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { PreviewButtonClientProps } from 'payload'\n\nimport React from 'react'\n\nimport { ExternalLinkIcon } from '../../icons/ExternalLink/index.js'\nimport './index.scss'\nimport { usePreviewURL } from '../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'preview-btn'\n\nexport function PreviewButton(props: PreviewButtonClientProps) {\n  const { previewURL } = usePreviewURL()\n  const { t } = useTranslation()\n\n  if (!previewURL) {\n    return null\n  }\n\n  return (\n    <a\n      aria-label={t('version:preview')}\n      className={baseClass}\n      href={previewURL}\n      id=\"preview-button\"\n      target=\"_blank\"\n      title={t('version:preview')}\n    >\n      <ExternalLinkIcon />\n    </a>\n  )\n}\n"],"names":["React","ExternalLinkIcon","usePreviewURL","useTranslation","baseClass","PreviewButton","props","previewURL","t","a","aria-label","className","href","id","target","title"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,gBAAgB,QAAQ,oCAAmC;AACpE,OAAO,eAAc;AACrB,SAASC,aAAa,QAAQ,yCAAwC;AACtE,SAASC,cAAc,QAAQ,uCAAsC;AAErE,MAAMC,YAAY;AAElB,OAAO,SAASC,cAAcC,KAA+B;IAC3D,MAAM,EAAEC,UAAU,EAAE,GAAGL;IACvB,MAAM,EAAEM,CAAC,EAAE,GAAGL;IAEd,IAAI,CAACI,YAAY;QACf,OAAO;IACT;IAEA,qBACE,KAACE;QACCC,cAAYF,EAAE;QACdG,WAAWP;QACXQ,MAAML;QACNM,IAAG;QACHC,QAAO;QACPC,OAAOP,EAAE;kBAET,cAAA,KAACP;;AAGP"}