react-align 1.1.2

package/dist/react-align.esm.js

@@ -0,0 +1,716 @@
+import React__default, { useContext, createContext, createElement, useRef, useState, useMemo, useCallback } from 'react';
+import { DndProvider, useDrop, useDrag } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { css } from 'glamor';
+
+var EditorModeContext = /*#__PURE__*/createContext({
+  enabled: undefined
+});
+var useEditorMode = function useEditorMode() {
+  return useContext(EditorModeContext);
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".wrapper{height:100%}.section,.wrapper{display:flex;justify-content:space-between}.section{flex-direction:column}.area{border:1px solid transparent;border-radius:8px;box-sizing:border-box;display:flex;position:relative}.area-transition-in{transition:all .3s ease-in-out,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.area-transition-out{transition:all .3s ease-in-out .4s,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.item{border:1px solid transparent;border-radius:6px;box-sizing:border-box;margin:6px}.vertical{flex-direction:column}.vertical-r{flex-direction:column-reverse}.horizontal{flex-direction:row}.horizontal-r{flex-direction:row-reverse}.stretch{flex:auto}.middle{flex-grow:0;flex:auto}.just-centered{justify-content:center}.just-end{justify-content:flex-end}.end{align-items:flex-end}.hide{display:none}";
+styleInject(css_248z);
+
+var GridWrapper = function GridWrapper(_ref) {
+  var className = _ref.className,
+      enabled = _ref.enabled,
+      vertical = _ref.vertical,
+      stretch = _ref.stretch,
+      styles = _ref.styles,
+      editorStyles = _ref.editorStyles,
+      children = _ref.children;
+  return React__default.createElement("div", {
+    className: "wrapper " + className + " " + (vertical && 'vertical') + " " + (stretch && 'stretch'),
+    style: enabled ? editorStyles : styles
+  }, React__default.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, React__default.createElement(EditorModeContext.Provider, {
+    value: {
+      enabled: enabled
+    }
+  }, children)));
+};
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var GridSection = function GridSection(_ref) {
+  var className = _ref.className,
+      horizontal = _ref.horizontal,
+      stretch = _ref.stretch,
+      fixedWidth = _ref.fixedWidth,
+      fixedHeight = _ref.fixedHeight,
+      styles = _ref.styles,
+      editorStyles = _ref.editorStyles,
+      children = _ref.children;
+
+  var _useEditorMode = useEditorMode(),
+      enabled = _useEditorMode.enabled;
+
+  var stylesFromProps = enabled ? editorStyles : styles;
+  return React__default.createElement("div", {
+    className: "section " + className + " " + (horizontal && 'horizontal') + " " + (stretch && 'stretch'),
+    style: _extends({}, stylesFromProps, {
+      height: fixedHeight + 'px',
+      width: fixedWidth + 'px'
+    })
+  }, children);
+};
+
+var _path;
+
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+function SvgHorizontalExtend(props) {
+  return /*#__PURE__*/createElement("svg", _extends$1({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+    d: "M1 20.25V3.75M23 20.25V3.75M12 12h8.5M17.5 9l3 3-3 3M12 12H4M7 15l-3-3 3-3",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+
+var _path$1, _rect;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+function SvgHorizontalNormal(props) {
+  return /*#__PURE__*/createElement("svg", _extends$2({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
+    d: "M1 12h5M3 9l3 3-3 3M23 12h-5M21 15l-3-3 3-3",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _rect || (_rect = /*#__PURE__*/createElement("rect", {
+    x: 8.75,
+    y: 2.75,
+    width: 6.5,
+    height: 18.5,
+    rx: 1.25,
+    stroke: "currentColor",
+    strokeWidth: 1.5
+  })));
+}
+
+var _path$2;
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+function SvgVerticalExtend(props) {
+  return /*#__PURE__*/createElement("svg", _extends$3({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
+    d: "M3.75 1h16.5M3.75 23h16.5M12 12v8.5M15 17.5l-3 3-3-3M12 12V4M9 7l3-3 3 3",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+
+var _path$3, _rect$1;
+
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+function SvgVerticalNormal(props) {
+  return /*#__PURE__*/createElement("svg", _extends$4({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/createElement("path", {
+    d: "M12 1v5M15 3l-3 3-3-3M12 23v-5M9 21l3-3 3 3",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _rect$1 || (_rect$1 = /*#__PURE__*/createElement("rect", {
+    x: 21.25,
+    y: 8.75,
+    width: 6.5,
+    height: 18.5,
+    rx: 1.25,
+    transform: "rotate(90 21.25 8.75)",
+    stroke: "currentColor",
+    strokeWidth: 1.5
+  })));
+}
+
+var _path$4;
+
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+
+function SvgMoveArrows(props) {
+  return /*#__PURE__*/createElement("svg", _extends$5({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/createElement("path", {
+    d: "M14.651 19.098L12 21.749l-2.652-2.651M12 15v6.75M9.348 4.902L12 2.25l2.651 2.652M12 9V2.25M4.902 14.65L2.25 12l2.652-2.652M9 12H2.25M19.098 9.348l2.652 2.651-2.652 2.652M15 12h6.75",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+
+var _rect$2, _path$5;
+
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+
+function SvgAlignStart(props) {
+  return /*#__PURE__*/createElement("svg", _extends$6({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$2 || (_rect$2 = /*#__PURE__*/createElement("rect", {
+    width: 24,
+    height: 24,
+    rx: 4,
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$5 || (_path$5 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 5h14v14H5V5zM4 4h16v16H4V4zm2 6a1 1 0 012 0v4a1 1 0 11-2 0v-4zm3 0a1 1 0 012 0v4a1 1 0 11-2 0v-4zm4-1a1 1 0 00-1 1v4a1 1 0 102 0v-4a1 1 0 00-1-1z",
+    fill: "currentColor"
+  })));
+}
+
+var _rect$3, _path$6;
+
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+
+function SvgAlignCenter(props) {
+  return /*#__PURE__*/createElement("svg", _extends$7({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$3 || (_rect$3 = /*#__PURE__*/createElement("rect", {
+    width: 24,
+    height: 24,
+    rx: 4,
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$6 || (_path$6 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 19H5V5h14v14zm1 1H4V4h16v16zm-4-6a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-3 0a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-4 1a1 1 0 001-1v-4a1 1 0 10-2 0v4a1 1 0 001 1z",
+    fill: "currentColor"
+  })));
+}
+
+var _rect$4, _path$7;
+
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+function SvgAlignEnd(props) {
+  return /*#__PURE__*/createElement("svg", _extends$8({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$4 || (_rect$4 = /*#__PURE__*/createElement("rect", {
+    width: 24,
+    height: 24,
+    rx: 4,
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$7 || (_path$7 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 19H5V5h14v14zm1 1H4V4h16v16zm-2-6a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-3 0a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-4 1a1 1 0 001-1v-4a1 1 0 10-2 0v4a1 1 0 001 1z",
+    fill: "currentColor"
+  })));
+}
+
+var _rect$5, _path$8;
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+
+function SvgAlignStartV(props) {
+  return /*#__PURE__*/createElement("svg", _extends$9({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$5 || (_rect$5 = /*#__PURE__*/createElement("rect", {
+    y: 24,
+    width: 24,
+    height: 24,
+    rx: 4,
+    transform: "rotate(-90 0 24)",
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$8 || (_path$8 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 5v14H5V5h14zm1-1v16H4V4h16zm-6 2a1 1 0 110 2h-4a1 1 0 110-2h4zm0 3a1 1 0 110 2h-4a1 1 0 110-2h4zm1 4a1 1 0 00-1-1h-4a1 1 0 100 2h4a1 1 0 001-1z",
+    fill: "currentColor"
+  })));
+}
+
+var _rect$6, _path$9;
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+function SvgAlignCenterV(props) {
+  return /*#__PURE__*/createElement("svg", _extends$a({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$6 || (_rect$6 = /*#__PURE__*/createElement("rect", {
+    y: 24,
+    width: 24,
+    height: 24,
+    rx: 4,
+    transform: "rotate(-90 0 24)",
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$9 || (_path$9 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 5v14H5V5h14zm1-1v16H4V4h16zm-6 4a1 1 0 110 2h-4a1 1 0 110-2h4zm0 3a1 1 0 110 2h-4a1 1 0 110-2h4zm1 4a1 1 0 00-1-1h-4a1 1 0 100 2h4a1 1 0 001-1z",
+    fill: "currentColor"
+  })));
+}
+
+var _rect$7, _path$a;
+
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+
+function SvgAlignEndV(props) {
+  return /*#__PURE__*/createElement("svg", _extends$b({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$7 || (_rect$7 = /*#__PURE__*/createElement("rect", {
+    y: 24,
+    width: 24,
+    height: 24,
+    rx: 4,
+    transform: "rotate(-90 0 24)",
+    fill: "#000",
+    fillOpacity: 0.5
+  })), _path$a || (_path$a = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 19V5h14v14H5zm-1 1V4h16v16H4zm6-2a1 1 0 110-2h4a1 1 0 110 2h-4zm0-3a1 1 0 110-2h4a1 1 0 110 2h-4zm-1-4a1 1 0 001 1h4a1 1 0 100-2h-4a1 1 0 00-1 1z",
+    fill: "currentColor"
+  })));
+}
+
+var Icons = {
+  horizontalExtend: SvgHorizontalExtend,
+  horizontalNormal: SvgHorizontalNormal,
+  verticalExtend: SvgVerticalExtend,
+  verticalNormal: SvgVerticalNormal,
+  moveArrows: SvgMoveArrows,
+  alignStart: SvgAlignStart,
+  alignCenter: SvgAlignCenter,
+  alignEnd: SvgAlignEnd,
+  alignStartV: SvgAlignStartV,
+  alignCenterV: SvgAlignCenterV,
+  alignEndV: SvgAlignEndV
+};
+
+var IconStyles = function IconStyles(size) {
+  return css({
+    cursor: 'pointer',
+    width: size || 24 + 'px',
+    height: size || 24 + 'px',
+    ' svg': {
+      height: size || 24 + 'px',
+      width: size || 24 + 'px'
+    }
+  });
+};
+
+var Icon = function Icon(_ref) {
+  var className = _ref.className,
+      name = _ref.name,
+      size = _ref.size,
+      onClick = _ref.onClick,
+      styles = _ref.styles;
+  var LocalIconComponent = Icons[name];
+  return React__default.createElement(LocalIconComponent, Object.assign({
+    className: className
+  }, IconStyles(size), {
+    style: styles,
+    onClick: onClick
+  }));
+};
+
+var ItemType = {
+  ITEM: 'react-align_item',
+  GROUP: 'react-align_group'
+};
+
+var GridItem = function GridItem(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      id = _ref.id,
+      index = _ref.index,
+      extendable = _ref.extendable,
+      extended = _ref.extended,
+      draggable = _ref.draggable,
+      onReorder = _ref.onReorder,
+      onMoveArea = _ref.onMoveArea,
+      onExtend = _ref.onExtend,
+      location = _ref.location,
+      end = _ref.end,
+      vertical = _ref.vertical,
+      styles = _ref.styles,
+      editorStyles = _ref.editorStyles,
+      iconSize = _ref.iconSize,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? 'rgb(255, 255, 255)' : _ref$iconColor;
+  var ref = useRef(null);
+
+  var _useEditorMode = useEditorMode(),
+      enabled = _useEditorMode.enabled;
+
+  var _useState = useState(false),
+      isHovered = _useState[0],
+      setHovered = _useState[1];
+
+  var handleExtend = function handleExtend() {
+    if (!extendable || !onExtend) return;
+    setHovered(false);
+    onExtend(id, !extended);
+  }; // ***************************************
+  // Drag n drop logic
+
+
+  var _useDrop = useDrop({
+    accept: [ItemType.ITEM, ItemType.GROUP],
+    collect: function collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId()
+      };
+    },
+    hover: function hover(item, monitor) {
+      var _ref$current;
+
+      if (!ref.current || !enabled || draggable) {
+        return;
+      }
+
+      var dragIndex = item.index;
+      var hoverIndex = index;
+
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      var hoverBoundingRect = (_ref$current = ref.current) == null ? void 0 : _ref$current.getBoundingClientRect();
+      var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      var hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+      var clientOffset = monitor.getClientOffset();
+      if (!clientOffset) return;
+      var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      var hoverClientX = clientOffset.x - hoverBoundingRect.left;
+
+      if (vertical) {
+        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+          return;
+        }
+
+        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+          return;
+        }
+      } else {
+        if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+          return;
+        }
+
+        if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+          return;
+        }
+      }
+
+      onReorder(item.id, location, dragIndex, hoverIndex);
+    }
+  }),
+      handlerId = _useDrop[0].handlerId,
+      drop = _useDrop[1];
+
+  var _useDrag = useDrag({
+    type: ItemType.ITEM,
+    item: {
+      id: id,
+      index: index
+    },
+    canDrag: draggable != null ? draggable : enabled,
+    end: function end(item, monitor) {
+      var dropResults = monitor.getDropResult();
+
+      if (dropResults) {
+        onMoveArea(item.id, dropResults.location, location);
+      }
+    },
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    }
+  }),
+      isDragging = _useDrag[0].isDragging,
+      drag = _useDrag[1],
+      preview = _useDrag[2];
+
+  preview(drop(ref)); // ***************************************
+  // ***************************************
+  // External styles for editorMode or the vanilla grid
+
+  var stylesFromProps = enabled ? editorStyles : styles;
+  var itemStyles = useMemo(function () {
+    return {
+      opacity: isDragging ? 0.5 : 1,
+      minHeight: isHovered && enabled ? '40px' : undefined,
+      width: !vertical && extended ? '100%' : undefined,
+      minWidth: isHovered && enabled ? extendable ? '70px' : '30px' : undefined,
+      height: vertical && extended ? '100%' : undefined
+    };
+  }, [isDragging, isHovered, enabled, vertical, extended, extendable]);
+  var containerStyle = useMemo(function () {
+    return {
+      position: 'relative',
+      display: 'inline-block',
+      minHeight: isHovered && enabled ? '40px' : undefined,
+      width: !vertical && extended ? '100%' : undefined,
+      minWidth: isHovered && enabled ? extendable ? '70px' : '30px' : undefined,
+      height: vertical && extended ? '100%' : undefined
+    };
+  }, [isHovered, enabled, vertical, extended, extendable]);
+  var overlayStyles = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    background: 'rgba(0,0,0,0.6)',
+    borderRadius: '6px'
+  };
+  var buttonStyles = useMemo(function () {
+    return {
+      display: 'flex',
+      alignItems: end ? 'end' : 'start',
+      justifyContent: 'space-between',
+      padding: '6px',
+      "float": end ? 'right' : 'left'
+    };
+  }, [end]); // ***************************************
+
+  var childrenWithParentProps = React__default.Children.map(children, function (child) {
+    return React__default.cloneElement(child, {
+      extended: extended
+    });
+  });
+  return React__default.createElement("div", {
+    id: id,
+    ref: ref,
+    "data-handler-id": handlerId,
+    className: className + " item",
+    style: _extends({}, itemStyles, stylesFromProps),
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    }
+  }, React__default.createElement("div", {
+    style: containerStyle
+  }, (draggable != null ? draggable : enabled) && isHovered && React__default.createElement("div", {
+    style: overlayStyles
+  }, React__default.createElement("div", {
+    style: buttonStyles
+  }, React__default.createElement("div", {
+    ref: drag
+  }, React__default.createElement(Icon, {
+    name: "moveArrows",
+    size: iconSize,
+    styles: {
+      color: iconColor
+    }
+  })), extendable && React__default.createElement(Icon, {
+    name: vertical ? 'verticalExtend' : 'horizontalExtend',
+    size: iconSize,
+    styles: {
+      color: iconColor,
+      marginLeft: '8px'
+    },
+    onClick: handleExtend
+  }))), childrenWithParentProps));
+};
+
+var GridArea = function GridArea(_ref) {
+  var className = _ref.className,
+      vertical = _ref.vertical,
+      reverse = _ref.reverse,
+      stretch = _ref.stretch,
+      end = _ref.end,
+      droppable = _ref.droppable,
+      align = _ref.align,
+      onAlignChange = _ref.onAlignChange,
+      location = _ref.location,
+      children = _ref.children,
+      styles = _ref.styles,
+      editorStyles = _ref.editorStyles,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? '#FFFFFF' : _ref$iconColor;
+
+  var _useEditorMode = useEditorMode(),
+      enabled = _useEditorMode.enabled;
+
+  var handleAlignChange = useCallback(function (align) {
+    switch (align) {
+      case 'start':
+        onAlignChange == null ? void 0 : onAlignChange('centered');
+        break;
+
+      case 'centered':
+        onAlignChange == null ? void 0 : onAlignChange('end');
+        break;
+
+      default:
+        onAlignChange == null ? void 0 : onAlignChange('start');
+        break;
+    }
+  }, [onAlignChange]); // ***************************************
+  // Drop logic
+
+  var _useDrop = useDrop(function () {
+    return {
+      accept: [ItemType.ITEM, ItemType.GROUP],
+      drop: function drop() {
+        return {
+          location: location
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver()
+        };
+      }
+    };
+  }),
+      isOver = _useDrop[0].isOver,
+      drop = _useDrop[1]; // ***************************************
+  // ***************************************
+  // Internal styles used
+
+
+  var buttonStyle = useMemo(function () {
+    return {
+      position: 'absolute',
+      left: vertical ? end ? 0 : undefined : '50%',
+      right: vertical ? !end ? 0 : undefined : '50%',
+      bottom: !vertical && !end ? 0 : vertical ? '50%' : undefined,
+      top: vertical ? '50%' : end ? 0 : undefined,
+      opacity: (droppable != null ? droppable : enabled) && align ? 1 : 0,
+      transition: 'all 0.5s ease-in-out'
+    };
+  }, [vertical, end, droppable, enabled, align]);
+  var mainStyles = useMemo(function () {
+    return {
+      opacity: isOver ? 0.8 : 1,
+      minHeight: !React__default.Children.count(children) && !enabled ? '0px' : '26px',
+      minWidth: !React__default.Children.count(children) && !enabled ? '0px' : '46px'
+    };
+  }, [isOver, children, enabled]);
+  var stylesFromProps = enabled ? editorStyles : styles; // ***************************************
+  // Rebuilds the GridItem children to receive their parent GridArea's 'end' and 'vertical' values.
+  // Used to know where to align the overlay buttons (end) and how to extend the GridItems (vertical).
+
+  var childrenWithParentProps = React__default.Children.map(children, function (child) {
+    return React__default.cloneElement(child, {
+      end: end,
+      vertical: vertical,
+      location: location
+    });
+  });
+  return React__default.createElement("div", {
+    ref: drop,
+    className: "\n      " + className + "\n      area\n      " + (stretch && 'stretch') + "\n      " + (end && 'end') + "\n      " + (align === 'centered' ? 'just-centered' : align === 'end' ? 'just-end' : 'start') + "\n      " + (vertical ? reverse ? 'vertical-r' : 'vertical' : reverse ? 'horizontal-r' : 'horizontal') + "\n      " + (enabled ? 'area-transition-in' : 'area-transition-out') + "\n      ",
+    style: _extends({}, mainStyles, stylesFromProps)
+  }, childrenWithParentProps, React__default.createElement("div", {
+    style: buttonStyle
+  }, React__default.createElement(Icon, {
+    name: align === 'centered' ? vertical ? 'alignCenterV' : 'alignCenter' : align === 'end' ? vertical ? 'alignEndV' : 'alignEnd' : vertical ? 'alignStartV' : 'alignStart',
+    styles: {
+      color: iconColor,
+      cursor: (droppable != null ? droppable : enabled) && align && !!React__default.Children.count(children) ? 'pointer' : 'default'
+    },
+    onClick: (droppable != null ? droppable : enabled) && align && !!React__default.Children.count(children) ? function () {
+      return handleAlignChange(align);
+    } : undefined
+  })));
+};
+
+export { GridArea, GridItem, GridSection, GridWrapper, Icon };
+//# sourceMappingURL=react-align.esm.js.map