@strapi/content-manager 5.4.1 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -1
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-ClKl_TA2.js → ComponentConfigurationPage-BPiQrhZ6.js} +4 -5
- package/dist/_chunks/{ComponentConfigurationPage-ClKl_TA2.js.map → ComponentConfigurationPage-BPiQrhZ6.js.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-D3ZWDAHG.mjs → ComponentConfigurationPage-viOAdZM6.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-D3ZWDAHG.mjs.map → ComponentConfigurationPage-viOAdZM6.mjs.map} +1 -1
- package/dist/_chunks/{ComponentIcon-BXdiCGQp.js → ComponentIcon-CRbtQEUV.js} +2 -3
- package/dist/_chunks/{ComponentIcon-BXdiCGQp.js.map → ComponentIcon-CRbtQEUV.js.map} +1 -1
- package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -1
- package/dist/_chunks/{EditConfigurationPage-OWez0Kxp.js → EditConfigurationPage-CZRKq8CN.js} +4 -5
- package/dist/_chunks/{EditConfigurationPage-OWez0Kxp.js.map → EditConfigurationPage-CZRKq8CN.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-BYCBSJxP.mjs → EditConfigurationPage-DKtPyjs_.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BYCBSJxP.mjs.map → EditConfigurationPage-DKtPyjs_.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-BEs5iGDi.js → EditViewPage-C-TZmK5r.js} +4 -5
- package/dist/_chunks/{EditViewPage-BEs5iGDi.js.map → EditViewPage-C-TZmK5r.js.map} +1 -1
- package/dist/_chunks/{EditViewPage-5pdbvsO_.mjs → EditViewPage-D2FPb5Mh.mjs} +3 -3
- package/dist/_chunks/{EditViewPage-5pdbvsO_.mjs.map → EditViewPage-D2FPb5Mh.mjs.map} +1 -1
- package/dist/_chunks/{Field-DNHm4wHx.js → Field-IMBnqF-k.js} +26 -46
- package/dist/_chunks/Field-IMBnqF-k.js.map +1 -0
- package/dist/_chunks/{Field-DcKuFHYK.mjs → Field-hD0Y00Mt.mjs} +25 -44
- package/dist/_chunks/Field-hD0Y00Mt.mjs.map +1 -0
- package/dist/_chunks/FieldTypeIcon-CMlNO8PE.mjs.map +1 -1
- package/dist/_chunks/FieldTypeIcon-Dnwq_IRF.js.map +1 -1
- package/dist/_chunks/{Form-CoRxWJOz.js → Form-BaURS01O.js} +5 -6
- package/dist/_chunks/{Form-CoRxWJOz.js.map → Form-BaURS01O.js.map} +1 -1
- package/dist/_chunks/{Form-CGwM_-5c.mjs → Form-ZQ9fzWkd.mjs} +3 -3
- package/dist/_chunks/{Form-CGwM_-5c.mjs.map → Form-ZQ9fzWkd.mjs.map} +1 -1
- package/dist/_chunks/{History-BcUTQrfG.js → History-BqRQm2Lc.js} +6 -7
- package/dist/_chunks/History-BqRQm2Lc.js.map +1 -0
- package/dist/_chunks/{History-DEvr3Q_V.mjs → History-C4X3jiQJ.mjs} +5 -5
- package/dist/_chunks/History-C4X3jiQJ.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-BE_Ho7tV.js → ListConfigurationPage-BT69-TvF.js} +4 -5
- package/dist/_chunks/{ListConfigurationPage-BE_Ho7tV.js.map → ListConfigurationPage-BT69-TvF.js.map} +1 -1
- package/dist/_chunks/{ListConfigurationPage-BM4zZZcM.mjs → ListConfigurationPage-CwMU6tWQ.mjs} +3 -3
- package/dist/_chunks/{ListConfigurationPage-BM4zZZcM.mjs.map → ListConfigurationPage-CwMU6tWQ.mjs.map} +1 -1
- package/dist/_chunks/{ListViewPage-BkT8Eao0.js → ListViewPage-CYkrfWsm.js} +51 -51
- package/dist/_chunks/ListViewPage-CYkrfWsm.js.map +1 -0
- package/dist/_chunks/{ListViewPage-BK2mkrql.mjs → ListViewPage-CvxfiNTc.mjs} +50 -49
- package/dist/_chunks/ListViewPage-CvxfiNTc.mjs.map +1 -0
- package/dist/_chunks/{NoContentTypePage-C8mtyc4H.js → NoContentTypePage-BZMfRsrg.js} +2 -2
- package/dist/_chunks/{NoContentTypePage-C8mtyc4H.js.map → NoContentTypePage-BZMfRsrg.js.map} +1 -1
- package/dist/_chunks/{NoContentTypePage-BvcAutu9.mjs → NoContentTypePage-Dy6sa9LT.mjs} +2 -2
- package/dist/_chunks/{NoContentTypePage-BvcAutu9.mjs.map → NoContentTypePage-Dy6sa9LT.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-BmbRz7PR.mjs → NoPermissionsPage-DiW-TIzq.mjs} +2 -2
- package/dist/_chunks/{NoPermissionsPage-BmbRz7PR.mjs.map → NoPermissionsPage-DiW-TIzq.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-B5Y9Y78B.js → NoPermissionsPage-DjUdvhJ6.js} +2 -2
- package/dist/_chunks/{NoPermissionsPage-B5Y9Y78B.js.map → NoPermissionsPage-DjUdvhJ6.js.map} +1 -1
- package/dist/_chunks/{Preview-BF8ZDYqS.js → Preview-BqRUSbFU.js} +17 -7
- package/dist/_chunks/Preview-BqRUSbFU.js.map +1 -0
- package/dist/_chunks/{Preview-DcexhKJE.mjs → Preview-DwWET-X7.mjs} +17 -6
- package/dist/_chunks/Preview-DwWET-X7.mjs.map +1 -0
- package/dist/_chunks/{Relations-BjIzc4EK.mjs → Relations-BOTC_ZqE.mjs} +6 -8
- package/dist/_chunks/{Relations-BjIzc4EK.mjs.map → Relations-BOTC_ZqE.mjs.map} +1 -1
- package/dist/_chunks/{Relations-BKnoK1R0.js → Relations-DnCdLzq_.js} +7 -10
- package/dist/_chunks/{Relations-BKnoK1R0.js.map → Relations-DnCdLzq_.js.map} +1 -1
- package/dist/_chunks/{en-DTWPCdTS.js → en-BK8Xyl5I.js} +3 -2
- package/dist/_chunks/{en-DTWPCdTS.js.map → en-BK8Xyl5I.js.map} +1 -1
- package/dist/_chunks/{en-CfIXaZf9.mjs → en-Dtk_ot79.mjs} +3 -2
- package/dist/_chunks/{en-CfIXaZf9.mjs.map → en-Dtk_ot79.mjs.map} +1 -1
- package/dist/_chunks/hooks-BAaaKPS_.js.map +1 -1
- package/dist/_chunks/{index-BW-rXkjn.mjs → index-BeYsz0Vi.mjs} +89 -51
- package/dist/_chunks/index-BeYsz0Vi.mjs.map +1 -0
- package/dist/_chunks/{index-DOzAG2cq.js → index-CptTdHNy.js} +90 -53
- package/dist/_chunks/index-CptTdHNy.js.map +1 -0
- package/dist/_chunks/{layout-DFVbgjp2.mjs → layout-CzSSEy9b.mjs} +4 -4
- package/dist/_chunks/{layout-DFVbgjp2.mjs.map → layout-CzSSEy9b.mjs.map} +1 -1
- package/dist/_chunks/{layout-RC3W2obV.js → layout-szfTCeYm.js} +5 -6
- package/dist/_chunks/{layout-RC3W2obV.js.map → layout-szfTCeYm.js.map} +1 -1
- package/dist/_chunks/objects-BcXOv6_9.js.map +1 -1
- package/dist/_chunks/objects-D6yBsdmx.mjs.map +1 -1
- package/dist/_chunks/{relations-Dogh8HWI.mjs → relations-DvzmDbWc.mjs} +2 -2
- package/dist/_chunks/{relations-Dogh8HWI.mjs.map → relations-DvzmDbWc.mjs.map} +1 -1
- package/dist/_chunks/{relations-zam7-5H7.js → relations-qssSbh1V.js} +2 -2
- package/dist/_chunks/{relations-zam7-5H7.js.map → relations-qssSbh1V.js.map} +1 -1
- package/dist/_chunks/useDebounce-CtcjDB3L.js.map +1 -1
- package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +1 -1
- package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js → useDragAndDrop-BMtgCYzL.js} +5 -9
- package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js.map → useDragAndDrop-BMtgCYzL.js.map} +1 -1
- package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs → useDragAndDrop-DJ6jqvZN.mjs} +4 -7
- package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs.map → useDragAndDrop-DJ6jqvZN.mjs.map} +1 -1
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/content-manager.d.ts +3 -2
- package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +1 -1
- package/dist/admin/src/services/documents.d.ts +0 -3
- package/dist/server/index.js +74 -45
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +74 -44
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/preview/controllers/validation/preview.d.ts.map +1 -1
- package/dist/server/src/preview/index.d.ts.map +1 -1
- package/dist/server/src/preview/services/index.d.ts +1 -0
- package/dist/server/src/preview/services/index.d.ts.map +1 -1
- package/dist/server/src/preview/services/preview-config.d.ts +2 -0
- package/dist/server/src/preview/services/preview-config.d.ts.map +1 -1
- package/dist/server/src/preview/utils.d.ts +1 -0
- package/dist/server/src/preview/utils.d.ts.map +1 -1
- package/dist/server/src/register.d.ts.map +1 -1
- package/package.json +9 -9
- package/dist/_chunks/Field-DNHm4wHx.js.map +0 -1
- package/dist/_chunks/Field-DcKuFHYK.mjs.map +0 -1
- package/dist/_chunks/History-BcUTQrfG.js.map +0 -1
- package/dist/_chunks/History-DEvr3Q_V.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BK2mkrql.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BkT8Eao0.js.map +0 -1
- package/dist/_chunks/Preview-BF8ZDYqS.js.map +0 -1
- package/dist/_chunks/Preview-DcexhKJE.mjs.map +0 -1
- package/dist/_chunks/index-BW-rXkjn.mjs.map +0 -1
- package/dist/_chunks/index-DOzAG2cq.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDebounce-CtcjDB3L.js","sources":["../../admin/src/utils/urls.ts","../../admin/src/hooks/usePrev.ts","../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["const prefixFileUrlWithBackendUrl = (fileURL?: string): string | undefined => {\n return !!fileURL && fileURL.startsWith('/') ? `${window.strapi.backendURL}${fileURL}` : fileURL;\n};\n\nexport { prefixFileUrlWithBackendUrl };\n","import { useEffect, useRef } from 'react';\n\nexport const usePrev = <T>(value: T): T | undefined => {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n","import { useEffect, useState } from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n"],"names":["useRef","useEffect","useState"],"mappings":";;AAAM,MAAA,8BAA8B,CAAC,YAAyC;AAC5E,SAAO,CAAC,CAAC,WAAW,QAAQ,WAAW,GAAG,IAAI,GAAG,OAAO,OAAO,UAAU,GAAG,OAAO,KAAK;AAC1F;ACAa,MAAA,UAAU,CAAI,UAA4B;AACrD,QAAM,MAAMA,MAAAA;
|
1
|
+
{"version":3,"file":"useDebounce-CtcjDB3L.js","sources":["../../admin/src/utils/urls.ts","../../admin/src/hooks/usePrev.ts","../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["const prefixFileUrlWithBackendUrl = (fileURL?: string): string | undefined => {\n return !!fileURL && fileURL.startsWith('/') ? `${window.strapi.backendURL}${fileURL}` : fileURL;\n};\n\nexport { prefixFileUrlWithBackendUrl };\n","import { useEffect, useRef } from 'react';\n\nexport const usePrev = <T>(value: T): T | undefined => {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n","import { useEffect, useState } from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n"],"names":["useRef","useEffect","useState"],"mappings":";;AAAM,MAAA,8BAA8B,CAAC,YAAyC;AAC5E,SAAO,CAAC,CAAC,WAAW,QAAQ,WAAW,GAAG,IAAI,GAAG,OAAO,OAAO,UAAU,GAAG,OAAO,KAAK;AAC1F;ACAa,MAAA,UAAU,CAAI,UAA4B;AACrD,QAAM,MAAMA,MAAAA,OAAU;AAEtBC,QAAAA,UAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAAA,GACb,CAAC,KAAK,CAAC;AAEV,SAAO,IAAI;AACb;ACRgB,SAAA,YAAoB,OAAe,OAAuB;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAIC,MAAAA,SAAS,KAAK;AAE1DD,QAAAA,UAAU,MAAM;AACR,UAAA,UAAU,WAAW,MAAM;AAC/B,wBAAkB,KAAK;AAAA,OACtB,KAAK;AAER,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EAAA,GACC,CAAC,OAAO,KAAK,CAAC;AAEV,SAAA;AACT;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDebounce-DmuSJIF3.mjs","sources":["../../admin/src/utils/urls.ts","../../admin/src/hooks/usePrev.ts","../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["const prefixFileUrlWithBackendUrl = (fileURL?: string): string | undefined => {\n return !!fileURL && fileURL.startsWith('/') ? `${window.strapi.backendURL}${fileURL}` : fileURL;\n};\n\nexport { prefixFileUrlWithBackendUrl };\n","import { useEffect, useRef } from 'react';\n\nexport const usePrev = <T>(value: T): T | undefined => {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n","import { useEffect, useState } from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n"],"names":[],"mappings":";AAAM,MAAA,8BAA8B,CAAC,YAAyC;AAC5E,SAAO,CAAC,CAAC,WAAW,QAAQ,WAAW,GAAG,IAAI,GAAG,OAAO,OAAO,UAAU,GAAG,OAAO,KAAK;AAC1F;ACAa,MAAA,UAAU,CAAI,UAA4B;AACrD,QAAM,MAAM;
|
1
|
+
{"version":3,"file":"useDebounce-DmuSJIF3.mjs","sources":["../../admin/src/utils/urls.ts","../../admin/src/hooks/usePrev.ts","../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["const prefixFileUrlWithBackendUrl = (fileURL?: string): string | undefined => {\n return !!fileURL && fileURL.startsWith('/') ? `${window.strapi.backendURL}${fileURL}` : fileURL;\n};\n\nexport { prefixFileUrlWithBackendUrl };\n","import { useEffect, useRef } from 'react';\n\nexport const usePrev = <T>(value: T): T | undefined => {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n","import { useEffect, useState } from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n"],"names":[],"mappings":";AAAM,MAAA,8BAA8B,CAAC,YAAyC;AAC5E,SAAO,CAAC,CAAC,WAAW,QAAQ,WAAW,GAAG,IAAI,GAAG,OAAO,OAAO,UAAU,GAAG,OAAO,KAAK;AAC1F;ACAa,MAAA,UAAU,CAAI,UAA4B;AACrD,QAAM,MAAM,OAAU;AAEtB,YAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAAA,GACb,CAAC,KAAK,CAAC;AAEV,SAAO,IAAI;AACb;ACRgB,SAAA,YAAoB,OAAe,OAAuB;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,YAAU,MAAM;AACR,UAAA,UAAU,WAAW,MAAM;AAC/B,wBAAkB,KAAK;AAAA,OACtB,KAAK;AAER,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EAAA,GACC,CAAC,OAAO,KAAK,CAAC;AAEV,SAAA;AACT;"}
|
@@ -2,8 +2,7 @@
|
|
2
2
|
const React = require("react");
|
3
3
|
const reactDnd = require("react-dnd");
|
4
4
|
function _interopNamespace(e) {
|
5
|
-
if (e && e.__esModule)
|
6
|
-
return e;
|
5
|
+
if (e && e.__esModule) return e;
|
7
6
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
8
7
|
if (e) {
|
9
8
|
for (const k in e) {
|
@@ -136,8 +135,7 @@ const useDragAndDrop = (active, {
|
|
136
135
|
const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
|
137
136
|
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
138
137
|
const clientOffset = monitor.getClientOffset();
|
139
|
-
if (!clientOffset)
|
140
|
-
return;
|
138
|
+
if (!clientOffset) return;
|
141
139
|
const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
|
142
140
|
if (typeof dragIndex === "number" && typeof newIndex === "number") {
|
143
141
|
if (dragIndex === newIndex) {
|
@@ -190,10 +188,8 @@ const useDragAndDrop = (active, {
|
|
190
188
|
const getDragDirection = (monitor) => {
|
191
189
|
if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
|
192
190
|
const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
|
193
|
-
if (deltaY > 0)
|
194
|
-
|
195
|
-
if (deltaY < 0)
|
196
|
-
return DIRECTIONS.DOWNWARD;
|
191
|
+
if (deltaY > 0) return DIRECTIONS.UPWARD;
|
192
|
+
if (deltaY < 0) return DIRECTIONS.DOWNWARD;
|
197
193
|
return null;
|
198
194
|
}
|
199
195
|
return null;
|
@@ -246,4 +242,4 @@ exports.DIRECTIONS = DIRECTIONS;
|
|
246
242
|
exports.DROP_SENSITIVITY = DROP_SENSITIVITY;
|
247
243
|
exports.ItemTypes = ItemTypes;
|
248
244
|
exports.useDragAndDrop = useDragAndDrop;
|
249
|
-
//# sourceMappingURL=useDragAndDrop-
|
245
|
+
//# sourceMappingURL=useDragAndDrop-BMtgCYzL.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDragAndDrop-J0TUUbR6.js","sources":["../../admin/src/constants/dragAndDrop.ts","../../admin/src/hooks/useKeyboardDragAndDrop.ts","../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["export const ItemTypes = {\n COMPONENT: 'component',\n EDIT_FIELD: 'editField',\n FIELD: 'field',\n DYNAMIC_ZONE: 'dynamicZone',\n RELATION: 'relation',\n BLOCKS: 'blocks',\n} as const;\n","import * as React from 'react';\n\nexport type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {\n onCancel?: (index: TIndex) => void;\n onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;\n onGrabItem?: (index: TIndex) => void;\n onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;\n};\n\n/**\n * Utility hook designed to implement keyboard accessibile drag and drop by\n * returning an onKeyDown handler to be passed to the drag icon button.\n *\n * @internal - You should use `useDragAndDrop` instead.\n */\nexport const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(\n active: boolean,\n index: TIndex,\n { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>\n) => {\n const [isSelected, setIsSelected] = React.useState(false);\n\n const handleMove = (movement: 'UP' | 'DOWN') => {\n if (!isSelected) {\n return;\n }\n if (typeof index === 'number' && onMoveItem) {\n if (movement === 'UP') {\n onMoveItem((index - 1) as TIndex, index);\n } else if (movement === 'DOWN') {\n onMoveItem((index + 1) as TIndex, index);\n }\n }\n };\n\n const handleDragClick = () => {\n if (isSelected) {\n if (onDropItem) {\n onDropItem(index);\n }\n setIsSelected(false);\n } else {\n if (onGrabItem) {\n onGrabItem(index);\n }\n setIsSelected(true);\n }\n };\n\n const handleCancel = () => {\n if (isSelected) {\n setIsSelected(false);\n\n if (onCancel) {\n onCancel(index);\n }\n }\n };\n\n const handleKeyDown = <E extends Element>(e: React.KeyboardEvent<E>) => {\n if (!active) {\n return;\n }\n\n if (e.key === 'Tab' && !isSelected) {\n return;\n }\n\n e.preventDefault();\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n handleDragClick();\n break;\n\n case 'Escape':\n handleCancel();\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n handleMove('DOWN');\n break;\n\n case 'ArrowUp':\n case 'ArrowLeft':\n handleMove('UP');\n break;\n\n default:\n }\n };\n\n return handleKeyDown;\n};\n","import * as React from 'react';\n\nimport {\n useDrag,\n useDrop,\n type HandlerManager,\n type ConnectDragSource,\n type ConnectDropTarget,\n type ConnectDragPreview,\n type DragSourceMonitor,\n} from 'react-dnd';\n\nimport {\n useKeyboardDragAndDrop,\n type UseKeyboardDragAndDropCallbacks,\n} from './useKeyboardDragAndDrop';\n\nimport type { Data } from '@strapi/types';\n\nconst DIRECTIONS = {\n UPWARD: 'upward',\n DOWNWARD: 'downward',\n} as const;\n\nconst DROP_SENSITIVITY = {\n REGULAR: 'regular',\n IMMEDIATE: 'immediate',\n} as const;\n\ninterface UseDragAndDropOptions<\n TIndex extends number | Array<number> = number,\n TItem extends { index: TIndex } = { index: TIndex },\n> extends UseKeyboardDragAndDropCallbacks<TIndex> {\n type?: string;\n index: TIndex;\n item?: TItem;\n onStart?: () => void;\n onEnd?: () => void;\n dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];\n}\n\ntype Identifier = ReturnType<HandlerManager['getHandlerId']>;\n\ntype UseDragAndDropReturn<E extends Element = HTMLElement> = [\n props: {\n handlerId: Identifier;\n isDragging: boolean;\n handleKeyDown: <E extends Element>(event: React.KeyboardEvent<E>) => void;\n isOverDropTarget: boolean;\n direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;\n },\n objectRef: React.RefObject<E>,\n dropRef: ConnectDropTarget,\n dragRef: ConnectDragSource,\n dragPreviewRef: ConnectDragPreview,\n];\n\ntype DropCollectedProps = {\n handlerId: Identifier;\n isOver: boolean;\n};\n\n/**\n * A utility hook abstracting the general drag and drop hooks from react-dnd.\n * Centralising the same behaviours and by default offering keyboard support.\n */\nconst useDragAndDrop = <\n TIndex extends number | Array<number>,\n TItem extends { index: TIndex; id?: Data.ID; [key: string]: unknown } = {\n index: TIndex;\n [key: string]: unknown;\n },\n E extends Element = HTMLElement,\n>(\n active: boolean,\n {\n type = 'STRAPI_DND',\n index,\n item,\n onStart,\n onEnd,\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n dropSensitivity = DROP_SENSITIVITY.REGULAR,\n }: UseDragAndDropOptions<TIndex, TItem>\n): UseDragAndDropReturn<E> => {\n const objectRef = React.useRef<E>(null);\n\n const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({\n accept: type,\n collect(monitor) {\n return {\n handlerId: monitor.getHandlerId(),\n isOver: monitor.isOver({ shallow: true }),\n };\n },\n drop(item) {\n const draggedIndex = item.index;\n const newIndex = index;\n\n if (isOver && onDropItem) {\n onDropItem(draggedIndex, newIndex);\n }\n },\n hover(item, monitor) {\n if (!objectRef.current || !onMoveItem) {\n return;\n }\n\n const dragIndex = item.index;\n const newIndex = index;\n\n const hoverBoundingRect = objectRef.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (!clientOffset) return;\n\n const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;\n if (typeof dragIndex === 'number' && typeof newIndex === 'number') {\n if (dragIndex === newIndex) {\n // Don't replace items with themselves\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n\n // Time to actually perform the action\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n } else {\n // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]\n if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {\n // Indices comparison to find item position in nested list\n const minLength = Math.min(dragIndex.length, newIndex.length);\n let areEqual = true;\n let isLessThan = false;\n let isGreaterThan = false;\n\n for (let i = 0; i < minLength; i++) {\n if (dragIndex[i] < newIndex[i]) {\n isLessThan = true;\n areEqual = false;\n break;\n } else if (dragIndex[i] > newIndex[i]) {\n isGreaterThan = true;\n areEqual = false;\n break;\n }\n }\n\n // Don't replace items with themselves\n if (areEqual && dragIndex.length === newIndex.length) {\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n }\n\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n }\n },\n });\n\n const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {\n if (\n monitor &&\n monitor.isDragging() &&\n !monitor.didDrop() &&\n monitor.getInitialClientOffset() &&\n monitor.getClientOffset()\n ) {\n const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;\n\n if (deltaY > 0) return DIRECTIONS.UPWARD;\n\n if (deltaY < 0) return DIRECTIONS.DOWNWARD;\n\n return null;\n }\n\n return null;\n };\n\n const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({\n type,\n item() {\n if (onStart) {\n onStart();\n }\n\n /**\n * This will be attached and it helps define the preview sizes\n * when a component is flexy e.g. Relations\n */\n const { width } = objectRef.current?.getBoundingClientRect() ?? {};\n\n return { index, width, ...item };\n },\n end() {\n if (onEnd) {\n onEnd();\n }\n },\n canDrag: active,\n /**\n * This is useful when the item is in a virtualized list.\n * However, if we don't have an ID then we want the libraries\n * defaults to take care of this.\n */\n isDragging: item?.id\n ? (monitor) => {\n return item.id === monitor.getItem().id;\n }\n : undefined,\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n initialOffset: monitor.getInitialClientOffset(),\n currentOffset: monitor.getClientOffset(),\n direction: getDragDirection(monitor),\n }),\n });\n\n const handleKeyDown = useKeyboardDragAndDrop(active, index, {\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n });\n\n return [\n { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },\n objectRef,\n dropRef,\n dragRef,\n dragPreviewRef,\n ];\n};\n\nexport {\n useDragAndDrop,\n UseDragAndDropReturn,\n UseDragAndDropOptions,\n DIRECTIONS,\n DROP_SENSITIVITY,\n};\n"],"names":["React","useDrop","item","useDrag"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useDragAndDrop-BMtgCYzL.js","sources":["../../admin/src/constants/dragAndDrop.ts","../../admin/src/hooks/useKeyboardDragAndDrop.ts","../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["export const ItemTypes = {\n COMPONENT: 'component',\n EDIT_FIELD: 'editField',\n FIELD: 'field',\n DYNAMIC_ZONE: 'dynamicZone',\n RELATION: 'relation',\n BLOCKS: 'blocks',\n} as const;\n","import * as React from 'react';\n\nexport type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {\n onCancel?: (index: TIndex) => void;\n onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;\n onGrabItem?: (index: TIndex) => void;\n onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;\n};\n\n/**\n * Utility hook designed to implement keyboard accessibile drag and drop by\n * returning an onKeyDown handler to be passed to the drag icon button.\n *\n * @internal - You should use `useDragAndDrop` instead.\n */\nexport const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(\n active: boolean,\n index: TIndex,\n { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>\n) => {\n const [isSelected, setIsSelected] = React.useState(false);\n\n const handleMove = (movement: 'UP' | 'DOWN') => {\n if (!isSelected) {\n return;\n }\n if (typeof index === 'number' && onMoveItem) {\n if (movement === 'UP') {\n onMoveItem((index - 1) as TIndex, index);\n } else if (movement === 'DOWN') {\n onMoveItem((index + 1) as TIndex, index);\n }\n }\n };\n\n const handleDragClick = () => {\n if (isSelected) {\n if (onDropItem) {\n onDropItem(index);\n }\n setIsSelected(false);\n } else {\n if (onGrabItem) {\n onGrabItem(index);\n }\n setIsSelected(true);\n }\n };\n\n const handleCancel = () => {\n if (isSelected) {\n setIsSelected(false);\n\n if (onCancel) {\n onCancel(index);\n }\n }\n };\n\n const handleKeyDown = <E extends Element>(e: React.KeyboardEvent<E>) => {\n if (!active) {\n return;\n }\n\n if (e.key === 'Tab' && !isSelected) {\n return;\n }\n\n e.preventDefault();\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n handleDragClick();\n break;\n\n case 'Escape':\n handleCancel();\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n handleMove('DOWN');\n break;\n\n case 'ArrowUp':\n case 'ArrowLeft':\n handleMove('UP');\n break;\n\n default:\n }\n };\n\n return handleKeyDown;\n};\n","import * as React from 'react';\n\nimport {\n useDrag,\n useDrop,\n type HandlerManager,\n type ConnectDragSource,\n type ConnectDropTarget,\n type ConnectDragPreview,\n type DragSourceMonitor,\n} from 'react-dnd';\n\nimport {\n useKeyboardDragAndDrop,\n type UseKeyboardDragAndDropCallbacks,\n} from './useKeyboardDragAndDrop';\n\nimport type { Data } from '@strapi/types';\n\nconst DIRECTIONS = {\n UPWARD: 'upward',\n DOWNWARD: 'downward',\n} as const;\n\nconst DROP_SENSITIVITY = {\n REGULAR: 'regular',\n IMMEDIATE: 'immediate',\n} as const;\n\ninterface UseDragAndDropOptions<\n TIndex extends number | Array<number> = number,\n TItem extends { index: TIndex } = { index: TIndex },\n> extends UseKeyboardDragAndDropCallbacks<TIndex> {\n type?: string;\n index: TIndex;\n item?: TItem;\n onStart?: () => void;\n onEnd?: () => void;\n dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];\n}\n\ntype Identifier = ReturnType<HandlerManager['getHandlerId']>;\n\ntype UseDragAndDropReturn<E extends Element = HTMLElement> = [\n props: {\n handlerId: Identifier;\n isDragging: boolean;\n handleKeyDown: <E extends Element>(event: React.KeyboardEvent<E>) => void;\n isOverDropTarget: boolean;\n direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;\n },\n objectRef: React.RefObject<E>,\n dropRef: ConnectDropTarget,\n dragRef: ConnectDragSource,\n dragPreviewRef: ConnectDragPreview,\n];\n\ntype DropCollectedProps = {\n handlerId: Identifier;\n isOver: boolean;\n};\n\n/**\n * A utility hook abstracting the general drag and drop hooks from react-dnd.\n * Centralising the same behaviours and by default offering keyboard support.\n */\nconst useDragAndDrop = <\n TIndex extends number | Array<number>,\n TItem extends { index: TIndex; id?: Data.ID; [key: string]: unknown } = {\n index: TIndex;\n [key: string]: unknown;\n },\n E extends Element = HTMLElement,\n>(\n active: boolean,\n {\n type = 'STRAPI_DND',\n index,\n item,\n onStart,\n onEnd,\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n dropSensitivity = DROP_SENSITIVITY.REGULAR,\n }: UseDragAndDropOptions<TIndex, TItem>\n): UseDragAndDropReturn<E> => {\n const objectRef = React.useRef<E>(null);\n\n const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({\n accept: type,\n collect(monitor) {\n return {\n handlerId: monitor.getHandlerId(),\n isOver: monitor.isOver({ shallow: true }),\n };\n },\n drop(item) {\n const draggedIndex = item.index;\n const newIndex = index;\n\n if (isOver && onDropItem) {\n onDropItem(draggedIndex, newIndex);\n }\n },\n hover(item, monitor) {\n if (!objectRef.current || !onMoveItem) {\n return;\n }\n\n const dragIndex = item.index;\n const newIndex = index;\n\n const hoverBoundingRect = objectRef.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (!clientOffset) return;\n\n const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;\n if (typeof dragIndex === 'number' && typeof newIndex === 'number') {\n if (dragIndex === newIndex) {\n // Don't replace items with themselves\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n\n // Time to actually perform the action\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n } else {\n // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]\n if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {\n // Indices comparison to find item position in nested list\n const minLength = Math.min(dragIndex.length, newIndex.length);\n let areEqual = true;\n let isLessThan = false;\n let isGreaterThan = false;\n\n for (let i = 0; i < minLength; i++) {\n if (dragIndex[i] < newIndex[i]) {\n isLessThan = true;\n areEqual = false;\n break;\n } else if (dragIndex[i] > newIndex[i]) {\n isGreaterThan = true;\n areEqual = false;\n break;\n }\n }\n\n // Don't replace items with themselves\n if (areEqual && dragIndex.length === newIndex.length) {\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n }\n\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n }\n },\n });\n\n const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {\n if (\n monitor &&\n monitor.isDragging() &&\n !monitor.didDrop() &&\n monitor.getInitialClientOffset() &&\n monitor.getClientOffset()\n ) {\n const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;\n\n if (deltaY > 0) return DIRECTIONS.UPWARD;\n\n if (deltaY < 0) return DIRECTIONS.DOWNWARD;\n\n return null;\n }\n\n return null;\n };\n\n const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({\n type,\n item() {\n if (onStart) {\n onStart();\n }\n\n /**\n * This will be attached and it helps define the preview sizes\n * when a component is flexy e.g. Relations\n */\n const { width } = objectRef.current?.getBoundingClientRect() ?? {};\n\n return { index, width, ...item };\n },\n end() {\n if (onEnd) {\n onEnd();\n }\n },\n canDrag: active,\n /**\n * This is useful when the item is in a virtualized list.\n * However, if we don't have an ID then we want the libraries\n * defaults to take care of this.\n */\n isDragging: item?.id\n ? (monitor) => {\n return item.id === monitor.getItem().id;\n }\n : undefined,\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n initialOffset: monitor.getInitialClientOffset(),\n currentOffset: monitor.getClientOffset(),\n direction: getDragDirection(monitor),\n }),\n });\n\n const handleKeyDown = useKeyboardDragAndDrop(active, index, {\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n });\n\n return [\n { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },\n objectRef,\n dropRef,\n dragRef,\n dragPreviewRef,\n ];\n};\n\nexport {\n useDragAndDrop,\n UseDragAndDropReturn,\n UseDragAndDropOptions,\n DIRECTIONS,\n DROP_SENSITIVITY,\n};\n"],"names":["React","useDrop","item","useDrag"],"mappings":"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"}
|
@@ -116,8 +116,7 @@ const useDragAndDrop = (active, {
|
|
116
116
|
const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
|
117
117
|
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
118
118
|
const clientOffset = monitor.getClientOffset();
|
119
|
-
if (!clientOffset)
|
120
|
-
return;
|
119
|
+
if (!clientOffset) return;
|
121
120
|
const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
|
122
121
|
if (typeof dragIndex === "number" && typeof newIndex === "number") {
|
123
122
|
if (dragIndex === newIndex) {
|
@@ -170,10 +169,8 @@ const useDragAndDrop = (active, {
|
|
170
169
|
const getDragDirection = (monitor) => {
|
171
170
|
if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
|
172
171
|
const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
|
173
|
-
if (deltaY > 0)
|
174
|
-
|
175
|
-
if (deltaY < 0)
|
176
|
-
return DIRECTIONS.DOWNWARD;
|
172
|
+
if (deltaY > 0) return DIRECTIONS.UPWARD;
|
173
|
+
if (deltaY < 0) return DIRECTIONS.DOWNWARD;
|
177
174
|
return null;
|
178
175
|
}
|
179
176
|
return null;
|
@@ -228,4 +225,4 @@ export {
|
|
228
225
|
DIRECTIONS as a,
|
229
226
|
useDragAndDrop as u
|
230
227
|
};
|
231
|
-
//# sourceMappingURL=useDragAndDrop-
|
228
|
+
//# sourceMappingURL=useDragAndDrop-DJ6jqvZN.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDragAndDrop-DdHgKsqq.mjs","sources":["../../admin/src/constants/dragAndDrop.ts","../../admin/src/hooks/useKeyboardDragAndDrop.ts","../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["export const ItemTypes = {\n COMPONENT: 'component',\n EDIT_FIELD: 'editField',\n FIELD: 'field',\n DYNAMIC_ZONE: 'dynamicZone',\n RELATION: 'relation',\n BLOCKS: 'blocks',\n} as const;\n","import * as React from 'react';\n\nexport type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {\n onCancel?: (index: TIndex) => void;\n onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;\n onGrabItem?: (index: TIndex) => void;\n onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;\n};\n\n/**\n * Utility hook designed to implement keyboard accessibile drag and drop by\n * returning an onKeyDown handler to be passed to the drag icon button.\n *\n * @internal - You should use `useDragAndDrop` instead.\n */\nexport const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(\n active: boolean,\n index: TIndex,\n { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>\n) => {\n const [isSelected, setIsSelected] = React.useState(false);\n\n const handleMove = (movement: 'UP' | 'DOWN') => {\n if (!isSelected) {\n return;\n }\n if (typeof index === 'number' && onMoveItem) {\n if (movement === 'UP') {\n onMoveItem((index - 1) as TIndex, index);\n } else if (movement === 'DOWN') {\n onMoveItem((index + 1) as TIndex, index);\n }\n }\n };\n\n const handleDragClick = () => {\n if (isSelected) {\n if (onDropItem) {\n onDropItem(index);\n }\n setIsSelected(false);\n } else {\n if (onGrabItem) {\n onGrabItem(index);\n }\n setIsSelected(true);\n }\n };\n\n const handleCancel = () => {\n if (isSelected) {\n setIsSelected(false);\n\n if (onCancel) {\n onCancel(index);\n }\n }\n };\n\n const handleKeyDown = <E extends Element>(e: React.KeyboardEvent<E>) => {\n if (!active) {\n return;\n }\n\n if (e.key === 'Tab' && !isSelected) {\n return;\n }\n\n e.preventDefault();\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n handleDragClick();\n break;\n\n case 'Escape':\n handleCancel();\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n handleMove('DOWN');\n break;\n\n case 'ArrowUp':\n case 'ArrowLeft':\n handleMove('UP');\n break;\n\n default:\n }\n };\n\n return handleKeyDown;\n};\n","import * as React from 'react';\n\nimport {\n useDrag,\n useDrop,\n type HandlerManager,\n type ConnectDragSource,\n type ConnectDropTarget,\n type ConnectDragPreview,\n type DragSourceMonitor,\n} from 'react-dnd';\n\nimport {\n useKeyboardDragAndDrop,\n type UseKeyboardDragAndDropCallbacks,\n} from './useKeyboardDragAndDrop';\n\nimport type { Data } from '@strapi/types';\n\nconst DIRECTIONS = {\n UPWARD: 'upward',\n DOWNWARD: 'downward',\n} as const;\n\nconst DROP_SENSITIVITY = {\n REGULAR: 'regular',\n IMMEDIATE: 'immediate',\n} as const;\n\ninterface UseDragAndDropOptions<\n TIndex extends number | Array<number> = number,\n TItem extends { index: TIndex } = { index: TIndex },\n> extends UseKeyboardDragAndDropCallbacks<TIndex> {\n type?: string;\n index: TIndex;\n item?: TItem;\n onStart?: () => void;\n onEnd?: () => void;\n dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];\n}\n\ntype Identifier = ReturnType<HandlerManager['getHandlerId']>;\n\ntype UseDragAndDropReturn<E extends Element = HTMLElement> = [\n props: {\n handlerId: Identifier;\n isDragging: boolean;\n handleKeyDown: <E extends Element>(event: React.KeyboardEvent<E>) => void;\n isOverDropTarget: boolean;\n direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;\n },\n objectRef: React.RefObject<E>,\n dropRef: ConnectDropTarget,\n dragRef: ConnectDragSource,\n dragPreviewRef: ConnectDragPreview,\n];\n\ntype DropCollectedProps = {\n handlerId: Identifier;\n isOver: boolean;\n};\n\n/**\n * A utility hook abstracting the general drag and drop hooks from react-dnd.\n * Centralising the same behaviours and by default offering keyboard support.\n */\nconst useDragAndDrop = <\n TIndex extends number | Array<number>,\n TItem extends { index: TIndex; id?: Data.ID; [key: string]: unknown } = {\n index: TIndex;\n [key: string]: unknown;\n },\n E extends Element = HTMLElement,\n>(\n active: boolean,\n {\n type = 'STRAPI_DND',\n index,\n item,\n onStart,\n onEnd,\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n dropSensitivity = DROP_SENSITIVITY.REGULAR,\n }: UseDragAndDropOptions<TIndex, TItem>\n): UseDragAndDropReturn<E> => {\n const objectRef = React.useRef<E>(null);\n\n const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({\n accept: type,\n collect(monitor) {\n return {\n handlerId: monitor.getHandlerId(),\n isOver: monitor.isOver({ shallow: true }),\n };\n },\n drop(item) {\n const draggedIndex = item.index;\n const newIndex = index;\n\n if (isOver && onDropItem) {\n onDropItem(draggedIndex, newIndex);\n }\n },\n hover(item, monitor) {\n if (!objectRef.current || !onMoveItem) {\n return;\n }\n\n const dragIndex = item.index;\n const newIndex = index;\n\n const hoverBoundingRect = objectRef.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (!clientOffset) return;\n\n const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;\n if (typeof dragIndex === 'number' && typeof newIndex === 'number') {\n if (dragIndex === newIndex) {\n // Don't replace items with themselves\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n\n // Time to actually perform the action\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n } else {\n // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]\n if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {\n // Indices comparison to find item position in nested list\n const minLength = Math.min(dragIndex.length, newIndex.length);\n let areEqual = true;\n let isLessThan = false;\n let isGreaterThan = false;\n\n for (let i = 0; i < minLength; i++) {\n if (dragIndex[i] < newIndex[i]) {\n isLessThan = true;\n areEqual = false;\n break;\n } else if (dragIndex[i] > newIndex[i]) {\n isGreaterThan = true;\n areEqual = false;\n break;\n }\n }\n\n // Don't replace items with themselves\n if (areEqual && dragIndex.length === newIndex.length) {\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n }\n\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n }\n },\n });\n\n const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {\n if (\n monitor &&\n monitor.isDragging() &&\n !monitor.didDrop() &&\n monitor.getInitialClientOffset() &&\n monitor.getClientOffset()\n ) {\n const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;\n\n if (deltaY > 0) return DIRECTIONS.UPWARD;\n\n if (deltaY < 0) return DIRECTIONS.DOWNWARD;\n\n return null;\n }\n\n return null;\n };\n\n const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({\n type,\n item() {\n if (onStart) {\n onStart();\n }\n\n /**\n * This will be attached and it helps define the preview sizes\n * when a component is flexy e.g. Relations\n */\n const { width } = objectRef.current?.getBoundingClientRect() ?? {};\n\n return { index, width, ...item };\n },\n end() {\n if (onEnd) {\n onEnd();\n }\n },\n canDrag: active,\n /**\n * This is useful when the item is in a virtualized list.\n * However, if we don't have an ID then we want the libraries\n * defaults to take care of this.\n */\n isDragging: item?.id\n ? (monitor) => {\n return item.id === monitor.getItem().id;\n }\n : undefined,\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n initialOffset: monitor.getInitialClientOffset(),\n currentOffset: monitor.getClientOffset(),\n direction: getDragDirection(monitor),\n }),\n });\n\n const handleKeyDown = useKeyboardDragAndDrop(active, index, {\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n });\n\n return [\n { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },\n objectRef,\n dropRef,\n dragRef,\n dragPreviewRef,\n ];\n};\n\nexport {\n useDragAndDrop,\n UseDragAndDropReturn,\n UseDragAndDropOptions,\n DIRECTIONS,\n DROP_SENSITIVITY,\n};\n"],"names":["item"],"mappings":";;AAAO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AACV;ACQa,MAAA,yBAAyB,CACpC,QACA,OACA,EAAE,UAAU,YAAY,YAAY,iBACjC;AACH,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAElD,QAAA,aAAa,CAAC,aAA4B;AAC9C,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACI,QAAA,OAAO,UAAU,YAAY,YAAY;AAC3C,UAAI,aAAa,MAAM;AACT,mBAAA,QAAQ,GAAc,KAAK;AAAA,MAAA,WAC9B,aAAa,QAAQ;AAClB,mBAAA,QAAQ,GAAc,KAAK;AAAA,MACzC;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,kBAAkB,MAAM;AAC5B,QAAI,YAAY;AACd,UAAI,YAAY;AACd,mBAAW,KAAK;AAAA,MAClB;AACA,oBAAc,KAAK;AAAA,IAAA,OACd;AACL,UAAI,YAAY;AACd,mBAAW,KAAK;AAAA,MAClB;AACA,oBAAc,IAAI;AAAA,IACpB;AAAA,EAAA;AAGF,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd,oBAAc,KAAK;AAEnB,UAAI,UAAU;AACZ,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAoB,MAA8B;AACtE,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,QAAI,EAAE,QAAQ,SAAS,CAAC,YAAY;AAClC;AAAA,IACF;AAEA,MAAE,eAAe;AAEjB,YAAQ,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACa;AAChB;AAAA,MAEF,KAAK;AACU;AACb;AAAA,MAEF,KAAK;AAAA,MACL,KAAK;AACH,mBAAW,MAAM;AACjB;AAAA,MAEF,KAAK;AAAA,MACL,KAAK;AACH,mBAAW,IAAI;AACf;AAAA,IAGJ;AAAA,EAAA;AAGK,SAAA;AACT;AC5EA,MAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,mBAAmB;AAAA,EACvB,SAAS;AAAA,EACT,WAAW;AACb;AAuCM,MAAA,iBAAiB,CAQrB,QACA;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB,iBAAiB;AACrC,MAC4B;AACtB,QAAA,YAAY,MAAM,OAAU,IAAI;AAEtC,QAAM,CAAC,EAAE,WAAW,OAAU,GAAA,OAAO,IAAI,QAAyC;AAAA,IAChF,QAAQ;AAAA,IACR,QAAQ,SAAS;AACR,aAAA;AAAA,QACL,WAAW,QAAQ,aAAa;AAAA,QAChC,QAAQ,QAAQ,OAAO,EAAE,SAAS,MAAM;AAAA,MAAA;AAAA,IAE5C;AAAA,IACA,KAAKA,OAAM;AACT,YAAM,eAAeA,MAAK;AAC1B,YAAM,WAAW;AAEjB,UAAI,UAAU,YAAY;AACxB,mBAAW,cAAc,QAAQ;AAAA,MACnC;AAAA,IACF;AAAA,IACA,MAAMA,OAAM,SAAS;AACnB,UAAI,CAAC,UAAU,WAAW,CAAC,YAAY;AACrC;AAAA,MACF;AAEA,YAAM,YAAYA,MAAK;AACvB,YAAM,WAAW;AAEX,YAAA,oBAAoB,UAAU,SAAS,sBAAsB;AACnE,YAAM,gBAAgB,kBAAkB,SAAS,kBAAkB,OAAO;AACpE,YAAA,eAAe,QAAQ;AAC7B,UAAI,CAAC;AAAc;AAEnB,YAAM,eAAe,gBAAgB,aAAa,IAAI,kBAAkB;AACxE,UAAI,OAAO,cAAc,YAAY,OAAO,aAAa,UAAU;AACjE,YAAI,cAAc,UAAU;AAE1B;AAAA,QACF;AAEI,YAAA,oBAAoB,iBAAiB,SAAS;AAE5C,cAAA,YAAY,YAAY,eAAe,cAAc;AACvD;AAAA,UACF;AAGI,cAAA,YAAY,YAAY,eAAe,cAAc;AACvD;AAAA,UACF;AAAA,QACF;AAGA,mBAAW,UAAU,SAAS;AAC9BA,cAAK,QAAQ;AAAA,MAAA,OACR;AAEL,YAAI,MAAM,QAAQ,SAAS,KAAK,MAAM,QAAQ,QAAQ,GAAG;AAEvD,gBAAM,YAAY,KAAK,IAAI,UAAU,QAAQ,SAAS,MAAM;AAC5D,cAAI,WAAW;AACf,cAAI,aAAa;AACjB,cAAI,gBAAgB;AAEpB,mBAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,gBAAI,UAAU,CAAC,IAAI,SAAS,CAAC,GAAG;AACjB,2BAAA;AACF,yBAAA;AACX;AAAA,uBACS,UAAU,CAAC,IAAI,SAAS,CAAC,GAAG;AACrB,8BAAA;AACL,yBAAA;AACX;AAAA,YACF;AAAA,UACF;AAGA,cAAI,YAAY,UAAU,WAAW,SAAS,QAAQ;AACpD;AAAA,UACF;AAEI,cAAA,oBAAoB,iBAAiB,SAAS;AAEhD,gBAAI,cAAc,CAAC,iBAAiB,eAAe,cAAc;AAC/D;AAAA,YACF;AAGA,gBAAI,iBAAiB,CAAC,cAAc,eAAe,cAAc;AAC/D;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAEA,mBAAW,UAAU,SAAS;AAC9BA,cAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAAA,EAAA,CACD;AAEK,QAAA,mBAAmB,CAAC,YAA4C;AACpE,QACE,WACA,QAAQ,WAAW,KACnB,CAAC,QAAQ,QAAQ,KACjB,QAAQ,uBAAA,KACR,QAAQ,mBACR;AACA,YAAM,SAAS,QAAQ,yBAA0B,IAAI,QAAQ,gBAAmB,EAAA;AAEhF,UAAI,SAAS;AAAG,eAAO,WAAW;AAElC,UAAI,SAAS;AAAG,eAAO,WAAW;AAE3B,aAAA;AAAA,IACT;AAEO,WAAA;AAAA,EAAA;AAGH,QAAA,CAAC,EAAE,YAAY,UAAA,GAAa,SAAS,cAAc,IAAI,QAAQ;AAAA,IACnE;AAAA,IACA,OAAO;AACL,UAAI,SAAS;AACH;MACV;AAMA,YAAM,EAAE,MAAM,IAAI,UAAU,SAAS,2BAA2B;AAEhE,aAAO,EAAE,OAAO,OAAO,GAAG,KAAK;AAAA,IACjC;AAAA,IACA,MAAM;AACJ,UAAI,OAAO;AACH;MACR;AAAA,IACF;AAAA,IACA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,YAAY,MAAM,KACd,CAAC,YAAY;AACX,aAAO,KAAK,OAAO,QAAQ,QAAA,EAAU;AAAA,IAEvC,IAAA;AAAA,IACJ,SAAS,CAAC,aAAa;AAAA,MACrB,YAAY,QAAQ,WAAW;AAAA,MAC/B,eAAe,QAAQ,uBAAuB;AAAA,MAC9C,eAAe,QAAQ,gBAAgB;AAAA,MACvC,WAAW,iBAAiB,OAAO;AAAA,IAAA;AAAA,EACrC,CACD;AAEK,QAAA,gBAAgB,uBAAuB,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AAAA,IACL,EAAE,WAAW,YAAY,eAAe,kBAAkB,QAAQ,UAAU;AAAA,IAC5E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
|
1
|
+
{"version":3,"file":"useDragAndDrop-DJ6jqvZN.mjs","sources":["../../admin/src/constants/dragAndDrop.ts","../../admin/src/hooks/useKeyboardDragAndDrop.ts","../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["export const ItemTypes = {\n COMPONENT: 'component',\n EDIT_FIELD: 'editField',\n FIELD: 'field',\n DYNAMIC_ZONE: 'dynamicZone',\n RELATION: 'relation',\n BLOCKS: 'blocks',\n} as const;\n","import * as React from 'react';\n\nexport type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {\n onCancel?: (index: TIndex) => void;\n onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;\n onGrabItem?: (index: TIndex) => void;\n onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;\n};\n\n/**\n * Utility hook designed to implement keyboard accessibile drag and drop by\n * returning an onKeyDown handler to be passed to the drag icon button.\n *\n * @internal - You should use `useDragAndDrop` instead.\n */\nexport const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(\n active: boolean,\n index: TIndex,\n { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>\n) => {\n const [isSelected, setIsSelected] = React.useState(false);\n\n const handleMove = (movement: 'UP' | 'DOWN') => {\n if (!isSelected) {\n return;\n }\n if (typeof index === 'number' && onMoveItem) {\n if (movement === 'UP') {\n onMoveItem((index - 1) as TIndex, index);\n } else if (movement === 'DOWN') {\n onMoveItem((index + 1) as TIndex, index);\n }\n }\n };\n\n const handleDragClick = () => {\n if (isSelected) {\n if (onDropItem) {\n onDropItem(index);\n }\n setIsSelected(false);\n } else {\n if (onGrabItem) {\n onGrabItem(index);\n }\n setIsSelected(true);\n }\n };\n\n const handleCancel = () => {\n if (isSelected) {\n setIsSelected(false);\n\n if (onCancel) {\n onCancel(index);\n }\n }\n };\n\n const handleKeyDown = <E extends Element>(e: React.KeyboardEvent<E>) => {\n if (!active) {\n return;\n }\n\n if (e.key === 'Tab' && !isSelected) {\n return;\n }\n\n e.preventDefault();\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n handleDragClick();\n break;\n\n case 'Escape':\n handleCancel();\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n handleMove('DOWN');\n break;\n\n case 'ArrowUp':\n case 'ArrowLeft':\n handleMove('UP');\n break;\n\n default:\n }\n };\n\n return handleKeyDown;\n};\n","import * as React from 'react';\n\nimport {\n useDrag,\n useDrop,\n type HandlerManager,\n type ConnectDragSource,\n type ConnectDropTarget,\n type ConnectDragPreview,\n type DragSourceMonitor,\n} from 'react-dnd';\n\nimport {\n useKeyboardDragAndDrop,\n type UseKeyboardDragAndDropCallbacks,\n} from './useKeyboardDragAndDrop';\n\nimport type { Data } from '@strapi/types';\n\nconst DIRECTIONS = {\n UPWARD: 'upward',\n DOWNWARD: 'downward',\n} as const;\n\nconst DROP_SENSITIVITY = {\n REGULAR: 'regular',\n IMMEDIATE: 'immediate',\n} as const;\n\ninterface UseDragAndDropOptions<\n TIndex extends number | Array<number> = number,\n TItem extends { index: TIndex } = { index: TIndex },\n> extends UseKeyboardDragAndDropCallbacks<TIndex> {\n type?: string;\n index: TIndex;\n item?: TItem;\n onStart?: () => void;\n onEnd?: () => void;\n dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];\n}\n\ntype Identifier = ReturnType<HandlerManager['getHandlerId']>;\n\ntype UseDragAndDropReturn<E extends Element = HTMLElement> = [\n props: {\n handlerId: Identifier;\n isDragging: boolean;\n handleKeyDown: <E extends Element>(event: React.KeyboardEvent<E>) => void;\n isOverDropTarget: boolean;\n direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;\n },\n objectRef: React.RefObject<E>,\n dropRef: ConnectDropTarget,\n dragRef: ConnectDragSource,\n dragPreviewRef: ConnectDragPreview,\n];\n\ntype DropCollectedProps = {\n handlerId: Identifier;\n isOver: boolean;\n};\n\n/**\n * A utility hook abstracting the general drag and drop hooks from react-dnd.\n * Centralising the same behaviours and by default offering keyboard support.\n */\nconst useDragAndDrop = <\n TIndex extends number | Array<number>,\n TItem extends { index: TIndex; id?: Data.ID; [key: string]: unknown } = {\n index: TIndex;\n [key: string]: unknown;\n },\n E extends Element = HTMLElement,\n>(\n active: boolean,\n {\n type = 'STRAPI_DND',\n index,\n item,\n onStart,\n onEnd,\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n dropSensitivity = DROP_SENSITIVITY.REGULAR,\n }: UseDragAndDropOptions<TIndex, TItem>\n): UseDragAndDropReturn<E> => {\n const objectRef = React.useRef<E>(null);\n\n const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({\n accept: type,\n collect(monitor) {\n return {\n handlerId: monitor.getHandlerId(),\n isOver: monitor.isOver({ shallow: true }),\n };\n },\n drop(item) {\n const draggedIndex = item.index;\n const newIndex = index;\n\n if (isOver && onDropItem) {\n onDropItem(draggedIndex, newIndex);\n }\n },\n hover(item, monitor) {\n if (!objectRef.current || !onMoveItem) {\n return;\n }\n\n const dragIndex = item.index;\n const newIndex = index;\n\n const hoverBoundingRect = objectRef.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (!clientOffset) return;\n\n const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;\n if (typeof dragIndex === 'number' && typeof newIndex === 'number') {\n if (dragIndex === newIndex) {\n // Don't replace items with themselves\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n\n // Time to actually perform the action\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n } else {\n // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]\n if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {\n // Indices comparison to find item position in nested list\n const minLength = Math.min(dragIndex.length, newIndex.length);\n let areEqual = true;\n let isLessThan = false;\n let isGreaterThan = false;\n\n for (let i = 0; i < minLength; i++) {\n if (dragIndex[i] < newIndex[i]) {\n isLessThan = true;\n areEqual = false;\n break;\n } else if (dragIndex[i] > newIndex[i]) {\n isGreaterThan = true;\n areEqual = false;\n break;\n }\n }\n\n // Don't replace items with themselves\n if (areEqual && dragIndex.length === newIndex.length) {\n return;\n }\n\n if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n // Dragging downwards\n if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // Dragging upwards\n if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {\n return;\n }\n }\n }\n\n onMoveItem(newIndex, dragIndex);\n item.index = newIndex;\n }\n },\n });\n\n const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {\n if (\n monitor &&\n monitor.isDragging() &&\n !monitor.didDrop() &&\n monitor.getInitialClientOffset() &&\n monitor.getClientOffset()\n ) {\n const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;\n\n if (deltaY > 0) return DIRECTIONS.UPWARD;\n\n if (deltaY < 0) return DIRECTIONS.DOWNWARD;\n\n return null;\n }\n\n return null;\n };\n\n const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({\n type,\n item() {\n if (onStart) {\n onStart();\n }\n\n /**\n * This will be attached and it helps define the preview sizes\n * when a component is flexy e.g. Relations\n */\n const { width } = objectRef.current?.getBoundingClientRect() ?? {};\n\n return { index, width, ...item };\n },\n end() {\n if (onEnd) {\n onEnd();\n }\n },\n canDrag: active,\n /**\n * This is useful when the item is in a virtualized list.\n * However, if we don't have an ID then we want the libraries\n * defaults to take care of this.\n */\n isDragging: item?.id\n ? (monitor) => {\n return item.id === monitor.getItem().id;\n }\n : undefined,\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n initialOffset: monitor.getInitialClientOffset(),\n currentOffset: monitor.getClientOffset(),\n direction: getDragDirection(monitor),\n }),\n });\n\n const handleKeyDown = useKeyboardDragAndDrop(active, index, {\n onGrabItem,\n onDropItem,\n onCancel,\n onMoveItem,\n });\n\n return [\n { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },\n objectRef,\n dropRef,\n dragRef,\n dragPreviewRef,\n ];\n};\n\nexport {\n useDragAndDrop,\n UseDragAndDropReturn,\n UseDragAndDropOptions,\n DIRECTIONS,\n DROP_SENSITIVITY,\n};\n"],"names":["item"],"mappings":"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"}
|
package/dist/admin/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
3
|
-
const index = require("../_chunks/index-
|
3
|
+
const index = require("../_chunks/index-CptTdHNy.js");
|
4
4
|
require("@strapi/icons");
|
5
5
|
exports.DocumentRBAC = index.DocumentRBAC;
|
6
6
|
exports.buildValidParams = index.buildValidParams;
|
package/dist/admin/index.mjs
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { type DocumentActionDescription } from './pages/EditView/components/DocumentActions';
|
1
|
+
import { type DocumentActionPosition, type DocumentActionDescription } from './pages/EditView/components/DocumentActions';
|
2
2
|
import { type HeaderActionDescription } from './pages/EditView/components/Header';
|
3
3
|
import { type PanelDescription } from './pages/EditView/components/Panels';
|
4
4
|
import { type BulkActionDescription } from './pages/ListView/components/BulkActions/Actions';
|
@@ -60,6 +60,7 @@ interface DocumentActionProps extends EditViewContext {
|
|
60
60
|
}
|
61
61
|
interface DocumentActionComponent extends DescriptionComponent<DocumentActionProps, DocumentActionDescription> {
|
62
62
|
type?: 'clone' | 'configure-the-view' | 'delete' | 'discard' | 'edit' | 'edit-the-model' | 'history' | 'publish' | 'unpublish' | 'update';
|
63
|
+
position?: DocumentActionDescription['position'];
|
63
64
|
}
|
64
65
|
interface HeaderActionProps extends EditViewContext {
|
65
66
|
}
|
@@ -123,7 +124,7 @@ declare class ContentManagerPlugin {
|
|
123
124
|
(panels: PanelComponent[]): void;
|
124
125
|
};
|
125
126
|
getBulkActions: () => BulkActionComponent[];
|
126
|
-
getDocumentActions: () => DocumentActionComponent[];
|
127
|
+
getDocumentActions: (position?: DocumentActionPosition) => DocumentActionComponent[];
|
127
128
|
getEditViewSidePanels: () => PanelComponent[];
|
128
129
|
getHeaderActions: () => HeaderActionComponent[];
|
129
130
|
};
|
@@ -73,4 +73,4 @@ interface DocumentActionsMenuProps {
|
|
73
73
|
declare const DocumentActionsMenu: ({ actions, children, label, variant, }: DocumentActionsMenuProps) => import("react/jsx-runtime").JSX.Element;
|
74
74
|
declare const DEFAULT_ACTIONS: DocumentActionComponent[];
|
75
75
|
export { DocumentActions, DocumentActionsMenu, DocumentActionButton, DEFAULT_ACTIONS };
|
76
|
-
export type { DocumentActionDescription, DialogOptions, NotificationOptions, ModalOptions };
|
76
|
+
export type { DocumentActionDescription, DocumentActionPosition, DialogOptions, NotificationOptions, ModalOptions, };
|
@@ -1,6 +1,3 @@
|
|
1
|
-
/**
|
2
|
-
* Related to fetching the actual content of a collection type or single type.
|
3
|
-
*/
|
4
1
|
import type { Clone, Create, Delete, Find, FindOne, BulkDelete, BulkPublish, BulkUnpublish, Discard, CountDraftRelations, Publish, Unpublish, Update } from '../../../shared/contracts/collection-types';
|
5
2
|
declare const useAutoCloneDocumentMutation: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseMutation<import("@reduxjs/toolkit/query").MutationDefinition<Clone.Params & {
|
6
3
|
query?: string | undefined;
|
package/dist/server/index.js
CHANGED
@@ -10,8 +10,7 @@ const qs = require("qs");
|
|
10
10
|
const slugify = require("@sindresorhus/slugify");
|
11
11
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
12
12
|
function _interopNamespace(e) {
|
13
|
-
if (e && e.__esModule)
|
14
|
-
return e;
|
13
|
+
if (e && e.__esModule) return e;
|
15
14
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
16
15
|
if (e) {
|
17
16
|
for (const k in e) {
|
@@ -167,8 +166,7 @@ const createServiceUtils = ({ strapi: strapi2 }) => {
|
|
167
166
|
};
|
168
167
|
const getRelationRestoreValue = async (versionRelationData, attribute) => {
|
169
168
|
if (Array.isArray(versionRelationData)) {
|
170
|
-
if (versionRelationData.length === 0)
|
171
|
-
return versionRelationData;
|
169
|
+
if (versionRelationData.length === 0) return versionRelationData;
|
172
170
|
const existingAndMissingRelations = await Promise.all(
|
173
171
|
versionRelationData.map((relation) => {
|
174
172
|
return strapi2.documents(attribute.target).findOne({
|
@@ -203,8 +201,7 @@ const createServiceUtils = ({ strapi: strapi2 }) => {
|
|
203
201
|
const getDefaultLocale = async () => localesService ? localesService.getDefaultLocale() : null;
|
204
202
|
const isLocalizedContentType = (model) => i18nContentTypeService ? i18nContentTypeService.isLocalizedContentType(model) : false;
|
205
203
|
const getLocaleDictionary = async () => {
|
206
|
-
if (!localesService)
|
207
|
-
return {};
|
204
|
+
if (!localesService) return {};
|
208
205
|
const locales = await localesService.find() || [];
|
209
206
|
return locales.reduce(
|
210
207
|
(acc, locale) => {
|
@@ -740,13 +737,6 @@ const getFeature$1 = () => {
|
|
740
737
|
};
|
741
738
|
};
|
742
739
|
const history = getFeature$1();
|
743
|
-
const register = async ({ strapi: strapi2 }) => {
|
744
|
-
await history.register?.({ strapi: strapi2 });
|
745
|
-
};
|
746
|
-
const ALLOWED_WEBHOOK_EVENTS = {
|
747
|
-
ENTRY_PUBLISH: "entry.publish",
|
748
|
-
ENTRY_UNPUBLISH: "entry.unpublish"
|
749
|
-
};
|
750
740
|
const FEATURE_ID = "preview";
|
751
741
|
const info = { pluginName: "content-manager", type: "admin" };
|
752
742
|
const previewRouter = {
|
@@ -793,6 +783,10 @@ const validatePreviewUrl = async (strapi2, uid2, params) => {
|
|
793
783
|
}
|
794
784
|
newParams.documentId = doc?.documentId;
|
795
785
|
}
|
786
|
+
if (!newParams.status) {
|
787
|
+
const isDPEnabled = model?.options?.draftAndPublish;
|
788
|
+
newParams.status = isDPEnabled ? "draft" : "published";
|
789
|
+
}
|
796
790
|
return newParams;
|
797
791
|
};
|
798
792
|
const createPreviewController = () => {
|
@@ -838,8 +832,48 @@ const createPreviewService = ({ strapi: strapi2 }) => {
|
|
838
832
|
}
|
839
833
|
};
|
840
834
|
};
|
835
|
+
const extendMiddlewareConfiguration = (middleware = { name: "", config: {} }) => {
|
836
|
+
const middlewares = strapi.config.get("middlewares");
|
837
|
+
const configuredMiddlewares = middlewares.map((currentMiddleware) => {
|
838
|
+
if (currentMiddleware === middleware.name) {
|
839
|
+
return middleware;
|
840
|
+
}
|
841
|
+
if (currentMiddleware.name === middleware.name) {
|
842
|
+
return fp.mergeWith(
|
843
|
+
(objValue, srcValue) => {
|
844
|
+
if (Array.isArray(objValue)) {
|
845
|
+
return objValue.concat(srcValue);
|
846
|
+
}
|
847
|
+
return void 0;
|
848
|
+
},
|
849
|
+
currentMiddleware,
|
850
|
+
middleware
|
851
|
+
);
|
852
|
+
}
|
853
|
+
return currentMiddleware;
|
854
|
+
});
|
855
|
+
strapi.config.set("middlewares", configuredMiddlewares);
|
856
|
+
};
|
841
857
|
const createPreviewConfigService = ({ strapi: strapi2 }) => {
|
842
858
|
return {
|
859
|
+
register() {
|
860
|
+
if (!this.isEnabled()) {
|
861
|
+
return;
|
862
|
+
}
|
863
|
+
const config = strapi2.config.get("admin.preview");
|
864
|
+
if (config.config?.allowedOrigins) {
|
865
|
+
extendMiddlewareConfiguration({
|
866
|
+
name: "strapi::security",
|
867
|
+
config: {
|
868
|
+
contentSecurityPolicy: {
|
869
|
+
directives: {
|
870
|
+
"frame-src": config.config.allowedOrigins
|
871
|
+
}
|
872
|
+
}
|
873
|
+
}
|
874
|
+
});
|
875
|
+
}
|
876
|
+
},
|
843
877
|
isEnabled() {
|
844
878
|
const config = strapi2.config.get("admin.preview");
|
845
879
|
if (!config) {
|
@@ -885,10 +919,12 @@ const getFeature = () => {
|
|
885
919
|
return {};
|
886
920
|
}
|
887
921
|
return {
|
888
|
-
|
889
|
-
console.log("Bootstrapping preview server");
|
922
|
+
register() {
|
890
923
|
const config = getService(strapi, "preview-config");
|
891
924
|
config.validate();
|
925
|
+
config.register();
|
926
|
+
},
|
927
|
+
bootstrap() {
|
892
928
|
},
|
893
929
|
routes: routes$1,
|
894
930
|
controllers: controllers$1,
|
@@ -896,6 +932,14 @@ const getFeature = () => {
|
|
896
932
|
};
|
897
933
|
};
|
898
934
|
const preview = getFeature();
|
935
|
+
const register = async ({ strapi: strapi2 }) => {
|
936
|
+
await history.register?.({ strapi: strapi2 });
|
937
|
+
await preview.register?.({ strapi: strapi2 });
|
938
|
+
};
|
939
|
+
const ALLOWED_WEBHOOK_EVENTS = {
|
940
|
+
ENTRY_PUBLISH: "entry.publish",
|
941
|
+
ENTRY_UNPUBLISH: "entry.unpublish"
|
942
|
+
};
|
899
943
|
const bootstrap = async () => {
|
900
944
|
Object.entries(ALLOWED_WEBHOOK_EVENTS).forEach(([key, value]) => {
|
901
945
|
strapi.get("webhookStore").addAllowedEvent(key, value);
|
@@ -1459,8 +1503,7 @@ const isSortable = (schema, name) => {
|
|
1459
1503
|
if (!___default.default.has(schema.attributes, name)) {
|
1460
1504
|
return false;
|
1461
1505
|
}
|
1462
|
-
if (schema.modelType === "component" && name === "id")
|
1463
|
-
return false;
|
1506
|
+
if (schema.modelType === "component" && name === "id") return false;
|
1464
1507
|
const attribute = schema.attributes[name];
|
1465
1508
|
if (NON_SORTABLES.includes(attribute.type)) {
|
1466
1509
|
return false;
|
@@ -1605,8 +1648,7 @@ const createDefaultSettings = async (schema) => {
|
|
1605
1648
|
};
|
1606
1649
|
};
|
1607
1650
|
const syncSettings = async (configuration, schema) => {
|
1608
|
-
if (fp.isEmpty(configuration.settings))
|
1609
|
-
return createDefaultSettings(schema);
|
1651
|
+
if (fp.isEmpty(configuration.settings)) return createDefaultSettings(schema);
|
1610
1652
|
const defaultField = getDefaultMainField(schema);
|
1611
1653
|
const { mainField = defaultField, defaultSortBy = defaultField } = configuration.settings || {};
|
1612
1654
|
return {
|
@@ -1782,8 +1824,7 @@ const excludeNotCreatableFields = (uid2, permissionChecker2) => (body, path = []
|
|
1782
1824
|
}
|
1783
1825
|
switch (attribute.type) {
|
1784
1826
|
case "relation": {
|
1785
|
-
if (canCreate(attributePath))
|
1786
|
-
return body2;
|
1827
|
+
if (canCreate(attributePath)) return body2;
|
1787
1828
|
return fp.set(attributePath, { set: [] }, body2);
|
1788
1829
|
}
|
1789
1830
|
case "component": {
|
@@ -1793,8 +1834,7 @@ const excludeNotCreatableFields = (uid2, permissionChecker2) => (body, path = []
|
|
1793
1834
|
]);
|
1794
1835
|
}
|
1795
1836
|
default: {
|
1796
|
-
if (canCreate(attributePath))
|
1797
|
-
return body2;
|
1837
|
+
if (canCreate(attributePath)) return body2;
|
1798
1838
|
return fp.set(attributePath, null, body2);
|
1799
1839
|
}
|
1800
1840
|
}
|
@@ -2587,8 +2627,7 @@ const validateStatus = (sourceUid, status) => {
|
|
2587
2627
|
const sourceModel = strapi.getModel(sourceUid);
|
2588
2628
|
const isDP = strapiUtils.contentTypes.hasDraftAndPublish;
|
2589
2629
|
const isSourceDP = isDP(sourceModel);
|
2590
|
-
if (!isSourceDP)
|
2591
|
-
return { status: void 0 };
|
2630
|
+
if (!isSourceDP) return { status: void 0 };
|
2592
2631
|
switch (status) {
|
2593
2632
|
case "published":
|
2594
2633
|
return { status: "published" };
|
@@ -3233,18 +3272,15 @@ async function syncMetadatas(configuration, schema) {
|
|
3233
3272
|
___default.default.set(updatedMeta, ["list", "searchable"], false);
|
3234
3273
|
___default.default.set(acc, [key], updatedMeta);
|
3235
3274
|
}
|
3236
|
-
if (!___default.default.has(edit, "mainField"))
|
3237
|
-
return acc;
|
3275
|
+
if (!___default.default.has(edit, "mainField")) return acc;
|
3238
3276
|
if (!isRelation$1(attr)) {
|
3239
3277
|
___default.default.set(updatedMeta, "edit", ___default.default.omit(edit, ["mainField"]));
|
3240
3278
|
___default.default.set(acc, [key], updatedMeta);
|
3241
3279
|
return acc;
|
3242
3280
|
}
|
3243
|
-
if (edit.mainField === "id")
|
3244
|
-
return acc;
|
3281
|
+
if (edit.mainField === "id") return acc;
|
3245
3282
|
const targetSchema = getTargetSchema(attr.targetModel);
|
3246
|
-
if (!targetSchema)
|
3247
|
-
return acc;
|
3283
|
+
if (!targetSchema) return acc;
|
3248
3284
|
if (!isSortable(targetSchema, edit.mainField) && !isListable(targetSchema, edit.mainField)) {
|
3249
3285
|
___default.default.set(updatedMeta, ["edit", "mainField"], getDefaultMainField(targetSchema));
|
3250
3286
|
___default.default.set(acc, [key], updatedMeta);
|
@@ -3289,8 +3325,7 @@ function createDefaultEditLayout(schema) {
|
|
3289
3325
|
return appendToEditLayout([], keys2, schema);
|
3290
3326
|
}
|
3291
3327
|
function syncLayouts(configuration, schema) {
|
3292
|
-
if (___default.default.isEmpty(configuration.layouts))
|
3293
|
-
return createDefaultLayouts(schema);
|
3328
|
+
if (___default.default.isEmpty(configuration.layouts)) return createDefaultLayouts(schema);
|
3294
3329
|
const { list = [], editRelations = [], edit = [] } = configuration.layouts || {};
|
3295
3330
|
let cleanList = list.filter((attr) => isListable(schema, attr));
|
3296
3331
|
const cleanEditRelations = editRelations.filter(
|
@@ -3301,8 +3336,7 @@ function syncLayouts(configuration, schema) {
|
|
3301
3336
|
for (const row of edit) {
|
3302
3337
|
const newRow = [];
|
3303
3338
|
for (const el of row) {
|
3304
|
-
if (!hasEditableAttribute(schema, el.name))
|
3305
|
-
continue;
|
3339
|
+
if (!hasEditableAttribute(schema, el.name)) continue;
|
3306
3340
|
const { hasFieldSize } = getService$2("field-sizes");
|
3307
3341
|
const fieldType = hasFieldSize(schema.attributes[el.name].customField) ? schema.attributes[el.name].customField : schema.attributes[el.name].type;
|
3308
3342
|
if (!isAllowedFieldSize(fieldType, el.size)) {
|
@@ -3333,8 +3367,7 @@ function syncLayouts(configuration, schema) {
|
|
3333
3367
|
};
|
3334
3368
|
}
|
3335
3369
|
const appendToEditLayout = (layout = [], keysToAppend, schema) => {
|
3336
|
-
if (keysToAppend.length === 0)
|
3337
|
-
return layout;
|
3370
|
+
if (keysToAppend.length === 0) return layout;
|
3338
3371
|
let currentRowIndex = Math.max(layout.length - 1, 0);
|
3339
3372
|
if (!layout[currentRowIndex]) {
|
3340
3373
|
layout[currentRowIndex] = [];
|
@@ -4325,8 +4358,7 @@ const documentMetadata = ({ strapi: strapi2 }) => ({
|
|
4325
4358
|
const matchStatus = status === "published" ? v.publishedAt !== null : v.publishedAt === null;
|
4326
4359
|
return matchLocale && matchStatus;
|
4327
4360
|
});
|
4328
|
-
if (!availableStatus)
|
4329
|
-
return availableStatus;
|
4361
|
+
if (!availableStatus) return availableStatus;
|
4330
4362
|
return fp.pick(AVAILABLE_STATUS_FIELDS, availableStatus);
|
4331
4363
|
},
|
4332
4364
|
/**
|
@@ -4336,8 +4368,7 @@ const documentMetadata = ({ strapi: strapi2 }) => ({
|
|
4336
4368
|
* @returns
|
4337
4369
|
*/
|
4338
4370
|
async getManyAvailableStatus(uid2, documents) {
|
4339
|
-
if (!documents.length)
|
4340
|
-
return [];
|
4371
|
+
if (!documents.length) return [];
|
4341
4372
|
const status = documents[0].publishedAt !== null ? "published" : "draft";
|
4342
4373
|
const locale = documents[0]?.locale;
|
4343
4374
|
const otherStatus = status === "published" ? "draft" : "published";
|
@@ -4364,10 +4395,8 @@ const documentMetadata = ({ strapi: strapi2 }) => ({
|
|
4364
4395
|
} else if (otherVersion) {
|
4365
4396
|
draftVersion = otherVersion;
|
4366
4397
|
}
|
4367
|
-
if (!draftVersion)
|
4368
|
-
|
4369
|
-
if (!publishedVersion)
|
4370
|
-
return CONTENT_MANAGER_STATUS.DRAFT;
|
4398
|
+
if (!draftVersion) return CONTENT_MANAGER_STATUS.PUBLISHED;
|
4399
|
+
if (!publishedVersion) return CONTENT_MANAGER_STATUS.DRAFT;
|
4371
4400
|
const isDraftModified = getIsVersionLatestModification(draftVersion, publishedVersion);
|
4372
4401
|
return isDraftModified ? CONTENT_MANAGER_STATUS.MODIFIED : CONTENT_MANAGER_STATUS.PUBLISHED;
|
4373
4402
|
},
|