@payloadcms/richtext-lexical 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

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

@@ -1,11 +1,12 @@
 'use client';
+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';
 import { Button, formatDrawerSlug, Thumbnail, useConfig, useEditDepth, usePayloadAPI, useTranslation } from '@payloadcms/ui';
 import { $getNodeByKey } from 'lexical';
 import { isImage } from 'payload/shared';
-import { useCallback, useId, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useId, useReducer, useRef, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js';
 import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js';
@@ -88,48 +89,171 @@ export const UploadComponent = (props)=>{
         nodeKey
     ]);
     const aspectRatio = thumbnailSRC && data?.width && data?.height ? data.width > data.height ? 'landscape' : 'portrait' : 'landscape';
-    return <div className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`} data-align={format || undefined} data-filename={data?.filename} ref={uploadRef}>
-      <div className={`${baseClass}__card`}>
-        <div className={`${baseClass}__media`}>
-          <Thumbnail collectionSlug={relationTo} fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null} height={data?.height} size="none" width={data?.width}/>
-
-          {isEditable && <div className={`${baseClass}__overlay ${baseClass}__floater`}>
-              <div className={`${baseClass}__actions`} role="toolbar">
-                {hasExtraFields ? <Button buttonStyle="icon-label" className={`${baseClass}__upload-drawer-toggler`} disabled={!isEditable} el="button" icon="edit" onClick={toggleDrawer} round size="medium" tooltip={t('fields:editRelationship')}/> : null}
-
-                <Button buttonStyle="icon-label" className={`${baseClass}__swap-drawer-toggler`} disabled={!isEditable} el="button" icon="swap" onClick={()=>{
-        editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
-            replace: {
-                nodeKey
-            }
-        });
-    }} round size="medium" tooltip={t('fields:swapUpload')}/>
-
-                <Button buttonStyle="icon-label" className={`${baseClass}__removeButton`} disabled={!isEditable} icon="x" onClick={(e)=>{
-        e.preventDefault();
-        removeUpload();
-    }} round size="medium" tooltip={t('fields:removeUpload')}/>
-              </div>
-            </div>}
-        </div>
-
-        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>
-          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
-            <strong className={`${baseClass}__filename`}>
-              {data?.filename || t('general:untitled')}
-            </strong>
-          </DocumentDrawerToggler>
-          <div className={`${baseClass}__collectionLabel`}>
-            {getTranslation(relatedCollection.labels.singular, i18n)}
-          </div>
-        </div>
-      </div>
-
-      {value ? <DocumentDrawer onSave={updateUpload}/> : null}
-      {hasExtraFields ? <FieldsDrawer data={fields} drawerSlug={extraFieldsDrawerSlug} drawerTitle={t('general:editLabel', {
-        label: getTranslation(relatedCollection.labels.singular, i18n)
-    })} featureKey="upload" handleDrawerSubmit={onExtraFieldsDrawerSubmit} schemaPath={schemaPath} schemaPathSuffix={relatedCollection.slug}/> : null}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass}__contents ${baseClass}__contents--${aspectRatio}`,
+        "data-align": format || undefined,
+        "data-filename": data?.filename,
+        ref: uploadRef,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__card`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__media`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV(Thumbnail, {
+                                collectionSlug: relationTo,
+                                fileSrc: isImage(data?.mimeType) ? thumbnailSRC : null,
+                                height: data?.height,
+                                size: "none",
+                                width: data?.width
+                            }, 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__*/ _jsxDEV("div", {
+                                    className: `${baseClass}__actions`,
+                                    role: "toolbar",
+                                    children: [
+                                        hasExtraFields ? /*#__PURE__*/ _jsxDEV(Button, {
+                                            buttonStyle: "icon-label",
+                                            className: `${baseClass}__upload-drawer-toggler`,
+                                            disabled: !isEditable,
+                                            el: "button",
+                                            icon: "edit",
+                                            onClick: toggleDrawer,
+                                            round: true,
+                                            size: "medium",
+                                            tooltip: t('fields:editRelationship')
+                                        }, 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,
+                                            el: "button",
+                                            icon: "swap",
+                                            onClick: ()=>{
+                                                editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
+                                                    replace: {
+                                                        nodeKey
+                                                    }
+                                                });
+                                            },
+                                            round: true,
+                                            size: "medium",
+                                            tooltip: t('fields:swapUpload')
+                                        }, 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,
+                                            icon: "x",
+                                            onClick: (e)=>{
+                                                e.preventDefault();
+                                                removeUpload();
+                                            },
+                                            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)
+                        ]
+                    }, 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__*/ _jsxDEV(DocumentDrawerToggler, {
+                                className: `${baseClass}__doc-drawer-toggler`,
+                                children: /*#__PURE__*/ _jsxDEV("strong", {
+                                    className: `${baseClass}__filename`,
+                                    children: data?.filename || t('general:untitled')
+                                }, 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)
+                ]
+            }, void 0, true, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 158,
+                columnNumber: 7
+            }, this),
+            value ? /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
+                onSave: updateUpload
+            }, 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', {
+                    label: getTranslation(relatedCollection.labels.singular, i18n)
+                }),
+                featureKey: "upload",
+                handleDrawerSubmit: onExtraFieldsDrawerSubmit,
+                schemaPath: schemaPath,
+                schemaPathSuffix: relatedCollection.slug
+            }, 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","React","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}

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

@@ -1,10 +1,23 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { ShimmerEffect } from '@payloadcms/ui';
 import '../index.scss';
 export const PendingUploadComponent = ()=>{
-    return <div className={'lexical-upload'}>
-      <ShimmerEffect height={'95px'} width={'203px'}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: 'lexical-upload',
+        children: /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
+            height: '95px',
+            width: '203px'
+        }, void 0, false, {
+            fileName: "src/features/upload/client/component/pending/index.tsx",
+            lineNumber: 10,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/features/upload/client/component/pending/index.tsx",
+        lineNumber: 9,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/features/upload/client/component/pending/index.tsx"],"sourcesContent":["'use client'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\n\nimport '../index.scss'\n\nexport const PendingUploadComponent = (): React.ReactNode => {\n  return (\n    <div className={'lexical-upload'}>\n      <ShimmerEffect height={'95px'} width={'203px'} />\n    </div>\n  )\n}\n"],"names":["ShimmerEffect","PendingUploadComponent","div","className","height","width"],"mappings":"AAAA;AAEA,SAASA,aAAa,QAAQ,iBAAgB;AAE9C,OAAO,gBAAe;AAEtB,OAAO,MAAMC,yBAAyB;IACpC,QACGC,IAAIC,WAAW,kBAAkB;MAChC,CAACH,cAAcI,QAAQ,QAAQC,OAAO,UAAW;IACnD,EAAEH;AAEN,EAAC"}
+{"version":3,"sources":["../../../../../../src/features/upload/client/component/pending/index.tsx"],"sourcesContent":["'use client'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\n\nimport '../index.scss'\n\nexport const PendingUploadComponent = (): React.ReactNode => {\n  return (\n    <div className={'lexical-upload'}>\n      <ShimmerEffect height={'95px'} width={'203px'} />\n    </div>\n  )\n}\n"],"names":["ShimmerEffect","PendingUploadComponent","div","className","height","width"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,iBAAgB;AAE9C,OAAO,gBAAe;AAEtB,OAAO,MAAMC,yBAAyB;IACpC,qBACE,QAACC;QAAIC,WAAW;kBACd,cAAA,QAACH;YAAcI,QAAQ;YAAQC,OAAO;;;;;;;;;;;AAG5C,EAAC"}