@strapi/admin 0.0.0-experimental.62ce06180fe9a772eaeb3d43d238b26644f39f7c → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

package/dist/admin/admin/src/components/DescriptionComponentRenderer.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var isEqual = require('lodash/isEqual');
+var useForceUpdate = require('../hooks/useForceUpdate.js');
+var useThrottledCallback = require('../hooks/useThrottledCallback.js');
+var shims = require('../utils/shims.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
+
+/**
+ * @internal
+ *
+ * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.
+ * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.
+ * Saving it in a ref, and then "forcing" an update of the parent component to render the children of this component with the new data.
+ *
+ * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update
+ * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which
+ * creates less "popping" from functions being called in rapid succession.
+ */ const DescriptionComponentRenderer = ({ children, props, descriptions })=>{
+    const statesRef = React__namespace.useRef({});
+    const [tick, forceUpdate] = useForceUpdate.useForceUpdate();
+    const requestHandle = React__namespace.useRef(null);
+    const requestUpdate = React__namespace.useCallback(()=>{
+        if (requestHandle.current) {
+            shims.cancelIdleCallback(requestHandle.current);
+        }
+        requestHandle.current = shims.requestIdleCallback(()=>{
+            requestHandle.current = null;
+            forceUpdate();
+        });
+    }, [
+        forceUpdate
+    ]);
+    /**
+   * This will avoid us calling too many react updates in a short space of time.
+   */ const throttledRequestUpdate = useThrottledCallback.useThrottledCallback(requestUpdate, 60, {
+        trailing: true
+    });
+    const update = React__namespace.useCallback((id, description)=>{
+        if (description === null) {
+            delete statesRef.current[id];
+        } else {
+            const current = statesRef.current[id];
+            statesRef.current[id] = {
+                ...current,
+                value: {
+                    ...description,
+                    id
+                }
+            };
+        }
+        throttledRequestUpdate();
+    }, [
+        throttledRequestUpdate
+    ]);
+    const ids = React__namespace.useMemo(()=>descriptions.map((description)=>getCompId(description)), [
+        descriptions
+    ]);
+    const states = React__namespace.useMemo(()=>ids.map((id)=>statesRef.current[id]?.value).filter((state)=>state !== null && state !== undefined), /**
+     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.
+     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description
+     * Component changing the ref data in any other way.
+     */ // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        ids,
+        tick
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            descriptions.map((description)=>{
+                const key = getCompId(description);
+                return /*#__PURE__*/ jsxRuntime.jsx(Description, {
+                    id: key,
+                    description: description,
+                    props: props,
+                    update: update
+                }, key);
+            }),
+            children(states)
+        ]
+    });
+};
+/**
+ * Descriptions are objects, but to create the object, we allow users to create components,
+ * this means they can use react hooks in them. It also means we need to render them
+ * within a component, however because they return an object of data we can't add that
+ * to the react tree, instead we push it back out to the parent.
+ */ const Description = /*#__PURE__*/ React__namespace.memo(({ description, id, props, update })=>{
+    const comp = description(props);
+    useShallowCompareEffect(()=>{
+        update(id, comp);
+        return ()=>{
+            update(id, null);
+        };
+    }, comp);
+    return null;
+}, (prev, next)=>isEqual__default.default(prev.props, next.props));
+/* -------------------------------------------------------------------------------------------------
+ * Helpers
+ * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+let counter = 0;
+function getCompId(comp) {
+    const cachedId = ids.get(comp);
+    if (cachedId) return cachedId;
+    const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
+    ids.set(comp, id);
+    return id;
+}
+const useShallowCompareMemoize = (value)=>{
+    const ref = React__namespace.useRef(undefined);
+    if (!isEqual__default.default(value, ref.current)) {
+        ref.current = value;
+    }
+    return [
+        ref.current
+    ];
+};
+const useShallowCompareEffect = (callback, dependencies)=>{
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here
+    React__namespace.useEffect(callback, useShallowCompareMemoize(dependencies));
+};
+
+exports.DescriptionComponentRenderer = DescriptionComponentRenderer;
+//# sourceMappingURL=DescriptionComponentRenderer.js.map

package/dist/admin/admin/src/components/DescriptionComponentRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionComponentRenderer.js","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

package/dist/admin/admin/src/components/DescriptionComponentRenderer.mjs

@@ -0,0 +1,123 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import isEqual from 'lodash/isEqual';
+import { useForceUpdate } from '../hooks/useForceUpdate.mjs';
+import { useThrottledCallback } from '../hooks/useThrottledCallback.mjs';
+import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requestIdleCallback } from '../utils/shims.mjs';
+
+/**
+ * @internal
+ *
+ * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.
+ * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.
+ * Saving it in a ref, and then "forcing" an update of the parent component to render the children of this component with the new data.
+ *
+ * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update
+ * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which
+ * creates less "popping" from functions being called in rapid succession.
+ */ const DescriptionComponentRenderer = ({ children, props, descriptions })=>{
+    const statesRef = React.useRef({});
+    const [tick, forceUpdate] = useForceUpdate();
+    const requestHandle = React.useRef(null);
+    const requestUpdate = React.useCallback(()=>{
+        if (requestHandle.current) {
+            _cancelIdleCallback(requestHandle.current);
+        }
+        requestHandle.current = _requestIdleCallback(()=>{
+            requestHandle.current = null;
+            forceUpdate();
+        });
+    }, [
+        forceUpdate
+    ]);
+    /**
+   * This will avoid us calling too many react updates in a short space of time.
+   */ const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, {
+        trailing: true
+    });
+    const update = React.useCallback((id, description)=>{
+        if (description === null) {
+            delete statesRef.current[id];
+        } else {
+            const current = statesRef.current[id];
+            statesRef.current[id] = {
+                ...current,
+                value: {
+                    ...description,
+                    id
+                }
+            };
+        }
+        throttledRequestUpdate();
+    }, [
+        throttledRequestUpdate
+    ]);
+    const ids = React.useMemo(()=>descriptions.map((description)=>getCompId(description)), [
+        descriptions
+    ]);
+    const states = React.useMemo(()=>ids.map((id)=>statesRef.current[id]?.value).filter((state)=>state !== null && state !== undefined), /**
+     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.
+     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description
+     * Component changing the ref data in any other way.
+     */ // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        ids,
+        tick
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            descriptions.map((description)=>{
+                const key = getCompId(description);
+                return /*#__PURE__*/ jsx(Description, {
+                    id: key,
+                    description: description,
+                    props: props,
+                    update: update
+                }, key);
+            }),
+            children(states)
+        ]
+    });
+};
+/**
+ * Descriptions are objects, but to create the object, we allow users to create components,
+ * this means they can use react hooks in them. It also means we need to render them
+ * within a component, however because they return an object of data we can't add that
+ * to the react tree, instead we push it back out to the parent.
+ */ const Description = /*#__PURE__*/ React.memo(({ description, id, props, update })=>{
+    const comp = description(props);
+    useShallowCompareEffect(()=>{
+        update(id, comp);
+        return ()=>{
+            update(id, null);
+        };
+    }, comp);
+    return null;
+}, (prev, next)=>isEqual(prev.props, next.props));
+/* -------------------------------------------------------------------------------------------------
+ * Helpers
+ * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+let counter = 0;
+function getCompId(comp) {
+    const cachedId = ids.get(comp);
+    if (cachedId) return cachedId;
+    const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
+    ids.set(comp, id);
+    return id;
+}
+const useShallowCompareMemoize = (value)=>{
+    const ref = React.useRef(undefined);
+    if (!isEqual(value, ref.current)) {
+        ref.current = value;
+    }
+    return [
+        ref.current
+    ];
+};
+const useShallowCompareEffect = (callback, dependencies)=>{
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here
+    React.useEffect(callback, useShallowCompareMemoize(dependencies));
+};
+
+export { DescriptionComponentRenderer };
+//# sourceMappingURL=DescriptionComponentRenderer.mjs.map

package/dist/admin/admin/src/components/DescriptionComponentRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionComponentRenderer.mjs","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

package/dist/admin/admin/src/components/DragLayer.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactDnd = require('react-dnd');
+var widgetLayout = require('../utils/widgetLayout.js');
+
+function isWidgetDragItem(item) {
+    return typeof item === 'object' && item !== null && 'id' in item && typeof item.id === 'string' && 'originalIndex' in item && typeof item.originalIndex === 'number' && 'title' in item && 'component' in item;
+}
+function getStyle(initialOffset, currentOffset, mouseOffset, item) {
+    if (!initialOffset || !currentOffset || !mouseOffset) {
+        return {
+            display: 'none'
+        };
+    }
+    const { x, y } = mouseOffset;
+    // Only apply custom offset for widget drags
+    if (isWidgetDragItem(item)) {
+        // Calculate dynamic offset based on widget position and width
+        const widgetElement = widgetLayout.getWidgetElement(item.id);
+        const previewWidth = widgetElement?.clientWidth;
+        const offsetX = previewWidth ? -previewWidth + 20 : 0;
+        const offsetY = 20;
+        return {
+            transform: `translate(${x + offsetX}px, ${y + offsetY}px)`
+        };
+    }
+    // Default positioning for non-widget drags
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+}
+const DragLayer = ({ renderItem })=>{
+    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = reactDnd.useDragLayer((monitor)=>({
+            item: monitor.getItem(),
+            itemType: monitor.getItemType(),
+            initialOffset: monitor.getInitialSourceClientOffset(),
+            currentOffset: monitor.getSourceClientOffset(),
+            isDragging: monitor.isDragging(),
+            mouseOffset: monitor.getClientOffset()
+        }));
+    if (!isDragging) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        height: "100%",
+        left: 0,
+        position: "fixed",
+        pointerEvents: "none",
+        top: 0,
+        zIndex: 100,
+        width: "100%",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            style: getStyle(initialOffset, currentOffset, mouseOffset, item),
+            children: renderItem({
+                type: itemType,
+                item
+            })
+        })
+    });
+};
+
+exports.DragLayer = DragLayer;
+exports.isWidgetDragItem = isWidgetDragItem;
+//# sourceMappingURL=DragLayer.js.map

package/dist/admin/admin/src/components/DragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragLayer.js","sources":["../../../../../admin/src/components/DragLayer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';\n\nimport { getWidgetElement } from '../utils/widgetLayout';\n\nimport type { WidgetArgs } from '../core/apis/Widgets';\n\nexport interface WidgetDragItem extends Pick<WidgetArgs, 'title' | 'icon' | 'link' | 'component'> {\n  type: 'widget';\n  id: string;\n  originalIndex: number;\n}\n\nexport function isWidgetDragItem(item: unknown): item is WidgetDragItem {\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    'id' in item &&\n    typeof item.id === 'string' &&\n    'originalIndex' in item &&\n    typeof item.originalIndex === 'number' &&\n    'title' in item &&\n    'component' in item\n  );\n}\n\nfunction getStyle(\n  initialOffset: XYCoord | null,\n  currentOffset: XYCoord | null,\n  mouseOffset: XYCoord | null,\n  item?: unknown\n) {\n  if (!initialOffset || !currentOffset || !mouseOffset) {\n    return { display: 'none' };\n  }\n\n  const { x, y } = mouseOffset;\n\n  // Only apply custom offset for widget drags\n  if (isWidgetDragItem(item)) {\n    // Calculate dynamic offset based on widget position and width\n    const widgetElement = getWidgetElement(item.id);\n    const previewWidth = widgetElement?.clientWidth;\n    const offsetX = previewWidth ? -previewWidth + 20 : 0;\n    const offsetY = 20;\n\n    return {\n      transform: `translate(${x + offsetX}px, ${y + offsetY}px)`,\n    };\n  }\n\n  // Default positioning for non-widget drags\n  return {\n    transform: `translate(${x}px, ${y}px)`,\n  };\n}\n\nexport interface DragLayerProps {\n  renderItem: (item: {\n    item: unknown;\n    type: ReturnType<DragLayerMonitor['getItemType']>;\n  }) => React.ReactNode;\n}\n\nconst DragLayer = ({ renderItem }: DragLayerProps) => {\n  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(\n    (monitor) => ({\n      item: monitor.getItem(),\n      itemType: monitor.getItemType(),\n      initialOffset: monitor.getInitialSourceClientOffset(),\n      currentOffset: monitor.getSourceClientOffset(),\n      isDragging: monitor.isDragging(),\n      mouseOffset: monitor.getClientOffset(),\n    })\n  );\n\n  if (!isDragging) {\n    return null;\n  }\n\n  return (\n    <Box\n      height=\"100%\"\n      left={0}\n      position=\"fixed\"\n      pointerEvents=\"none\"\n      top={0}\n      zIndex={100}\n      width=\"100%\"\n    >\n      <Box style={getStyle(initialOffset, currentOffset, mouseOffset, item)}>\n        {renderItem({ type: itemType, item })}\n      </Box>\n    </Box>\n  );\n};\n\nexport { DragLayer };\n"],"names":["isWidgetDragItem","item","id","originalIndex","getStyle","initialOffset","currentOffset","mouseOffset","display","x","y","widgetElement","getWidgetElement","previewWidth","clientWidth","offsetX","offsetY","transform","DragLayer","renderItem","itemType","isDragging","useDragLayer","monitor","getItem","getItemType","getInitialSourceClientOffset","getSourceClientOffset","getClientOffset","_jsx","Box","height","left","position","pointerEvents","top","zIndex","width","style","type"],"mappings":";;;;;;;;AAeO,SAASA,iBAAiBC,IAAa,EAAA;IAC5C,OACE,OAAOA,SAAS,QAAA,IAChBA,IAAAA,KAAS,QACT,IAAA,IAAQA,IAAAA,IACR,OAAOA,IAAAA,CAAKC,EAAE,KAAK,QAAA,IACnB,eAAA,IAAmBD,QACnB,OAAOA,IAAAA,CAAKE,aAAa,KAAK,QAAA,IAC9B,OAAA,IAAWF,IAAAA,IACX,WAAA,IAAeA,IAAAA;AAEnB;AAEA,SAASG,SACPC,aAA6B,EAC7BC,aAA6B,EAC7BC,WAA2B,EAC3BN,IAAc,EAAA;AAEd,IAAA,IAAI,CAACI,aAAAA,IAAiB,CAACC,aAAAA,IAAiB,CAACC,WAAAA,EAAa;QACpD,OAAO;YAAEC,OAAAA,EAAS;AAAO,SAAA;AAC3B,IAAA;AAEA,IAAA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGH,WAAAA;;AAGjB,IAAA,IAAIP,iBAAiBC,IAAAA,CAAAA,EAAO;;QAE1B,MAAMU,aAAAA,GAAgBC,6BAAAA,CAAiBX,IAAAA,CAAKC,EAAE,CAAA;AAC9C,QAAA,MAAMW,eAAeF,aAAAA,EAAeG,WAAAA;AACpC,QAAA,MAAMC,OAAAA,GAAUF,YAAAA,GAAe,CAACA,YAAAA,GAAe,EAAA,GAAK,CAAA;AACpD,QAAA,MAAMG,OAAAA,GAAU,EAAA;QAEhB,OAAO;YACLC,SAAAA,EAAW,CAAC,UAAU,EAAER,CAAAA,GAAIM,OAAAA,CAAQ,IAAI,EAAEL,CAAAA,GAAIM,OAAAA,CAAQ,GAAG;AAC3D,SAAA;AACF,IAAA;;IAGA,OAAO;QACLC,SAAAA,EAAW,CAAC,UAAU,EAAER,CAAAA,CAAE,IAAI,EAAEC,CAAAA,CAAE,GAAG;AACvC,KAAA;AACF;AASA,MAAMQ,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAkB,GAAA;AAC/C,IAAA,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEpB,IAAI,EAAEI,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGe,qBAAAA,CAChF,CAACC,WAAa;AACZtB,YAAAA,IAAAA,EAAMsB,QAAQC,OAAO,EAAA;AACrBJ,YAAAA,QAAAA,EAAUG,QAAQE,WAAW,EAAA;AAC7BpB,YAAAA,aAAAA,EAAekB,QAAQG,4BAA4B,EAAA;AACnDpB,YAAAA,aAAAA,EAAeiB,QAAQI,qBAAqB,EAAA;AAC5CN,YAAAA,UAAAA,EAAYE,QAAQF,UAAU,EAAA;AAC9Bd,YAAAA,WAAAA,EAAagB,QAAQK,eAAe;SACtC,CAAA,CAAA;AAGF,IAAA,IAAI,CAACP,UAAAA,EAAY;QACf,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEQ,cAAA,CAACC,gBAAAA,EAAAA;QACCC,MAAAA,EAAO,MAAA;QACPC,IAAAA,EAAM,CAAA;QACNC,QAAAA,EAAS,OAAA;QACTC,aAAAA,EAAc,MAAA;QACdC,GAAAA,EAAK,CAAA;QACLC,MAAAA,EAAQ,GAAA;QACRC,KAAAA,EAAM,MAAA;AAEN,QAAA,QAAA,gBAAAR,cAAA,CAACC,gBAAAA,EAAAA;YAAIQ,KAAAA,EAAOlC,QAAAA,CAASC,aAAAA,EAAeC,aAAAA,EAAeC,WAAAA,EAAaN,IAAAA,CAAAA;sBAC7DkB,UAAAA,CAAW;gBAAEoB,IAAAA,EAAMnB,QAAAA;AAAUnB,gBAAAA;AAAK,aAAA;;;AAI3C;;;;;"}

package/dist/admin/admin/src/components/DragLayer.mjs

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Box } from '@strapi/design-system';
+import { useDragLayer } from 'react-dnd';
+import { getWidgetElement } from '../utils/widgetLayout.mjs';
+
+function isWidgetDragItem(item) {
+    return typeof item === 'object' && item !== null && 'id' in item && typeof item.id === 'string' && 'originalIndex' in item && typeof item.originalIndex === 'number' && 'title' in item && 'component' in item;
+}
+function getStyle(initialOffset, currentOffset, mouseOffset, item) {
+    if (!initialOffset || !currentOffset || !mouseOffset) {
+        return {
+            display: 'none'
+        };
+    }
+    const { x, y } = mouseOffset;
+    // Only apply custom offset for widget drags
+    if (isWidgetDragItem(item)) {
+        // Calculate dynamic offset based on widget position and width
+        const widgetElement = getWidgetElement(item.id);
+        const previewWidth = widgetElement?.clientWidth;
+        const offsetX = previewWidth ? -previewWidth + 20 : 0;
+        const offsetY = 20;
+        return {
+            transform: `translate(${x + offsetX}px, ${y + offsetY}px)`
+        };
+    }
+    // Default positioning for non-widget drags
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+}
+const DragLayer = ({ renderItem })=>{
+    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer((monitor)=>({
+            item: monitor.getItem(),
+            itemType: monitor.getItemType(),
+            initialOffset: monitor.getInitialSourceClientOffset(),
+            currentOffset: monitor.getSourceClientOffset(),
+            isDragging: monitor.isDragging(),
+            mouseOffset: monitor.getClientOffset()
+        }));
+    if (!isDragging) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Box, {
+        height: "100%",
+        left: 0,
+        position: "fixed",
+        pointerEvents: "none",
+        top: 0,
+        zIndex: 100,
+        width: "100%",
+        children: /*#__PURE__*/ jsx(Box, {
+            style: getStyle(initialOffset, currentOffset, mouseOffset, item),
+            children: renderItem({
+                type: itemType,
+                item
+            })
+        })
+    });
+};
+
+export { DragLayer, isWidgetDragItem };
+//# sourceMappingURL=DragLayer.mjs.map

package/dist/admin/admin/src/components/DragLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragLayer.mjs","sources":["../../../../../admin/src/components/DragLayer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';\n\nimport { getWidgetElement } from '../utils/widgetLayout';\n\nimport type { WidgetArgs } from '../core/apis/Widgets';\n\nexport interface WidgetDragItem extends Pick<WidgetArgs, 'title' | 'icon' | 'link' | 'component'> {\n  type: 'widget';\n  id: string;\n  originalIndex: number;\n}\n\nexport function isWidgetDragItem(item: unknown): item is WidgetDragItem {\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    'id' in item &&\n    typeof item.id === 'string' &&\n    'originalIndex' in item &&\n    typeof item.originalIndex === 'number' &&\n    'title' in item &&\n    'component' in item\n  );\n}\n\nfunction getStyle(\n  initialOffset: XYCoord | null,\n  currentOffset: XYCoord | null,\n  mouseOffset: XYCoord | null,\n  item?: unknown\n) {\n  if (!initialOffset || !currentOffset || !mouseOffset) {\n    return { display: 'none' };\n  }\n\n  const { x, y } = mouseOffset;\n\n  // Only apply custom offset for widget drags\n  if (isWidgetDragItem(item)) {\n    // Calculate dynamic offset based on widget position and width\n    const widgetElement = getWidgetElement(item.id);\n    const previewWidth = widgetElement?.clientWidth;\n    const offsetX = previewWidth ? -previewWidth + 20 : 0;\n    const offsetY = 20;\n\n    return {\n      transform: `translate(${x + offsetX}px, ${y + offsetY}px)`,\n    };\n  }\n\n  // Default positioning for non-widget drags\n  return {\n    transform: `translate(${x}px, ${y}px)`,\n  };\n}\n\nexport interface DragLayerProps {\n  renderItem: (item: {\n    item: unknown;\n    type: ReturnType<DragLayerMonitor['getItemType']>;\n  }) => React.ReactNode;\n}\n\nconst DragLayer = ({ renderItem }: DragLayerProps) => {\n  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(\n    (monitor) => ({\n      item: monitor.getItem(),\n      itemType: monitor.getItemType(),\n      initialOffset: monitor.getInitialSourceClientOffset(),\n      currentOffset: monitor.getSourceClientOffset(),\n      isDragging: monitor.isDragging(),\n      mouseOffset: monitor.getClientOffset(),\n    })\n  );\n\n  if (!isDragging) {\n    return null;\n  }\n\n  return (\n    <Box\n      height=\"100%\"\n      left={0}\n      position=\"fixed\"\n      pointerEvents=\"none\"\n      top={0}\n      zIndex={100}\n      width=\"100%\"\n    >\n      <Box style={getStyle(initialOffset, currentOffset, mouseOffset, item)}>\n        {renderItem({ type: itemType, item })}\n      </Box>\n    </Box>\n  );\n};\n\nexport { DragLayer };\n"],"names":["isWidgetDragItem","item","id","originalIndex","getStyle","initialOffset","currentOffset","mouseOffset","display","x","y","widgetElement","getWidgetElement","previewWidth","clientWidth","offsetX","offsetY","transform","DragLayer","renderItem","itemType","isDragging","useDragLayer","monitor","getItem","getItemType","getInitialSourceClientOffset","getSourceClientOffset","getClientOffset","_jsx","Box","height","left","position","pointerEvents","top","zIndex","width","style","type"],"mappings":";;;;;;AAeO,SAASA,iBAAiBC,IAAa,EAAA;IAC5C,OACE,OAAOA,SAAS,QAAA,IAChBA,IAAAA,KAAS,QACT,IAAA,IAAQA,IAAAA,IACR,OAAOA,IAAAA,CAAKC,EAAE,KAAK,QAAA,IACnB,eAAA,IAAmBD,QACnB,OAAOA,IAAAA,CAAKE,aAAa,KAAK,QAAA,IAC9B,OAAA,IAAWF,IAAAA,IACX,WAAA,IAAeA,IAAAA;AAEnB;AAEA,SAASG,SACPC,aAA6B,EAC7BC,aAA6B,EAC7BC,WAA2B,EAC3BN,IAAc,EAAA;AAEd,IAAA,IAAI,CAACI,aAAAA,IAAiB,CAACC,aAAAA,IAAiB,CAACC,WAAAA,EAAa;QACpD,OAAO;YAAEC,OAAAA,EAAS;AAAO,SAAA;AAC3B,IAAA;AAEA,IAAA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGH,WAAAA;;AAGjB,IAAA,IAAIP,iBAAiBC,IAAAA,CAAAA,EAAO;;QAE1B,MAAMU,aAAAA,GAAgBC,gBAAAA,CAAiBX,IAAAA,CAAKC,EAAE,CAAA;AAC9C,QAAA,MAAMW,eAAeF,aAAAA,EAAeG,WAAAA;AACpC,QAAA,MAAMC,OAAAA,GAAUF,YAAAA,GAAe,CAACA,YAAAA,GAAe,EAAA,GAAK,CAAA;AACpD,QAAA,MAAMG,OAAAA,GAAU,EAAA;QAEhB,OAAO;YACLC,SAAAA,EAAW,CAAC,UAAU,EAAER,CAAAA,GAAIM,OAAAA,CAAQ,IAAI,EAAEL,CAAAA,GAAIM,OAAAA,CAAQ,GAAG;AAC3D,SAAA;AACF,IAAA;;IAGA,OAAO;QACLC,SAAAA,EAAW,CAAC,UAAU,EAAER,CAAAA,CAAE,IAAI,EAAEC,CAAAA,CAAE,GAAG;AACvC,KAAA;AACF;AASA,MAAMQ,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAkB,GAAA;AAC/C,IAAA,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEpB,IAAI,EAAEI,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGe,YAAAA,CAChF,CAACC,WAAa;AACZtB,YAAAA,IAAAA,EAAMsB,QAAQC,OAAO,EAAA;AACrBJ,YAAAA,QAAAA,EAAUG,QAAQE,WAAW,EAAA;AAC7BpB,YAAAA,aAAAA,EAAekB,QAAQG,4BAA4B,EAAA;AACnDpB,YAAAA,aAAAA,EAAeiB,QAAQI,qBAAqB,EAAA;AAC5CN,YAAAA,UAAAA,EAAYE,QAAQF,UAAU,EAAA;AAC9Bd,YAAAA,WAAAA,EAAagB,QAAQK,eAAe;SACtC,CAAA,CAAA;AAGF,IAAA,IAAI,CAACP,UAAAA,EAAY;QACf,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEQ,GAAA,CAACC,GAAAA,EAAAA;QACCC,MAAAA,EAAO,MAAA;QACPC,IAAAA,EAAM,CAAA;QACNC,QAAAA,EAAS,OAAA;QACTC,aAAAA,EAAc,MAAA;QACdC,GAAAA,EAAK,CAAA;QACLC,MAAAA,EAAQ,GAAA;QACRC,KAAAA,EAAM,MAAA;AAEN,QAAA,QAAA,gBAAAR,GAAA,CAACC,GAAAA,EAAAA;YAAIQ,KAAAA,EAAOlC,QAAAA,CAASC,aAAAA,EAAeC,aAAAA,EAAeC,WAAAA,EAAaN,IAAAA,CAAAA;sBAC7DkB,UAAAA,CAAW;gBAAEoB,IAAAA,EAAMnB,QAAAA;AAAUnB,gBAAAA;AAAK,aAAA;;;AAI3C;;;;"}