@progress/kendo-react-data-tools/columnmenu/ColumnMenu.mjs

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
import * as e from "react";
import { Popup as fe } from "@progress/kendo-react-popup";
import { useLocalization as de } from "@progress/kendo-react-intl";
import { isCompositeFilterDescriptor as Ce } from "@progress/kendo-data-query";
import { ColumnMenuItem as R } from "./ColumnMenuItem.mjs";
import { ColumnMenuTextFilter as K, ColumnMenuNumericFilter as Q, ColumnMenuDateFilter as U, ColumnMenuBooleanFilter as pe } from "./ColumnMenuFilters.mjs";
import { ColumnMenuFilterLogic as B } from "./ColumnMenuFilterLogic.mjs";
import { ColumnMenuFilterForm as ge } from "./ColumnMenuFilterForm.mjs";
import { columnMenuSortAscending as V, messages as A, columnMenuSortDescending as X, columnMenuFilterTitle as Y } from "../messages/index.mjs";
import { validatePackage as ke, IconWrap as Fe, WatermarkOverlay as ve } from "@progress/kendo-react-common";
import { packageMetadata as he } from "../package-metadata.mjs";
import { sortAscSmallIcon as be, sortDescSmallIcon as Ee, filterIcon as Z } from "@progress/kendo-svg-icons";
const b = (o) => {
  const m = !ke(he, { component: "ColumnMenu" }), f = e.useRef([]), {
    field: t,
    filter: n,
    sort: u = f.current,
    onSortChange: s,
    onFilterChange: k,
    initialFilter: p,
    sortAsc: y = !1,
    sortDesc: L = !1,
    filterContent: T = [],
    expandFilters: E = !1
  } = o, [d, q] = e.useState(!1), [M, N] = e.useState(E), [r, v] = e.useState(t && p ? p(t) : null), S = e.useRef(null), w = e.useRef(null), x = e.useRef(null), D = e.useRef(!1), g = e.useCallback(
    () => (n || []).find(
      (l) => l.filters.every((i) => !Ce(i) && i.field === t)
    ),
    [n, t]
  ), C = e.useCallback(() => {
    q(!1);
  }, []), $ = e.useCallback(() => {
    if (D.current) {
      D.current = !1;
      return;
    }
    clearTimeout(x.current), x.current = window.setTimeout(() => {
      C();
    });
  }, [C]), ee = e.useCallback(() => clearTimeout(x.current), []), te = e.useCallback(
    (l) => {
      D.current = d && l.currentTarget === S.current;
    },
    [d]
  ), ne = e.useCallback(() => {
    q(!d), t && p && (N(d ? !1 : E), v(d ? r : g() || p(t)));
  }, [g, t, d, r, p, E]);
  e.useEffect(() => {
    d && w.current && w.current.focus();
  }, [d]);
  const le = e.useCallback(() => N(!M), [M]), h = e.useCallback(
    (l, i) => {
      const c = [...u], a = c.findIndex((me) => me.field === t), F = { field: t, dir: i };
      a >= 0 ? c[a].dir !== F.dir ? c.splice(a, 1, F) : c.splice(a, 1) : c.push(F), C(), s && s.call(void 0, l, c, t);
    },
    [u, t, s, C]
  ), O = e.useCallback(
    (l, i, c) => {
      const a = { ...r, filters: [...r.filters] }, F = a.filters.indexOf(c);
      a.filters.splice(F, 1, i), v(a);
    },
    [r]
  ), oe = e.useCallback(
    (l) => {
      l.preventDefault();
      const i = (n || []).slice(), c = g(), a = c ? i.indexOf(c) : -1;
      a >= 0 ? i.splice(a, 1, r) : i.push(r), C(), k && k.call(void 0, l, i, t);
    },
    [n, r, t, k, C, g]
  ), re = e.useCallback(
    (l) => {
      const i = (n || []).slice(), c = g(), a = c ? i.indexOf(c) : -1;
      a >= 0 && i.splice(a, 1), p && v(p(t)), C(), k && k.call(void 0, l, i, t);
    },
    [n, t, k, p, C, g]
  ), ie = e.useCallback(
    (l) => h(l, "asc"),
    [h]
  ), se = e.useCallback(
    (l) => h(l, "desc"),
    [h]
  ), ce = e.useCallback(
    (l) => r && v({ ...r, logic: l.value.logic }),
    [r]
  ), W = u.find((l) => l.field === t) || { dir: "" }, [z, P, _] = T, I = de(), ae = y || L ? /* @__PURE__ */ e.createElement("div", { className: "k-columnmenu-item-wrapper", key: "sorting" }, y && /* @__PURE__ */ e.createElement(
    R,
    {
      title: I.toLanguageString(
        V,
        A[V]
      ),
      iconClass: "k-i-sort-asc-small",
      svgIcon: be,
      selected: W.dir === "asc",
      onClick: ie
    }
  ), L && /* @__PURE__ */ e.createElement(
    R,
    {
      title: I.toLanguageString(
        X,
        A[X]
      ),
      iconClass: "k-i-sort-desc-small",
      svgIcon: Ee,
      selected: W.dir === "desc",
      onClick: se
    }
  )) : null, ue = r && T.length > 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" }, /* @__PURE__ */ e.createElement(
    R,
    {
      iconClass: "k-i-filter",
      svgIcon: Z,
      title: I.toLanguageString(Y, A[Y]),
      onClick: le
    }
  ), /* @__PURE__ */ e.createElement(ge, { show: M, onSubmit: oe, onReset: re }, z && /* @__PURE__ */ e.createElement(
    z,
    {
      filter: r.filters[0],
      onFilterChange: O
    }
  ), P && /* @__PURE__ */ e.createElement(P, { value: r.logic, onChange: ce }), _ && /* @__PURE__ */ e.createElement(
    _,
    {
      filter: r.filters[1],
      onFilterChange: O
    }
  ))) : null, j = [ae, ue], G = /* @__PURE__ */ e.createElement(
    "span",
    {
      ref: S,
      onClick: ne,
      onMouseDown: te,
      className: "k-grid-header-menu k-grid-column-menu" + (g() ? " k-active" : ""),
      key: "button"
    },
    /* @__PURE__ */ e.createElement(Fe, { name: "filter", icon: Z })
  ), H = /* @__PURE__ */ e.createElement(fe, { anchor: S.current, show: d, key: "popup", popupClass: "k-column-menu k-column-menu-popup" }, /* @__PURE__ */ e.createElement("div", { ref: w, tabIndex: 0, onBlur: $, onFocus: ee, style: { outline: "none" } }, o.itemsRender ? o.itemsRender.call(void 0, j, { closeMenu: C, field: t }) : j)), J = m ? [G, H, /* @__PURE__ */ e.createElement(ve, null)] : [G, H];
  return o.render ? o.render.call(void 0, J) : J;
}, qe = (o) => {
  const { field: m, ...f } = o, t = e.useCallback(
    (s) => ({
      logic: "and",
      filters: [
        { operator: "contains", field: s, value: "" },
        { operator: "contains", field: s, value: "" }
      ]
    }),
    []
  ), n = !!o.field, u = n ? [K, B, K] : [];
  return /* @__PURE__ */ e.createElement(
    b,
    {
      sortAsc: n,
      sortDesc: n,
      filterContent: u,
      initialFilter: n ? t : void 0,
      field: m,
      ...f
    }
  );
}, Ne = (o) => {
  const { field: m, ...f } = o, t = e.useCallback(
    (s) => ({
      logic: "or",
      filters: [
        { operator: "eq", field: s, value: null },
        { operator: "eq", field: s, value: null }
      ]
    }),
    []
  ), n = !!o.field, u = n ? [Q, B, Q] : [];
  return /* @__PURE__ */ e.createElement(
    b,
    {
      sortAsc: n,
      sortDesc: n,
      filterContent: u,
      initialFilter: n ? t : void 0,
      field: m,
      ...f
    }
  );
}, Oe = (o) => {
  const { field: m, ...f } = o, t = e.useCallback(
    (s) => ({
      logic: "or",
      filters: [
        { operator: "eq", field: s, value: null },
        { operator: "eq", field: s, value: null }
      ]
    }),
    []
  ), n = !!o.field, u = n ? [U, B, U] : [];
  return /* @__PURE__ */ e.createElement(
    b,
    {
      sortAsc: n,
      sortDesc: n,
      filterContent: u,
      initialFilter: n ? t : void 0,
      field: m,
      ...f
    }
  );
}, We = (o) => {
  const { field: m, ...f } = o, t = e.useCallback(
    (s) => ({
      logic: "and",
      filters: [{ operator: "eq", field: s, value: !1 }]
    }),
    []
  ), n = !!o.field, u = n ? [pe] : [];
  return /* @__PURE__ */ e.createElement(
    b,
    {
      sortAsc: n,
      sortDesc: n,
      filterContent: u,
      initialFilter: n ? t : void 0,
      field: m,
      ...f
    }
  );
};
export {
  We as ColumnMenuBooleanColumn,
  Oe as ColumnMenuDateColumn,
  Ne as ColumnMenuNumericColumn,
  qe as ColumnMenuTextColumn
};