@payloadcms/richtext-lexical 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

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

@@ -1,10 +1,10 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 const baseClass = 'toolbar-popup__dropdown-item';
 const DropDownContext = /*#__PURE__*/React.createContext(null);
 export function DropDownItem({
@@ -35,15 +35,17 @@ export function DropDownItem({
   }, [ref, registerItem]);
   return /*#__PURE__*/_jsx(Button, {
     "aria-label": tooltip,
-    buttonStyle: "none",
+    buttonStyle: "ghost",
     className: className,
     disabled: enabled === false,
     extraButtonProps: {
-      'data-item-key': itemKey
+      'aria-checked': item.isActive ? Boolean(active) : undefined,
+      'data-item-key': itemKey,
+      role: item.isActive ? 'menuitemcheckbox' : 'menuitem',
+      tabIndex: -1
     },
     icon: Icon,
     iconPosition: "left",
-    iconStyle: "none",
     onClick: () => {
       if (enabled !== false) {
         editor.focus(() => {
@@ -69,66 +71,145 @@ export function DropDownItem({
     children: children
   });
 }
-function DropDownItems({
-  children,
-  dropDownRef,
-  itemsContainerClassNames,
-  onClose
-}) {
+function DropDownItems(t0) {
+  const $ = _c(17);
+  const {
+    id,
+    children,
+    dropdownKey,
+    dropDownRef,
+    itemsContainerClassNames,
+    onClose,
+    shouldAutoFocus
+  } = t0;
   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];
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = itemRef => {
+      setItems(prev => prev != null ? [...prev, itemRef] : [itemRef]);
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const registerItem = t1;
+  let t2;
+  if ($[1] !== items || $[2] !== onClose) {
+    t2 = event => {
+      if (items == null) {
+        return;
+      }
+      const {
+        key
+      } = event;
+      const enabledItems = items.filter(_temp);
+      if (["ArrowDown", "ArrowUp", "Escape"].includes(key)) {
+        event.preventDefault();
+      }
+      if (key === "Escape") {
+        onClose();
+      } else {
+        if (key === "Tab") {
+          setTimeout(() => onClose({
+            restoreFocus: false
+          }));
+        } else {
+          if (key === "ArrowUp") {
+            setHighlightedItem(prev_0 => {
+              if (prev_0 == null) {
+                return enabledItems[0];
+              }
+              const index = enabledItems.indexOf(prev_0) - 1;
+              return enabledItems[index === -1 ? enabledItems.length - 1 : index];
+            });
+          } else {
+            if (key === "ArrowDown") {
+              setHighlightedItem(prev_1 => {
+                if (prev_1 == null) {
+                  return enabledItems[0];
+                }
+                const index_0 = enabledItems.indexOf(prev_1);
+                return enabledItems[index_0 === enabledItems.length - 1 ? 0 : index_0 + 1];
+              });
+            }
+          }
         }
-        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
-    })
-  });
+      }
+    };
+    $[1] = items;
+    $[2] = onClose;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const handleKeyDown = t2;
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      registerItem
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const contextValue = t3;
+  let t4;
+  let t5;
+  if ($[5] !== highlightedItem || $[6] !== items || $[7] !== shouldAutoFocus) {
+    t4 = () => {
+      if (shouldAutoFocus && items != null && highlightedItem == null) {
+        setHighlightedItem(items.find(_temp2));
+      }
+      if (highlightedItem != null && highlightedItem?.current != null) {
+        highlightedItem.current.focus();
+      }
+    };
+    t5 = [items, highlightedItem, shouldAutoFocus];
+    $[5] = highlightedItem;
+    $[6] = items;
+    $[7] = shouldAutoFocus;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[10] !== children || $[11] !== dropDownRef || $[12] !== dropdownKey || $[13] !== handleKeyDown || $[14] !== id || $[15] !== itemsContainerClassNames) {
+    t6 = _jsx(DropDownContext, {
+      value: contextValue,
+      children: _jsx("div", {
+        className: (itemsContainerClassNames ?? ["toolbar-popup__dropdown-items"]).join(" "),
+        "data-dropdown-key": dropdownKey,
+        "data-theme": "dark",
+        id,
+        onKeyDown: handleKeyDown,
+        popover: "manual",
+        ref: dropDownRef,
+        role: "menu",
+        tabIndex: -1,
+        children
+      })
+    });
+    $[10] = children;
+    $[11] = dropDownRef;
+    $[12] = dropdownKey;
+    $[13] = handleKeyDown;
+    $[14] = id;
+    $[15] = itemsContainerClassNames;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+function _temp2(item_0) {
+  return !item_0.current?.disabled;
+}
+function _temp(item) {
+  return !item.current?.disabled;
 }
 export function DropDown({
   buttonAriaLabel,
@@ -143,10 +224,15 @@ export function DropDown({
 }) {
   const dropDownRef = useRef(null);
   const buttonRef = useRef(null);
+  const openedViaKeyboardRef = useRef(false);
+  const generatedId = useId();
+  const menuId = `toolbar-dropdown-${dropdownKey}-${generatedId}`;
   const [showDropDown, setShowDropDown] = useState(false);
-  const handleClose = () => {
+  const handleClose = ({
+    restoreFocus = true
+  } = {}) => {
     setShowDropDown(false);
-    if (buttonRef?.current != null) {
+    if (restoreFocus && buttonRef?.current != null) {
       buttonRef.current.focus();
     }
   };
@@ -154,13 +240,37 @@ export function DropDown({
     const button = buttonRef.current;
     const dropDown = dropDownRef.current;
     if (showDropDown && button !== null && dropDown !== null) {
-      const {
-        left,
-        top
-      } = button.getBoundingClientRect();
-      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop;
-      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`;
-      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`;
+      if (!dropDown.matches(':popover-open')) {
+        dropDown.showPopover();
+      }
+      const updatePosition = () => {
+        const {
+          bottom,
+          left,
+          top
+        } = button.getBoundingClientRect();
+        const offset = 8;
+        const gap = 5;
+        const below = bottom + gap;
+        const above = top - dropDown.offsetHeight - gap;
+        const maxTop = Math.max(offset, window.innerHeight - dropDown.offsetHeight - offset);
+        const preferredTop = below + dropDown.offsetHeight + offset <= window.innerHeight ? below : above >= offset ? above : below;
+        dropDown.style.position = 'fixed';
+        dropDown.style.top = `${Math.max(offset, Math.min(preferredTop, maxTop))}px`;
+        dropDown.style.left = `${Math.max(8, Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20))}px`;
+      };
+      updatePosition();
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, {
+        capture: true,
+        passive: true
+      });
+      return () => {
+        window.removeEventListener('resize', updatePosition);
+        window.removeEventListener('scroll', updatePosition, {
+          capture: true
+        });
+      };
     }
   }, [dropDownRef, buttonRef, showDropDown]);
   useEffect(() => {
@@ -186,22 +296,27 @@ export function DropDown({
       };
     }
   }, [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-controls": menuId,
+      "aria-expanded": showDropDown,
+      "aria-haspopup": "menu",
       "aria-label": buttonAriaLabel,
       className: buttonClassName + (showDropDown ? ' active' : ''),
       "data-dropdown-key": dropdownKey,
       disabled: disabled,
       onClick: event_0 => {
         event_0.preventDefault();
+        openedViaKeyboardRef.current = false;
         setShowDropDown(!showDropDown);
       },
+      onKeyDown: event_1 => {
+        if (event_1.key === 'Enter' || event_1.key === ' ') {
+          event_1.preventDefault();
+          openedViaKeyboardRef.current = true;
+          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
@@ -216,8 +331,14 @@ export function DropDown({
       }), /*#__PURE__*/_jsx("i", {
         className: "toolbar-popup__dropdown-caret"
       })]
-    }), showDropDown && /*#__PURE__*/_jsx(React.Fragment, {
-      children: portal
+    }), showDropDown && /*#__PURE__*/_jsx(DropDownItems, {
+      dropdownKey: dropdownKey,
+      dropDownRef: dropDownRef,
+      id: menuId,
+      itemsContainerClassNames: itemsContainerClassNames,
+      onClose: handleClose,
+      shouldAutoFocus: openedViaKeyboardRef.current,
+      children: children
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.js","names":["Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","Icon","item","itemKey","tooltip","className","key","filter","Boolean","join","ref","dropDownContext","use","Error","registerItem","current","_jsx","buttonStyle","disabled","extraButtonProps","icon","iconPosition","iconStyle","onClick","focus","update","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","value","onKeyDown","DropDown","buttonAriaLabel","buttonClassName","dropdownKey","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  Icon,\n  item,\n  itemKey,\n  tooltip,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  Icon: React.ReactNode\n  item: ToolbarGroupItem\n  itemKey: string\n  tooltip?: string\n}): React.ReactNode {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      enabled === false ? 'disabled' : '',\n      active ? 'active' : '',\n      item?.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [enabled, active, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.use(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <Button\n      aria-label={tooltip}\n      buttonStyle=\"none\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'data-item-key': itemKey,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\n      iconStyle=\"none\"\n      onClick={() => {\n        if (enabled !== false) {\n          editor.focus(() => {\n            editor.update(() => {\n              $addUpdateTag('toolbar')\n            })\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect?.({\n              editor,\n              isActive: active!,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      tooltip={tooltip}\n      type=\"button\"\n    >\n      {children}\n    </Button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) {\n      return\n    }\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  dropdownKey,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  dropdownKey: string\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const target = event.target\n        if (!isDOMNode(target)) {\n          return\n        }\n        if (stopCloseOnClickSelf) {\n          if (dropDownRef.current && dropDownRef.current.contains(target)) {\n            return\n          }\n        }\n        if (!button.contains(target)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropDown.js","names":["c","_c","Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useId","useMemo","useRef","useState","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","isActive","undefined","role","tabIndex","icon","iconPosition","onClick","focus","update","onSelect","onMouseDown","e","preventDefault","type","DropDownItems","t0","$","id","dropdownKey","dropDownRef","itemsContainerClassNames","onClose","shouldAutoFocus","items","setItems","highlightedItem","setHighlightedItem","t1","Symbol","for","itemRef","prev","t2","event","enabledItems","_temp","includes","setTimeout","restoreFocus","prev_0","index","indexOf","length","prev_1","index_0","handleKeyDown","t3","contextValue","t4","t5","find","_temp2","t6","value","onKeyDown","popover","item_0","DropDown","buttonAriaLabel","buttonClassName","label","stopCloseOnClickSelf","buttonRef","openedViaKeyboardRef","generatedId","menuId","showDropDown","setShowDropDown","handleClose","button","dropDown","matches","showPopover","updatePosition","bottom","left","top","getBoundingClientRect","offset","gap","below","above","offsetHeight","maxTop","Math","max","window","innerHeight","preferredTop","style","position","min","innerWidth","offsetWidth","addEventListener","capture","passive","removeEventListener","handle","target","contains","document","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\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=\"ghost\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'aria-checked': item.isActive ? Boolean(active) : undefined,\n        'data-item-key': itemKey,\n        role: item.isActive ? 'menuitemcheckbox' : 'menuitem',\n        tabIndex: -1,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\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: React.MouseEvent) => {\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  id,\n  children,\n  dropdownKey,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n  shouldAutoFocus,\n}: {\n  children: React.ReactNode\n  dropdownKey?: string\n  dropDownRef: React.Ref<HTMLDivElement>\n  id: string\n  itemsContainerClassNames?: string[]\n  onClose: (options?: { restoreFocus?: boolean }) => void\n  shouldAutoFocus: boolean\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    const enabledItems = items.filter((item) => !item.current?.disabled)\n\n    if (['ArrowDown', 'ArrowUp', 'Escape'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape') {\n      onClose()\n    } else if (key === 'Tab') {\n      setTimeout(() => onClose({ restoreFocus: false }))\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev) - 1\n        return enabledItems[index === -1 ? enabledItems.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev)\n        return enabledItems[index === enabledItems.length - 1 ? 0 : index + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (shouldAutoFocus && items != null && highlightedItem == null) {\n      setHighlightedItem(items.find((item) => !item.current?.disabled))\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem, shouldAutoFocus])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        data-dropdown-key={dropdownKey}\n        data-theme=\"dark\"\n        id={id}\n        onKeyDown={handleKeyDown}\n        popover=\"manual\"\n        ref={dropDownRef}\n        role=\"menu\"\n        tabIndex={-1}\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 openedViaKeyboardRef = useRef(false)\n  const generatedId = useId()\n  const menuId = `toolbar-dropdown-${dropdownKey}-${generatedId}`\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = ({ restoreFocus = true }: { restoreFocus?: boolean } = {}): void => {\n    setShowDropDown(false)\n    if (restoreFocus && 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      if (!dropDown.matches(':popover-open')) {\n        dropDown.showPopover()\n      }\n\n      const updatePosition = (): void => {\n        const { bottom, left, top } = button.getBoundingClientRect()\n        const offset = 8\n        const gap = 5\n        const below = bottom + gap\n        const above = top - dropDown.offsetHeight - gap\n        const maxTop = Math.max(offset, window.innerHeight - dropDown.offsetHeight - offset)\n        const preferredTop =\n          below + dropDown.offsetHeight + offset <= window.innerHeight\n            ? below\n            : above >= offset\n              ? above\n              : below\n\n        dropDown.style.position = 'fixed'\n        dropDown.style.top = `${Math.max(offset, Math.min(preferredTop, maxTop))}px`\n        dropDown.style.left = `${Math.max(8, Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20))}px`\n      }\n\n      updatePosition()\n      window.addEventListener('resize', updatePosition)\n      window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n\n      return () => {\n        window.removeEventListener('resize', updatePosition)\n        window.removeEventListener('scroll', updatePosition, { capture: true })\n      }\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  return (\n    <React.Fragment>\n      <button\n        aria-controls={menuId}\n        aria-expanded={showDropDown}\n        aria-haspopup=\"menu\"\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          openedViaKeyboardRef.current = false\n          setShowDropDown(!showDropDown)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault()\n            openedViaKeyboardRef.current = true\n            setShowDropDown(!showDropDown)\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        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 && (\n        <DropDownItems\n          dropdownKey={dropdownKey}\n          dropDownRef={dropDownRef}\n          id={menuId}\n          itemsContainerClassNames={itemsContainerClassNames}\n          onClose={handleClose}\n          shouldAutoFocus={openedViaKeyboardRef.current}\n        >\n          {children}\n        </DropDownItems>\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,EAAEC,SAAS,QAA4B;AAC7D,OAAOC,KAAA,IAELC,WAAW,EACXC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH;AAIP,MAAMC,SAAA,GAAY;AAMlB,MAAMC,eAAA,gBAAkBR,KAAA,CAAMS,aAAa,CAA6B;AAExE,OAAO,SAASC,aAAa;EAC3BC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC;AAAO,CAUR;EACC,MAAMC,SAAA,GAAYf,OAAA,CAAQ;IACxB,OAAO,CACLG,SAAA,EACAO,OAAA,KAAY,QAAQ,aAAa,IACjCH,MAAA,GAAS,WAAW,IACpBK,IAAA,EAAMI,GAAA,GAAM,GAAGb,SAAA,IAAaS,IAAA,CAAKI,GAAG,EAAE,GAAG,GAC1C,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACV,GAAG,CAACT,OAAA,EAASH,MAAA,EAAQK,IAAA,CAAKI,GAAG,CAAC;EAE9B,MAAMI,GAAA,GAAMnB,MAAA,CAA0B;EAEtC,MAAMoB,eAAA,GAAkBzB,KAAA,CAAM0B,GAAG,CAAClB,eAAA;EAElC,IAAIiB,eAAA,KAAoB,MAAM;IAC5B,MAAM,IAAIE,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAY,CAAE,GAAGH,eAAA;EAEzBvB,SAAA,CAAU;IACR,IAAIsB,GAAA,EAAKK,OAAA,IAAW,MAAM;MACxBD,YAAA,CAAaJ,GAAA;IACf;EACF,GAAG,CAACA,GAAA,EAAKI,YAAA,CAAa;EAEtB,oBACEE,IAAA,CAACjC,MAAA;IACC,cAAYqB,OAAA;IACZa,WAAA,EAAY;IACZZ,SAAA,EAAWA,SAAA;IACXa,QAAA,EAAUlB,OAAA,KAAY;IACtBmB,gBAAA,EAAkB;MAChB,gBAAgBjB,IAAA,CAAKkB,QAAQ,GAAGZ,OAAA,CAAQX,MAAA,IAAUwB,SAAA;MAClD,iBAAiBlB,OAAA;MACjBmB,IAAA,EAAMpB,IAAA,CAAKkB,QAAQ,GAAG,qBAAqB;MAC3CG,QAAA,EAAU,CAAC;IACb;IACAC,IAAA,EAAMvB,IAAA;IACNwB,YAAA,EAAa;IACbC,OAAA,EAASA,CAAA;MACP,IAAI1B,OAAA,KAAY,OAAO;QACrBD,MAAA,CAAO4B,KAAK,CAAC;UACX5B,MAAA,CAAO6B,MAAM,CAAC;YACZ5C,aAAA,CAAc;UAChB;UACA;UACAkB,IAAA,CAAK2B,QAAQ,GAAG;YACd9B,MAAA;YACAqB,QAAA,EAAUvB;UACZ;QACF;MACF;IACF;IACAiC,WAAA,EAAcC,CAAA;MACZ;MACA;MACAA,CAAA,CAAEC,cAAc;IAClB;IACAtB,GAAA,EAAKA,GAAA;IACLN,OAAA,EAASA,OAAA;IACT6B,IAAA,EAAK;cAEJnC;;AAGP;AAEA,SAAAoC,cAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAtD,EAAA;EAAuB;IAAAuD,EAAA;IAAAvC,QAAA;IAAAwC,WAAA;IAAAC,WAAA;IAAAC,wBAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAP,EAgBtB;EACC,OAAAQ,KAAA,EAAAC,QAAA,IAA0BpD,QAAA;EAC1B,OAAAqD,eAAA,EAAAC,kBAAA,IACEtD,QAAA;EAAA,IAAAuD,EAAA;EAAA,IAAAX,CAAA,QAAAY,MAAA,CAAAC,GAAA;IAGAF,EAAA,GAAAG,OAAA;MACEN,QAAA,CAASO,IAAA,IAAWA,IAAA,IAAQ,IAAqC,GAA7C,IAAmBA,IAAA,EAAMD,OAAA,CAAoB,GAA7C,CAAqCA,OAAA,CAAQ;IAAA,CACnE;IAAAd,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAHF,MAAAtB,YAAA,GAAqBiC,EAIT;EAAA,IAAAK,EAAA;EAAA,IAAAhB,CAAA,QAAAO,KAAA,IAAAP,CAAA,QAAAK,OAAA;IAGUW,EAAA,GAAAC,KAAA;MACpB,IAAIV,KAAA,IAAS;QAAA;MAAA;MAIb;QAAArC;MAAA,IAAgB+C,KAAA;MAChB,MAAAC,YAAA,GAAqBX,KAAA,CAAApC,MAAY,CAACgD,KAAyB;MAE3D,IAAI,CAAC,aAAa,WAAW,SAAS,CAAAC,QAAS,CAAClD,GAAA;QAC9C+C,KAAA,CAAArB,cAAoB;MAAA;MAGtB,IAAI1B,GAAA,KAAQ;QACVmC,OAAA;MAAA;QACK,IAAInC,GAAA,KAAQ;UACjBmD,UAAA,CAAW,MAAMhB,OAAA,CAAQ;YAAAiB,YAAA,EAAgB;UAAM;QAAA;UAC1C,IAAIpD,GAAA,KAAQ;YACjBwC,kBAAA,CAAmBa,MAAA;cACjB,IAAIR,MAAA,IAAQ;gBAAA,OACHG,YAAY,GAAG;cAAA;cAExB,MAAAM,KAAA,GAAcN,YAAA,CAAAO,OAAoB,CAACV,MAAA,IAAQ;cAAA,OACpCG,YAAY,CAACM,KAAA,KAAU,EAA+B,GAA1BN,YAAA,CAAAQ,MAAmB,GAAG,CAAI,GAAzCF,KAAyC,CAAM;YAAA,CACrE;UAAA;YACK,IAAItD,GAAA,KAAQ;cACjBwC,kBAAA,CAAmBiB,MAAA;gBACjB,IAAIZ,MAAA,IAAQ;kBAAA,OACHG,YAAY,GAAG;gBAAA;gBAExB,MAAAU,OAAA,GAAcV,YAAA,CAAAO,OAAoB,CAACV,MAAA;gBAAA,OAC5BG,YAAY,CAACM,OAAA,KAAUN,YAAA,CAAAQ,MAAmB,GAAG,CAAgB,GAAhD,CAAgD,GAARF,OAAA,GAAQ,EAAE;cAAA,CACxE;YAAA;UACF;QAAA;MAAA;IAAA,CACF;IAAAxB,CAAA,MAAAO,KAAA;IAAAP,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAjCA,MAAA6B,aAAA,GAAsBb,EAiCtB;EAAA,IAAAc,EAAA;EAAA,IAAA9B,CAAA,QAAAY,MAAA,CAAAC,GAAA;IAGSiB,EAAA;MAAApD;IAEP;IAAAsB,CAAA,MAAA8B,EAAA;EAAA;IAAAA,EAAA,GAAA9B,CAAA;EAAA;EAHF,MAAA+B,YAAA,GACSD,EAEP;EACc,IAAAE,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjC,CAAA,QAAAS,eAAA,IAAAT,CAAA,QAAAO,KAAA,IAAAP,CAAA,QAAAM,eAAA;IAGN0B,EAAA,GAAAA,CAAA;MACR,IAAI1B,eAA4B,IAATC,KAAA,IAAS,IAA2B,IAAnBE,eAAA,IAAmB;QACzDC,kBAAA,CAAmBH,KAAA,CAAA2B,IAAU,CAACC,MAAyB;MAAA;MAGzD,IAAI1B,eAAA,IAAmB,IAAoC,IAA5BA,eAAA,EAAA9B,OAAiB,IAAW;QACzD8B,eAAA,CAAA9B,OAAuB,CAAAY,KAAM;MAAA;IAC/B,CACF;IAAG0C,EAAA,IAAC1B,KAAA,EAAOE,eAAA,EAAiBH,eAAA,CAAgB;IAAAN,CAAA,MAAAS,eAAA;IAAAT,CAAA,MAAAO,KAAA;IAAAP,CAAA,MAAAM,eAAA;IAAAN,CAAA,MAAAgC,EAAA;IAAAhC,CAAA,MAAAiC,EAAA;EAAA;IAAAD,EAAA,GAAAhC,CAAA;IAAAiC,EAAA,GAAAjC,CAAA;EAAA;EAR5ChD,SAAA,CAAUgF,EAQV,EAAGC,EAAyC;EAAA,IAAAG,EAAA;EAAA,IAAApC,CAAA,SAAAtC,QAAA,IAAAsC,CAAA,SAAAG,WAAA,IAAAH,CAAA,SAAAE,WAAA,IAAAF,CAAA,SAAA6B,aAAA,IAAA7B,CAAA,SAAAC,EAAA,IAAAD,CAAA,SAAAI,wBAAA;IAG1CgC,EAAA,GAAAxD,IAAA,CAACtB,eAAA;MAAA+E,KAAA,EAAuBN,YAAA;MAAArE,QAAA,EACtBkB,IAAA,CAAC;QAAAX,SAAA,EACY,CAACmC,wBAA6D,IAA7D,CAA6B,gCAAgC,EAAA/B,IAAM,CAAC;QAAA,qBAC7D6B,WAAA;QAAA,cACR;QAAAD,EAAA;QAAAqC,SAAA,EAEAT,aAAA;QAAAU,OAAA,EACH;QAAAjE,GAAA,EACH6B,WAAA;QAAAjB,IAAA,EACA;QAAAC,QAAA,EACK,EAAC;QAAAzB;;;;;;;;;;;;;SAVf0E,E;;AAjFJ,SAAAD,OAAAK,MAAA;EAAA,OAwE8C,CAAC1E,MAAA,CAAAa,OAAc,EAAAG,QAAA;AAAA;AAxE7D,SAAAqC,MAAArD,IAAA;EAAA,OAkCgD,CAACA,IAAA,CAAAa,OAAc,EAAAG,QAAA;AAAA;AAiE/D,OAAO,SAAS2D,SAAS;EACvBC,eAAe;EACfC,eAAe;EACfjF,QAAQ;EACRoB,QAAA,GAAW,KAAK;EAChBoB,WAAW;EACXrC,IAAI;EACJuC,wBAAwB;EACxBwC,KAAK;EACLC;AAAoB,CAWrB;EACC,MAAM1C,WAAA,GAAchD,MAAA,CAAuB;EAC3C,MAAM2F,SAAA,GAAY3F,MAAA,CAA0B;EAC5C,MAAM4F,oBAAA,GAAuB5F,MAAA,CAAO;EACpC,MAAM6F,WAAA,GAAc/F,KAAA;EACpB,MAAMgG,MAAA,GAAS,oBAAoB/C,WAAA,IAAe8C,WAAA,EAAa;EAC/D,MAAM,CAACE,YAAA,EAAcC,eAAA,CAAgB,GAAG/F,QAAA,CAAS;EAEjD,MAAMgG,WAAA,GAAcA,CAAC;IAAE9B,YAAA,GAAe;EAAI,CAA8B,GAAG,CAAC,CAAC;IAC3E6B,eAAA,CAAgB;IAChB,IAAI7B,YAAA,IAAgBwB,SAAA,EAAWnE,OAAA,IAAW,MAAM;MAC9CmE,SAAA,CAAUnE,OAAO,CAACY,KAAK;IACzB;EACF;EAEAvC,SAAA,CAAU;IACR,MAAMqG,MAAA,GAASP,SAAA,CAAUnE,OAAO;IAChC,MAAM2E,QAAA,GAAWnD,WAAA,CAAYxB,OAAO;IAEpC,IAAIuE,YAAA,IAAgBG,MAAA,KAAW,QAAQC,QAAA,KAAa,MAAM;MACxD,IAAI,CAACA,QAAA,CAASC,OAAO,CAAC,kBAAkB;QACtCD,QAAA,CAASE,WAAW;MACtB;MAEA,MAAMC,cAAA,GAAiBA,CAAA;QACrB,MAAM;UAAEC,MAAM;UAAEC,IAAI;UAAEC;QAAG,CAAE,GAAGP,MAAA,CAAOQ,qBAAqB;QAC1D,MAAMC,MAAA,GAAS;QACf,MAAMC,GAAA,GAAM;QACZ,MAAMC,KAAA,GAAQN,MAAA,GAASK,GAAA;QACvB,MAAME,KAAA,GAAQL,GAAA,GAAMN,QAAA,CAASY,YAAY,GAAGH,GAAA;QAC5C,MAAMI,MAAA,GAASC,IAAA,CAAKC,GAAG,CAACP,MAAA,EAAQQ,MAAA,CAAOC,WAAW,GAAGjB,QAAA,CAASY,YAAY,GAAGJ,MAAA;QAC7E,MAAMU,YAAA,GACJR,KAAA,GAAQV,QAAA,CAASY,YAAY,GAAGJ,MAAA,IAAUQ,MAAA,CAAOC,WAAW,GACxDP,KAAA,GACAC,KAAA,IAASH,MAAA,GACPG,KAAA,GACAD,KAAA;QAERV,QAAA,CAASmB,KAAK,CAACC,QAAQ,GAAG;QAC1BpB,QAAA,CAASmB,KAAK,CAACb,GAAG,GAAG,GAAGQ,IAAA,CAAKC,GAAG,CAACP,MAAA,EAAQM,IAAA,CAAKO,GAAG,CAACH,YAAA,EAAcL,MAAA,MAAY;QAC5Eb,QAAA,CAASmB,KAAK,CAACd,IAAI,GAAG,GAAGS,IAAA,CAAKC,GAAG,CAAC,GAAGD,IAAA,CAAKO,GAAG,CAAChB,IAAA,GAAO,GAAGW,MAAA,CAAOM,UAAU,GAAGtB,QAAA,CAASuB,WAAW,GAAG,QAAQ;MAC7G;MAEApB,cAAA;MACAa,MAAA,CAAOQ,gBAAgB,CAAC,UAAUrB,cAAA;MAClCa,MAAA,CAAOQ,gBAAgB,CAAC,UAAUrB,cAAA,EAAgB;QAAEsB,OAAA,EAAS;QAAMC,OAAA,EAAS;MAAK;MAEjF,OAAO;QACLV,MAAA,CAAOW,mBAAmB,CAAC,UAAUxB,cAAA;QACrCa,MAAA,CAAOW,mBAAmB,CAAC,UAAUxB,cAAA,EAAgB;UAAEsB,OAAA,EAAS;QAAK;MACvE;IACF;EACF,GAAG,CAAC5E,WAAA,EAAa2C,SAAA,EAAWI,YAAA,CAAa;EAEzClG,SAAA,CAAU;IACR,MAAMqG,QAAA,GAASP,SAAA,CAAUnE,OAAO;IAEhC,IAAI0E,QAAA,KAAW,QAAQH,YAAA,EAAc;MACnC,MAAMgC,MAAA,GAAUjE,KAAA;QACd,MAAMkE,MAAA,GAASlE,KAAA,CAAMkE,MAAM;QAC3B,IAAI,CAACtI,SAAA,CAAUsI,MAAA,GAAS;UACtB;QACF;QACA,IAAItC,oBAAA,EAAsB;UACxB,IAAI1C,WAAA,CAAYxB,OAAO,IAAIwB,WAAA,CAAYxB,OAAO,CAACyG,QAAQ,CAACD,MAAA,GAAS;YAC/D;UACF;QACF;QACA,IAAI,CAAC9B,QAAA,CAAO+B,QAAQ,CAACD,MAAA,GAAS;UAC5BhC,eAAA,CAAgB;QAClB;MACF;MACAkC,QAAA,CAASP,gBAAgB,CAAC,SAASI,MAAA;MAEnC,OAAO;QACLG,QAAA,CAASJ,mBAAmB,CAAC,SAASC,MAAA;MACxC;IACF;EACF,GAAG,CAAC/E,WAAA,EAAa2C,SAAA,EAAWI,YAAA,EAAcL,oBAAA,CAAqB;EAE/D,oBACEyC,KAAA,CAACxI,KAAA,CAAMyI,QAAQ;4BACbD,KAAA,CAAC;MACC,iBAAerC,MAAA;MACf,iBAAeC,YAAA;MACf,iBAAc;MACd,cAAYR,eAAA;MACZzE,SAAA,EAAW0E,eAAA,IAAmBO,YAAA,GAAe,YAAY,EAAC;MAC1D,qBAAmBhD,WAAA;MACnBpB,QAAA,EAAUA,QAAA;MACVQ,OAAA,EAAU2B,OAAA;QACRA,OAAA,CAAMrB,cAAc;QACpBmD,oBAAA,CAAqBpE,OAAO,GAAG;QAC/BwE,eAAA,CAAgB,CAACD,YAAA;MACnB;MACAZ,SAAA,EAAYrB,OAAA;QACV,IAAIA,OAAA,CAAM/C,GAAG,KAAK,WAAW+C,OAAA,CAAM/C,GAAG,KAAK,KAAK;UAC9C+C,OAAA,CAAMrB,cAAc;UACpBmD,oBAAA,CAAqBpE,OAAO,GAAG;UAC/BwE,eAAA,CAAgB,CAACD,YAAA;QACnB;MACF;MACAxD,WAAA,EAAcC,CAAA;QACZ;QACA;QACA;QACAA,CAAA,CAAEC,cAAc;MAClB;MACAtB,GAAA,EAAKwE,SAAA;MACLjD,IAAA,EAAK;iBAEJhC,IAAA,iBAAQe,IAAA,CAACf,IAAA,OACT+E,KAAA,iBAAShE,IAAA,CAAC;QAAKX,SAAA,EAAU;kBAAiC2E;uBAC3DhE,IAAA,CAAC;QAAEX,SAAA,EAAU;;QAGdiF,YAAA,iBACCtE,IAAA,CAACkB,aAAA;MACCI,WAAA,EAAaA,WAAA;MACbC,WAAA,EAAaA,WAAA;MACbF,EAAA,EAAIgD,MAAA;MACJ7C,wBAAA,EAA0BA,wBAAA;MAC1BC,OAAA,EAAS+C,WAAA;MACT9C,eAAA,EAAiByC,oBAAA,CAAqBpE,OAAO;gBAE5CjB;;;AAKX","ignoreList":[]}

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

@@ -0,0 +1,212 @@
+@layer payload-default {
+  @keyframes dropdown-press {
+    0% {
+      background-color: var(--color-bg-transparent-pressed);
+    }
+
+    100% {
+      background-color: var(--color-bg-selected);
+    }
+  }
+
+  .toolbar-popup__dropdown {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: flex-start;
+    border: 0;
+    background: none;
+    border-radius: var(--radius-medium);
+    cursor: pointer;
+    position: relative;
+    min-width: calc(var(--spacer-4) + var(--spacer-2-5));
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    &:hover:not([disabled]):not(.active) {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    &:active:not(.active) {
+      background-color: var(--color-bg-transparent-pressed);
+    }
+
+    &.active {
+      color: var(--color-icon-selected);
+      background-color: var(--color-bg-selected);
+      animation: dropdown-press 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+      .toolbar-popup__dropdown-caret {
+        background-color: var(--color-icon-selected);
+
+        &:after {
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+
+  .toolbar-popup__dropdown-label {
+    padding-block: 0;
+    padding-inline: var(--spacer-1) var(--spacer-2);
+  }
+
+  .toolbar-popup__dropdown-caret {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 6px;
+    margin: 0 var(--spacer-1) 0 calc(var(--spacer-1) / 2);
+    height: 4px;
+    background-color: var(--color-icon);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38921 0.146406C4.58445 -0.0488286 4.90098 -0.0487744 5.09624 0.146406C5.29151 0.341668 5.29151 0.658175 5.09624 0.853437L2.97515 2.97453C2.77987 3.16959 2.46332 3.16972 2.26812 2.97453L0.146049 0.853437C-0.0487219 0.6583 -0.0486443 0.341591 0.146049 0.146406C0.341285 -0.0488288 0.658788 -0.0487749 0.854057 0.146406L2.62164 1.91398L4.38921 0.146406Z' fill='black'/%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
+
+  .toolbar-popup__dropdown-items {
+    --dropdown-min-width: 5rem;
+    position: absolute;
+    inset: auto;
+    margin: 0;
+    background: var(--color-bg-elevated);
+    color: var(--color-text);
+    border-radius: var(--radius-large);
+    padding: var(--spacer-2);
+    min-width: var(--dropdown-min-width);
+    max-height: calc(100vh - var(--spacer-3));
+    overflow-y: auto;
+    z-index: 100;
+    box-shadow: var(--elevation-300-tooltip);
+
+    .toolbar-popup__dropdown-item {
+      all: unset;
+      cursor: pointer;
+      color: var(--color-text);
+      position: relative;
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      line-height: var(--text-body-medium-line-height);
+      padding: 0 var(--spacer-1);
+      width: 100%;
+      height: var(--spacer-4);
+      border-radius: var(--radius-medium);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--spacer-1);
+      margin-inline-end: -var(--spacer-3);
+
+      .text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: var(--color-bg-transparent-pressed);
+      }
+
+      &:active:not([disabled]) {
+        background-color: var(--color-bg-transparent-pressed);
+      }
+
+      &.active {
+        background-color: var(--color-bg-selected-strong);
+        color: var(--color-text-onselected-strong);
+
+        .icon {
+          color: var(--color-text-onselected-strong);
+        }
+
+        &:hover:not([disabled]) {
+          background-color: var(--color-bg-selected-strong-hover);
+        }
+
+        &:active:not([disabled]) {
+          background-color: var(--color-bg-selected-strong-pressed);
+        }
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.2;
+      }
+
+      .btn__icon {
+        --btn-icon-size: var(--spacer-4);
+        background: none !important;
+        background-color: none !important;
+      }
+    }
+  }
+
+  [data-dropdown-key='align'] {
+    display: flex;
+    min-width: unset;
+    gap: var(--spacer-2);
+
+    & .toolbar-popup__dropdown-item {
+      padding: 0;
+
+      .text {
+        display: none;
+      }
+
+      .btn__content {
+        gap: 0;
+      }
+
+      .btn__icon {
+        border: none;
+      }
+
+      .btn__tooltip {
+        background-color: var(--color-bg-tooltip);
+        color: var(--color-text-ontooltip);
+
+        &.tooltip--position-top::after {
+          border-top-color: var(--color-bg-tooltip);
+        }
+
+        &.tooltip--position-bottom::after {
+          border-bottom-color: var(--color-bg-tooltip);
+        }
+      }
+    }
+
+    & .toolbar-popup__dropdown-label {
+      display: none;
+    }
+  }
+
+  .toolbar-popup__dropdown-align {
+    gap: 0;
+  }
+
+  [data-dropdown-key='text'] {
+    /* Reserved on every item, not just the active one, so the checkmark never overlaps the item icon. */
+    & .toolbar-popup__dropdown-item::before {
+      content: '';
+      flex-shrink: 0;
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      background-color: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.277 3.584a.5.5 0 0 1 .139.693l-5 7.5a.5.5 0 0 1-.77.077l-3-3a.5.5 0 0 1 .708-.708l2.568 2.57 4.662-6.993a.5.5 0 0 1 .693-.139' fill='black'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      visibility: hidden;
+    }
+
+    & .toolbar-popup__dropdown-item.active::before {
+      visibility: visible;
+    }
+
+    .btn__icon {
+      margin: 0;
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { LexicalEditor } from 'lexical';
 import type { ToolbarDropdownGroup } from '../../types.js';
 import type { ToolbarGroupState } from '../useToolbarStates.js';
-import './index.scss';
+import './index.css';
 export declare const ToolbarDropdown: ({ anchorElem, classNames, editor, group, groupState, Icon, itemsContainerClassNames, label, }: {
     anchorElem: HTMLElement;
     classNames?: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,gBAAgB,CAAA;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,cAAc,CAAA;AAoErB,eAAO,MAAM,eAAe,kGASzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,sBAkCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,gBAAgB,CAAA;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,aAAa,CAAA;AAsEpB,eAAO,MAAM,eAAe,kGASzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,sBA+CA,CAAA"}