react-align 2.0.3 → 2.1.0

package/dist/react-align.cjs.development.js

@@ -1,640 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-var reactBeautifulDnd = require('react-beautiful-dnd');
-var glamor = require('glamor');
-
-var Context = /*#__PURE__*/React.createContext({
-  editing: false,
-  isDragging: false
-});
-var useAlignContext = function useAlignContext() {
-  return React.useContext(Context);
-};
-
-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;min-height:40px;min-width:70px;position:relative}.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}.overlay{background:rgba(0,0,0,.6);bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.overlay-buttons{box-sizing:border-box;display:flex;justify-content:space-between;padding:6px}";
-styleInject(css_248z);
-
-var GridWrapper = function GridWrapper(_ref) {
-  var className = _ref.className,
-      editing = _ref.editing,
-      vertical = _ref.vertical,
-      stretch = _ref.stretch,
-      style = _ref.style,
-      editorStyle = _ref.editorStyle,
-      children = _ref.children,
-      onMove = _ref.onMove,
-      onAlignChange = _ref.onAlignChange,
-      onExtend = _ref.onExtend;
-
-  var _useState = React.useState(false),
-      isDragging = _useState[0],
-      setDragging = _useState[1];
-
-  var handleDragStart = React.useCallback(function () {
-    setDragging(true);
-  }, []);
-  var handleDragEnd = React.useCallback(function (result, _provided) {
-    setDragging(false);
-    if (!result.destination || result.reason !== 'DROP' || result.destination.droppableId === result.source.droppableId && result.destination.index === result.source.index) return;
-    onMove == null ? void 0 : onMove(result.draggableId, result.destination.droppableId, result.destination.index, result.source.droppableId, result.source.index);
-  }, [onMove]);
-  return React__default.createElement("div", {
-    className: "wrapper " + className + " " + (vertical && 'vertical') + " " + (stretch && 'stretch'),
-    style: editing ? editorStyle : style
-  }, React__default.createElement(reactBeautifulDnd.DragDropContext, {
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  }, React__default.createElement(Context.Provider, {
-    value: {
-      editing: !!editing,
-      onAlignChange: onAlignChange,
-      onExtend: onExtend,
-      isDragging: isDragging
-    }
-  }, 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);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var GridSection = function GridSection(_ref) {
-  var className = _ref.className,
-      horizontal = _ref.horizontal,
-      stretch = _ref.stretch,
-      fixedWidth = _ref.fixedWidth,
-      fixedHeight = _ref.fixedHeight,
-      style = _ref.style,
-      editorStyle = _ref.editorStyle,
-      children = _ref.children;
-
-  var _useAlignContext = useAlignContext(),
-      enabled = _useAlignContext.editing;
-
-  return React__default.createElement("div", {
-    className: "section " + className + " " + (horizontal ? 'horizontal' : '') + " " + (stretch ? 'stretch' : ''),
-    style: _extends({}, enabled ? editorStyle : style, typeof fixedHeight === 'number' ? {
-      height: fixedHeight + 'px'
-    } : {}, typeof fixedWidth === 'number' ? {
-      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__*/React.createElement("svg", _extends$1({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$2({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", _extends$3({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$4({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", _extends$5({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$6({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$2 || (_rect$2 = /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    rx: 4,
-    fill: "#000",
-    fillOpacity: 0.5
-  })), _path$5 || (_path$5 = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$7({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$3 || (_rect$3 = /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    rx: 4,
-    fill: "#000",
-    fillOpacity: 0.5
-  })), _path$6 || (_path$6 = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$8({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$4 || (_rect$4 = /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    rx: 4,
-    fill: "#000",
-    fillOpacity: 0.5
-  })), _path$7 || (_path$7 = /*#__PURE__*/React.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__*/React.createElement("svg", _extends$9({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$5 || (_rect$5 = /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", _extends$a({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$6 || (_rect$6 = /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", _extends$b({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$7 || (_rect$7 = /*#__PURE__*/React.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__*/React.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 glamor.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,
-      style = _ref.style,
-      onClick = _ref.onClick;
-  var LocalIconComponent = Icons[name];
-  return React__default.createElement(LocalIconComponent, Object.assign({
-    className: className
-  }, IconStyles(size), {
-    style: style,
-    onClick: onClick
-  }));
-};
-
-var alignments = ['start', 'centered', 'end'];
-function GridArea(_ref) {
-  var id = _ref.id,
-      className = _ref.className,
-      vertical = _ref.vertical,
-      stretch = _ref.stretch,
-      end = _ref.end,
-      disabled = _ref.disabled,
-      align = _ref.align,
-      onAlignChange = _ref.onAlignChange,
-      children = _ref.children,
-      style = _ref.style,
-      editorStyle = _ref.editorStyle,
-      _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? '#FFFFFF' : _ref$iconColor;
-
-  var _useAlignContext = useAlignContext(),
-      enabled = _useAlignContext.editing,
-      onAlignChange2 = _useAlignContext.onAlignChange;
-
-  var handleAlignChange = React.useCallback(function () {
-    var a = alignments[(align ? alignments.indexOf(align) + 1 : 0) % alignments.length];
-    onAlignChange == null ? void 0 : onAlignChange(a);
-    onAlignChange2 == null ? void 0 : onAlignChange2(id, a);
-  }, [align, onAlignChange, onAlignChange2, id]);
-  var buttonStyle = React.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: !disabled && enabled && align ? 1 : 0,
-      pointerEvents: !disabled && enabled && align ? 'auto' : 'none',
-      transition: 'all 0.5s ease-in-out'
-    };
-  }, [vertical, end, disabled, enabled, align]); // 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.useMemo(function () {
-    return React__default.Children.map(children, function (child) {
-      return React__default.cloneElement(child, {
-        end: end,
-        vertical: vertical
-      });
-    });
-  }, [children, end, vertical]);
-  return React__default.createElement(reactBeautifulDnd.Droppable, {
-    droppableId: id,
-    direction: vertical ? 'vertical' : 'horizontal',
-    isDropDisabled: disabled
-  }, function (provided, snapshot) {
-    return React__default.createElement("div", Object.assign({
-      ref: provided.innerRef
-    }, provided.droppableProps, {
-      className: [className, 'area', stretch && 'stretch', end && 'end', align === 'centered' ? 'just-centered' : align === 'end' ? 'just-end' : 'start', enabled ? 'area-transition-in' : 'area-transition-out'].filter(Boolean).join(' '),
-      style: _extends({
-        flexDirection: vertical ? 'column' : 'row',
-        minHeight: !React__default.Children.count(children) && !enabled ? '0px' : '26px',
-        minWidth: !React__default.Children.count(children) && !enabled ? '0px' : '46px',
-        opacity: snapshot.isDraggingOver ? 0.8 : 1
-      }, enabled ? editorStyle : style)
-    }), childrenWithParentProps, provided.placeholder, React__default.createElement("div", {
-      style: buttonStyle
-    }, React__default.createElement("div", {
-      onClick: handleAlignChange,
-      style: {
-        cursor: 'pointer'
-      }
-    }, React__default.createElement(Icon, {
-      name: align === 'centered' ? vertical ? 'alignCenterV' : 'alignCenter' : align === 'end' ? vertical ? 'alignEndV' : 'alignEnd' : vertical ? 'alignStartV' : 'alignStart',
-      style: {
-        color: iconColor
-      }
-    }))));
-  });
-}
-
-function GridItem(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      id = _ref.id,
-      index = _ref.index,
-      _ref$extendable = _ref.extendable,
-      extendable = _ref$extendable === void 0 ? false : _ref$extendable,
-      _ref$extended = _ref.extended,
-      extended = _ref$extended === void 0 ? false : _ref$extended,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      style = _ref.style,
-      editorStyle = _ref.editorStyle,
-      iconSize = _ref.iconSize,
-      _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? 'rgb(255, 255, 255)' : _ref$iconColor,
-      props = _objectWithoutPropertiesLoose(_ref, ["className", "children", "id", "index", "extendable", "extended", "disabled", "style", "editorStyle", "iconSize", "iconColor"]);
-
-  var end = props.end,
-      vertical = props.vertical;
-
-  var _useAlignContext = useAlignContext(),
-      editing = _useAlignContext.editing,
-      isDragging = _useAlignContext.isDragging,
-      onExtend = _useAlignContext.onExtend;
-
-  var _useState = React.useState(false),
-      isHovered = _useState[0],
-      setHovered = _useState[1];
-
-  var handleExtend = React.useCallback(function () {
-    if (!extendable) return;
-    setHovered(false);
-    onExtend == null ? void 0 : onExtend(id, !extended);
-  }, [extendable, onExtend, extended, id]);
-  var buttonStyles = React.useMemo(function () {
-    return {
-      alignItems: end ? 'end' : 'start',
-      "float": end ? 'right' : 'left'
-    };
-  }, [end]);
-  var ctx = React.useMemo(function () {
-    return {
-      id: id,
-      editing: editing,
-      isDragging: isDragging,
-      isHovered: isHovered,
-      extended: extended,
-      extendable: extendable,
-      disabled: disabled,
-      index: index
-    };
-  }, [disabled, editing, extendable, extended, id, index, isDragging, isHovered]);
-  return React__default.createElement(reactBeautifulDnd.Draggable, {
-    draggableId: id,
-    index: index,
-    isDragDisabled: disabled
-  }, function (provided, snapshot) {
-    return React__default.createElement("div", Object.assign({
-      ref: provided.innerRef
-    }, provided.draggableProps, {
-      className: className + " item",
-      style: _extends({
-        flex: extended && !snapshot.isDragging ? 'auto' : undefined,
-        opacity: snapshot.isDragging ? 0.5 : 1
-      }, editing ? editorStyle : style, provided.draggableProps.style),
-      onMouseEnter: function onMouseEnter() {
-        return setHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setHovered(false);
-      }
-    }), React__default.createElement("div", {
-      style: {
-        width: '100%',
-        height: '100%',
-        pointerEvents: editing ? 'none' : undefined
-      }
-    }, typeof children === 'function' ? children(ctx) : children), React__default.createElement("div", {
-      className: "overlay",
-      style: {
-        display: !disabled && editing && isHovered && (snapshot.isDragging || !isDragging) ? 'block' : 'none'
-      }
-    }, React__default.createElement("div", {
-      className: "overlay-buttons",
-      style: buttonStyles
-    }, React__default.createElement("div", Object.assign({}, provided.dragHandleProps), React__default.createElement(Icon, {
-      name: "moveArrows",
-      size: iconSize,
-      style: {
-        color: iconColor
-      }
-    })), extendable && React__default.createElement("div", {
-      style: {
-        cursor: 'pointer',
-        marginLeft: '8px'
-      },
-      onClick: handleExtend
-    }, React__default.createElement(Icon, {
-      name: vertical ? 'verticalExtend' : 'horizontalExtend',
-      size: iconSize,
-      style: {
-        color: iconColor
-      }
-    })))));
-  });
-}
-
-exports.GridArea = GridArea;
-exports.GridItem = GridItem;
-exports.GridSection = GridSection;
-exports.GridWrapper = GridWrapper;
-exports.Icon = Icon;
-//# sourceMappingURL=react-align.cjs.development.js.map