@progress/kendo-react-listbox/ListBoxToolbar.mjs

React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox 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 n from "react";
import d from "prop-types";
import { Navigation as K, classNames as q, dispatchEvent as O } from "@progress/kendo-react-common";
import { Button as M } from "@progress/kendo-react-buttons";
import { useLocalization as _ } from "@progress/kendo-react-intl";
import { caretAltUpIcon as $, caretAltDownIcon as j, caretAltRightIcon as T, caretAltLeftIcon as A, caretDoubleAltRightIcon as y, caretDoubleAltLeftIcon as D, xIcon as G } from "@progress/kendo-svg-icons";
import { messages as J } from "./messages/index.mjs";
const N = [
  { name: "moveUp", iconName: "caret-alt-up", svgIcon: $ },
  { name: "moveDown", iconName: "caret-alt-down", svgIcon: j },
  { name: "transferTo", iconName: "caret-alt-right", svgIcon: T },
  { name: "transferFrom", iconName: "caret-alt-left", svgIcon: A },
  { name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon: y },
  { name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon: D },
  { name: "remove", iconName: "x", svgIcon: G }
], F = n.forwardRef((g, L) => {
  const {
    tools: b,
    dir: R,
    onToolClick: v,
    size: C = u.size,
    data: l = u.data,
    dataConnected: a = u.dataConnected,
    selectedField: E = u.selectedField
  } = g, z = _(), h = n.useRef(null), p = n.useRef(null), I = n.useCallback(
    () => ({
      onToolClick: v,
      props: g,
      context: {},
      state: {},
      refs: {}
    }),
    []
  );
  n.useImperativeHandle(p, I), n.useImperativeHandle(
    L,
    () => p.current
  );
  const k = (t, e, o) => {
    o.preventDefault(), e.focusNext(t);
  }, w = (t, e, o) => {
    o.preventDefault(), e.focusPrevious(t);
  }, m = n.useMemo(
    () => new K({
      root: h,
      selectors: [".k-button:not([disabled])"],
      tabIndex: 0,
      keyboardEvents: {
        keydown: {
          ArrowDown: k,
          ArrowRight: k,
          ArrowUp: w,
          ArrowLeft: w,
          Enter: (t, e, o) => {
            t.click(), e.focusElement(e.current, t);
          }
        }
      }
    }),
    []
  ), S = n.useCallback(m.triggerKeyboardEvent.bind(m), []);
  n.useEffect(() => (m.initializeRovingTab(), () => m.removeFocusListener()), []);
  const B = (t) => {
    switch (t.name) {
      case "caret-alt-right":
        return A;
      case "caret-alt-left":
        return T;
      case "caret-double-alt-right":
        return D;
      case "caret-double-alt-left":
        return y;
    }
    return t;
  }, P = (t) => {
    switch (t) {
      case "caret-alt-right":
        return "caret-alt-left";
      case "caret-alt-left":
        return "caret-alt-right";
      case "caret-double-alt-right":
        return "caret-double-alt-left";
      case "caret-double-alt-left":
        return "caret-double-alt-right";
    }
    return t;
  }, U = (t, e) => {
    O(v, t, I(), { toolName: e });
  }, H = (t) => {
    let e = !0;
    const o = E || "selected", r = l.length, f = a.length, s = l.findIndex((c) => c[o] === !0) >= 0, i = a.findIndex((c) => c[o] === !0) >= 0;
    switch (t) {
      case "moveUp":
        s ? e = l.length > 0 ? l[0].selected : !0 : i ? e = a.length > 0 ? a[0].selected : !0 : e = !0;
        break;
      case "moveDown":
        s ? e = l[r - 1] ? l[r - 1].selected : !0 : i ? e = a.length > 0 ? a[f - 1].selected : !0 : e = !0;
        break;
      case "transferTo":
        e = !(a && s);
        break;
      case "transferFrom":
        a ? e = !(a && i) : e = !0;
        break;
      case "transferAllTo":
        e = !(a && l.length > 0);
        break;
      case "transferAllFrom":
        e = !(a && a.length > 0);
        break;
      case "remove":
        e = !(s || i);
        break;
    }
    return e;
  }, x = R === "rtl";
  return /* @__PURE__ */ n.createElement("div", { className: q("k-listbox-actions"), ref: h, onKeyDown: S }, b && b.map((t, e) => {
    const o = N.findIndex((c) => c.name === t), r = N[o], f = H(r.name), s = `listbox.${r.name}`, i = z.toLanguageString(s, J[s]);
    return /* @__PURE__ */ n.createElement(
      M,
      {
        size: C,
        key: e,
        disabled: f,
        "data-command": r.name,
        title: i,
        "aria-label": i,
        icon: x ? P(r.iconName) : r.iconName,
        svgIcon: x ? B(r.svgIcon) : r.svgIcon,
        onClick: (c) => {
          c.preventDefault(), U(c, r.name);
        }
      }
    );
  }));
}), u = {
  data: [],
  dataConnected: [],
  selectedField: "selected",
  size: "medium"
};
F.propTypes = {
  data: d.array.isRequired,
  dataConnected: d.array.isRequired,
  tools: d.array,
  selectedField: d.string,
  dir: d.string,
  size: d.oneOf([null, "small", "medium", "large"])
};
F.displayName = "ListBoxToolbarInner";
export {
  F as ListBoxToolbar
};