@progress/kendo-react-scrollview/ScrollView.mjs

React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as e from "react";
import n from "prop-types";
import { validatePackage as Q, useRtl as U, KEYS as w, classNames as D, IconWrap as P, WatermarkOverlay as X } from "@progress/kendo-react-common";
import { packageMetadata as Z } from "./package-metadata.mjs";
import { chevronRightIcon as S, chevronLeftIcon as K } from "@progress/kendo-svg-icons";
import { useLocalization as ee } from "@progress/kendo-react-intl";
import { next as T, messages as A, previous as O } from "./messages.mjs";
const z = e.forwardRef((d, W) => {
  const B = !Q(Z, { component: "ScrollView" }), {
    className: b,
    style: H,
    children: y,
    pagerOverlay: f = m.pageOverlay,
    pageable: M = m.pageable,
    arrows: $ = m.arrows,
    endless: r = m.endless,
    activeView: j = m.activeView,
    automaticViewChange: C = m.automaticViewChange,
    automaticViewChangeInterval: E = m.automaticViewChangeInterval
  } = d, [a, s] = e.useState(j || 1), c = e.useRef(null), v = e.useRef(null), h = e.useRef(null), l = e.Children.toArray(y), p = U(c, d.dir), i = p === "rtl", N = ee(), I = e.useCallback(() => {
    c.current && c.current.focus();
  }, []), F = e.useCallback(
    () => ({
      element: c.current,
      focus: I
    }),
    [I]
  );
  e.useImperativeHandle(W, F);
  const u = e.useCallback(() => {
    r ? a > 1 ? s(a - 1) : s(l.length) : a > 1 && s(a - 1);
  }, [a, l.length, r]), g = e.useCallback(() => {
    r ? a < l.length ? s(a + 1) : s(1) : a < l.length && s(a + 1);
  }, [a, l.length, r]), V = e.useCallback(
    (t) => {
      var R, x;
      const o = t.target;
      o.classList.contains("k-scrollview-prev") ? (u(), !((r || a > 2) && l.length > 0) && ((R = c.current) == null || R.focus())) : o.classList.contains("k-scrollview-next") && (g(), !((r || a < l.length - 1) && l.length > 0) && ((x = c.current) == null || x.focus()));
    },
    [a, l.length, r]
  );
  e.useEffect(() => {
    const t = l.length;
    v.current && (v.current.style.setProperty("--kendo-scrollview-views", `${t}`), v.current.style.setProperty("--kendo-scrollview-current", `${a}`));
  }, [l, a, p]);
  function L() {
    h.current && clearTimeout(h.current);
  }
  e.useEffect(() => {
    if (C)
      return L(), h.current = setTimeout(
        () => s((t) => t === l.length ? r ? 1 : t : t + 1),
        E
      ), () => {
        L();
      };
  }, [C, E, l.length, a, r]);
  const k = e.useCallback(
    (t) => {
      switch (t.key) {
        case w.left:
          t.preventDefault(), i ? g() : u();
          break;
        case w.right:
          t.preventDefault(), i ? u() : g();
          break;
        case w.space:
          t.preventDefault(), V(t);
          break;
        case w.enter:
          t.preventDefault(), V(t);
          break;
      }
    },
    [i, g, u]
  ), Y = e.useMemo(
    () => D(
      "k-scrollview",
      {
        "k-scrollview-light": f === "light",
        "k-scrollview-dark": f === "dark"
      },
      b
    ),
    [b, f]
  ), _ = e.Children.map(y || null, (t, o) => /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-view", "aria-hidden": a !== o + 1 }, t)), q = e.useCallback(() => {
    let t;
    return t = a > 1, (r || t) && l.length > 0;
  }, [a, l.length, r]), G = e.useCallback(() => {
    let t;
    return t = a < l.length, (r || t) && l.length > 0;
  }, [a, l.length, r]);
  return /* @__PURE__ */ e.createElement(
    "div",
    {
      className: Y,
      style: H,
      ref: c,
      tabIndex: 0,
      dir: p,
      onKeyDown: k
    },
    /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: v }, _),
    /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, $ && /* @__PURE__ */ e.createElement(e.Fragment, null, q() && /* @__PURE__ */ e.createElement(
      "span",
      {
        className: "k-scrollview-prev",
        "aria-label": N.toLanguageString(T, A[T]),
        role: "button",
        tabIndex: 0,
        onClick: u,
        onKeyDown: k
      },
      /* @__PURE__ */ e.createElement(
        P,
        {
          name: i ? "chevron-right" : "chevron-left",
          icon: i ? S : K,
          size: "xxxlarge"
        }
      )
    ), G() && /* @__PURE__ */ e.createElement(
      "span",
      {
        className: "k-scrollview-next",
        "aria-label": N.toLanguageString(O, A[O]),
        role: "button",
        tabIndex: 0,
        onClick: g,
        onKeyDown: k
      },
      /* @__PURE__ */ e.createElement(
        P,
        {
          name: i ? "chevron-left" : "chevron-right",
          icon: i ? K : S,
          size: "xxxlarge"
        }
      )
    )), M && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, l.map((t, o) => /* @__PURE__ */ e.createElement(
      "span",
      {
        className: D("k-link", {
          "k-primary": a === o + 1
        }),
        key: o + 1,
        onClick: () => s(o + 1)
      }
    ))))),
    /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "k-sr-only" }),
    B && /* @__PURE__ */ e.createElement(X, null)
  );
});
z.propTypes = {
  activeView: n.number,
  arrows: n.bool,
  automaticViewChange: n.bool,
  automaticViewChangeInterval: n.number,
  children: n.any,
  className: n.string,
  dir: n.string,
  endless: n.bool,
  pageable: n.bool,
  pageOverlay: n.string,
  style: n.object
};
const m = {
  activeView: 1,
  arrows: !0,
  automaticViewChange: !0,
  automaticViewChangeInterval: 5e3,
  endless: !1,
  pageable: !0,
  pageOverlay: "none"
};
z.displayName = "KendoScrollView";
export {
  z as ScrollView
};