@payloadcms/richtext-lexical 3.71.0-canary.3 → 3.71.0-internal-debug.dea9d74

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js

@@ -1,224 +1,280 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { Button } from '@payloadcms/ui';
 import { $addUpdateTag, isDOMNode } from 'lexical';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 const baseClass = 'toolbar-popup__dropdown-item';
-const DropDownContext = /*#__PURE__*/React.createContext(null);
-export function DropDownItem({
-  active,
-  children,
-  editor,
-  enabled,
-  Icon,
-  item,
-  itemKey,
-  tooltip
-}) {
-  const className = useMemo(() => {
-    return [baseClass, enabled === false ? 'disabled' : '', active ? 'active' : '', item?.key ? `${baseClass}-${item.key}` : ''].filter(Boolean).join(' ');
-  }, [enabled, active, item.key]);
-  const ref = useRef(null);
-  const dropDownContext = React.use(DropDownContext);
-  if (dropDownContext === null) {
-    throw new Error('DropDownItem must be used within a DropDown');
-  }
-  const {
-    registerItem
-  } = dropDownContext;
-  useEffect(() => {
-    if (ref?.current != null) {
-      registerItem(ref);
+const DropDownContext = /*#__PURE__*/ React.createContext(null);
+export function DropDownItem({ active, children, editor, enabled, Icon, item, itemKey, tooltip }) {
+    const className = useMemo(()=>{
+        return [
+            baseClass,
+            enabled === false ? 'disabled' : '',
+            active ? 'active' : '',
+            item?.key ? `${baseClass}-${item.key}` : ''
+        ].filter(Boolean).join(' ');
+    }, [
+        enabled,
+        active,
+        item.key
+    ]);
+    const ref = useRef(null);
+    const dropDownContext = React.use(DropDownContext);
+    if (dropDownContext === null) {
+        throw new Error('DropDownItem must be used within a DropDown');
     }
-  }, [ref, registerItem]);
-  return /*#__PURE__*/_jsx(Button, {
-    "aria-label": tooltip,
-    buttonStyle: "none",
-    className: className,
-    disabled: enabled === false,
-    extraButtonProps: {
-      'data-item-key': itemKey
-    },
-    icon: Icon,
-    iconPosition: "left",
-    iconStyle: "none",
-    onClick: () => {
-      if (enabled !== false) {
-        editor.focus(() => {
-          editor.update(() => {
-            $addUpdateTag('toolbar');
-          });
-          // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
-          item.onSelect?.({
-            editor,
-            isActive: active
-          });
-        });
-      }
-    },
-    onMouseDown: e => {
-      // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.
-      // This only happens in Firefox. Must be something about how Firefox handles focus events differently.
-      e.preventDefault();
-    },
-    ref: ref,
-    tooltip: tooltip,
-    type: "button",
-    children: children
-  });
+    const { registerItem } = dropDownContext;
+    useEffect(()=>{
+        if (ref?.current != null) {
+            registerItem(ref);
+        }
+    }, [
+        ref,
+        registerItem
+    ]);
+    return /*#__PURE__*/ _jsxDEV(Button, {
+        "aria-label": tooltip,
+        buttonStyle: "none",
+        className: className,
+        disabled: enabled === false,
+        extraButtonProps: {
+            'data-item-key': itemKey
+        },
+        icon: Icon,
+        iconPosition: "left",
+        iconStyle: "none",
+        onClick: ()=>{
+            if (enabled !== false) {
+                editor.focus(()=>{
+                    editor.update(()=>{
+                        $addUpdateTag('toolbar');
+                    });
+                    // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
+                    item.onSelect?.({
+                        editor,
+                        isActive: active
+                    });
+                });
+            }
+        },
+        onMouseDown: (e)=>{
+            // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.
+            // This only happens in Firefox. Must be something about how Firefox handles focus events differently.
+            e.preventDefault();
+        },
+        ref: ref,
+        tooltip: tooltip,
+        type: "button",
+        children: children
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 64,
+        columnNumber: 5
+    }, this);
 }
-function DropDownItems({
-  children,
-  dropDownRef,
-  itemsContainerClassNames,
-  onClose
-}) {
-  const [items, setItems] = useState();
-  const [highlightedItem, setHighlightedItem] = useState();
-  const registerItem = useCallback(itemRef => {
-    setItems(prev => prev != null ? [...prev, itemRef] : [itemRef]);
-  }, [setItems]);
-  const handleKeyDown = event => {
-    if (items == null) {
-      return;
-    }
-    const {
-      key
-    } = event;
-    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {
-      event.preventDefault();
-    }
-    if (key === 'Escape' || key === 'Tab') {
-      onClose();
-    } else if (key === 'ArrowUp') {
-      setHighlightedItem(prev_0 => {
-        if (prev_0 == null) {
-          return items[0];
+function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClose }) {
+    const [items, setItems] = useState();
+    const [highlightedItem, setHighlightedItem] = useState();
+    const registerItem = useCallback((itemRef)=>{
+        setItems((prev)=>prev != null ? [
+                ...prev,
+                itemRef
+            ] : [
+                itemRef
+            ]);
+    }, [
+        setItems
+    ]);
+    const handleKeyDown = (event)=>{
+        if (items == null) {
+            return;
         }
-        const index = items.indexOf(prev_0) - 1;
-        return items[index === -1 ? items.length - 1 : index];
-      });
-    } else if (key === 'ArrowDown') {
-      setHighlightedItem(prev_1 => {
-        if (prev_1 == null) {
-          return items[0];
+        const { key } = event;
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Escape',
+            'Tab'
+        ].includes(key)) {
+            event.preventDefault();
         }
-        return items[items.indexOf(prev_1) + 1];
-      });
-    }
-  };
-  const contextValue = useMemo(() => ({
-    registerItem
-  }), [registerItem]);
-  useEffect(() => {
-    if (items != null && highlightedItem == null) {
-      setHighlightedItem(items[0]);
-    }
-    if (highlightedItem != null && highlightedItem?.current != null) {
-      highlightedItem.current.focus();
-    }
-  }, [items, highlightedItem]);
-  return /*#__PURE__*/_jsx(DropDownContext, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
-      className: (itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' '),
-      onKeyDown: handleKeyDown,
-      ref: dropDownRef,
-      children: children
-    })
-  });
+        if (key === 'Escape' || key === 'Tab') {
+            onClose();
+        } else if (key === 'ArrowUp') {
+            setHighlightedItem((prev)=>{
+                if (prev == null) {
+                    return items[0];
+                }
+                const index = items.indexOf(prev) - 1;
+                return items[index === -1 ? items.length - 1 : index];
+            });
+        } else if (key === 'ArrowDown') {
+            setHighlightedItem((prev)=>{
+                if (prev == null) {
+                    return items[0];
+                }
+                return items[items.indexOf(prev) + 1];
+            });
+        }
+    };
+    const contextValue = useMemo(()=>({
+            registerItem
+        }), [
+        registerItem
+    ]);
+    useEffect(()=>{
+        if (items != null && highlightedItem == null) {
+            setHighlightedItem(items[0]);
+        }
+        if (highlightedItem != null && highlightedItem?.current != null) {
+            highlightedItem.current.focus();
+        }
+    }, [
+        items,
+        highlightedItem
+    ]);
+    return /*#__PURE__*/ _jsxDEV(DropDownContext, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: (itemsContainerClassNames ?? [
+                'toolbar-popup__dropdown-items'
+            ]).join(' '),
+            onKeyDown: handleKeyDown,
+            ref: dropDownRef,
+            children: children
+        }, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+            lineNumber: 175,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 174,
+        columnNumber: 5
+    }, this);
 }
-export function DropDown({
-  buttonAriaLabel,
-  buttonClassName,
-  children,
-  disabled = false,
-  dropdownKey,
-  Icon,
-  itemsContainerClassNames,
-  label,
-  stopCloseOnClickSelf
-}) {
-  const dropDownRef = useRef(null);
-  const buttonRef = useRef(null);
-  const [showDropDown, setShowDropDown] = useState(false);
-  const handleClose = () => {
-    setShowDropDown(false);
-    if (buttonRef?.current != null) {
-      buttonRef.current.focus();
-    }
-  };
-  useEffect(() => {
-    const button = buttonRef.current;
-    const dropDown = dropDownRef.current;
-    if (showDropDown && button !== null && dropDown !== null) {
-      const {
-        left,
-        top
-      } = button.getBoundingClientRect();
-      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop;
-      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`;
-      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`;
-    }
-  }, [dropDownRef, buttonRef, showDropDown]);
-  useEffect(() => {
-    const button_0 = buttonRef.current;
-    if (button_0 !== null && showDropDown) {
-      const handle = event => {
-        const target = event.target;
-        if (!isDOMNode(target)) {
-          return;
+export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled = false, dropdownKey, Icon, itemsContainerClassNames, label, stopCloseOnClickSelf }) {
+    const dropDownRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [showDropDown, setShowDropDown] = useState(false);
+    const handleClose = ()=>{
+        setShowDropDown(false);
+        if (buttonRef?.current != null) {
+            buttonRef.current.focus();
         }
-        if (stopCloseOnClickSelf) {
-          if (dropDownRef.current && dropDownRef.current.contains(target)) {
-            return;
-          }
+    };
+    useEffect(()=>{
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (showDropDown && button !== null && dropDown !== null) {
+            const { left, top } = button.getBoundingClientRect();
+            const scrollTopOffset = window.scrollY || document.documentElement.scrollTop;
+            dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`;
+            dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`;
         }
-        if (!button_0.contains(target)) {
-          setShowDropDown(false);
+    }, [
+        dropDownRef,
+        buttonRef,
+        showDropDown
+    ]);
+    useEffect(()=>{
+        const button = buttonRef.current;
+        if (button !== null && showDropDown) {
+            const handle = (event)=>{
+                const target = event.target;
+                if (!isDOMNode(target)) {
+                    return;
+                }
+                if (stopCloseOnClickSelf) {
+                    if (dropDownRef.current && dropDownRef.current.contains(target)) {
+                        return;
+                    }
+                }
+                if (!button.contains(target)) {
+                    setShowDropDown(false);
+                }
+            };
+            document.addEventListener('click', handle);
+            return ()=>{
+                document.removeEventListener('click', handle);
+            };
         }
-      };
-      document.addEventListener('click', handle);
-      return () => {
-        document.removeEventListener('click', handle);
-      };
-    }
-  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
-  const portal = /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(DropDownItems, {
-    dropDownRef: dropDownRef,
-    itemsContainerClassNames: itemsContainerClassNames,
-    onClose: handleClose,
-    children: children
-  }), document.body);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs("button", {
-      "aria-label": buttonAriaLabel,
-      className: buttonClassName + (showDropDown ? ' active' : ''),
-      "data-dropdown-key": dropdownKey,
-      disabled: disabled,
-      onClick: event_0 => {
-        event_0.preventDefault();
-        setShowDropDown(!showDropDown);
-      },
-      onMouseDown: e => {
-        // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).
-        // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025
-        // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.
-        e.preventDefault();
-      },
-      ref: buttonRef,
-      type: "button",
-      children: [Icon && /*#__PURE__*/_jsx(Icon, {}), label && /*#__PURE__*/_jsx("span", {
-        className: "toolbar-popup__dropdown-label",
-        children: label
-      }), /*#__PURE__*/_jsx("i", {
-        className: "toolbar-popup__dropdown-caret"
-      })]
-    }), showDropDown && /*#__PURE__*/_jsx(React.Fragment, {
-      children: portal
-    })]
-  });
+    }, [
+        dropDownRef,
+        buttonRef,
+        showDropDown,
+        stopCloseOnClickSelf
+    ]);
+    const portal = /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxDEV(DropDownItems, {
+        dropDownRef: dropDownRef,
+        itemsContainerClassNames: itemsContainerClassNames,
+        onClose: handleClose,
+        children: children
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 257,
+        columnNumber: 5
+    }, this), document.body);
+    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxDEV("button", {
+                "aria-label": buttonAriaLabel,
+                className: buttonClassName + (showDropDown ? ' active' : ''),
+                "data-dropdown-key": dropdownKey,
+                disabled: disabled,
+                onClick: (event)=>{
+                    event.preventDefault();
+                    setShowDropDown(!showDropDown);
+                },
+                onMouseDown: (e)=>{
+                    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).
+                    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025
+                    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.
+                    e.preventDefault();
+                },
+                ref: buttonRef,
+                type: "button",
+                children: [
+                    Icon && /*#__PURE__*/ _jsxDEV(Icon, {}, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 287,
+                        columnNumber: 18
+                    }, this),
+                    label && /*#__PURE__*/ _jsxDEV("span", {
+                        className: "toolbar-popup__dropdown-label",
+                        children: label
+                    }, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 288,
+                        columnNumber: 19
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("i", {
+                        className: "toolbar-popup__dropdown-caret"
+                    }, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 289,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                lineNumber: 269,
+                columnNumber: 7
+            }, this),
+            showDropDown && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                children: portal
+            }, void 0, false, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                lineNumber: 292,
+                columnNumber: 24
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 268,
+        columnNumber: 5
+    }, this);
 }
+
 //# sourceMappingURL=DropDown.js.map

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDown.js","names":["Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","Icon","item","itemKey","tooltip","className","key","filter","Boolean","join","ref","dropDownContext","use","Error","registerItem","current","_jsx","buttonStyle","disabled","extraButtonProps","icon","iconPosition","iconStyle","onClick","focus","update","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","value","onKeyDown","DropDown","buttonAriaLabel","buttonClassName","dropdownKey","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  Icon,\n  item,\n  itemKey,\n  tooltip,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  Icon: React.ReactNode\n  item: ToolbarGroupItem\n  itemKey: string\n  tooltip?: string\n}): React.ReactNode {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      enabled === false ? 'disabled' : '',\n      active ? 'active' : '',\n      item?.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [enabled, active, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.use(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <Button\n      aria-label={tooltip}\n      buttonStyle=\"none\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'data-item-key': itemKey,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\n      iconStyle=\"none\"\n      onClick={() => {\n        if (enabled !== false) {\n          editor.focus(() => {\n            editor.update(() => {\n              $addUpdateTag('toolbar')\n            })\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect?.({\n              editor,\n              isActive: active!,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      tooltip={tooltip}\n      type=\"button\"\n    >\n      {children}\n    </Button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) {\n      return\n    }\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  dropdownKey,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  dropdownKey: string\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const target = event.target\n        if (!isDOMNode(target)) {\n          return\n        }\n        if (stopCloseOnClickSelf) {\n          if (dropDownRef.current && dropDownRef.current.contains(target)) {\n            return\n          }\n        }\n        if (!button.contains(target)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  Icon,\n  item,\n  itemKey,\n  tooltip,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  Icon: React.ReactNode\n  item: ToolbarGroupItem\n  itemKey: string\n  tooltip?: string\n}): React.ReactNode {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      enabled === false ? 'disabled' : '',\n      active ? 'active' : '',\n      item?.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [enabled, active, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.use(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <Button\n      aria-label={tooltip}\n      buttonStyle=\"none\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'data-item-key': itemKey,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\n      iconStyle=\"none\"\n      onClick={() => {\n        if (enabled !== false) {\n          editor.focus(() => {\n            editor.update(() => {\n              $addUpdateTag('toolbar')\n            })\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect?.({\n              editor,\n              isActive: active!,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      tooltip={tooltip}\n      type=\"button\"\n    >\n      {children}\n    </Button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) {\n      return\n    }\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  dropdownKey,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  dropdownKey: string\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const target = event.target\n        if (!isDOMNode(target)) {\n          return\n        }\n        if (stopCloseOnClickSelf) {\n          if (dropDownRef.current && dropDownRef.current.contains(target)) {\n            return\n          }\n        }\n        if (!button.contains(target)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"names":["Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","Icon","item","itemKey","tooltip","className","key","filter","Boolean","join","ref","dropDownContext","use","Error","registerItem","current","aria-label","buttonStyle","disabled","extraButtonProps","icon","iconPosition","iconStyle","onClick","focus","update","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","value","div","onKeyDown","DropDown","buttonAriaLabel","buttonClassName","dropdownKey","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","Fragment","data-dropdown-key","span","i"],"mappings":"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"}