@elliemae/ds-resizeable-container 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/Resizable.js

@@ -5,6 +5,16 @@ 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');
@@ -27,7 +37,7 @@ const _excluded = ["innerRef"],
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 = {
@@ -90,90 +100,49 @@ function ResizableItemComponent(_ref) {
   let {
     innerRef
   } = _ref,
-      p = _objectWithoutProperties__default['default'](_ref, _excluded);
+      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({
+const ResizableGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-forwbw-0"
 })([""]);
-const ResizableItem = /*#__PURE__*/styled__default['default'](ResizableItemComponent).withConfig({
+const ResizableItem = /*#__PURE__*/styled__default["default"](ResizableItemComponent).withConfig({
   componentId: "sc-forwbw-1"
 })(["position:relative;"]);
-const ResizableBar = /*#__PURE__*/styled__default['default'].div.withConfig({
+const ResizableBar = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-forwbw-2"
-})(["position:absolute;cursor:", ";", ""], ({
-  container,
-  nextContainer,
-  v
-}) => cursorResolver(nextContainer, container, v), props => {
+})(["position:absolute;cursor:", ";", ""], _ref2 => {
+  let {
+    container,
+    nextContainer,
+    v
+  } = _ref2;
+  return cursorResolver(nextContainer, container, v);
+}, props => {
   if (props.v) {
-    return `
-        bottom: calc(${dsSystem.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        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 `
-    top: 0;
-    right: calc(${dsSystem.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']};
-      } 
-    }
-    `;
+  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(_ref2) {
+function ResizableContainer(_ref3) {
   let {
     children,
     cols,
     rows,
     vertical,
     horizontal
-  } = _ref2,
-      rest = _objectWithoutProperties__default['default'](_ref2, _excluded2);
+  } = _ref3,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
 
   const refs = React.useRef([]);
   const [containers, setContainers] = React.useState(cols);
@@ -190,7 +159,9 @@ function ResizableContainer(_ref2) {
     refs.current.push(node);
   };
 
-  const resizePanels = (diff = 1, v = false) => {
+  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) {
@@ -220,7 +191,9 @@ function ResizableContainer(_ref2) {
     }
   };
 
-  const startResize = (event, index, v = false, type) => {
+  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,
@@ -261,7 +234,8 @@ function ResizableContainer(_ref2) {
     }
   };
 
-  const handleKeyDown = (e, index, v = false) => {
+  const handleKeyDown = function (e, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     const keyCodes = {
       37: DIRECTION.L,
       Left: DIRECTION.L,
@@ -308,7 +282,7 @@ function ResizableContainer(_ref2) {
     }
   };
 
-  const count = React__default['default'].Children.count(children);
+  const count = React__default["default"].Children.count(children);
   return /*#__PURE__*/jsxRuntime.jsx(ResizableGrid, _objectSpread(_objectSpread({}, rest), {}, {
     cols: containers,
     onKeyUp: () => endResize(EVENT_TYPE.KEY),
@@ -316,10 +290,10 @@ function ResizableContainer(_ref2) {
     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, {
+    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, {
+    }, void 0, child, count - 1 !== index && horizontal && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
       container: containers[index],
       "data-index": index,
       gutter: rest.gutter,
@@ -327,7 +301,7 @@ function ResizableContainer(_ref2) {
       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, {
+    }), count - 1 !== index && vertical && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
       container: blocks[index],
       "data-index": index,
       gutter: rest.gutter,
@@ -346,4 +320,4 @@ DSResizableContainerWithSchema.propTypes = props.props;
 
 exports.DSResizableContainerWithSchema = DSResizableContainerWithSchema;
 exports.ResizableContainer = ResizableContainer;
-exports['default'] = ResizableContainer;
+exports["default"] = ResizableContainer;

package/cjs/index.js

@@ -8,4 +8,4 @@ var Resizable = require('./Resizable.js');
 
 exports.DSResizableContainerWithSchema = Resizable.DSResizableContainerWithSchema;
 exports.ResizableContainer = Resizable.ResizableContainer;
-exports.default = Resizable.ResizableContainer;
+exports["default"] = Resizable.ResizableContainer;

package/esm/Resizable.js

@@ -1,6 +1,16 @@
+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';
@@ -93,75 +103,34 @@ const ResizableItem = /*#__PURE__*/styled(ResizableItemComponent).withConfig({
 })(["position:relative;"]);
 const ResizableBar = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-forwbw-2"
-})(["position:absolute;cursor:", ";", ""], ({
-  container,
-  nextContainer,
-  v
-}) => cursorResolver(nextContainer, container, v), props => {
+})(["position:absolute;cursor:", ";", ""], _ref2 => {
+  let {
+    container,
+    nextContainer,
+    v
+  } = _ref2;
+  return cursorResolver(nextContainer, container, v);
+}, props => {
   if (props.v) {
-    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        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 `
-    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']};
-      } 
-    }
-    `;
+  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(_ref2) {
+function ResizableContainer(_ref3) {
   let {
     children,
     cols,
     rows,
     vertical,
     horizontal
-  } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+  } = _ref3,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
 
   const refs = useRef([]);
   const [containers, setContainers] = useState(cols);
@@ -178,7 +147,9 @@ function ResizableContainer(_ref2) {
     refs.current.push(node);
   };
 
-  const resizePanels = (diff = 1, v = false) => {
+  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) {
@@ -208,7 +179,9 @@ function ResizableContainer(_ref2) {
     }
   };
 
-  const startResize = (event, index, v = false, type) => {
+  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,
@@ -249,7 +222,8 @@ function ResizableContainer(_ref2) {
     }
   };
 
-  const handleKeyDown = (e, index, v = false) => {
+  const handleKeyDown = function (e, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     const keyCodes = {
       37: DIRECTION.L,
       Left: DIRECTION.L,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-resizeable-container",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Resizeable Container",
   "module": "./esm/index.js",
@@ -44,17 +44,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-grid": "2.0.0-alpha.1",
-    "@elliemae/ds-system": "2.0.0-alpha.1",
+    "@elliemae/ds-grid": "2.0.0-alpha.13",
+    "@elliemae/ds-system": "2.0.0-alpha.13",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/Resizable.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare function ResizableContainer({ children, cols, rows, vertical, horizontal, ...rest }: {
     [x: string]: any;
@@ -9,17 +10,53 @@ declare function ResizableContainer({ children, cols, rows, vertical, horizontal
 }): JSX.Element;
 declare namespace ResizableContainer {
     var propTypes: {
-        children: any;
-        vertical: any;
-        horizontal: any;
-        rows: any;
-        cols: any;
+        children: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        vertical: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        horizontal: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        rows: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        cols: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
     var defaultProps: {
         vertical: boolean;
         horizontal: boolean;
     };
 }
-declare const DSResizableContainerWithSchema: any;
+declare const DSResizableContainerWithSchema: {
+    (props?: {
+        [x: string]: any;
+        children: any;
+        cols: any;
+        rows: any;
+        vertical: any;
+        horizontal: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { ResizableContainer, DSResizableContainerWithSchema };
 export default ResizableContainer;

package/types/props.d.ts

@@ -1,12 +1,38 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 export declare const props: {
     /** grid item content */
-    children: any;
+    children: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
     /**  vertical resizing */
-    vertical: any;
+    vertical: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
     /** horizontal resizing */
-    horizontal: any;
+    horizontal: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
     /** Row layout cells */
-    rows: any;
+    rows: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
     /** Column layout cells */
-    cols: any;
+    cols: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}