mimir-ui-kit 1.38.44 → 1.39.0

package/dist/components/Table/hooks/useTableVirtualization.js

@@ -0,0 +1,97 @@
+import { u as F } from "../../../index-D5H8gPPn.js";
+import { useRef as T, useState as I, useCallback as _, useEffect as h } from "react";
+import { TABLE_OPTIONS as g } from "../constants.js";
+function y({
+  rows: i,
+  virtualized: r,
+  scrollRef: n,
+  rowSelection: H,
+  columns: d
+}) {
+  const p = T({}), a = T({}), O = T(""), A = T(""), [, E] = I({}), b = _(() => {
+    const e = Object.values(a.current);
+    if (e.length === 0) return g.DEFAULT_ROW_HEIGHT;
+    const s = e.reduce((u, m) => u + m, 0) / e.length;
+    return Math.max(s, g.DEFAULT_ROW_HEIGHT);
+  }, []), c = F({
+    count: r ? i.length : 0,
+    getScrollElement: () => (n == null ? void 0 : n.current) || document.body,
+    estimateSize: (e) => {
+      const t = i[e];
+      return t ? a.current[t.id] || b() : g.DEFAULT_ROW_HEIGHT;
+    },
+    overscan: g.OVERSCAN,
+    getItemKey: (e) => {
+      var t;
+      return ((t = i[e]) == null ? void 0 : t.id) || e;
+    },
+    measureElement: (e) => {
+      const t = e.getBoundingClientRect().height;
+      return Math.max(t, g.DEFAULT_ROW_HEIGHT);
+    }
+  });
+  return h(() => {
+    if (!r || !d) return;
+    const e = d.map((t) => `${t.id}-${t.size}`).join(",");
+    if (A.current !== e) {
+      A.current = e;
+      const t = setTimeout(() => {
+        c.measure(), E({});
+      }, 100);
+      return () => clearTimeout(t);
+    }
+  }, [d, r]), h(() => {
+    const e = i.map((t) => t.id).join(",");
+    O.current !== e && (O.current = e, E({}));
+  }, [i]), h(() => {
+    if (!r || !H) return;
+    const e = requestAnimationFrame(() => {
+      c.measure(), E({});
+    });
+    return () => {
+      cancelAnimationFrame(e);
+    };
+  }, [H, r]), h(() => {
+    if (!r || !(n != null && n.current)) return;
+    const e = () => {
+      requestAnimationFrame(() => {
+        c.getVirtualItems().forEach((s) => {
+          const u = i[s.index];
+          if (!u) return;
+          const m = p.current[u.id];
+          if (!m) return;
+          const o = m.getBoundingClientRect().height;
+          o > 0 && (a.current[u.id] = o);
+        }), c.measure();
+      });
+    }, t = n.current;
+    return t.addEventListener("scroll", e, { passive: !0 }), e(), () => {
+      t.removeEventListener("scroll", e);
+    };
+  }, [r, n, i]), h(() => {
+    var s;
+    if (!r) return;
+    const e = () => {
+      requestAnimationFrame(() => {
+        Object.keys(a.current).forEach((u) => {
+          const m = p.current[u];
+          if (m) {
+            const o = m.getBoundingClientRect().height;
+            o > 0 && (a.current[u] = o);
+          }
+        }), c.measure(), E({});
+      });
+    }, t = new ResizeObserver(() => {
+      setTimeout(e, 100);
+    });
+    return n != null && n.current && t.observe(n.current), (s = n == null ? void 0 : n.current) != null && s.parentElement && t.observe(n.current.parentElement), e(), () => {
+      t.disconnect();
+    };
+  }, [r, n]), {
+    virtualizer: c,
+    rowRefs: p
+  };
+}
+export {
+  y as useTableVirtualization
+};

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

@@ -0,0 +1,3 @@
+export { Table } from './Table';
+export type { TTableProps } from './types';
+export { ESortDirection, ETableVariant, ETableDisplayMode, ETableScrollButtonVariant, ETableScrollIconName } from './constants';

package/dist/components/Table/index.js

@@ -0,0 +1,10 @@
+import { Table as e } from "./Table.js";
+import { ESortDirection as r, ETableDisplayMode as t, ETableScrollButtonVariant as b, ETableScrollIconName as i, ETableVariant as n } from "./constants.js";
+export {
+  r as ESortDirection,
+  t as ETableDisplayMode,
+  b as ETableScrollButtonVariant,
+  i as ETableScrollIconName,
+  n as ETableVariant,
+  e as Table
+};

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

@@ -0,0 +1,150 @@
+import { RowSelectionState, SortingState, Table as ReactTable, Row, ColumnDef, Updater } from '@tanstack/react-table';
+import { MouseEvent, RefObject } from 'react';
+import { EFilterType, ESortDirection, ETableDisplayMode, ETableScrollButtonVariant, ETableVariant } from './constants';
+import { TSelectOption } from '../SelectSearch';
+
+export type TTableFilter = {
+    id: string;
+    label: string;
+    type: EFilterType;
+    columnId: string;
+    options?: TSelectOption[];
+};
+export type TDateRangeFilterValue = {
+    from?: string | Date;
+    to?: string | Date;
+};
+export type TSelectFilterValue = {
+    id: string;
+    name: string;
+};
+export type TTableFilterValues = {
+    [key: string]: {
+        value: TDateRangeFilterValue | TSelectFilterValue | null;
+        active: boolean;
+    };
+};
+export type TTableProps<T = unknown> = {
+    data: T[];
+    columns: ColumnDef<T>[];
+    selectedRowIds?: RowSelectionState;
+    onSelectedRowsChange?: (updaterOrValue: Updater<RowSelectionState>) => void;
+    isSelectable?: boolean;
+    isLoading?: boolean;
+    onSort?: (columnId: string, direction: ESortDirection.ASC | ESortDirection.DESC | false) => void;
+    virtualized?: boolean;
+    height?: number | string;
+    width?: number | string;
+    variant?: ETableVariant | `${ETableVariant}`;
+    /** Режим отображения данных: таблица или карточки */
+    displayMode?: ETableDisplayMode | `${ETableDisplayMode}`;
+    tableClassNameContainer?: string;
+    scrollContainerClassName?: string;
+    tableClassName?: string;
+    headerClassName?: string;
+    headerTextClassName?: string;
+    headerRowClassName?: string;
+    headerCellClassName?: string;
+    bodyClassName?: string;
+    virtualBodyClassName?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+    selectHeaderCellClassName?: string;
+    selectCellClassName?: string;
+    selectedRowClassName?: string;
+    /** Дополнительный класс для контейнера кнопок скролла */
+    scrollButtonsClassName?: string;
+    /** Дополнительный класс для карточек */
+    cardClassName?: string;
+    /** Дополнительный класс для заголовка в карточке */
+    cardHeaderClassName?: string;
+    /** Дополнительный класс для значения в карточке */
+    cardValueClassName?: string;
+    /** Показывать кнопки скролла для навигации по колонкам */
+    showScrollButtons?: boolean;
+    /** Автоматически показывать кнопки скролла при переполнении */
+    autoShowScrollButtons?: boolean;
+    /** Вариант кнопок навигации */
+    buttonsScrollVariant?: ETableScrollButtonVariant | `${ETableScrollButtonVariant}`;
+    initialSorting?: SortingState;
+    initialRowSelection?: RowSelectionState;
+    serverSideSorting?: boolean;
+    columnOrder?: string[];
+    onColumnOrderChange?: (newOrder: string[]) => void;
+    visibleColumns?: Record<string, boolean>;
+    globalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    enableGlobalFilter?: boolean;
+    columnsToSearch?: string[];
+    onCardActionsClick?: (event: MouseEvent, rowData: T) => void;
+    showCardActions?: boolean;
+};
+export type TTableBodyProps<T = unknown> = {
+    table: ReactTable<T>;
+    isSelectable?: boolean;
+    virtualized?: boolean;
+    variant?: ETableVariant | `${ETableVariant}`;
+    bodyClassName?: string;
+    virtualBodyClassName?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+    selectCellClassName?: string;
+    scrollRef: RefObject<HTMLDivElement>;
+};
+export type TTableHeaderProps<T = unknown> = {
+    table: ReactTable<T>;
+    isSelectable?: boolean;
+    variant?: ETableVariant | `${ETableVariant}`;
+    className?: string;
+    headerClassName?: string;
+    headerTextClassName?: string;
+    headerRowClassName?: string;
+    headerCellClassName?: string;
+    selectHeaderCellClassName?: string;
+};
+export type TTableRowProps<T = unknown> = {
+    row: Row<T>;
+    isSelectable?: boolean;
+    rowClassName?: string;
+    cellClassName?: string;
+    selectCellClassName?: string;
+    variant?: ETableVariant | `${ETableVariant}`;
+    isVirtualized?: boolean;
+    rowIndex?: number;
+    columnsKey?: number;
+};
+export type TTableCardsViewProps<T extends object> = {
+    table: ReactTable<T>;
+    virtualized?: boolean;
+    scrollRef: RefObject<HTMLDivElement>;
+    isSelectable?: boolean;
+    cardClassName?: string;
+    cardHeaderClassName?: string;
+    cardValueClassName?: string;
+    onCardActionsClick?: (event: MouseEvent, rowData: T) => void;
+    showCardActions?: boolean;
+};
+export type TTableCardProps<T extends object> = {
+    row: Row<T>;
+    isSelectable?: boolean;
+    cardClassName?: string;
+    cardHeaderClassName?: string;
+    cardValueClassName?: string;
+    onSelect?: (checked: boolean) => void;
+    onActionsClick?: (event: MouseEvent, rowData: T) => void;
+    showActions?: boolean;
+};
+export type TUseTableStateProps<T> = Pick<TTableProps<T>, 'initialSorting' | 'initialRowSelection' | 'onSort' | 'onGlobalFilterChange' | 'onColumnOrderChange' | 'serverSideSorting' | 'data' | 'columnOrder'>;
+export type TUseTableInstanceProps<T> = Pick<TTableProps<T>, 'data' | 'columns' | 'isSelectable' | 'enableGlobalFilter' | 'serverSideSorting' | 'variant' | 'rowClassName' | 'cellClassName' | 'selectCellClassName' | 'visibleColumns' | 'columnsToSearch' | 'selectedRowIds' | 'onSelectedRowsChange'> & {
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
+    columnOrderToUse?: string[];
+    effectiveGlobalFilter?: string;
+    handleSortingChange?: (updaterOrValue: Updater<SortingState>) => void;
+    handleRowSelectionChange?: (updaterOrValue: Updater<RowSelectionState>) => void;
+    handleColumnOrderChange?: (updaterOrValue: Updater<string[]>) => void;
+    handleGlobalFilterChange?: (globalFilter: string) => void;
+    filters?: TTableFilter[];
+    filterValues?: TTableFilterValues;
+    serverSideFiltering?: boolean;
+};

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

@@ -0,0 +1,4 @@
+import { FilterFn, Row } from '@tanstack/react-table';
+
+export declare const globalFilterFn: <T extends Record<string, unknown>>() => FilterFn<T>;
+export declare const createColumnFilter: <T extends Record<string, unknown>>(columnsToSearch: string[]) => (row: Row<T>, value: string) => boolean;

package/dist/components/Table/utils.js

@@ -0,0 +1,25 @@
+const u = () => (n, o, t) => {
+  if (!t || typeof t != "string" || t === "") return !0;
+  const l = t.toLowerCase();
+  try {
+    const r = n.getValue(o);
+    return r == null ? !1 : String(r).toLowerCase().includes(l);
+  } catch {
+    return !1;
+  }
+}, c = (n) => (o, t) => {
+  if (!t || t === "") return !0;
+  const l = t.toLowerCase();
+  return n.some((r) => {
+    try {
+      const e = o.getValue(r);
+      return e == null ? !1 : String(e).toLowerCase().includes(l);
+    } catch {
+      return !1;
+    }
+  });
+};
+export {
+  c as createColumnFilter,
+  u as globalFilterFn
+};

package/dist/components/index.d.ts

@@ -68,3 +68,5 @@ export { ListPhotos } from './ListPhotos';
 export type { TListPhotos, TPhotosDetail, TPhotoValue, TPhotoItem } from './ListPhotos';
 export { MessageShortReply } from './MessageShortReply';
 export { EMessageShortReplyVariant, type TMessageShortReplyProps } from './MessageShortReply';
+export { Table } from './Table';
+export { ESortDirection, ETableVariant, ETableDisplayMode, ETableScrollButtonVariant, ETableScrollIconName } from './Table';

package/dist/components/index.js

@@ -1,17 +1,17 @@
 import { Button as e } from "./Button/Button.js";
 import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as i, EButtonVariantDefault as m, EButtonVariantOutline as f, EButtonVariantRound as x } from "./Button/constants.js";
-import { I as S } from "../Input-DAmc_HxO.js";
-import { EInputSize as E, EInputStatus as l, EInputVariant as u } from "./Input/constants.js";
+import { I as l } from "../Input-DAmc_HxO.js";
+import { EInputSize as S, EInputStatus as s, EInputVariant as u } from "./Input/constants.js";
 import { TextArea as c } from "./TextArea/TextArea.js";
-import { ETextAreaInputSize as g } from "./TextArea/constants.js";
-import { InputPassword as z } from "./InputPassword/InputPassword.js";
+import { ETextAreaInputSize as I } from "./TextArea/constants.js";
+import { InputPassword as g } from "./InputPassword/InputPassword.js";
 import { InputPhoneNumber as h } from "./InputPhoneNumber/InputPhoneNumber.js";
-import { getMaskedInputPhoneValue as B, getUnmaskedInputValue as P } from "./InputPhoneNumber/utils.js";
-import { OtpInput as A } from "./OtpInput/OtpInput.js";
-import { RadioGroup as R } from "./RadioGroup/RadioGroup.js";
-import { DatePicker as w } from "./DatePicker/DatePicker.js";
-import { MergedButton as C } from "./MergedButton/MergedButton.js";
-import { EMergedButtonVariantRound as D } from "./MergedButton/constants.js";
+import { getMaskedInputPhoneValue as k, getUnmaskedInputValue as P } from "./InputPhoneNumber/utils.js";
+import { OtpInput as L } from "./OtpInput/OtpInput.js";
+import { RadioGroup as A } from "./RadioGroup/RadioGroup.js";
+import { DatePicker as U } from "./DatePicker/DatePicker.js";
+import { MergedButton as y } from "./MergedButton/MergedButton.js";
+import { EMergedButtonVariantRound as C } from "./MergedButton/constants.js";
 import { AppImage as v } from "./Image/Image.js";
 import { Loader as N } from "./Loader/Loader.js";
 import { ELoaderSize as O } from "./Loader/constants.js";
@@ -25,18 +25,18 @@ import { Vote as to } from "./Vote/Vote.js";
 import { EVoteSize as ao } from "./Vote/constants.js";
 import { SelectSearch as mo } from "./SelectSearch/SelectSearch.js";
 import { ESelectSearchSize as xo } from "./SelectSearch/constants.js";
-import { CheckboxMimir as So } from "./CheckboxMimir/CheckboxMimir.js";
-import { Tag as Eo } from "./Tag/Tag.js";
+import { CheckboxMimir as lo } from "./CheckboxMimir/CheckboxMimir.js";
+import { Tag as So } from "./Tag/Tag.js";
 import { ETagSize as uo, ETagType as co } from "./Tag/constants.js";
-import { Timer as go } from "./Timer/Timer.js";
-import { Accordion as zo } from "./Accordion/Accordion.js";
+import { Timer as Io } from "./Timer/Timer.js";
+import { Accordion as go } from "./Accordion/Accordion.js";
 import { EAccordionSize as ho } from "./Accordion/constants.js";
-import { AccordionItem as Bo } from "./Accordion/AccordionItem/AccordionItem.js";
-import { TabTrail as Lo } from "./TabTrail/TabTrail.js";
+import { AccordionItem as ko } from "./Accordion/AccordionItem/AccordionItem.js";
+import { TabTrail as bo } from "./TabTrail/TabTrail.js";
 import { ETabTrailSize as Mo } from "./TabTrail/constants.js";
-import { Pagination as Uo } from "./Pagination/Pagination.js";
-import { ToastProvider as yo } from "./Toasts/ToastsProvider.js";
-import { useToast as bo } from "./Toasts/hooks.js";
+import { Pagination as Ro } from "./Pagination/Pagination.js";
+import { ToastProvider as wo } from "./Toasts/ToastsProvider.js";
+import { useToast as Do } from "./Toasts/hooks.js";
 import { EToastPosition as Fo, EToastVariant as vo } from "./Toasts/constants.js";
 import { UploaderPhotos as No } from "./UploaderPhotos/UploaderPhotos.js";
 import { UploaderFiles as Oo } from "./UploaderFiles/UploaderFiles.js";
@@ -50,18 +50,18 @@ import { Chip as tr } from "./Chip/Chip.js";
 import { EChipSize as ar, EChipVariant as ir } from "./Chip/constants.js";
 import { UniversalUploader as fr } from "./UniversalUploader/UniversalUploader.js";
 import { EUploaderType as nr } from "./UniversalUploader/constants.js";
-import { InputRangeSlider as sr } from "./InputRangeSlider/InputRangeSlider.js";
-import { EInputRangeSliderBorderState as lr, EInputRangeSliderPositions as ur } from "./InputRangeSlider/constants.js";
+import { InputRangeSlider as Er } from "./InputRangeSlider/InputRangeSlider.js";
+import { EInputRangeSliderBorderState as sr, EInputRangeSliderPositions as ur } from "./InputRangeSlider/constants.js";
 import { GosZnak as cr } from "./GosZnak/GosZnak.js";
-import { EGosZnakSize as gr, EGosZnakType as Ir } from "./GosZnak/constants.js";
-import { Switcher as Vr } from "./Switcher/Switcher.js";
-import { ELabelPositions as kr } from "./Switcher/constants.js";
+import { EGosZnakSize as Ir, EGosZnakType as Vr } from "./GosZnak/constants.js";
+import { Switcher as zr } from "./Switcher/Switcher.js";
+import { ELabelPositions as Br } from "./Switcher/constants.js";
 import { TwinSwitcher as Pr } from "./TwinSwitcher/TwinSwitcher.js";
-import { SkeletonBrick as Ar } from "./Skeleton/SkeletonBrick/SkeletonBrick.js";
-import { SkeletonText as Rr } from "./Skeleton/SkeletonText/SkeletonText.js";
-import { SkeletonCircle as wr } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
-import { ESkeletonVariant as Cr } from "./Skeleton/constants.js";
-import { Avatar as Dr } from "./Avatar/Avatar.js";
+import { SkeletonBrick as Lr } from "./Skeleton/SkeletonBrick/SkeletonBrick.js";
+import { SkeletonText as Ar } from "./Skeleton/SkeletonText/SkeletonText.js";
+import { SkeletonCircle as Ur } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
+import { ESkeletonVariant as yr } from "./Skeleton/constants.js";
+import { Avatar as Cr } from "./Avatar/Avatar.js";
 import { EAvatarSize as vr } from "./Avatar/constants.js";
 import { MultiSelectSearch as Nr } from "./MultiSelectSearch/MultiSelectSearch.js";
 import { EMultiSelectSearchSize as Or } from "./MultiSelectSearch/constants.js";
@@ -70,16 +70,18 @@ import { EFileItemVariant as Jr } from "./ListFiles/constants.js";
 import { ListPhotos as Qr } from "./ListPhotos/ListPhotos.js";
 import { MessageShortReply as Xr } from "./MessageShortReply/MessageShortReply.js";
 import { EMessageShortReplyVariant as _r } from "./MessageShortReply/constants.js";
-import { default as oe } from "./Slider/Slider.js";
-import { EProgressBarPosition as ee } from "./Slider/constants.js";
+import { Table as oe } from "./Table/Table.js";
+import { ESortDirection as ee, ETableDisplayMode as te, ETableScrollButtonVariant as pe, ETableScrollIconName as ae, ETableVariant as ie } from "./Table/constants.js";
+import { default as fe } from "./Slider/Slider.js";
+import { EProgressBarPosition as ne } from "./Slider/constants.js";
 export {
-  zo as Accordion,
-  Bo as AccordionItem,
-  Dr as Avatar,
+  go as Accordion,
+  ko as AccordionItem,
+  Cr as Avatar,
   e as Button,
-  So as CheckboxMimir,
+  lo as CheckboxMimir,
   tr as Chip,
-  w as DatePicker,
+  U as DatePicker,
   J as Drawer,
   X as Dropdown,
   ho as EAccordionSize,
@@ -94,30 +96,35 @@ export {
   ir as EChipVariant,
   Q as EDrawerPosition,
   Jr as EFileItemVariant,
-  gr as EGosZnakSize,
-  Ir as EGosZnakType,
-  lr as EInputRangeSliderBorderState,
+  Ir as EGosZnakSize,
+  Vr as EGosZnakType,
+  sr as EInputRangeSliderBorderState,
   ur as EInputRangeSliderPositions,
-  E as EInputSize,
-  l as EInputStatus,
+  S as EInputSize,
+  s as EInputStatus,
   u as EInputVariant,
-  kr as ELabelPositions,
+  Br as ELabelPositions,
   Xo as ELinkSize,
   Yo as ELinkVariant,
   O as ELoaderSize,
-  D as EMergedButtonVariantRound,
+  C as EMergedButtonVariantRound,
   _r as EMessageShortReplyVariant,
   Or as EMultiSelectSearchSize,
   rr as ENotificationBadgeSize,
-  ee as EProgressBarPosition,
+  ne as EProgressBarPosition,
   xo as ESelectSearchSize,
-  Cr as ESkeletonVariant,
+  yr as ESkeletonVariant,
+  ee as ESortDirection,
   oo as EStepColor,
   ro as EStepsSize,
   Mo as ETabTrailSize,
+  te as ETableDisplayMode,
+  pe as ETableScrollButtonVariant,
+  ae as ETableScrollIconName,
+  ie as ETableVariant,
   uo as ETagSize,
   co as ETagType,
-  g as ETextAreaInputSize,
+  I as ETextAreaInputSize,
   Fo as EToastPosition,
   vo as EToastVariant,
   qo as EUploaderFilesVariant,
@@ -125,41 +132,42 @@ export {
   ao as EVoteSize,
   cr as GosZnak,
   v as Image,
-  S as Input,
-  z as InputPassword,
+  l as Input,
+  g as InputPassword,
   h as InputPhoneNumber,
-  sr as InputRangeSlider,
+  Er as InputRangeSlider,
   Qo as Link,
   qr as ListFiles,
   Qr as ListPhotos,
   N as Loader,
-  C as MergedButton,
+  y as MergedButton,
   Xr as MessageShortReply,
   Nr as MultiSelectSearch,
   $o as NotificationBadge,
-  A as OtpInput,
-  Uo as Pagination,
-  R as RadioGroup,
+  L as OtpInput,
+  Ro as Pagination,
+  A as RadioGroup,
   mo as SelectSearch,
-  Ar as SkeletonBrick,
-  wr as SkeletonCircle,
-  Rr as SkeletonText,
-  oe as Slider,
+  Lr as SkeletonBrick,
+  Ur as SkeletonCircle,
+  Ar as SkeletonText,
+  fe as Slider,
   q as SliderLazy,
   _ as Steps,
-  Vr as Switcher,
-  Lo as TabTrail,
-  Eo as Tag,
+  zr as Switcher,
+  bo as TabTrail,
+  oe as Table,
+  So as Tag,
   c as TextArea,
-  go as Timer,
-  yo as ToastProvider,
+  Io as Timer,
+  wo as ToastProvider,
   Pr as TwinSwitcher,
   fr as UniversalUploader,
   Jo as Uploader,
   Oo as UploaderFiles,
   No as UploaderPhotos,
   to as Vote,
-  B as getMaskedInputPhoneValue,
+  k as getMaskedInputPhoneValue,
   P as getUnmaskedInputValue,
-  bo as useToast
+  Do as useToast
 };