mimir-ui-kit 1.38.44 → 1.39.0

package/dist/components/Table/TableFilters.js

@@ -0,0 +1,165 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useState as z, useEffect as A, useCallback as I } from "react";
+import { EFilterType as E } from "./constants.js";
+import { c as e } from "../../stories.module-fud786VB.js";
+import { Button as d } from "../Button/Button.js";
+import { EButtonVariantBorderless as L, EButtonForm as b, EButtonVariantOutline as O, EButtonVariantDefault as j } from "../Button/constants.js";
+import { DatePicker as S } from "../DatePicker/DatePicker.js";
+import { Drawer as G } from "../Drawer/Drawer.js";
+import { SelectSearch as P } from "../SelectSearch/SelectSearch.js";
+const W = ({
+  filters: p,
+  filterValues: v,
+  isOpen: m,
+  onClose: n,
+  onApply: w,
+  onReset: x
+}) => {
+  const [B, u] = z({});
+  A(() => {
+    m && u({ ...v });
+  }, [m, v]);
+  const f = I(
+    (r, i, s = !0) => {
+      u((c) => ({
+        ...c,
+        [r]: { value: i, active: s }
+      }));
+    },
+    []
+  ), F = () => {
+    w(B), n();
+  }, C = () => {
+    const r = {};
+    p.forEach((i) => {
+      r[i.id] = { value: null, active: !1 };
+    }), u(r), x(), n();
+  }, y = /* @__PURE__ */ a("div", { className: e.columnOrderFooter, children: [
+    /* @__PURE__ */ o(
+      d,
+      {
+        onClick: C,
+        variant: L.Asphalt,
+        form: b.BorderlessButton,
+        className: e.footerButton,
+        size: "xxl",
+        children: "Сбросить все"
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: e.footerButtonGroup, children: [
+      /* @__PURE__ */ o(
+        d,
+        {
+          onClick: n,
+          variant: O.Asphalt,
+          form: b.OutlineButton,
+          className: e.footerButton,
+          size: "xxl",
+          children: "Отменить"
+        }
+      ),
+      /* @__PURE__ */ o(
+        d,
+        {
+          onClick: F,
+          variant: j.PrimarySapphire,
+          className: e.footerButton,
+          size: "xxl",
+          children: "Применить"
+        }
+      )
+    ] })
+  ] }), D = (r) => {
+    var s, c, N;
+    const i = ((s = B[r.id]) == null ? void 0 : s.value) ?? null;
+    switch (r.type) {
+      case E.DATE_RANGE: {
+        const t = i, T = typeof (t == null ? void 0 : t.from) == "string" ? t.from : ((c = t == null ? void 0 : t.from) == null ? void 0 : c.toISOString().split("T")[0]) || "", k = typeof (t == null ? void 0 : t.to) == "string" ? t.to : ((N = t == null ? void 0 : t.to) == null ? void 0 : N.toISOString().split("T")[0]) || "";
+        return /* @__PURE__ */ a("div", { className: e.filterItem, children: [
+          /* @__PURE__ */ o("div", { className: e.filterLabel, children: r.label }),
+          /* @__PURE__ */ a("div", { className: e.filterDateRange, children: [
+            /* @__PURE__ */ o(
+              S,
+              {
+                label: "С",
+                variant: "default-white",
+                size: "l",
+                value: T,
+                onChangeValue: (h) => {
+                  const l = {
+                    from: h.value,
+                    to: (t == null ? void 0 : t.to) ?? ""
+                  };
+                  f(
+                    r.id,
+                    l,
+                    !!(l.from || l.to)
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ o(
+              S,
+              {
+                label: "По",
+                value: k,
+                size: "l",
+                variant: "default-white",
+                onChangeValue: (h) => {
+                  const l = {
+                    from: (t == null ? void 0 : t.from) ?? "",
+                    to: h.value
+                  };
+                  f(
+                    r.id,
+                    l,
+                    !!(l.from || l.to)
+                  );
+                }
+              }
+            )
+          ] })
+        ] });
+      }
+      case E.SELECT:
+        return /* @__PURE__ */ a("div", { className: e.filterItem, children: [
+          /* @__PURE__ */ o("div", { className: e.filterLabel, children: r.label }),
+          /* @__PURE__ */ o(
+            P,
+            {
+              filterOnSearch: !1,
+              disableInput: !0,
+              placeholder: r.label,
+              value: i,
+              items: r.options || [],
+              variant: "default-white",
+              onChange: (t) => {
+                f(
+                  r.id,
+                  t,
+                  !!(t && t.id)
+                );
+              }
+            }
+          )
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ o(
+    G,
+    {
+      isOpen: m,
+      onClose: n,
+      title: "Фильтры",
+      position: "right",
+      showCloseButton: !0,
+      footer: y,
+      children: /* @__PURE__ */ o("div", { className: e.filterList, children: p.map((r) => /* @__PURE__ */ o("div", { children: D(r) }, r.id)) })
+    }
+  );
+};
+export {
+  W as TableFilters
+};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { TTableHeaderProps } from './types';
+
+export declare const TableHeader: <T extends object>({ table, headerClassName, headerTextClassName, headerRowClassName, headerCellClassName, isSelectable, variant }: TTableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/TableHeader.js

@@ -0,0 +1,70 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { f as H } from "../../index-CVk4sixt.js";
+import { c as n } from "../../index-DIxK0V-G.js";
+import { ETableVariant as s, ESortDirection as m } from "./constants.js";
+import { c as t } from "../../styles.module--QBQYoA9.js";
+import { Icon as c } from "../../icons/Icon.js";
+const E = ({
+  table: i,
+  headerClassName: d,
+  headerTextClassName: u,
+  headerRowClassName: p,
+  headerCellClassName: S,
+  isSelectable: h,
+  variant: f = s.WhiteHeader
+}) => {
+  const x = i.getHeaderGroups();
+  return /* @__PURE__ */ o(
+    "thead",
+    {
+      className: n(
+        t.header,
+        f === s.WhiteHeader ? t["header-white"] : t["header-gray"],
+        d
+      ),
+      children: x.map((r) => /* @__PURE__ */ a("tr", { className: p, children: [
+        h && /* @__PURE__ */ o("th", { className: n(t.selectHeaderCell) }),
+        r.headers.map((e) => {
+          const N = e.column.columnDef.size, g = e.column.columnDef.minSize, C = e.column.columnDef.maxSize, D = {
+            width: N,
+            minWidth: g,
+            maxWidth: C
+          }, z = e.column.getCanSort(), l = e.column.getIsSorted();
+          return /* @__PURE__ */ o(
+            "th",
+            {
+              colSpan: e.colSpan,
+              className: n(t.headerCell, S),
+              style: D,
+              children: /* @__PURE__ */ a("div", { className: t.headerContent, children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: n(t.headerText, u),
+                    children: H(
+                      e.column.columnDef.header,
+                      e.getContext()
+                    )
+                  }
+                ),
+                z && /* @__PURE__ */ o(
+                  "button",
+                  {
+                    className: t.sortButton,
+                    onClick: e.column.getToggleSortingHandler(),
+                    type: "button",
+                    children: /* @__PURE__ */ o("div", { className: t.sortIcon, children: l === m.ASC ? /* @__PURE__ */ o(c, { iconName: "ArrowUp16px" }) : l === m.DESC ? /* @__PURE__ */ o(c, { iconName: "ArrowDown16px" }) : /* @__PURE__ */ o(c, { iconName: "Sort32px" }) })
+                  }
+                )
+              ] })
+            },
+            e.id
+          );
+        })
+      ] }, r.id))
+    }
+  );
+};
+export {
+  E as TableHeader
+};

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,5 @@
+import { TTableRowProps } from './types';
+
+declare function TableRowComponent<T extends object>({ row, isSelectable, rowClassName, selectCellClassName, cellClassName, variant, isVirtualized, rowIndex, columnsKey }: TTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: typeof TableRowComponent;
+export {};

package/dist/components/Table/TableRow.js

@@ -0,0 +1,76 @@
+import { jsx as o, Fragment as z } from "react/jsx-runtime";
+import { f as I } from "../../index-CVk4sixt.js";
+import { c as n } from "../../index-DIxK0V-G.js";
+import { memo as R, useState as B, useEffect as D, useCallback as N } from "react";
+import { ETableVariant as u } from "./constants.js";
+import { c as l } from "../../styles.module--QBQYoA9.js";
+import { CheckboxMimir as V } from "../CheckboxMimir/CheckboxMimir.js";
+function E({
+  row: e,
+  isSelectable: t,
+  rowClassName: f,
+  selectCellClassName: g,
+  cellClassName: h,
+  variant: S = u.WhiteHeader,
+  isVirtualized: C,
+  rowIndex: i,
+  columnsKey: a
+}) {
+  const w = e.getVisibleCells(), [b, d] = B(e.getIsSelected());
+  D(() => {
+    d(e.getIsSelected());
+  }, [e.getIsSelected()]);
+  const k = N(
+    (c) => {
+      e.toggleSelected(c), d(c);
+    },
+    [e]
+  ), m = () => {
+    const c = [];
+    return t && c.push(
+      /* @__PURE__ */ o(
+        "td",
+        {
+          className: n(l.selectCell, g),
+          children: /* @__PURE__ */ o(
+            V,
+            {
+              checked: b,
+              onChange: k
+            }
+          )
+        },
+        `select-cell-${a || 0}`
+      )
+    ), w.forEach((s) => {
+      const r = s.column, y = {
+        width: r.columnDef.size,
+        minWidth: r.columnDef.minSize,
+        maxWidth: r.columnDef.maxSize
+      };
+      c.push(
+        /* @__PURE__ */ o(
+          "td",
+          {
+            className: n(l.cell, h),
+            style: y,
+            children: I(s.column.columnDef.cell, s.getContext())
+          },
+          `${s.id}-${a || 0}`
+        )
+      );
+    }), c;
+  };
+  if (C)
+    return /* @__PURE__ */ o(z, { children: m() });
+  const W = n(
+    l.row,
+    S === u.WhiteHeader ? i !== void 0 && i % 2 === 0 ? l.rowWhiteBackground : l.rowGrayBackground : i !== void 0 && i % 2 === 0 ? l.rowGrayBackground : l.rowWhiteBackground,
+    f
+  );
+  return /* @__PURE__ */ o("tr", { className: W, children: m() });
+}
+const K = R(E, (e, t) => e.row.id === t.row.id && e.row.getIsSelected() === t.row.getIsSelected() && e.rowIndex === t.rowIndex && e.isVirtualized === t.isVirtualized && e.columnsKey === t.columnsKey);
+export {
+  K as TableRow
+};

package/dist/components/Table/TableScrollButtons.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ETableScrollButtonVariant } from './constants';
+
+type TProps = {
+    handleScrollLeft: () => void;
+    handleScrollRight: () => void;
+    buttonsVariant?: ETableScrollButtonVariant | `${ETableScrollButtonVariant}`;
+    className?: string;
+};
+export declare const TableScrollButtons: FC<TProps>;
+export {};

package/dist/components/Table/TableScrollButtons.js

@@ -0,0 +1,35 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as i, useMemo as s } from "react";
+import { ETableScrollIconName as c, ETableScrollButtonVariant as l } from "./constants.js";
+import { c as a } from "../../styles.module--QBQYoA9.js";
+import { MergedButton as u } from "../MergedButton/MergedButton.js";
+const E = i(
+  ({
+    handleScrollLeft: r,
+    handleScrollRight: t,
+    buttonsVariant: o = l.WHITE,
+    className: n
+  }) => {
+    const e = s(
+      () => [
+        {
+          isIconButton: !0,
+          iconName: c.LEFT,
+          variant: o,
+          onClick: r
+        },
+        {
+          isIconButton: !0,
+          iconName: c.RIGHT,
+          variant: o,
+          onClick: t
+        }
+      ],
+      [r, t, o]
+    );
+    return /* @__PURE__ */ m("div", { className: `${a.scrollButtons} ${n || ""}`, children: /* @__PURE__ */ m(u, { buttons: e }) });
+  }
+);
+export {
+  E as TableScrollButtons
+};

package/dist/components/Table/constants.d.ts

@@ -0,0 +1,128 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export declare enum ETableVariant {
+    WhiteHeader = "whiteHeader",
+    GrayHeader = "grayHeader"
+}
+export declare enum ETableDisplayMode {
+    TABLE = "table",
+    CARDS = "cards"
+}
+export declare enum ESortDirection {
+    ASC = "asc",
+    DESC = "desc",
+    NONE = "none"
+}
+export declare const TABLE_OPTIONS: {
+    DEFAULT_HEIGHT: number;
+    DEFAULT_WIDTH: string;
+    DEFAULT_ROW_HEIGHT: number;
+    OVERSCAN: number;
+};
+export declare enum ETableScrollButtonVariant {
+    GRAY = "gray",
+    WHITE = "white"
+}
+export declare enum ETableScrollIconName {
+    LEFT = "ArrowLeft16px",
+    RIGHT = "ArrowRight16px"
+}
+export declare enum EFilterType {
+    DATE_RANGE = "date_range",
+    SELECT = "select"
+}
+export type TAgent = {
+    id: string;
+    name: string;
+    passport: string;
+    bankDetails: string;
+    registrationAddress: string;
+    actualAddress: string;
+    adNumber: string;
+    responsible: string;
+    birthDate: string;
+    agentType: string;
+    status: string;
+    phone: string;
+    snils: string;
+    inn: string;
+    terminationDate: string;
+    offerDate: string;
+};
+export declare const agentsData: TAgent[];
+export declare const partialAgentsData: {
+    id: string;
+    name: string;
+    passport: string;
+    bankDetails: string;
+    registrationAddress: string;
+    actualAddress: string;
+    adNumber: string;
+}[];
+export declare const getAdaptiveColumnsPartial: (isQueryM: boolean) => ({
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    enableSorting: boolean;
+    cell?: undefined;
+} | {
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    enableSorting?: undefined;
+    cell?: undefined;
+} | {
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    cell: ({ getValue }: {
+        getValue: () => unknown;
+    }) => import("react/jsx-runtime").JSX.Element;
+    enableSorting?: undefined;
+})[];
+export declare const getAdaptiveColumns: (isQueryM: boolean) => ({
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    enableSorting: boolean;
+    cell?: undefined;
+} | {
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    enableSorting?: undefined;
+    cell?: undefined;
+} | {
+    id: string;
+    header: string;
+    accessorKey: string;
+    size: number;
+    cell: ({ getValue }: {
+        getValue: () => unknown;
+    }) => import("react/jsx-runtime").JSX.Element;
+    enableSorting?: undefined;
+})[];
+export declare const generateVirtualData: (count: number, withVaryingHeight?: boolean) => {
+    id: string;
+    name: string;
+    registrationAddress: string;
+    responsible: string;
+    status: string;
+    adNumber: string;
+    phone: string;
+    passport: string;
+    bankDetails: string;
+    actualAddress: string;
+    birthDate: string;
+    agentType: string;
+    snils: string;
+    inn: string;
+    terminationDate: string;
+    offerDate: string;
+}[];
+export declare const columns: ColumnDef<TAgent>[];