@payloadcms/ui 3.71.0-internal-debug.80dab4c → 3.71.0-internal.727c7a4

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js

@@ -1,71 +1,101 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import './index.scss';
 const baseClass = 'toolbar-input';
-export const PreviewFrameSizeInput = (props)=>{
-    const { axis } = props;
-    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = useLivePreviewContext();
-    const [internalState, setInternalState] = React.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
-    // when the input is changed manually, we need to set the breakpoint as `custom`
-    // this will then allow us to set an explicit width and height
-    const handleChange = useCallback((e)=>{
-        let newValue = Number(e.target.value);
-        if (newValue < 0) {
-            newValue = 0;
-        }
-        setInternalState(newValue);
-        setBreakpoint('custom');
-        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
-        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
-        setSize({
-            type: 'reset',
-            value: {
-                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
-                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
-            }
-        });
-    }, [
-        axis,
-        setBreakpoint,
-        measuredDeviceSize,
-        setSize,
-        zoom
-    ]);
-    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
-    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
-    useEffect(()=>{
-        if (breakpoint === 'responsive' && measuredDeviceSize) {
-            if (axis === 'x') {
-                setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
-            } else {
-                setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
-            }
+export const PreviewFrameSizeInput = props => {
+  const $ = _c(18);
+  const {
+    axis
+  } = props;
+  const {
+    breakpoint,
+    measuredDeviceSize,
+    setBreakpoint,
+    setSize,
+    size,
+    zoom
+  } = useLivePreviewContext();
+  const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+  let t0;
+  if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
+    t0 = e => {
+      let newValue = Number(e.target.value);
+      if (newValue < 0) {
+        newValue = 0;
+      }
+      setInternalState(newValue);
+      setBreakpoint("custom");
+      setSize({
+        type: "reset",
+        value: {
+          height: axis === "y" ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+          width: axis === "x" ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
         }
-        if (breakpoint !== 'responsive' && size) {
-            setInternalState(axis === 'x' ? size.width : size.height);
+      });
+    };
+    $[0] = axis;
+    $[1] = measuredDeviceSize?.height;
+    $[2] = measuredDeviceSize?.width;
+    $[3] = setBreakpoint;
+    $[4] = setSize;
+    $[5] = zoom;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  const handleChange = t0;
+  let t1;
+  let t2;
+  if ($[7] !== axis || $[8] !== breakpoint || $[9] !== measuredDeviceSize || $[10] !== size || $[11] !== zoom) {
+    t1 = () => {
+      if (breakpoint === "responsive" && measuredDeviceSize) {
+        if (axis === "x") {
+          setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+        } else {
+          setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
         }
-    }, [
-        breakpoint,
-        axis,
-        measuredDeviceSize,
-        size,
-        zoom
-    ]);
-    return /*#__PURE__*/ _jsxDEV("input", {
-        className: baseClass,
-        min: 0,
-        name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
-        onChange: handleChange,
-        step: 1,
-        type: "number",
-        value: internalState || 0
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toolbar/SizeInput/index.tsx",
-        lineNumber: 64,
-        columnNumber: 5
-    }, this);
+      }
+      if (breakpoint !== "responsive" && size) {
+        setInternalState(axis === "x" ? size.width : size.height);
+      }
+    };
+    t2 = [breakpoint, axis, measuredDeviceSize, size, zoom];
+    $[7] = axis;
+    $[8] = breakpoint;
+    $[9] = measuredDeviceSize;
+    $[10] = size;
+    $[11] = zoom;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t1 = $[12];
+    t2 = $[13];
+  }
+  useEffect(t1, t2);
+  const t3 = axis === "x" ? "live-preview-width" : "live-preview-height";
+  const t4 = internalState || 0;
+  let t5;
+  if ($[14] !== handleChange || $[15] !== t3 || $[16] !== t4) {
+    t5 = _jsx("input", {
+      className: baseClass,
+      min: 0,
+      name: t3,
+      onChange: handleChange,
+      step: 1,
+      type: "number",
+      value: t4
+    });
+    $[14] = handleChange;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  return t5;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAG;YAChBA,WAAW;QACb;QAEAN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAK;gBAChBQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;YACjE,OAAO;gBACLE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;YAClE;QACF;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,QAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;;;;;AAG9B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Toolbar/index.js

@@ -1,5 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable } from '@dnd-kit/core';
 import React from 'react';
 import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
@@ -7,91 +9,89 @@ import { useLivePreviewContext } from '../../../providers/LivePreview/context.js
 import { ToolbarControls } from './Controls/index.js';
 import './index.scss';
 const baseClass = 'live-preview-toolbar';
-const DraggableToolbar = (props)=>{
-    const { toolbarPosition } = useLivePreviewContext();
-    const { attributes, listeners, setNodeRef, transform } = useDraggable({
-        id: 'live-preview-toolbar'
+const DraggableToolbar = props => {
+  const $ = _c(10);
+  const {
+    toolbarPosition
+  } = useLivePreviewContext();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "live-preview-toolbar"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [baseClass, `${baseClass}--draggable`];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = `${toolbarPosition.x}px`;
+  const t3 = `${toolbarPosition.y}px`;
+  let t4;
+  if ($[2] !== attributes || $[3] !== listeners || $[4] !== props || $[5] !== setNodeRef || $[6] !== t2 || $[7] !== t3 || $[8] !== transform) {
+    t4 = _jsxs("div", {
+      className: t1.join(" "),
+      style: {
+        left: t2,
+        top: t3,
+        ...(transform ? {
+          transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+        } : {})
+      },
+      children: [_jsx("button", {
+        ...listeners,
+        ...attributes,
+        className: `${baseClass}__drag-handle`,
+        ref: setNodeRef,
+        type: "button",
+        children: _jsx(DragHandleIcon, {})
+      }), _jsx(ToolbarControls, {
+        ...props
+      })]
     });
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            baseClass,
-            `${baseClass}--draggable`
-        ].join(' '),
-        style: {
-            left: `${toolbarPosition.x}px`,
-            top: `${toolbarPosition.y}px`,
-            ...transform ? {
-                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
-            } : {}
-        },
-        children: [
-            /*#__PURE__*/ _jsxDEV("button", {
-                ...listeners,
-                ...attributes,
-                className: `${baseClass}__drag-handle`,
-                ref: setNodeRef,
-                type: "button",
-                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
-                    fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-                    lineNumber: 43,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-                lineNumber: 36,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV(ToolbarControls, {
-                ...props
-            }, void 0, false, {
-                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-                lineNumber: 45,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-        lineNumber: 22,
-        columnNumber: 5
-    }, this);
+    $[2] = attributes;
+    $[3] = listeners;
+    $[4] = props;
+    $[5] = setNodeRef;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = transform;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 };
-const StaticToolbar = (props)=>{
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            baseClass,
-            `${baseClass}--static`
-        ].join(' '),
-        children: /*#__PURE__*/ _jsxDEV(ToolbarControls, {
-            ...props
-        }, void 0, false, {
-            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-            lineNumber: 53,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-        lineNumber: 52,
-        columnNumber: 5
-    }, this);
+const StaticToolbar = props => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, `${baseClass}--static`].join(' '),
+    children: /*#__PURE__*/_jsx(ToolbarControls, {
+      ...props
+    })
+  });
 };
-export const LivePreviewToolbar = (props)=>{
-    const { draggable } = props;
-    if (draggable) {
-        return /*#__PURE__*/ _jsxDEV(DraggableToolbar, {
-            ...props
-        }, void 0, false, {
-            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-            lineNumber: 66,
-            columnNumber: 12
-        }, this);
-    }
-    return /*#__PURE__*/ _jsxDEV(StaticToolbar, {
-        ...props
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-        lineNumber: 69,
-        columnNumber: 10
-    }, this);
+export const LivePreviewToolbar = props => {
+  const {
+    draggable
+  } = props;
+  if (draggable) {
+    return /*#__PURE__*/_jsx(DraggableToolbar, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(StaticToolbar, {
+    ...props
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","React","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,qCAAoC;AACnE,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,eAAe,QAAQ,sBAAqB;AACrD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,QAACC;QACCC,WAAW;YAACV;YAAW,GAAGA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,GAAGV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,GAAGZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;;0BAEA,QAACC;gBACE,GAAGb,SAAS;gBACZ,GAAGD,UAAU;gBACdM,WAAW,GAAGV,UAAU,aAAa,CAAC;gBACtCmB,KAAKb;gBACLc,MAAK;0BAEL,cAAA,QAACvB;;;;;;;;;;0BAEH,QAACE;gBAAiB,GAAGG,KAAK;;;;;;;;;;;;AAGhC;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,QAACO;QAAIC,WAAW;YAACV;YAAW,GAAGA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;kBACvD,cAAA,QAACZ;YAAiB,GAAGG,KAAK;;;;;;;;;;;AAGhC;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,QAACtB;YAAkB,GAAGC,KAAK;;;;;;IACpC;IAEA,qBAAO,QAACmB;QAAe,GAAGnB,KAAK;;;;;;AACjC,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useDraggable","React","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA9B,cAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}

package/dist/elements/LivePreview/ToolbarArea/index.js

@@ -1,23 +1,41 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDroppable } from '@dnd-kit/core';
 import React from 'react';
 import './index.scss';
 const baseClass = 'toolbar-area';
-export const ToolbarArea = (props)=>{
-    const { children } = props;
-    const { setNodeRef } = useDroppable({
-        id: 'live-preview-area'
+export const ToolbarArea = props => {
+  const $ = _c(4);
+  const {
+    children
+  } = props;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "live-preview-area"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const {
+    setNodeRef
+  } = useDroppable(t0);
+  let t1;
+  if ($[1] !== children || $[2] !== setNodeRef) {
+    t1 = _jsx("div", {
+      className: baseClass,
+      ref: setNodeRef,
+      children
     });
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        ref: setNodeRef,
-        children: children
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/ToolbarArea/index.tsx",
-        lineNumber: 19,
-        columnNumber: 5
-    }, this);
+    $[1] = children;
+    $[2] = setNodeRef;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/ToolbarArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"mappings":"AAAA;;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,QAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;kBAC7BD;;;;;;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}