@ruya.sa/richtext-lexical 3.71.7

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

@@ -0,0 +1,156 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeRegister } from '@lexical/utils';
+import { $addUpdateTag, $getSelection } from 'lexical';
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
+const baseClass = 'toolbar-popup__button';
+export const ToolbarButton = t0 => {
+  const $ = _c(23);
+  const {
+    children,
+    editor,
+    item
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      active: false,
+      enabled: true
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [_state, setState] = useState(t1);
+  const deferredState = useDeferredValue(_state);
+  const editorConfigContext = useEditorConfigContext();
+  const t2 = !deferredState.enabled ? "disabled" : "";
+  const t3 = deferredState.active ? "active" : "";
+  const t4 = item.key ? `${baseClass}-${item.key}` : "";
+  let t5;
+  if ($[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
+    t5 = [baseClass, t2, t3, t4].filter(Boolean);
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const className = t5.join(" ");
+  let t6;
+  if ($[5] !== editor || $[6] !== editorConfigContext || $[7] !== item) {
+    t6 = () => {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!selection) {
+          return;
+        }
+        const newActive = item.isActive ? item.isActive({
+          editor,
+          editorConfigContext,
+          selection
+        }) : false;
+        const newEnabled = item.isEnabled ? item.isEnabled({
+          editor,
+          editorConfigContext,
+          selection
+        }) : true;
+        setState(prev => {
+          if (prev.active === newActive && prev.enabled === newEnabled) {
+            return prev;
+          }
+          return {
+            active: newActive,
+            enabled: newEnabled
+          };
+        });
+      });
+    };
+    $[5] = editor;
+    $[6] = editorConfigContext;
+    $[7] = item;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  const updateStates = t6;
+  const runDeprioritized = useRunDeprioritized();
+  let t7;
+  let t8;
+  if ($[9] !== editor || $[10] !== runDeprioritized || $[11] !== updateStates) {
+    t7 = () => {
+      runDeprioritized(updateStates);
+      const listener = () => runDeprioritized(updateStates);
+      const cleanup = mergeRegister(editor.registerUpdateListener(listener));
+      document.addEventListener("mouseup", listener);
+      return () => {
+        cleanup();
+        document.removeEventListener("mouseup", listener);
+      };
+    };
+    t8 = [editor, runDeprioritized, updateStates];
+    $[9] = editor;
+    $[10] = runDeprioritized;
+    $[11] = updateStates;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t7 = $[12];
+    t8 = $[13];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[14] !== _state || $[15] !== editor || $[16] !== item) {
+    t9 = () => {
+      if (!_state.enabled) {
+        return;
+      }
+      editor.focus(() => {
+        editor.update(_temp);
+        item.onSelect?.({
+          editor,
+          isActive: _state.active
+        });
+      });
+    };
+    $[14] = _state;
+    $[15] = editor;
+    $[16] = item;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  const handleClick = t9;
+  const handleMouseDown = _temp2;
+  let t10;
+  if ($[18] !== children || $[19] !== className || $[20] !== handleClick || $[21] !== item.key) {
+    t10 = _jsx("button", {
+      className,
+      "data-button-key": item.key,
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      type: "button",
+      children
+    });
+    $[18] = children;
+    $[19] = className;
+    $[20] = handleClick;
+    $[21] = item.key;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  return t10;
+};
+function _temp() {
+  $addUpdateTag("toolbar");
+}
+function _temp2(e) {
+  e.preventDefault();
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","t0","$","children","editor","item","t1","Symbol","for","active","enabled","_state","setState","deferredState","editorConfigContext","t2","t3","t4","key","t5","filter","Boolean","className","join","t6","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","updateStates","runDeprioritized","t7","t8","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","t9","focus","update","_temp","onSelect","handleClick","handleMouseDown","_temp2","t10","_jsx","onClick","onMouseDown","type","e","preventDefault"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\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 [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\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: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\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\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.d.ts

@@ -0,0 +1,25 @@
+import { type LexicalEditor } from 'lexical';
+import React, { type ReactNode } from 'react';
+import type { ToolbarGroupItem } from '../../types.js';
+export declare function DropDownItem({ active, children, editor, enabled, Icon, item, itemKey, tooltip, }: {
+    active?: boolean;
+    children: React.ReactNode;
+    editor: LexicalEditor;
+    enabled?: boolean;
+    Icon: React.ReactNode;
+    item: ToolbarGroupItem;
+    itemKey: string;
+    tooltip?: string;
+}): React.ReactNode;
+export declare function DropDown({ buttonAriaLabel, buttonClassName, children, disabled, dropdownKey, Icon, itemsContainerClassNames, label, stopCloseOnClickSelf, }: {
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    children: ReactNode;
+    disabled?: boolean;
+    dropdownKey: string;
+    Icon?: React.FC;
+    itemsContainerClassNames?: string[];
+    label?: string;
+    stopCloseOnClickSelf?: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=DropDown.d.ts.map

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAA;AAGhG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAUtD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,KAAK,CAAC,SAAS,CAkElB;AAqFD,wBAAgB,QAAQ,CAAC,EACvB,eAAe,EACf,eAAe,EACf,QAAQ,EACR,QAAgB,EAChB,WAAW,EACX,IAAI,EACJ,wBAAwB,EACxB,KAAK,EACL,oBAAoB,GACrB,EAAE;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,SAAS,CAyFlB"}

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

@@ -0,0 +1,224 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@ruya.sa/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);
+    }
+  }, [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
+  });
+}
+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, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      className: (itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' '),
+      onKeyDown: handleKeyDown,
+      ref: dropDownRef,
+      children: children
+    })
+  });
+}
+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;
+        }
+        if (stopCloseOnClickSelf) {
+          if (dropDownRef.current && dropDownRef.current.contains(target)) {
+            return;
+          }
+        }
+        if (!button_0.contains(target)) {
+          setShowDropDown(false);
+        }
+      };
+      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
+    })]
+  });
+}
+//# sourceMappingURL=DropDown.js.map

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

@@ -0,0 +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 '@ruya.sa/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":[]}

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { LexicalEditor } from 'lexical';
+import type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js';
+import './index.scss';
+export declare const ToolbarDropdown: ({ anchorElem, classNames, editor, group, Icon, itemsContainerClassNames, label, maxActiveItems, onActiveChange, }: {
+    anchorElem: HTMLElement;
+    classNames?: string[];
+    editor: LexicalEditor;
+    group: ToolbarDropdownGroup;
+    Icon?: React.FC;
+    itemsContainerClassNames?: string[];
+    label?: string;
+    /**
+     * 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.
+     */
+    maxActiveItems?: number;
+    onActiveChange?: ({ activeItems }: {
+        activeItems: ToolbarGroupItem[];
+    }) => void;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAIhF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAI5E,OAAO,cAAc,CAAA;AAqErB,eAAO,MAAM,eAAe,sHAUzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAChF,sBAsGA,CAAA"}