@progress/kendo-react-listview/ListView.mjs

React ListView enables you to display a custom layout of data items. KendoReact ListView 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 s from "react";
import { validatePackage as N, dispatchEvent as x, Navigation as D, classNames as R, WatermarkOverlay as S } from "@progress/kendo-react-common";
import { packageMetadata as A } from "./package-metadata.mjs";
const o = "k-focus", H = s.forwardRef((r, E) => {
  const L = !N(A, { component: "ListView" }), { data: b = [], item: i, footer: c, header: m, className: g, style: y, onScroll: u, navigatable: v } = r, d = s.useRef(null), f = s.useRef(null), w = s.useCallback(
    () => ({
      onScroll: u,
      props: r,
      context: {},
      state: {},
      refs: {}
    }),
    []
  );
  s.useImperativeHandle(f, w), s.useImperativeHandle(E, () => f.current);
  const C = s.useCallback(
    (e) => x(u, e, w(), void 0),
    []
  ), p = (e, t, a) => {
    a.preventDefault(), t.focusNext(e), t.next(e).classList.add(o), t.previous(e).classList.remove(o);
  }, k = (e, t, a) => {
    a.preventDefault(), t.focusPrevious(e), t.next(e).classList.remove(o), t.previous(e).classList.add(o);
  }, n = s.useMemo(
    () => new D({
      root: d,
      selectors: [".k-listview-item"],
      rovingTabIndex: !0,
      keyboardEvents: {
        keydown: {
          ArrowDown: p,
          ArrowRight: p,
          ArrowUp: k,
          ArrowLeft: k,
          Home: (e, t, a) => {
            a.preventDefault();
            const l = t.first;
            l && t.focusElement(l, e);
          },
          End: (e, t, a) => {
            a.preventDefault();
            const l = t.last;
            l && t.focusElement(l, e);
          },
          Tab: (e, t, a) => {
            t.removeFocusClass(e);
          }
        }
      },
      tabIndex: 0,
      focusClass: o
    }),
    []
  ), h = s.useCallback(n.triggerKeyboardEvent.bind(n), []), I = s.useCallback((e) => {
    e.nativeEvent.target.classList.add(o), n.elements.forEach((t) => {
      t !== e.nativeEvent.target && t.classList.remove(o);
    });
  }, []);
  return s.useEffect(() => {
    if (v)
      return n.initializeRovingTab(), () => n.removeFocusListener();
  }, []), /* @__PURE__ */ s.createElement(
    "div",
    {
      className: R("k-listview", g),
      style: y,
      onKeyDown: (e) => v && h(e),
      onClick: I
    },
    m ? /* @__PURE__ */ s.createElement(m, null) : null,
    /* @__PURE__ */ s.createElement("div", { role: "list", className: "k-listview-content", onScroll: C, ref: d }, i && b.map((e, t) => /* @__PURE__ */ s.createElement(i, { dataItem: e, index: t, key: t }))),
    c ? /* @__PURE__ */ s.createElement(c, null) : null,
    L && /* @__PURE__ */ s.createElement(S, null)
  );
});
H.displayName = "KendoReactListView";
export {
  H as ListView
};