@rolder/kit 3.0.0-alpha.17 → 3.0.0-alpha.18

package/dist/ui/scrollArea/context.d.ts

@@ -0,0 +1,28 @@
+import type { ScrollAreaContextValue, ScrollAreaHook } from './types';
+/** Внутренний контекст для передачи состояния ScrollArea */
+export declare const ScrollAreaContext: import("react").Context<ScrollAreaContextValue | null>;
+export declare const ScrollAreaProvider: import("react").Provider<ScrollAreaContextValue | null>;
+/**
+ * Хук для доступа к состоянию и методам ScrollArea
+ *
+ * @returns Объект с индикаторами позиции, методами управления и ref на viewport
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isAtBottom, scrollToTop, viewportRef } = useScrollArea();
+ *
+ *   const scrollToElement = () => {
+ *     const target = viewportRef.current?.querySelector('[data-target]');
+ *     target?.scrollIntoView();
+ *   };
+ *
+ *   return (
+ *     <button onClick={scrollToTop} disabled={isAtTop}>
+ *       В начало
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare const useScrollArea: () => ScrollAreaHook;

package/dist/ui/scrollArea/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const ScrollAreaContext = /*#__PURE__*/ createContext(null);
+const ScrollAreaProvider = ScrollAreaContext.Provider;
+const useScrollArea = ()=>{
+    const context = useContext(ScrollAreaContext);
+    if (!context) throw new Error('useScrollArea must be used within ScrollArea');
+    const { _callbackRef, mantineProps: _, radius: __, ...publicAPI } = context;
+    return publicAPI;
+};
+export { ScrollAreaContext, ScrollAreaProvider, useScrollArea };

package/dist/ui/scrollArea/index.d.ts

@@ -0,0 +1,3 @@
+export { useScrollArea } from './context';
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaContextValue, ScrollAreaHook, ScrollAreaProps, ScrollAreaState, ScrollButtonProps, ScrollPosition, } from './types';

package/dist/ui/scrollArea/index.js

@@ -0,0 +1,3 @@
+import { useScrollArea } from "./context.js";
+import { ScrollArea } from "./ScrollArea.js";
+export { ScrollArea, useScrollArea };

package/dist/ui/scrollArea/types.d.ts

@@ -0,0 +1,65 @@
+import type { MantineRadius, ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+export interface ScrollAreaProps extends Omit<MantineScrollAreaProps, 'children'> {
+    /** Включение автоскролла при добавлении контента (по умолчанию false) */
+    autoScroll?: boolean;
+    /** Прокрутить к концу при инициализации компонента (по умолчанию false) */
+    scrollToBottomOnInit?: boolean;
+    /** Анимированная прокрутка (по умолчанию true) */
+    animated?: boolean;
+    /** Отступ для near-зон в пикселях (по умолчанию 100) */
+    nearThreshold?: number;
+    /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
+    radius?: MantineRadius;
+    /** Дочерние элементы - автоматически оборачиваются в ScrollArea.Content */
+    children: ReactNode;
+}
+export interface ScrollAreaHook {
+    /** Точно в начале (scrollTop === 0) */
+    isAtTop: boolean;
+    /** В пределах nearThreshold от начала */
+    isNearTop: boolean;
+    /** Точно в конце (scrollTop + clientHeight >= scrollHeight) */
+    isAtBottom: boolean;
+    /** В пределах nearThreshold от конца */
+    isNearBottom: boolean;
+    /** Выше центральной точки области прокрутки */
+    isAboveCenter: boolean;
+    /** Есть контент требующий прокрутки */
+    hasScrollableContent: boolean;
+    /** Прокрутить к началу области */
+    scrollToTop: (animated?: boolean) => void;
+    /** Прокрутить к концу области */
+    scrollToBottom: (animated?: boolean) => void;
+    /** React ref на viewport элемент для прямого доступа к DOM */
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface ScrollAreaState extends ScrollAreaHook {
+    /** Внутренний callback ref для подключения к Mantine ScrollArea */
+    _callbackRef: (node: HTMLDivElement | null) => void;
+    /** Внутренний ref для наблюдения за изменениями контента */
+    _contentResizeRef: (node: HTMLDivElement | null) => void;
+}
+export interface ScrollAreaContextValue extends ScrollAreaState {
+    /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
+    radius?: MantineRadius;
+    /** Пропсы Mantine ScrollArea, переданные в корневой компонент */
+    mantineProps: Omit<MantineScrollAreaProps, 'children'>;
+}
+export interface ScrollButtonProps {
+    /** CSS классы для стилизации кнопки */
+    className?: string;
+    /** Иконка для прокрутки вверх (по умолчанию IconChevronUp) */
+    upIcon?: ReactNode;
+    /** Иконка для прокрутки вниз (по умолчанию IconChevronDown) */
+    downIcon?: ReactNode;
+}
+/** Внутренний тип для отслеживания позиции скролла */
+export interface ScrollPosition {
+    /** Текущая позиция скролла сверху */
+    scrollTop: number;
+    /** Высота видимой области */
+    clientHeight: number;
+    /** Общая высота прокручиваемого контента */
+    scrollHeight: number;
+}

package/dist/ui/scrollArea/useScrollArea.d.ts

@@ -0,0 +1,9 @@
+import type { ScrollAreaState } from './types';
+interface UseScrollAreaOptions {
+    autoScroll?: boolean;
+    scrollToBottomOnInit?: boolean;
+    animated?: boolean;
+    nearThreshold?: number;
+}
+export declare const useScrollAreaState: (options?: UseScrollAreaOptions) => ScrollAreaState;
+export {};

package/dist/ui/scrollArea/useScrollArea.js

@@ -0,0 +1,146 @@
+import { useDebouncedCallback, useMergedRef, useResizeObserver } from "@mantine/hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+const useScrollAreaState = (options = {})=>{
+    const { autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 32 } = options;
+    const scrollAreaRef = useRef(null);
+    const isUserInteractingRef = useRef(false);
+    const userInteractionTimeoutRef = useRef(void 0);
+    const isInitializedRef = useRef(false);
+    const [contentResizeRef, contentRect] = useResizeObserver();
+    const [scrollPosition, setScrollPosition] = useState({
+        scrollTop: 0,
+        clientHeight: 0,
+        scrollHeight: 0
+    });
+    const isAtTop = 0 === scrollPosition.scrollTop;
+    const isAtBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight;
+    const isNearTop = scrollPosition.scrollTop <= nearThreshold;
+    const isNearBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight - nearThreshold;
+    const isAboveCenter = scrollPosition.scrollTop < (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
+    const hasScrollableContent = scrollPosition.scrollHeight > scrollPosition.clientHeight;
+    const debouncedUpdatePosition = useDebouncedCallback((element)=>{
+        const newPosition = {
+            scrollTop: element.scrollTop,
+            clientHeight: element.clientHeight,
+            scrollHeight: element.scrollHeight
+        };
+        setScrollPosition(newPosition);
+    }, {
+        delay: 16
+    });
+    const scrollToTop = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = 0;
+    }, [
+        animated
+    ]);
+    const scrollToBottom = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = element.scrollHeight;
+        const scrollHeightBefore = element.scrollHeight;
+        setTimeout(()=>{
+            const scrollHeightAfter = element.scrollHeight;
+            const diff = element.scrollHeight - (element.scrollTop + element.clientHeight);
+            if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) element.scrollTop = element.scrollHeight;
+        }, 50);
+    }, [
+        animated
+    ]);
+    const performAutoScroll = useCallback(()=>{
+        if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) return;
+        if (isAtBottom) scrollToBottom(false);
+    }, [
+        autoScroll,
+        isAtBottom,
+        scrollToBottom
+    ]);
+    const handleUserInteraction = useCallback(()=>{
+        isUserInteractingRef.current = true;
+        if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        userInteractionTimeoutRef.current = setTimeout(()=>{
+            isUserInteractingRef.current = false;
+        }, 150);
+    }, []);
+    const handleScroll = useCallback((event)=>{
+        const element = event.target;
+        debouncedUpdatePosition(element);
+    }, [
+        debouncedUpdatePosition
+    ]);
+    useEffect(()=>{
+        if (!scrollToBottomOnInit || isInitializedRef.current) return;
+        if (hasScrollableContent) {
+            scrollToBottom(animated);
+            isInitializedRef.current = true;
+        }
+    }, [
+        scrollToBottomOnInit,
+        hasScrollableContent,
+        scrollToBottom,
+        animated
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element || 0 === contentRect.height) return;
+        debouncedUpdatePosition(element);
+        const timeoutId = setTimeout(performAutoScroll, 10);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        contentRect.height,
+        debouncedUpdatePosition,
+        performAutoScroll
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const events = [
+            'wheel',
+            'touchstart',
+            'touchmove',
+            'mousedown'
+        ];
+        element.addEventListener('scroll', handleScroll);
+        events.forEach((event)=>{
+            element.addEventListener(event, handleUserInteraction);
+        });
+        debouncedUpdatePosition(element);
+        return ()=>{
+            element.removeEventListener('scroll', handleScroll);
+            events.forEach((event)=>{
+                element.removeEventListener(event, handleUserInteraction);
+            });
+            if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        };
+    }, [
+        handleScroll,
+        handleUserInteraction,
+        debouncedUpdatePosition
+    ]);
+    const callbackRef = useMergedRef(scrollAreaRef);
+    return {
+        isAtTop,
+        isNearTop,
+        isAtBottom,
+        isNearBottom,
+        isAboveCenter,
+        hasScrollableContent,
+        scrollToTop,
+        scrollToBottom,
+        viewportRef: scrollAreaRef,
+        _callbackRef: callbackRef,
+        _contentResizeRef: contentResizeRef
+    };
+};
+export { useScrollAreaState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.17",
+  "version": "3.0.0-alpha.18",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",