@envive-ai/react-toolkit-v3 0.3.7 → 0.3.9

package/src/components/PromptCarousel/components/CarouselContentWithRowScroll.tsx

@@ -1,71 +0,0 @@
-import { Stack } from '../../Stack';
-import { ButtonContainerRow } from './ButtonContainerRow';
-import { RepetitionNumberSuffix } from '../types/types';
-
-export interface CarouselContentWithRowScrollProps {
-  visibleButtonsFirstRow: string[];
-  visibleButtonsSecondRow: string[];
-  shouldShowTwoRows: boolean;
-  renderButton: (
-    text: string,
-    index: number,
-    repetitionNumber?: `${RepetitionNumberSuffix}`,
-  ) => React.ReactNode;
-  isAnimated: boolean;
-  isAnimationStopped: boolean;
-  firstRowScrollRef: React.RefObject<HTMLDivElement>;
-  firstRowStackRef: React.RefObject<HTMLDivElement>;
-  secondRowScrollRef: React.RefObject<HTMLDivElement>;
-}
-
-export const CarouselContentWithRowScroll = ({
-  visibleButtonsFirstRow,
-  visibleButtonsSecondRow,
-  shouldShowTwoRows,
-  isAnimated,
-  isAnimationStopped,
-  renderButton,
-  firstRowScrollRef,
-  firstRowStackRef,
-  secondRowScrollRef,
-}: CarouselContentWithRowScrollProps) => {
-  const showRepetitions = isAnimated && !isAnimationStopped;
-
-  const renderRowButtons = (buttons: string[], startIndex: number) => (
-    <>
-      {buttons.map((text, index) => renderButton(text, startIndex + index))}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
-        )}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
-        )}
-    </>
-  );
-
-  return (
-    <Stack
-      direction="column"
-      gap="2"
-    >
-      <ButtonContainerRow
-        scrollRef={firstRowScrollRef}
-        stackRef={firstRowStackRef}
-        aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
-      >
-        {renderRowButtons(visibleButtonsFirstRow, 0)}
-      </ButtonContainerRow>
-
-      {shouldShowTwoRows && (
-        <ButtonContainerRow
-          scrollRef={secondRowScrollRef}
-          aria-label="Second row of prompt buttons"
-        >
-          {renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
-        </ButtonContainerRow>
-      )}
-    </Stack>
-  );
-};

package/src/components/PromptCarousel/components/index.ts

@@ -1,9 +0,0 @@
-import { CarouselContentWithRowScroll } from './CarouselContentWithRowScroll';
-import { CarouselContentWithBlockScroll } from './CarouselContentWithBlockScroll';
-import { ButtonContainerRow } from './ButtonContainerRow';
-
-export const PromptCarouselComponents = {
-  CarouselContentWithRowScroll,
-  CarouselContentWithBlockScroll,
-  ButtonContainerRow,
-};

package/src/components/PromptCarousel/hooks/useButtonScrollPosition.ts

@@ -1,128 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { RepetitionNumberSuffix } from '../types/types';
-
-const getElementId = (element: Element | null): string | null => {
-  if (!element) return null;
-  return element.id?.trim() || null;
-};
-
-export function useButtonScrollPosition(
-  firstRowScrollRef: React.RefObject<HTMLDivElement>,
-  blockScrollRef: React.RefObject<HTMLDivElement>,
-  shouldUseRowScroll: boolean,
-) {
-  const savedButtonIdRef = useRef<string | null>(null);
-  const savedButtonPositionRef = useRef<number | null>(null);
-
-  const captureButtonUnderMouse = useCallback(
-    (mouseX: number, mouseY: number) => {
-      const container = firstRowScrollRef.current;
-      if (!container) return;
-
-      const containerRect = container.getBoundingClientRect();
-
-      const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
-      const targetButtonId = getElementId(elementUnderMouse);
-
-      let closestButton: HTMLElement | null = null;
-
-      if (targetButtonId) {
-        const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`) as HTMLElement;
-        if (
-          buttonById &&
-          (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse as Node))
-        ) {
-          closestButton = buttonById;
-        }
-      }
-
-      if (!closestButton) {
-        const buttons = Array.from(container.querySelectorAll('button')) as HTMLElement[];
-        let closestDistance = Infinity;
-
-        for (const button of buttons) {
-          const buttonRect = button.getBoundingClientRect();
-
-          if (
-            mouseX >= buttonRect.left &&
-            mouseX <= buttonRect.right &&
-            mouseY >= buttonRect.top &&
-            mouseY <= buttonRect.bottom
-          ) {
-            closestButton = button;
-            break;
-          }
-
-          const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-          const buttonCenterY = buttonRect.top + buttonRect.height / 2;
-          const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
-
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            closestButton = button;
-          }
-        }
-      }
-
-      if (closestButton) {
-        const id = getElementId(closestButton);
-        if (id) {
-          savedButtonIdRef.current = id;
-          const buttonRect = closestButton.getBoundingClientRect();
-          savedButtonPositionRef.current = buttonRect.left - containerRect.left;
-        }
-      }
-    },
-    [firstRowScrollRef],
-  );
-
-  useEffect(() => {
-    if (
-      shouldUseRowScroll ||
-      !blockScrollRef.current ||
-      !savedButtonIdRef.current ||
-      savedButtonPositionRef.current === null
-    ) {
-      return;
-    }
-
-    const container = blockScrollRef.current;
-    const targetId = savedButtonIdRef.current.trim();
-    const targetPosition = savedButtonPositionRef.current;
-
-    const getScrollId = (id: string) => {
-      if (id.endsWith(RepetitionNumberSuffix.TWO)) {
-        return id;
-      }
-
-      if (id.endsWith(RepetitionNumberSuffix.THREE)) {
-        return `${id.slice(0, -2)}${RepetitionNumberSuffix.TWO}`;
-      }
-
-      return `${id}${RepetitionNumberSuffix.TWO}`;
-    };
-
-    const applyScroll = () => {
-      const finalId = getScrollId(targetId);
-      const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`) as HTMLElement;
-      const scrollableContent = container.firstElementChild as HTMLElement;
-
-      if (!targetButton || !scrollableContent) return;
-
-      const contentRect = scrollableContent.getBoundingClientRect();
-      const buttonRect = targetButton.getBoundingClientRect();
-      const buttonPositionInContent = buttonRect.left - contentRect.left + container.scrollLeft;
-      const newScrollLeft = buttonPositionInContent - targetPosition;
-
-      container.scrollLeft = Math.max(0, newScrollLeft);
-    };
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(applyScroll);
-      });
-    });
-  }, [shouldUseRowScroll, blockScrollRef]);
-
-  return { captureButtonUnderMouse };
-}

package/src/components/PromptCarousel/hooks/useCarouselAnimation.ts

@@ -1,47 +0,0 @@
-import { useCallback, useState } from 'react';
-import { AnimationSpeed } from '../types/types';
-import { useButtonScrollPosition } from './useButtonScrollPosition';
-import { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-
-interface UseCarouselAnimationProps {
-  firstRowScrollRef: React.RefObject<HTMLDivElement>;
-  blockScrollRef: React.RefObject<HTMLDivElement>;
-  scrollRefs: React.RefObject<HTMLDivElement>[];
-  animationSpeed: `${AnimationSpeed}`;
-  isAnimated: boolean;
-}
-
-export const useCarouselAnimation = ({
-  firstRowScrollRef,
-  blockScrollRef,
-  scrollRefs,
-  animationSpeed,
-  isAnimated,
-}: UseCarouselAnimationProps) => {
-  const [isAnimationStopped, setIsAnimationStopped] = useState(false);
-  const shouldUseRowScroll = isAnimated && !isAnimationStopped;
-
-  const { captureButtonUnderMouse } = useButtonScrollPosition(
-    firstRowScrollRef,
-    blockScrollRef,
-    shouldUseRowScroll,
-  );
-
-  const onStopAll = useCallback(
-    (mouseX?: number, mouseY?: number) => {
-      if (mouseX !== undefined && mouseY !== undefined) {
-        captureButtonUnderMouse(mouseX, mouseY);
-      }
-      setIsAnimationStopped(true);
-    },
-    [captureButtonUnderMouse],
-  );
-
-  useHorizontalScrollAnimation(
-    scrollRefs,
-    onStopAll,
-    shouldUseRowScroll ? animationSpeed : AnimationSpeed.NONE,
-  );
-
-  return { isAnimationStopped, shouldUseRowScroll };
-};

package/src/components/PromptCarousel/hooks/useCarouselRefs.ts

@@ -1,26 +0,0 @@
-import { useRef } from 'react';
-
-interface UseCarouselRefsProps {
-  shouldShowTwoRows: boolean;
-}
-
-export const useCarouselRefs = ({ shouldShowTwoRows }: UseCarouselRefsProps) => {
-  const firstRowScrollRef = useRef<HTMLDivElement>(null);
-  const firstRowStackRef = useRef<HTMLDivElement>(null);
-  const secondRowScrollRef = useRef<HTMLDivElement>(null);
-  const blockScrollRef = useRef<HTMLDivElement>(null);
-  const blockFirstRowStackRef = useRef<HTMLDivElement>(null);
-
-  const scrollRefs = shouldShowTwoRows
-    ? [firstRowScrollRef, secondRowScrollRef]
-    : [firstRowScrollRef];
-
-  return {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  };
-};