Menu Transitions Rtl

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

function LeftArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useLeftArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollPrev()}>
      Left
    </button>
  );
}

function RightArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useRightArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollNext()}>
      Right
    </button>
  );
}

// itemId must stay on the component's props (ScrollMenu reads it);
// do not spread it onto the DOM node.
function Card({ title }: { itemId: string; title: string }) {
  return <div style={{ width: '160px', margin: '0 10px' }}>{title}</div>;
}

const items = Array.from({ length: 10 }, (_, i) => ({ id: `item-${i}` }));

export function AnimatedMenu() {
  return (
    <ScrollMenu
      LeftArrow={LeftArrow}
      RightArrow={RightArrow}
      noPolyfill={false} // REQUIRED — transition props are no-ops without it
      transitionDuration={1200} // ms, default 500
      transitionBehavior="smooth"
    >
      {items.map(({ id }) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}

// What scroll-into-view-if-needed hands to a custom behavior: one action per
// scrollable ancestor that must move — here always just the scroll container,
// because the menu passes it as `boundary`.
type ScrollAction = { el: Element; top: number; left: number };

const easeInOutCubic = (t: number) =>
  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;

// A second arrow click can land mid-animation; remembering the pending frame
// per element lets the new animation cancel the old one instead of both
// fighting over scrollLeft.
const pendingFrames = new WeakMap<Element, number>();

function animateScroll(el: Element, target: number, duration: number) {
  const prevFrame = pendingFrames.get(el);
  if (prevFrame !== undefined) cancelAnimationFrame(prevFrame);

  const from = el.scrollLeft;
  const startTime = performance.now();

  const step = (now: number) => {
    const progress = Math.min((now - startTime) / duration, 1);
    el.scrollLeft = from + (target - from) * easeInOutCubic(progress);
    if (progress < 1) {
      pendingFrames.set(el, requestAnimationFrame(step));
    } else {
      pendingFrames.delete(el);
    }
  };

  pendingFrames.set(el, requestAnimationFrame(step));
}

const transition = (instructions: ScrollAction[]) =>
  instructions.forEach(({ el, left }) => animateScroll(el, left, 1200));

export function CustomEasingMenu() {
  return (
    <ScrollMenu
      LeftArrow={LeftArrow}
      RightArrow={RightArrow}
      noPolyfill={false} // custom easing only runs through the polyfill
      // The typings describe the options-object form, but the menu passes this
      // value straight to scroll-into-view-if-needed as its behavior callback.
      transitionBehavior={transition as unknown as ScrollBehavior}
    >
      {items.map(({ id }) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}

function CenteringCard({ title, itemId }: { itemId: string; title: string }) {
  const api = React.useContext<publicApiType>(VisibilityContext);

  const center = () =>
    // behavior inside the options object is required by the type but the
    // positional 'smooth' always wins — only duration/boundary take effect.
    api.scrollToItem(api.getItemById(itemId), 'smooth', 'center', 'nearest', {
      behavior: 'smooth',
      duration: 800, // overrides transitionDuration for this call only
    });

  return (
    <div onClick={center} style={{ width: '160px', margin: '0 10px' }}>
      {title}
    </div>
  );
}

function SlowNextArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useRightArrowVisible();
  return (
    <button
      disabled={disabled}
      onClick={() =>
        api.scrollNext('smooth', 'start', 'nearest', { duration: 800 })
      }
    >
      Right
    </button>
  );
}

export function RTLMenu() {
  return (
    // Visual left = logical end in RTL, so the slots swap components.
    // Each arrow keeps its own hook/handler pair, so disabling stays correct.
    <ScrollMenu RTL LeftArrow={RightArrow} RightArrow={LeftArrow}>
      {items.map(({ id }) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}

<ScrollMenu transitionDuration={1200}>
  {items.map(({ id }) => (
    <Card itemId={id} key={id} title={id} />
  ))}
</ScrollMenu>

<ScrollMenu noPolyfill={false} transitionDuration={1200}>
  {items.map(({ id }) => (
    <Card itemId={id} key={id} title={id} />
  ))}
</ScrollMenu>