@micromag/element-scroll 0.3.426 → 0.3.430

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{scrollbar-width:none}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable::-webkit-scrollbar{display:none}.micromag-element-scroll-container{height:100%;margin:0 auto;min-height:inherit;position:relative}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-withScroll.micromag-element-scroll-containOverscroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-top .micromag-element-scroll-scrollee{margin-bottom:auto}.micromag-element-scroll-container.micromag-element-scroll-middle .micromag-element-scroll-scrollee{margin:auto 0}.micromag-element-scroll-container.micromag-element-scroll-bottom .micromag-element-scroll-scrollee{margin-top:auto}.micromag-element-scroll-container.micromag-element-scroll-withArrow .micromag-element-scroll-arrowContainer{opacity:1}.micromag-element-scroll-scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;min-height:inherit;width:100%}.micromag-element-scroll-arrowContainer{bottom:0;height:5rem;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;z-index:3}.micromag-element-scroll-withShadow .micromag-element-scroll-arrowContainer:after{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.85)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.85));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.85));content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-element-scroll-arrow{-webkit-animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;color:#fff;display:inline-block;height:auto;position:relative;top:1rem;width:1rem;z-index:3}.micromag-element-scroll-arrow path{stroke-width:20;stroke:#1c1c1c}@-webkit-keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}@keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}
+.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{scrollbar-width:none}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable::-webkit-scrollbar{display:none}.micromag-element-scroll-container{height:100%;margin:0 auto;min-height:inherit;position:relative}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-withScroll.micromag-element-scroll-containOverscroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-top .micromag-element-scroll-scrollee{margin-bottom:auto}.micromag-element-scroll-container.micromag-element-scroll-middle .micromag-element-scroll-scrollee{margin:auto 0}.micromag-element-scroll-container.micromag-element-scroll-bottom .micromag-element-scroll-scrollee{margin-top:auto}.micromag-element-scroll-container.micromag-element-scroll-withArrow .micromag-element-scroll-arrowContainer{opacity:1}.micromag-element-scroll-scrollable{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;min-height:inherit;width:100%}.micromag-element-scroll-arrowContainer{bottom:0;height:5rem;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;z-index:3}.micromag-element-scroll-withShadow .micromag-element-scroll-arrowContainer:after{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.85)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.85));content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-element-scroll-arrow{-webkit-animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;color:#fff;display:inline-block;height:auto;position:relative;top:1rem;width:1rem;z-index:3}.micromag-element-scroll-arrow path{stroke-width:20;stroke:#1c1c1c}@-webkit-keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}@keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}

package/es/index.js

@@ -42,7 +42,6 @@ var defaultProps = {
   withArrow: true
 };
 function Scroll(_ref) {
-  var _ref3;
   var width = _ref.width,
     height = _ref.height,
     disabled = _ref.disabled,
@@ -145,7 +144,7 @@ function Scroll(_ref) {
     }
   }, [scrolleeRef, scrollPosition]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, styles.withScroll, !disabled), _defineProperty(_ref3, styles.containOverscroll, contain), _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles[verticalAlign], verticalAlign !== null), _defineProperty(_ref3, styles.withArrow, showArrow && withArrow), _defineProperty(_ref3, styles.withShadow, withShadow), _ref3)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.withScroll, !disabled), styles.containOverscroll, contain), className, className !== null), styles[verticalAlign], verticalAlign !== null), styles.withArrow, showArrow && withArrow), styles.withShadow, withShadow)]),
     style: finalStyle
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles.scrollable,

package/lib/index.js

@@ -8,32 +8,24 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var hooks = require('@micromag/core/hooks');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var styles = {"container":"micromag-element-scroll-container","withScroll":"micromag-element-scroll-withScroll","scrollable":"micromag-element-scroll-scrollable","containOverscroll":"micromag-element-scroll-containOverscroll","top":"micromag-element-scroll-top","scrollee":"micromag-element-scroll-scrollee","middle":"micromag-element-scroll-middle","bottom":"micromag-element-scroll-bottom","withArrow":"micromag-element-scroll-withArrow","arrowContainer":"micromag-element-scroll-arrowContainer","withShadow":"micromag-element-scroll-withShadow","arrow":"micromag-element-scroll-arrow","upAndDown":"micromag-element-scroll-upAndDown"};
 
 var propTypes = {
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  disabled: PropTypes__default["default"].bool,
-  verticalAlign: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
-  className: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node,
-  scrollPosition: PropTypes__default["default"].oneOf([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  onScrolledBottom: PropTypes__default["default"].func,
-  onScrolledNotBottom: PropTypes__default["default"].func,
-  onScrollHeightChange: PropTypes__default["default"].func,
-  contain: PropTypes__default["default"].bool,
-  scrollContainerRef: PropTypes__default["default"].any,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  disabled: PropTypes.bool,
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  className: PropTypes.string,
+  children: PropTypes.node,
+  scrollPosition: PropTypes.oneOf([PropTypes.number, PropTypes.string]),
+  onScrolledBottom: PropTypes.func,
+  onScrolledNotBottom: PropTypes.func,
+  onScrollHeightChange: PropTypes.func,
+  contain: PropTypes.bool,
+  scrollContainerRef: PropTypes.any,
   // eslint-disable-line
-  withShadow: PropTypes__default["default"].bool,
-  withArrow: PropTypes__default["default"].bool
+  withShadow: PropTypes.bool,
+  withArrow: PropTypes.bool
 };
 var defaultProps = {
   width: null,
@@ -52,7 +44,6 @@ var defaultProps = {
   withArrow: true
 };
 function Scroll(_ref) {
-  var _ref3;
   var width = _ref.width,
     height = _ref.height,
     disabled = _ref.disabled,
@@ -72,7 +63,7 @@ function Scroll(_ref) {
     height: height
   };
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     withArrow = _useState2[0],
     setWithArrow = _useState2[1];
   var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -89,7 +80,7 @@ function Scroll(_ref) {
   var scrolledNotBottomOnce = React.useRef(false);
   var reachedBottom = React.useRef(false);
   var bind = react.useScroll(function (_ref2) {
-    var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 2),
+    var _ref2$xy = _slicedToArray(_ref2.xy, 2),
       scrollY = _ref2$xy[1];
     var newWithArrow = scrollY <= 1;
     var maxScrollAmount = scrolleeHeight - scrollableHeight;
@@ -154,25 +145,25 @@ function Scroll(_ref) {
       scrollableRef.current.scrollTop = scrollPosition;
     }
   }, [scrolleeRef, scrollPosition]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles.withScroll, !disabled), _defineProperty__default["default"](_ref3, styles.containOverscroll, contain), _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles[verticalAlign], verticalAlign !== null), _defineProperty__default["default"](_ref3, styles.withArrow, showArrow && withArrow), _defineProperty__default["default"](_ref3, styles.withShadow, withShadow), _ref3)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.withScroll, !disabled), styles.containOverscroll, contain), className, className !== null), styles[verticalAlign], verticalAlign !== null), styles.withArrow, showArrow && withArrow), styles.withShadow, withShadow)]),
     style: finalStyle
-  }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles.scrollable,
     ref: scrollableRef
-  }, bind()), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, bind()), /*#__PURE__*/React.createElement("div", {
     className: styles.scrollee,
     ref: scrolleeRef
-  }, children)), !disabled && showArrow ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children)), !disabled && showArrow ? /*#__PURE__*/React.createElement("div", {
     className: styles.arrowContainer
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "10",
     height: "16",
     viewBox: "0 0 10 16",
     className: styles.arrow,
     fill: "currentColor"
-  }, /*#__PURE__*/React__default["default"].createElement("polygon", {
+  }, /*#__PURE__*/React.createElement("polygon", {
     // stroke="#000"
     // strokeWidth="0.5"
     points: ".38 11.38 5 16 9.62 11.38 8.56 10.32 5.75 13.13 5.75 1.61 4.25 1.61 4.25 13.13 1.44 10.32 .38 11.38"
@@ -180,8 +171,8 @@ function Scroll(_ref) {
 }
 Scroll.defaultProps = defaultProps;
 Scroll.propTypes = propTypes;
-var Scroll$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default["default"].createElement(Scroll, Object.assign({
+var Scroll$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Scroll, Object.assign({
     scrollContainerRef: ref
   }, props));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-scroll",
-    "version": "0.3.426",
+    "version": "0.3.430",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,6 +32,12 @@
     "license": "ISC",
     "main": "lib/index.js",
     "module": "es/index.js",
+    "exports": {
+        ".": {
+            "require": "./lib/index.js",
+            "import": "./es/index.js"
+        }
+    },
     "files": [
         "lib",
         "es",
@@ -53,7 +59,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.423",
+        "@micromag/core": "^0.3.430",
         "@use-gesture/react": "^10.2.4",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -65,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ba8ca7eef7a09a9cc258b944b353a955f85e75d3"
+    "gitHead": "da790d76dba9d8e308d9f9c4e51d93a4a0e012a9"
 }