@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

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

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react';
 const baseClass = 'toolbar-popup__dropdown';
 import { mergeRegister } from '@lexical/utils';
@@ -7,18 +7,23 @@ import { useTranslation } from '@payloadcms/ui';
 import { $getSelection } from 'lexical';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
+import './index.scss';
 import { DropDown, DropDownItem } from './DropDown.js';
 const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
     const { i18n } = useTranslation();
     const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
     if (item.Component) {
-        return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
+        return item?.Component && /*#__PURE__*/ _jsxDEV(item.Component, {
             active: active,
             anchorElem: anchorElem,
             editor: editor,
             enabled: enabled,
             item: item
-        }, item.key);
+        }, item.key, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 40,
+            columnNumber: 9
+        }, this);
     }
     let title = item.key;
     let croppedTitle = item.key;
@@ -35,19 +40,31 @@ const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
     } else {
         croppedTitle = title;
     }
-    return /*#__PURE__*/ _jsx(DropDownItem, {
+    return /*#__PURE__*/ _jsxDEV(DropDownItem, {
         active: active,
         editor: editor,
         enabled: enabled,
-        Icon: item?.ChildComponent ? /*#__PURE__*/ _jsx(item.ChildComponent, {}) : undefined,
+        Icon: item?.ChildComponent ? /*#__PURE__*/ _jsxDEV(item.ChildComponent, {}, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 72,
+            columnNumber: 36
+        }, void 0) : undefined,
         item: item,
         itemKey: item.key,
         tooltip: title,
-        children: /*#__PURE__*/ _jsx("span", {
+        children: /*#__PURE__*/ _jsxDEV("span", {
             className: "text",
             children: croppedTitle
-        })
-    }, item.key);
+        }, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 78,
+            columnNumber: 7
+        }, this)
+    }, item.key, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+        lineNumber: 68,
+        columnNumber: 5
+    }, this);
 };
 const MemoToolbarItem = /*#__PURE__*/ React.memo(ToolbarItem);
 export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>/**
@@ -132,20 +149,24 @@ export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, i
         updateStates
     ]);
     const renderedItems = useMemo(()=>{
-        return items?.length ? items.map((item)=>/*#__PURE__*/ _jsx(MemoToolbarItem, {
+        return items?.length ? items.map((item)=>/*#__PURE__*/ _jsxDEV(MemoToolbarItem, {
                 active: deferredToolbarState.activeItemKeys.includes(item.key),
                 anchorElem: anchorElem,
                 editor: editor,
                 enabled: deferredToolbarState.enabledItemKeys.includes(item.key),
                 item: item
-            }, item.key)) : null;
+            }, item.key, false, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+                lineNumber: 183,
+                columnNumber: 11
+            }, this)) : null;
     }, [
         items,
         deferredToolbarState,
         anchorElem,
         editor
     ]);
-    return /*#__PURE__*/ _jsx(DropDown, {
+    return /*#__PURE__*/ _jsxDEV(DropDown, {
         buttonAriaLabel: `${groupKey} dropdown`,
         buttonClassName: [
             baseClass,
@@ -161,7 +182,11 @@ export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, i
         ],
         label: label,
         children: renderedItems
-    }, groupKey);
+    }, groupKey, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+        lineNumber: 196,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,129 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .toolbar-popup__dropdown {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    gap: base(0.2);
+    height: base(1.5);
+    border: 0;
+    background: none;
+    border-radius: $style-radius-m;
+    cursor: pointer;
+    position: relative;
+    padding: 0 base(0.4) 0 base(0.3);
+    transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+    &-label {
+      color: var(--theme-elevation-600);
+      padding-block: 0;
+      padding-inline: base(0.2) base(0.4);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    .active {
+      background-color: var(--theme-elevation-100);
+
+      .toolbar-popup__dropdown-caret {
+        &:after {
+          transform: rotate(0deg);
+        }
+      }
+    }
+
+    &-caret {
+      width: base(0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: rotate(45deg);
+      &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+
+        /* Vector 3 */
+
+        width: 4px;
+        height: 4px;
+        transform: translateY(-2px);
+        border: solid 1px var(--theme-elevation-600);
+        border-width: 0 1px 1px 0;
+      }
+    }
+
+    &-items {
+      position: absolute;
+      background: var(--theme-elevation-0);
+      border-radius: $style-radius-m;
+      min-width: 132.5px;
+      max-width: 200px;
+      z-index: 100;
+
+      .toolbar-popup__dropdown-item {
+        all: unset; // reset all default button styles
+        cursor: pointer;
+        color: var(--theme-elevation-900);
+        transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+        position: relative;
+
+        .text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        &:hover:not([disabled]),
+        &.active {
+          background-color: var(--theme-elevation-100);
+        }
+        &.disabled {
+          cursor: not-allowed;
+          opacity: 0.2;
+        }
+
+        .btn__icon {
+          // Override default button icon styles that
+          // set a background color when focused
+          background: none !important;
+          background-color: none !important;
+        }
+
+        padding-left: 6.25px;
+        padding-right: 6.25px;
+        width: 100%;
+        height: 30px;
+        border-radius: $style-radius-m;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: 6.25px;
+
+        .icon {
+          min-width: 20px;
+          height: 20px;
+          color: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .toolbar-popup__dropdown {
+      &-items {
+        position: absolute;
+        @include shadow-m;
+      }
+    }
+  }
+}

package/dist/features/upload/client/component/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
@@ -12,6 +12,7 @@ import { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js';
 import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js';
 import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js';
+import './index.scss';
 const initialParams = {
     depth: 0
 };
@@ -88,32 +89,36 @@ export const UploadComponent = (props)=>{
         nodeKey
     ]);
     const aspectRatio = thumbnailSRC && data?.width && data?.height ? data.width > data.height ? 'landscape' : 'portrait' : 'landscape';
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: `${baseClass}__contents ${baseClass}__contents--${aspectRatio}`,
         "data-align": format || undefined,
         "data-filename": data?.filename,
         ref: uploadRef,
         children: [
-            /*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}__card`,
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
+                    /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__media`,
                         children: [
-                            /*#__PURE__*/ _jsx(Thumbnail, {
+                            /*#__PURE__*/ _jsxDEV(Thumbnail, {
                                 collectionSlug: relationTo,
                                 fileSrc: isImage(data?.mimeType) ? thumbnailSRC : null,
                                 height: data?.height,
                                 size: "none",
                                 width: data?.width
-                            }),
-                            isEditable && /*#__PURE__*/ _jsx("div", {
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 160,
+                                columnNumber: 11
+                            }, this),
+                            isEditable && /*#__PURE__*/ _jsxDEV("div", {
                                 className: `${baseClass}__overlay ${baseClass}__floater`,
-                                children: /*#__PURE__*/ _jsxs("div", {
+                                children: /*#__PURE__*/ _jsxDEV("div", {
                                     className: `${baseClass}__actions`,
                                     role: "toolbar",
                                     children: [
-                                        hasExtraFields ? /*#__PURE__*/ _jsx(Button, {
+                                        hasExtraFields ? /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__upload-drawer-toggler`,
                                             disabled: !isEditable,
@@ -123,8 +128,12 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:editRelationship')
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx(Button, {
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 172,
+                                            columnNumber: 19
+                                        }, this) : null,
+                                        /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__swap-drawer-toggler`,
                                             disabled: !isEditable,
@@ -140,8 +149,12 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:swapUpload')
-                                        }),
-                                        /*#__PURE__*/ _jsx(Button, {
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 185,
+                                            columnNumber: 17
+                                        }, this),
+                                        /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__removeButton`,
                                             disabled: !isEditable,
@@ -153,34 +166,74 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:removeUpload')
-                                        })
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 201,
+                                            columnNumber: 17
+                                        }, this)
                                     ]
-                                })
-                            })
+                                }, void 0, true, {
+                                    fileName: "src/features/upload/client/component/index.tsx",
+                                    lineNumber: 170,
+                                    columnNumber: 15
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 169,
+                                columnNumber: 13
+                            }, this)
                         ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
+                    }, void 0, true, {
+                        fileName: "src/features/upload/client/component/index.tsx",
+                        lineNumber: 159,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__metaOverlay ${baseClass}__floater`,
                         children: [
-                            /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                            /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
                                 className: `${baseClass}__doc-drawer-toggler`,
-                                children: /*#__PURE__*/ _jsx("strong", {
+                                children: /*#__PURE__*/ _jsxDEV("strong", {
                                     className: `${baseClass}__filename`,
                                     children: data?.filename || t('general:untitled')
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
+                                }, void 0, false, {
+                                    fileName: "src/features/upload/client/component/index.tsx",
+                                    lineNumber: 221,
+                                    columnNumber: 13
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 220,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV("div", {
                                 className: `${baseClass}__collectionLabel`,
                                 children: getTranslation(relatedCollection.labels.singular, i18n)
-                            })
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 225,
+                                columnNumber: 11
+                            }, this)
                         ]
-                    })
+                    }, void 0, true, {
+                        fileName: "src/features/upload/client/component/index.tsx",
+                        lineNumber: 219,
+                        columnNumber: 9
+                    }, this)
                 ]
-            }),
-            value ? /*#__PURE__*/ _jsx(DocumentDrawer, {
+            }, void 0, true, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 158,
+                columnNumber: 7
+            }, this),
+            value ? /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                 onSave: updateUpload
-            }) : null,
-            hasExtraFields ? /*#__PURE__*/ _jsx(FieldsDrawer, {
+            }, void 0, false, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 231,
+                columnNumber: 16
+            }, this) : null,
+            hasExtraFields ? /*#__PURE__*/ _jsxDEV(FieldsDrawer, {
                 data: fields,
                 drawerSlug: extraFieldsDrawerSlug,
                 drawerTitle: t('general:editLabel', {
@@ -190,9 +243,17 @@ export const UploadComponent = (props)=>{
                 handleDrawerSubmit: onExtraFieldsDrawerSubmit,
                 schemaPath: schemaPath,
                 schemaPathSuffix: relatedCollection.slug
-            }) : null
+            }, void 0, false, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 233,
+                columnNumber: 9
+            }, this) : null
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/features/upload/client/component/index.tsx",
+        lineNumber: 152,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map