@max-ts/components 0.1.1 → 0.2.0

package/lib/components/DataGrid/Cell/Cell.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { CellValue, DataGridColumns } from '../types';
+export type CellProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Данные строки для отображения
+     */
+    row: TData;
+    cell: DataGridColumns<TData>;
+    /**
+     * Дополнительное содержимое ячейки, которое будет распложено справа
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * Если true, ячейка будет недоступна для взаимодействия
+     */
+    isDisabled?: boolean;
+};
+export declare const Cell: <TData extends Record<string, CellValue>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DataGrid/Cell/Cell.mjs

@@ -0,0 +1,25 @@
+import { j as s } from "../../../_virtual/jsx-runtime.mjs";
+import { OverflowTypography as c } from "../../OverflowTypography/OverflowTypography.mjs";
+import { Wrapper as p } from "./styles.mjs";
+import { useLogic as f } from "./useLogic/useLogic.mjs";
+const j = (r) => {
+  const { formattedValue: n, hasStartAdornment: a } = f(r), { className: i, startAdornment: t, row: l, cell: m, isDisabled: e } = r, { renderCell: o, align: d = "left" } = m;
+  return /* @__PURE__ */ s.jsxs(
+    p,
+    {
+      $isDisabled: e,
+      $align: d,
+      $hasStartAdornment: a,
+      className: i,
+      inert: e ? !0 : void 0,
+      children: [
+        t && t,
+        o?.(l),
+        !o && /* @__PURE__ */ s.jsx(c, { rowsCount: 2, children: n })
+      ]
+    }
+  );
+};
+export {
+  j as Cell
+};

package/lib/components/DataGrid/Cell/styles.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@mui/material"),n=require("../constants.cjs"),r=require("../utils/alignToJustifyContent/alignToJustifyContent.cjs"),a=i.styled("div",{shouldForwardProp:t=>!["$align","$isDisabled","$hasStartAdornment"].includes(t.toString())})`
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: ${({$align:t})=>r.alignToJustifyContent(t)};
+
+  min-height: ${n.MIN_ROW_HEIGHT}px;
+  padding: ${({theme:t,$hasStartAdornment:e})=>e?t.spacing(1,2,1,0):t.spacing(1,2)};
+
+  opacity: ${({$isDisabled:t})=>t?.5:1};
+`;exports.Wrapper=a;

package/lib/components/DataGrid/Cell/styles.d.ts

@@ -0,0 +1,8 @@
+import { AlignVariant } from '../types';
+type HeadCellProps = {
+    $align?: AlignVariant;
+    $isDisabled?: boolean;
+    $hasStartAdornment?: boolean;
+};
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & HeadCellProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/DataGrid/Cell/styles.mjs

@@ -0,0 +1,19 @@
+import { styled as o } from "@mui/material";
+import { MIN_ROW_HEIGHT as n } from "../constants.mjs";
+import { alignToJustifyContent as r } from "../utils/alignToJustifyContent/alignToJustifyContent.mjs";
+const s = o("div", {
+  shouldForwardProp: (i) => !["$align", "$isDisabled", "$hasStartAdornment"].includes(i.toString())
+})`
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $align: i }) => r(i)};
+
+  min-height: ${n}px;
+  padding: ${({ theme: i, $hasStartAdornment: t }) => t ? i.spacing(1, 2, 1, 0) : i.spacing(1, 2)};
+
+  opacity: ${({ $isDisabled: i }) => i ? 0.5 : 1};
+`;
+export {
+  s as Wrapper
+};

package/lib/components/DataGrid/Cell/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),c=({row:t,cell:u,emptyCellValue:n,startAdornment:a})=>{const{format:e,field:r}=u,o=s=>!!s||s===0;return{formattedValue:i.useMemo(()=>e&&o(e(t))?e(t):r&&o(t[r])?t[r]:n,[r,e,t,n]),hasStartAdornment:!!a}};exports.useLogic=c;

package/lib/components/DataGrid/Cell/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+import { CellValue } from '../../types';
+import { CellProps } from '../Cell';
+type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
+export declare const useLogic: <TData extends Record<string, CellValue>>({ row, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
+    formattedValue: unknown;
+    hasStartAdornment: boolean;
+};
+export {};

package/lib/components/DataGrid/Cell/useLogic/useLogic.mjs

@@ -0,0 +1,13 @@
+import { useMemo as f } from "react";
+const d = ({
+  row: t,
+  cell: s,
+  emptyCellValue: e,
+  startAdornment: u
+}) => {
+  const { format: n, field: r } = s, o = (a) => !!a || a === 0;
+  return { formattedValue: f(() => n && o(n(t)) ? n(t) : r && o(t[r]) ? t[r] : e, [r, n, t, e]), hasStartAdornment: !!u };
+};
+export {
+  d as useLogic
+};

package/lib/components/DataGrid/DataGrid.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),l=require("react"),O=require("../ConfigProvider/ConfigProvider.cjs"),V=require("./Body/Body.cjs");require("./DataGridContext/DataGridContext.cjs");const U=require("./DataGridContext/DataGridProvider/DataGridProvider.cjs"),Y=require("./Head/Head.cjs"),k=require("./Loader/Loader.cjs"),F=require("./NoData/NoData.cjs"),o=require("./constants.cjs"),M=require("./enums.cjs"),i=require("./styles.cjs"),W=require("./useLogic/useLogic.cjs"),$=t=>{const{isDataGridDisabled:a,treeRenderConfig:u,headProps:c,bodyProps:D,loaderProps:C,renderRows:j}=W.useLogic(t),{emptySymbol:x}=l.useContext(O.ConfigContext),{columns:q,selectedRows:E=[],sorting:L,maxHeight:P,minDisplayRows:m=o.MIN_DISPLAY_ROWS_BY_DEFAULT,errorMsg:p,variant:_=M.Variant.Tree,footer:n,noDataPlaceholder:s,isLoading:r,isError:g,subrows:y,keyId:b,activeRowId:h,emptyCellValue:N=x,className:R,onRowClick:I,onSort:T,noDataOptions:d,onRetry:v}=t,{moreButtonColumnPosition:f=1,isVisibleCollapseButton:w=!0}=y||{},{isInitialExpanded:B=!1,expandedLevel:G=o.EXPANDED_LEVEL_BY_DEFAULT,initialVisibleChildrenCount:S=o.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT}=u||{},A=a?i.DisabledDataGridWrapper:i.DataGridWrapper,H=l.useCallback(()=>r?null:s||e.j.jsx(F.NoData,{...d}),[s,d,r]);return e.j.jsx(U.DataGridContextProvider,{children:e.j.jsxs(i.Container,{$maxHeight:P,className:R,children:[e.j.jsxs(A,{inert:a?!0:void 0,children:[e.j.jsx(Y.Head,{...c,sorting:L,onSort:T}),e.j.jsx(V.Body,{...D,activeRowId:h,keyId:b,selectedRows:E,minDisplayRows:m,rows:j,columns:q,variant:_,emptyCellValue:N,isInitialExpanded:B,expandedLevel:G,initialVisibleChildrenCount:S,moreButtonColumnPosition:f,isVisibleCollapseButton:w,isLoading:r,isError:g,errorMsg:p,noDataPlaceholder:H(),onRowClick:I,onRetry:v})]}),e.j.jsx(k.Loader,{...C}),n&&n]})})};exports.DataGrid=$;

package/lib/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,154 @@
+import { ReactNode } from 'react';
+import { NoDataProps } from './NoData';
+import { Variant } from './enums';
+import { CellValue, DataGridColumns, DataGridRow, DataGridRowWithOptions, DataGridSort } from './types';
+export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Массив данных для таблицы
+     */
+    rows: DataGridRowWithOptions<TData>[];
+    /**
+     * @example <DataGrid columns={[
+     *   {
+     *     field: 'test',
+     *     label: 'Тестовая колонка',
+     *     sortable: true,
+     *   }]} />
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+     */
+    activeRowId?: string;
+    /**
+     * Поле, которое будет использоваться в качестве ключа
+     */
+    keyId: keyof TData;
+    /**
+     * @example <DataGrid selectedRows={[{name: 'test'}]} />
+     * Массив выбранных строк
+     */
+    selectedRows?: Array<TData>;
+    /**
+     * @example <DataGrid sorting={{fieldId: 'test', sort: 'asc'}} />
+     * Параметры сортируемой колонки
+     */
+    sorting?: DataGridSort<TSortField>;
+    /**
+     * Компонент кастомного футера (например Pagination)
+     */
+    footer?: ReactNode;
+    /**
+     *  Используется для отображения placeholder при отсутствии данных в таблице
+     */
+    noDataPlaceholder?: ReactNode;
+    /**
+     * Максимальная высота для таблицы
+     */
+    maxHeight?: number;
+    /**
+     * Если true, показывается анимация загрузки
+     */
+    isLoading?: boolean;
+    /**
+     * Если true, таблица будет заблокирована для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Флаг состояния ошибки
+     */
+    isError?: boolean;
+    /**
+     * Текст ошибки
+     */
+    errorMsg?: string;
+    /**
+     * Вариант отображения вложенных элементов
+     * @default 'tree'
+     */
+    variant?: `${Variant}`;
+    /**
+     * Опции для отображения древовидных списков
+     * Применяется если variant="tree"
+     */
+    tree?: {
+        /**
+         * Если true, то дерево будет раскрыто по умолчанию
+         * @default 'false'
+         */
+        isInitialExpanded?: boolean;
+        /**
+         * Уровень раскрытия дерева по умолчанию, при `isInitialExpanded=true`
+         * @default '1'
+         */
+        expandedLevel?: number;
+        /**
+         * Количество отображаемых по умолчанию дочерних элементов
+         * @default '2'
+         */
+        initialVisibleChildrenCount?: number;
+    };
+    /**
+     * Опции для отображения вложенных списков
+     * Применяется если variant="subrows"
+     */
+    subrows?: {
+        /**
+         * Уровень раскрытия дочерних элементов по умолчанию, при `isInitialExpanded=true`
+         * @default '1'
+         */
+        expandedLevel?: number;
+        /**
+         * Количество отображаемых по умолчанию дочерних элементов
+         * @default '2'
+         */
+        initialVisibleChildrenCount?: number;
+        /**
+         * Номер колонки, в которой будет расположена кнопка "Показать все"
+         * @default 1
+         */
+        moreButtonColumnPosition?: number;
+        /**
+         * Если false, кнопка разворачивания элементов не показывается
+         * @default true
+         */
+        isVisibleCollapseButton?: boolean;
+    };
+    /**
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     * @default '—'
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * Используется для отображения переданного кол-ва строк при отсутствии данных
+     * @default 10
+     */
+    minDisplayRows?: number;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry: () => void;
+    /**
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * Обработчик выбора строки
+     */
+    onSelectRow?: (row: TData[]) => void;
+    /**
+     * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
+     * Обработчик сортировки
+     */
+    onSort?: (sorting: DataGridSort<TSortField> | undefined) => void;
+    /**
+     * Используется для кастомизации компонента, использующегося в сценарии отсутствия данных
+     */
+    noDataOptions?: NoDataProps;
+};
+export declare const DataGrid: <TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData>(props: DataGridProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DataGrid/DataGrid.mjs

@@ -0,0 +1,90 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { useContext as S, useCallback as V } from "react";
+import { ConfigContext as H } from "../ConfigProvider/ConfigProvider.mjs";
+import { Body as O } from "./Body/Body.mjs";
+import "./DataGridContext/DataGridContext.mjs";
+import { DataGridContextProvider as U } from "./DataGridContext/DataGridProvider/DataGridProvider.mjs";
+import { Head as Y } from "./Head/Head.mjs";
+import { Loader as k } from "./Loader/Loader.mjs";
+import { NoData as F } from "./NoData/NoData.mjs";
+import { MIN_DISPLAY_ROWS_BY_DEFAULT as W, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT as M, EXPANDED_LEVEL_BY_DEFAULT as X } from "./constants.mjs";
+import { Variant as $ } from "./enums.mjs";
+import { Container as q, DisabledDataGridWrapper as z, DataGridWrapper as J } from "./styles.mjs";
+import { useLogic as K } from "./useLogic/useLogic.mjs";
+const co = (e) => {
+  const {
+    isDataGridDisabled: t,
+    treeRenderConfig: s,
+    headProps: l,
+    bodyProps: m,
+    loaderProps: d,
+    renderRows: p
+  } = K(e), { emptySymbol: c } = S(H), {
+    columns: D,
+    selectedRows: f = [],
+    sorting: u,
+    maxHeight: x,
+    minDisplayRows: C = W,
+    errorMsg: E,
+    variant: _ = $.Tree,
+    footer: i,
+    noDataPlaceholder: a,
+    isLoading: r,
+    isError: L,
+    subrows: P,
+    keyId: h,
+    activeRowId: R,
+    emptyCellValue: b = c,
+    className: j,
+    onRowClick: I,
+    onSort: N,
+    noDataOptions: n,
+    onRetry: g
+  } = e, { moreButtonColumnPosition: y = 1, isVisibleCollapseButton: T = !0 } = P || {}, {
+    isInitialExpanded: w = !1,
+    expandedLevel: A = X,
+    initialVisibleChildrenCount: B = M
+  } = s || {}, v = t ? z : J, G = V(() => r ? null : a || /* @__PURE__ */ o.jsx(F, { ...n }), [a, n, r]);
+  return /* @__PURE__ */ o.jsx(U, { children: /* @__PURE__ */ o.jsxs(q, { $maxHeight: x, className: j, children: [
+    /* @__PURE__ */ o.jsxs(v, { inert: t ? !0 : void 0, children: [
+      /* @__PURE__ */ o.jsx(
+        Y,
+        {
+          ...l,
+          sorting: u,
+          onSort: N
+        }
+      ),
+      /* @__PURE__ */ o.jsx(
+        O,
+        {
+          ...m,
+          activeRowId: R,
+          keyId: h,
+          selectedRows: f,
+          minDisplayRows: C,
+          rows: p,
+          columns: D,
+          variant: _,
+          emptyCellValue: b,
+          isInitialExpanded: w,
+          expandedLevel: A,
+          initialVisibleChildrenCount: B,
+          moreButtonColumnPosition: y,
+          isVisibleCollapseButton: T,
+          isLoading: r,
+          isError: L,
+          errorMsg: E,
+          noDataPlaceholder: G(),
+          onRowClick: I,
+          onRetry: g
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o.jsx(k, { ...d }),
+    i && i
+  ] }) });
+};
+export {
+  co as DataGrid
+};

package/lib/components/DataGrid/DataGridContext/DataGridContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({checkIsOpened:()=>!1,checkIsMoreOpened:()=>!1,toggleOpenItems:()=>{},toggleOpenMoreItems:()=>{}});exports.DataGridContext=t;

package/lib/components/DataGrid/DataGridContext/DataGridContext.d.ts

@@ -0,0 +1,7 @@
+export type DataGridContextProps = {
+    checkIsOpened: (key: string) => boolean;
+    checkIsMoreOpened: (key: string) => boolean;
+    toggleOpenItems: (key: string) => void;
+    toggleOpenMoreItems: (key: string) => void;
+};
+export declare const DataGridContext: import('react').Context<DataGridContextProps>;

package/lib/components/DataGrid/DataGridContext/DataGridContext.mjs

@@ -0,0 +1,12 @@
+import { createContext as e } from "react";
+const o = e({
+  checkIsOpened: () => !1,
+  checkIsMoreOpened: () => !1,
+  toggleOpenItems: () => {
+  },
+  toggleOpenMoreItems: () => {
+  }
+});
+export {
+  o as DataGridContext
+};

package/lib/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../../../../_virtual/jsx-runtime.cjs"),O=require("react"),l=require("../DataGridContext.cjs"),s={isOpenedItems:!0,iOpenedMoreItems:!1},m=({children:d})=>{const[n,o]=O.useState({}),i=e=>!!n[e],u=e=>n[e]?n[e].iOpenedMoreItems:!1,a=e=>o(t=>{if(i(e)){const r={...t};return delete r[e],r}return{...t,[e]:s}}),c=e=>o(t=>{if(u(e)){const r={...t};return r[e]=s,r}return{...t,[e]:{...s,iOpenedMoreItems:!0}}});return p.j.jsx(l.DataGridContext.Provider,{value:{checkIsOpened:i,checkIsMoreOpened:u,toggleOpenItems:a,toggleOpenMoreItems:c},children:d})};exports.DataGridContextProvider=m;

package/lib/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type DataGridContextProviderProps = {
+    children: ReactNode;
+};
+export declare const DataGridContextProvider: ({ children, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.mjs

@@ -0,0 +1,41 @@
+import { j as c } from "../../../../_virtual/jsx-runtime.mjs";
+import { useState as a } from "react";
+import { DataGridContext as f } from "../DataGridContext.mjs";
+const o = {
+  isOpenedItems: !0,
+  iOpenedMoreItems: !1
+}, x = ({
+  children: p
+}) => {
+  const [n, s] = a({}), i = (e) => !!n[e], m = (e) => n[e] ? n[e].iOpenedMoreItems : !1, d = (e) => s((t) => {
+    if (i(e)) {
+      const r = { ...t };
+      return delete r[e], r;
+    }
+    return { ...t, [e]: o };
+  }), u = (e) => s((t) => {
+    if (m(e)) {
+      const r = { ...t };
+      return r[e] = o, r;
+    }
+    return {
+      ...t,
+      [e]: { ...o, iOpenedMoreItems: !0 }
+    };
+  });
+  return /* @__PURE__ */ c.jsx(
+    f.Provider,
+    {
+      value: {
+        checkIsOpened: i,
+        checkIsMoreOpened: m,
+        toggleOpenItems: d,
+        toggleOpenMoreItems: u
+      },
+      children: p
+    }
+  );
+};
+export {
+  x as DataGridContextProvider
+};

package/lib/components/DataGrid/Head/Head.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),b=require("react"),q=require("../../Checkbox/Checkbox.cjs"),S=require("../HeadCell/HeadCell.cjs"),c=require("./styles.cjs"),k=require("./useLogic/useLogic.cjs"),H=r=>{const{checkboxProps:n,handleSort:t}=k.useLogic(r),{columns:o,gridColumns:d,isSelectable:s,sorting:l,onSelectAllRows:u}=r,a=b.useMemo(()=>o.map(({field:C,label:i,sortable:j,align:m},x)=>{const g=!x,h=()=>!g||!s?null:e.j.jsx(c.CheckboxCell,{children:e.j.jsx(q.Checkbox,{...n,onChange:u})});return e.j.jsx(S.HeadCell,{sorting:l,field:C,label:i,isSortable:j,align:m,startAdornment:h(),onSort:t},i)}),[o,l,s,n,u,t]);return e.j.jsx(c.Wrapper,{$gridColumns:d,children:a})};exports.Head=H;

package/lib/components/DataGrid/Head/Head.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEvent } from 'react';
+import { CellValue, DataGridColumns, DataGridRow, DataGridSort } from '../types';
+export type HeadProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Если true, то будет отображаться чекбокс для выбора элемента
+     */
+    isSelectable: boolean;
+    /**
+     * Параметры сортируемой колонки
+     */
+    sorting?: DataGridSort<TSortField>;
+    /**
+     * Общее количество строк, доступных для выбора
+     */
+    rowsCount: number;
+    /**
+     * Количество строк, которые не выбраны
+     */
+    uncheckedRowsCount: number;
+    /**
+     * Обработчик выбора всех строк
+     */
+    onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик сортировки
+     */
+    onSort?: (sorting: DataGridSort<TSortField> | undefined) => void;
+};
+export declare const Head: <TData extends Record<string, CellValue>, TSortField extends keyof TData>(props: HeadProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DataGrid/Head/Head.mjs

@@ -0,0 +1,35 @@
+import { j as r } from "../../../_virtual/jsx-runtime.mjs";
+import { useMemo as h } from "react";
+import { Checkbox as j } from "../../Checkbox/Checkbox.mjs";
+import { HeadCell as g } from "../HeadCell/HeadCell.mjs";
+import { Wrapper as S, CheckboxCell as b } from "./styles.mjs";
+import { useLogic as k } from "./useLogic/useLogic.mjs";
+const L = (o) => {
+  const { checkboxProps: e, handleSort: t } = k(o), { columns: n, gridColumns: c, isSelectable: s, sorting: m, onSelectAllRows: l } = o, u = h(() => n.map(({ field: d, label: i, sortable: a, align: p }, x) => {
+    const C = !x, f = () => !C || !s ? null : /* @__PURE__ */ r.jsx(b, { children: /* @__PURE__ */ r.jsx(j, { ...e, onChange: l }) });
+    return /* @__PURE__ */ r.jsx(
+      g,
+      {
+        sorting: m,
+        field: d,
+        label: i,
+        isSortable: a,
+        align: p,
+        startAdornment: f(),
+        onSort: t
+      },
+      i
+    );
+  }), [
+    n,
+    m,
+    s,
+    e,
+    l,
+    t
+  ]);
+  return /* @__PURE__ */ r.jsx(S, { $gridColumns: c, children: u });
+};
+export {
+  L as Head
+};

package/lib/components/DataGrid/Head/styles.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),r=require("../constants.cjs"),i=t.styled("header",{shouldForwardProp:e=>!["$gridColumns"].includes(e.toString())})`
+  display: grid;
+  grid-template-columns: ${({$gridColumns:e})=>e};
+
+  border-bottom: 2px solid ${({theme:e})=>e.palette.divider};
+`,l=t.styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${r.ROOT_ACTION_CELL_WIDTH}px;
+`;exports.CheckboxCell=l;exports.Wrapper=i;

package/lib/components/DataGrid/Head/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $gridColumns: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const CheckboxCell: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataGrid/Head/styles.mjs

@@ -0,0 +1,20 @@
+import { styled as t } from "@mui/material";
+import { ROOT_ACTION_CELL_WIDTH as r } from "../constants.mjs";
+const d = t("header", {
+  shouldForwardProp: (e) => !["$gridColumns"].includes(e.toString())
+})`
+  display: grid;
+  grid-template-columns: ${({ $gridColumns: e }) => e};
+
+  border-bottom: 2px solid ${({ theme: e }) => e.palette.divider};
+`, l = t("div")`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${r}px;
+`;
+export {
+  l as CheckboxCell,
+  d as Wrapper
+};

package/lib/components/DataGrid/Head/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),s=require("../../enums.cjs"),m=({rowsCount:e,sorting:i,uncheckedRowsCount:t,onSort:r})=>{const l=d.useMemo(()=>!t&&e>0,[t,e]),c=d.useMemo(()=>t>0&&t<e,[t,e]),b=!e;return{handleSort:d.useCallback(a=>{if(!r)return;const S=i?.fieldId===a;if(S&&i?.sort===s.SortStates.ASC)return r({fieldId:a,sort:s.SortStates.DESC});if(S&&i?.sort===s.SortStates.DESC)return r(void 0);r({fieldId:a,sort:s.SortStates.ASC})},[i,r]),checkboxProps:{checked:l,disabled:b,indeterminate:c}}};exports.useLogic=m;

package/lib/components/DataGrid/Head/useLogic/useLogic.d.ts

@@ -0,0 +1,12 @@
+import { CellValue, DataGridRow } from '../../types';
+import { HeadProps } from '../Head';
+type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = HeadProps<TData, TSortField>;
+export declare const useLogic: <TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData>({ rowsCount, sorting, uncheckedRowsCount, onSort, }: UseLogicParams<TData, TSortField>) => {
+    handleSort: (field: TSortField) => void;
+    checkboxProps: {
+        checked: boolean;
+        disabled: boolean;
+        indeterminate: boolean;
+    };
+};
+export {};

package/lib/components/DataGrid/Head/useLogic/useLogic.mjs

@@ -0,0 +1,39 @@
+import { useMemo as l, useCallback as b } from "react";
+import { SortStates as d } from "../../enums.mjs";
+const D = ({
+  rowsCount: e,
+  sorting: t,
+  uncheckedRowsCount: i,
+  onSort: r
+}) => {
+  const m = l(
+    () => !i && e > 0,
+    [i, e]
+  ), f = l(
+    () => i > 0 && i < e,
+    [i, e]
+  ), c = !e;
+  return {
+    handleSort: b(
+      (s) => {
+        if (!r)
+          return;
+        const a = t?.fieldId === s;
+        if (a && t?.sort === d.ASC)
+          return r({ fieldId: s, sort: d.DESC });
+        if (a && t?.sort === d.DESC)
+          return r(void 0);
+        r({ fieldId: s, sort: d.ASC });
+      },
+      [t, r]
+    ),
+    checkboxProps: {
+      checked: m,
+      disabled: c,
+      indeterminate: f
+    }
+  };
+};
+export {
+  D as useLogic
+};

package/lib/components/DataGrid/HeadCell/HeadCell.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),p=require("react"),l=require("../enums.cjs"),r=require("lucide-react"),a=require("./styles.cjs"),S=require("./useLogic/useLogic.cjs"),g=o=>{const{wrapperProps:u}=S.useLogic(o),{startAdornment:n,field:i,isSortable:t,align:c,label:j,sorting:s}=o,d=p.useMemo(()=>{if(!t)return null;if(s?.fieldId!==i)return e.j.jsx(r.ChevronsUpDown,{});switch(s?.sort){case l.SortStates.ASC:return e.j.jsx(r.ChevronUp,{color:"primary"});case l.SortStates.DESC:return e.j.jsx(r.ChevronDown,{color:"primary"});default:return e.j.jsx(r.ChevronsUpDown,{})}},[s,t,i]);return e.j.jsxs(a.Wrapper,{$align:c,$isSortable:t,...u,children:[n&&n,e.j.jsxs(a.StyledTypography,{variant:"caption",children:[j,d]})]})};exports.HeadCell=g;

package/lib/components/DataGrid/HeadCell/HeadCell.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { AlignVariant, DataGridRow, DataGridSort } from '../types';
+export type HeadCellProps<TData = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    onSort: (field: TSortField) => void;
+    sorting?: DataGridSort<TSortField>;
+    label?: string;
+    isSortable?: boolean;
+    /**
+     * Выравнивание содержимого ячейки по горизонтали
+     */
+    align?: AlignVariant;
+    field?: keyof TData;
+    /**
+     * Дополнительное содержимое ячейки, которое будет распложено справа
+     */
+    startAdornment?: ReactNode;
+};
+export declare const HeadCell: <TData, TSortField extends keyof TData>(props: HeadCellProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;