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