copper-ui/dist/index.esm.js

Modern React UI components library with TypeScript support, built on top of Ant Design

import { createParser as J, parseAsString as w, parseAsArrayOf as R, parseAsBoolean as re, useQueryStates as $, parseAsInteger as I } from "nuqs";
import * as h from "react";
import { useState as N, useCallback as ne, useMemo as C, createContext as le, useContext as ie, memo as M, useRef as ae, useEffect as oe } from "react";
import { jsxs as b, jsx as i, Fragment as F } from "react/jsx-runtime";
import { Tag as se, Button as U, Radio as ce, DatePicker as K, Popover as de, Input as P, InputNumber as _, Select as W, Tooltip as pe, Pagination as ue, ConfigProvider as fe } from "antd";
import { CloseOutlined as me, CloseCircleFilled as ge, FilterFilled as be, CaretUpOutlined as ye, CaretDownOutlined as he } from "@ant-design/icons";
import { clsx as xe } from "clsx";
import { parse as we, format as Ne } from "date-fns";
import j from "dayjs";
import { flexRender as z, useReactTable as Ce, getCoreRowModel as Te } from "@tanstack/react-table";
const ve = J({
  parse: (t) => {
    try {
      const e = JSON.parse(t);
      return typeof e == "object" && e !== null && "value" in e && "label" in e ? e : null;
    } catch {
      return null;
    }
  },
  serialize: (t) => typeof t == "object" && t !== null && "value" in t && "label" in t ? JSON.stringify(t) : JSON.stringify(null)
}), Fe = J({
  parse: (t) => {
    try {
      const e = JSON.parse(t);
      return Array.isArray(e) && e.every(
        (n) => typeof n == "object" && n !== null && "value" in n && "label" in n
      ) ? e : null;
    } catch {
      return null;
    }
  },
  serialize: (t) => Array.isArray(t) && t.every(
    (r) => typeof r == "object" && r !== null && "value" in r && "label" in r
  ) ? JSON.stringify(t) : JSON.stringify(null)
}), Oe = (t, e) => {
  const r = {}, n = (a, s, d, o) => {
    switch (a) {
      case "boolean":
        r[s] = re;
        break;
      case "multiselect":
        r[s] = R(w);
        break;
      case "date-range":
        r[s] = R(w);
        break;
      case "date":
        r[s] = w;
        break;
      case "select":
        r[s] = w;
        break;
      case "radio":
        r[s] = w.withDefault(
          o ?? null
        );
        break;
      case "custom":
        r[s] = d ? Fe : ve;
        break;
      default:
        r[s] = w;
    }
  };
  for (const a of t)
    if (a.filter) {
      const s = a.filter.id ?? a.definition.id, d = a.filter.type === "custom" && "isMultiple" in a.filter && a.filter.isMultiple;
      n(a.filter.type, s, d);
    }
  for (const a of e)
    n(a.type, a.id, void 0, a.default);
  return r;
}, st = ({
  columns: t,
  quickFilters: e
}) => {
  const [r, n] = N({
    field: "",
    order: "asc"
  }), [a, s] = $({
    pageIndex: I.withDefault(0),
    pageSize: I.withDefault(10)
  }), [d, o] = N(0), c = ne(
    (f) => {
      f && d !== f && o(f);
    },
    [d]
  ), l = C(
    () => Oe(t, e ?? []),
    [t, e]
  ), [u, p] = $(l);
  return C(
    () => ({
      sort: r,
      setSort: n,
      pagination: a,
      setPagination: s,
      totalPages: d,
      filters: u,
      filterParsers: l,
      setFilters: p,
      quickFilters: e,
      setTotalPages: c
    }),
    [
      r,
      n,
      a,
      s,
      d,
      u,
      l,
      p,
      e,
      c
    ]
  );
};
function T(t) {
  "@babel/helpers - typeof";
  return T = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
    return typeof e;
  } : function(e) {
    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
  }, T(t);
}
function $e(t, e) {
  if (T(t) != "object" || !t) return t;
  var r = t[Symbol.toPrimitive];
  if (r !== void 0) {
    var n = r.call(t, e);
    if (T(n) != "object") return n;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (e === "string" ? String : Number)(t);
}
function De(t) {
  var e = $e(t, "string");
  return T(e) == "symbol" ? e : e + "";
}
function je(t, e, r) {
  return (e = De(e)) in t ? Object.defineProperty(t, e, {
    value: r,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : t[e] = r, t;
}
function E(t, e) {
  var r = Object.keys(t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(t);
    e && (n = n.filter(function(a) {
      return Object.getOwnPropertyDescriptor(t, a).enumerable;
    })), r.push.apply(r, n);
  }
  return r;
}
function V(t) {
  for (var e = 1; e < arguments.length; e++) {
    var r = arguments[e] != null ? arguments[e] : {};
    e % 2 ? E(Object(r), !0).forEach(function(n) {
      je(t, n, r[n]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : E(Object(r)).forEach(function(n) {
      Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
    });
  }
  return t;
}
var Ae = {
  yearFormat: "YYYY",
  dayFormat: "D",
  cellMeridiemFormat: "A",
  monthBeforeYear: !0
}, Se = V(V({}, Ae), {}, {
  locale: "ru_RU",
  today: "Сегодня",
  now: "Сейчас",
  backToToday: "Текущая дата",
  ok: "ОК",
  clear: "Очистить",
  week: "Неделя",
  month: "Месяц",
  year: "Год",
  timeSelect: "Выбрать время",
  dateSelect: "Выбрать дату",
  monthSelect: "Выбрать месяц",
  yearSelect: "Выбрать год",
  decadeSelect: "Выбрать десятилетие",
  dateFormat: "D-M-YYYY",
  dateTimeFormat: "D-M-YYYY HH:mm:ss",
  previousMonth: "Предыдущий месяц (PageUp)",
  nextMonth: "Следующий месяц (PageDown)",
  previousYear: "Предыдущий год (Control + left)",
  nextYear: "Следующий год (Control + right)",
  previousDecade: "Предыдущее десятилетие",
  nextDecade: "Следущее десятилетие",
  previousCentury: "Предыдущий век",
  nextCentury: "Следующий век"
});
const Q = {
  placeholder: "Выберите время",
  rangePlaceholder: ["Время начала", "Время окончания"]
}, D = {
  lang: Object.assign({
    placeholder: "Выберите дату",
    yearPlaceholder: "Выберите год",
    quarterPlaceholder: "Выберите квартал",
    monthPlaceholder: "Выберите месяц",
    weekPlaceholder: "Выберите неделю",
    rangePlaceholder: ["Начальная дата", "Конечная дата"],
    rangeYearPlaceholder: ["Начальный год", "Год окончания"],
    rangeMonthPlaceholder: ["Начальный месяц", "Конечный месяц"],
    rangeWeekPlaceholder: ["Начальная неделя", "Конечная неделя"],
    shortWeekDays: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
    shortMonths: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"]
  }, Se),
  timePickerLocale: Object.assign({}, Q)
};
var ke = {
  // Options
  items_per_page: "/ стр.",
  jump_to: "Перейти",
  jump_to_confirm: "подтвердить",
  page: "Страница",
  // Pagination
  prev_page: "Назад",
  next_page: "Вперед",
  prev_5: "Предыдущие 5",
  next_5: "Следующие 5",
  prev_3: "Предыдущие 3",
  next_3: "Следующие 3",
  page_size: "размер страницы"
};
const y = "${label} не является типом ${type}", L = {
  locale: "ru",
  Pagination: ke,
  DatePicker: D,
  TimePicker: Q,
  Calendar: D,
  global: {
    placeholder: "Пожалуйста выберите",
    close: "Закрыть"
  },
  Table: {
    filterTitle: "Фильтр",
    filterConfirm: "OK",
    filterReset: "Сбросить",
    filterEmptyText: "Без фильтров",
    filterCheckAll: "Выбрать все элементы",
    filterSearchPlaceholder: "Поиск в фильтрах",
    emptyText: "Нет данных",
    selectAll: "Выбрать всё",
    selectInvert: "Инвертировать выбор",
    selectNone: "Очистить все данные",
    selectionAll: "Выбрать все данные",
    sortTitle: "Сортировка",
    expand: "Развернуть строку",
    collapse: "Свернуть строку",
    triggerDesc: "Нажмите для сортировки по убыванию",
    triggerAsc: "Нажмите для сортировки по возрастанию",
    cancelSort: "Нажмите, чтобы отменить сортировку"
  },
  Tour: {
    Next: "Далее",
    Previous: "Назад",
    Finish: "Завершить"
  },
  Modal: {
    okText: "OK",
    cancelText: "Отмена",
    justOkText: "OK"
  },
  Popconfirm: {
    okText: "OK",
    cancelText: "Отмена"
  },
  Transfer: {
    titles: ["", ""],
    searchPlaceholder: "Поиск",
    itemUnit: "элем.",
    itemsUnit: "элем.",
    remove: "Удалить",
    selectAll: "Выбрать все данные",
    deselectAll: "Очистить все данные",
    selectCurrent: "Выбрать текущую страницу",
    selectInvert: "Инвертировать выбор",
    removeAll: "Удалить все данные",
    removeCurrent: "Удалить текущую страницу"
  },
  Upload: {
    uploading: "Загрузка...",
    removeFile: "Удалить файл",
    uploadError: "При загрузке произошла ошибка",
    previewFile: "Предпросмотр файла",
    downloadFile: "Загрузить файл"
  },
  Empty: {
    description: "Нет данных"
  },
  Icon: {
    icon: "иконка"
  },
  Text: {
    edit: "Редактировать",
    copy: "Копировать",
    copied: "Скопировано",
    expand: "Раскрыть",
    collapse: "Свернуть"
  },
  Form: {
    optional: "(необязательно)",
    defaultValidateMessages: {
      default: "Ошибка проверки поля ${label}",
      required: "Пожалуйста, введите ${label}",
      enum: "${label} должен быть одним из [${enum}]",
      whitespace: "${label} не может быть пустым",
      date: {
        format: "${label} не правильный формат даты",
        parse: "${label} не может быть преобразовано в дату",
        invalid: "${label} не является корректной датой"
      },
      types: {
        string: y,
        method: y,
        array: y,
        object: y,
        number: y,
        date: y,
        boolean: y,
        integer: y,
        float: y,
        regexp: y,
        email: y,
        url: y,
        hex: y
      },
      string: {
        len: "${label} должна быть ${len} символов",
        min: "${label} должна быть больше или равна ${min} символов",
        max: "${label} должна быть меньше или равна ${max} символов",
        range: "Длина ${label} должна быть между ${min}-${max} символами"
      },
      number: {
        len: "${label} должна быть равна ${len}",
        min: "${label} должна быть больше или равна ${min}",
        max: "${label} должна быть меньше или равна ${max}",
        range: "${label} должна быть между ${min}-${max}"
      },
      array: {
        len: "Количество элементов ${label} должно быть равно ${len}",
        min: "Количество элементов ${label} должно быть больше или равно ${min}",
        max: "Количество элементов ${label} должно быть меньше или равно ${max}",
        range: "Количество элементов ${label} должно быть между ${min} и ${max}"
      },
      pattern: {
        mismatch: "${label} не соответствует шаблону ${pattern}"
      }
    }
  },
  Image: {
    preview: "Предпросмотр"
  },
  QRCode: {
    expired: "QR-код устарел",
    refresh: "Обновить"
  },
  ColorPicker: {
    presetEmpty: "Пустой",
    transparent: "Прозрачный",
    singleColor: "Один цвет",
    gradientColor: "Градиент"
  }
}, G = le(
  void 0
), Me = () => {
  const t = ie(G);
  if (!t)
    throw new Error("useTableContext must be used within a TableProvider");
  return t;
}, v = ({ when: t, children: e, elseComponent: r }) => t ? e : r || null, Ye = (t) => Object.entries(t).filter(
  ([, e]) => e != null && e !== ""
), Re = (t, e = [], r = []) => {
  const n = r.find((s) => s.id === t);
  if (n)
    return n.label;
  const a = e.find(
    (s) => {
      var d;
      return (((d = s.filter) == null ? void 0 : d.id) ?? s.definition.id) === t;
    }
  );
  return a && typeof a.definition.header == "string" ? a.definition.header : t;
}, B = (t, e) => {
  if (e && e.definition.mapping) {
    const r = e.definition.mapping.find((n) => n.value === t);
    if (r)
      return String(r.label);
  }
  return isNaN(new Date(t).getTime()) ? String(t) : X(t);
}, X = (t) => {
  try {
    return new Date(t).toLocaleDateString("ru-RU");
  } catch {
    return t;
  }
}, Ie = (t, e, r = [], n = []) => {
  if (typeof e == "object" && e !== null && "label" in e)
    return String(e.label);
  if (Array.isArray(e) && e.length > 0 && typeof e[0] == "object" && e[0] !== null && "label" in e[0] && "value" in e[0])
    return e.map((o) => o.label).join(", ");
  const a = n.find((o) => o.id === t);
  if (a && a.options)
    if (Array.isArray(e)) {
      const o = a.options.find(
        (c) => typeof c.value == "string" && c.value === JSON.stringify(e)
      );
      if (o)
        return String(o.label);
    } else {
      const o = a.options.find(
        (c) => c.value === e
      );
      if (o)
        return String(o.label);
    }
  const s = r.find(
    (o) => {
      var c;
      return (((c = o.filter) == null ? void 0 : c.id) ?? o.definition.id) === t;
    }
  );
  if (s && s.filter && (s.filter.type === "select" || s.filter.type === "multiselect") && "options" in s.filter && Array.isArray(
    s.filter.options
  )) {
    const o = s.filter.options;
    if (Array.isArray(e))
      if (s.filter.type === "multiselect") {
        const c = e.map(
          (l) => {
            var u;
            return (u = o.find((p) => p.value === l)) == null ? void 0 : u.label;
          }
        ).filter(Boolean);
        if (c.length)
          return c.join(", ");
      } else {
        const c = o.find(
          (l) => typeof l.value == "string" && l.value === JSON.stringify(e)
        );
        if (c)
          return String(c.label);
      }
    else {
      const c = o.find(
        (l) => l.value === e
      );
      if (c)
        return String(c.label);
    }
  }
  const d = s == null ? void 0 : s.definition;
  if (d && d.mapping) {
    const o = d.mapping.find((c) => c.value === e);
    if (o)
      return String(o.label);
  }
  return Array.isArray(e) && e.some((o) => !isNaN(new Date(o).getTime())) && e.length === 2 ? e.map((o) => B(o)).join(" - ") : Array.isArray(e) ? e.map(
    (c) => B(c, s)
  ).join(", ") : typeof e == "string" && e.includes("T") && !(e.includes("[") || e.includes("]") || e.includes("{") || e.includes("}")) ? X(e) : typeof e == "boolean" ? e ? "Да" : "Нет" : String(e);
}, Pe = ({
  filterParsers: t,
  columns: e = [],
  quickFilters: r = []
}) => {
  const [n, a] = $(t), s = C(() => Ye(n), [n]), d = (l) => {
    a({ [l]: null });
  }, o = () => {
    const l = Object.keys(n).reduce((u, p) => (u[p] = null, u), {});
    a(l);
  }, c = C(
    () => s.map(([l, u]) => ({
      fieldName: l,
      value: u,
      label: Re(l, e, r),
      displayValue: Ie(l, u, e, r)
    })),
    [s, e, r]
  );
  return {
    filters: n,
    activeFilters: s,
    processedFilters: c,
    resetFilter: d,
    resetAllFilters: o,
    hasActiveFilters: s.length > 0
  };
}, _e = ({
  filterParsers: t,
  columns: e = [],
  quickFilters: r = []
}) => {
  const { processedFilters: n, resetFilter: a, resetAllFilters: s, hasActiveFilters: d } = Pe({
    filterParsers: t,
    columns: e,
    quickFilters: r
  });
  return d ? /* @__PURE__ */ b("div", { className: "mb-[10px] flex items-center gap-2", children: [
    /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-[8px]", children: n.map(({ fieldName: o, label: c, displayValue: l }) => /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(v, { when: c, children: /* @__PURE__ */ b("div", { className: "flex items-center gap-1", children: [
      /* @__PURE__ */ b("span", { className: "text-xs", children: [
        c,
        ":"
      ] }),
      /* @__PURE__ */ i(
        se,
        {
          closable: !0,
          closeIcon: /* @__PURE__ */ i(me, { className: "h-3 w-3 text-neutral-50 hover:text-neutral-70" }),
          onClose: () => a(o),
          children: /* @__PURE__ */ i("span", { className: "text-xs text-neutral-80", children: l })
        }
      )
    ] }) }) }, o)) }),
    /* @__PURE__ */ i(v, { when: n.find((o) => o.label), children: /* @__PURE__ */ b(U, { type: "link", size: "small", onClick: s, children: [
      /* @__PURE__ */ i(ge, {}),
      "Сбросить все"
    ] }) })
  ] }) : null;
};
function m(...t) {
  return xe(t);
}
const ze = ({
  value: t,
  onChange: e,
  options: r,
  className: n,
  style: a,
  ...s
}) => {
  const d = (c) => {
    e(c);
  }, o = {
    className: m(n, "!w-max whitespace-nowrap"),
    style: a,
    ...s
  };
  return /* @__PURE__ */ i(
    ce.Group,
    {
      block: !0,
      optionType: "button",
      value: t,
      options: r,
      onChange: (c) => d(c.target.value),
      ...o
    }
  );
}, Ee = ({
  value: t,
  onChange: e,
  children: r,
  className: n,
  style: a,
  styles: s,
  ...d
}) => {
  const o = (f) => f && we(f, "yyyy-MM-dd", /* @__PURE__ */ new Date()).toISOString(), [c, l] = N(!1), u = t ? j(t) : void 0, p = {
    className: m(n),
    style: {
      position: "absolute",
      left: 0,
      top: "80%",
      width: "0",
      height: "0",
      opacity: 0,
      ...a
    },
    styles: {
      popup: {
        root: {
          width: "max-content"
        }
      },
      ...s
    },
    ...d
  };
  return /* @__PURE__ */ b("div", { children: [
    /* @__PURE__ */ i("div", { onClick: () => l(!0), children: r }),
    /* @__PURE__ */ i(
      K,
      {
        value: u,
        open: c,
        onOpenChange: l,
        onChange: (f, g) => {
          e == null || e(o(Array.isArray(g) ? g[0] : g));
        },
        ...p
      }
    )
  ] });
}, Ve = ({
  value: t,
  onChange: e,
  children: r,
  className: n,
  style: a,
  styles: s,
  ...d
}) => {
  const o = (f) => f, [c, l] = N(!1), u = [
    t != null && t[0] ? j(t == null ? void 0 : t[0]) : null,
    t != null && t[1] ? j(t == null ? void 0 : t[1]) : null
  ], p = {
    className: m(n),
    style: {
      position: "absolute",
      left: 0,
      top: "80%",
      width: "0",
      height: "0",
      opacity: 0,
      ...a
    },
    styles: {
      popup: {
        root: {
          width: "max-content"
        }
      },
      ...s
    },
    ...d
  };
  return /* @__PURE__ */ b("div", { children: [
    /* @__PURE__ */ i("div", { onClick: () => l(!0), children: r }),
    /* @__PURE__ */ i(
      K.RangePicker,
      {
        value: u,
        open: c,
        onOpenChange: l,
        onChange: (f, g) => {
          e == null || e(o(g));
        },
        ...p
      }
    )
  ] });
}, Le = ({
  children: t,
  slot: e
}) => /* @__PURE__ */ i(
  de,
  {
    classNames: {
      body: "!p-0"
    },
    trigger: "click",
    placement: "bottom",
    arrow: !1,
    content: e,
    children: t
  }
), A = M(
  ({
    value: t,
    onChange: e,
    children: r,
    type: n = "string",
    className: a,
    style: s,
    ...d
  }) => {
    const o = (l) => {
      e(l);
    }, c = {
      className: m(a),
      style: s,
      ...d
    };
    return /* @__PURE__ */ i(
      v,
      {
        when: r,
        elseComponent: n === "string" ? /* @__PURE__ */ i(
          P,
          {
            value: t ?? "",
            onChange: (l) => o(l.target.value),
            ...c
          }
        ) : /* @__PURE__ */ i(
          _,
          {
            value: t,
            onChange: (l) => o(l ?? ""),
            ...c
          }
        ),
        children: /* @__PURE__ */ i(
          Le,
          {
            slot: n === "string" ? /* @__PURE__ */ i(
              P,
              {
                value: t ?? "",
                onChange: (l) => o(l.target.value),
                ...c
              }
            ) : /* @__PURE__ */ i(
              _,
              {
                value: t,
                onChange: (l) => o(l ?? ""),
                ...c
              }
            ),
            children: r
          }
        )
      }
    );
  }
);
A.displayName = "FilterInput";
const S = M(
  ({
    value: t,
    onChange: e,
    children: r,
    className: n,
    style: a,
    styles: s,
    ...d
  }) => {
    const o = (p) => {
      e(p);
    }, [c, l] = N(!1), u = {
      className: m(n),
      style: {
        position: "absolute",
        left: 0,
        top: "80%",
        width: "0",
        height: "0",
        opacity: 0,
        ...a
      },
      styles: {
        popup: {
          root: {
            width: "max-content"
          }
        },
        ...s
      },
      ...d
    };
    return /* @__PURE__ */ b("div", { children: [
      /* @__PURE__ */ i("div", { onClick: () => l(!0), children: r }),
      /* @__PURE__ */ i(
        W,
        {
          value: t,
          open: c,
          onOpenChange: l,
          onChange: (p) => o(p),
          ...u
        }
      )
    ] });
  }
);
S.displayName = "FilterSelect";
const Y = M(
  ({
    fieldName: t,
    filterProps: e,
    filterParsers: r,
    filterType: n,
    children: a,
    className: s
  }) => {
    const [d, o] = $(r), c = d[t], l = (f) => {
      o({ [t]: f });
    }, p = {
      value: c,
      onChange: l,
      onReset: () => l(null),
      ...e,
      className: m(s, e == null ? void 0 : e.className),
      style: { ...e == null ? void 0 : e.style },
      ...e
    };
    switch (n) {
      case "multiselect":
        return /* @__PURE__ */ i(S, { ...p, mode: "multiple", children: a });
      case "date":
        return /* @__PURE__ */ i(Ee, { ...p, children: a });
      case "date-range":
        return /* @__PURE__ */ i(Ve, { ...p, children: a });
      // case "range":
      //   return <FilterRange {...props}>{children}</FilterRange>;
      case "input":
        return /* @__PURE__ */ i(A, { ...p, children: a });
      case "input-number":
        return /* @__PURE__ */ i(A, { ...p, type: "number", children: a });
      case "select":
        return /* @__PURE__ */ i(S, { ...p, children: a });
      case "radio":
        return /* @__PURE__ */ i(ze, { ...p });
      case "custom":
        if (e != null && e.render || e != null && e.renderMultiple) {
          const f = e == null ? void 0 : e.isMultiple;
          if (f && (e != null && e.renderMultiple)) {
            const g = c, x = [];
            return /* @__PURE__ */ i("div", { className: p.className, style: p.style, children: e.renderMultiple(
              g || x,
              l,
              a
            ) });
          } else if (!f && (e != null && e.render)) {
            const g = c, x = { value: "", label: "" };
            return /* @__PURE__ */ i("div", { className: p.className, style: p.style, children: e.render(
              g || x,
              l,
              a
            ) });
          }
        }
        return /* @__PURE__ */ i(F, { children: a });
      default:
        return null;
    }
  }
);
Y.displayName = "FilterCommon";
const Be = ({
  quickFilters: t,
  filterParsers: e
}) => /* @__PURE__ */ i("div", { className: "flex gap-[12px]", children: t.map((r) => /* @__PURE__ */ b("div", { className: "flex gap-[8px] items-center w-max", children: [
  /* @__PURE__ */ i(v, { when: r.label, children: /* @__PURE__ */ b("div", { children: [
    r.label,
    ":"
  ] }) }),
  /* @__PURE__ */ i(
    Y,
    {
      filterParsers: e,
      fieldName: r.id,
      filterType: r.type,
      filterProps: r,
      className: r.className
    }
  )
] }, r.id)) }), He = ({ children: t, cell: e }) => {
  switch (e) {
    case "date":
      if (t)
        return /* @__PURE__ */ i(F, { children: Ne(t, "dd.MM.yyyy") });
  }
  return /* @__PURE__ */ i(
    "div",
    {
      className: m("flex items-center", e === "number" && "justify-end"),
      children: t
    }
  );
}, Je = ({
  className: t,
  id: e,
  filterId: r,
  sortId: n,
  // dataType,
  children: a,
  filterType: s,
  filterParsers: d,
  tooltip: o,
  filterProps: c
}) => {
  const { sort: l, setSort: u } = Me(), p = n ?? e, f = r ?? e, g = () => {
    (l == null ? void 0 : l.field) !== p || !(l != null && l.order) ? u == null || u({ field: p, order: "asc" }) : l.order === "asc" ? u == null || u({ field: p, order: "desc" }) : u == null || u({ field: null, order: null });
  };
  return /* @__PURE__ */ b(pe, { title: o == null ? void 0 : o.content, className: "flex items-center gap-[4px]", children: [
    /* @__PURE__ */ i("div", { className: "text-neutral-60", children: a }),
    /* @__PURE__ */ b(
      "div",
      {
        className: m(
          "flex items-center justify-between gap-[4px] w-full",
          // dataType === "string" && "justify-start",
          // dataType === "number" && "justify-end",
          t
        ),
        children: [
          /* @__PURE__ */ i(
            Y,
            {
              filterParsers: d,
              filterType: s,
              fieldName: f,
              filterProps: c,
              children: /* @__PURE__ */ i(U, { type: "text", className: "!px-1", size: "small", children: s && f && /* @__PURE__ */ i(
                be,
                {
                  className: m(
                    "h-4 w-4",
                    "opacity-15 hover:opacity-20 ease-in",
                    c.value ? "text-[#1677ff] hover:opacity-60" : ""
                  )
                }
              ) })
            }
          ),
          /* @__PURE__ */ b(
            "div",
            {
              className: m(
                "flex flex-col items-center justify-center ml-1 cursor-pointer select-none",
                (l == null ? void 0 : l.field) === p ? "text-primary" : "text-neutral-300",
                "hover:text-neutral-600"
              ),
              onClick: g,
              children: [
                /* @__PURE__ */ i(
                  ye,
                  {
                    className: m(
                      "w-[10px] h-[8px] leading-none transition-colors",
                      (l == null ? void 0 : l.field) === p && (l == null ? void 0 : l.order) === "asc" ? "!text-[#1677ff]" : "text-neutral-300"
                    )
                  }
                ),
                /* @__PURE__ */ i(
                  he,
                  {
                    className: m(
                      "w-[10px] h-[8px] leading-none transition-colors",
                      (l == null ? void 0 : l.field) === p && (l == null ? void 0 : l.order) === "desc" ? "!text-[#1677ff]" : "text-neutral-300"
                    )
                  }
                )
              ]
            }
          )
        ]
      }
    )
  ] });
}, Ue = (t, e) => {
  const r = [];
  for (const n of t) {
    const a = { ...n.definition }, s = n.dataType ?? "string", d = (o) => {
      var c;
      return n.definition.mapping ? ((c = n.definition.mapping.find((l) => l.value === o)) == null ? void 0 : c.label) ?? o : o;
    };
    switch (typeof n.definition.cell == "function" ? a.cell = n.definition.cell : a.cell = ({ getValue: o, row: c }) => /* @__PURE__ */ i(He, { row: c, cell: n.definition.cell, children: d(o()) }), typeof a.header) {
      case "string":
        a.header = () => {
          var c, l, u;
          return /* @__PURE__ */ i(
            Je,
            {
              filterProps: (() => {
                if (!n.filter) return {};
                const p = {
                  className: n.filter.className,
                  style: n.filter.style,
                  styles: n.filter.styles
                };
                return n.filter.type === "multiselect" || n.filter.type === "select" ? {
                  ...p,
                  options: n.filter.options
                } : n.filter.type === "custom" ? {
                  ...p,
                  render: n.filter.render,
                  renderMultiple: "isMultiple" in n.filter && n.filter.isMultiple ? n.filter.render : void 0,
                  isMultiple: "isMultiple" in n.filter ? n.filter.isMultiple : !1
                } : p;
              })(),
              filterParsers: e.filterParsers,
              id: n.definition.id,
              filterId: (c = n.filter) == null ? void 0 : c.id,
              sortId: (l = n.sort) == null ? void 0 : l.id,
              dataType: s,
              filterType: (u = n.filter) == null ? void 0 : u.type,
              tooltip: n.definition.headerTooltip,
              children: n.definition.header
            }
          );
        };
        break;
    }
    r.push(a);
  }
  return r;
};
function H(t, e = !1) {
  const r = t.getIsPinned(), n = r === "left" && t.getIsLastColumn("left"), a = r === "right" && t.getIsFirstColumn("right");
  return {
    boxShadow: n ? `-1px ${e ? "1px" : "0"} #DBE0E7 inset` : a ? `1px ${e ? "1px" : "0"} #DBE0E7 inset` : e ? "0 1px #DBE0E7 inset" : void 0,
    left: r === "left" ? `${t.getStart("left")}px` : void 0,
    right: r === "right" ? `${t.getAfter("right")}px` : void 0,
    position: r ? "sticky" : "relative",
    minWidth: t.columnDef.minSize,
    width: t.columnDef.size,
    maxWidth: t.columnDef.maxSize,
    zIndex: r ? 1 : 0
  };
}
const Z = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i("div", { className: "relative w-full", children: /* @__PURE__ */ i(
  "table",
  {
    ref: r,
    className: m("w-full caption-bottom bg-white", t),
    ...e
  }
) }));
Z.displayName = "Table";
const q = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "thead",
  {
    ref: r,
    className: m("border-b border-t border-neutral-30", t),
    ...e
  }
));
q.displayName = "TableHeader";
const ee = h.forwardRef(({ className: t, children: e, ...r }, n) => /* @__PURE__ */ i(
  "tbody",
  {
    ref: n,
    className: m("[&_tr:last-child]:border-0", t),
    ...r,
    children: e
  }
));
ee.displayName = "TableBody";
const Ke = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "tfoot",
  {
    ref: r,
    className: m(
      "dark:bg-neutral-800/50 bg-neutral-80/50 font-medium [&>tr]:last:border-b-0",
      t
    ),
    ...e
  }
));
Ke.displayName = "TableFooter";
const O = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "tr",
  {
    ref: r,
    className: m("data-[state=selected]:bg-neutral-50", t),
    ...e
  }
));
O.displayName = "TableRow";
const te = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "th",
  {
    ref: r,
    className: m(
      "h-12 whitespace-nowrap text-nowrap bg-white px-2 text-left align-middle text-xs font-normal text-neutral-60 [&:has([role=checkbox])]:pr-0",
      t
    ),
    ...e
  }
));
te.displayName = "TableHead";
const k = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "td",
  {
    ref: r,
    className: m(
      "whitespace-nowrap text-nowrap bg-white px-2 py-1 align-middle [&:has([role=checkbox])]:pr-0",
      t
    ),
    ...e
  }
));
k.displayName = "TableCell";
const We = h.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
  "caption",
  {
    ref: r,
    className: m(
      "text-neutral-500 dark:text-neutral-400 mt-4 text-sm",
      t
    ),
    ...e
  }
));
We.displayName = "TableCaption";
const Qe = ({
  table: t,
  isNoData: e,
  isLoading: r,
  pagination: n,
  isFirstSummaryRow: a
}) => /* @__PURE__ */ b(Z, { className: "", children: [
  /* @__PURE__ */ i(q, { className: "sticky top-0 z-10 border-none", children: t.getHeaderGroups().map((s) => /* @__PURE__ */ i(O, { children: s.headers.map((d) => /* @__PURE__ */ i(
    te,
    {
      style: { ...H(d.column, !0) },
      children: d.isPlaceholder ? null : z(
        d.column.columnDef.header,
        d.getContext()
      )
    },
    d.id
  )) }, s.id)) }),
  /* @__PURE__ */ b(ee, { children: [
    t.getRowModel().rows.map((s) => /* @__PURE__ */ i(
      O,
      {
        "data-state": s.getIsSelected() && "selected",
        className: "group",
        children: s.getVisibleCells().map((d) => /* @__PURE__ */ i(
          k,
          {
            style: { ...H(d.column) },
            className: m(
              "group-hover:bg-neutral-10",
              d.row.index === 0 && a && "!bg-neutral-10 font-bold"
              // index === 0 && isFirstSummaryRow && "bg-neutral-10"
            ),
            children: z(d.column.columnDef.cell, d.getContext())
          },
          d.id
        ))
      },
      s.id
    )),
    r && !e && /* @__PURE__ */ i(F, { children: Array.from({ length: n.pageSize }).fill(null).map((s, d) => {
      var o;
      return /* @__PURE__ */ i(O, { children: (o = t.getHeaderGroups()[0]) == null ? void 0 : o.headers.map((c) => /* @__PURE__ */ i(
        k,
        {
          className: "w-full group-hover:bg-neutral-10",
          children: /* @__PURE__ */ i("div", { className: "h-6 w-full animate-pulse rounded bg-neutral-20" })
        },
        c.id
      )) }, d);
    }) })
  ] })
] }), Ge = ({
  columns: t,
  data: e,
  isNoData: r,
  pagination: n,
  setPagination: a,
  totalPages: s,
  isLoading: d,
  filterParsers: o,
  isFirstSummaryRow: c
}) => {
  const l = C(
    () => Ue(t, { filterParsers: o }),
    [t, o]
  ), u = Ce({
    columns: l,
    data: e,
    getCoreRowModel: Te(),
    onPaginationChange: void 0,
    state: {
      pagination: n
      // columnPinning: columnPinning ?? { left: [], right: [] },
    }
  });
  return /* @__PURE__ */ b(F, { children: [
    /* @__PURE__ */ i("div", { className: "w-full flex-1 overflow-scroll", children: /* @__PURE__ */ i(
      Qe,
      {
        isFirstSummaryRow: c && n.pageIndex === 0,
        pagination: n,
        setPagination: a,
        totalPages: s,
        table: u,
        isLoading: d ?? !1,
        isNoData: r
      }
    ) }),
    /* @__PURE__ */ i("div", { className: "flex items-center justify-between py-[8px]", children: /* @__PURE__ */ b("div", { className: "flex items-center gap-[12px]", children: [
      /* @__PURE__ */ i(
        ue,
        {
          current: n.pageIndex + 1,
          total: s * n.pageSize,
          pageSize: n.pageSize,
          onChange: (p) => a({
            pageIndex: p - 1,
            pageSize: n.pageSize
          }),
          showSizeChanger: !1
        }
      ),
      /* @__PURE__ */ i(
        W,
        {
          showSearch: !1,
          value: n.pageSize,
          onChange: (p) => a({
            pageIndex: 0,
            pageSize: p
          }),
          options: [
            {
              value: 10,
              label: 10
            },
            {
              value: 20,
              label: 20
            },
            {
              value: 30,
              label: 30
            },
            {
              value: 40,
              label: 40
            },
            {
              value: 50,
              label: 50
            },
            {
              value: 100,
              label: 100
            }
          ]
        }
      )
    ] }) })
  ] });
}, Xe = {
  ...D,
  lang: {
    ...D.lang,
    fieldDateFormat: "DD.MM.YYYY",
    fieldDateTimeFormat: "DD.MM.YYYY HH:mm:ss",
    yearFormat: "YYYY",
    cellYearFormat: "YYYY"
  }
}, Ze = {
  ...L,
  DatePicker: {
    ...L.DatePicker,
    lang: Xe.lang
  }
}, ct = ({
  columns: t,
  data: e,
  isLoading: r,
  sort: n,
  setSort: a,
  pagination: s,
  setPagination: d,
  totalPages: o,
  filterParsers: c,
  isFirstSummaryRow: l = !0,
  quickFilters: u
}) => {
  const p = (e == null ? void 0 : e.length) === 0, f = ae(!0);
  return oe(() => {
    f.current && t.forEach((g) => {
      var x;
      (x = g.sort) != null && x.enabled && g.sort.default && (a({
        field: g.sort.id ?? g.definition.id,
        order: g.sort.default
      }), f.current = !1);
    });
  }, []), /* @__PURE__ */ i(fe, { locale: Ze, children: /* @__PURE__ */ i("div", { className: "relative flex h-full flex-col p-4", children: /* @__PURE__ */ b(G.Provider, { value: { sort: n, setSort: a }, children: [
    /* @__PURE__ */ i("div", { className: "mb-[10px] flex items-center justify-between", children: /* @__PURE__ */ i(v, { when: u == null ? void 0 : u.length, children: /* @__PURE__ */ i(
      Be,
      {
        quickFilters: u,
        filterParsers: c
      }
    ) }) }),
    /* @__PURE__ */ i(
      _e,
      {
        filterParsers: c,
        columns: t,
        quickFilters: u
      }
    ),
    /* @__PURE__ */ i(
      Ge,
      {
        isLoading: r,
        totalPages: o,
        columns: t,
        filterParsers: c,
        data: e,
        isNoData: p,
        pagination: s,
        setPagination: d,
        isFirstSummaryRow: l
      }
    )
  ] }) }) });
};
export {
  _e as FilterTags,
  v as If,
  ct as Table,
  st as useTableStates
};