@m4l/components 3.0.0 → 3.0.2

package/{react-draggable.079122b0.js → react-draggable-DsCPdgQP.js}

@@ -1,10 +1,11 @@
+import { g as getDefaultExportFromCjs } from "./commonjs-BfYxJMv3.js";
 import React__default from "react";
 import require$$1 from "prop-types";
 import require$$2 from "react-dom";
 import clsx from "clsx";
-import { d as domFns, s as shims, l as log, p as positionFns } from "./utils/index.f77cc2ab.js";
+import { d as domFns, s as shims, l as log, p as positionFns } from "./utils/index-DiMrtgIu.js";
 var cjs = { exports: {} };
-var Draggable$1 = {};
+var Draggable$2 = {};
 var DraggableCore$2 = {};
 Object.defineProperty(DraggableCore$2, "__esModule", {
   value: true
@@ -21,8 +22,7 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 function _getRequireWildcardCache(nodeInterop) {
-  if (typeof WeakMap !== "function")
-    return null;
+  if (typeof WeakMap !== "function") return null;
   var cacheBabelInterop = /* @__PURE__ */ new WeakMap();
   var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
   return (_getRequireWildcardCache = function(nodeInterop2) {
@@ -30,7 +30,7 @@ function _getRequireWildcardCache(nodeInterop) {
   })(nodeInterop);
 }
 function _interopRequireWildcard(obj, nodeInterop) {
-  if (!nodeInterop && obj && obj.__esModule) {
+  if (obj && obj.__esModule) {
     return obj;
   }
   if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
@@ -72,13 +72,11 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
+  if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== void 0) {
     var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+    if (typeof res !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
@@ -96,7 +94,7 @@ const eventsFor = {
   }
 };
 let dragEventFor = eventsFor.mouse;
-class DraggableCore$1 extends React.Component {
+let DraggableCore$1 = class DraggableCore extends React.Component {
   constructor() {
     super(...arguments);
     _defineProperty(this, "dragging", false);
@@ -106,8 +104,7 @@ class DraggableCore$1 extends React.Component {
     _defineProperty(this, "mounted", false);
     _defineProperty(this, "handleDragStart", (e) => {
       this.props.onMouseDown(e);
-      if (!this.props.allowAnyClick && typeof e.button === "number" && e.button !== 0)
-        return false;
+      if (!this.props.allowAnyClick && typeof e.button === "number" && e.button !== 0) return false;
       const thisNode = this.findDOMNode();
       if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
         throw new Error("<DraggableCore> not mounted on DragStart!");
@@ -118,13 +115,11 @@ class DraggableCore$1 extends React.Component {
       if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.handle, thisNode) || this.props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.cancel, thisNode)) {
         return;
       }
-      if (e.type === "touchstart")
-        e.preventDefault();
+      if (e.type === "touchstart") e.preventDefault();
       const touchIdentifier = (0, _domFns.getTouchIdentifier)(e);
       this.touchIdentifier = touchIdentifier;
       const position = (0, _positionFns.getControlPosition)(e, touchIdentifier, this);
-      if (position == null)
-        return;
+      if (position == null) return;
       const {
         x,
         y
@@ -133,10 +128,8 @@ class DraggableCore$1 extends React.Component {
       (0, _log.default)("DraggableCore: handleDragStart: %j", coreEvent);
       (0, _log.default)("calling", this.props.onStart);
       const shouldUpdate = this.props.onStart(e, coreEvent);
-      if (shouldUpdate === false || this.mounted === false)
-        return;
-      if (this.props.enableUserSelectHack)
-        (0, _domFns.addUserSelectStyles)(ownerDocument);
+      if (shouldUpdate === false || this.mounted === false) return;
+      if (this.props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(ownerDocument);
       this.dragging = true;
       this.lastX = x;
       this.lastY = y;
@@ -145,8 +138,7 @@ class DraggableCore$1 extends React.Component {
     });
     _defineProperty(this, "handleDrag", (e) => {
       const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
-      if (position == null)
-        return;
+      if (position == null) return;
       let {
         x,
         y
@@ -154,8 +146,7 @@ class DraggableCore$1 extends React.Component {
       if (Array.isArray(this.props.grid)) {
         let deltaX = x - this.lastX, deltaY = y - this.lastY;
         [deltaX, deltaY] = (0, _positionFns.snapToGrid)(this.props.grid, deltaX, deltaY);
-        if (!deltaX && !deltaY)
-          return;
+        if (!deltaX && !deltaY) return;
         x = this.lastX + deltaX, y = this.lastY + deltaY;
       }
       const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
@@ -175,11 +166,9 @@ class DraggableCore$1 extends React.Component {
       this.lastY = y;
     });
     _defineProperty(this, "handleDragStop", (e) => {
-      if (!this.dragging)
-        return;
+      if (!this.dragging) return;
       const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
-      if (position == null)
-        return;
+      if (position == null) return;
       let {
         x,
         y
@@ -192,12 +181,10 @@ class DraggableCore$1 extends React.Component {
       }
       const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
       const shouldContinue = this.props.onStop(e, coreEvent);
-      if (shouldContinue === false || this.mounted === false)
-        return false;
+      if (shouldContinue === false || this.mounted === false) return false;
       const thisNode = this.findDOMNode();
       if (thisNode) {
-        if (this.props.enableUserSelectHack)
-          (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
+        if (this.props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
       }
       (0, _log.default)("DraggableCore: handleDragStop: %j", coreEvent);
       this.dragging = false;
@@ -249,49 +236,157 @@ class DraggableCore$1 extends React.Component {
       (0, _domFns.removeEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
         passive: false
       });
-      if (this.props.enableUserSelectHack)
-        (0, _domFns.removeUserSelectStyles)(ownerDocument);
+      if (this.props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(ownerDocument);
     }
   }
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
   findDOMNode() {
     var _this$props, _this$props2;
     return (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.nodeRef ? (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.nodeRef) === null || _this$props2 === void 0 ? void 0 : _this$props2.current : _reactDom.default.findDOMNode(this);
   }
   render() {
     return /* @__PURE__ */ React.cloneElement(React.Children.only(this.props.children), {
+      // Note: mouseMove handler is attached to document so it will still function
+      // when the user drags quickly and leaves the bounds of the element.
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });
   }
-}
+};
 DraggableCore$2.default = DraggableCore$1;
 _defineProperty(DraggableCore$1, "displayName", "DraggableCore");
 _defineProperty(DraggableCore$1, "propTypes", {
+  /**
+   * `allowAnyClick` allows dragging using any mouse button.
+   * By default, we only accept the left button.
+   *
+   * Defaults to `false`.
+   */
   allowAnyClick: _propTypes.default.bool,
   children: _propTypes.default.node.isRequired,
+  /**
+   * `disabled`, if true, stops the <Draggable> from dragging. All handlers,
+   * with the exception of `onMouseDown`, will not fire.
+   */
   disabled: _propTypes.default.bool,
+  /**
+   * By default, we add 'user-select:none' attributes to the document body
+   * to prevent ugly text selection during drag. If this is causing problems
+   * for your app, set this to `false`.
+   */
   enableUserSelectHack: _propTypes.default.bool,
+  /**
+   * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
+   * instead of using the parent node.
+   */
   offsetParent: function(props, propName) {
     if (props[propName] && props[propName].nodeType !== 1) {
       throw new Error("Draggable's offsetParent must be a DOM Node.");
     }
   },
+  /**
+   * `grid` specifies the x and y that dragging should snap to.
+   */
   grid: _propTypes.default.arrayOf(_propTypes.default.number),
+  /**
+   * `handle` specifies a selector to be used as the handle that initiates drag.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *         return (
+   *            <Draggable handle=".handle">
+   *              <div>
+   *                  <div className="handle">Click me to drag</div>
+   *                  <div>This is some other content</div>
+   *              </div>
+   *           </Draggable>
+   *         );
+   *       }
+   *   });
+   * ```
+   */
   handle: _propTypes.default.string,
+  /**
+   * `cancel` specifies a selector to be used to prevent drag initialization.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *           return(
+   *               <Draggable cancel=".cancel">
+   *                   <div>
+   *                     <div className="cancel">You can't drag from here</div>
+   *                     <div>Dragging here works fine</div>
+   *                   </div>
+   *               </Draggable>
+   *           );
+   *       }
+   *   });
+   * ```
+   */
   cancel: _propTypes.default.string,
+  /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
+   * Unfortunately, in order for <Draggable> to work properly, we need raw access
+   * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
+   * as in this example:
+   *
+   * function MyComponent() {
+   *   const nodeRef = React.useRef(null);
+   *   return (
+   *     <Draggable nodeRef={nodeRef}>
+   *       <div ref={nodeRef}>Example Target</div>
+   *     </Draggable>
+   *   );
+   * }
+   *
+   * This can be used for arbitrarily nested components, so long as the ref ends up
+   * pointing to the actual child DOM node and not a custom component.
+   */
   nodeRef: _propTypes.default.object,
+  /**
+   * Called when dragging starts.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
   onStart: _propTypes.default.func,
+  /**
+   * Called while dragging.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
   onDrag: _propTypes.default.func,
+  /**
+   * Called when dragging stops.
+   * If this function returns the boolean false, the drag will remain active.
+   */
   onStop: _propTypes.default.func,
+  /**
+   * A workaround option which can be passed if onMouseDown needs to be accessed,
+   * since it'll always be blocked (as there is internal use of onMouseDown)
+   */
   onMouseDown: _propTypes.default.func,
+  /**
+   * `scale`, if set, applies scaling while dragging an element
+   */
   scale: _propTypes.default.number,
+  /**
+   * These properties should be defined on the child, not here.
+   */
   className: _shims.dontSetMe,
   style: _shims.dontSetMe,
   transform: _shims.dontSetMe
 });
 _defineProperty(DraggableCore$1, "defaultProps", {
   allowAnyClick: false,
+  // by default only accept left click
   disabled: false,
   enableUserSelectHack: true,
   onStart: function() {
@@ -328,8 +423,7 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     return obj && obj.__esModule ? obj : { default: obj };
   }
   function _getRequireWildcardCache2(nodeInterop) {
-    if (typeof WeakMap !== "function")
-      return null;
+    if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = /* @__PURE__ */ new WeakMap();
     var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
     return (_getRequireWildcardCache2 = function(nodeInterop2) {
@@ -337,7 +431,7 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     })(nodeInterop);
   }
   function _interopRequireWildcard2(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
+    if (obj && obj.__esModule) {
       return obj;
     }
     if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
@@ -393,18 +487,18 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     return typeof key === "symbol" ? key : String(key);
   }
   function _toPrimitive2(input, hint) {
-    if (typeof input !== "object" || input === null)
-      return input;
+    if (typeof input !== "object" || input === null) return input;
     var prim = input[Symbol.toPrimitive];
     if (prim !== void 0) {
       var res = prim.call(input, hint || "default");
-      if (typeof res !== "object")
-        return res;
+      if (typeof res !== "object") return res;
       throw new TypeError("@@toPrimitive must return a primitive value.");
     }
     return (hint === "string" ? String : Number)(input);
   }
   class Draggable2 extends React2.Component {
+    // React 16.3+
+    // Arity (props, state)
     static getDerivedStateFromProps(_ref, _ref2) {
       let {
         position
@@ -432,16 +526,14 @@ _defineProperty(DraggableCore$1, "defaultProps", {
       _defineProperty2(this, "onDragStart", (e, coreData) => {
         (0, _log2.default)("Draggable: onDragStart: %j", coreData);
         const shouldStart = this.props.onStart(e, (0, _positionFns2.createDraggableData)(this, coreData));
-        if (shouldStart === false)
-          return false;
+        if (shouldStart === false) return false;
         this.setState({
           dragging: true,
           dragged: true
         });
       });
       _defineProperty2(this, "onDrag", (e, coreData) => {
-        if (!this.state.dragging)
-          return false;
+        if (!this.state.dragging) return false;
         (0, _log2.default)("Draggable: onDrag: %j", coreData);
         const uiData = (0, _positionFns2.createDraggableData)(this, coreData);
         const newState = {
@@ -468,16 +560,13 @@ _defineProperty(DraggableCore$1, "defaultProps", {
           uiData.deltaY = newState.y - this.state.y;
         }
         const shouldUpdate = this.props.onDrag(e, uiData);
-        if (shouldUpdate === false)
-          return false;
+        if (shouldUpdate === false) return false;
         this.setState(newState);
       });
       _defineProperty2(this, "onDragStop", (e, coreData) => {
-        if (!this.state.dragging)
-          return false;
+        if (!this.state.dragging) return false;
         const shouldContinue = this.props.onStop(e, (0, _positionFns2.createDraggableData)(this, coreData));
-        if (shouldContinue === false)
-          return false;
+        if (shouldContinue === false) return false;
         (0, _log2.default)("Draggable: onDragStop: %j", coreData);
         const newState = {
           dragging: false,
@@ -496,15 +585,20 @@ _defineProperty(DraggableCore$1, "defaultProps", {
         this.setState(newState);
       });
       this.state = {
+        // Whether or not we are currently dragging.
         dragging: false,
+        // Whether or not we have been dragged before.
         dragged: false,
+        // Current transform x and y.
         x: props.position ? props.position.x : props.defaultPosition.x,
         y: props.position ? props.position.y : props.defaultPosition.y,
         prevPropsPosition: {
           ...props.position
         },
+        // Used for compensating for out-of-bounds drags
         slackX: 0,
         slackY: 0,
+        // Can only determine if SVG after mounting
         isElementSVG: false
       };
       if (props.position && !(props.onDrag || props.onStop)) {
@@ -523,6 +617,8 @@ _defineProperty(DraggableCore$1, "defaultProps", {
         dragging: false
       });
     }
+    // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+    // the underlying DOM node ourselves. See the README for more information.
     findDOMNode() {
       var _this$props$nodeRef$c, _this$props;
       return (_this$props$nodeRef$c = (_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.nodeRef) === null || _this$props === void 0 ? void 0 : _this$props.current) !== null && _this$props$nodeRef$c !== void 0 ? _this$props$nodeRef$c : _reactDom2.default.findDOMNode(this);
@@ -547,7 +643,9 @@ _defineProperty(DraggableCore$1, "defaultProps", {
       const draggable = !controlled || this.state.dragging;
       const validPosition = position || defaultPosition;
       const transformOpts = {
+        // Set left if horizontal drag is enabled
         x: (0, _positionFns2.canDragX)(this) && draggable ? this.state.x : validPosition.x,
+        // Set top if vertical drag is enabled
         y: (0, _positionFns2.canDragY)(this) && draggable ? this.state.y : validPosition.y
       };
       if (this.state.isElementSVG) {
@@ -576,8 +674,48 @@ _defineProperty(DraggableCore$1, "defaultProps", {
   exports.default = Draggable2;
   _defineProperty2(Draggable2, "displayName", "Draggable");
   _defineProperty2(Draggable2, "propTypes", {
+    // Accepts all props <DraggableCore> accepts.
     ..._DraggableCore.default.propTypes,
+    /**
+     * `axis` determines which axis the draggable can move.
+     *
+     *  Note that all callbacks will still return data as normal. This only
+     *  controls flushing to the DOM.
+     *
+     * 'both' allows movement horizontally and vertically.
+     * 'x' limits movement to horizontal axis.
+     * 'y' limits movement to vertical axis.
+     * 'none' limits all movement.
+     *
+     * Defaults to 'both'.
+     */
     axis: _propTypes2.default.oneOf(["both", "x", "y", "none"]),
+    /**
+     * `bounds` determines the range of movement available to the element.
+     * Available values are:
+     *
+     * 'parent' restricts movement within the Draggable's parent node.
+     *
+     * Alternatively, pass an object with the following properties, all of which are optional:
+     *
+     * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
+     *
+     * All values are in px.
+     *
+     * Example:
+     *
+     * ```jsx
+     *   let App = React.createClass({
+     *       render: function () {
+     *         return (
+     *            <Draggable bounds={{right: 300, bottom: 300}}>
+     *              <div>Content</div>
+     *           </Draggable>
+     *         );
+     *       }
+     *   });
+     * ```
+     */
     bounds: _propTypes2.default.oneOfType([_propTypes2.default.shape({
       left: _propTypes2.default.number,
       right: _propTypes2.default.number,
@@ -587,6 +725,23 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     defaultClassName: _propTypes2.default.string,
     defaultClassNameDragging: _propTypes2.default.string,
     defaultClassNameDragged: _propTypes2.default.string,
+    /**
+     * `defaultPosition` specifies the x and y that the dragged item should start at
+     *
+     * Example:
+     *
+     * ```jsx
+     *      let App = React.createClass({
+     *          render: function () {
+     *              return (
+     *                  <Draggable defaultPosition={{x: 25, y: 25}}>
+     *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+     *                  </Draggable>
+     *              );
+     *          }
+     *      });
+     * ```
+     */
     defaultPosition: _propTypes2.default.shape({
       x: _propTypes2.default.number,
       y: _propTypes2.default.number
@@ -595,10 +750,33 @@ _defineProperty(DraggableCore$1, "defaultProps", {
       x: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
       y: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
     }),
+    /**
+     * `position`, if present, defines the current position of the element.
+     *
+     *  This is similar to how form elements in React work - if no `position` is supplied, the component
+     *  is uncontrolled.
+     *
+     * Example:
+     *
+     * ```jsx
+     *      let App = React.createClass({
+     *          render: function () {
+     *              return (
+     *                  <Draggable position={{x: 25, y: 25}}>
+     *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+     *                  </Draggable>
+     *              );
+     *          }
+     *      });
+     * ```
+     */
     position: _propTypes2.default.shape({
       x: _propTypes2.default.number,
       y: _propTypes2.default.number
     }),
+    /**
+     * These properties should be defined on the child, not here.
+     */
     className: _shims2.dontSetMe,
     style: _shims2.dontSetMe,
     transform: _shims2.dontSetMe
@@ -616,15 +794,18 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     },
     scale: 1
   });
-})(Draggable$1);
+})(Draggable$2);
 const {
   default: Draggable,
-  DraggableCore
-} = Draggable$1;
+  DraggableCore: DraggableCore2
+} = Draggable$2;
 cjs.exports = Draggable;
 cjs.exports.default = Draggable;
-var DraggableCore_1 = cjs.exports.DraggableCore = DraggableCore;
+var DraggableCore_1 = cjs.exports.DraggableCore = DraggableCore2;
+var cjsExports = cjs.exports;
+const Draggable$1 = /* @__PURE__ */ getDefaultExportFromCjs(cjsExports);
 export {
   DraggableCore_1 as D,
-  cjs as c
+  Draggable$1 as a,
+  cjsExports as c
 };