@payloadcms/richtext-lexical 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

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

@@ -1,11 +1,10 @@
 'use client';
-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);
+const DropDownContext = React.createContext(null);
 export function DropDownItem({ active, children, editor, enabled, Icon, item, itemKey, tooltip }) {
     const className = useMemo(()=>{
         return [
@@ -33,45 +32,28 @@ export function DropDownItem({ active, children, editor, enabled, Icon, item, it
         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
-                    });
+    return <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');
                 });
-            }
-        },
-        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);
+                // 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}
+    </Button>;
 }
 function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClose }) {
     const [items, setItems] = useState();
@@ -134,25 +116,13 @@ function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClos
         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);
+    return <DropDownContext value={contextValue}>
+      <div className={(itemsContainerClassNames ?? [
+        'toolbar-popup__dropdown-items'
+    ]).join(' ')} onKeyDown={handleKeyDown} ref={dropDownRef}>
+        {children}
+      </div>
+    </DropDownContext>;
 }
 export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled = false, dropdownKey, Icon, itemsContainerClassNames, label, stopCloseOnClickSelf }) {
     const dropDownRef = useRef(null);
@@ -165,12 +135,12 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
         }
     };
     useEffect(()=>{
-        const button = buttonRef.current;
+        const button1 = buttonRef.current;
         const dropDown = dropDownRef.current;
-        if (showDropDown && button !== null && dropDown !== null) {
-            const { left, top } = button.getBoundingClientRect();
+        if (showDropDown && button1 !== null && dropDown !== null) {
+            const { left, top } = button1.getBoundingClientRect();
             const scrollTopOffset = window.scrollY || document.documentElement.scrollTop;
-            dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`;
+            dropDown.style.top = `${top + scrollTopOffset + button1.offsetHeight + 5}px`;
             dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`;
         }
     }, [
@@ -179,8 +149,8 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
         showDropDown
     ]);
     useEffect(()=>{
-        const button = buttonRef.current;
-        if (button !== null && showDropDown) {
+        const button1 = buttonRef.current;
+        if (button1 !== null && showDropDown) {
             const handle = (event)=>{
                 const target = event.target;
                 if (!isDOMNode(target)) {
@@ -191,7 +161,7 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
                         return;
                     }
                 }
-                if (!button.contains(target)) {
+                if (!button1.contains(target)) {
                     setShowDropDown(false);
                 }
             };
@@ -206,75 +176,26 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
         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);
+    const portal = createPortal(<DropDownItems dropDownRef={dropDownRef} itemsContainerClassNames={itemsContainerClassNames} onClose={handleClose}>
+      {children}
+    </DropDownItems>, document.body);
+    return <React.Fragment>
+      <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">
+        {Icon && <Icon/>}
+        {label && <span className="toolbar-popup__dropdown-label">{label}</span>}
+        <i className="toolbar-popup__dropdown-caret"/>
+      </button>
+
+      {showDropDown && <React.Fragment>{portal}</React.Fragment>}
+    </React.Fragment>;
 }
 
 //# sourceMappingURL=DropDown.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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":"AAAA;AACA,SAASA,MAAM,QAAQ,iBAAgB;AACvC,SAASC,aAAa,EAAEC,SAAS,QAA4B,UAAS;AACtE,OAAOC,SAAyBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAChG,SAASC,YAAY,QAAQ,YAAW;AAIxC,MAAMC,YAAY;AAMlB,MAAMC,kBAAkBR,MAAMS,aAAa,CAA6B;AAExE,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPC,OAAO,EAUR;IACC,MAAMC,YAAYhB,QAAQ;QACxB,OAAO;YACLI;YACAO,YAAY,QAAQ,aAAa;YACjCH,SAAS,WAAW;YACpBK,MAAMI,MAAM,GAAGb,UAAU,CAAC,EAAES,KAAKI,GAAG,EAAE,GAAG;SAC1C,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV,GAAG;QAACT;QAASH;QAAQK,KAAKI,GAAG;KAAC;IAE9B,MAAMI,MAAMpB,OAA0B;IAEtC,MAAMqB,kBAAkBzB,MAAM0B,GAAG,CAAClB;IAElC,IAAIiB,oBAAoB,MAAM;QAC5B,MAAM,IAAIE,MAAM;IAClB;IAEA,MAAM,EAAEC,YAAY,EAAE,GAAGH;IAEzBvB,UAAU;QACR,IAAIsB,KAAKK,WAAW,MAAM;YACxBD,aAAaJ;QACf;IACF,GAAG;QAACA;QAAKI;KAAa;IAEtB,QACG/B,OACCiC,YAAYZ,SACZa,YAAY,OACZZ,WAAWA,WACXa,UAAUlB,YAAY,OACtBmB,kBAAkB;QAChB,iBAAiBhB;IACnB,GACAiB,MAAMnB,MACNoB,aAAa,OACbC,UAAU,OACVC,SAAS;QACP,IAAIvB,YAAY,OAAO;YACrBD,OAAOyB,KAAK,CAAC;gBACXzB,OAAO0B,MAAM,CAAC;oBACZzC,cAAc;gBAChB;gBACA,iHAAiH;gBACjHkB,KAAKwB,QAAQ,GAAG;oBACd3B;oBACA4B,UAAU9B;gBACZ;YACF;QACF;IACF,GACA+B,aAAa,CAACC;QACZ,wHAAwH;QACxH,sGAAsG;QACtGA,EAAEC,cAAc;IAClB,GACApB,KAAKA,KACLN,SAASA,SACT2B,KAAK,SACN;MACC,CAACjC,SAAS;IACZ,EAAEf;AAEN;AAEA,SAASiD,cAAc,EACrBlC,QAAQ,EACRmC,WAAW,EACXC,wBAAwB,EACxBC,OAAO,EAMR;IACC,MAAM,CAACC,OAAOC,SAAS,GAAG9C;IAC1B,MAAM,CAAC+C,iBAAiBC,mBAAmB,GACzChD;IAEF,MAAMuB,eAAe3B,YACnB,CAACqD;QACCH,SAAS,CAACI,OAAUA,QAAQ,OAAO;mBAAIA;gBAAMD;aAAQ,GAAG;gBAACA;aAAQ;IACnE,GACA;QAACH;KAAS;IAGZ,MAAMK,gBAAgB,CAACC;QACrB,IAAIP,SAAS,MAAM;YACjB;QACF;QAEA,MAAM,EAAE9B,GAAG,EAAE,GAAGqC;QAEhB,IAAI;YAAC;YAAa;YAAW;YAAU;SAAM,CAACC,QAAQ,CAACtC,MAAM;YAC3DqC,MAAMb,cAAc;QACtB;QAEA,IAAIxB,QAAQ,YAAYA,QAAQ,OAAO;YACrC6B;QACF,OAAO,IAAI7B,QAAQ,WAAW;YAC5BiC,mBAAmB,CAACE;gBAClB,IAAIA,QAAQ,MAAM;oBAChB,OAAOL,KAAK,CAAC,EAAE;gBACjB;gBACA,MAAMS,QAAQT,MAAMU,OAAO,CAACL,QAAQ;gBACpC,OAAOL,KAAK,CAACS,UAAU,CAAC,IAAIT,MAAMW,MAAM,GAAG,IAAIF,MAAM;YACvD;QACF,OAAO,IAAIvC,QAAQ,aAAa;YAC9BiC,mBAAmB,CAACE;gBAClB,IAAIA,QAAQ,MAAM;oBAChB,OAAOL,KAAK,CAAC,EAAE;gBACjB;gBACA,OAAOA,KAAK,CAACA,MAAMU,OAAO,CAACL,QAAQ,EAAE;YACvC;QACF;IACF;IAEA,MAAMO,eAAe3D,QACnB,IAAO,CAAA;YACLyB;QACF,CAAA,GACA;QAACA;KAAa;IAGhB1B,UAAU;QACR,IAAIgD,SAAS,QAAQE,mBAAmB,MAAM;YAC5CC,mBAAmBH,KAAK,CAAC,EAAE;QAC7B;QAEA,IAAIE,mBAAmB,QAAQA,iBAAiBvB,WAAW,MAAM;YAC/DuB,gBAAgBvB,OAAO,CAACS,KAAK;QAC/B;IACF,GAAG;QAACY;QAAOE;KAAgB;IAE3B,QACG5C,gBAAgBuD,OAAOD,cAAc;MACpC,CAACE,IACC7C,WAAW,AAAC6B,CAAAA,4BAA4B;QAAC;KAAgC,AAAD,EAAGzB,IAAI,CAAC,MAChF0C,WAAWT,eACXhC,KAAKuB,aACN;QACC,CAACnC,SAAS;MACZ,EAAEoD,IAAI;IACR,EAAExD;AAEN;AAEA,OAAO,SAAS0D,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfxD,QAAQ,EACRoB,WAAW,KAAK,EAChBqC,WAAW,EACXtD,IAAI,EACJiC,wBAAwB,EACxBsB,KAAK,EACLC,oBAAoB,EAWrB;IACC,MAAMxB,cAAc3C,OAAuB;IAC3C,MAAMoE,YAAYpE,OAA0B;IAC5C,MAAM,CAACqE,cAAcC,gBAAgB,GAAGrE,SAAS;IAEjD,MAAMsE,cAAc;QAClBD,gBAAgB;QAChB,IAAIF,WAAW3C,WAAW,MAAM;YAC9B2C,UAAU3C,OAAO,CAACS,KAAK;QACzB;IACF;IAEApC,UAAU;QACR,MAAM0E,UAASJ,UAAU3C,OAAO;QAChC,MAAMgD,WAAW9B,YAAYlB,OAAO;QAEpC,IAAI4C,gBAAgBG,YAAW,QAAQC,aAAa,MAAM;YACxD,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAE,GAAGH,QAAOI,qBAAqB;YAClD,MAAMC,kBAAkBC,OAAOC,OAAO,IAAIC,SAASC,eAAe,CAACC,SAAS;YAC5ET,SAASU,KAAK,CAACR,GAAG,GAAG,GAAGA,MAAME,kBAAkBL,QAAOY,YAAY,GAAG,EAAE,EAAE,CAAC;YAC3EX,SAASU,KAAK,CAACT,IAAI,GAAG,GAAGW,KAAKC,GAAG,CAACZ,OAAO,GAAGI,OAAOS,UAAU,GAAGd,SAASe,WAAW,GAAG,IAAI,EAAE,CAAC;QAChG;IACF,GAAG;QAAC7C;QAAayB;QAAWC;KAAa;IAEzCvE,UAAU;QACR,MAAM0E,UAASJ,UAAU3C,OAAO;QAEhC,IAAI+C,YAAW,QAAQH,cAAc;YACnC,MAAMoB,SAAS,CAACpC;gBACd,MAAMqC,SAASrC,MAAMqC,MAAM;gBAC3B,IAAI,CAAC/F,UAAU+F,SAAS;oBACtB;gBACF;gBACA,IAAIvB,sBAAsB;oBACxB,IAAIxB,YAAYlB,OAAO,IAAIkB,YAAYlB,OAAO,CAACkE,QAAQ,CAACD,SAAS;wBAC/D;oBACF;gBACF;gBACA,IAAI,CAAClB,QAAOmB,QAAQ,CAACD,SAAS;oBAC5BpB,gBAAgB;gBAClB;YACF;YACAU,SAASY,gBAAgB,CAAC,SAASH;YAEnC,OAAO;gBACLT,SAASa,mBAAmB,CAAC,SAASJ;YACxC;QACF;IACF,GAAG;QAAC9C;QAAayB;QAAWC;QAAcF;KAAqB;IAE/D,MAAM2B,SAAS5F,cACZwC,cACCC,aAAaA,aACbC,0BAA0BA,0BAC1BC,SAAS0B,aACV;MACC,CAAC/D,SAAS;IACZ,EAAEkC,gBACFsC,SAASe,IAAI;IAGf,QACGnG,MAAMoG,SAAS;MACd,CAACxB,OACC9C,YAAYqC,iBACZhD,WAAWiD,kBAAmBK,CAAAA,eAAe,YAAY,EAAC,GAC1D4B,mBAAmBhC,aACnBrC,UAAUA,UACVK,SAAS,CAACoB;QACRA,MAAMb,cAAc;QACpB8B,gBAAgB,CAACD;IACnB,GACA/B,aAAa,CAACC;QACZ,8HAA8H;QAC9H,2JAA2J;QAC3J,sKAAsK;QACtKA,EAAEC,cAAc;IAClB,GACApB,KAAKgD,WACL3B,KAAK,SACN;QACC,CAAC9B,SAASA,OAAQ;QAClB,CAACuD,UAAUgC,KAAKnF,UAAU,iCAAiCmD,QAAQgC,MAAM;QACzE,CAACC,EAAEpF,UAAU,iCAAkC;MACjD,EAAEyD,OAAO;;MAET,CAACH,iBAAiBzE,MAAMoG,UAAUF,SAASlG,MAAMoG,UAAU;IAC7D,EAAEpG,MAAMoG;AAEZ"}

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

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react';
 const baseClass = 'toolbar-popup__dropdown';
 import { mergeRegister } from '@lexical/utils';
@@ -13,17 +12,7 @@ const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
     const { i18n } = useTranslation();
     const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
     if (item.Component) {
-        return item?.Component && /*#__PURE__*/ _jsxDEV(item.Component, {
-            active: active,
-            anchorElem: anchorElem,
-            editor: editor,
-            enabled: enabled,
-            item: item
-        }, item.key, false, {
-            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-            lineNumber: 40,
-            columnNumber: 9
-        }, this);
+        return item?.Component && <item.Component active={active} anchorElem={anchorElem} editor={editor} enabled={enabled} item={item} key={item.key}/>;
     }
     let title = item.key;
     let croppedTitle = item.key;
@@ -40,33 +29,11 @@ const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
     } else {
         croppedTitle = title;
     }
-    return /*#__PURE__*/ _jsxDEV(DropDownItem, {
-        active: active,
-        editor: editor,
-        enabled: enabled,
-        Icon: item?.ChildComponent ? /*#__PURE__*/ _jsxDEV(item.ChildComponent, {}, void 0, false, {
-            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-            lineNumber: 72,
-            columnNumber: 36
-        }, void 0) : undefined,
-        item: item,
-        itemKey: item.key,
-        tooltip: title,
-        children: /*#__PURE__*/ _jsxDEV("span", {
-            className: "text",
-            children: croppedTitle
-        }, void 0, false, {
-            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-            lineNumber: 78,
-            columnNumber: 7
-        }, this)
-    }, item.key, false, {
-        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-        lineNumber: 68,
-        columnNumber: 5
-    }, this);
+    return <DropDownItem active={active} editor={editor} enabled={enabled} Icon={item?.ChildComponent ? <item.ChildComponent/> : undefined} item={item} itemKey={item.key} key={item.key} tooltip={title}>
+      <span className="text">{croppedTitle}</span>
+    </DropDownItem>;
 };
-const MemoToolbarItem = /*#__PURE__*/ React.memo(ToolbarItem);
+const MemoToolbarItem = React.memo(ToolbarItem);
 export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>/**
    * Maximum number of active items allowed. This is a performance optimization to prevent
    * unnecessary item active checks when the maximum number of active items is reached.
@@ -149,44 +116,23 @@ export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, i
         updateStates
     ]);
     const renderedItems = useMemo(()=>{
-        return items?.length ? items.map((item)=>/*#__PURE__*/ _jsxDEV(MemoToolbarItem, {
-                active: deferredToolbarState.activeItemKeys.includes(item.key),
-                anchorElem: anchorElem,
-                editor: editor,
-                enabled: deferredToolbarState.enabledItemKeys.includes(item.key),
-                item: item
-            }, item.key, false, {
-                fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-                lineNumber: 183,
-                columnNumber: 11
-            }, this)) : null;
+        return items?.length ? items.map((item)=><MemoToolbarItem active={deferredToolbarState.activeItemKeys.includes(item.key)} anchorElem={anchorElem} editor={editor} enabled={deferredToolbarState.enabledItemKeys.includes(item.key)} item={item} key={item.key}/>) : null;
     }, [
         items,
         deferredToolbarState,
         anchorElem,
         editor
     ]);
-    return /*#__PURE__*/ _jsxDEV(DropDown, {
-        buttonAriaLabel: `${groupKey} dropdown`,
-        buttonClassName: [
-            baseClass,
-            `${baseClass}-${groupKey}`,
-            ...classNames || []
-        ].filter(Boolean).join(' '),
-        disabled: !deferredToolbarState.enabledGroup,
-        dropdownKey: groupKey,
-        Icon: Icon,
-        itemsContainerClassNames: [
-            `${baseClass}-items`,
-            ...itemsContainerClassNames || []
-        ],
-        label: label,
-        children: renderedItems
-    }, groupKey, false, {
-        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
-        lineNumber: 196,
-        columnNumber: 5
-    }, this);
+    return <DropDown buttonAriaLabel={`${groupKey} dropdown`} buttonClassName={[
+        baseClass,
+        `${baseClass}-${groupKey}`,
+        ...classNames || []
+    ].filter(Boolean).join(' ')} disabled={!deferredToolbarState.enabledGroup} dropdownKey={groupKey} Icon={Icon} itemsContainerClassNames={[
+        `${baseClass}-items`,
+        ...itemsContainerClassNames || []
+    ]} key={groupKey} label={label}>
+      {renderedItems}
+    </DropDown>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"mappings":"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"}