@elliemae/ds-resizeable-container 2.3.1 → 3.0.0-alpha.3

package/cjs/Resizable.js

@@ -1,323 +0,0 @@
-'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

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

package/cjs/index.js

@@ -1,11 +0,0 @@
-'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

@@ -1,24 +0,0 @@
-'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

@@ -1,309 +0,0 @@
-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

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

package/esm/index.js

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