@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

package/dist/admin/hooks/useDragAndDrop.mjs

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { useDrop, useDrag } from 'react-dnd';
+import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop.mjs';
+
+const DIRECTIONS = {
+    UPWARD: 'upward',
+    DOWNWARD: 'downward'
+};
+const DROP_SENSITIVITY = {
+    REGULAR: 'regular',
+    IMMEDIATE: 'immediate'
+};
+/**
+ * A utility hook abstracting the general drag and drop hooks from react-dnd.
+ * Centralising the same behaviours and by default offering keyboard support.
+ */ const useDragAndDrop = (active, { type = 'STRAPI_DND', index, item, onStart, onEnd, onGrabItem, onDropItem, onCancel, onMoveItem, dropSensitivity = DROP_SENSITIVITY.REGULAR })=>{
+    const objectRef = React.useRef(null);
+    const [{ handlerId, isOver }, dropRef] = useDrop({
+        accept: type,
+        collect (monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+                isOver: monitor.isOver({
+                    shallow: true
+                })
+            };
+        },
+        drop (item) {
+            const draggedIndex = item.index;
+            const newIndex = index;
+            if (isOver && onDropItem) {
+                onDropItem(draggedIndex, newIndex);
+            }
+        },
+        hover (item, monitor) {
+            if (!objectRef.current || !onMoveItem) {
+                return;
+            }
+            const dragIndex = item.index;
+            const newIndex = index;
+            const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            if (!clientOffset) return;
+            const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+            if (typeof dragIndex === 'number' && typeof newIndex === 'number') {
+                if (dragIndex === newIndex) {
+                    // Don't replace items with themselves
+                    return;
+                }
+                if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+                    // Dragging downwards
+                    if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+                        return;
+                    }
+                    // Dragging upwards
+                    if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+                        return;
+                    }
+                }
+                // Time to actually perform the action
+                onMoveItem(newIndex, dragIndex);
+                item.index = newIndex;
+            } else {
+                // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]
+                if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {
+                    // Indices comparison to find item position in nested list
+                    const minLength = Math.min(dragIndex.length, newIndex.length);
+                    let areEqual = true;
+                    let isLessThan = false;
+                    let isGreaterThan = false;
+                    for(let i = 0; i < minLength; i++){
+                        if (dragIndex[i] < newIndex[i]) {
+                            isLessThan = true;
+                            areEqual = false;
+                            break;
+                        } else if (dragIndex[i] > newIndex[i]) {
+                            isGreaterThan = true;
+                            areEqual = false;
+                            break;
+                        }
+                    }
+                    // Don't replace items with themselves
+                    if (areEqual && dragIndex.length === newIndex.length) {
+                        return;
+                    }
+                    if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+                        // Dragging downwards
+                        if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+                            return;
+                        }
+                        // Dragging upwards
+                        if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+                            return;
+                        }
+                    }
+                }
+                onMoveItem(newIndex, dragIndex);
+                item.index = newIndex;
+            }
+        }
+    });
+    const getDragDirection = (monitor)=>{
+        if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
+            const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
+            if (deltaY > 0) return DIRECTIONS.UPWARD;
+            if (deltaY < 0) return DIRECTIONS.DOWNWARD;
+            return null;
+        }
+        return null;
+    };
+    const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({
+        type,
+        item () {
+            if (onStart) {
+                onStart();
+            }
+            /**
+       * This will be attached and it helps define the preview sizes
+       * when a component is flexy e.g. Relations
+       */ const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+            return {
+                index,
+                width,
+                ...item
+            };
+        },
+        end () {
+            if (onEnd) {
+                onEnd();
+            }
+        },
+        canDrag: active,
+        /**
+     * This is useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */ isDragging: item?.id ? (monitor)=>{
+            return item.id === monitor.getItem().id;
+        } : undefined,
+        collect: (monitor)=>({
+                isDragging: monitor.isDragging(),
+                initialOffset: monitor.getInitialClientOffset(),
+                currentOffset: monitor.getClientOffset(),
+                direction: getDragDirection(monitor)
+            })
+    });
+    const handleKeyDown = useKeyboardDragAndDrop(active, index, {
+        onGrabItem,
+        onDropItem,
+        onCancel,
+        onMoveItem
+    });
+    return [
+        {
+            handlerId,
+            isDragging,
+            handleKeyDown,
+            isOverDropTarget: isOver,
+            direction
+        },
+        objectRef,
+        dropRef,
+        dragRef,
+        dragPreviewRef
+    ];
+};
+
+export { DIRECTIONS, DROP_SENSITIVITY, useDragAndDrop };
+//# sourceMappingURL=useDragAndDrop.mjs.map

package/dist/admin/hooks/useDragAndDrop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragAndDrop.mjs","sources":["../../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["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":["DIRECTIONS","UPWARD","DOWNWARD","DROP_SENSITIVITY","REGULAR","IMMEDIATE","useDragAndDrop","active","type","index","item","onStart","onEnd","onGrabItem","onDropItem","onCancel","onMoveItem","dropSensitivity","objectRef","React","useRef","handlerId","isOver","dropRef","useDrop","accept","collect","monitor","getHandlerId","shallow","drop","draggedIndex","newIndex","hover","current","dragIndex","hoverBoundingRect","getBoundingClientRect","hoverMiddleY","bottom","top","clientOffset","getClientOffset","hoverClientY","y","Array","isArray","minLength","Math","min","length","areEqual","isLessThan","isGreaterThan","i","getDragDirection","isDragging","didDrop","getInitialClientOffset","deltaY","direction","dragRef","dragPreviewRef","useDrag","width","end","canDrag","id","getItem","undefined","initialOffset","currentOffset","handleKeyDown","useKeyboardDragAndDrop","isOverDropTarget"],"mappings":"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"}

package/dist/admin/hooks/useKeyboardDragAndDrop.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+/**
+ * Utility hook designed to implement keyboard accessibile drag and drop by
+ * returning an onKeyDown handler to be passed to the drag icon button.
+ *
+ * @internal - You should use `useDragAndDrop` instead.
+ */ const useKeyboardDragAndDrop = (active, index, { onCancel, onDropItem, onGrabItem, onMoveItem })=>{
+    const [isSelected, setIsSelected] = React__namespace.useState(false);
+    const handleMove = (movement)=>{
+        if (!isSelected) {
+            return;
+        }
+        if (typeof index === 'number' && onMoveItem) {
+            if (movement === 'UP') {
+                onMoveItem(index - 1, index);
+            } else if (movement === 'DOWN') {
+                onMoveItem(index + 1, index);
+            }
+        }
+    };
+    const handleDragClick = ()=>{
+        if (isSelected) {
+            if (onDropItem) {
+                onDropItem(index);
+            }
+            setIsSelected(false);
+        } else {
+            if (onGrabItem) {
+                onGrabItem(index);
+            }
+            setIsSelected(true);
+        }
+    };
+    const handleCancel = ()=>{
+        if (isSelected) {
+            setIsSelected(false);
+            if (onCancel) {
+                onCancel(index);
+            }
+        }
+    };
+    const handleKeyDown = (e)=>{
+        if (!active) {
+            return;
+        }
+        if (e.key === 'Tab' && !isSelected) {
+            return;
+        }
+        e.preventDefault();
+        switch(e.key){
+            case ' ':
+            case 'Enter':
+                handleDragClick();
+                break;
+            case 'Escape':
+                handleCancel();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                handleMove('DOWN');
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                handleMove('UP');
+                break;
+        }
+    };
+    return handleKeyDown;
+};
+
+exports.useKeyboardDragAndDrop = useKeyboardDragAndDrop;
+//# sourceMappingURL=useKeyboardDragAndDrop.js.map

package/dist/admin/hooks/useKeyboardDragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardDragAndDrop.js","sources":["../../../admin/src/hooks/useKeyboardDragAndDrop.ts"],"sourcesContent":["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"],"names":["useKeyboardDragAndDrop","active","index","onCancel","onDropItem","onGrabItem","onMoveItem","isSelected","setIsSelected","React","useState","handleMove","movement","handleDragClick","handleCancel","handleKeyDown","e","key","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA;;;;;AAKC,IACM,MAAMA,sBAAyB,GAAA,CACpCC,QACAC,KACA,EAAA,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAA2C,GAAA;AAEzF,IAAA,MAAM,CAACC,UAAYC,EAAAA,aAAAA,CAAc,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAEnD,IAAA,MAAMC,aAAa,CAACC,QAAAA,GAAAA;AAClB,QAAA,IAAI,CAACL,UAAY,EAAA;AACf,YAAA;AACF;QACA,IAAI,OAAOL,KAAU,KAAA,QAAA,IAAYI,UAAY,EAAA;AAC3C,YAAA,IAAIM,aAAa,IAAM,EAAA;AACrBN,gBAAAA,UAAAA,CAAYJ,QAAQ,CAAcA,EAAAA,KAAAA,CAAAA;aAC7B,MAAA,IAAIU,aAAa,MAAQ,EAAA;AAC9BN,gBAAAA,UAAAA,CAAYJ,QAAQ,CAAcA,EAAAA,KAAAA,CAAAA;AACpC;AACF;AACF,KAAA;AAEA,IAAA,MAAMW,eAAkB,GAAA,IAAA;AACtB,QAAA,IAAIN,UAAY,EAAA;AACd,YAAA,IAAIH,UAAY,EAAA;gBACdA,UAAWF,CAAAA,KAAAA,CAAAA;AACb;YACAM,aAAc,CAAA,KAAA,CAAA;SACT,MAAA;AACL,YAAA,IAAIH,UAAY,EAAA;gBACdA,UAAWH,CAAAA,KAAAA,CAAAA;AACb;YACAM,aAAc,CAAA,IAAA,CAAA;AAChB;AACF,KAAA;AAEA,IAAA,MAAMM,YAAe,GAAA,IAAA;AACnB,QAAA,IAAIP,UAAY,EAAA;YACdC,aAAc,CAAA,KAAA,CAAA;AAEd,YAAA,IAAIL,QAAU,EAAA;gBACZA,QAASD,CAAAA,KAAAA,CAAAA;AACX;AACF;AACF,KAAA;AAEA,IAAA,MAAMa,gBAAgB,CAAoBC,CAAAA,GAAAA;AACxC,QAAA,IAAI,CAACf,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,IAAIe,CAAEC,CAAAA,GAAG,KAAK,KAAA,IAAS,CAACV,UAAY,EAAA;AAClC,YAAA;AACF;AAEAS,QAAAA,CAAAA,CAAEE,cAAc,EAAA;AAEhB,QAAA,OAAQF,EAAEC,GAAG;YACX,KAAK,GAAA;YACL,KAAK,OAAA;AACHJ,gBAAAA,eAAAA,EAAAA;AACA,gBAAA;YAEF,KAAK,QAAA;AACHC,gBAAAA,YAAAA,EAAAA;AACA,gBAAA;YAEF,KAAK,WAAA;YACL,KAAK,YAAA;gBACHH,UAAW,CAAA,MAAA,CAAA;AACX,gBAAA;YAEF,KAAK,SAAA;YACL,KAAK,WAAA;gBACHA,UAAW,CAAA,IAAA,CAAA;AACX,gBAAA;AAGJ;AACF,KAAA;IAEA,OAAOI,aAAAA;AACT;;;;"}

package/dist/admin/hooks/useKeyboardDragAndDrop.mjs

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+/**
+ * Utility hook designed to implement keyboard accessibile drag and drop by
+ * returning an onKeyDown handler to be passed to the drag icon button.
+ *
+ * @internal - You should use `useDragAndDrop` instead.
+ */ const useKeyboardDragAndDrop = (active, index, { onCancel, onDropItem, onGrabItem, onMoveItem })=>{
+    const [isSelected, setIsSelected] = React.useState(false);
+    const handleMove = (movement)=>{
+        if (!isSelected) {
+            return;
+        }
+        if (typeof index === 'number' && onMoveItem) {
+            if (movement === 'UP') {
+                onMoveItem(index - 1, index);
+            } else if (movement === 'DOWN') {
+                onMoveItem(index + 1, index);
+            }
+        }
+    };
+    const handleDragClick = ()=>{
+        if (isSelected) {
+            if (onDropItem) {
+                onDropItem(index);
+            }
+            setIsSelected(false);
+        } else {
+            if (onGrabItem) {
+                onGrabItem(index);
+            }
+            setIsSelected(true);
+        }
+    };
+    const handleCancel = ()=>{
+        if (isSelected) {
+            setIsSelected(false);
+            if (onCancel) {
+                onCancel(index);
+            }
+        }
+    };
+    const handleKeyDown = (e)=>{
+        if (!active) {
+            return;
+        }
+        if (e.key === 'Tab' && !isSelected) {
+            return;
+        }
+        e.preventDefault();
+        switch(e.key){
+            case ' ':
+            case 'Enter':
+                handleDragClick();
+                break;
+            case 'Escape':
+                handleCancel();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                handleMove('DOWN');
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                handleMove('UP');
+                break;
+        }
+    };
+    return handleKeyDown;
+};
+
+export { useKeyboardDragAndDrop };
+//# sourceMappingURL=useKeyboardDragAndDrop.mjs.map

package/dist/admin/hooks/useKeyboardDragAndDrop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardDragAndDrop.mjs","sources":["../../../admin/src/hooks/useKeyboardDragAndDrop.ts"],"sourcesContent":["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"],"names":["useKeyboardDragAndDrop","active","index","onCancel","onDropItem","onGrabItem","onMoveItem","isSelected","setIsSelected","React","useState","handleMove","movement","handleDragClick","handleCancel","handleKeyDown","e","key","preventDefault"],"mappings":";;AASA;;;;;AAKC,IACM,MAAMA,sBAAyB,GAAA,CACpCC,QACAC,KACA,EAAA,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAA2C,GAAA;AAEzF,IAAA,MAAM,CAACC,UAAYC,EAAAA,aAAAA,CAAc,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAEnD,IAAA,MAAMC,aAAa,CAACC,QAAAA,GAAAA;AAClB,QAAA,IAAI,CAACL,UAAY,EAAA;AACf,YAAA;AACF;QACA,IAAI,OAAOL,KAAU,KAAA,QAAA,IAAYI,UAAY,EAAA;AAC3C,YAAA,IAAIM,aAAa,IAAM,EAAA;AACrBN,gBAAAA,UAAAA,CAAYJ,QAAQ,CAAcA,EAAAA,KAAAA,CAAAA;aAC7B,MAAA,IAAIU,aAAa,MAAQ,EAAA;AAC9BN,gBAAAA,UAAAA,CAAYJ,QAAQ,CAAcA,EAAAA,KAAAA,CAAAA;AACpC;AACF;AACF,KAAA;AAEA,IAAA,MAAMW,eAAkB,GAAA,IAAA;AACtB,QAAA,IAAIN,UAAY,EAAA;AACd,YAAA,IAAIH,UAAY,EAAA;gBACdA,UAAWF,CAAAA,KAAAA,CAAAA;AACb;YACAM,aAAc,CAAA,KAAA,CAAA;SACT,MAAA;AACL,YAAA,IAAIH,UAAY,EAAA;gBACdA,UAAWH,CAAAA,KAAAA,CAAAA;AACb;YACAM,aAAc,CAAA,IAAA,CAAA;AAChB;AACF,KAAA;AAEA,IAAA,MAAMM,YAAe,GAAA,IAAA;AACnB,QAAA,IAAIP,UAAY,EAAA;YACdC,aAAc,CAAA,KAAA,CAAA;AAEd,YAAA,IAAIL,QAAU,EAAA;gBACZA,QAASD,CAAAA,KAAAA,CAAAA;AACX;AACF;AACF,KAAA;AAEA,IAAA,MAAMa,gBAAgB,CAAoBC,CAAAA,GAAAA;AACxC,QAAA,IAAI,CAACf,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,IAAIe,CAAEC,CAAAA,GAAG,KAAK,KAAA,IAAS,CAACV,UAAY,EAAA;AAClC,YAAA;AACF;AAEAS,QAAAA,CAAAA,CAAEE,cAAc,EAAA;AAEhB,QAAA,OAAQF,EAAEC,GAAG;YACX,KAAK,GAAA;YACL,KAAK,OAAA;AACHJ,gBAAAA,eAAAA,EAAAA;AACA,gBAAA;YAEF,KAAK,QAAA;AACHC,gBAAAA,YAAAA,EAAAA;AACA,gBAAA;YAEF,KAAK,WAAA;YACL,KAAK,YAAA;gBACHH,UAAW,CAAA,MAAA,CAAA;AACX,gBAAA;YAEF,KAAK,SAAA;YACL,KAAK,WAAA;gBACHA,UAAW,CAAA,IAAA,CAAA;AACX,gBAAA;AAGJ;AACF,KAAA;IAEA,OAAOI,aAAAA;AACT;;;;"}

package/dist/admin/hooks/useLazyComponents.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+
+const componentStore = new Map();
+/**
+ * @description A hook to lazy load custom field components
+ */ const useLazyComponents = (componentUids = [])=>{
+    const [lazyComponentStore, setLazyComponentStore] = React.useState(Object.fromEntries(componentStore));
+    /**
+   * Start loading only if there are any components passed in
+   * and there are some new to load
+   */ const newUids = componentUids.filter((uid)=>!componentStore.get(uid));
+    const [loading, setLoading] = React.useState(()=>!!newUids.length);
+    const getCustomField = strapiAdmin.useStrapiApp('useLazyComponents', (state)=>state.customFields.get);
+    React.useEffect(()=>{
+        const setStore = (store)=>{
+            setLazyComponentStore(store);
+            setLoading(false);
+        };
+        const lazyLoadComponents = async (uids, components)=>{
+            const modules = await Promise.all(components);
+            uids.forEach((uid, index)=>{
+                componentStore.set(uid, modules[index].default);
+            });
+            setStore(Object.fromEntries(componentStore));
+        };
+        if (newUids.length > 0) {
+            setLoading(true);
+            const componentPromises = newUids.reduce((arrayOfPromises, uid)=>{
+                const customField = getCustomField(uid);
+                if (customField) {
+                    arrayOfPromises.push(customField.components.Input());
+                }
+                return arrayOfPromises;
+            }, []);
+            if (componentPromises.length > 0) {
+                lazyLoadComponents(newUids, componentPromises);
+            }
+        }
+    }, [
+        newUids,
+        getCustomField
+    ]);
+    /**
+   * Wrap this in a callback so it can be used in
+   * effects to cleanup the cached store if required
+   */ const cleanup = React.useCallback(()=>{
+        componentStore.clear();
+        setLazyComponentStore({});
+    }, []);
+    return {
+        isLazyLoading: loading,
+        lazyComponentStore,
+        cleanup
+    };
+};
+
+exports.useLazyComponents = useLazyComponents;
+//# sourceMappingURL=useLazyComponents.js.map

package/dist/admin/hooks/useLazyComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyComponents.js","sources":["../../../admin/src/hooks/useLazyComponents.ts"],"sourcesContent":["import { ComponentType, useCallback, useEffect, useState } from 'react';\n\nimport { StrapiAppContextValue, useStrapiApp } from '@strapi/admin/strapi-admin';\n\nconst componentStore = new Map<string, ComponentType | undefined>();\n\ntype LazyComponentStore = Record<string, ComponentType | undefined>;\n\ntype CustomField = NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n\ninterface UseLazyComponentsReturn {\n  isLazyLoading: boolean;\n  lazyComponentStore: LazyComponentStore;\n  cleanup: () => void;\n}\n\n/**\n * @description A hook to lazy load custom field components\n */\nconst useLazyComponents = (componentUids: string[] = []): UseLazyComponentsReturn => {\n  const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));\n  /**\n   * Start loading only if there are any components passed in\n   * and there are some new to load\n   */\n  const newUids = componentUids.filter((uid) => !componentStore.get(uid));\n  const [loading, setLoading] = useState(() => !!newUids.length);\n  const getCustomField = useStrapiApp('useLazyComponents', (state) => state.customFields.get);\n\n  useEffect(() => {\n    const setStore = (store: Record<string, ComponentType | undefined>) => {\n      setLazyComponentStore(store);\n      setLoading(false);\n    };\n\n    const lazyLoadComponents = async (\n      uids: string[],\n      components: Array<ReturnType<CustomField['components']['Input']>>\n    ) => {\n      const modules = await Promise.all(components);\n\n      uids.forEach((uid, index) => {\n        componentStore.set(uid, modules[index].default);\n      });\n\n      setStore(Object.fromEntries(componentStore));\n    };\n\n    if (newUids.length > 0) {\n      setLoading(true);\n\n      const componentPromises = newUids.reduce<\n        Array<ReturnType<CustomField['components']['Input']>>\n      >((arrayOfPromises, uid) => {\n        const customField = getCustomField(uid);\n\n        if (customField) {\n          arrayOfPromises.push(customField.components.Input());\n        }\n\n        return arrayOfPromises;\n      }, []);\n\n      if (componentPromises.length > 0) {\n        lazyLoadComponents(newUids, componentPromises);\n      }\n    }\n  }, [newUids, getCustomField]);\n\n  /**\n   * Wrap this in a callback so it can be used in\n   * effects to cleanup the cached store if required\n   */\n  const cleanup = useCallback(() => {\n    componentStore.clear();\n    setLazyComponentStore({});\n  }, []);\n\n  return { isLazyLoading: loading, lazyComponentStore, cleanup };\n};\n\nexport { useLazyComponents };\nexport type { UseLazyComponentsReturn, LazyComponentStore };\n"],"names":["componentStore","Map","useLazyComponents","componentUids","lazyComponentStore","setLazyComponentStore","useState","Object","fromEntries","newUids","filter","uid","get","loading","setLoading","length","getCustomField","useStrapiApp","state","customFields","useEffect","setStore","store","lazyLoadComponents","uids","components","modules","Promise","all","forEach","index","set","default","componentPromises","reduce","arrayOfPromises","customField","push","Input","cleanup","useCallback","clear","isLazyLoading"],"mappings":";;;;;AAIA,MAAMA,iBAAiB,IAAIC,GAAAA,EAAAA;AAY3B;;AAEC,IACKC,MAAAA,iBAAAA,GAAoB,CAACC,aAAAA,GAA0B,EAAE,GAAA;AACrD,IAAA,MAAM,CAACC,kBAAoBC,EAAAA,qBAAAA,CAAsB,GAAGC,cAASC,CAAAA,MAAAA,CAAOC,WAAW,CAACR,cAAAA,CAAAA,CAAAA;AAChF;;;MAIA,MAAMS,OAAUN,GAAAA,aAAAA,CAAcO,MAAM,CAAC,CAACC,GAAQ,GAAA,CAACX,cAAeY,CAAAA,GAAG,CAACD,GAAAA,CAAAA,CAAAA;IAClE,MAAM,CAACE,SAASC,UAAW,CAAA,GAAGR,eAAS,IAAM,CAAC,CAACG,OAAAA,CAAQM,MAAM,CAAA;IAC7D,MAAMC,cAAAA,GAAiBC,yBAAa,mBAAqB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACP,GAAG,CAAA;IAE1FQ,eAAU,CAAA,IAAA;AACR,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBjB,qBAAsBiB,CAAAA,KAAAA,CAAAA;YACtBR,UAAW,CAAA,KAAA,CAAA;AACb,SAAA;QAEA,MAAMS,kBAAAA,GAAqB,OACzBC,IACAC,EAAAA,UAAAA,GAAAA;AAEA,YAAA,MAAMC,OAAU,GAAA,MAAMC,OAAQC,CAAAA,GAAG,CAACH,UAAAA,CAAAA;YAElCD,IAAKK,CAAAA,OAAO,CAAC,CAAClB,GAAKmB,EAAAA,KAAAA,GAAAA;AACjB9B,gBAAAA,cAAAA,CAAe+B,GAAG,CAACpB,GAAAA,EAAKe,OAAO,CAACI,KAAAA,CAAM,CAACE,OAAO,CAAA;AAChD,aAAA,CAAA;YAEAX,QAASd,CAAAA,MAAAA,CAAOC,WAAW,CAACR,cAAAA,CAAAA,CAAAA;AAC9B,SAAA;QAEA,IAAIS,OAAAA,CAAQM,MAAM,GAAG,CAAG,EAAA;YACtBD,UAAW,CAAA,IAAA,CAAA;AAEX,YAAA,MAAMmB,iBAAoBxB,GAAAA,OAAAA,CAAQyB,MAAM,CAEtC,CAACC,eAAiBxB,EAAAA,GAAAA,GAAAA;AAClB,gBAAA,MAAMyB,cAAcpB,cAAeL,CAAAA,GAAAA,CAAAA;AAEnC,gBAAA,IAAIyB,WAAa,EAAA;AACfD,oBAAAA,eAAAA,CAAgBE,IAAI,CAACD,WAAYX,CAAAA,UAAU,CAACa,KAAK,EAAA,CAAA;AACnD;gBAEA,OAAOH,eAAAA;AACT,aAAA,EAAG,EAAE,CAAA;YAEL,IAAIF,iBAAAA,CAAkBlB,MAAM,GAAG,CAAG,EAAA;AAChCQ,gBAAAA,kBAAAA,CAAmBd,OAASwB,EAAAA,iBAAAA,CAAAA;AAC9B;AACF;KACC,EAAA;AAACxB,QAAAA,OAAAA;AAASO,QAAAA;AAAe,KAAA,CAAA;AAE5B;;;MAIA,MAAMuB,UAAUC,iBAAY,CAAA,IAAA;AAC1BxC,QAAAA,cAAAA,CAAeyC,KAAK,EAAA;AACpBpC,QAAAA,qBAAAA,CAAsB,EAAC,CAAA;AACzB,KAAA,EAAG,EAAE,CAAA;IAEL,OAAO;QAAEqC,aAAe7B,EAAAA,OAAAA;AAAST,QAAAA,kBAAAA;AAAoBmC,QAAAA;AAAQ,KAAA;AAC/D;;;;"}

package/dist/admin/hooks/useLazyComponents.mjs

@@ -0,0 +1,59 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useStrapiApp } from '@strapi/admin/strapi-admin';
+
+const componentStore = new Map();
+/**
+ * @description A hook to lazy load custom field components
+ */ const useLazyComponents = (componentUids = [])=>{
+    const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
+    /**
+   * Start loading only if there are any components passed in
+   * and there are some new to load
+   */ const newUids = componentUids.filter((uid)=>!componentStore.get(uid));
+    const [loading, setLoading] = useState(()=>!!newUids.length);
+    const getCustomField = useStrapiApp('useLazyComponents', (state)=>state.customFields.get);
+    useEffect(()=>{
+        const setStore = (store)=>{
+            setLazyComponentStore(store);
+            setLoading(false);
+        };
+        const lazyLoadComponents = async (uids, components)=>{
+            const modules = await Promise.all(components);
+            uids.forEach((uid, index)=>{
+                componentStore.set(uid, modules[index].default);
+            });
+            setStore(Object.fromEntries(componentStore));
+        };
+        if (newUids.length > 0) {
+            setLoading(true);
+            const componentPromises = newUids.reduce((arrayOfPromises, uid)=>{
+                const customField = getCustomField(uid);
+                if (customField) {
+                    arrayOfPromises.push(customField.components.Input());
+                }
+                return arrayOfPromises;
+            }, []);
+            if (componentPromises.length > 0) {
+                lazyLoadComponents(newUids, componentPromises);
+            }
+        }
+    }, [
+        newUids,
+        getCustomField
+    ]);
+    /**
+   * Wrap this in a callback so it can be used in
+   * effects to cleanup the cached store if required
+   */ const cleanup = useCallback(()=>{
+        componentStore.clear();
+        setLazyComponentStore({});
+    }, []);
+    return {
+        isLazyLoading: loading,
+        lazyComponentStore,
+        cleanup
+    };
+};
+
+export { useLazyComponents };
+//# sourceMappingURL=useLazyComponents.mjs.map

package/dist/admin/hooks/useLazyComponents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyComponents.mjs","sources":["../../../admin/src/hooks/useLazyComponents.ts"],"sourcesContent":["import { ComponentType, useCallback, useEffect, useState } from 'react';\n\nimport { StrapiAppContextValue, useStrapiApp } from '@strapi/admin/strapi-admin';\n\nconst componentStore = new Map<string, ComponentType | undefined>();\n\ntype LazyComponentStore = Record<string, ComponentType | undefined>;\n\ntype CustomField = NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n\ninterface UseLazyComponentsReturn {\n  isLazyLoading: boolean;\n  lazyComponentStore: LazyComponentStore;\n  cleanup: () => void;\n}\n\n/**\n * @description A hook to lazy load custom field components\n */\nconst useLazyComponents = (componentUids: string[] = []): UseLazyComponentsReturn => {\n  const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));\n  /**\n   * Start loading only if there are any components passed in\n   * and there are some new to load\n   */\n  const newUids = componentUids.filter((uid) => !componentStore.get(uid));\n  const [loading, setLoading] = useState(() => !!newUids.length);\n  const getCustomField = useStrapiApp('useLazyComponents', (state) => state.customFields.get);\n\n  useEffect(() => {\n    const setStore = (store: Record<string, ComponentType | undefined>) => {\n      setLazyComponentStore(store);\n      setLoading(false);\n    };\n\n    const lazyLoadComponents = async (\n      uids: string[],\n      components: Array<ReturnType<CustomField['components']['Input']>>\n    ) => {\n      const modules = await Promise.all(components);\n\n      uids.forEach((uid, index) => {\n        componentStore.set(uid, modules[index].default);\n      });\n\n      setStore(Object.fromEntries(componentStore));\n    };\n\n    if (newUids.length > 0) {\n      setLoading(true);\n\n      const componentPromises = newUids.reduce<\n        Array<ReturnType<CustomField['components']['Input']>>\n      >((arrayOfPromises, uid) => {\n        const customField = getCustomField(uid);\n\n        if (customField) {\n          arrayOfPromises.push(customField.components.Input());\n        }\n\n        return arrayOfPromises;\n      }, []);\n\n      if (componentPromises.length > 0) {\n        lazyLoadComponents(newUids, componentPromises);\n      }\n    }\n  }, [newUids, getCustomField]);\n\n  /**\n   * Wrap this in a callback so it can be used in\n   * effects to cleanup the cached store if required\n   */\n  const cleanup = useCallback(() => {\n    componentStore.clear();\n    setLazyComponentStore({});\n  }, []);\n\n  return { isLazyLoading: loading, lazyComponentStore, cleanup };\n};\n\nexport { useLazyComponents };\nexport type { UseLazyComponentsReturn, LazyComponentStore };\n"],"names":["componentStore","Map","useLazyComponents","componentUids","lazyComponentStore","setLazyComponentStore","useState","Object","fromEntries","newUids","filter","uid","get","loading","setLoading","length","getCustomField","useStrapiApp","state","customFields","useEffect","setStore","store","lazyLoadComponents","uids","components","modules","Promise","all","forEach","index","set","default","componentPromises","reduce","arrayOfPromises","customField","push","Input","cleanup","useCallback","clear","isLazyLoading"],"mappings":";;;AAIA,MAAMA,iBAAiB,IAAIC,GAAAA,EAAAA;AAY3B;;AAEC,IACKC,MAAAA,iBAAAA,GAAoB,CAACC,aAAAA,GAA0B,EAAE,GAAA;AACrD,IAAA,MAAM,CAACC,kBAAoBC,EAAAA,qBAAAA,CAAsB,GAAGC,QAASC,CAAAA,MAAAA,CAAOC,WAAW,CAACR,cAAAA,CAAAA,CAAAA;AAChF;;;MAIA,MAAMS,OAAUN,GAAAA,aAAAA,CAAcO,MAAM,CAAC,CAACC,GAAQ,GAAA,CAACX,cAAeY,CAAAA,GAAG,CAACD,GAAAA,CAAAA,CAAAA;IAClE,MAAM,CAACE,SAASC,UAAW,CAAA,GAAGR,SAAS,IAAM,CAAC,CAACG,OAAAA,CAAQM,MAAM,CAAA;IAC7D,MAAMC,cAAAA,GAAiBC,aAAa,mBAAqB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACP,GAAG,CAAA;IAE1FQ,SAAU,CAAA,IAAA;AACR,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBjB,qBAAsBiB,CAAAA,KAAAA,CAAAA;YACtBR,UAAW,CAAA,KAAA,CAAA;AACb,SAAA;QAEA,MAAMS,kBAAAA,GAAqB,OACzBC,IACAC,EAAAA,UAAAA,GAAAA;AAEA,YAAA,MAAMC,OAAU,GAAA,MAAMC,OAAQC,CAAAA,GAAG,CAACH,UAAAA,CAAAA;YAElCD,IAAKK,CAAAA,OAAO,CAAC,CAAClB,GAAKmB,EAAAA,KAAAA,GAAAA;AACjB9B,gBAAAA,cAAAA,CAAe+B,GAAG,CAACpB,GAAAA,EAAKe,OAAO,CAACI,KAAAA,CAAM,CAACE,OAAO,CAAA;AAChD,aAAA,CAAA;YAEAX,QAASd,CAAAA,MAAAA,CAAOC,WAAW,CAACR,cAAAA,CAAAA,CAAAA;AAC9B,SAAA;QAEA,IAAIS,OAAAA,CAAQM,MAAM,GAAG,CAAG,EAAA;YACtBD,UAAW,CAAA,IAAA,CAAA;AAEX,YAAA,MAAMmB,iBAAoBxB,GAAAA,OAAAA,CAAQyB,MAAM,CAEtC,CAACC,eAAiBxB,EAAAA,GAAAA,GAAAA;AAClB,gBAAA,MAAMyB,cAAcpB,cAAeL,CAAAA,GAAAA,CAAAA;AAEnC,gBAAA,IAAIyB,WAAa,EAAA;AACfD,oBAAAA,eAAAA,CAAgBE,IAAI,CAACD,WAAYX,CAAAA,UAAU,CAACa,KAAK,EAAA,CAAA;AACnD;gBAEA,OAAOH,eAAAA;AACT,aAAA,EAAG,EAAE,CAAA;YAEL,IAAIF,iBAAAA,CAAkBlB,MAAM,GAAG,CAAG,EAAA;AAChCQ,gBAAAA,kBAAAA,CAAmBd,OAASwB,EAAAA,iBAAAA,CAAAA;AAC9B;AACF;KACC,EAAA;AAACxB,QAAAA,OAAAA;AAASO,QAAAA;AAAe,KAAA,CAAA;AAE5B;;;MAIA,MAAMuB,UAAUC,WAAY,CAAA,IAAA;AAC1BxC,QAAAA,cAAAA,CAAeyC,KAAK,EAAA;AACpBpC,QAAAA,qBAAAA,CAAsB,EAAC,CAAA;AACzB,KAAA,EAAG,EAAE,CAAA;IAEL,OAAO;QAAEqC,aAAe7B,EAAAA,OAAAA;AAAST,QAAAA,kBAAAA;AAAoBmC,QAAAA;AAAQ,KAAA;AAC/D;;;;"}

package/dist/admin/hooks/useOnce.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+const useOnce = (effect)=>React__namespace.useEffect(effect, emptyDeps);
+const emptyDeps = [];
+
+exports.useOnce = useOnce;
+//# sourceMappingURL=useOnce.js.map

package/dist/admin/hooks/useOnce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnce.js","sources":["../../../admin/src/hooks/useOnce.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport * as React from 'react';\n\nexport const useOnce = (effect: React.EffectCallback) => React.useEffect(effect, emptyDeps);\n\nconst emptyDeps: React.DependencyList = [];\n"],"names":["useOnce","effect","React","useEffect","emptyDeps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,UAAU,CAACC,MAAAA,GAAiCC,iBAAMC,SAAS,CAACF,QAAQG,SAAW;AAE5F,MAAMA,YAAkC,EAAE;;;;"}

package/dist/admin/hooks/useOnce.mjs

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const useOnce = (effect)=>React.useEffect(effect, emptyDeps);
+const emptyDeps = [];
+
+export { useOnce };
+//# sourceMappingURL=useOnce.mjs.map

package/dist/admin/hooks/useOnce.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnce.mjs","sources":["../../../admin/src/hooks/useOnce.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport * as React from 'react';\n\nexport const useOnce = (effect: React.EffectCallback) => React.useEffect(effect, emptyDeps);\n\nconst emptyDeps: React.DependencyList = [];\n"],"names":["useOnce","effect","React","useEffect","emptyDeps"],"mappings":";;AAGO,MAAMA,UAAU,CAACC,MAAAA,GAAiCC,MAAMC,SAAS,CAACF,QAAQG,SAAW;AAE5F,MAAMA,YAAkC,EAAE;;;;"}

package/dist/admin/hooks/usePrev.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+const usePrev = (value)=>{
+    const ref = React.useRef();
+    React.useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+
+exports.usePrev = usePrev;
+//# sourceMappingURL=usePrev.js.map

package/dist/admin/hooks/usePrev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrev.js","sources":["../../../admin/src/hooks/usePrev.ts"],"sourcesContent":["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"],"names":["usePrev","value","ref","useRef","useEffect","current"],"mappings":";;;;AAEO,MAAMA,UAAU,CAAIC,KAAAA,GAAAA;AACzB,IAAA,MAAMC,GAAMC,GAAAA,YAAAA,EAAAA;IAEZC,eAAU,CAAA,IAAA;AACRF,QAAAA,GAAAA,CAAIG,OAAO,GAAGJ,KAAAA;KACb,EAAA;AAACA,QAAAA;AAAM,KAAA,CAAA;AAEV,IAAA,OAAOC,IAAIG,OAAO;AACpB;;;;"}

package/dist/admin/hooks/usePrev.mjs

@@ -0,0 +1,14 @@
+import { useRef, useEffect } from 'react';
+
+const usePrev = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+
+export { usePrev };
+//# sourceMappingURL=usePrev.mjs.map

package/dist/admin/hooks/usePrev.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrev.mjs","sources":["../../../admin/src/hooks/usePrev.ts"],"sourcesContent":["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"],"names":["usePrev","value","ref","useRef","useEffect","current"],"mappings":";;AAEO,MAAMA,UAAU,CAAIC,KAAAA,GAAAA;AACzB,IAAA,MAAMC,GAAMC,GAAAA,MAAAA,EAAAA;IAEZC,SAAU,CAAA,IAAA;AACRF,QAAAA,GAAAA,CAAIG,OAAO,GAAGJ,KAAAA;KACb,EAAA;AAACA,QAAAA;AAAM,KAAA,CAAA;AAEV,IAAA,OAAOC,IAAIG,OAAO;AACpB;;;;"}