@elliemae/ds-resizeable-container 2.1.0 → 2.2.0-alpha.3

package/cjs/index.js

@@ -1,11 +1,36 @@
-'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;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  default: () => import_Resizable.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, __toESM(require("./Resizable")));
+var import_Resizable = __toESM(require("./Resizable"));
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './Resizable';\nexport { default } from './Resizable';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,uBAAwB;",
+  "names": []
+}

package/cjs/props.js

@@ -1,24 +1,42 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var props_exports = {};
+__export(props_exports, {
+  props: () => props
+});
+var React = __toESM(require("react"));
+var import_react_desc = __toESM(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')
+  children: import_react_desc.PropTypes.node.description("Grid item content"),
+  vertical: import_react_desc.PropTypes.bool.description("vertical resizing"),
+  horizontal: import_react_desc.PropTypes.bool.description("horizontal resizing"),
+  rows: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.number, import_react_desc.PropTypes.string])).description("Row layout cells"),
+  cols: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.number, import_react_desc.PropTypes.string])).description("Column layout cells")
 };
-
-exports.props = props;
+module.exports = __toCommonJS(props_exports);
+//# sourceMappingURL=props.js.map

package/cjs/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const props = {\n  /** grid item content */\n  children: PropTypes.node.description('Grid item content'),\n  /**  vertical resizing */\n  vertical: PropTypes.bool.description('vertical resizing'),\n  /** horizontal resizing */\n  horizontal: PropTypes.bool.description('horizontal resizing'),\n  /** Row layout cells */\n  rows: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  ).description('Row layout cells'),\n  /** Column layout cells */\n  cols: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  ).description('Column layout cells'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,QAAQ;AAAA,EAEnB,UAAU,4BAAU,KAAK,YAAY;AAAA,EAErC,UAAU,4BAAU,KAAK,YAAY;AAAA,EAErC,YAAY,4BAAU,KAAK,YAAY;AAAA,EAEvC,MAAM,4BAAU,QACd,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,UACjD,YAAY;AAAA,EAEd,MAAM,4BAAU,QACd,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,UACjD,YAAY;AAAA;",
+  "names": []
+}

package/esm/Resizable.js

@@ -1,137 +1,138 @@
-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; }
+import * as React from "react";
+import React2, { 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 as rprops } from "./props";
+import { defaultProps } from "./defaultProps";
 const safeDifference = 15;
 const minDifference = 8;
-const EVENT_TYPE = {
-  MOUSE: 'mouse',
-  KEY: 'arrows'
-};
+const EVENT_TYPE = { MOUSE: "mouse", KEY: "arrows" };
 const DIRECTION = {
-  L: 'left',
-  R: 'right',
-  U: 'up',
-  D: 'down'
+  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'
+    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;
+  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));
+function ResizableItemComponent({ innerRef, ...p }) {
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    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 => {
+const ResizableGrid = styled(Grid)``;
+const ResizableItem = styled(ResizableItemComponent)`
+  position: relative;
+`;
+const ResizableBar = styled.div`
+  position: absolute;
+  cursor: ${({ container, nextContainer, v }) => 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 `
+        bottom: calc(${mapGap(props.gutter)} * -0.5);
+        left: 0;
+        width: 100%;
+        height: 10px;
+        margin-bottom: -5px;
+        display: flex;
+        flex-direction: column;
+        justify-content:space-around;
+        align-items: center;
+        &:after{
+          width: 100%;
+          height: 1px;
+          display: block;
+          background: ${props.theme.colors.neutral["300"]};
+          content: '';
+        }
+        &:hover{
+          &:after{
+            background: ${props.theme.colors.brand["600"]};
+          } 
+        }
+      `;
   }
-
-  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);
-
+  return `
+    top: 0;
+    right: calc(${mapGap(props.gutter)} * -0.5);
+    height: 100%;
+    width: 10px;
+    margin-right: -5px;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    align-items: center;
+    &:after{
+      height: 100%;
+      width: 1px;
+      display: block;
+      background: ${props.theme.colors.neutral["300"]};
+      content: '';
+    }
+    &:hover{
+      &:after{
+        background: ${props.theme.colors.brand["600"]};
+      } 
+    }
+    `;
+}}
+`;
+const getWidths = (list) => list.map((l) => l.clientWidth);
+const getHeights = (list) => list.map((l) => l.clientHeight);
+function ResizableContainer({
+  children,
+  cols,
+  rows,
+  vertical,
+  horizontal,
+  ...rest
+}) {
   const refs = useRef([]);
   const [containers, setContainers] = useState(cols);
   const [blocks, setBlocks] = useState(rows);
@@ -139,22 +140,18 @@ function ResizableContainer(_ref3) {
   const [start, setStartPoint] = useState(0);
   const [resetPoint, setResetPoint] = useState();
   useEffect(() => {
-    if (horizontal) setContainers(getWidths(refs.current));
-    if (vertical) setBlocks(getHeights(refs.current));
+    if (horizontal)
+      setContainers(getWidths(refs.current));
+    if (vertical)
+      setBlocks(getHeights(refs.current));
   }, [refs.current, horizontal, vertical]);
-
-  const addRef = node => {
+  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 resizePanels = (diff = 1, v = 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];
@@ -162,11 +159,10 @@ function ResizableContainer(_ref3) {
         newContainers[index - 1] = newContainers[index - 1] - diff;
         newContainers[index] = diff + newContainers[index];
       }
-
-      if (newContainers.every(c => c > safeDifference)) setContainers(newContainers);
+      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];
@@ -174,14 +170,11 @@ function ResizableContainer(_ref3) {
         newBlocks[index - 1] = newBlocks[index - 1] - diff;
         newBlocks[index] = diff + newBlocks[index];
       }
-
-      if (newBlocks.every(c => c > safeDifference)) setBlocks(newBlocks);
+      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;
+  const startResize = (event, index, v = false, type) => {
     setDragging(type);
     setStartPoint({
       x: event.clientX,
@@ -189,41 +182,30 @@ function ResizableContainer(_ref3) {
       index,
       v
     });
-    setResetPoint({
-      containers,
-      blocks
-    });
+    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
-      });
+      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
-      }));
+      if (diff === 0)
+        return;
+      setStartPoint({ ...start, y: event.clientY, index: start.index });
       resizePanels(diff, true);
     }
   };
-
-  const endResize = type => {
+  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 handleKeyDown = (e, index, v = false) => {
     const keyCodes = {
       37: DIRECTION.L,
       Left: DIRECTION.L,
@@ -238,72 +220,66 @@ function ResizableContainer(_ref3) {
       Down: DIRECTION.D,
       ArrowDown: DIRECTION.D
     };
-
     if (keyCodes[e.key || e.keyCode]) {
       e.preventDefault();
-      const {
-        top: y,
-        left: x
-      } = e.target.getBoundingClientRect();
-
+      const { top: y, left: x } = e.target.getBoundingClientRect();
       if (!start) {
-        startResize({
-          clientX: x,
-          clientY: y
-        }, index, v, EVENT_TYPE.KEY);
+        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);
+        moveResize({ clientX, clientY }, EVENT_TYPE.KEY);
       }
     }
   };
-
-  const onLeave = type => {
+  const onLeave = (type) => {
     if (isDragging === type) {
       setDragging(false);
-      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
-      if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
+      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), {}, {
+  const count = React2.Children.count(children);
+  return /* @__PURE__ */ React2.createElement(ResizableGrid, {
+    ...rest,
     cols: containers,
     onKeyUp: () => endResize(EVENT_TYPE.KEY),
     onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
-    onMouseMove: e => moveResize(e, 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
-    })))
-  }));
+    rows: blocks
+  }, React2.Children.map(children, (child, index) => /* @__PURE__ */ React2.createElement(ResizableItem, {
+    "data-index": index,
+    innerRef: addRef
+  }, child, count - 1 !== index && horizontal && /* @__PURE__ */ React2.createElement(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__ */ React2.createElement(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.propTypes = rprops;
 ResizableContainer.defaultProps = defaultProps;
 const DSResizableContainerWithSchema = describe(ResizableContainer);
-DSResizableContainerWithSchema.propTypes = props;
-
-export { DSResizableContainerWithSchema, ResizableContainer, ResizableContainer as default };
+DSResizableContainerWithSchema.propTypes = rprops;
+var Resizable_default = ResizableContainer;
+export {
+  DSResizableContainerWithSchema,
+  ResizableContainer,
+  Resizable_default as default
+};
+//# sourceMappingURL=Resizable.js.map

package/esm/Resizable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Resizable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst safeDifference = 15;\nconst minDifference = 8;\nconst EVENT_TYPE = { MOUSE: 'mouse', KEY: 'arrows' };\nconst DIRECTION = {\n  L: 'left',\n  R: 'right',\n  U: 'up',\n  D: 'down',\n};\n\nfunction calcPosition(arrow, position) {\n  let offset;\n  switch (arrow) {\n    case DIRECTION.U:\n      offset = position - 3;\n      break;\n    case DIRECTION.D:\n      offset = position + 3;\n      break;\n    case DIRECTION.L:\n      offset = position - 3;\n      break;\n    case DIRECTION.R:\n      offset = position + 3;\n      break;\n    default:\n      offset = position;\n  }\n  return offset;\n}\n\nfunction cursorResolver(nextPx, px, isVertical) {\n  const orientation = {\n    vertical: 'row-resize',\n    horizontal: 'col-resize',\n    left: 'w-resize',\n    right: 'e-resize',\n    up: 'n-resize',\n    down: 's-resize',\n  };\n\n  if (isVertical && nextPx && nextPx <= safeDifference + 1)\n    return orientation.up;\n  if (isVertical && px > safeDifference + 1) return orientation.vertical;\n  if (isVertical && px <= safeDifference + 1) return orientation.down;\n\n  if (!isVertical && nextPx && nextPx <= safeDifference + 1)\n    return orientation.left;\n  if (!isVertical && px <= safeDifference + 1) return orientation.right;\n  if (!isVertical && px > safeDifference + 1) return orientation.horizontal;\n\n  return isVertical ? orientation.vertical : orientation.horizontal;\n}\n\nfunction ResizableItemComponent({ innerRef, ...p }) {\n  return <Grid ref={innerRef} {...p} />;\n}\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n  position: relative;\n`;\nconst ResizableBar = styled.div`\n  position: absolute;\n  cursor: ${({ container, nextContainer, v }) =>\n    cursorResolver(nextContainer, container, v)};\n\n  ${(props) => {\n    if (props.v) {\n      return `\n        bottom: calc(${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: ${props.theme.colors.neutral['300']};\n          content: '';\n        }\n        &:hover{\n          &:after{\n            background: ${props.theme.colors.brand['600']};\n          } \n        }\n      `;\n    }\n    return `\n    top: 0;\n    right: calc(${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: ${props.theme.colors.neutral['300']};\n      content: '';\n    }\n    &:hover{\n      &:after{\n        background: ${props.theme.colors.brand['600']};\n      } \n    }\n    `;\n  }}\n`;\nconst getWidths = (list) => list.map((l) => l.clientWidth);\nconst getHeights = (list) => list.map((l) => l.clientHeight);\n\nfunction ResizableContainer({\n  children,\n  cols,\n  rows,\n  vertical,\n  horizontal,\n  ...rest\n}) {\n  const refs = useRef([]);\n  const [containers, setContainers] = useState(cols);\n  const [blocks, setBlocks] = useState(rows);\n  const [isDragging, setDragging] = useState(false);\n  const [start, setStartPoint] = useState(0);\n  const [resetPoint, setResetPoint] = useState();\n\n  useEffect(() => {\n    if (horizontal) setContainers(getWidths(refs.current));\n    if (vertical) setBlocks(getHeights(refs.current));\n  }, [refs.current, horizontal, vertical]);\n  const addRef = (node) => {\n    refs.current.push(node);\n  };\n  const resizePanels = (diff = 1, v = false) => {\n    const index = parseInt(start.index, 10);\n    if (!v) {\n      const newContainers = [...containers];\n      if (\n        newContainers[index + 1] &&\n        newContainers[index + 1] > minDifference\n      ) {\n        newContainers[index + 1] = newContainers[index + 1] - diff;\n        newContainers[index] = diff + newContainers[index];\n      } else if (\n        newContainers[index - 1] &&\n        newContainers[index - 1] > minDifference\n      ) {\n        newContainers[index - 1] = newContainers[index - 1] - diff;\n        newContainers[index] = diff + newContainers[index];\n      }\n      if (newContainers.every((c) => c > safeDifference))\n        setContainers(newContainers);\n    } else {\n      const newBlocks = [...blocks];\n      if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {\n        newBlocks[index + 1] = newBlocks[index + 1] - diff;\n        newBlocks[index] = diff + newBlocks[index];\n      } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {\n        newBlocks[index - 1] = newBlocks[index - 1] - diff;\n        newBlocks[index] = diff + newBlocks[index];\n      }\n      if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);\n    }\n  };\n  const startResize = (event, index, v = false, type) => {\n    setDragging(type);\n    setStartPoint({\n      x: event.clientX,\n      y: event.clientY,\n      index,\n      v,\n    });\n    setResetPoint({ containers, blocks });\n  };\n  const moveResize = (event, type) => {\n    if (isDragging && isDragging === type && !start.v) {\n      const diff = event.clientX - start.x;\n      if (diff === 0) return;\n      setStartPoint({ x: event.clientX, index: start.index });\n      resizePanels(diff);\n    } else if (isDragging && isDragging === type && start.v) {\n      const diff = event.clientY - start.y;\n      if (diff === 0) return;\n      setStartPoint({ ...start, y: event.clientY, index: start.index });\n      resizePanels(diff, true);\n    }\n  };\n  const endResize = (type) => {\n    if (isDragging === type) {\n      setDragging(false);\n      setStartPoint();\n    }\n  };\n  const handleKeyDown = (e, index, v = false) => {\n    const keyCodes = {\n      37: DIRECTION.L,\n      Left: DIRECTION.L,\n      ArrowLeft: DIRECTION.L,\n      38: DIRECTION.U,\n      Up: DIRECTION.U,\n      ArrowUp: DIRECTION.U,\n      39: DIRECTION.R,\n      Right: DIRECTION.R,\n      ArrowRight: DIRECTION.R,\n      40: DIRECTION.D,\n      Down: DIRECTION.D,\n      ArrowDown: DIRECTION.D,\n    };\n\n    if (keyCodes[e.key || e.keyCode]) {\n      e.preventDefault();\n      const { top: y, left: x } = e.target.getBoundingClientRect();\n      if (!start) {\n        startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n      } else {\n        const clientX =\n          keyCodes[e.keyCode] === DIRECTION.L ||\n          keyCodes[e.keyCode] === DIRECTION.R\n            ? calcPosition(keyCodes[e.keyCode], x)\n            : x;\n        const clientY =\n          keyCodes[e.keyCode] === DIRECTION.U ||\n          keyCodes[e.keyCode] === DIRECTION.D\n            ? calcPosition(keyCodes[e.keyCode], y)\n            : y;\n\n        moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n      }\n    }\n  };\n\n  const onLeave = (type) => {\n    if (isDragging === type) {\n      setDragging(false);\n\n      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n      if (resetPoint && resetPoint.containers)\n        setContainers(resetPoint.containers);\n    }\n  };\n  const count = React.Children.count(children);\n\n  return (\n    <ResizableGrid\n      {...rest}\n      cols={containers}\n      onKeyUp={() => endResize(EVENT_TYPE.KEY)}\n      onMouseLeave={() => onLeave(EVENT_TYPE.MOUSE)}\n      onMouseMove={(e) => moveResize(e, EVENT_TYPE.MOUSE)}\n      onMouseUp={() => endResize(EVENT_TYPE.MOUSE)}\n      rows={blocks}\n    >\n      {React.Children.map(children, (child, index) => (\n        <ResizableItem data-index={index} innerRef={addRef}>\n          {child}\n          {count - 1 !== index && horizontal && (\n            <ResizableBar\n              container={containers[index]}\n              data-index={index}\n              gutter={rest.gutter}\n              nextContainer={containers[index + 1]}\n              onKeyDown={(e) => handleKeyDown(e, index, false)}\n              onMouseDown={(e) =>\n                startResize(e, index, false, EVENT_TYPE.MOUSE)\n              }\n              tabIndex={0}\n            />\n          )}\n          {count - 1 !== index && vertical && (\n            <ResizableBar\n              container={blocks[index]}\n              data-index={index}\n              gutter={rest.gutter}\n              nextContainer={blocks[index + 1]}\n              onKeyDown={(e) => handleKeyDown(e, index, true)}\n              onMouseDown={(e) => startResize(e, index, true, EVENT_TYPE.MOUSE)}\n              tabIndex={0}\n              v\n            />\n          )}\n        </ResizableItem>\n      ))}\n    </ResizableGrid>\n  );\n}\n\nResizableContainer.propTypes = rprops;\nResizableContainer.defaultProps = defaultProps;\n\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/defaultProps.js

@@ -1,6 +1,9 @@
+import * as React from "react";
 const defaultProps = {
   vertical: false,
   horizontal: false
 };
-
-export { defaultProps };
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map