@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

package/build/divider/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/divider/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/divider/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SeparatorProps } from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport type { SpaceInput } from '../utils/space';\n\nexport type DividerProps = Omit<\n\tSeparatorProps,\n\t'children' | 'unstable_system' | 'orientation' | 'as' | 'render'\n> & {\n\t/**\n\t * Adjusts all margins on the inline dimension.\n\t *\n\t * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),\n\t * or a literal CSS value string.\n\t */\n\tmargin?: SpaceInput;\n\t/**\n\t * Adjusts the inline-end margin.\n\t *\n\t * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),\n\t * or a literal CSS value string.\n\t */\n\tmarginEnd?: SpaceInput;\n\t/**\n\t * Adjusts the inline-start margin.\n\t *\n\t * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),\n\t * or a literal CSS value string.\n\t */\n\tmarginStart?: SpaceInput;\n\t/**\n\t * Divider's orientation. When using inside a flex container, you may need\n\t * to make sure the divider is `stretch` aligned in order for it to be\n\t * visible.\n\t *\n\t * @default 'horizontal'\n\t */\n\torientation?: SeparatorProps[ 'orientation' ];\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/divider/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/draggable/index.js

@@ -1,69 +1,34 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var draggable_exports = {};
+__export(draggable_exports, {
+  Draggable: () => Draggable,
+  default: () => draggable_default
 });
-exports.Draggable = Draggable;
-exports.default = void 0;
-var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const dragImageClass = 'components-draggable__invisible-drag-image';
-const cloneWrapperClass = 'components-draggable__clone';
+module.exports = __toCommonJS(draggable_exports);
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_jsx_runtime = require("react/jsx-runtime");
+const dragImageClass = "components-draggable__invisible-drag-image";
+const cloneWrapperClass = "components-draggable__clone";
 const clonePadding = 0;
-const bodyClass = 'is-dragging-components-draggable';
-
-/**
- * `Draggable` is a Component that provides a way to set up a cross-browser
- * (including IE) customizable drag image and the transfer data for the drag
- * event. It decouples the drag handle and the element to drag: use it by
- * wrapping the component that will become the drag handle and providing the DOM
- * ID of the element to drag.
- *
- * Note that the drag handle needs to declare the `draggable="true"` property
- * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event
- * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`
- * takes care of the logic to setup the drag image and the transfer data, but is
- * not concerned with creating an actual DOM element that is draggable.
- *
- * ```jsx
- * import { Draggable, Panel, PanelBody } from '@wordpress/components';
- * import { Icon, more } from '@wordpress/icons';
- *
- * const MyDraggable = () => (
- *   <div id="draggable-panel">
- *     <Panel header="Draggable panel">
- *       <PanelBody>
- *         <Draggable elementId="draggable-panel" transferData={ {} }>
- *           { ( { onDraggableStart, onDraggableEnd } ) => (
- *             <div
- *               className="example-drag-handle"
- *               draggable
- *               onDragStart={ onDraggableStart }
- *               onDragEnd={ onDraggableEnd }
- *             >
- *               <Icon icon={ more } />
- *             </div>
- *           ) }
- *         </Draggable>
- *       </PanelBody>
- *     </Panel>
- *   </div>
- * );
- * ```
- */
+const bodyClass = "is-dragging-components-draggable";
 function Draggable({
   children,
   onDragStart,
@@ -73,17 +38,12 @@ function Draggable({
   cloneClassname,
   elementId,
   transferData,
-  __experimentalTransferDataType: transferDataType = 'text',
+  __experimentalTransferDataType: transferDataType = "text",
   __experimentalDragComponent: dragComponent
 }) {
-  const dragComponentRef = (0, _element.useRef)(null);
-  const cleanupRef = (0, _element.useRef)(() => {});
-
-  /**
-   * Removes the element clone, resets cursor, and removes drag listener.
-   *
-   * @param event The non-custom DragEvent.
-   */
+  const dragComponentRef = (0, import_element.useRef)(null);
+  const cleanupRef = (0, import_element.useRef)(() => {
+  });
   function end(event) {
     event.preventDefault();
     cleanupRef.current();
@@ -91,32 +51,16 @@ function Draggable({
       onDragEnd(event);
     }
   }
-
-  /**
-   * This method does a couple of things:
-   *
-   * - Clones the current element and spawns clone over original element.
-   * - Adds a fake temporary drag image to avoid browser defaults.
-   * - Sets transfer data.
-   * - Adds dragover listener.
-   *
-   * @param event The non-custom DragEvent.
-   */
   function start(event) {
     const {
       ownerDocument
     } = event.target;
     event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));
-    const cloneWrapper = ownerDocument.createElement('div');
-    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.
-    cloneWrapper.style.top = '0';
-    cloneWrapper.style.left = '0';
-    const dragImage = ownerDocument.createElement('div');
-
-    // Set a fake drag image to avoid browser defaults. Remove from DOM
-    // right after. event.dataTransfer.setDragImage is not supported yet in
-    // IE, we need to check for its existence first.
-    if ('function' === typeof event.dataTransfer.setDragImage) {
+    const cloneWrapper = ownerDocument.createElement("div");
+    cloneWrapper.style.top = "0";
+    cloneWrapper.style.left = "0";
+    const dragImage = ownerDocument.createElement("div");
+    if ("function" === typeof event.dataTransfer.setDragImage) {
       dragImage.classList.add(dragImageClass);
       ownerDocument.body.appendChild(dragImage);
       event.dataTransfer.setDragImage(dragImage, 0, 0);
@@ -127,23 +71,16 @@ function Draggable({
     }
     let x = 0;
     let y = 0;
-    // If a dragComponent is defined, the following logic will clone the
-    // HTML node and inject it into the cloneWrapper.
     if (dragComponentRef.current) {
-      // Position dragComponent at the same position as the cursor.
       x = event.clientX;
       y = event.clientY;
       cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;
-      const clonedDragComponent = ownerDocument.createElement('div');
+      const clonedDragComponent = ownerDocument.createElement("div");
       clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
       cloneWrapper.appendChild(clonedDragComponent);
-
-      // Inject the cloneWrapper into the DOM.
       ownerDocument.body.appendChild(cloneWrapper);
     } else {
       const element = ownerDocument.getElementById(elementId);
-
-      // Prepare element clone and append to element wrapper.
       const elementRect = element.getBoundingClientRect();
       const elementWrapper = element.parentNode;
       const elementTopOffset = elementRect.top;
@@ -151,29 +88,20 @@ function Draggable({
       cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;
       const clone = element.cloneNode(true);
       clone.id = `clone-${elementId}`;
-
-      // Position clone right over the original element (20px padding).
       x = elementLeftOffset - clonePadding;
       y = elementTopOffset - clonePadding;
       cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;
-
-      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
-      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));
+      Array.from(clone.querySelectorAll("iframe")).forEach((child) => child.parentNode?.removeChild(child));
       cloneWrapper.appendChild(clone);
-
-      // Inject the cloneWrapper into the DOM.
       if (appendToOwnerDocument) {
         ownerDocument.body.appendChild(cloneWrapper);
       } else {
         elementWrapper?.appendChild(cloneWrapper);
       }
     }
-
-    // Mark the current cursor coordinates.
     let cursorLeft = event.clientX;
     let cursorTop = event.clientY;
     function over(e) {
-      // Skip doing any work if mouse has not moved.
       if (cursorLeft === e.clientX && cursorTop === e.clientY) {
         return;
       }
@@ -188,48 +116,43 @@ function Draggable({
         onDragOver(e);
       }
     }
-
-    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,
-    // note that browsers may throttle raf below 60fps in certain conditions.
-    // @ts-ignore
-    const throttledDragOver = (0, _compose.throttle)(over, 16);
-    ownerDocument.addEventListener('dragover', throttledDragOver);
-
-    // Update cursor to 'grabbing', document wide.
+    const throttledDragOver = (0, import_compose.throttle)(over, 16);
+    ownerDocument.addEventListener("dragover", throttledDragOver);
     ownerDocument.body.classList.add(bodyClass);
     if (onDragStart) {
       onDragStart(event);
     }
     cleanupRef.current = () => {
-      // Remove drag clone.
       if (cloneWrapper && cloneWrapper.parentNode) {
         cloneWrapper.parentNode.removeChild(cloneWrapper);
       }
       if (dragImage && dragImage.parentNode) {
         dragImage.parentNode.removeChild(dragImage);
       }
-
-      // Reset cursor.
       ownerDocument.body.classList.remove(bodyClass);
-      ownerDocument.removeEventListener('dragover', throttledDragOver);
+      ownerDocument.removeEventListener("dragover", throttledDragOver);
     };
   }
-  (0, _element.useEffect)(() => () => {
+  (0, import_element.useEffect)(() => () => {
     cleanupRef.current();
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [children({
       onDraggableStart: start,
       onDraggableEnd: end
-    }), dragComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), dragComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       className: "components-draggable-drag-component-root",
       style: {
-        display: 'none'
+        display: "none"
       },
       ref: dragComponentRef,
       children: dragComponent
     })]
   });
 }
-var _default = exports.default = Draggable;
-//# sourceMappingURL=index.js.map
+var draggable_default = Draggable;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Draggable
+});
+//# sourceMappingURL=index.js.map

package/build/draggable/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_compose","require","_element","_jsxRuntime","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","appendToOwnerDocument","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","useRef","cleanupRef","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","throttle","addEventListener","remove","removeEventListener","useEffect","jsxs","Fragment","onDraggableStart","onDraggableEnd","jsx","className","display","ref","_default","exports","default"],"sources":["@wordpress/components/src/draggable/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tappendToOwnerDocument = false,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanupRef = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanupRef.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\tif ( appendToOwnerDocument ) {\n\t\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t\t} else {\n\t\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t\t}\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\tif ( onDragStart ) {\n\t\t\tonDragStart( event );\n\t\t}\n\n\t\tcleanupRef.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanupRef.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/draggable/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable({\n  children,\n  onDragStart,\n  onDragOver,\n  onDragEnd,\n  appendToOwnerDocument = false,\n  cloneClassname,\n  elementId,\n  transferData,\n  __experimentalTransferDataType: transferDataType = 'text',\n  __experimentalDragComponent: dragComponent\n}) {\n  const dragComponentRef = useRef(null);\n  const cleanupRef = useRef(() => {});\n\n  /**\n   * Removes the element clone, resets cursor, and removes drag listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function end(event) {\n    event.preventDefault();\n    cleanupRef.current();\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  }\n\n  /**\n   * This method does a couple of things:\n   *\n   * - Clones the current element and spawns clone over original element.\n   * - Adds a fake temporary drag image to avoid browser defaults.\n   * - Sets transfer data.\n   * - Adds dragover listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function start(event) {\n    const {\n      ownerDocument\n    } = event.target;\n    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n    const cloneWrapper = ownerDocument.createElement('div');\n    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n    cloneWrapper.style.top = '0';\n    cloneWrapper.style.left = '0';\n    const dragImage = ownerDocument.createElement('div');\n\n    // Set a fake drag image to avoid browser defaults. Remove from DOM\n    // right after. event.dataTransfer.setDragImage is not supported yet in\n    // IE, we need to check for its existence first.\n    if ('function' === typeof event.dataTransfer.setDragImage) {\n      dragImage.classList.add(dragImageClass);\n      ownerDocument.body.appendChild(dragImage);\n      event.dataTransfer.setDragImage(dragImage, 0, 0);\n    }\n    cloneWrapper.classList.add(cloneWrapperClass);\n    if (cloneClassname) {\n      cloneWrapper.classList.add(cloneClassname);\n    }\n    let x = 0;\n    let y = 0;\n    // If a dragComponent is defined, the following logic will clone the\n    // HTML node and inject it into the cloneWrapper.\n    if (dragComponentRef.current) {\n      // Position dragComponent at the same position as the cursor.\n      x = event.clientX;\n      y = event.clientY;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n      const clonedDragComponent = ownerDocument.createElement('div');\n      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n      cloneWrapper.appendChild(clonedDragComponent);\n\n      // Inject the cloneWrapper into the DOM.\n      ownerDocument.body.appendChild(cloneWrapper);\n    } else {\n      const element = ownerDocument.getElementById(elementId);\n\n      // Prepare element clone and append to element wrapper.\n      const elementRect = element.getBoundingClientRect();\n      const elementWrapper = element.parentNode;\n      const elementTopOffset = elementRect.top;\n      const elementLeftOffset = elementRect.left;\n      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n      const clone = element.cloneNode(true);\n      clone.id = `clone-${elementId}`;\n\n      // Position clone right over the original element (20px padding).\n      x = elementLeftOffset - clonePadding;\n      y = elementTopOffset - clonePadding;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n      cloneWrapper.appendChild(clone);\n\n      // Inject the cloneWrapper into the DOM.\n      if (appendToOwnerDocument) {\n        ownerDocument.body.appendChild(cloneWrapper);\n      } else {\n        elementWrapper?.appendChild(cloneWrapper);\n      }\n    }\n\n    // Mark the current cursor coordinates.\n    let cursorLeft = event.clientX;\n    let cursorTop = event.clientY;\n    function over(e) {\n      // Skip doing any work if mouse has not moved.\n      if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n        return;\n      }\n      const nextX = x + e.clientX - cursorLeft;\n      const nextY = y + e.clientY - cursorTop;\n      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n      cursorLeft = e.clientX;\n      cursorTop = e.clientY;\n      x = nextX;\n      y = nextY;\n      if (onDragOver) {\n        onDragOver(e);\n      }\n    }\n\n    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n    // note that browsers may throttle raf below 60fps in certain conditions.\n    // @ts-ignore\n    const throttledDragOver = throttle(over, 16);\n    ownerDocument.addEventListener('dragover', throttledDragOver);\n\n    // Update cursor to 'grabbing', document wide.\n    ownerDocument.body.classList.add(bodyClass);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n    cleanupRef.current = () => {\n      // Remove drag clone.\n      if (cloneWrapper && cloneWrapper.parentNode) {\n        cloneWrapper.parentNode.removeChild(cloneWrapper);\n      }\n      if (dragImage && dragImage.parentNode) {\n        dragImage.parentNode.removeChild(dragImage);\n      }\n\n      // Reset cursor.\n      ownerDocument.body.classList.remove(bodyClass);\n      ownerDocument.removeEventListener('dragover', throttledDragOver);\n    };\n  }\n  useEffect(() => () => {\n    cleanupRef.current();\n  }, []);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children({\n      onDraggableStart: start,\n      onDraggableEnd: end\n    }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-draggable-drag-component-root\",\n      style: {\n        display: 'none'\n      },\n      ref: dragComponentRef,\n      children: dragComponent\n    })]\n  });\n}\nexport default Draggable;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAyB;AACzB,qBAAkC;AAKlC,yBAAkE;AAClE,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AACrB,MAAM,YAAY;AAyCX,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC,mBAAmB;AAAA,EACnD,6BAA6B;AAC/B,GAAG;AACD,QAAM,uBAAmB,uBAAO,IAAI;AACpC,QAAM,iBAAa,uBAAO,MAAM;AAAA,EAAC,CAAC;AAOlC,WAAS,IAAI,OAAO;AAClB,UAAM,eAAe;AACrB,eAAW,QAAQ;AACnB,QAAI,WAAW;AACb,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAYA,WAAS,MAAM,OAAO;AACpB,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,MAAM;AACV,UAAM,aAAa,QAAQ,kBAAkB,KAAK,UAAU,YAAY,CAAC;AACzE,UAAM,eAAe,cAAc,cAAc,KAAK;AAEtD,iBAAa,MAAM,MAAM;AACzB,iBAAa,MAAM,OAAO;AAC1B,UAAM,YAAY,cAAc,cAAc,KAAK;AAKnD,QAAI,eAAe,OAAO,MAAM,aAAa,cAAc;AACzD,gBAAU,UAAU,IAAI,cAAc;AACtC,oBAAc,KAAK,YAAY,SAAS;AACxC,YAAM,aAAa,aAAa,WAAW,GAAG,CAAC;AAAA,IACjD;AACA,iBAAa,UAAU,IAAI,iBAAiB;AAC5C,QAAI,gBAAgB;AAClB,mBAAa,UAAU,IAAI,cAAc;AAAA,IAC3C;AACA,QAAI,IAAI;AACR,QAAI,IAAI;AAGR,QAAI,iBAAiB,SAAS;AAE5B,UAAI,MAAM;AACV,UAAI,MAAM;AACV,mBAAa,MAAM,YAAY,cAAc,CAAC,OAAO,CAAC;AACtD,YAAM,sBAAsB,cAAc,cAAc,KAAK;AAC7D,0BAAoB,YAAY,iBAAiB,QAAQ;AACzD,mBAAa,YAAY,mBAAmB;AAG5C,oBAAc,KAAK,YAAY,YAAY;AAAA,IAC7C,OAAO;AACL,YAAM,UAAU,cAAc,eAAe,SAAS;AAGtD,YAAM,cAAc,QAAQ,sBAAsB;AAClD,YAAM,iBAAiB,QAAQ;AAC/B,YAAM,mBAAmB,YAAY;AACrC,YAAM,oBAAoB,YAAY;AACtC,mBAAa,MAAM,QAAQ,GAAG,YAAY,QAAQ,eAAe,CAAC;AAClE,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAM,KAAK,SAAS,SAAS;AAG7B,UAAI,oBAAoB;AACxB,UAAI,mBAAmB;AACvB,mBAAa,MAAM,YAAY,cAAc,CAAC,OAAO,CAAC;AAGtD,YAAM,KAAK,MAAM,iBAAiB,QAAQ,CAAC,EAAE,QAAQ,WAAS,MAAM,YAAY,YAAY,KAAK,CAAC;AAClG,mBAAa,YAAY,KAAK;AAG9B,UAAI,uBAAuB;AACzB,sBAAc,KAAK,YAAY,YAAY;AAAA,MAC7C,OAAO;AACL,wBAAgB,YAAY,YAAY;AAAA,MAC1C;AAAA,IACF;AAGA,QAAI,aAAa,MAAM;AACvB,QAAI,YAAY,MAAM;AACtB,aAAS,KAAK,GAAG;AAEf,UAAI,eAAe,EAAE,WAAW,cAAc,EAAE,SAAS;AACvD;AAAA,MACF;AACA,YAAM,QAAQ,IAAI,EAAE,UAAU;AAC9B,YAAM,QAAQ,IAAI,EAAE,UAAU;AAC9B,mBAAa,MAAM,YAAY,cAAc,KAAK,OAAO,KAAK;AAC9D,mBAAa,EAAE;AACf,kBAAY,EAAE;AACd,UAAI;AACJ,UAAI;AACJ,UAAI,YAAY;AACd,mBAAW,CAAC;AAAA,MACd;AAAA,IACF;AAKA,UAAM,wBAAoB,yBAAS,MAAM,EAAE;AAC3C,kBAAc,iBAAiB,YAAY,iBAAiB;AAG5D,kBAAc,KAAK,UAAU,IAAI,SAAS;AAC1C,QAAI,aAAa;AACf,kBAAY,KAAK;AAAA,IACnB;AACA,eAAW,UAAU,MAAM;AAEzB,UAAI,gBAAgB,aAAa,YAAY;AAC3C,qBAAa,WAAW,YAAY,YAAY;AAAA,MAClD;AACA,UAAI,aAAa,UAAU,YAAY;AACrC,kBAAU,WAAW,YAAY,SAAS;AAAA,MAC5C;AAGA,oBAAc,KAAK,UAAU,OAAO,SAAS;AAC7C,oBAAc,oBAAoB,YAAY,iBAAiB;AAAA,IACjE;AAAA,EACF;AACA,gCAAU,MAAM,MAAM;AACpB,eAAW,QAAQ;AAAA,EACrB,GAAG,CAAC,CAAC;AACL,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAC,SAAS;AAAA,MAClB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,IAClB,CAAC,GAAG,iBAA8B,uCAAAC,KAAK,OAAO;AAAA,MAC5C,WAAW;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,oBAAQ;",
+  "names": ["_jsxs", "_Fragment", "_jsx"]
+}

package/build/draggable/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/draggable/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/draggable/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent, ReactNode } from 'react';\n\nexport type DraggableProps = {\n\t/**\n\t * Children.\n\t */\n\tchildren: ( props: {\n\t\t/**\n\t\t * `onDragStart` handler.\n\t\t */\n\t\tonDraggableStart: ( event: DragEvent ) => void;\n\t\t/**\n\t\t * `onDragEnd` handler.\n\t\t */\n\t\tonDraggableEnd: ( event: DragEvent ) => void;\n\t} ) => JSX.Element | null;\n\t/**\n\t * Whether to append the cloned element to the `ownerDocument` body.\n\t * By default, elements sourced by id are appended to the element's wrapper.\n\t *\n\t * @default false\n\t */\n\tappendToOwnerDocument?: boolean;\n\t/**\n\t * Classname for the cloned element.\n\t */\n\tcloneClassname?: string;\n\t/**\n\t * The HTML id of the element to clone on drag\n\t */\n\telementId: string;\n\t/**\n\t * A function called when dragging ends. This callback receives the `event`\n\t * object from the `dragend` event as its first parameter.\n\t */\n\tonDragEnd?: ( event: DragEvent ) => void;\n\t/**\n\t * A function called when the element being dragged is dragged over a valid\n\t * drop target. This callback receives the `event` object from the\n\t * `dragover` event as its first parameter.\n\t */\n\tonDragOver?: ( event: DragEvent ) => void;\n\t/**\n\t * A function called when dragging starts. This callback receives the\n\t * `event` object from the `dragstart` event as its first parameter.\n\t */\n\tonDragStart?: ( event: DragEvent ) => void;\n\t/**\n\t * Arbitrary data object attached to the drag and drop event.\n\t */\n\ttransferData: unknown;\n\t/**\n\t * The transfer data type to set.\n\t *\n\t * @default 'text'\n\t */\n\t__experimentalTransferDataType?: string;\n\t/**\n\t * Component to show when dragging.\n\t */\n\t__experimentalDragComponent?: ReactNode;\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/draggable/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/drop-zone/index.js

@@ -1,56 +1,47 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drop_zone_exports = {};
+__export(drop_zone_exports, {
+  DropZoneComponent: () => DropZoneComponent,
+  default: () => drop_zone_default
 });
-exports.DropZoneComponent = DropZoneComponent;
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _dom = require("@wordpress/dom");
-var _compose = require("@wordpress/compose");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
- *
- * ```jsx
- * import { DropZone } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyDropZone = () => {
- *   const [ hasDropped, setHasDropped ] = useState( false );
- *
- *   return (
- *     <div>
- *       { hasDropped ? 'Dropped!' : 'Drop something here' }
- *       <DropZone
- *         onFilesDrop={ () => setHasDropped( true ) }
- *         onHTMLDrop={ () => setHasDropped( true ) }
- *         onDrop={ () => setHasDropped( true ) }
- *       />
- *     </div>
- *   );
- * }
- * ```
- */
+module.exports = __toCommonJS(drop_zone_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_dom = require("@wordpress/dom");
+var import_compose = require("@wordpress/compose");
+var import_jsx_runtime = require("react/jsx-runtime");
 function DropZoneComponent({
   className,
-  icon = _icons.upload,
+  icon = import_icons.upload,
   label,
   onFilesDrop,
   onHTMLDrop,
@@ -58,21 +49,16 @@ function DropZoneComponent({
   isEligible = () => true,
   ...restProps
 }) {
-  const [isDraggingOverDocument, setIsDraggingOverDocument] = (0, _element.useState)();
-  const [isDraggingOverElement, setIsDraggingOverElement] = (0, _element.useState)();
-  const [isActive, setIsActive] = (0, _element.useState)();
-  const ref = (0, _compose.__experimentalUseDropZone)({
+  const [isDraggingOverDocument, setIsDraggingOverDocument] = (0, import_element.useState)();
+  const [isDraggingOverElement, setIsDraggingOverElement] = (0, import_element.useState)();
+  const [isActive, setIsActive] = (0, import_element.useState)();
+  const ref = (0, import_compose.__experimentalUseDropZone)({
     onDrop(event) {
       if (!event.dataTransfer) {
         return;
       }
-      const files = (0, _dom.getFilesFromDataTransfer)(event.dataTransfer);
-      const html = event.dataTransfer.getData('text/html');
-
-      /**
-       * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-       * The order of the checks is important to recognize the HTML drop.
-       */
+      const files = (0, import_dom.getFilesFromDataTransfer)(event.dataTransfer);
+      const html = event.dataTransfer.getData("text/html");
       if (html && onHTMLDrop) {
         onHTMLDrop(html);
       } else if (files.length && onFilesDrop) {
@@ -86,17 +72,13 @@ function DropZoneComponent({
       if (!event.dataTransfer) {
         return;
       }
-
-      /**
-       * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-       * The order of the checks is important to recognize the HTML drop.
-       */
-      if (event.dataTransfer.types.includes('text/html')) {
+      if (event.dataTransfer.types.includes("text/html")) {
         setIsActive(!!onHTMLDrop);
       } else if (
-      // Check for the types because sometimes the files themselves
-      // are only available on drop.
-      event.dataTransfer.types.includes('Files') || (0, _dom.getFilesFromDataTransfer)(event.dataTransfer).length > 0) {
+        // Check for the types because sometimes the files themselves
+        // are only available on drop.
+        event.dataTransfer.types.includes("Files") || (0, import_dom.getFilesFromDataTransfer)(event.dataTransfer).length > 0
+      ) {
         setIsActive(!!onFilesDrop);
       } else {
         setIsActive(!!onDrop && isEligible(event.dataTransfer));
@@ -105,7 +87,7 @@ function DropZoneComponent({
     onDragEnd() {
       setIsDraggingOverElement(false);
       setIsDraggingOverDocument(false);
-      setIsActive(undefined);
+      setIsActive(void 0);
     },
     onDragEnter() {
       setIsDraggingOverElement(true);
@@ -114,29 +96,33 @@ function DropZoneComponent({
       setIsDraggingOverElement(false);
     }
   });
-  const classes = (0, _clsx.default)('components-drop-zone', className, {
-    'is-active': isActive,
-    'is-dragging-over-document': isDraggingOverDocument,
-    'is-dragging-over-element': isDraggingOverElement
+  const classes = (0, import_clsx.default)("components-drop-zone", className, {
+    "is-active": isActive,
+    "is-dragging-over-document": isDraggingOverDocument,
+    "is-dragging-over-element": isDraggingOverElement
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ...restProps,
-    ref: ref,
+    ref,
     className: classes,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       className: "components-drop-zone__content",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
         className: "components-drop-zone__content-inner",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-          icon: icon,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, {
+          icon,
           className: "components-drop-zone__content-icon"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
           className: "components-drop-zone__content-text",
-          children: label ? label : (0, _i18n.__)('Drop files to upload')
+          children: label ? label : (0, import_i18n.__)("Drop files to upload")
         })]
       })
     })
   });
 }
-var _default = exports.default = DropZoneComponent;
-//# sourceMappingURL=index.js.map
+var drop_zone_default = DropZoneComponent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DropZoneComponent
+});
+//# sourceMappingURL=index.js.map