@max-ts/components 0.1.0 → 0.2.0

package/lib/components/DataGrid/HeadCell/HeadCell.mjs

@@ -0,0 +1,32 @@
+import { j as r } from "../../../_virtual/jsx-runtime.mjs";
+import { useMemo as f } from "react";
+import { SortStates as i } from "../enums.mjs";
+import { ChevronsUpDown as a, ChevronDown as u, ChevronUp as d } from "lucide-react";
+import { Wrapper as x, StyledTypography as j } from "./styles.mjs";
+import { useLogic as h } from "./useLogic/useLogic.mjs";
+const b = (e) => {
+  const { wrapperProps: l } = h(e), { startAdornment: s, field: n, isSortable: o, align: p, label: m, sorting: t } = e, c = f(() => {
+    if (!o)
+      return null;
+    if (t?.fieldId !== n)
+      return /* @__PURE__ */ r.jsx(a, {});
+    switch (t?.sort) {
+      case i.ASC:
+        return /* @__PURE__ */ r.jsx(d, { color: "primary" });
+      case i.DESC:
+        return /* @__PURE__ */ r.jsx(u, { color: "primary" });
+      default:
+        return /* @__PURE__ */ r.jsx(a, {});
+    }
+  }, [t, o, n]);
+  return /* @__PURE__ */ r.jsxs(x, { $align: p, $isSortable: o, ...l, children: [
+    s && s,
+    /* @__PURE__ */ r.jsxs(j, { variant: "caption", children: [
+      m,
+      c
+    ] })
+  ] });
+};
+export {
+  b as HeadCell
+};

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

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),i=require("../../Typography/Typography.cjs"),n=require("../utils/alignToJustifyContent/alignToJustifyContent.cjs"),o=t.styled("div",{shouldForwardProp:e=>!["$align","$isSortable","$hasStartAdornment"].includes(e.toString())})`
+  cursor: ${({$isSortable:e})=>e?"pointer":"initial"};
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: ${({$align:e})=>n.alignToJustifyContent(e)};
+
+  height: 40px;
+  padding: ${({theme:e,$hasStartAdornment:r})=>r?e.spacing(1,2,1,0):e.spacing(1,2)};
+
+  color: ${({theme:e})=>e.palette.grey[700]};
+`,a=t.styled(i.Typography)`
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;exports.StyledTypography=a;exports.Wrapper=o;

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

@@ -0,0 +1,22 @@
+import { AlignVariant } from '../types';
+type HeadCellProps = {
+    $align?: AlignVariant;
+    $isSortable?: 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 declare const StyledTypography: import('@emotion/styled').StyledComponent<{
+    ref?: import('react').Ref<HTMLSpanElement> | undefined;
+    children?: import('react').ReactNode;
+    align?: "inherit" | "left" | "center" | "right" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import('../../Typography').TypographyColor;
+    variant?: import('../../Typography').TypographyVariant;
+    colorIntensity?: import('../../Typography').Intensity;
+    component?: "symbol" | "object" | "style" | "clipPath" | "filter" | "mask" | "path" | import('react').ComponentType<any> | "map" | "search" | "big" | "link" | "small" | "sub" | "sup" | "marker" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+    isUpperCase?: boolean;
+} & import('react').HTMLAttributes<HTMLParagraphElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export {};

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

@@ -0,0 +1,30 @@
+import { styled as i } from "@mui/material";
+import { Typography as e } from "../../Typography/Typography.mjs";
+import { alignToJustifyContent as o } from "../utils/alignToJustifyContent/alignToJustifyContent.mjs";
+const a = i("div", {
+  shouldForwardProp: (t) => !["$align", "$isSortable", "$hasStartAdornment"].includes(t.toString())
+})`
+  cursor: ${({ $isSortable: t }) => t ? "pointer" : "initial"};
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $align: t }) => o(t)};
+
+  height: 40px;
+  padding: ${({ theme: t, $hasStartAdornment: r }) => r ? t.spacing(1, 2, 1, 0) : t.spacing(1, 2)};
+
+  color: ${({ theme: t }) => t.palette.grey[700]};
+`, l = i(e)`
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+export {
+  l as StyledTypography,
+  a as Wrapper
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=({field:t,isSortable:o,startAdornment:r,onSort:e})=>({wrapperProps:{$hasStartAdornment:!!r,onClick:()=>{t&&o&&e(t)}}});exports.useLogic=n;

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

@@ -0,0 +1,10 @@
+import { DataGridRow } from '../../types';
+import { HeadCellProps } from '../HeadCell';
+type UseLogicParams<TData = DataGridRow, TSortField extends keyof TData = keyof TData> = HeadCellProps<TData, TSortField>;
+export declare const useLogic: <TData, TSortField extends keyof TData>({ field, isSortable, startAdornment, onSort, }: UseLogicParams<TData, TSortField>) => {
+    wrapperProps: {
+        $hasStartAdornment: boolean;
+        onClick: () => void;
+    };
+};
+export {};

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

@@ -0,0 +1,16 @@
+const s = ({
+  field: t,
+  isSortable: n,
+  startAdornment: o,
+  onSort: r
+}) => ({
+  wrapperProps: {
+    $hasStartAdornment: !!o,
+    onClick: () => {
+      t && n && r(t);
+    }
+  }
+});
+export {
+  s as useLogic
+};

package/lib/components/DataGrid/Loader/Loader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),r=require("./styles.cjs"),l=({isLoading:s=!1,isDisabled:t=!1,isVisibleDivider:j=!0})=>e.j.jsxs(r.LoaderWrapper,{children:[(s||t)&&e.j.jsx(r.Backdrop,{}),s&&e.j.jsx(r.StyledLinearProgress,{}),!s&&j&&e.j.jsx(r.StyledDivider,{})]});exports.Loader=l;

package/lib/components/DataGrid/Loader/Loader.mjs

@@ -0,0 +1,14 @@
+import { j as r } from "../../../_virtual/jsx-runtime.mjs";
+import { LoaderWrapper as o, Backdrop as p, StyledLinearProgress as x, StyledDivider as a } from "./styles.mjs";
+const l = ({
+  isLoading: e = !1,
+  isDisabled: s = !1,
+  isVisibleDivider: t = !0
+}) => /* @__PURE__ */ r.jsxs(o, { children: [
+  (e || s) && /* @__PURE__ */ r.jsx(p, {}),
+  e && /* @__PURE__ */ r.jsx(x, {}),
+  !e && t && /* @__PURE__ */ r.jsx(a, {})
+] });
+export {
+  l as Loader
+};

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

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),t=require("../../Divider/Divider.cjs"),i=e.styled("div")`
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 0.3;
+  background-color: ${({theme:r})=>r.palette.background.element};
+`,o=e.styled(t.Divider)`
+  border-width: 1px;
+`,d=e.styled("div")`
+  height: 2px;
+`,s=e.styled(e.LinearProgress)`
+  height: 2px;
+`;exports.Backdrop=i;exports.LoaderWrapper=d;exports.StyledDivider=o;exports.StyledLinearProgress=s;

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

@@ -0,0 +1,4 @@
+export declare const Backdrop: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDivider: import('@emotion/styled').StyledComponent<import('../../Divider').DividerProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const LoaderWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledLinearProgress: import('@emotion/styled').StyledComponent<import('@mui/material').LinearProgressProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

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

@@ -0,0 +1,24 @@
+import { styled as o, LinearProgress as r } from "@mui/material";
+import { Divider as t } from "../../Divider/Divider.mjs";
+const p = o("div")`
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 0.3;
+  background-color: ${({ theme: e }) => e.palette.background.element};
+`, s = o(t)`
+  border-width: 1px;
+`, a = o("div")`
+  height: 2px;
+`, n = o(r)`
+  height: 2px;
+`;
+export {
+  p as Backdrop,
+  a as LoaderWrapper,
+  s as StyledDivider,
+  n as StyledLinearProgress
+};

package/lib/components/DataGrid/NoData/NoData.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../_virtual/jsx-runtime.cjs"),u=require("react"),a=require("../../Button/Button.cjs"),l=require("../../ConfigProvider/ConfigProvider.cjs");require("../../Placeholder/Image/Image.cjs");const s=require("../../Placeholder/Placeholder.cjs"),c=({title:r="Нет данных",imgAlt:o=r,action:e,size:i="small"})=>{const{imagesMap:{noDataImgSrc:n}}=u.useContext(l.ConfigContext);return t.j.jsx(s.Placeholder,{title:r,imgSrc:n,size:i,Actions:e?t.j.jsx(a.Button,{onClick:e.onClick,"aria-label":e.text,children:e.text}):void 0,imgAlt:o})};exports.NoData=c;

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

@@ -0,0 +1,34 @@
+import { PlaceholderSize } from '../../Placeholder';
+export type NoDataProps = {
+    /**
+     * Заголовок
+     * @default 'Нет\u00a0данных'
+     * Добавлен неразрывный пробел `\u00a0`,
+     * так как без изображения текст форматируется в 2 строки
+     */
+    title?: string;
+    /**
+     * альтернативный текст в случае, если изображение по какой-то причине не загрузилось
+     * @default эквивалентно title
+     */
+    imgAlt?: string;
+    /**
+     * Ширина иллюстрации в px (высота рассчитывается пропорционально ширине)
+     * @default '250'
+     * @deprecated
+     */
+    noDataIconWidth?: number;
+    /**
+     * Текст и обработчик для кнопки действия
+     */
+    action?: {
+        text: string;
+        onClick: () => void;
+    };
+    /**
+     * Задает общий размер компонента
+     * @default 'small'
+     */
+    size?: PlaceholderSize;
+};
+export declare const NoData: ({ title, imgAlt, action, size, }: NoDataProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DataGrid/NoData/NoData.mjs

@@ -0,0 +1,29 @@
+import { j as t } from "../../../_virtual/jsx-runtime.mjs";
+import { useContext as s } from "react";
+import { Button as n } from "../../Button/Button.mjs";
+import { ConfigContext as a } from "../../ConfigProvider/ConfigProvider.mjs";
+import "../../Placeholder/Image/Image.mjs";
+import { Placeholder as p } from "../../Placeholder/Placeholder.mjs";
+const j = ({
+  title: r = "Нет данных",
+  imgAlt: m = r,
+  action: o,
+  size: e = "small"
+}) => {
+  const {
+    imagesMap: { noDataImgSrc: i }
+  } = s(a);
+  return /* @__PURE__ */ t.jsx(
+    p,
+    {
+      title: r,
+      imgSrc: i,
+      size: e,
+      Actions: o ? /* @__PURE__ */ t.jsx(n, { onClick: o.onClick, "aria-label": o.text, children: o.text }) : void 0,
+      imgAlt: m
+    }
+  );
+};
+export {
+  j as NoData
+};

package/lib/components/DataGrid/Row/NestedChildren/NestedChildren.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs"),N=require("react"),m=require("../../../Collapse/Collapse.cjs"),q=require("../constants.cjs"),o=require("./styles.cjs"),R=require("./useLogic/useLogic.cjs"),p=N.memo(u=>{const{isShowAllChildren:d,isShowMoreButton:w,isShowConnector:r,nextLevel:l,initialVisibleChildren:x,otherChildren:S,handleToggleShowAllChildren:g}=R.useLogic(u),{isOpen:c,data:h,keyId:C,level:a,gridColumns:$,moreButtonColumnPosition:v,renderRow:j}=u;return!h||!h.length?null:e.j.jsx(m.Collapse,{in:c,unmountOnExit:!0,children:e.j.jsxs(o.NestedRows,{$level:a,$isShowConnector:r,children:[x.map(({children:t,options:i,...n})=>{const s=n[C];return j({key:s,row:n,options:i,nestedChildren:t,level:l})}),c&&e.j.jsxs(e.j.Fragment,{children:[e.j.jsx(m.Collapse,{in:d,component:"li",unmountOnExit:!0,children:e.j.jsx(o.NestedRows,{$level:a,$isShowConnector:r,children:S.map(({children:t,options:i,...n})=>{const s=n[C];return j({key:s,row:n,options:i,nestedChildren:t,level:l,className:q.HIDDEN_CHILDREN_ROW_CLASSNAME})})})}),w&&e.j.jsx(o.MoreButtonRow,{$level:l,$isShowConnector:r,$gridColumns:$,children:e.j.jsx(o.MoreButton,{$moreButtonColumnPosition:v,variant:"link",onClick:g,children:d?"Скрыть":"Показать все"})})]})]})})});exports.NestedChildren=p;

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

@@ -0,0 +1,55 @@
+import { ReactElement } from 'react';
+import { Variant } from '../../enums';
+import { CellValue, DataGridRowOptions } from '../../types';
+export type NestedChildrenProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Если true, список дочерних элементов раскрыт
+     */
+    isOpen: boolean;
+    /**
+     * Данные для отображения
+     */
+    data: Array<TData & {
+        options?: DataGridRowOptions<TData>;
+    }>;
+    /**
+     * Поле, которое будет использоваться в качестве ключа
+     */
+    keyId: keyof TData;
+    /**
+     * Идентификатор строки
+     */
+    rowId: string;
+    /**
+     * Вариант отображения вложенных элементов
+     */
+    variant: `${Variant}`;
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Уровень вложенности в дереве
+     */
+    level: number;
+    /**
+     * Количество отображаемых по умолчанию дочерних элементов
+     */
+    initialVisibleChildrenCount: number;
+    /**
+     * Номер колонки, в которой будет расположена кнопка "Показать все"
+     * Работает только для `variant="subrows"`
+     */
+    moreButtonColumnPosition: number;
+    renderRow: ({ key, level, row, nestedChildren, options, className, }: {
+        key: string;
+        row: TData;
+        level: number;
+        nestedChildren: Array<TData & {
+            options?: DataGridRowOptions<TData>;
+        }>;
+        options?: DataGridRowOptions<TData>;
+        className?: string;
+    }) => ReactElement;
+};
+export declare const NestedChildren: import('react').MemoExoticComponent<(<TData extends Record<string, CellValue>>(props: NestedChildrenProps<TData>) => import("react/jsx-runtime").JSX.Element | null)>;

package/lib/components/DataGrid/Row/NestedChildren/NestedChildren.mjs

@@ -0,0 +1,72 @@
+import { j as e } from "../../../../_virtual/jsx-runtime.mjs";
+import { memo as f } from "react";
+import { Collapse as a } from "../../../Collapse/Collapse.mjs";
+import { HIDDEN_CHILDREN_ROW_CLASSNAME as g } from "../constants.mjs";
+import { NestedRows as x, MoreButtonRow as E, MoreButton as N } from "./styles.mjs";
+import { useLogic as R } from "./useLogic/useLogic.mjs";
+const O = f(
+  (s) => {
+    const {
+      isShowAllChildren: m,
+      isShowMoreButton: w,
+      isShowConnector: o,
+      nextLevel: r,
+      initialVisibleChildren: p,
+      otherChildren: j,
+      handleToggleShowAllChildren: S
+    } = R(s), {
+      isOpen: d,
+      data: h,
+      keyId: u,
+      level: c,
+      gridColumns: v,
+      moreButtonColumnPosition: $,
+      renderRow: C
+    } = s;
+    return !h || !h.length ? null : /* @__PURE__ */ e.jsx(a, { in: d, unmountOnExit: !0, children: /* @__PURE__ */ e.jsxs(x, { $level: c, $isShowConnector: o, children: [
+      p.map(({ children: t, options: i, ...n }) => {
+        const l = n[u];
+        return C({
+          key: l,
+          row: n,
+          options: i,
+          nestedChildren: t,
+          level: r
+        });
+      }),
+      d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(a, { in: m, component: "li", unmountOnExit: !0, children: /* @__PURE__ */ e.jsx(x, { $level: c, $isShowConnector: o, children: j.map(({ children: t, options: i, ...n }) => {
+          const l = n[u];
+          return C({
+            key: l,
+            row: n,
+            options: i,
+            nestedChildren: t,
+            level: r,
+            className: g
+          });
+        }) }) }),
+        w && /* @__PURE__ */ e.jsx(
+          E,
+          {
+            $level: r,
+            $isShowConnector: o,
+            $gridColumns: v,
+            children: /* @__PURE__ */ e.jsx(
+              N,
+              {
+                $moreButtonColumnPosition: $,
+                variant: "link",
+                onClick: S,
+                children: m ? "Скрыть" : "Показать все"
+              }
+            )
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+export {
+  O as NestedChildren
+};

package/lib/components/DataGrid/Row/NestedChildren/styles.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),r=require("../../../Button/Button.cjs"),o=require("../../constants.cjs"),i=e.styled("ul",{shouldForwardProp:t=>!["$level","$isShowConnector"].includes(t.toString())})`
+  position: relative;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    transform: ${({$level:t})=>`translateX(calc(${o.ROOT_ACTION_CELL_WIDTH}px * ${t} - ${o.TREE_LINE_WIDTH}px))`};
+
+    display: ${({$isShowConnector:t})=>t?"block":"none"};
+
+    width: 0;
+    height: 100%;
+
+    border-left: 1px solid ${({theme:t})=>t.palette.grey[400]};
+  }
+`,n=e.styled("li",{shouldForwardProp:t=>!["$level","$isShowConnector","$gridColumns"].includes(t.toString())})`
+  position: relative;
+
+  display: grid;
+  grid-template-columns: ${({$gridColumns:t})=>t};
+
+  height: 36px;
+  margin-left: ${({$level:t})=>`${t*o.ROOT_ACTION_CELL_WIDTH}px`};
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: -${o.TREE_LINE_WIDTH}px;
+
+    display: ${({$isShowConnector:t})=>t?"block":"none"};
+
+    width: ${o.TREE_LINE_WIDTH}px;
+    height: 50%;
+
+    border-bottom: 1px solid ${({theme:t})=>t.palette.grey[400]};
+    border-left: 1px solid ${({theme:t})=>t.palette.grey[400]};
+    border-radius: 0 0 0 ${({theme:t})=>t.shape.small};
+  }
+`,l=e.styled(r.Button,{shouldForwardProp:t=>!["$moreButtonColumnPosition"].includes(t.toString())})`
+  grid-column: ${({$moreButtonColumnPosition:t})=>t};
+  justify-self: start;
+
+  margin: ${({theme:t})=>t.spacing(0,2)};
+`;exports.MoreButton=l;exports.MoreButtonRow=n;exports.NestedRows=i;

package/lib/components/DataGrid/Row/NestedChildren/styles.d.ts

@@ -0,0 +1,20 @@
+export declare const NestedRows: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $level: number;
+    $isShowConnector: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const MoreButtonRow: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $level: number;
+    $isShowConnector: boolean;
+    $gridColumns: string;
+}, import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const MoreButton: import('@emotion/styled').StyledComponent<Omit<import('../../../types').WithoutEmotionSpecific<import('@mui/material').ButtonProps<import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>>, "color" | "variant"> & {
+    variant?: `${import('../../../Button').ButtonVariants}`;
+    loading?: boolean;
+    loadingIndicator?: import('react').ReactNode;
+    loadingPosition?: "start" | "end" | "center";
+    color?: `${import('../../../Button').ButtonColors}`;
+    component?: import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    selected?: boolean;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $moreButtonColumnPosition: number;
+}, {}, {}>;

package/lib/components/DataGrid/Row/NestedChildren/styles.mjs

@@ -0,0 +1,68 @@
+import { styled as e } from "@mui/material";
+import { Button as i } from "../../../Button/Button.mjs";
+import { ROOT_ACTION_CELL_WIDTH as r, TREE_LINE_WIDTH as t } from "../../constants.mjs";
+const p = e("ul", {
+  shouldForwardProp: (o) => !["$level", "$isShowConnector"].includes(o.toString())
+})`
+  position: relative;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    transform: ${({ $level: o }) => `translateX(calc(${r}px * ${o} - ${t}px))`};
+
+    display: ${({ $isShowConnector: o }) => o ? "block" : "none"};
+
+    width: 0;
+    height: 100%;
+
+    border-left: 1px solid ${({ theme: o }) => o.palette.grey[400]};
+  }
+`, d = e("li", {
+  shouldForwardProp: (o) => !["$level", "$isShowConnector", "$gridColumns"].includes(o.toString())
+})`
+  position: relative;
+
+  display: grid;
+  grid-template-columns: ${({ $gridColumns: o }) => o};
+
+  height: 36px;
+  margin-left: ${({ $level: o }) => `${o * r}px`};
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: -${t}px;
+
+    display: ${({ $isShowConnector: o }) => o ? "block" : "none"};
+
+    width: ${t}px;
+    height: 50%;
+
+    border-bottom: 1px solid ${({ theme: o }) => o.palette.grey[400]};
+    border-left: 1px solid ${({ theme: o }) => o.palette.grey[400]};
+    border-radius: 0 0 0 ${({ theme: o }) => o.shape.small};
+  }
+`, a = e(i, {
+  shouldForwardProp: (o) => !["$moreButtonColumnPosition"].includes(o.toString())
+})`
+  grid-column: ${({ $moreButtonColumnPosition: o }) => o};
+  justify-self: start;
+
+  margin: ${({ theme: o }) => o.spacing(0, 2)};
+`;
+export {
+  a as MoreButton,
+  d as MoreButtonRow,
+  p as NestedRows
+};

package/lib/components/DataGrid/Row/NestedChildren/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),S=require("../../../DataGridContext/DataGridContext.cjs");require("../../../../../_virtual/jsx-runtime.cjs");const p=require("../../../enums.cjs"),q=({rowId:e,data:o,level:s,variant:i,initialVisibleChildrenCount:t})=>{const{checkIsMoreOpened:l,toggleOpenMoreItems:c}=C.useContext(S.DataGridContext),n=Object.is(i,p.Variant.Tree),h=n?s+1:0,a=o?.slice(0,t),r=o?.slice(t),u=l(e),g=!!r?.length;return{isShowAllChildren:u,isShowMoreButton:g,isShowConnector:n,initialVisibleChildren:a,otherChildren:r,nextLevel:h,handleToggleShowAllChildren:d=>{d.stopPropagation(),c(e)}}};exports.useLogic=q;

package/lib/components/DataGrid/Row/NestedChildren/useLogic/useLogic.d.ts

@@ -0,0 +1,18 @@
+import { MouseEvent } from 'react';
+import { CellValue } from '../../../types';
+import { NestedChildrenProps } from '../NestedChildren';
+type UseLogicParams<TData extends Record<string, CellValue>> = NestedChildrenProps<TData>;
+export declare const useLogic: <TData extends Record<string, CellValue>>({ rowId, data, level, variant, initialVisibleChildrenCount, }: UseLogicParams<TData>) => {
+    isShowAllChildren: boolean;
+    isShowMoreButton: boolean;
+    isShowConnector: boolean;
+    initialVisibleChildren: (TData & {
+        options?: import('../../../types').DataGridRowOptions<TData> | undefined;
+    })[];
+    otherChildren: (TData & {
+        options?: import('../../../types').DataGridRowOptions<TData> | undefined;
+    })[];
+    nextLevel: number;
+    handleToggleShowAllChildren: (event: MouseEvent<HTMLElement>) => void;
+};
+export {};

package/lib/components/DataGrid/Row/NestedChildren/useLogic/useLogic.mjs

@@ -0,0 +1,27 @@
+import { useContext as d } from "react";
+import { DataGridContext as C } from "../../../DataGridContext/DataGridContext.mjs";
+import "../../../../../_virtual/jsx-runtime.mjs";
+import { Variant as S } from "../../../enums.mjs";
+const A = ({
+  rowId: o,
+  data: e,
+  level: s,
+  variant: i,
+  initialVisibleChildrenCount: t
+}) => {
+  const { checkIsMoreOpened: l, toggleOpenMoreItems: c } = d(C), n = Object.is(i, S.Tree), h = n ? s + 1 : 0, a = e?.slice(0, t), r = e?.slice(t), g = l(o), p = !!r?.length;
+  return {
+    isShowAllChildren: g,
+    isShowMoreButton: p,
+    isShowConnector: n,
+    initialVisibleChildren: a,
+    otherChildren: r,
+    nextLevel: h,
+    handleToggleShowAllChildren: (m) => {
+      m.stopPropagation(), c(o);
+    }
+  };
+};
+export {
+  A as useLogic
+};

package/lib/components/DataGrid/Row/Row.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),I=require("react"),K=require("../../Checkbox/Checkbox.cjs"),Q=require("../../Tooltip/Tooltip.cjs"),U=require("./NestedChildren/NestedChildren.cjs"),X=require("./constants.cjs"),l=require("./styles.cjs"),Y=require("./useLogic/useLogic.cjs"),Z=require("./utils/checkIsDisabled/checkIsDisabled.cjs"),P=h=>{const{isOpen:p,isShowConnector:b,childrenColumns:x,rowId:y,handleToggle:B,checkboxProps:D,rowProps:T,tooltipProps:f,nestedChildrenProps:A,disabled:r,isRenderCollapseButton:m}=Y.useLogic(h),{className:L,row:N,options:O,variant:i,isSelectable:n,gridColumns:s,isInitialExpanded:w,expandedLevel:v,level:t,nestedChildren:V,initialVisibleChildrenCount:c,moreButtonColumnPosition:a,isVisibleCollapseButton:W,columns:d,emptyCellValue:E,selectedRows:g,activeRowId:k,keyId:u,onSelectRow:$,onRowClick:R,...F}=h,{isDisabledLastCell:_=!0,isNotSelectable:S}=O||{},M=()=>!m&&(!n||S)?null:e.j.jsxs(e.j.Fragment,{children:[m&&e.j.jsx(l.CollapseCell,{children:e.j.jsx(l.CollapseButton,{variant:"text",onClick:B,children:e.j.jsx(l.ChevronIcon,{$isActive:p})})}),n&&!S&&e.j.jsx(l.CheckboxCell,{inert:r?!0:void 0,onClick:o=>o.stopPropagation(),children:e.j.jsx(K.Checkbox,{...D})})]}),z=I.useCallback(()=>{const o=_?void 0:[d.length-1];return d?.map((C,j)=>{const H=`${y}-${j}`,J=Z.checkIsDisabled(r,o,j),q=!j;return e.j.jsx(l.CellStyled,{$level:q?t:0,row:N,cell:C,emptyCellValue:E,startAdornment:q&&M(),isDisabled:J},H)})},[p,d,r]),G=I.useCallback(({key:o,...C})=>e.j.jsx(P,{keyId:u,...C,variant:i,isSelectable:n,selectedRows:g,gridColumns:s,isInitialExpanded:w,expandedLevel:v,initialVisibleChildrenCount:c,moreButtonColumnPosition:a,isVisibleCollapseButton:W,activeRowId:k,columns:x,onSelectRow:$,onRowClick:R},o),[u,i,n,g,s,w,v,c,a,k,x,$,R]);return e.j.jsxs(l.Wrapper,{$level:t,$isShowConnector:b,$gridColumns:s,className:L,...F,children:[e.j.jsx(Q.Tooltip,{followCursor:!0,arrow:!1,...f,children:e.j.jsx(l.ContentWrapper,{$level:t,$isShowConnector:b,$gridColumns:s,[X.DISABLE_ROW_ATTR]:r,...T,children:z()})}),e.j.jsx(U.NestedChildren,{...A,data:V,keyId:u,level:t,variant:i,gridColumns:s,initialVisibleChildrenCount:c,moreButtonColumnPosition:a,renderRow:G})]})};exports.Row=P;