@payloadcms/richtext-lexical 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

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

@@ -1,108 +1,86 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import { mergeRegister } from '@lexical/utils';
 import { $getSelection } from 'lexical';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 const baseClass = 'toolbar-popup__button';
-export const ToolbarButton = ({ children, editor, item })=>{
-    const [enabled, setEnabled] = useState(true);
-    const [active, setActive] = useState(false);
-    const [className, setClassName] = useState(baseClass);
-    const editorConfigContext = useEditorConfigContext();
-    const updateStates = useCallback(()=>{
-        editor.getEditorState().read(()=>{
-            const selection = $getSelection();
-            if (item.isActive) {
-                const isActive = item.isActive({
-                    editor,
-                    editorConfigContext,
-                    selection
-                });
-                if (active !== isActive) {
-                    setActive(isActive);
-                }
-            }
-            if (item.isEnabled) {
-                const isEnabled = item.isEnabled({
-                    editor,
-                    editorConfigContext,
-                    selection
-                });
-                if (enabled !== isEnabled) {
-                    setEnabled(isEnabled);
-                }
-            }
+export const ToolbarButton = ({
+  children,
+  editor,
+  item
+}) => {
+  const [enabled, setEnabled] = useState(true);
+  const [active, setActive] = useState(false);
+  const [className, setClassName] = useState(baseClass);
+  const editorConfigContext = useEditorConfigContext();
+  const updateStates = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (item.isActive) {
+        const isActive = item.isActive({
+          editor,
+          editorConfigContext,
+          selection
+        });
+        if (active !== isActive) {
+          setActive(isActive);
+        }
+      }
+      if (item.isEnabled) {
+        const isEnabled = item.isEnabled({
+          editor,
+          editorConfigContext,
+          selection
         });
-    }, [
-        active,
-        editor,
-        editorConfigContext,
-        enabled,
-        item
-    ]);
-    useEffect(()=>{
-        updateStates();
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        document.addEventListener('mouseup', updateStates);
-        return ()=>{
-            document.removeEventListener('mouseup', updateStates);
-        };
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerUpdateListener(()=>{
-            updateStates();
-        }));
-    }, [
-        editor,
-        updateStates
-    ]);
-    useEffect(()=>{
-        setClassName([
-            baseClass,
-            enabled === false ? 'disabled' : '',
-            active ? 'active' : '',
-            item?.key ? `${baseClass}-` + item.key : ''
-        ].filter(Boolean).join(' '));
-    }, [
-        enabled,
-        active,
-        className,
-        item.key
-    ]);
-    return /*#__PURE__*/ _jsx("button", {
-        className: className,
-        onClick: ()=>{
-            if (enabled !== false) {
-                editor._updateTags = new Set([
-                    ...editor._updateTags,
-                    'toolbar'
-                ]) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
-                ;
-                editor.focus(()=>{
-                    // 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 true;
-            }
-        },
-        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();
-        },
-        type: "button",
-        children: children
+        if (enabled !== isEnabled) {
+          setEnabled(isEnabled);
+        }
+      }
     });
+  }, [active, editor, editorConfigContext, enabled, item]);
+  useEffect(() => {
+    updateStates();
+  }, [updateStates]);
+  useEffect(() => {
+    document.addEventListener('mouseup', updateStates);
+    return () => {
+      document.removeEventListener('mouseup', updateStates);
+    };
+  }, [updateStates]);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(() => {
+      updateStates();
+    }));
+  }, [editor, updateStates]);
+  useEffect(() => {
+    setClassName([baseClass, enabled === false ? 'disabled' : '', active ? 'active' : '', item?.key ? `${baseClass}-` + item.key : ''].filter(Boolean).join(' '));
+  }, [enabled, active, className, item.key]);
+  return /*#__PURE__*/_jsx("button", {
+    className: className,
+    onClick: () => {
+      if (enabled !== false) {
+        editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
+        ;
+        editor.focus(() => {
+          // 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 true;
+      }
+    },
+    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();
+    },
+    type: "button",
+    children: children
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [enabled, setEnabled] = useState<boolean>(true)\n  const [active, setActive] = useState<boolean>(false)\n  const [className, setClassName] = useState<string>(baseClass)\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (item.isActive) {\n        const isActive = item.isActive({ editor, editorConfigContext, selection })\n        if (active !== isActive) {\n          setActive(isActive)\n        }\n      }\n      if (item.isEnabled) {\n        const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n        if (enabled !== isEnabled) {\n          setEnabled(isEnabled)\n        }\n      }\n    })\n  }, [active, editor, editorConfigContext, enabled, item])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-` + item.key : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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          return true\n        }\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      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorConfigContext","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorConfigContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","button","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,QAAQ,UAAS;AACvC,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,sBAAsB,QAAQ,4DAA2D;AAGlG,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,SAASC,WAAW,GAAGR,SAAkB;IAChD,MAAM,CAACS,QAAQC,UAAU,GAAGV,SAAkB;IAC9C,MAAM,CAACW,WAAWC,aAAa,GAAGZ,SAAiBE;IACnD,MAAMW,sBAAsBZ;IAE5B,MAAMa,eAAehB,YAAY;QAC/BO,OAAOU,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAYrB;YAClB,IAAIU,KAAKY,QAAQ,EAAE;gBACjB,MAAMA,WAAWZ,KAAKY,QAAQ,CAAC;oBAAEb;oBAAQQ;oBAAqBI;gBAAU;gBACxE,IAAIR,WAAWS,UAAU;oBACvBR,UAAUQ;gBACZ;YACF;YACA,IAAIZ,KAAKa,SAAS,EAAE;gBAClB,MAAMA,YAAYb,KAAKa,SAAS,CAAC;oBAAEd;oBAAQQ;oBAAqBI;gBAAU;gBAC1E,IAAIV,YAAYY,WAAW;oBACzBX,WAAWW;gBACb;YACF;QACF;IACF,GAAG;QAACV;QAAQJ;QAAQQ;QAAqBN;QAASD;KAAK;IAEvDP,UAAU;QACRe;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACRqB,SAASC,gBAAgB,CAAC,WAAWP;QACrC,OAAO;YACLM,SAASE,mBAAmB,CAAC,WAAWR;QAC1C;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACR,OAAOJ,cACLU,OAAOkB,sBAAsB,CAAC;YAC5BT;QACF;IAEJ,GAAG;QAACT;QAAQS;KAAa;IAEzBf,UAAU;QACRa,aACE;YACEV;YACAK,YAAY,QAAQ,aAAa;YACjCE,SAAS,WAAW;YACpBH,MAAMkB,MAAM,CAAC,EAAEtB,UAAU,CAAC,CAAC,GAAGI,KAAKkB,GAAG,GAAG;SAC1C,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAEZ,GAAG;QAACpB;QAASE;QAAQE;QAAWL,KAAKkB,GAAG;KAAC;IAEzC,qBACE,KAACI;QACCjB,WAAWA;QACXkB,SAAS;YACP,IAAItB,YAAY,OAAO;gBACrBF,OAAOyB,WAAW,GAAG,IAAIC,IAAI;uBAAI1B,OAAOyB,WAAW;oBAAE;iBAAU,EAAE,kHAAkH;;gBAEnLzB,OAAO2B,KAAK,CAAC;oBACX,iHAAiH;oBACjH1B,KAAK2B,QAAQ,CAAC;wBACZ5B;wBACAa,UAAUT;oBACZ;gBACF;gBAEA,OAAO;YACT;QACF;QACAyB,aAAa,CAACC;YACZ,8HAA8H;YAC9H,2JAA2J;YAC3J,sKAAsK;YACtKA,EAAEC,cAAc;QAClB;QACAC,MAAK;kBAEJjC;;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorConfigContext","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorConfigContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","_jsx","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [enabled, setEnabled] = useState<boolean>(true)\n  const [active, setActive] = useState<boolean>(false)\n  const [className, setClassName] = useState<string>(baseClass)\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (item.isActive) {\n        const isActive = item.isActive({ editor, editorConfigContext, selection })\n        if (active !== isActive) {\n          setActive(isActive)\n        }\n      }\n      if (item.isEnabled) {\n        const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n        if (enabled !== isEnabled) {\n          setEnabled(isEnabled)\n        }\n      }\n    })\n  }, [active, editor, editorConfigContext, enabled, item])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-` + item.key : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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          return true\n        }\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      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,aAAa,QAAQ;AAC9B,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAIxD,SAASC,sBAAsB,QAAQ;AAGvC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAAgBA,CAAC;EAC5BC,QAAQ;EACRC,MAAM;EACNC;AAAI,CAKL;EACC,MAAM,CAACC,OAAA,EAASC,UAAA,CAAW,GAAGR,QAAA,CAAkB;EAChD,MAAM,CAACS,MAAA,EAAQC,SAAA,CAAU,GAAGV,QAAA,CAAkB;EAC9C,MAAM,CAACW,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAiBE,SAAA;EACnD,MAAMW,mBAAA,GAAsBZ,sBAAA;EAE5B,MAAMa,YAAA,GAAehB,WAAA,CAAY;IAC/BO,MAAA,CAAOU,cAAc,GAAGC,IAAI,CAAC;MAC3B,MAAMC,SAAA,GAAYrB,aAAA;MAClB,IAAIU,IAAA,CAAKY,QAAQ,EAAE;QACjB,MAAMA,QAAA,GAAWZ,IAAA,CAAKY,QAAQ,CAAC;UAAEb,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QACxE,IAAIR,MAAA,KAAWS,QAAA,EAAU;UACvBR,SAAA,CAAUQ,QAAA;QACZ;MACF;MACA,IAAIZ,IAAA,CAAKa,SAAS,EAAE;QAClB,MAAMA,SAAA,GAAYb,IAAA,CAAKa,SAAS,CAAC;UAAEd,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QAC1E,IAAIV,OAAA,KAAYY,SAAA,EAAW;UACzBX,UAAA,CAAWW,SAAA;QACb;MACF;IACF;EACF,GAAG,CAACV,MAAA,EAAQJ,MAAA,EAAQQ,mBAAA,EAAqBN,OAAA,EAASD,IAAA,CAAK;EAEvDP,SAAA,CAAU;IACRe,YAAA;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACRqB,QAAA,CAASC,gBAAgB,CAAC,WAAWP,YAAA;IACrC,OAAO;MACLM,QAAA,CAASE,mBAAmB,CAAC,WAAWR,YAAA;IAC1C;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACR,OAAOJ,aAAA,CACLU,MAAA,CAAOkB,sBAAsB,CAAC;MAC5BT,YAAA;IACF;EAEJ,GAAG,CAACT,MAAA,EAAQS,YAAA,CAAa;EAEzBf,SAAA,CAAU;IACRa,YAAA,CACE,CACEV,SAAA,EACAK,OAAA,KAAY,QAAQ,aAAa,IACjCE,MAAA,GAAS,WAAW,IACpBH,IAAA,EAAMkB,GAAA,GAAM,GAAGtB,SAAA,GAAY,GAAGI,IAAA,CAAKkB,GAAG,GAAG,GAC1C,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAEZ,GAAG,CAACpB,OAAA,EAASE,MAAA,EAAQE,SAAA,EAAWL,IAAA,CAAKkB,GAAG,CAAC;EAEzC,oBACEI,IAAA,CAAC;IACCjB,SAAA,EAAWA,SAAA;IACXkB,OAAA,EAASA,CAAA;MACP,IAAItB,OAAA,KAAY,OAAO;QACrBF,MAAA,CAAOyB,WAAW,GAAG,IAAIC,GAAA,CAAI,C,GAAI1B,MAAA,CAAOyB,WAAW,EAAE,UAAU,EAAE;QAAA;QAEjEzB,MAAA,CAAO2B,KAAK,CAAC;UACX;UACA1B,IAAA,CAAK2B,QAAQ,CAAC;YACZ5B,MAAA;YACAa,QAAA,EAAUT;UACZ;QACF;QAEA,OAAO;MACT;IACF;IACAyB,WAAA,EAAcC,CAAA;MACZ;MACA;MACA;MACAA,CAAA,CAAEC,cAAc;IAClB;IACAC,IAAA,EAAK;cAEJjC;;AAGP","ignoreList":[]}

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

@@ -1,223 +1,202 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, item, title }) {
-    const [className, setClassName] = useState(baseClass);
-    useEffect(()=>{
-        setClassName([
-            baseClass,
-            enabled === false ? 'disabled' : '',
-            active ? 'active' : '',
-            item?.key ? `${baseClass}-${item.key}` : ''
-        ].filter(Boolean).join(' '));
-    }, [
-        enabled,
-        active,
-        className,
-        item.key
-    ]);
-    const ref = useRef(null);
-    const dropDownContext = React.useContext(DropDownContext);
-    if (dropDownContext === null) {
-        throw new Error('DropDownItem must be used within a DropDown');
+const DropDownContext = /*#__PURE__*/React.createContext(null);
+export function DropDownItem({
+  active,
+  children,
+  editor,
+  enabled,
+  item,
+  title
+}) {
+  const [className, setClassName] = useState(baseClass);
+  useEffect(() => {
+    setClassName([baseClass, enabled === false ? 'disabled' : '', active ? 'active' : '', item?.key ? `${baseClass}-${item.key}` : ''].filter(Boolean).join(' '));
+  }, [enabled, active, className, item.key]);
+  const ref = useRef(null);
+  const dropDownContext = React.useContext(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 { registerItem } = dropDownContext;
-    useEffect(()=>{
-        if (ref?.current != null) {
-            registerItem(ref);
-        }
-    }, [
-        ref,
-        registerItem
-    ]);
-    return /*#__PURE__*/ _jsx("button", {
-        className: className,
-        onClick: ()=>{
-            if (enabled !== false) {
-                editor._updateTags = new Set([
-                    ...editor._updateTags,
-                    'toolbar'
-                ]) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
-                ;
-                editor.focus(()=>{
-                    // 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,
-        title: title,
-        type: "button",
-        children: children
-    });
+  }, [ref, registerItem]);
+  return /*#__PURE__*/_jsx("button", {
+    className: className,
+    onClick: () => {
+      if (enabled !== false) {
+        editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
+        ;
+        editor.focus(() => {
+          // 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,
+    title: title,
+    type: "button",
+    children: children
+  });
 }
-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)=>{
-                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__*/ _jsx(DropDownContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: (itemsContainerClassNames ?? [
-                'toolbar-popup__dropdown-items'
-            ]).join(' '),
-            onKeyDown: handleKeyDown,
-            ref: dropDownRef,
-            children: children
-        })
-    });
+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];
+        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];
+        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.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      className: (itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' '),
+      onKeyDown: handleKeyDown,
+      ref: dropDownRef,
+      children: children
+    })
+  });
 }
-export function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, disabled = false, 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`;
+export function DropDown({
+  Icon,
+  buttonAriaLabel,
+  buttonClassName,
+  children,
+  disabled = false,
+  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;
+        if (stopCloseOnClickSelf != null) {
+          if (dropDownRef.current != null && dropDownRef.current.contains(target)) {
+            return;
+          }
         }
-    }, [
-        dropDownRef,
-        buttonRef,
-        showDropDown
-    ]);
-    useEffect(()=>{
-        const button = buttonRef.current;
-        if (button !== null && showDropDown) {
-            const handle = (event)=>{
-                const { target } = event;
-                if (stopCloseOnClickSelf != null) {
-                    if (dropDownRef.current != null && dropDownRef.current.contains(target)) {
-                        return;
-                    }
-                }
-                if (!button.contains(target)) {
-                    setShowDropDown(false);
-                }
-            };
-            document.addEventListener('click', handle);
-            return ()=>{
-                document.removeEventListener('click', handle);
-            };
+        if (!button_0.contains(target)) {
+          setShowDropDown(false);
         }
-    }, [
-        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' : ''),
-                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__*/ _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
-            })
-        ]
-    });
+      };
+      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' : ''),
+      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
+    })]
+  });
 }
-
 //# sourceMappingURL=DropDown.js.map