@max-ts/components 0.1.1 → 0.2.1

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

@@ -0,0 +1,159 @@
+import { j as e } from "../../../_virtual/jsx-runtime.mjs";
+import { useCallback as I } from "react";
+import { Checkbox as J } from "../../Checkbox/Checkbox.mjs";
+import { Tooltip as K } from "../../Tooltip/Tooltip.mjs";
+import { NestedChildren as M } from "./NestedChildren/NestedChildren.mjs";
+import { DISABLE_ROW_ATTR as Q } from "./constants.mjs";
+import { CellStyled as U, Wrapper as X, ContentWrapper as Y, CollapseCell as Z, CollapseButton as ee, ChevronIcon as oe, CheckboxCell as le } from "./styles.mjs";
+import { useLogic as re } from "./useLogic/useLogic.mjs";
+import { checkIsDisabled as se } from "./utils/checkIsDisabled/checkIsDisabled.mjs";
+const te = (p) => {
+  const {
+    isOpen: u,
+    isShowConnector: h,
+    childrenColumns: x,
+    rowId: S,
+    handleToggle: P,
+    checkboxProps: B,
+    rowProps: A,
+    tooltipProps: D,
+    nestedChildrenProps: y,
+    disabled: r,
+    isRenderCollapseButton: b
+  } = re(p), {
+    className: L,
+    row: T,
+    options: E,
+    variant: n,
+    isSelectable: s,
+    gridColumns: o,
+    isInitialExpanded: j,
+    expandedLevel: w,
+    level: t,
+    nestedChildren: N,
+    initialVisibleChildrenCount: i,
+    moreButtonColumnPosition: c,
+    isVisibleCollapseButton: V,
+    columns: a,
+    emptyCellValue: W,
+    selectedRows: f,
+    activeRowId: v,
+    keyId: d,
+    onSelectRow: R,
+    onRowClick: $,
+    // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
+    // Необходимы для NewDataGridInfinite
+    ...F
+  } = p, { isDisabledLastCell: O = !0, isNotSelectable: g } = E || {}, _ = () => !b && (!s || g) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    b && /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx(ee, { variant: "text", onClick: P, children: /* @__PURE__ */ e.jsx(oe, { $isActive: u }) }) }),
+    s && !g && /* @__PURE__ */ e.jsx(
+      le,
+      {
+        inert: r ? !0 : void 0,
+        onClick: (l) => l.stopPropagation(),
+        children: /* @__PURE__ */ e.jsx(J, { ...B })
+      }
+    )
+  ] }), q = I(() => {
+    const l = O ? void 0 : [a.length - 1];
+    return a?.map((C, m) => {
+      const G = `${S}-${m}`, H = se(
+        r,
+        l,
+        m
+      ), k = !m;
+      return /* @__PURE__ */ e.jsx(
+        U,
+        {
+          $level: k ? t : 0,
+          row: T,
+          cell: C,
+          emptyCellValue: W,
+          startAdornment: k && _(),
+          isDisabled: H
+        },
+        G
+      );
+    });
+  }, [u, a, r]), z = I(
+    ({
+      key: l,
+      ...C
+    }) => /* @__PURE__ */ e.jsx(
+      te,
+      {
+        keyId: d,
+        ...C,
+        variant: n,
+        isSelectable: s,
+        selectedRows: f,
+        gridColumns: o,
+        isInitialExpanded: j,
+        expandedLevel: w,
+        initialVisibleChildrenCount: i,
+        moreButtonColumnPosition: c,
+        isVisibleCollapseButton: V,
+        activeRowId: v,
+        columns: x,
+        onSelectRow: R,
+        onRowClick: $
+      },
+      l
+    ),
+    [
+      d,
+      n,
+      s,
+      f,
+      o,
+      j,
+      w,
+      i,
+      c,
+      v,
+      x,
+      R,
+      $
+    ]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    X,
+    {
+      $level: t,
+      $isShowConnector: h,
+      $gridColumns: o,
+      className: L,
+      ...F,
+      children: [
+        /* @__PURE__ */ e.jsx(K, { followCursor: !0, arrow: !1, ...D, children: /* @__PURE__ */ e.jsx(
+          Y,
+          {
+            $level: t,
+            $isShowConnector: h,
+            $gridColumns: o,
+            [Q]: r,
+            ...A,
+            children: q()
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(
+          M,
+          {
+            ...y,
+            data: N,
+            keyId: d,
+            level: t,
+            variant: n,
+            gridColumns: o,
+            initialVisibleChildrenCount: i,
+            moreButtonColumnPosition: c,
+            renderRow: z
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  te as Row
+};

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

@@ -0,0 +1,7 @@
+export type RowContextProps = {
+    isDisabled: boolean;
+    disabledReason?: string;
+    addDisabledRow: (disabledReason?: string) => void;
+    removeDisabledRow: () => void;
+};
+export declare const RowContext: import('react').Context<RowContextProps>;

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

@@ -0,0 +1,11 @@
+import { createContext as e } from "react";
+const t = e({
+  isDisabled: !1,
+  addDisabledRow: () => {
+  },
+  removeDisabledRow: () => {
+  }
+});
+export {
+  t as RowContext
+};

package/lib/components/DataGrid/Row/RowContext/RowProvider/RowProvider.d.ts

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

package/lib/components/DataGrid/Row/RowContext/RowProvider/RowProvider.mjs

@@ -0,0 +1,25 @@
+import { j as l } from "../../../../../_virtual/jsx-runtime.mjs";
+import { useState as s } from "react";
+import { RowContext as m } from "../RowContext.mjs";
+const c = ({ children: t }) => {
+  const [r, e] = s(!1), [a, o] = s(), i = (n) => {
+    e(!0), o(n);
+  }, d = () => {
+    e(!1), o(void 0);
+  };
+  return /* @__PURE__ */ l.jsx(
+    m.Provider,
+    {
+      value: {
+        isDisabled: r,
+        disabledReason: a,
+        addDisabledRow: i,
+        removeDisabledRow: d
+      },
+      children: t
+    }
+  );
+};
+export {
+  c as RowContextProvider
+};

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

@@ -0,0 +1,5 @@
+const _ = "data-row-disable", a = "astral-ui_datagrid_row_hidden";
+export {
+  _ as DISABLE_ROW_ATTR,
+  a as HIDDEN_CHILDREN_ROW_CLASSNAME
+};

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

@@ -0,0 +1,31 @@
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $isShowConnector: boolean;
+    $gridColumns: string;
+    $level: number;
+}, import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const ContentWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $isShowConnector: boolean;
+    $isHovered?: boolean;
+    $isSelected?: boolean;
+    $gridColumns: string;
+    $level: number;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CellStyled: import('@emotion/styled').StyledComponent<import('../Cell').CellProps<Record<string, unknown>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $level: number;
+}, {}, {}>;
+export declare const CheckboxCell: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CollapseCell: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CollapseButton: 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('../..').ButtonVariants}`;
+    loading?: boolean;
+    loadingIndicator?: import('react').ReactNode;
+    loadingPosition?: "start" | "end" | "center";
+    color?: `${import('../..').ButtonColors}`;
+    component?: import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    selected?: boolean;
+} & {
+    loading?: boolean;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const ChevronIcon: import('@emotion/styled').StyledComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $isActive?: boolean;
+}, {}, {}>;

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

@@ -0,0 +1,102 @@
+import { ChevronRight as i } from "lucide-react";
+import { IconButton as a } from "../../IconButton/IconButton.mjs";
+import { Cell as s } from "../Cell/Cell.mjs";
+import { ROOT_ACTION_CELL_WIDTH as r, TREE_LINE_WIDTH as n } from "../constants.mjs";
+import { styled as o } from "@mui/material";
+import { HIDDEN_CHILDREN_ROW_CLASSNAME as l } from "./constants.mjs";
+const m = o("li")`
+  position: relative;
+
+  &:not(:last-of-type)::before,
+  &.${l}::before {
+    content: '';
+
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    transform: ${({ $level: t }) => `translateX(calc(${r}px * ${t} - ${n}px))`};
+
+    display: ${({ $isShowConnector: t }) => t ? "block" : "none"};
+
+    width: 0;
+    height: 100%;
+
+    border-left: 1px solid ${({ theme: t }) => t.palette.grey[400]};
+  }
+`, u = o("div")`
+  position: relative;
+
+  display: grid;
+  grid-template-columns: ${({ $gridColumns: t }) => t};
+
+  background-color: ${({ theme: t, $isSelected: e }) => e ? t.palette.primary[100] : "transparent"};
+
+  transition: ${({ theme: t }) => t.transitions.create(["background-color"], {
+  duration: t.transitions.duration.short
+})};
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    transform: ${({ $level: t }) => `translateX(calc(${r}px * ${t} - ${n}px))`};
+
+    display: ${({ $isShowConnector: t }) => t ? "block" : "none"};
+
+    width: ${n}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};
+  }
+
+  &:hover {
+    cursor: ${({ $isHovered: t }) => t ? "pointer" : "default"};
+
+    background-color: ${({ theme: t, $isHovered: e }) => e ? t.palette.background.elementHover : "transparent"};
+  }
+`, h = o(s)`
+  margin-left: ${({ $level: t }) => `${t * r}px`};
+`, b = o("div")`
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  width: ${r}px;
+`, x = o("div")`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${r}px;
+`, y = o(a)`
+  width: 24px;
+  height: 24px;
+
+  color: inherit;
+
+  &:hover {
+    background-color: ${({ theme: t }) => t.palette.grey[300]};
+  }
+`, C = o(i, {
+  shouldForwardProp: (t) => t !== "$isActive"
+})`
+  transform: rotateZ(${({ $isActive: t }) => t ? 90 : 0}deg);
+
+  transition: ${({ theme: t }) => t.transitions.create("transform", {
+  easing: t.transitions.easing.sharp,
+  duration: t.transitions.duration.short
+})};
+`;
+export {
+  h as CellStyled,
+  b as CheckboxCell,
+  C as ChevronIcon,
+  y as CollapseButton,
+  x as CollapseCell,
+  u as ContentWrapper,
+  m as Wrapper
+};

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

@@ -0,0 +1,35 @@
+import { MouseEvent, SyntheticEvent } from 'react';
+import { CellValue } from '../../types';
+import { RowProps } from '../Row';
+type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
+export declare const useLogic: <TData extends Record<string, CellValue>>({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }: UseLogicParams<TData>) => {
+    isOpen: boolean;
+    isShowConnector: boolean;
+    childrenColumns: any[];
+    rowId: string;
+    disabled: boolean | undefined;
+    isRenderCollapseButton: boolean;
+    handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
+    rowProps: {
+        $isHovered: boolean;
+        $isSelected: boolean;
+        onClick: () => undefined;
+        onMouseMove: (event: MouseEvent<HTMLElement>) => void;
+    };
+    tooltipProps: {
+        open: boolean;
+        title: string | undefined;
+        onOpen: (event: SyntheticEvent<Element, Event>) => void;
+        onClose: () => void;
+    };
+    checkboxProps: {
+        checked: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (event: import('react').ChangeEvent<HTMLInputElement>) => void;
+    };
+    nestedChildrenProps: {
+        isOpen: boolean;
+        rowId: string;
+    };
+};
+export {};

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

@@ -0,0 +1,79 @@
+import { useContext as m, useState as W, useEffect as q, useMemo as z } from "react";
+import { DataGridContext as F } from "../../DataGridContext/DataGridContext.mjs";
+import "../../../../_virtual/jsx-runtime.mjs";
+import { Variant as J } from "../../enums.mjs";
+import { RowContext as K } from "../RowContext/RowContext.mjs";
+import { DISABLE_ROW_ATTR as f } from "../constants.mjs";
+import { mergeColumnsOptions as N } from "./utils/mergeColumnsOptions/mergeColumnsOptions.mjs";
+const oe = ({
+  keyId: r,
+  columns: a,
+  row: s,
+  nestedChildren: c,
+  level: u,
+  variant: b,
+  activeRowId: C,
+  options: n,
+  isInitialExpanded: h = !1,
+  expandedLevel: g,
+  isSelectable: D,
+  selectedRows: x,
+  onSelectRow: O,
+  onRowClick: d,
+  isVisibleCollapseButton: T
+}) => {
+  const R = h && u <= g - 1 && c?.length, { checkIsOpened: v, toggleOpenItems: p } = m(F), { isDisabled: B, disabledReason: M } = m(K), [P, i] = W(!1), e = s[r], {
+    isDisabled: k,
+    disabledReason: A
+  } = n || {}, t = B || k, l = v(e);
+  q(() => {
+    R && !l && p(e);
+  }, []);
+  const E = D && !!x?.find((o) => o[r] === e), S = Object.is(b, J.Tree), I = z(
+    () => N(a, n?.childrenColumns),
+    [a, n]
+  ), V = (o) => {
+    o.stopPropagation(), p(e);
+  }, w = (o) => {
+    o.target.getAttribute(f) === "true" && i(!0);
+  }, L = () => i(!1), _ = (o) => {
+    if (!t)
+      return;
+    o.target.getAttribute(f) === "true" || i(!1);
+  }, $ = () => {
+    t || d?.(s);
+  }, j = !!c?.length && T;
+  return {
+    isOpen: l,
+    isShowConnector: S,
+    childrenColumns: I,
+    rowId: e,
+    disabled: t,
+    isRenderCollapseButton: j,
+    handleToggle: V,
+    rowProps: {
+      $isHovered: !!(!t && d),
+      $isSelected: C === e,
+      onClick: $,
+      onMouseMove: _
+    },
+    tooltipProps: {
+      open: P,
+      title: t ? A || M : void 0,
+      onOpen: w,
+      onClose: L
+    },
+    checkboxProps: {
+      checked: E,
+      disabled: t,
+      onChange: O(s)
+    },
+    nestedChildrenProps: {
+      isOpen: l,
+      rowId: e
+    }
+  };
+};
+export {
+  oe as useLogic
+};

package/lib/components/DataGrid/Row/useLogic/utils/getColumnsMap/getColumnsMap.d.ts

@@ -0,0 +1,4 @@
+import { CellValue, DataGridRowOptionColumns } from '../../../../types';
+type GetColumnsMapResult<TData> = Record<keyof TData, Omit<TData, 'field'>> | object;
+export declare const getColumnsMap: <TData extends Record<string, CellValue>>(columns: DataGridRowOptionColumns<TData>[]) => GetColumnsMapResult<TData>;
+export {};

package/lib/components/DataGrid/Row/useLogic/utils/getColumnsMap/getColumnsMap.mjs

@@ -0,0 +1,8 @@
+const u = (t) => t.reduce((r, { field: e, ...n }) => e ? {
+  // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
+  ...r,
+  [e]: n
+} : r, {});
+export {
+  u as getColumnsMap
+};

package/lib/components/DataGrid/Row/useLogic/utils/mergeColumnsOptions/mergeColumnsOptions.d.ts

@@ -0,0 +1,2 @@
+import { CellValue, DataGridColumns, DataGridRowOptionColumns } from '../../../../types';
+export declare const mergeColumnsOptions: <TData extends Record<string, CellValue>>(columns: DataGridColumns<TData>[], childrenColumns: DataGridRowOptionColumns<TData>[] | undefined) => any[];

package/lib/components/DataGrid/Row/useLogic/utils/mergeColumnsOptions/mergeColumnsOptions.mjs

@@ -0,0 +1,14 @@
+import { getColumnsMap as n } from "../getColumnsMap/getColumnsMap.mjs";
+const f = (e, t) => {
+  if (!t)
+    return e;
+  const i = n(t);
+  return Object.keys(i).length ? e.map((r) => r.hasOwnProperty("field") ? {
+    ...r,
+    // @ts-ignore
+    ...i[r.field] || {}
+  } : r) : e;
+};
+export {
+  f as mergeColumnsOptions
+};

package/lib/components/DataGrid/Row/utils/checkIsDisabled/checkIsDisabled.mjs

@@ -0,0 +1,4 @@
+const u = (e, r, t) => e ? r ? !r.includes(t) : !0 : !1;
+export {
+  u as checkIsDisabled
+};

package/lib/components/DataGrid/constants.mjs

@@ -0,0 +1,9 @@
+const _ = 44, E = 32, T = 16, I = 10, L = 1, D = 2;
+export {
+  L as EXPANDED_LEVEL_BY_DEFAULT,
+  D as INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT,
+  I as MIN_DISPLAY_ROWS_BY_DEFAULT,
+  _ as MIN_ROW_HEIGHT,
+  E as ROOT_ACTION_CELL_WIDTH,
+  T as TREE_LINE_WIDTH
+};

package/lib/components/DataGrid/enums.mjs

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.ASC = "asc", r.DESC = "desc", r))(e || {}), s = /* @__PURE__ */ ((r) => (r.Tree = "tree", r.Subrows = "subrows", r))(s || {});
+export {
+  e as SortStates,
+  s as Variant
+};

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

@@ -0,0 +1,24 @@
+import { CellValue, DataGridColumns, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions } from './types';
+type DataType = {
+    id: string;
+    documentName?: string;
+    recipient?: string;
+    createDate: string;
+    actions?: object;
+};
+type TreeDataType = {
+    id: string;
+    documentName: string;
+    recipient: string;
+    createDate: string;
+    actions?: object;
+};
+export declare const makeRandomDate: () => string;
+export declare const makeColumns: <T extends DataType>(columnsTemplate: DataGridColumns<T>[], mergedColumns?: DataGridColumns<T>[]) => DataGridColumns<T>[];
+export declare const makeDataList: <TData extends Record<string, CellValue>>(dataObjTemplate: TData, options?: DataGridRowOptions<TData>) => DataGridRowWithOptions<TData>[];
+export declare const makeDataListWithTree: (length?: number, options?: {
+    isNotSelectable?: boolean;
+    childrenCount?: number;
+    childrenColumns?: DataGridRowOptionColumns<TreeDataType>[];
+}) => TreeDataType[];
+export {};

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

@@ -0,0 +1,5 @@
+export declare const Container: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $maxHeight?: number;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DataGridWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DisabledDataGridWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, {}, {}>;

package/lib/components/DataGrid/styles.mjs

@@ -0,0 +1,30 @@
+import { styled as i } from "@mui/material";
+const n = i("div", {
+  shouldForwardProp: (e) => e !== "$maxHeight"
+})`
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+  max-height: ${({ $maxHeight: e }) => e ? `${e}px` : "initial"};
+`, o = i("div")`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+`, d = i(o)`
+  pointer-events: none;
+
+  background: ${({ theme: e }) => e.palette.background.element};
+  mix-blend-mode: luminosity;
+`;
+export {
+  n as Container,
+  o as DataGridWrapper,
+  d as DisabledDataGridWrapper
+};