vevet 3.19.2 → 4.0.0-beta.0

package/src/components/{SmoothScroll → CustomScroll}/Elements.ts

@@ -1,10 +1,10 @@
 import { createElement, selectAll, selectOne } from 'vevet-dom';
-import { NSmoothScroll } from './types';
+import { NCustomScroll } from './types';
 
 type TPickedProps = 'elements' | 'hasWillChange' | 'translatePrecision';
 
 interface IProps
-  extends Required<Pick<NSmoothScroll.IStaticProps, TPickedProps>> {
+  extends Required<Pick<NCustomScroll.IStaticProps, TPickedProps>> {
   container: Element;
   wrapperClassName: string;
 }
@@ -18,7 +18,7 @@ export class Elements {
 
   private _wrapperExists!: boolean;
 
-  private _elements!: NSmoothScroll.IElement[];
+  private _elements!: NCustomScroll.IElement[];
 
   get elements() {
     return this._elements;
@@ -62,10 +62,10 @@ export class Elements {
         selectAll(
           this.props.elements,
           this.props.container,
-        ) as NodeListOf<NSmoothScroll.IElement>,
+        ) as NodeListOf<NCustomScroll.IElement>,
       );
     } else {
-      this._elements = [this._wrapper as NSmoothScroll.IElement];
+      this._elements = [this._wrapper as NCustomScroll.IElement];
     }
 
     // add will-change
@@ -83,13 +83,13 @@ export class Elements {
       const element = this.elements[index];
 
       // update scroll values
-      element.smoothScrollLeft = scrollLeft;
-      element.smoothScrollTop = scrollTop;
+      element.customScrollLeft = scrollLeft;
+      element.customScrollTop = scrollTop;
 
       // update easing
-      const lerpAttr = element.getAttribute('data-smooth-scroll-lerp');
+      const lerpAttr = element.getAttribute('data-custom-scroll-lerp');
       if (lerpAttr) {
-        element.smoothScrollLerp = parseFloat(lerpAttr);
+        element.customScrollLerp = parseFloat(lerpAttr);
       }
     }
   }
@@ -109,8 +109,8 @@ export class Elements {
     for (let index = 0; index < this.elements.length; index += 1) {
       const element = this._elements[index];
 
-      const x = this._getToFixed(-element.smoothScrollLeft);
-      const y = this._getToFixed(-element.smoothScrollTop);
+      const x = this._getToFixed(-element.customScrollLeft);
+      const y = this._getToFixed(-element.customScrollTop);
 
       element.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, ${y}, 0,1)`;
     }
@@ -121,9 +121,9 @@ export class Elements {
     const array = this.elements;
 
     return array.every(
-      ({ smoothScrollLeft, smoothScrollTop }) =>
-        smoothScrollLeft === array[0].smoothScrollLeft &&
-        smoothScrollTop === array[0].smoothScrollTop,
+      ({ customScrollLeft, customScrollTop }) =>
+        customScrollLeft === array[0].customScrollLeft &&
+        customScrollTop === array[0].customScrollTop,
     );
   }
 

package/src/components/{SmoothScroll → CustomScroll}/index.ts

@@ -1,6 +1,6 @@
 import { selectOne } from 'vevet-dom';
 import { Component as ComponentClass } from '@/base/Component';
-import { NSmoothScroll } from './types';
+import { NCustomScroll } from './types';
 import { IScrollLike } from '@/types/general';
 import { clamp, lerp } from '@/utils/math';
 import { normalizeWheel } from '@/utils/scroll';
@@ -9,17 +9,20 @@ import { AnimationFrame } from './AnimatonFrame';
 import { onResize } from '@/utils/listeners/onResize';
 import { getApp } from '@/utils/internal/getApp';
 
-export type { NSmoothScroll };
+export type { NCustomScroll };
 
 /**
- * Smooth scrolling
+ * Custom smooth scrolling component that replaces native scrolling behavior.
+ * It provides smooth interpolation, custom scroll events, and integration with other elements.
+ *
+ * @requires Requires styles: `@import '~vevet/lib/styles/components/CustomScroll';`
  */
-export class SmoothScroll<
-    StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps,
+export class CustomScroll<
+    StaticProps extends NCustomScroll.IStaticProps = NCustomScroll.IStaticProps,
     ChangeableProps extends
-      NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps,
+      NCustomScroll.IChangeableProps = NCustomScroll.IChangeableProps,
     CallbacksTypes extends
-      NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes,
+      NCustomScroll.ICallbacksTypes = NCustomScroll.ICallbacksTypes,
   >
   extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes>
   implements IScrollLike
@@ -36,6 +39,7 @@ export class SmoothScroll<
       translatePrecision: 2,
       isEnabled: true,
       hasWheel: true,
+      wheelSpeed: 1,
       direction: 'vertical',
       isInversedHandlerDirection: false,
       shouldAutoStop: true,
@@ -47,31 +51,34 @@ export class SmoothScroll<
   }
 
   get prefix() {
-    return `${getApp().prefix}smooth-scroll`;
+    return `${getApp().prefix}custom-scroll`;
   }
 
-  /** Scroll container */
+  /** Scroll container element */
   protected _container: HTMLElement;
 
-  /** Scroll container */
+  /** Scroll container element */
   get container() {
     return this._container;
   }
 
+  /**
+   * Internal handler for the scroll elements
+   * @ignore
+   */
   protected _elements: Elements;
 
   /**
-   * Scroll wrapper. If the element does not exist indide the `container`,
-   * it will be created automatically
+   * Scroll wrapper. If the element does not exist indide the `container`, it will be created automatically
    */
   get wrapper() {
     return this._elements.wrapper;
   }
 
-  /** `scrollLeft` target value */
+  /** The `scrollLeft` target value */
   protected _targetLeft: number;
 
-  /** `scrollLeft` target value */
+  /** The `scrollLeft` target value */
   get targetLeft() {
     return this._targetLeft;
   }
@@ -86,10 +93,10 @@ export class SmoothScroll<
     this._targetLeft = clamp(value, [0, this.maxScrollableWidth]);
   }
 
-  /** `scrollTop` target value */
+  /** The `scrollTop` target value */
   protected _targetTop: number;
 
-  /** `scrollTop` target value */
+  /** The `scrollTop` target value */
   get targetTop() {
     return this._targetTop;
   }
@@ -104,10 +111,10 @@ export class SmoothScroll<
     this._targetTop = clamp(value, [0, this.maxScrollableHeight]);
   }
 
-  /** `scrollLeft` */
+  /** The current `scrollLeft` value */
   protected _scrollLeft: number;
 
-  /** `scrollLeft` */
+  /** The current `scrollLeft` value */
   get scrollLeft() {
     return this._scrollLeft;
   }
@@ -122,10 +129,10 @@ export class SmoothScroll<
     this._enable();
   }
 
-  /** `scrollTop` */
+  /** The current `scrollTop` value */
   protected _scrollTop: number;
 
-  /** `scrollTop` */
+  /** The current `scrollTop` value */
   get scrollTop() {
     return this._scrollTop;
   }
@@ -140,42 +147,42 @@ export class SmoothScroll<
     this._enable();
   }
 
-  /** Scroll width */
+  /** The scroll width of the container */
   protected _scrollWidth: number;
 
-  /** Scroll width */
+  /** The scroll width of the container */
   get scrollWidth() {
     return this._scrollWidth;
   }
 
-  /** Scroll height */
+  /** The scroll height of the container */
   protected _scrollHeight: number;
 
-  /** Scroll height */
+  /** The scroll width of the container */
   get scrollHeight() {
     return this._scrollHeight;
   }
 
-  /** Container width */
+  /** The container width */
   protected _clientWidth: number;
 
-  /** Container width */
+  /** The container width */
   get clientWidth() {
     return this._clientWidth;
   }
 
-  /** Container height */
+  /** The container height */
   protected _clientHeight: number;
 
-  /** Container height */
+  /** The container height */
   get clientHeight() {
     return this._clientHeight;
   }
 
-  /** Wrapper width */
+  /** The wrapper width */
   protected _wrapperWidth: number;
 
-  /** Wrapper height */
+  /** The wrapper height */
   protected _wrapperHeight: number;
 
   /** Maximum scrollable area of the X axis */
@@ -188,7 +195,7 @@ export class SmoothScroll<
     return this.scrollHeight - this.clientHeight;
   }
 
-  /** Has scroll */
+  /** The container has scroll */
   get hasScroll() {
     return this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
   }
@@ -196,19 +203,23 @@ export class SmoothScroll<
   /** If the approximation between the target and current scroll values must be instantaneous */
   protected _isInstant?: boolean;
 
-  /** Animation frame */
+  /**
+   * Animation frame
+   * @ignore
+   */
   protected _raf: AnimationFrame;
 
   /** Frame index */
   protected _frameIndex: number;
 
-  /** Equal lerp for all elements */
+  /** Use equal lerp for all elements */
   protected _isEqualLerp: boolean;
 
-  /** `_disable` timeout */
+  /** Disable timeout */
   protected _disableDelayDebounce?: NodeJS.Timeout;
 
-  get isSmoothScroll() {
+  /** If the component is a custom scroll */
+  get isCustomScroll() {
     return true;
   }
 
@@ -275,6 +286,9 @@ export class SmoothScroll<
     this._toggle();
   }
 
+  /**
+   * Sets the class names for the elements.
+   */
   protected _setClassNames(isActive: boolean) {
     const { direction } = this.props;
 
@@ -318,7 +332,7 @@ export class SmoothScroll<
     // initial resize
     resizeHandler.resize();
 
-    // if resize observer not used, we recalculate sizes on each 10th frame
+    // if the ResizeObserver cannot be used, recalculate sizes on each 10th frame
     if (!resizeHandler.hasResizeObserver) {
       this.addCallback(
         'render',
@@ -414,6 +428,7 @@ export class SmoothScroll<
       hasWheel,
       hasStopPropagation,
       isInversedHandlerDirection,
+      wheelSpeed,
     } = this.props;
 
     if (!isEnabled || !hasWheel || !this.hasScroll) {
@@ -435,8 +450,10 @@ export class SmoothScroll<
     const { pixelX, pixelY } = normalizeWheel(event);
 
     // set new scroll targets
-    const leftIterator = isInversedHandlerDirection ? pixelY : pixelX;
-    const topIterator = isInversedHandlerDirection ? pixelX : pixelY;
+    const leftIterator =
+      (isInversedHandlerDirection ? pixelY : pixelX) * wheelSpeed;
+    const topIterator =
+      (isInversedHandlerDirection ? pixelX : pixelY) * wheelSpeed;
     this.setTargetLeft(this.targetLeft + leftIterator);
     this.setTargetTop(this.targetTop + topIterator);
 
@@ -507,14 +524,14 @@ export class SmoothScroll<
       const element = elements[index];
       const elementLerp = this._getLerp(element);
 
-      element.smoothScrollLeft = this._lerp(
-        element.smoothScrollLeft,
+      element.customScrollLeft = this._lerp(
+        element.customScrollLeft,
         this._targetLeft,
         elementLerp,
       );
 
-      element.smoothScrollTop = this._lerp(
-        element.smoothScrollTop,
+      element.customScrollTop = this._lerp(
+        element.customScrollTop,
         this._targetTop,
         elementLerp,
       );
@@ -549,7 +566,7 @@ export class SmoothScroll<
   }
 
   /** Get lerp */
-  protected _getLerp(element?: NSmoothScroll.IElement) {
+  protected _getLerp(element?: NCustomScroll.IElement) {
     const { lerp: lerpEase, isFpsNormalized } = this.props;
 
     const fpsMultiplier = isFpsNormalized ? this._raf.ease : 1;
@@ -558,7 +575,7 @@ export class SmoothScroll<
       return lerpEase * fpsMultiplier;
     }
 
-    return (element.smoothScrollLerp ?? lerpEase) * fpsMultiplier;
+    return (element.customScrollLerp ?? lerpEase) * fpsMultiplier;
   }
 
   /** Scroll to */

package/src/components/{SmoothScroll → CustomScroll}/stories/Default.tsx

@@ -1,22 +1,22 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
-import { SmoothScroll } from '..';
+import { CustomScroll } from '..';
 import { times } from '@/utils/common';
 
 export const DefaultComponent: FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+  const [scroll, setScroll] = useState<CustomScroll>();
 
   useEffect(() => {
     if (!containerRef.current) {
       return undefined;
     }
 
-    const instance = new SmoothScroll({
+    const instance = new CustomScroll({
       container: containerRef.current,
     });
 
-    setSmoothScroll(instance);
+    setScroll(instance);
 
     return () => instance.destroy();
   }, []);
@@ -25,14 +25,14 @@ export const DefaultComponent: FC = () => {
     <div>
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+        onClick={() => scroll?.changeProps({ isEnabled: true })}
       >
         Enable
       </button>
 
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+        onClick={() => scroll?.changeProps({ isEnabled: false })}
       >
         Disable
       </button>
@@ -43,10 +43,10 @@ export const DefaultComponent: FC = () => {
 
       <div
         ref={containerRef}
-        className="v-smooth-scroll"
+        className="v-custom-scroll"
         style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
       >
-        <div className="v-smooth-scroll__wrapper">
+        <div className="v-custom-scroll__wrapper">
           {times(
             (index) => (
               <div key={index}>

package/src/components/{SmoothScroll → CustomScroll}/stories/WithHorizontal.tsx

@@ -1,25 +1,25 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
-import { SmoothScroll } from '..';
+import { CustomScroll } from '..';
 import { times } from '@/utils/common';
 
 export const WithHorizontalComponent: FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+  const [scroll, setScroll] = useState<CustomScroll>();
 
   useEffect(() => {
     if (!containerRef.current) {
       return undefined;
     }
 
-    const instance = new SmoothScroll({
+    const instance = new CustomScroll({
       container: containerRef.current,
       elements: '.js-element',
       direction: 'horizontal',
       isInversedHandlerDirection: true,
     });
 
-    setSmoothScroll(instance);
+    setScroll(instance);
 
     return () => instance.destroy();
   }, []);
@@ -28,14 +28,14 @@ export const WithHorizontalComponent: FC = () => {
     <div>
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+        onClick={() => scroll?.changeProps({ isEnabled: true })}
       >
         Enable
       </button>
 
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+        onClick={() => scroll?.changeProps({ isEnabled: false })}
       >
         Disable
       </button>
@@ -46,10 +46,10 @@ export const WithHorizontalComponent: FC = () => {
 
       <div
         ref={containerRef}
-        className="v-smooth-scroll"
+        className="v-custom-scroll"
         style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
       >
-        <div className="v-smooth-scroll__wrapper">
+        <div className="v-custom-scroll__wrapper">
           <div
             style={{
               display: 'flex',
@@ -64,7 +64,7 @@ export const WithHorizontalComponent: FC = () => {
                 <div
                   key={index}
                   className="js-element"
-                  data-smooth-scroll-lerp={0.1 - (index / count) * 0.035}
+                  data-custom-scroll-lerp={0.1 - (index / count) * 0.035}
                   style={{
                     display: 'flex',
                     flexDirection: 'row',

package/src/components/{SmoothScroll → CustomScroll}/stories/WithInnerLerp.tsx

@@ -1,23 +1,23 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
-import { SmoothScroll } from '..';
+import { CustomScroll } from '..';
 import { times } from '@/utils/common';
 
 export const WithInnerLerpComponent: FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+  const [scroll, setScroll] = useState<CustomScroll>();
 
   useEffect(() => {
     if (!containerRef.current) {
       return undefined;
     }
 
-    const instance = new SmoothScroll({
+    const instance = new CustomScroll({
       container: containerRef.current,
       elements: '.js-element',
     });
 
-    setSmoothScroll(instance);
+    setScroll(instance);
 
     return () => instance.destroy();
   }, []);
@@ -26,14 +26,14 @@ export const WithInnerLerpComponent: FC = () => {
     <div>
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+        onClick={() => scroll?.changeProps({ isEnabled: true })}
       >
         Enable
       </button>
 
       <button
         type="button"
-        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+        onClick={() => scroll?.changeProps({ isEnabled: false })}
       >
         Disable
       </button>
@@ -44,16 +44,16 @@ export const WithInnerLerpComponent: FC = () => {
 
       <div
         ref={containerRef}
-        className="v-smooth-scroll"
+        className="v-custom-scroll"
         style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
       >
-        <div className="v-smooth-scroll__wrapper">
+        <div className="v-custom-scroll__wrapper">
           {times(
             (index, count) => (
               <div
                 key={index}
                 className="js-element"
-                data-smooth-scroll-lerp={0.5 - (index / count) * 0.35}
+                data-custom-scroll-lerp={0.5 - (index / count) * 0.35}
               >
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Pariatur quibusdam fugit at quos. Quod repellendus placeat

package/src/components/{SmoothScroll → CustomScroll}/stories/index.stories.tsx

@@ -5,7 +5,7 @@ import { WithInnerLerpComponent } from './WithInnerLerp';
 import { WithHorizontalComponent } from './WithHorizontal';
 
 const meta: Meta = {
-  title: 'Components/SmoothScroll',
+  title: 'Components/CustomScroll',
 };
 
 export default meta;