@moderneinc/neo-styled-components 5.0.0-next.bd2a49 → 5.0.0-next.e88b47
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.
- package/dist/DataGrid/DataGrid.d.ts +1 -1
- package/dist/DataGrid/DataGrid.styles.d.ts +3 -0
- package/dist/DataGridCell/DataGridCell.d.ts +0 -16
- package/dist/DataGridHeaderCell/DataGridHeaderCell.d.ts +0 -37
- package/dist/NavigationAvatar/NavigationAvatar.d.ts +2 -2
- package/dist/NeoActionsCell/NeoActionsCell.d.ts +9 -0
- package/dist/NeoAvatarCell/NeoAvatarCell.d.ts +27 -0
- package/dist/NeoIconCell/NeoIconCell.d.ts +14 -0
- package/dist/NeoLogoCell/NeoLogoCell.d.ts +24 -0
- package/dist/NeoProgressCell/NeoProgressCell.d.ts +21 -0
- package/dist/NeoStatusCell/NeoStatusCell.d.ts +30 -0
- package/dist/index.d.ts +132 -42
- package/dist/index.esm.js +328 -150
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +333 -148
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -38,7 +38,7 @@ export interface NeoDataGridProps extends Omit<DataGridProProps, 'slots'> {
|
|
|
38
38
|
* - `size` → Row heights (compact: 42px, standard: 48px, comfortable: 56px) and header heights (compact: 38px, standard: 44px, comfortable: 52px)
|
|
39
39
|
*
|
|
40
40
|
* Design tokens used:
|
|
41
|
-
* - Colors: semanticColors.border.primary, semanticColors.
|
|
41
|
+
* - Colors: semanticColors.border.primary, semanticColors.surfaces.dataGrid.*
|
|
42
42
|
* - Typography: typography.fontFamily.body, typography.fontSize.sm
|
|
43
43
|
* - Spacing: spacing.spacing_*
|
|
44
44
|
*
|
|
@@ -45,22 +45,6 @@ export declare const NeoDataGridCellContent: {
|
|
|
45
45
|
({ children, ...props }: NeoDataGridCellContentProps): import("react/jsx-runtime").JSX.Element;
|
|
46
46
|
displayName: string;
|
|
47
47
|
};
|
|
48
|
-
/**
|
|
49
|
-
* Utility function to get DataGrid sx styles for consistent cell appearance
|
|
50
|
-
*
|
|
51
|
-
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41631
|
|
52
|
-
*
|
|
53
|
-
* Apply this to DataGrid's `sx` prop to ensure cells are properly aligned and styled.
|
|
54
|
-
*
|
|
55
|
-
* @param size - Row size variant (affects row height)
|
|
56
|
-
* @returns SxProps for DataGrid
|
|
57
|
-
*
|
|
58
|
-
* @example
|
|
59
|
-
* <DataGrid
|
|
60
|
-
* rows={rows}
|
|
61
|
-
* columns={columns}
|
|
62
|
-
* />
|
|
63
|
-
*/
|
|
64
48
|
/**
|
|
65
49
|
* Row height configuration for DataGrid size variants (from Figma specs)
|
|
66
50
|
* - compact: 42px
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { SxProps, Theme } from '@mui/material/styles';
|
|
2
1
|
/**
|
|
3
2
|
* Sort icon components for MUI DataGrid slots
|
|
4
3
|
*
|
|
@@ -7,39 +6,3 @@ import type { SxProps, Theme } from '@mui/material/styles';
|
|
|
7
6
|
export declare function SortedDescendingIcon(): import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export declare function SortedAscendingIcon(): import("react/jsx-runtime").JSX.Element;
|
|
9
8
|
export declare function UnsortedIcon(): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
/**
|
|
11
|
-
* Utility function to get DataGrid sx styles for header cells
|
|
12
|
-
*
|
|
13
|
-
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41618
|
|
14
|
-
*
|
|
15
|
-
* Figma prop mappings:
|
|
16
|
-
* - `size` → `size`: Figma "condensed" → MUI 'compact', Figma "default" → MUI 'standard', Figma "relaxed" → MUI 'comfortable'
|
|
17
|
-
*
|
|
18
|
-
* Design tokens used:
|
|
19
|
-
* - Background: colors.grey[50] (#f9fafb)
|
|
20
|
-
* - Border: semanticColors.border.primary
|
|
21
|
-
* - Padding: 12px vertical, 24px horizontal
|
|
22
|
-
* - Gap: 12px
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* @param size - Header row size variant (affects header cell height)
|
|
26
|
-
* @returns SxProps for DataGrid header cells
|
|
27
|
-
*
|
|
28
|
-
* @example
|
|
29
|
-
* import { getDataGridHeaderStyles, SortedDescendingIcon, SortedAscendingIcon, UnsortedIcon } from './DataGridHeaderCell'
|
|
30
|
-
*
|
|
31
|
-
* <DataGrid
|
|
32
|
-
* columnHeaderHeight={38} // for compact (Figma: condensed)
|
|
33
|
-
* sx={{
|
|
34
|
-
* ...getDataGridHeaderStyles(),
|
|
35
|
-
* }}
|
|
36
|
-
* slots={{
|
|
37
|
-
* columnSortedDescendingIcon: SortedDescendingIcon,
|
|
38
|
-
* columnSortedAscendingIcon: SortedAscendingIcon,
|
|
39
|
-
* columnUnsortedIcon: UnsortedIcon,
|
|
40
|
-
* }}
|
|
41
|
-
* rows={rows}
|
|
42
|
-
* columns={columns}
|
|
43
|
-
* />
|
|
44
|
-
*/
|
|
45
|
-
export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
|
|
@@ -4,8 +4,8 @@ export interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 's
|
|
|
4
4
|
/**
|
|
5
5
|
* NeoNavigationAvatar - Compact avatar for navigation contexts
|
|
6
6
|
*
|
|
7
|
-
* Wraps NeoGeneralAvatar (size="small") in a
|
|
8
|
-
* providing
|
|
7
|
+
* Wraps NeoGeneralAvatar (size="small") in a 40px container,
|
|
8
|
+
* providing an interactive area for navigation UI.
|
|
9
9
|
*
|
|
10
10
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
|
|
11
11
|
*/
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { GridRenderCellParams } from '@mui/x-data-grid';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface NeoActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
|
|
4
|
+
api?: GridRenderCellParams['api'];
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
|
|
7
|
+
suppressChildrenValidation?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare function NeoActionsCell(props: NeoActionsCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
type NeoAvatarCellBase = {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
};
|
|
4
|
+
type NeoAvatarCellEmpty = NeoAvatarCellBase & {
|
|
5
|
+
empty: true;
|
|
6
|
+
name?: never;
|
|
7
|
+
src?: never;
|
|
8
|
+
colorIndex?: never;
|
|
9
|
+
label?: never;
|
|
10
|
+
};
|
|
11
|
+
type NeoAvatarCellContent = NeoAvatarCellBase & {
|
|
12
|
+
empty?: false;
|
|
13
|
+
name?: string;
|
|
14
|
+
src?: string;
|
|
15
|
+
colorIndex?: number;
|
|
16
|
+
label?: string;
|
|
17
|
+
};
|
|
18
|
+
export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
|
|
19
|
+
/**
|
|
20
|
+
* NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
|
|
21
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
|
|
22
|
+
*/
|
|
23
|
+
export declare const NeoAvatarCell: {
|
|
24
|
+
({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface NeoIconCellProps {
|
|
3
|
+
icon?: ReactNode;
|
|
4
|
+
ariaLabel?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* NeoIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
|
|
9
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-9345
|
|
10
|
+
*/
|
|
11
|
+
export declare const NeoIconCell: {
|
|
12
|
+
({ icon, ariaLabel, disabled }: NeoIconCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
type NeoLogoCellNoSrc = {
|
|
2
|
+
src?: undefined;
|
|
3
|
+
alt?: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
type NeoLogoCellWithSrc = {
|
|
7
|
+
src: string;
|
|
8
|
+
alt: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type NeoLogoCellProps = NeoLogoCellNoSrc | NeoLogoCellWithSrc;
|
|
12
|
+
/**
|
|
13
|
+
* NeoLogoCell — DataGrid cell displaying a raster or SVG logo image.
|
|
14
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13278-9558
|
|
15
|
+
*
|
|
16
|
+
* Kept separate from NeoIconCell to match Neo's Icon/Logo component split:
|
|
17
|
+
* - NeoIconCell: MUI SvgIcon components
|
|
18
|
+
* - NeoLogoCell: raster or SVG image URLs (img tag)
|
|
19
|
+
*/
|
|
20
|
+
export declare const NeoLogoCell: {
|
|
21
|
+
({ src, alt, disabled }: NeoLogoCellProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
type NeoProgressCellBase = {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
};
|
|
4
|
+
type NeoProgressCellEmpty = NeoProgressCellBase & {
|
|
5
|
+
empty: true;
|
|
6
|
+
value?: never;
|
|
7
|
+
};
|
|
8
|
+
type NeoProgressCellContent = NeoProgressCellBase & {
|
|
9
|
+
empty?: false;
|
|
10
|
+
value?: number;
|
|
11
|
+
};
|
|
12
|
+
export type NeoProgressCellProps = NeoProgressCellEmpty | NeoProgressCellContent;
|
|
13
|
+
/**
|
|
14
|
+
* NeoProgressCell — DataGrid cell displaying a linear progress indicator.
|
|
15
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13425-5378
|
|
16
|
+
*/
|
|
17
|
+
export declare const NeoProgressCell: {
|
|
18
|
+
({ value, disabled, empty, }: NeoProgressCellProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
displayName: string;
|
|
20
|
+
};
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export type NeoStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
3
|
+
type NeoStatusCellBase = {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
type NeoStatusCellEmpty = NeoStatusCellBase & {
|
|
7
|
+
empty: true;
|
|
8
|
+
label?: never;
|
|
9
|
+
icon?: never;
|
|
10
|
+
variant?: never;
|
|
11
|
+
details?: never;
|
|
12
|
+
};
|
|
13
|
+
type NeoStatusCellContent = NeoStatusCellBase & {
|
|
14
|
+
empty?: false;
|
|
15
|
+
label: string;
|
|
16
|
+
icon?: ReactNode;
|
|
17
|
+
variant?: NeoStatusCellVariant;
|
|
18
|
+
/** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
|
|
19
|
+
details?: string;
|
|
20
|
+
};
|
|
21
|
+
export type NeoStatusCellProps = NeoStatusCellEmpty | NeoStatusCellContent;
|
|
22
|
+
/**
|
|
23
|
+
* NeoStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
|
|
24
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-8705
|
|
25
|
+
*/
|
|
26
|
+
export declare const NeoStatusCell: {
|
|
27
|
+
({ icon, label, details, disabled, variant, empty, }: NeoStatusCellProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
3
|
import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
|
|
4
|
-
import { GridDensity, GridFilterPanel, ToolbarProps } from '@mui/x-data-grid';
|
|
4
|
+
import { GridDensity, GridRenderCellParams, GridFilterPanel, ToolbarProps } from '@mui/x-data-grid';
|
|
5
5
|
import Chip, { ChipProps } from '@mui/material/Chip';
|
|
6
6
|
import { AlertProps } from '@mui/material/Alert';
|
|
7
7
|
import { LinkProps } from '@mui/material/Link';
|
|
@@ -835,7 +835,7 @@ interface NeoDataGridProps extends Omit<DataGridProProps, 'slots'> {
|
|
|
835
835
|
* - `size` → Row heights (compact: 42px, standard: 48px, comfortable: 56px) and header heights (compact: 38px, standard: 44px, comfortable: 52px)
|
|
836
836
|
*
|
|
837
837
|
* Design tokens used:
|
|
838
|
-
* - Colors: semanticColors.border.primary, semanticColors.
|
|
838
|
+
* - Colors: semanticColors.border.primary, semanticColors.surfaces.dataGrid.*
|
|
839
839
|
* - Typography: typography.fontFamily.body, typography.fontSize.sm
|
|
840
840
|
* - Spacing: spacing.spacing_*
|
|
841
841
|
*
|
|
@@ -859,6 +859,9 @@ declare namespace NeoDataGrid {
|
|
|
859
859
|
var displayName: string;
|
|
860
860
|
}
|
|
861
861
|
|
|
862
|
+
declare const getDataGridHeaderStyles: () => SxProps<Theme>;
|
|
863
|
+
declare const getDataGridRowStyles: () => SxProps<Theme>;
|
|
864
|
+
|
|
862
865
|
interface NeoInfiniteScrollGridProps extends Omit<NeoDataGridProps, 'slots'> {
|
|
863
866
|
/**
|
|
864
867
|
* Callback when load more is triggered - either by scrolling or clicking button
|
|
@@ -1051,6 +1054,129 @@ declare const NeoMultiBadgesCell: {
|
|
|
1051
1054
|
displayName: string;
|
|
1052
1055
|
};
|
|
1053
1056
|
|
|
1057
|
+
interface NeoActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
|
|
1058
|
+
api?: GridRenderCellParams['api'];
|
|
1059
|
+
children: ReactNode;
|
|
1060
|
+
position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
|
|
1061
|
+
suppressChildrenValidation?: boolean;
|
|
1062
|
+
}
|
|
1063
|
+
declare function NeoActionsCell(props: NeoActionsCellProps): react_jsx_runtime.JSX.Element;
|
|
1064
|
+
|
|
1065
|
+
type NeoAvatarCellBase = {
|
|
1066
|
+
disabled?: boolean;
|
|
1067
|
+
};
|
|
1068
|
+
type NeoAvatarCellEmpty = NeoAvatarCellBase & {
|
|
1069
|
+
empty: true;
|
|
1070
|
+
name?: never;
|
|
1071
|
+
src?: never;
|
|
1072
|
+
colorIndex?: never;
|
|
1073
|
+
label?: never;
|
|
1074
|
+
};
|
|
1075
|
+
type NeoAvatarCellContent = NeoAvatarCellBase & {
|
|
1076
|
+
empty?: false;
|
|
1077
|
+
name?: string;
|
|
1078
|
+
src?: string;
|
|
1079
|
+
colorIndex?: number;
|
|
1080
|
+
label?: string;
|
|
1081
|
+
};
|
|
1082
|
+
type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
|
|
1083
|
+
/**
|
|
1084
|
+
* NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
|
|
1085
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
|
|
1086
|
+
*/
|
|
1087
|
+
declare const NeoAvatarCell: {
|
|
1088
|
+
({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): react_jsx_runtime.JSX.Element;
|
|
1089
|
+
displayName: string;
|
|
1090
|
+
};
|
|
1091
|
+
|
|
1092
|
+
interface NeoIconCellProps {
|
|
1093
|
+
icon?: ReactNode;
|
|
1094
|
+
ariaLabel?: string;
|
|
1095
|
+
disabled?: boolean;
|
|
1096
|
+
}
|
|
1097
|
+
/**
|
|
1098
|
+
* NeoIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
|
|
1099
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-9345
|
|
1100
|
+
*/
|
|
1101
|
+
declare const NeoIconCell: {
|
|
1102
|
+
({ icon, ariaLabel, disabled }: NeoIconCellProps): react_jsx_runtime.JSX.Element | null;
|
|
1103
|
+
displayName: string;
|
|
1104
|
+
};
|
|
1105
|
+
|
|
1106
|
+
type NeoLogoCellNoSrc = {
|
|
1107
|
+
src?: undefined;
|
|
1108
|
+
alt?: string;
|
|
1109
|
+
disabled?: boolean;
|
|
1110
|
+
};
|
|
1111
|
+
type NeoLogoCellWithSrc = {
|
|
1112
|
+
src: string;
|
|
1113
|
+
alt: string;
|
|
1114
|
+
disabled?: boolean;
|
|
1115
|
+
};
|
|
1116
|
+
type NeoLogoCellProps = NeoLogoCellNoSrc | NeoLogoCellWithSrc;
|
|
1117
|
+
/**
|
|
1118
|
+
* NeoLogoCell — DataGrid cell displaying a raster or SVG logo image.
|
|
1119
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13278-9558
|
|
1120
|
+
*
|
|
1121
|
+
* Kept separate from NeoIconCell to match Neo's Icon/Logo component split:
|
|
1122
|
+
* - NeoIconCell: MUI SvgIcon components
|
|
1123
|
+
* - NeoLogoCell: raster or SVG image URLs (img tag)
|
|
1124
|
+
*/
|
|
1125
|
+
declare const NeoLogoCell: {
|
|
1126
|
+
({ src, alt, disabled }: NeoLogoCellProps): react_jsx_runtime.JSX.Element;
|
|
1127
|
+
displayName: string;
|
|
1128
|
+
};
|
|
1129
|
+
|
|
1130
|
+
type NeoProgressCellBase = {
|
|
1131
|
+
disabled?: boolean;
|
|
1132
|
+
};
|
|
1133
|
+
type NeoProgressCellEmpty = NeoProgressCellBase & {
|
|
1134
|
+
empty: true;
|
|
1135
|
+
value?: never;
|
|
1136
|
+
};
|
|
1137
|
+
type NeoProgressCellContent = NeoProgressCellBase & {
|
|
1138
|
+
empty?: false;
|
|
1139
|
+
value?: number;
|
|
1140
|
+
};
|
|
1141
|
+
type NeoProgressCellProps = NeoProgressCellEmpty | NeoProgressCellContent;
|
|
1142
|
+
/**
|
|
1143
|
+
* NeoProgressCell — DataGrid cell displaying a linear progress indicator.
|
|
1144
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13425-5378
|
|
1145
|
+
*/
|
|
1146
|
+
declare const NeoProgressCell: {
|
|
1147
|
+
({ value, disabled, empty, }: NeoProgressCellProps): react_jsx_runtime.JSX.Element;
|
|
1148
|
+
displayName: string;
|
|
1149
|
+
};
|
|
1150
|
+
|
|
1151
|
+
type NeoStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
1152
|
+
type NeoStatusCellBase = {
|
|
1153
|
+
disabled?: boolean;
|
|
1154
|
+
};
|
|
1155
|
+
type NeoStatusCellEmpty = NeoStatusCellBase & {
|
|
1156
|
+
empty: true;
|
|
1157
|
+
label?: never;
|
|
1158
|
+
icon?: never;
|
|
1159
|
+
variant?: never;
|
|
1160
|
+
details?: never;
|
|
1161
|
+
};
|
|
1162
|
+
type NeoStatusCellContent = NeoStatusCellBase & {
|
|
1163
|
+
empty?: false;
|
|
1164
|
+
label: string;
|
|
1165
|
+
icon?: ReactNode;
|
|
1166
|
+
variant?: NeoStatusCellVariant;
|
|
1167
|
+
/** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
|
|
1168
|
+
details?: string;
|
|
1169
|
+
};
|
|
1170
|
+
type NeoStatusCellProps = NeoStatusCellEmpty | NeoStatusCellContent;
|
|
1171
|
+
/**
|
|
1172
|
+
* NeoStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
|
|
1173
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-8705
|
|
1174
|
+
*/
|
|
1175
|
+
declare const NeoStatusCell: {
|
|
1176
|
+
({ icon, label, details, disabled, variant, empty, }: NeoStatusCellProps): react_jsx_runtime.JSX.Element;
|
|
1177
|
+
displayName: string;
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1054
1180
|
/**
|
|
1055
1181
|
* NeoDataGridColumnsButton - Button to open the columns panel in DataGrid
|
|
1056
1182
|
*
|
|
@@ -1185,42 +1311,6 @@ declare const NeoDataGridFilterPanel: {
|
|
|
1185
1311
|
declare function SortedDescendingIcon(): react_jsx_runtime.JSX.Element;
|
|
1186
1312
|
declare function SortedAscendingIcon(): react_jsx_runtime.JSX.Element;
|
|
1187
1313
|
declare function UnsortedIcon(): react_jsx_runtime.JSX.Element;
|
|
1188
|
-
/**
|
|
1189
|
-
* Utility function to get DataGrid sx styles for header cells
|
|
1190
|
-
*
|
|
1191
|
-
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41618
|
|
1192
|
-
*
|
|
1193
|
-
* Figma prop mappings:
|
|
1194
|
-
* - `size` → `size`: Figma "condensed" → MUI 'compact', Figma "default" → MUI 'standard', Figma "relaxed" → MUI 'comfortable'
|
|
1195
|
-
*
|
|
1196
|
-
* Design tokens used:
|
|
1197
|
-
* - Background: colors.grey[50] (#f9fafb)
|
|
1198
|
-
* - Border: semanticColors.border.primary
|
|
1199
|
-
* - Padding: 12px vertical, 24px horizontal
|
|
1200
|
-
* - Gap: 12px
|
|
1201
|
-
*
|
|
1202
|
-
*
|
|
1203
|
-
* @param size - Header row size variant (affects header cell height)
|
|
1204
|
-
* @returns SxProps for DataGrid header cells
|
|
1205
|
-
*
|
|
1206
|
-
* @example
|
|
1207
|
-
* import { getDataGridHeaderStyles, SortedDescendingIcon, SortedAscendingIcon, UnsortedIcon } from './DataGridHeaderCell'
|
|
1208
|
-
*
|
|
1209
|
-
* <DataGrid
|
|
1210
|
-
* columnHeaderHeight={38} // for compact (Figma: condensed)
|
|
1211
|
-
* sx={{
|
|
1212
|
-
* ...getDataGridHeaderStyles(),
|
|
1213
|
-
* }}
|
|
1214
|
-
* slots={{
|
|
1215
|
-
* columnSortedDescendingIcon: SortedDescendingIcon,
|
|
1216
|
-
* columnSortedAscendingIcon: SortedAscendingIcon,
|
|
1217
|
-
* columnUnsortedIcon: UnsortedIcon,
|
|
1218
|
-
* }}
|
|
1219
|
-
* rows={rows}
|
|
1220
|
-
* columns={columns}
|
|
1221
|
-
* />
|
|
1222
|
-
*/
|
|
1223
|
-
declare const getDataGridHeaderStyles: () => SxProps<Theme>;
|
|
1224
1314
|
|
|
1225
1315
|
interface NeoDataGridHeaderLabelProps {
|
|
1226
1316
|
/**
|
|
@@ -1741,8 +1831,8 @@ interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
|
|
|
1741
1831
|
/**
|
|
1742
1832
|
* NeoNavigationAvatar - Compact avatar for navigation contexts
|
|
1743
1833
|
*
|
|
1744
|
-
* Wraps NeoGeneralAvatar (size="small") in a
|
|
1745
|
-
* providing
|
|
1834
|
+
* Wraps NeoGeneralAvatar (size="small") in a 40px container,
|
|
1835
|
+
* providing an interactive area for navigation UI.
|
|
1746
1836
|
*
|
|
1747
1837
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
|
|
1748
1838
|
*/
|
|
@@ -2952,5 +3042,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2952
3042
|
|
|
2953
3043
|
declare const version: string
|
|
2954
3044
|
|
|
2955
|
-
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, version };
|
|
2956
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|
|
3045
|
+
export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconCell, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoLogoCell, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressCell, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, version };
|
|
3046
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActionsCellProps, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarCellProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoIconCellProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoLogoCellProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressCellProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusCellProps, NeoStatusCellVariant, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|