@pareto-engineering/design-system 4.0.0-alpha.57 → 4.0.0-alpha.59

package/dist/cjs/a/SnapScroller/SnapScroller.js

@@ -30,12 +30,38 @@ const SnapScroller = _ref => {
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, children);
+  const [isDragging, setIsDragging] = (0, React.useState)(false);
+  const [startX, setStartX] = (0, React.useState)(0);
+  const [startScrollX, setStartScrollX] = (0, React.useState)(0);
+  const ref = (0, React.useRef)(null);
+  const onMouseDown = e => {
+    setIsDragging(true);
+    setStartX(e.clientX);
+    setStartScrollX(ref.current.scrollLeft);
+  };
+  const onMouseUp = () => {
+    setIsDragging(false);
+  };
+  const onMouseMove = e => {
+    if (isDragging) {
+      const deltaX = e.clientX - startX;
+      ref.current.scrollLeft = startScrollX - deltaX;
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
+      style: style,
+      ref: ref,
+      onMouseDown: noScrollOnDesktop ? null : onMouseDown,
+      onMouseUp: noScrollOnDesktop ? null : onMouseUp,
+      onMouseMove: noScrollOnDesktop ? null : onMouseMove
+      // {...otherProps}
+    }, children)
+  );
 };
 SnapScroller.propTypes = {
   /**

package/dist/es/a/SnapScroller/SnapScroller.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
+import { useInsertionEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -23,12 +23,38 @@ const SnapScroller = ({
   useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, children);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [startScrollX, setStartScrollX] = useState(0);
+  const ref = useRef(null);
+  const onMouseDown = e => {
+    setIsDragging(true);
+    setStartX(e.clientX);
+    setStartScrollX(ref.current.scrollLeft);
+  };
+  const onMouseUp = () => {
+    setIsDragging(false);
+  };
+  const onMouseMove = e => {
+    if (isDragging) {
+      const deltaX = e.clientX - startX;
+      ref.current.scrollLeft = startScrollX - deltaX;
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
+      style: style,
+      ref: ref,
+      onMouseDown: noScrollOnDesktop ? null : onMouseDown,
+      onMouseUp: noScrollOnDesktop ? null : onMouseUp,
+      onMouseMove: noScrollOnDesktop ? null : onMouseMove
+      // {...otherProps}
+    }, children)
+  );
 };
 SnapScroller.propTypes = {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.57",
+  "version": "4.0.0-alpha.59",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.54",
+    "@pareto-engineering/assets": "^4.0.0-alpha.59",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
@@ -70,5 +70,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "4f0a6d4cc2b8be23d78e82714adb717b21d91c2c"
+  "gitHead": "2d7315603950316a4dc7b8c4a0ccfbc0584e405f"
 }

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
+import { useInsertionEffect, useState, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -27,14 +27,34 @@ const SnapScroller = ({
   useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
+  const [isDragging, setIsDragging] = useState(false)
+  const [startX, setStartX] = useState(0)
+  const [startScrollX, setStartScrollX] = useState(0)
+  const ref = useRef(null)
+
+  const onMouseDown = (e) => {
+    setIsDragging(true)
+    setStartX(e.clientX)
+    setStartScrollX(ref.current.scrollLeft)
+  }
+
+  const onMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  const onMouseMove = (e) => {
+    if (isDragging) {
+      const deltaX = e.clientX - startX
+      ref.current.scrollLeft = startScrollX - deltaX
+    }
+  }
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       id={id}
       className={[
-
         baseClassName,
-
         componentClassName,
         userClassName,
         noScrollOnDesktop && 'desktop-no-scroll',
@@ -42,6 +62,10 @@ const SnapScroller = ({
         .filter((e) => e)
         .join(' ')}
       style={style}
+      ref={ref}
+      onMouseDown={noScrollOnDesktop ? null : onMouseDown}
+      onMouseUp={noScrollOnDesktop ? null : onMouseUp}
+      onMouseMove={noScrollOnDesktop ? null : onMouseMove}
       // {...otherProps}
     >
       {children}

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -2959,6 +2959,9 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 exports[`Storyshots a/SnapScroller Base 1`] = `
 <div
   className="base snap-scroller u1 pv-u"
+  onMouseDown={[Function]}
+  onMouseMove={[Function]}
+  onMouseUp={[Function]}
   style={
     {
       "background": "var(--background4)",
@@ -3036,6 +3039,9 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
 exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
 <div
   className="base snap-scroller u1 pv-u desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
   style={
     {
       "background": "var(--background4)",
@@ -11731,6 +11737,9 @@ exports[`Storyshots b/Card Card With Progress 1`] = `
 exports[`Storyshots b/Card/Group Base 1`] = `
 <div
   className="base snap-scroller base group span-8 snap-scroller desktop-vertical-flexbox desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
 >
   <div
     className="base card span-2"
@@ -11771,6 +11780,9 @@ exports[`Storyshots b/Card/Group Base 1`] = `
 exports[`Storyshots b/Card/Group Card Group Grid On Desktop 1`] = `
 <div
   className="base snap-scroller base group span-8 snap-scroller desktop-grid desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
 >
   <div
     className="base card span-2"