gatsby-core-theme 30.0.20 → 30.0.22

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [30.0.22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.21...v30.0.22) (2023-11-22)
+
+
+### Bug Fixes
+
+* add scroll event ([eee64c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/eee64c4f48461b246a1420749fa2bb93d7c3f0f5))
+
+## [30.0.21](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.20...v30.0.21) (2023-11-21)
+
+
+### Bug Fixes
+
+* change import because we have problem on storybook on matrix ([7daaefd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7daaefd03056d186bd0607d56bf15164e48ae02b))
+
 ## [30.0.20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.19...v30.0.20) (2023-11-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.20",
+  "version": "30.0.22",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/spotlights/index.js

@@ -5,7 +5,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Button from '~atoms/button/button';
-import imgSize from '~constants/spotlight-image-dimensions.js';
+import imgSize from '../../../constants/spotlight-image-dimensions';
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
 import { imagePrettyUrl, getImageFilename, getAltText, translate } from '~helpers/getters';

package/src/hooks/scroll-x/index.js

@@ -1,8 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-// eslint-disable-next-line react/prop-types
-const ScrollX = ({ children, refTag = {}, scroll = false, stopScrolling = () => {} }) => {
+const ScrollX = ({
+  children,
+  refTag = {},
+  scroll = false,
+  stopScrolling = () => {},
+  onScroll = () => {},
+}) => {
   let pos = { top: 0, left: 0, x: 0, y: 0 };
 
   const preventDefaultEvents = (e) => {
@@ -53,14 +59,22 @@ const ScrollX = ({ children, refTag = {}, scroll = false, stopScrolling = () =>
     refTag.current.addEventListener('mouseleave', mouseUp);
   };
 
+  const handleScroll = () => {
+    onScroll(refTag.current.scrollLeft);
+  };
+
   useEffect(() => {
     if (scroll) {
       refTag.current.style.cursor = 'grab';
       refTag.current.addEventListener('mousedown', mouseDown);
+      refTag.current.addEventListener('scroll', handleScroll);
     }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    return () => {
+      refTag.current?.removeEventListener('mousedown', mouseDown);
+      refTag.current?.removeEventListener('scroll', handleScroll);
+    };
+  }, [scroll]);
 
   return <>{children}</>;
 };
@@ -69,6 +83,8 @@ ScrollX.propTypes = {
   children: PropTypes.node,
   refTag: PropTypes.shape({}),
   scroll: PropTypes.bool,
+  onScroll: PropTypes.func,
+  stopScrolling: PropTypes.func,
 };
 
 export default ScrollX;