@elliemae/ds-resizeable-container 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/Resizable.js

@@ -0,0 +1,323 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.every.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const _excluded = ["innerRef"],
+      _excluded2 = ["children", "cols", "rows", "vertical", "horizontal"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const safeDifference = 15;
+const minDifference = 8;
+const EVENT_TYPE = {
+  MOUSE: 'mouse',
+  KEY: 'arrows'
+};
+const DIRECTION = {
+  L: 'left',
+  R: 'right',
+  U: 'up',
+  D: 'down'
+};
+
+function calcPosition(arrow, position) {
+  let offset;
+
+  switch (arrow) {
+    case DIRECTION.U:
+      offset = position - 3;
+      break;
+
+    case DIRECTION.D:
+      offset = position + 3;
+      break;
+
+    case DIRECTION.L:
+      offset = position - 3;
+      break;
+
+    case DIRECTION.R:
+      offset = position + 3;
+      break;
+
+    default:
+      offset = position;
+  }
+
+  return offset;
+}
+
+function cursorResolver(nextPx, px, isVertical) {
+  const orientation = {
+    vertical: 'row-resize',
+    horizontal: 'col-resize',
+    left: 'w-resize',
+    right: 'e-resize',
+    up: 'n-resize',
+    down: 's-resize'
+  };
+  if (isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.up;
+  if (isVertical && px > safeDifference + 1) return orientation.vertical;
+  if (isVertical && px <= safeDifference + 1) return orientation.down;
+  if (!isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.left;
+  if (!isVertical && px <= safeDifference + 1) return orientation.right;
+  if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
+  return isVertical ? orientation.vertical : orientation.horizontal;
+}
+
+function ResizableItemComponent(_ref) {
+  let {
+    innerRef
+  } = _ref,
+      p = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread({
+    ref: innerRef
+  }, p));
+}
+
+const ResizableGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-forwbw-0"
+})([""]);
+const ResizableItem = /*#__PURE__*/styled__default["default"](ResizableItemComponent).withConfig({
+  componentId: "sc-forwbw-1"
+})(["position:relative;"]);
+const ResizableBar = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-forwbw-2"
+})(["position:absolute;cursor:", ";", ""], _ref2 => {
+  let {
+    container,
+    nextContainer,
+    v
+  } = _ref2;
+  return cursorResolver(nextContainer, container, v);
+}, props => {
+  if (props.v) {
+    return "\n        bottom: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n        left: 0;\n        width: 100%;\n        height: 10px;\n        margin-bottom: -5px;\n        display: flex;\n        flex-direction: column;\n        justify-content:space-around;\n        align-items: center;\n        &:after{\n          width: 100%;\n          height: 1px;\n          display: block;\n          background: ").concat(props.theme.colors.neutral['300'], ";\n          content: '';\n        }\n        &:hover{\n          &:after{\n            background: ").concat(props.theme.colors.brand['600'], ";\n          } \n        }\n      ");
+  }
+
+  return "\n    top: 0;\n    right: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n    height: 100%;\n    width: 10px;\n    margin-right: -5px;\n    display: flex;\n    flex-direction: row;\n    justify-content:space-around;\n    align-items: center;\n    &:after{\n      height: 100%;\n      width: 1px;\n      display: block;\n      background: ").concat(props.theme.colors.neutral['300'], ";\n      content: '';\n    }\n    &:hover{\n      &:after{\n        background: ").concat(props.theme.colors.brand['600'], ";\n      } \n    }\n    ");
+});
+
+const getWidths = list => list.map(l => l.clientWidth);
+
+const getHeights = list => list.map(l => l.clientHeight);
+
+function ResizableContainer(_ref3) {
+  let {
+    children,
+    cols,
+    rows,
+    vertical,
+    horizontal
+  } = _ref3,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
+
+  const refs = React.useRef([]);
+  const [containers, setContainers] = React.useState(cols);
+  const [blocks, setBlocks] = React.useState(rows);
+  const [isDragging, setDragging] = React.useState(false);
+  const [start, setStartPoint] = React.useState(0);
+  const [resetPoint, setResetPoint] = React.useState();
+  React.useEffect(() => {
+    if (horizontal) setContainers(getWidths(refs.current));
+    if (vertical) setBlocks(getHeights(refs.current));
+  }, [refs.current, horizontal, vertical]);
+
+  const addRef = node => {
+    refs.current.push(node);
+  };
+
+  const resizePanels = function () {
+    let diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const index = parseInt(start.index, 10);
+
+    if (!v) {
+      const newContainers = [...containers];
+
+      if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
+        newContainers[index + 1] = newContainers[index + 1] - diff;
+        newContainers[index] = diff + newContainers[index];
+      } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {
+        newContainers[index - 1] = newContainers[index - 1] - diff;
+        newContainers[index] = diff + newContainers[index];
+      }
+
+      if (newContainers.every(c => c > safeDifference)) setContainers(newContainers);
+    } else {
+      const newBlocks = [...blocks];
+
+      if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
+        newBlocks[index + 1] = newBlocks[index + 1] - diff;
+        newBlocks[index] = diff + newBlocks[index];
+      } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {
+        newBlocks[index - 1] = newBlocks[index - 1] - diff;
+        newBlocks[index] = diff + newBlocks[index];
+      }
+
+      if (newBlocks.every(c => c > safeDifference)) setBlocks(newBlocks);
+    }
+  };
+
+  const startResize = function (event, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let type = arguments.length > 3 ? arguments[3] : undefined;
+    setDragging(type);
+    setStartPoint({
+      x: event.clientX,
+      y: event.clientY,
+      index,
+      v
+    });
+    setResetPoint({
+      containers,
+      blocks
+    });
+  };
+
+  const moveResize = (event, type) => {
+    if (isDragging && isDragging === type && !start.v) {
+      const diff = event.clientX - start.x;
+      if (diff === 0) return;
+      setStartPoint({
+        x: event.clientX,
+        index: start.index
+      });
+      resizePanels(diff);
+    } else if (isDragging && isDragging === type && start.v) {
+      const diff = event.clientY - start.y;
+      if (diff === 0) return;
+      setStartPoint(_objectSpread(_objectSpread({}, start), {}, {
+        y: event.clientY,
+        index: start.index
+      }));
+      resizePanels(diff, true);
+    }
+  };
+
+  const endResize = type => {
+    if (isDragging === type) {
+      setDragging(false);
+      setStartPoint();
+    }
+  };
+
+  const handleKeyDown = function (e, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    const keyCodes = {
+      37: DIRECTION.L,
+      Left: DIRECTION.L,
+      ArrowLeft: DIRECTION.L,
+      38: DIRECTION.U,
+      Up: DIRECTION.U,
+      ArrowUp: DIRECTION.U,
+      39: DIRECTION.R,
+      Right: DIRECTION.R,
+      ArrowRight: DIRECTION.R,
+      40: DIRECTION.D,
+      Down: DIRECTION.D,
+      ArrowDown: DIRECTION.D
+    };
+
+    if (keyCodes[e.key || e.keyCode]) {
+      e.preventDefault();
+      const {
+        top: y,
+        left: x
+      } = e.target.getBoundingClientRect();
+
+      if (!start) {
+        startResize({
+          clientX: x,
+          clientY: y
+        }, index, v, EVENT_TYPE.KEY);
+      } else {
+        const clientX = keyCodes[e.keyCode] === DIRECTION.L || keyCodes[e.keyCode] === DIRECTION.R ? calcPosition(keyCodes[e.keyCode], x) : x;
+        const clientY = keyCodes[e.keyCode] === DIRECTION.U || keyCodes[e.keyCode] === DIRECTION.D ? calcPosition(keyCodes[e.keyCode], y) : y;
+        moveResize({
+          clientX,
+          clientY
+        }, EVENT_TYPE.KEY);
+      }
+    }
+  };
+
+  const onLeave = type => {
+    if (isDragging === type) {
+      setDragging(false);
+      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
+      if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
+    }
+  };
+
+  const count = React__default["default"].Children.count(children);
+  return /*#__PURE__*/jsxRuntime.jsx(ResizableGrid, _objectSpread(_objectSpread({}, rest), {}, {
+    cols: containers,
+    onKeyUp: () => endResize(EVENT_TYPE.KEY),
+    onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
+    onMouseMove: e => moveResize(e, EVENT_TYPE.MOUSE),
+    onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
+    rows: blocks,
+    children: React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/_jsx2__default["default"](ResizableItem, {
+      "data-index": index,
+      innerRef: addRef
+    }, void 0, child, count - 1 !== index && horizontal && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
+      container: containers[index],
+      "data-index": index,
+      gutter: rest.gutter,
+      nextContainer: containers[index + 1],
+      onKeyDown: e => handleKeyDown(e, index, false),
+      onMouseDown: e => startResize(e, index, false, EVENT_TYPE.MOUSE),
+      tabIndex: 0
+    }), count - 1 !== index && vertical && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
+      container: blocks[index],
+      "data-index": index,
+      gutter: rest.gutter,
+      nextContainer: blocks[index + 1],
+      onKeyDown: e => handleKeyDown(e, index, true),
+      onMouseDown: e => startResize(e, index, true, EVENT_TYPE.MOUSE),
+      tabIndex: 0,
+      v: true
+    })))
+  }));
+}
+
+ResizableContainer.defaultProps = defaultProps.defaultProps;
+const DSResizableContainerWithSchema = reactDesc.describe(ResizableContainer);
+DSResizableContainerWithSchema.propTypes = props.props;
+
+exports.DSResizableContainerWithSchema = DSResizableContainerWithSchema;
+exports.ResizableContainer = ResizableContainer;
+exports["default"] = ResizableContainer;

package/cjs/defaultProps.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  vertical: false,
+  horizontal: false
+};
+
+exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Resizable = require('./Resizable.js');
+
+
+
+exports.DSResizableContainerWithSchema = Resizable.DSResizableContainerWithSchema;
+exports.ResizableContainer = Resizable.ResizableContainer;
+exports["default"] = Resizable.ResizableContainer;

package/cjs/props.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const props = {
+  /** grid item content */
+  children: reactDesc.PropTypes.node.description('Grid item content'),
+
+  /**  vertical resizing */
+  vertical: reactDesc.PropTypes.bool.description('vertical resizing'),
+
+  /** horizontal resizing */
+  horizontal: reactDesc.PropTypes.bool.description('horizontal resizing'),
+
+  /** Row layout cells */
+  rows: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])).description('Row layout cells'),
+
+  /** Column layout cells */
+  cols: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])).description('Column layout cells')
+};
+
+exports.props = props;

package/esm/Resizable.js

@@ -0,0 +1,309 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.every.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.every.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { describe } from 'react-desc';
+import styled from 'styled-components';
+import { mapGap } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["innerRef"],
+      _excluded2 = ["children", "cols", "rows", "vertical", "horizontal"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const safeDifference = 15;
+const minDifference = 8;
+const EVENT_TYPE = {
+  MOUSE: 'mouse',
+  KEY: 'arrows'
+};
+const DIRECTION = {
+  L: 'left',
+  R: 'right',
+  U: 'up',
+  D: 'down'
+};
+
+function calcPosition(arrow, position) {
+  let offset;
+
+  switch (arrow) {
+    case DIRECTION.U:
+      offset = position - 3;
+      break;
+
+    case DIRECTION.D:
+      offset = position + 3;
+      break;
+
+    case DIRECTION.L:
+      offset = position - 3;
+      break;
+
+    case DIRECTION.R:
+      offset = position + 3;
+      break;
+
+    default:
+      offset = position;
+  }
+
+  return offset;
+}
+
+function cursorResolver(nextPx, px, isVertical) {
+  const orientation = {
+    vertical: 'row-resize',
+    horizontal: 'col-resize',
+    left: 'w-resize',
+    right: 'e-resize',
+    up: 'n-resize',
+    down: 's-resize'
+  };
+  if (isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.up;
+  if (isVertical && px > safeDifference + 1) return orientation.vertical;
+  if (isVertical && px <= safeDifference + 1) return orientation.down;
+  if (!isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.left;
+  if (!isVertical && px <= safeDifference + 1) return orientation.right;
+  if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
+  return isVertical ? orientation.vertical : orientation.horizontal;
+}
+
+function ResizableItemComponent(_ref) {
+  let {
+    innerRef
+  } = _ref,
+      p = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(Grid, _objectSpread({
+    ref: innerRef
+  }, p));
+}
+
+const ResizableGrid = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-forwbw-0"
+})([""]);
+const ResizableItem = /*#__PURE__*/styled(ResizableItemComponent).withConfig({
+  componentId: "sc-forwbw-1"
+})(["position:relative;"]);
+const ResizableBar = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-forwbw-2"
+})(["position:absolute;cursor:", ";", ""], _ref2 => {
+  let {
+    container,
+    nextContainer,
+    v
+  } = _ref2;
+  return cursorResolver(nextContainer, container, v);
+}, props => {
+  if (props.v) {
+    return "\n        bottom: calc(".concat(mapGap(props.gutter), " * -0.5);\n        left: 0;\n        width: 100%;\n        height: 10px;\n        margin-bottom: -5px;\n        display: flex;\n        flex-direction: column;\n        justify-content:space-around;\n        align-items: center;\n        &:after{\n          width: 100%;\n          height: 1px;\n          display: block;\n          background: ").concat(props.theme.colors.neutral['300'], ";\n          content: '';\n        }\n        &:hover{\n          &:after{\n            background: ").concat(props.theme.colors.brand['600'], ";\n          } \n        }\n      ");
+  }
+
+  return "\n    top: 0;\n    right: calc(".concat(mapGap(props.gutter), " * -0.5);\n    height: 100%;\n    width: 10px;\n    margin-right: -5px;\n    display: flex;\n    flex-direction: row;\n    justify-content:space-around;\n    align-items: center;\n    &:after{\n      height: 100%;\n      width: 1px;\n      display: block;\n      background: ").concat(props.theme.colors.neutral['300'], ";\n      content: '';\n    }\n    &:hover{\n      &:after{\n        background: ").concat(props.theme.colors.brand['600'], ";\n      } \n    }\n    ");
+});
+
+const getWidths = list => list.map(l => l.clientWidth);
+
+const getHeights = list => list.map(l => l.clientHeight);
+
+function ResizableContainer(_ref3) {
+  let {
+    children,
+    cols,
+    rows,
+    vertical,
+    horizontal
+  } = _ref3,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
+
+  const refs = useRef([]);
+  const [containers, setContainers] = useState(cols);
+  const [blocks, setBlocks] = useState(rows);
+  const [isDragging, setDragging] = useState(false);
+  const [start, setStartPoint] = useState(0);
+  const [resetPoint, setResetPoint] = useState();
+  useEffect(() => {
+    if (horizontal) setContainers(getWidths(refs.current));
+    if (vertical) setBlocks(getHeights(refs.current));
+  }, [refs.current, horizontal, vertical]);
+
+  const addRef = node => {
+    refs.current.push(node);
+  };
+
+  const resizePanels = function () {
+    let diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const index = parseInt(start.index, 10);
+
+    if (!v) {
+      const newContainers = [...containers];
+
+      if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
+        newContainers[index + 1] = newContainers[index + 1] - diff;
+        newContainers[index] = diff + newContainers[index];
+      } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {
+        newContainers[index - 1] = newContainers[index - 1] - diff;
+        newContainers[index] = diff + newContainers[index];
+      }
+
+      if (newContainers.every(c => c > safeDifference)) setContainers(newContainers);
+    } else {
+      const newBlocks = [...blocks];
+
+      if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
+        newBlocks[index + 1] = newBlocks[index + 1] - diff;
+        newBlocks[index] = diff + newBlocks[index];
+      } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {
+        newBlocks[index - 1] = newBlocks[index - 1] - diff;
+        newBlocks[index] = diff + newBlocks[index];
+      }
+
+      if (newBlocks.every(c => c > safeDifference)) setBlocks(newBlocks);
+    }
+  };
+
+  const startResize = function (event, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let type = arguments.length > 3 ? arguments[3] : undefined;
+    setDragging(type);
+    setStartPoint({
+      x: event.clientX,
+      y: event.clientY,
+      index,
+      v
+    });
+    setResetPoint({
+      containers,
+      blocks
+    });
+  };
+
+  const moveResize = (event, type) => {
+    if (isDragging && isDragging === type && !start.v) {
+      const diff = event.clientX - start.x;
+      if (diff === 0) return;
+      setStartPoint({
+        x: event.clientX,
+        index: start.index
+      });
+      resizePanels(diff);
+    } else if (isDragging && isDragging === type && start.v) {
+      const diff = event.clientY - start.y;
+      if (diff === 0) return;
+      setStartPoint(_objectSpread(_objectSpread({}, start), {}, {
+        y: event.clientY,
+        index: start.index
+      }));
+      resizePanels(diff, true);
+    }
+  };
+
+  const endResize = type => {
+    if (isDragging === type) {
+      setDragging(false);
+      setStartPoint();
+    }
+  };
+
+  const handleKeyDown = function (e, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    const keyCodes = {
+      37: DIRECTION.L,
+      Left: DIRECTION.L,
+      ArrowLeft: DIRECTION.L,
+      38: DIRECTION.U,
+      Up: DIRECTION.U,
+      ArrowUp: DIRECTION.U,
+      39: DIRECTION.R,
+      Right: DIRECTION.R,
+      ArrowRight: DIRECTION.R,
+      40: DIRECTION.D,
+      Down: DIRECTION.D,
+      ArrowDown: DIRECTION.D
+    };
+
+    if (keyCodes[e.key || e.keyCode]) {
+      e.preventDefault();
+      const {
+        top: y,
+        left: x
+      } = e.target.getBoundingClientRect();
+
+      if (!start) {
+        startResize({
+          clientX: x,
+          clientY: y
+        }, index, v, EVENT_TYPE.KEY);
+      } else {
+        const clientX = keyCodes[e.keyCode] === DIRECTION.L || keyCodes[e.keyCode] === DIRECTION.R ? calcPosition(keyCodes[e.keyCode], x) : x;
+        const clientY = keyCodes[e.keyCode] === DIRECTION.U || keyCodes[e.keyCode] === DIRECTION.D ? calcPosition(keyCodes[e.keyCode], y) : y;
+        moveResize({
+          clientX,
+          clientY
+        }, EVENT_TYPE.KEY);
+      }
+    }
+  };
+
+  const onLeave = type => {
+    if (isDragging === type) {
+      setDragging(false);
+      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
+      if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
+    }
+  };
+
+  const count = React.Children.count(children);
+  return /*#__PURE__*/jsx(ResizableGrid, _objectSpread(_objectSpread({}, rest), {}, {
+    cols: containers,
+    onKeyUp: () => endResize(EVENT_TYPE.KEY),
+    onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
+    onMouseMove: e => moveResize(e, EVENT_TYPE.MOUSE),
+    onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
+    rows: blocks,
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/_jsx2(ResizableItem, {
+      "data-index": index,
+      innerRef: addRef
+    }, void 0, child, count - 1 !== index && horizontal && /*#__PURE__*/_jsx2(ResizableBar, {
+      container: containers[index],
+      "data-index": index,
+      gutter: rest.gutter,
+      nextContainer: containers[index + 1],
+      onKeyDown: e => handleKeyDown(e, index, false),
+      onMouseDown: e => startResize(e, index, false, EVENT_TYPE.MOUSE),
+      tabIndex: 0
+    }), count - 1 !== index && vertical && /*#__PURE__*/_jsx2(ResizableBar, {
+      container: blocks[index],
+      "data-index": index,
+      gutter: rest.gutter,
+      nextContainer: blocks[index + 1],
+      onKeyDown: e => handleKeyDown(e, index, true),
+      onMouseDown: e => startResize(e, index, true, EVENT_TYPE.MOUSE),
+      tabIndex: 0,
+      v: true
+    })))
+  }));
+}
+
+ResizableContainer.defaultProps = defaultProps;
+const DSResizableContainerWithSchema = describe(ResizableContainer);
+DSResizableContainerWithSchema.propTypes = props;
+
+export { DSResizableContainerWithSchema, ResizableContainer, ResizableContainer as default };

package/esm/defaultProps.js

@@ -0,0 +1,6 @@
+const defaultProps = {
+  vertical: false,
+  horizontal: false
+};
+
+export { defaultProps };

package/esm/index.js

@@ -0,0 +1 @@
+export { DSResizableContainerWithSchema, ResizableContainer, ResizableContainer as default } from './Resizable.js';