@astral/ui 4.76.3 → 4.77.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/components/Avatar/styles.js +5 -1
  2. package/components/DataGrid/Cell/Cell.d.ts +1 -41
  3. package/components/DataGrid/Cell/Cell.js +7 -26
  4. package/components/DataGrid/Cell/CellInner/CellInner.d.ts +2 -0
  5. package/components/DataGrid/Cell/CellInner/CellInner.js +31 -0
  6. package/components/DataGrid/Cell/CellInner/index.d.ts +2 -0
  7. package/components/DataGrid/Cell/CellInner/index.js +1 -0
  8. package/components/DataGrid/Cell/CellInner/styles.d.ts +20 -0
  9. package/components/DataGrid/Cell/CellInner/styles.js +49 -0
  10. package/components/DataGrid/Cell/CellInner/types.d.ts +48 -0
  11. package/components/DataGrid/Cell/CellInner/types.js +1 -0
  12. package/components/DataGrid/Cell/constants.d.ts +1 -0
  13. package/components/DataGrid/Cell/constants.js +1 -0
  14. package/components/DataGrid/Cell/index.d.ts +1 -0
  15. package/components/DataGrid/Cell/styles.d.ts +0 -15
  16. package/components/DataGrid/Cell/styles.js +0 -32
  17. package/components/DataGrid/Cell/types.d.ts +49 -0
  18. package/components/DataGrid/Cell/types.js +1 -0
  19. package/components/DataGrid/Cell/useLogic/useLogic.d.ts +3 -2
  20. package/components/DataGrid/Cell/useLogic/useLogic.js +8 -1
  21. package/components/DataGrid/Row/Row.js +3 -3
  22. package/components/DataGrid/Row/useLogic/useLogic.d.ts +1 -1
  23. package/components/DataGrid/Row/useLogic/useLogic.js +1 -5
  24. package/components/DataGrid/RowBase/GroupCell/GroupCell.d.ts +1 -1
  25. package/components/DataGrid/RowBase/GroupCell/GroupCell.js +2 -2
  26. package/components/DataGrid/RowBase/GroupCell/types.d.ts +3 -1
  27. package/components/DataGrid/RowBase/RowBase.js +3 -3
  28. package/components/DataGrid/RowBase/useLogic/useLogic.d.ts +2 -0
  29. package/components/DataGrid/RowBase/useLogic/useLogic.js +2 -0
  30. package/components/DataGrid/types.d.ts +2 -3
  31. package/components/DataGridCollapsibleRow/useLogic/useLogic.js +1 -0
  32. package/components/utils/redirectToLink/redirectToLink.d.ts +2 -2
  33. package/hook-form/FormPageLayoutBase/styles.js +6 -2
  34. package/node/components/Avatar/styles.js +27 -3
  35. package/node/components/DataGrid/Cell/Cell.d.ts +1 -41
  36. package/node/components/DataGrid/Cell/Cell.js +5 -24
  37. package/node/components/DataGrid/Cell/CellInner/CellInner.d.ts +2 -0
  38. package/node/components/DataGrid/Cell/CellInner/CellInner.js +35 -0
  39. package/node/components/DataGrid/Cell/CellInner/index.d.ts +2 -0
  40. package/node/components/DataGrid/Cell/CellInner/index.js +5 -0
  41. package/node/components/DataGrid/Cell/CellInner/styles.d.ts +20 -0
  42. package/node/components/DataGrid/Cell/CellInner/styles.js +52 -0
  43. package/node/components/DataGrid/Cell/CellInner/types.d.ts +48 -0
  44. package/node/components/DataGrid/Cell/CellInner/types.js +2 -0
  45. package/node/components/DataGrid/Cell/constants.d.ts +1 -0
  46. package/node/components/DataGrid/Cell/constants.js +1 -0
  47. package/node/components/DataGrid/Cell/index.d.ts +1 -0
  48. package/node/components/DataGrid/Cell/styles.d.ts +0 -15
  49. package/node/components/DataGrid/Cell/styles.js +1 -33
  50. package/node/components/DataGrid/Cell/types.d.ts +49 -0
  51. package/node/components/DataGrid/Cell/types.js +2 -0
  52. package/node/components/DataGrid/Cell/useLogic/useLogic.d.ts +3 -2
  53. package/node/components/DataGrid/Cell/useLogic/useLogic.js +8 -1
  54. package/node/components/DataGrid/Row/Row.js +3 -3
  55. package/node/components/DataGrid/Row/useLogic/useLogic.d.ts +1 -1
  56. package/node/components/DataGrid/Row/useLogic/useLogic.js +1 -5
  57. package/node/components/DataGrid/RowBase/GroupCell/GroupCell.d.ts +1 -1
  58. package/node/components/DataGrid/RowBase/GroupCell/GroupCell.js +2 -2
  59. package/node/components/DataGrid/RowBase/GroupCell/types.d.ts +3 -1
  60. package/node/components/DataGrid/RowBase/RowBase.js +3 -3
  61. package/node/components/DataGrid/RowBase/useLogic/useLogic.d.ts +2 -0
  62. package/node/components/DataGrid/RowBase/useLogic/useLogic.js +2 -0
  63. package/node/components/DataGrid/types.d.ts +2 -3
  64. package/node/components/DataGridCollapsibleRow/useLogic/useLogic.js +1 -0
  65. package/node/components/utils/redirectToLink/redirectToLink.d.ts +2 -2
  66. package/node/hook-form/FormPageLayoutBase/styles.js +6 -2
  67. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import Avatar from '@mui/material/Avatar';
1
+ import Avatar, { avatarClasses } from '@mui/material/Avatar';
2
2
  import { styled } from '../styled/styled';
3
3
  const getFont = (size) => {
4
4
  if (size === 'sm') {
@@ -14,4 +14,8 @@ export const StyledAvatar = styled(Avatar, {
14
14
  }) `
15
15
  font-size: ${({ theme, $size }) => theme.typography[getFont($size)].fontSize};
16
16
  font-weight: ${({ theme, $size }) => theme.typography[getFont($size)].fontWeight};
17
+
18
+ & .${avatarClasses.img} {
19
+ background-color: ${({ theme }) => theme.palette.grey[200]};
20
+ }
17
21
  `;
@@ -1,42 +1,2 @@
1
- import { type ReactNode } from 'react';
2
- import type { CellValue, DataGridSingleColumn } from '../types';
3
- export type CellProps<TData extends Record<string, CellValue>> = {
4
- /**
5
- * Название класса, применяется к корневому компоненту
6
- */
7
- className?: string;
8
- /**
9
- * Данные строки для отображения
10
- */
11
- row: TData;
12
- cell: DataGridSingleColumn<TData>;
13
- /**
14
- * Дополнительное содержимое ячейки, которое будет распложено справа
15
- */
16
- startAdornment?: ReactNode;
17
- /**
18
- * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
19
- */
20
- emptyCellValue?: ReactNode;
21
- /**
22
- * Если true, ячейка будет недоступна для взаимодействия
23
- */
24
- isDisabled?: boolean;
25
- /**
26
- * Скрытие персональных данных от инструментов мониторинга
27
- */
28
- isHidePersonalData?: boolean;
29
- /**
30
- * Скрытие ячейки на мобильных устройствах
31
- */
32
- isHideOnMobile?: boolean;
33
- /**
34
- * Флаг наличия вложенных элементов в строке
35
- */
36
- hasNestedChildren?: boolean;
37
- /**
38
- * Ссылка на корневой элемент строки
39
- */
40
- rootRowElement?: HTMLLIElement | null;
41
- };
1
+ import type { CellProps } from './types';
42
2
  export declare const Cell: <TData extends Record<string, unknown>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
@@ -1,13 +1,13 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createPortal } from 'react-dom';
3
- import { OverflowTypography } from '../../OverflowTypography';
4
3
  import { useHidePersonalData } from '../../personalDataSecurity';
5
4
  import { useViewportType } from '../../useViewportType';
6
5
  import { classNames } from '../../utils/classNames';
7
6
  import { cva } from '../../utils/cva';
8
7
  import { getInertProps } from '../../utils/getInertProps';
8
+ import { CellInner } from './CellInner';
9
9
  import { dataGridCellClassnames } from './constants';
10
- import { CellContent, ColumnLabel, Wrapper } from './styles';
10
+ import { Wrapper } from './styles';
11
11
  import { useLogic } from './useLogic';
12
12
  const cellCva = cva(dataGridCellClassnames.root, {
13
13
  variants: {
@@ -30,40 +30,21 @@ const cellCva = cva(dataGridCellClassnames.root, {
30
30
  },
31
31
  },
32
32
  });
33
- const cellContentCva = cva(dataGridCellClassnames.cellContent, {
34
- variants: {
35
- isActionColumn: {
36
- true: dataGridCellClassnames.actionColumn,
37
- },
38
- isTabularNums: {
39
- true: dataGridCellClassnames.tabularNums,
40
- },
41
- },
42
- });
43
- const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
44
- variants: {
45
- hidden: {
46
- true: dataGridCellClassnames.columnLabelHidden,
47
- },
48
- },
49
- });
50
33
  export const Cell = (props) => {
51
- const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = useLogic(props);
52
- const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, } = props;
34
+ const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, onCellClick, } = useLogic(props);
35
+ const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, href, target, } = props;
53
36
  const { renderCell, align = 'left' } = cell;
54
37
  const { isMobile } = useViewportType();
55
38
  const hidePersonalDataClassname = useHidePersonalData({
56
39
  isEnabled: isHidePersonalData === true,
57
40
  });
58
- const cellNode = (_jsxs(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
41
+ const cellNode = (_jsx(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
59
42
  isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
60
43
  isDisabled,
61
44
  withStartAdornment: hasStartAdornment,
62
45
  align,
63
46
  isActionColumn,
64
- })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
65
- hidden: hideTitleOnMobile || isActionColumn,
66
- }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
47
+ })), ...getInertProps(isDisabled), onClick: onCellClick, children: _jsx(CellInner, { row: row, label: label, hideTitleOnMobile: hideTitleOnMobile, isActionColumn: isActionColumn, isTabularNums: isTabularNums, startAdornment: startAdornment, renderCell: renderCell, formattedValue: formattedValue, hidePersonalDataClassname: hidePersonalDataClassname, href: href, target: target }) }));
67
48
  if (isActionColumn && isMobile && hasNestedChildren) {
68
49
  if (!rootRowElement) {
69
50
  return null;
@@ -0,0 +1,2 @@
1
+ import { type CellInnerProps } from './types';
2
+ export declare const CellInner: ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, href, target, }: CellInnerProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,31 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { OverflowTypography } from '../../../OverflowTypography';
3
+ import { cva } from '../../../utils/cva';
4
+ import { dataGridCellClassnames } from '../constants';
5
+ import { Anchor, CellContent, ColumnLabel } from './styles';
6
+ const cellContentCva = cva(dataGridCellClassnames.cellContent, {
7
+ variants: {
8
+ isActionColumn: {
9
+ true: dataGridCellClassnames.actionColumn,
10
+ },
11
+ isTabularNums: {
12
+ true: dataGridCellClassnames.tabularNums,
13
+ },
14
+ },
15
+ });
16
+ const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
17
+ variants: {
18
+ hidden: {
19
+ true: dataGridCellClassnames.columnLabelHidden,
20
+ },
21
+ },
22
+ });
23
+ export const CellInner = ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, href, target, }) => {
24
+ const content = (_jsxs(_Fragment, { children: [startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
25
+ hidden: hideTitleOnMobile || isActionColumn,
26
+ }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
27
+ if (href && !isActionColumn) {
28
+ return (_jsx(Anchor, { href: href, target: target, rel: "noopener noreferrer", children: content }));
29
+ }
30
+ return content;
31
+ };
@@ -0,0 +1,2 @@
1
+ export { CellInner } from './CellInner';
2
+ export type { CellInnerProps } from './types';
@@ -0,0 +1 @@
1
+ export { CellInner } from './CellInner';
@@ -0,0 +1,20 @@
1
+ /// <reference types="react" />
2
+ export declare const ColumnLabel: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
3
+ color?: import("../../../Typography").TypographyColor | undefined;
4
+ variant?: import("../../../Typography").TypographyVariant | undefined;
5
+ colorIntensity?: import("../../../Typography").Intensity | undefined;
6
+ component?: import("../../../Typography/types").ComponentProp | undefined;
7
+ isUpperCase?: boolean | undefined;
8
+ withoutCalt?: boolean | undefined;
9
+ isTabularNums?: boolean | undefined;
10
+ } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
11
+ theme?: import("@emotion/react").Theme | undefined;
12
+ }, {}, {}>;
13
+ export declare const CellContent: import("../../../styled").StyledComponent<{
14
+ theme?: import("@emotion/react").Theme | undefined;
15
+ as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
16
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
17
+ export declare const Anchor: import("../../../styled").StyledComponent<{
18
+ theme?: import("@emotion/react").Theme | undefined;
19
+ as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
20
+ }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
@@ -0,0 +1,49 @@
1
+ import { styled } from '../../../styled';
2
+ import { Typography } from '../../../Typography';
3
+ import { dataGridCellClassnames } from '../constants';
4
+ export const ColumnLabel = styled(Typography) `
5
+ display: none;
6
+
7
+ ${({ theme }) => theme.breakpoints.down('sm')} {
8
+ display: block;
9
+
10
+ &.${dataGridCellClassnames.columnLabelHidden} {
11
+ display: none;
12
+ }
13
+ }
14
+ `;
15
+ export const CellContent = styled.div `
16
+ min-width: 0;
17
+
18
+ &.${dataGridCellClassnames.tabularNums} {
19
+ font-feature-settings: "tnum" 1;
20
+ }
21
+
22
+ ${({ theme }) => theme.breakpoints.down('sm')} {
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: ${({ theme }) => theme.spacing(1)};
26
+ align-items: flex-start;
27
+
28
+ width: 100%;
29
+
30
+ &.${dataGridCellClassnames.actionColumn} {
31
+ align-items: flex-end;
32
+ }
33
+ }
34
+ `;
35
+ export const Anchor = styled.a `
36
+ display: flex;
37
+ align-items: inherit;
38
+ justify-content: inherit;
39
+
40
+ width: 100%;
41
+ height: 100%;
42
+
43
+ color: inherit;
44
+ text-decoration: none;
45
+
46
+ &:focus-visible {
47
+ outline: none;
48
+ }
49
+ `;
@@ -0,0 +1,48 @@
1
+ import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
2
+ import { type RenderCell } from '../../types';
3
+ export type CellInnerProps = {
4
+ /**
5
+ * Данные строки для отображения
6
+ */
7
+ row: Record<string, unknown>;
8
+ /**
9
+ * Название колонки
10
+ */
11
+ label?: string;
12
+ /**
13
+ * Скрытие заголовка колонки на мобильных устройствах
14
+ */
15
+ hideTitleOnMobile?: boolean;
16
+ /**
17
+ * Флаг колонки с действиями
18
+ */
19
+ isActionColumn?: boolean;
20
+ /**
21
+ * Моноширинный шрифт для чисел
22
+ */
23
+ isTabularNums?: boolean;
24
+ /**
25
+ * Дополнительное содержимое ячейки слева
26
+ */
27
+ startAdornment?: ReactNode;
28
+ /**
29
+ * Кастомное отображение ячейки
30
+ */
31
+ renderCell?: RenderCell<Record<string, unknown>>;
32
+ /**
33
+ * Отформатированное значение ячейки
34
+ */
35
+ formattedValue?: unknown;
36
+ /**
37
+ * Класс для скрытия персональных данных
38
+ */
39
+ hidePersonalDataClassname?: string;
40
+ /**
41
+ * URL ссылки. Если задан, содержимое оборачивается в ссылку
42
+ */
43
+ href?: string;
44
+ /**
45
+ * Целевая область для ссылки
46
+ */
47
+ target?: HTMLAttributeAnchorTarget;
48
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -12,4 +12,5 @@ export declare const dataGridCellClassnames: {
12
12
  alignRight: string;
13
13
  grouped: string;
14
14
  tabularNums: string;
15
+ anchorCell: string;
15
16
  };
@@ -13,4 +13,5 @@ export const dataGridCellClassnames = {
13
13
  alignRight: createUIKitClassname('data-grid__cell_align-right'),
14
14
  grouped: createUIKitClassname('data-grid__cell_grouped'),
15
15
  tabularNums: createUIKitClassname('data-grid__cell_tabular-nums'),
16
+ anchorCell: createUIKitClassname('data-grid__cell_anchor-cell'),
16
17
  };
@@ -1,2 +1,3 @@
1
1
  export * from './Cell';
2
2
  export { dataGridCellClassnames } from './constants';
3
+ export type { CellProps } from './types';
@@ -3,18 +3,3 @@ export declare const Wrapper: import("../../styled").StyledComponent<{
3
3
  theme?: import("@emotion/react").Theme | undefined;
4
4
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
5
5
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
- export declare const ColumnLabel: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
7
- color?: import("../../Typography").TypographyColor | undefined;
8
- variant?: import("../../Typography").TypographyVariant | undefined;
9
- colorIntensity?: import("../../Typography").Intensity | undefined;
10
- component?: import("../../Typography/types").ComponentProp | undefined;
11
- isUpperCase?: boolean | undefined;
12
- withoutCalt?: boolean | undefined;
13
- isTabularNums?: boolean | undefined;
14
- } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
15
- theme?: import("@emotion/react").Theme | undefined;
16
- }, {}, {}>;
17
- export declare const CellContent: import("../../styled").StyledComponent<{
18
- theme?: import("@emotion/react").Theme | undefined;
19
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
20
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,5 +1,4 @@
1
1
  import { styled } from '../../styled';
2
- import { Typography } from '../../Typography';
3
2
  import { MIN_ROW_HEIGHT } from '../constants';
4
3
  import { dataGridRowClassnames } from '../Row/constants';
5
4
  import { dataGridCellClassnames } from './constants';
@@ -69,34 +68,3 @@ export const Wrapper = styled.div `
69
68
  }
70
69
  }
71
70
  `;
72
- export const ColumnLabel = styled(Typography) `
73
- display: none;
74
-
75
- ${({ theme }) => theme.breakpoints.down('sm')} {
76
- display: block;
77
-
78
- &.${dataGridCellClassnames.columnLabelHidden} {
79
- display: none;
80
- }
81
- }
82
- `;
83
- export const CellContent = styled.div `
84
- min-width: 0;
85
-
86
- &.${dataGridCellClassnames.tabularNums} {
87
- font-feature-settings: "tnum" 1;
88
- }
89
-
90
- ${({ theme }) => theme.breakpoints.down('sm')} {
91
- display: flex;
92
- flex-direction: column;
93
- gap: ${({ theme }) => theme.spacing(1)};
94
- align-items: flex-start;
95
-
96
- width: 100%;
97
-
98
- &.${dataGridCellClassnames.actionColumn} {
99
- align-items: flex-end;
100
- }
101
- }
102
- `;
@@ -0,0 +1,49 @@
1
+ import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
2
+ import { type CellValue, type DataGridSingleColumn } from '../types';
3
+ export type CellProps<TData extends Record<string, CellValue>> = {
4
+ /**
5
+ * Название класса, применяется к корневому компоненту
6
+ */
7
+ className?: string;
8
+ /**
9
+ * Данные строки для отображения
10
+ */
11
+ row: TData;
12
+ cell: DataGridSingleColumn<TData>;
13
+ /**
14
+ * Дополнительное содержимое ячейки, которое будет распложено справа
15
+ */
16
+ startAdornment?: ReactNode;
17
+ /**
18
+ * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
19
+ */
20
+ emptyCellValue?: ReactNode;
21
+ /**
22
+ * Если true, ячейка будет недоступна для взаимодействия
23
+ */
24
+ isDisabled?: boolean;
25
+ /**
26
+ * Скрытие персональных данных от инструментов мониторинга
27
+ */
28
+ isHidePersonalData?: boolean;
29
+ /**
30
+ * Скрытие ячейки на мобильных устройствах
31
+ */
32
+ isHideOnMobile?: boolean;
33
+ /**
34
+ * Флаг наличия вложенных элементов в строке
35
+ */
36
+ hasNestedChildren?: boolean;
37
+ /**
38
+ * Ссылка на корневой элемент строки
39
+ */
40
+ rootRowElement?: HTMLLIElement | null;
41
+ /**
42
+ * URL ссылки
43
+ */
44
+ href?: string;
45
+ /**
46
+ * Целевая область для ссылки
47
+ */
48
+ target?: HTMLAttributeAnchorTarget;
49
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -1,12 +1,13 @@
1
1
  import type { CellValue } from '../../types';
2
- import type { CellProps } from '../Cell';
2
+ import type { CellProps } from '../types';
3
3
  type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
4
- export declare const useLogic: <TData extends Record<string, unknown>>({ row, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
4
+ export declare const useLogic: <TData extends Record<string, unknown>>({ row, href, target, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
5
5
  formattedValue: unknown;
6
6
  hasStartAdornment: boolean;
7
7
  isActionColumn: boolean;
8
8
  label: string | undefined;
9
9
  hideTitleOnMobile: boolean | undefined;
10
10
  isTabularNums: boolean | undefined;
11
+ onCellClick: () => void;
11
12
  };
12
13
  export {};
@@ -1,6 +1,7 @@
1
1
  import { useContext, useMemo } from 'react';
2
+ import { redirectToLink } from '../../../utils/redirectToLink';
2
3
  import { DataGridContext } from '../../DataGridContext';
3
- export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
4
+ export const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, }) => {
4
5
  const { isTabularNums: contextIsTabularNums } = useContext(DataGridContext);
5
6
  const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
6
7
  const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
@@ -18,6 +19,11 @@ export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
18
19
  }, [field, format, row, emptyCellValue]);
19
20
  const hasStartAdornment = Boolean(startAdornment);
20
21
  const isActionColumn = cell.field === 'actions';
22
+ const onCellClick = () => {
23
+ if (isActionColumn && href) {
24
+ return redirectToLink(href, target);
25
+ }
26
+ };
21
27
  return {
22
28
  formattedValue,
23
29
  hasStartAdornment,
@@ -25,5 +31,6 @@ export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
25
31
  label,
26
32
  hideTitleOnMobile,
27
33
  isTabularNums,
34
+ onCellClick,
28
35
  };
29
36
  };
@@ -62,7 +62,7 @@ const RowInner = (props) => {
62
62
  // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
63
63
  // Необходимы для DataGridInfinite
64
64
  ...selfProps } = props;
65
- const { isDisabledLastCell = true, isNotSelectable } = options || {};
65
+ const { isDisabledLastCell = true, isNotSelectable, href, target, } = options || {};
66
66
  const renderStartAdornment = () => {
67
67
  if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
68
68
  return null;
@@ -86,10 +86,10 @@ const RowInner = (props) => {
86
86
  }), children: label }), children.map((child, childIndex) => {
87
87
  const childCellId = `${cellId}-${childIndex}`;
88
88
  const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
89
- return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement }, childCellId));
89
+ return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
90
90
  })] }, cellId));
91
91
  }
92
- return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement }, cellId));
92
+ return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement, href: href, target: target }, cellId));
93
93
  });
94
94
  }, [
95
95
  row,
@@ -879,7 +879,7 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
879
879
  isActive: boolean;
880
880
  mobileDisplayVariant: "list" | "cards" | undefined;
881
881
  rowProps: {
882
- onClick: () => void;
882
+ onClick: () => undefined;
883
883
  onMouseMove: (event: MouseEvent<HTMLElement>) => void;
884
884
  };
885
885
  drawerProps: {
@@ -1,5 +1,4 @@
1
1
  import { useCallback, useContext, useMemo, useRef, useState, } from 'react';
2
- import { redirectToLink } from '../../../utils/redirectToLink';
3
2
  import { DataGridContext } from '../../DataGridContext';
4
3
  import { Variant } from '../../enums';
5
4
  import { DISABLE_ROW_ATTR } from '../constants';
@@ -31,16 +30,13 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
31
30
  };
32
31
  const [isVisibleTooltip, setVisibleTooltip] = useState(false);
33
32
  const rowId = row[keyId];
34
- const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
33
+ const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, } = options || {};
35
34
  const disabled = isDisabled || isExternalDisabled;
36
35
  const handleRowClick = () => {
37
36
  if (disabled) {
38
37
  handleOpenDrawer();
39
38
  return undefined;
40
39
  }
41
- if (href) {
42
- return redirectToLink(href, target);
43
- }
44
40
  onRowClick?.(row);
45
41
  };
46
42
  const isShowConnector = Object.is(variant, Variant.Tree);
@@ -1,2 +1,2 @@
1
1
  import { type GroupCellProps } from './types';
2
- export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, href, target, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -10,13 +10,13 @@ const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
10
10
  },
11
11
  },
12
12
  });
13
- export const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }) => {
13
+ export const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, href, target, }) => {
14
14
  const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
15
15
  return (_jsxs(_Fragment, { children: [_jsx(GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
16
16
  hidden: hideTitleOnMobile || isHideOnMobile,
17
17
  }), children: label }), children.map((child, childIndex) => {
18
18
  const childCellId = `${cellId}-${childIndex}`;
19
19
  const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
20
- return (_jsx(Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped }, childCellId));
20
+ return (_jsx(Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped, href: href, target: target }, childCellId));
21
21
  })] }));
22
22
  };
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
2
2
  import { type DataGridGroupColumn, type DataGridRowWithOptions } from '../../types';
3
3
  export type GroupCellProps = {
4
4
  cell: DataGridGroupColumn<Record<string, unknown>>;
@@ -8,4 +8,6 @@ export type GroupCellProps = {
8
8
  emptyCellValue?: ReactNode;
9
9
  isDisabled?: boolean;
10
10
  startAdornment?: ReactNode;
11
+ href?: string;
12
+ target?: HTMLAttributeAnchorTarget;
11
13
  };
@@ -33,7 +33,7 @@ const rootCva = cva(dataGridRowBaseClassnames.root, {
33
33
  },
34
34
  });
35
35
  export const RowBase = memo((props) => {
36
- const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = useLogic(props);
36
+ const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, href, target, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = useLogic(props);
37
37
  const renderStartAdornmentBase = () => {
38
38
  const adornment = renderStartAdornment?.(true);
39
39
  const shouldRenderCheckbox = isSelectable && !isNotSelectable;
@@ -53,9 +53,9 @@ export const RowBase = memo((props) => {
53
53
  const isFirstCell = globalIndex === 0;
54
54
  const isDisabledCell = checkIsDisabled(isDisabled, availableCellsByIndex, globalIndex);
55
55
  if (isGroupColumns(cell)) {
56
- return (_jsx(GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase() }, cellId));
56
+ return (_jsx(GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase(), href: href, target: target }, cellId));
57
57
  }
58
- return (_jsx(Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
58
+ return (_jsx(Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, href: href, target: target }, cellId));
59
59
  });
60
60
  }, [
61
61
  row,
@@ -28,6 +28,8 @@ export declare const useLogic: ({ className, row, keyId, onRowClick, columns, se
28
28
  columns: import("../..").DataGridColumns<Record<string, unknown>>[];
29
29
  emptyCellValue: import("react").ReactNode;
30
30
  rowRef: (element: HTMLElement | null) => void;
31
+ href: string | undefined;
32
+ target: import("react").HTMLAttributeAnchorTarget | undefined;
31
33
  onRowEnter: ((rowId: string) => void) | undefined;
32
34
  onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
33
35
  rowId: string;
@@ -72,6 +72,8 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
72
72
  columns,
73
73
  emptyCellValue,
74
74
  rowRef,
75
+ href,
76
+ target,
75
77
  onRowEnter,
76
78
  onRowLeave,
77
79
  rowId,
@@ -1,5 +1,4 @@
1
- import { type CSSProperties, type ReactNode } from 'react';
2
- import { type Target } from '../utils/redirectToLink';
1
+ import { type CSSProperties, type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
3
2
  import { type Variant } from './enums';
4
3
  import type { NoDataProps } from './NoData';
5
4
  export type AlignVariant = 'left' | 'center' | 'right';
@@ -338,7 +337,7 @@ export type DataGridRowOptions<TData extends Record<string, CellValue>> = {
338
337
  /**
339
338
  * Способ открытия ссылки
340
339
  */
341
- target?: Target;
340
+ target?: HTMLAttributeAnchorTarget;
342
341
  };
343
342
  export type DataGridRow = Record<string, CellValue>;
344
343
  export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
@@ -16,6 +16,7 @@ export const useLogic = ({ initialOpen, onOpen, onClose }) => {
16
16
  const [isOpen, setIsOpen] = useState(storedValue !== undefined ? storedValue : initialOpen);
17
17
  const handleToggle = useCallback((event) => {
18
18
  event?.stopPropagation();
19
+ event?.preventDefault();
19
20
  if (isOpen) {
20
21
  setIsOpen(false);
21
22
  setItem(storageKey, false);