fix(toolbar): horizontal wheel scrolling support (#1201)

Author: alesiahil

src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx

@@ -1,15 +1,18 @@
-import { Fragment } from 'react';
+import { Fragment, useRef } from 'react';
 import { ChevronDown16 } from '@konturio/default-icons';
 import { useToolbarContent } from '~features/toolbar/hooks/use-toolbar-content';
+import { useWheelHorizontalScroll } from '~utils/hooks/useWheelHorizontalScroll';
 import { ToolbarControl } from '../ToolbarControl/ToolbarControl';
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 import s from './ToolbarContent.module.css';
 
 export const ToolbarContent = () => {
   const toolbarContent = useToolbarContent();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useWheelHorizontalScroll(scrollRef);
 
   return (
-    <div className={s.toolbarContent}>
+    <div className={s.toolbarContent} ref={scrollRef}>
       {toolbarContent.map(({ sectionName, buttons }, index) => (
         <Fragment key={sectionName}>
           {index > 0 && <div className={s.sectionDivider} />}

src/utils/hooks/useWheelHorizontalScroll.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import React, { useRef } from 'react';
+import { render } from '@testing-library/react';
+import { test, expect } from 'vitest';
+import { useWheelHorizontalScroll } from './useWheelHorizontalScroll';
+
+function Demo() {
+  const ref = useRef<HTMLDivElement>(null);
+  useWheelHorizontalScroll(ref);
+  return (
+    <div ref={ref} data-testid="scroll" style={{ overflowX: 'auto', width: '100px' }}>
+      <div style={{ width: '300px' }}>content</div>
+    </div>
+  );
+}
+
+test('scrollLeft changes on vertical wheel events', () => {
+  const { getByTestId } = render(<Demo />);
+  const scroll = getByTestId('scroll') as HTMLDivElement;
+
+  Object.defineProperty(scroll, 'scrollWidth', { value: 300, configurable: true });
+  Object.defineProperty(scroll, 'clientWidth', { value: 100, configurable: true });
+
+  scroll.dispatchEvent(new WheelEvent('wheel', { deltaY: 50, bubbles: true }));
+
+  expect(
+    scroll.scrollLeft > 0,
+    `scrollLeft should change after wheel event, got ${scroll.scrollLeft}`,
+  ).toBe(true);
+});

src/utils/hooks/useWheelHorizontalScroll.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export function useWheelHorizontalScroll(ref: React.RefObject<HTMLElement>) {
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const onWheel = (e: WheelEvent) => {
+      if (node.scrollWidth <= node.clientWidth || e.deltaY === 0) return;
+      e.preventDefault();
+      node.scrollLeft += e.deltaY;
+    };
+    node.addEventListener('wheel', onWheel, { passive: false });
+    return () => node.removeEventListener('wheel', onWheel);
+  }, [ref]);
+}