@pareto-engineering/design-system 4.0.0-alpha.58 → 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/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -23,7 +23,7 @@ const ToggleSwitch = _ref => {
     id,
     className: userClassName,
     style,
-    handleOnChange,
+    handleOnClick,
     checked,
     size
     // ...otherProps
@@ -38,13 +38,13 @@ const ToggleSwitch = _ref => {
       '--size': size,
       ...style
     },
+    onClick: handleOnClick,
     type: "button"
     // {...otherProps}
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: "switch",
-    checked: checked,
-    onChange: handleOnChange
+    checked: checked
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "switch"
   }));
@@ -65,7 +65,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnChange: _propTypes.default.func,
+  handleOnClick: _propTypes.default.func,
   /**
    * The checked state of this element
    */

package/dist/cjs/b/ThemeSelector/ThemeSelector.js

@@ -45,7 +45,7 @@ const ThemeSelector = _ref => {
     className: "c-x x-paragraph"
   }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
     checked: userTheme === 'dark',
-    handleOnChange: loopThemes
+    handleOnClick: loopThemes
   }));
 };
 ThemeSelector.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/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -16,7 +16,7 @@ const ToggleSwitch = ({
   id,
   className: userClassName,
   style,
-  handleOnChange,
+  handleOnClick,
   checked,
   size
   // ...otherProps
@@ -31,13 +31,13 @@ const ToggleSwitch = ({
       '--size': size,
       ...style
     },
+    onClick: handleOnClick,
     type: "button"
     // {...otherProps}
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: "switch",
-    checked: checked,
-    onChange: handleOnChange
+    checked: checked
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "switch"
   }));
@@ -58,7 +58,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnChange: PropTypes.func,
+  handleOnClick: PropTypes.func,
   /**
    * The checked state of this element
    */

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -38,7 +38,7 @@ const ThemeSelector = ({
     className: "c-x x-paragraph"
   }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
     checked: userTheme === 'dark',
-    handleOnChange: loopThemes
+    handleOnClick: loopThemes
   }));
 };
 ThemeSelector.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.58",
+  "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": "dcccc8b3170d8f1f27d4fbbe653aebdf4b5f829b"
+  "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/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -20,7 +20,7 @@ const ToggleSwitch = ({
   id,
   className:userClassName,
   style,
-  handleOnChange,
+  handleOnClick,
   checked,
   size,
   // ...otherProps
@@ -45,15 +45,11 @@ const ToggleSwitch = ({
         '--size':size,
         ...style,
       }}
+      onClick={handleOnClick}
       type="button"
       // {...otherProps}
     >
-      <input
-        type="checkbox"
-        id="switch"
-        checked={checked}
-        onChange={handleOnChange}
-      />
+      <input type="checkbox" id="switch" checked={checked} />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label htmlFor="switch" />
     </button>
@@ -79,7 +75,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnChange:PropTypes.func,
+  handleOnClick:PropTypes.func,
 
   /**
    * The checked state of this element

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -53,7 +53,7 @@ const ThemeSelector = ({
         {' '}
         Theme
       </span>
-      <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} />
+      <ToggleSwitch checked={userTheme === 'dark'} handleOnClick={loopThemes} />
     </div>
   )
 }

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"