@micromag/element-scroll 0.3.531 → 0.3.547

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-scroll",
-    "version": "0.3.531",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -60,7 +59,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.531",
+        "@micromag/core": "^0.3.547",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -72,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e3a59c467ad33528b38eb4badd78b6ed0e38a3a6"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,176 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var react = require('@use-gesture/react');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var hooks = require('@micromag/core/hooks');
-
-var styles = {"container":"micromag-element-scroll-container","withScroll":"micromag-element-scroll-withScroll","scrollable":"micromag-element-scroll-scrollable","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.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,
-  scrollContainerRef: PropTypes.any,
-  // eslint-disable-line
-  withShadow: PropTypes.bool,
-  withArrow: PropTypes.bool
-};
-var defaultProps = {
-  width: null,
-  height: null,
-  disabled: false,
-  verticalAlign: null,
-  className: null,
-  children: null,
-  scrollPosition: null,
-  onScrolledBottom: null,
-  onScrolledNotBottom: null,
-  onScrollHeightChange: null,
-  scrollContainerRef: null,
-  withShadow: false,
-  withArrow: true
-};
-function Scroll(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    disabled = _ref.disabled,
-    verticalAlign = _ref.verticalAlign,
-    className = _ref.className,
-    children = _ref.children,
-    scrollPosition = _ref.scrollPosition,
-    onScrolledBottom = _ref.onScrolledBottom,
-    onScrolledNotBottom = _ref.onScrolledNotBottom,
-    onScrollHeightChange = _ref.onScrollHeightChange,
-    scrollContainerRef = _ref.scrollContainerRef,
-    withShadow = _ref.withShadow,
-    showArrow = _ref.withArrow;
-  var finalStyle = {
-    width: width,
-    height: height
-  };
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    withArrow = _useState2[0],
-    setWithArrow = _useState2[1];
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    scrollableRef = _useDimensionObserver.ref,
-    scrollableHeight = _useDimensionObserver.height;
-  if (scrollContainerRef !== null) {
-    scrollContainerRef.current = scrollableRef.current; // eslint-disable-line
-  }
-  var _useDimensionObserver2 = hooks.useDimensionObserver(),
-    scrolleeRef = _useDimensionObserver2.ref,
-    scrolleeHeight = _useDimensionObserver2.height;
-  var scrolledBottomOnce = React.useRef(false);
-  var scrolledNotBottomOnce = React.useRef(false);
-  var reachedBottom = React.useRef(false);
-  var bind = react.useScroll(function (_ref2) {
-    var _ref2$xy = _slicedToArray(_ref2.xy, 2),
-      scrollY = _ref2$xy[1];
-    var newWithArrow = scrollY <= 1;
-    var maxScrollAmount = scrolleeHeight - scrollableHeight;
-    var nowReachedBottom = scrollY + 1 >= maxScrollAmount;
-    if (nowReachedBottom) {
-      if (!reachedBottom.current) {
-        if (onScrolledBottom !== null) {
-          onScrolledBottom({
-            initial: !scrolledBottomOnce.current
-          });
-        }
-        scrolledBottomOnce.current = true;
-      }
-    } else if (reachedBottom.current) {
-      if (onScrolledNotBottom !== null) {
-        onScrolledNotBottom({
-          initial: !scrolledNotBottomOnce.current
-        });
-      }
-      scrolledNotBottomOnce.current = true;
-    }
-    if (newWithArrow !== withArrow && showArrow) {
-      setWithArrow(newWithArrow);
-    }
-    reachedBottom.current = nowReachedBottom;
-  }, {
-    enabled: !disabled
-  });
-
-  // need to call scrolled callbacks on initial render also
-
-  React.useEffect(function () {
-    if (scrolleeHeight > 0 && scrollableHeight > 0 && !disabled) {
-      setWithArrow(Math.round(scrolleeHeight) > Math.round(scrollableHeight));
-      var maxScrollAmount = scrolleeHeight - scrollableHeight;
-      var nowReachedBottom = scrollableRef.current.scrollTop + 1 >= maxScrollAmount;
-      if (nowReachedBottom) {
-        if (onScrolledBottom !== null) {
-          onScrolledBottom({
-            initial: false
-          });
-        }
-      } else if (onScrolledNotBottom !== null) {
-        onScrolledNotBottom({
-          initial: false
-        });
-      }
-    }
-  }, [scrollableHeight, scrolleeHeight, setWithArrow, disabled]);
-  React.useEffect(function () {
-    if (onScrollHeightChange !== null) {
-      var canScroll = (scrolleeHeight || 0) > (scrollableHeight || 0);
-      onScrollHeightChange({
-        scrollableHeight: scrollableHeight,
-        scrolleeHeight: scrolleeHeight,
-        canScroll: canScroll
-      });
-    }
-  }, [scrollableHeight, scrolleeHeight, onScrollHeightChange]);
-  React.useEffect(function () {
-    if (scrollableRef.current !== null && scrollPosition !== null) {
-      scrollableRef.current.scrollTop = scrollPosition;
-    }
-  }, [scrolleeRef, scrollPosition]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.withScroll, !disabled), 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,
-    ref: scrollableRef
-  }, bind()), /*#__PURE__*/React.createElement("div", {
-    className: styles.scrollee,
-    ref: scrolleeRef
-  }, children)), !disabled && showArrow ? /*#__PURE__*/React.createElement("div", {
-    className: styles.arrowContainer
-  }, /*#__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.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"
-  }))) : null);
-}
-Scroll.defaultProps = defaultProps;
-Scroll.propTypes = propTypes;
-var Scroll$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Scroll, Object.assign({
-    scrollContainerRef: ref
-  }, props));
-});
-
-module.exports = Scroll$1;