@moderneinc/design-system-components 6.0.1-next.a6bf65 → 6.0.1-next.b078e1
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/DataGridFilterPanel/DataGridFilterPanel.d.ts +11 -11
- package/dist/MenuItem/MenuItem.d.ts +30 -11
- package/dist/index.d.ts +129 -139
- package/dist/index.esm.js +67 -71
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +69 -79
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/DatePickerListItem/DatePickerListItem.d.ts +0 -4
- package/dist/DatePickerMenu/DatePickerMenu.d.ts +0 -4
- package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +0 -4
- package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +0 -4
- package/dist/TopNav/TopNav.d.ts +0 -4
- package/dist/TourModal/TourModal.d.ts +0 -4
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
|
|
1
|
+
import { type GridSlotProps, type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
|
|
2
2
|
import type React from 'react';
|
|
3
|
-
import { ModSelect } from '../Select/Select';
|
|
4
3
|
/**
|
|
5
4
|
* Icon components for DataGrid filter panel slots
|
|
6
5
|
* These must be passed to the DataGrid's slots prop
|
|
@@ -17,18 +16,19 @@ export declare const ModDataGridFilterPanelRemoveAllIcon: {
|
|
|
17
16
|
(): import("react/jsx-runtime").JSX.Element;
|
|
18
17
|
displayName: string;
|
|
19
18
|
};
|
|
19
|
+
export type ModDataGridSelectProps = GridSlotProps['baseSelect'];
|
|
20
20
|
/**
|
|
21
|
-
* ModSelect
|
|
21
|
+
* ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
|
|
22
22
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
23
|
+
* Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
|
|
24
|
+
* can be diffed on upgrade.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
|
|
29
|
+
* ```
|
|
30
30
|
*/
|
|
31
|
-
export declare const ModDataGridSelect:
|
|
31
|
+
export declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
|
|
32
32
|
/**
|
|
33
33
|
* ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
|
|
34
34
|
*
|
|
@@ -19,15 +19,26 @@ type ModMenuItemOwnProps = {
|
|
|
19
19
|
*/
|
|
20
20
|
secondaryText?: string;
|
|
21
21
|
/**
|
|
22
|
-
* URL to navigate to.
|
|
23
|
-
* MUI
|
|
24
|
-
*
|
|
25
|
-
*
|
|
22
|
+
* URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
|
|
23
|
+
* MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
|
|
24
|
+
* or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
|
|
25
|
+
* `Link`) to override that default.
|
|
26
|
+
*
|
|
27
|
+
* The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
|
|
28
|
+
* correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
|
|
29
|
+
* axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
|
|
30
|
+
* items, and what `ModListItem` already produces inside `List`.
|
|
26
31
|
*/
|
|
27
32
|
href?: string;
|
|
28
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
|
|
35
|
+
* roots at `li` and this renders as an inert attribute, the same trap as #722.
|
|
36
|
+
*/
|
|
29
37
|
target?: string;
|
|
30
|
-
/**
|
|
38
|
+
/**
|
|
39
|
+
* Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
|
|
40
|
+
* the item roots at `li` and this renders as an inert attribute.
|
|
41
|
+
*/
|
|
31
42
|
rel?: string;
|
|
32
43
|
/**
|
|
33
44
|
* Menu item content (text label)
|
|
@@ -35,6 +46,14 @@ type ModMenuItemOwnProps = {
|
|
|
35
46
|
children?: ReactNode;
|
|
36
47
|
};
|
|
37
48
|
export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
|
|
49
|
+
/**
|
|
50
|
+
* Root element or component. Naming one bypasses the `href` → anchor default, so pass
|
|
51
|
+
* a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
|
|
52
|
+
* `component="div"` with an `href` renders an inert attribute. `component="button"` is
|
|
53
|
+
* the exception — ButtonBase promotes a `button` root to an anchor itself.
|
|
54
|
+
*
|
|
55
|
+
* @default 'li', or 'a' when `href` is set
|
|
56
|
+
*/
|
|
38
57
|
component?: C;
|
|
39
58
|
};
|
|
40
59
|
/**
|
|
@@ -54,19 +73,19 @@ export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuI
|
|
|
54
73
|
* // Disabled state
|
|
55
74
|
* <ModMenuItem disabled>Disabled item</ModMenuItem>
|
|
56
75
|
*
|
|
57
|
-
* // As an anchor — `
|
|
58
|
-
* <ModMenuItem
|
|
76
|
+
* // As an anchor — `href` alone is enough
|
|
77
|
+
* <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
|
|
59
78
|
*
|
|
60
79
|
* // External link
|
|
61
|
-
* <ModMenuItem
|
|
80
|
+
* <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
|
|
62
81
|
* Documentation
|
|
63
82
|
* </ModMenuItem>
|
|
64
83
|
*
|
|
65
|
-
* // Client-side routing (Next.js)
|
|
84
|
+
* // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
|
|
66
85
|
* <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
|
|
67
86
|
* ```
|
|
68
87
|
*/
|
|
69
|
-
export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
|
|
88
|
+
export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
|
|
70
89
|
export declare namespace ModMenuItem {
|
|
71
90
|
var displayName: string;
|
|
72
91
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { GridColumnsPanelProps, GridDensity as GridDensity$1, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro';
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentPropsWithoutRef, ComponentType, FunctionComponent } from 'react';
|
|
5
|
-
import { GridDensity, GridFilterPanel, GridSlotsComponent, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
|
|
5
|
+
import { GridDensity, GridFilterPanel, GridSlotsComponent, GridSlotProps, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
|
|
6
6
|
import { AlertProps } from '@mui/material/Alert';
|
|
7
7
|
import Chip, { ChipProps } from '@mui/material/Chip';
|
|
8
8
|
import { LinkProps } from '@mui/material/Link';
|
|
@@ -13,14 +13,10 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
|
|
|
13
13
|
import { CardProps } from '@mui/material/Card';
|
|
14
14
|
import { CheckboxProps } from '@mui/material/Checkbox';
|
|
15
15
|
import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
|
|
16
|
-
import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
|
|
17
16
|
import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
|
|
18
17
|
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
|
|
19
18
|
import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
|
|
20
19
|
import { DateRange } from '@mui/x-date-pickers-pro/models';
|
|
21
|
-
import * as _mui_system from '@mui/system';
|
|
22
|
-
import * as _mui_material from '@mui/material';
|
|
23
|
-
import { BoxProps as BoxProps$1 } from '@mui/material';
|
|
24
20
|
import { DividerProps } from '@mui/material/Divider';
|
|
25
21
|
import { PaperProps } from '@mui/material/Paper';
|
|
26
22
|
import { AvatarProps } from '@mui/material/Avatar';
|
|
@@ -32,8 +28,12 @@ import { DialogProps } from '@mui/material/Dialog';
|
|
|
32
28
|
import { BoxProps } from '@mui/material/Box';
|
|
33
29
|
import { LinearProgressProps } from '@mui/material/LinearProgress';
|
|
34
30
|
import { RadioProps } from '@mui/material/Radio';
|
|
31
|
+
import * as _mui_material from '@mui/material';
|
|
32
|
+
import { BoxProps as BoxProps$1 } from '@mui/material';
|
|
33
|
+
import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
|
|
35
34
|
import { SkeletonProps } from '@mui/material/Skeleton';
|
|
36
35
|
import { TableProps } from '@mui/material/Table';
|
|
36
|
+
import * as _mui_system from '@mui/system';
|
|
37
37
|
import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
|
|
38
38
|
import { TabProps } from '@mui/material/Tab';
|
|
39
39
|
import Button from '@mui/material/Button';
|
|
@@ -1033,99 +1033,6 @@ declare namespace ModDataGridColumnsButton {
|
|
|
1033
1033
|
var displayName: string;
|
|
1034
1034
|
}
|
|
1035
1035
|
|
|
1036
|
-
type ModMenuItemOwnProps = {
|
|
1037
|
-
/**
|
|
1038
|
-
* Optional icon to display on the left side
|
|
1039
|
-
* Note: Cannot be directly mapped from Figma (ReactNode)
|
|
1040
|
-
*/
|
|
1041
|
-
icon?: ReactNode;
|
|
1042
|
-
/**
|
|
1043
|
-
* Optional keyboard shortcut to display on the right side
|
|
1044
|
-
* @example "⌘+P" or "Ctrl+K"
|
|
1045
|
-
* Note: Cannot be directly mapped from Figma (ReactNode/string)
|
|
1046
|
-
*/
|
|
1047
|
-
shortcut?: string;
|
|
1048
|
-
/**
|
|
1049
|
-
* Optional secondary text to display next to the primary label
|
|
1050
|
-
* @example "@username" or supporting text
|
|
1051
|
-
* Note: Cannot be directly mapped from Figma (ReactNode/string)
|
|
1052
|
-
*/
|
|
1053
|
-
secondaryText?: string;
|
|
1054
|
-
/**
|
|
1055
|
-
* URL to navigate to. **Requires `component="a"`** (or a router link component):
|
|
1056
|
-
* MUI's MenuItem roots at `li`, and ButtonBase only swaps in an anchor when the
|
|
1057
|
-
* root is `button`, so `href` alone lands on the `li` and does not navigate.
|
|
1058
|
-
* See #722.
|
|
1059
|
-
*/
|
|
1060
|
-
href?: string;
|
|
1061
|
-
/** Anchor target, e.g. `_blank`. Needs `href` and `component="a"`. */
|
|
1062
|
-
target?: string;
|
|
1063
|
-
/** Anchor `rel`, e.g. `noopener noreferrer`. Needs `href` and `component="a"`. */
|
|
1064
|
-
rel?: string;
|
|
1065
|
-
/**
|
|
1066
|
-
* Menu item content (text label)
|
|
1067
|
-
*/
|
|
1068
|
-
children?: ReactNode;
|
|
1069
|
-
};
|
|
1070
|
-
type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
|
|
1071
|
-
component?: C;
|
|
1072
|
-
};
|
|
1073
|
-
/**
|
|
1074
|
-
* ModMenuItem - Menu item component based on MUI MenuItem
|
|
1075
|
-
*
|
|
1076
|
-
* @example
|
|
1077
|
-
* ```tsx
|
|
1078
|
-
* // With icon and shortcut
|
|
1079
|
-
* <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
|
|
1080
|
-
* View profile
|
|
1081
|
-
* </ModMenuItem>
|
|
1082
|
-
*
|
|
1083
|
-
* // With secondary text (user list pattern from Figma node 4305:41844)
|
|
1084
|
-
* <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
|
|
1085
|
-
* <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
|
|
1086
|
-
*
|
|
1087
|
-
* // Disabled state
|
|
1088
|
-
* <ModMenuItem disabled>Disabled item</ModMenuItem>
|
|
1089
|
-
*
|
|
1090
|
-
* // As an anchor — `component="a"` is required, see #722
|
|
1091
|
-
* <ModMenuItem component="a" href="/api-explorer">API explorer</ModMenuItem>
|
|
1092
|
-
*
|
|
1093
|
-
* // External link
|
|
1094
|
-
* <ModMenuItem component="a" href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
|
|
1095
|
-
* Documentation
|
|
1096
|
-
* </ModMenuItem>
|
|
1097
|
-
*
|
|
1098
|
-
* // Client-side routing (Next.js)
|
|
1099
|
-
* <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
|
|
1100
|
-
* ```
|
|
1101
|
-
*/
|
|
1102
|
-
declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
1103
|
-
declare namespace ModMenuItem {
|
|
1104
|
-
var displayName: string;
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
type ModSelectProps = SelectProps;
|
|
1108
|
-
/**
|
|
1109
|
-
* ModSelect - Select component with design system styling
|
|
1110
|
-
*
|
|
1111
|
-
* A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
|
|
1112
|
-
* and ModMenu/ModMenuItem for the dropdown list.
|
|
1113
|
-
*
|
|
1114
|
-
* @example
|
|
1115
|
-
* ```tsx
|
|
1116
|
-
* import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
|
|
1117
|
-
*
|
|
1118
|
-
* <ModSelect value={value} onChange={handleChange}>
|
|
1119
|
-
* <ModSelectOption value="option1">Option 1</ModSelectOption>
|
|
1120
|
-
* <ModSelectOption value="option2">Option 2</ModSelectOption>
|
|
1121
|
-
* </ModSelect>
|
|
1122
|
-
* ```
|
|
1123
|
-
*/
|
|
1124
|
-
declare const ModSelect: {
|
|
1125
|
-
(props: ModSelectProps): react_jsx_runtime.JSX.Element;
|
|
1126
|
-
displayName: string;
|
|
1127
|
-
};
|
|
1128
|
-
|
|
1129
1036
|
/**
|
|
1130
1037
|
* Icon components for DataGrid filter panel slots
|
|
1131
1038
|
* These must be passed to the DataGrid's slots prop
|
|
@@ -1142,18 +1049,19 @@ declare const ModDataGridFilterPanelRemoveAllIcon: {
|
|
|
1142
1049
|
(): react_jsx_runtime.JSX.Element;
|
|
1143
1050
|
displayName: string;
|
|
1144
1051
|
};
|
|
1052
|
+
type ModDataGridSelectProps = GridSlotProps['baseSelect'];
|
|
1145
1053
|
/**
|
|
1146
|
-
* ModSelect
|
|
1054
|
+
* ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
|
|
1055
|
+
*
|
|
1056
|
+
* Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
|
|
1057
|
+
* can be diffed on upgrade.
|
|
1147
1058
|
*
|
|
1148
|
-
*
|
|
1149
|
-
*
|
|
1150
|
-
*
|
|
1151
|
-
*
|
|
1152
|
-
* with a real adapter. Intersected rather than replaced so direct consumers keep
|
|
1153
|
-
* `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
|
|
1154
|
-
* and the `SelectChangeEvent` signature.
|
|
1059
|
+
* @example
|
|
1060
|
+
* ```tsx
|
|
1061
|
+
* <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
|
|
1062
|
+
* ```
|
|
1155
1063
|
*/
|
|
1156
|
-
declare const ModDataGridSelect:
|
|
1064
|
+
declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
|
|
1157
1065
|
/**
|
|
1158
1066
|
* ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
|
|
1159
1067
|
*
|
|
@@ -1325,16 +1233,6 @@ declare const ModDatePicker: {
|
|
|
1325
1233
|
displayName: string;
|
|
1326
1234
|
};
|
|
1327
1235
|
|
|
1328
|
-
/**
|
|
1329
|
-
* ModDatePickerListItem
|
|
1330
|
-
*/
|
|
1331
|
-
declare const ModDatePickerListItem: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
1332
|
-
|
|
1333
|
-
/**
|
|
1334
|
-
* ModDatePickerMenu
|
|
1335
|
-
*/
|
|
1336
|
-
declare const ModDatePickerMenu: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
1337
|
-
|
|
1338
1236
|
interface ModDividerProps extends DividerProps {
|
|
1339
1237
|
}
|
|
1340
1238
|
/**
|
|
@@ -1904,6 +1802,96 @@ declare const ModMenu: {
|
|
|
1904
1802
|
displayName: string;
|
|
1905
1803
|
};
|
|
1906
1804
|
|
|
1805
|
+
type ModMenuItemOwnProps = {
|
|
1806
|
+
/**
|
|
1807
|
+
* Optional icon to display on the left side
|
|
1808
|
+
* Note: Cannot be directly mapped from Figma (ReactNode)
|
|
1809
|
+
*/
|
|
1810
|
+
icon?: ReactNode;
|
|
1811
|
+
/**
|
|
1812
|
+
* Optional keyboard shortcut to display on the right side
|
|
1813
|
+
* @example "⌘+P" or "Ctrl+K"
|
|
1814
|
+
* Note: Cannot be directly mapped from Figma (ReactNode/string)
|
|
1815
|
+
*/
|
|
1816
|
+
shortcut?: string;
|
|
1817
|
+
/**
|
|
1818
|
+
* Optional secondary text to display next to the primary label
|
|
1819
|
+
* @example "@username" or supporting text
|
|
1820
|
+
* Note: Cannot be directly mapped from Figma (ReactNode/string)
|
|
1821
|
+
*/
|
|
1822
|
+
secondaryText?: string;
|
|
1823
|
+
/**
|
|
1824
|
+
* URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
|
|
1825
|
+
* MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
|
|
1826
|
+
* or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
|
|
1827
|
+
* `Link`) to override that default.
|
|
1828
|
+
*
|
|
1829
|
+
* The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
|
|
1830
|
+
* correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
|
|
1831
|
+
* axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
|
|
1832
|
+
* items, and what `ModListItem` already produces inside `List`.
|
|
1833
|
+
*/
|
|
1834
|
+
href?: string;
|
|
1835
|
+
/**
|
|
1836
|
+
* Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
|
|
1837
|
+
* roots at `li` and this renders as an inert attribute, the same trap as #722.
|
|
1838
|
+
*/
|
|
1839
|
+
target?: string;
|
|
1840
|
+
/**
|
|
1841
|
+
* Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
|
|
1842
|
+
* the item roots at `li` and this renders as an inert attribute.
|
|
1843
|
+
*/
|
|
1844
|
+
rel?: string;
|
|
1845
|
+
/**
|
|
1846
|
+
* Menu item content (text label)
|
|
1847
|
+
*/
|
|
1848
|
+
children?: ReactNode;
|
|
1849
|
+
};
|
|
1850
|
+
type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
|
|
1851
|
+
/**
|
|
1852
|
+
* Root element or component. Naming one bypasses the `href` → anchor default, so pass
|
|
1853
|
+
* a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
|
|
1854
|
+
* `component="div"` with an `href` renders an inert attribute. `component="button"` is
|
|
1855
|
+
* the exception — ButtonBase promotes a `button` root to an anchor itself.
|
|
1856
|
+
*
|
|
1857
|
+
* @default 'li', or 'a' when `href` is set
|
|
1858
|
+
*/
|
|
1859
|
+
component?: C;
|
|
1860
|
+
};
|
|
1861
|
+
/**
|
|
1862
|
+
* ModMenuItem - Menu item component based on MUI MenuItem
|
|
1863
|
+
*
|
|
1864
|
+
* @example
|
|
1865
|
+
* ```tsx
|
|
1866
|
+
* // With icon and shortcut
|
|
1867
|
+
* <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
|
|
1868
|
+
* View profile
|
|
1869
|
+
* </ModMenuItem>
|
|
1870
|
+
*
|
|
1871
|
+
* // With secondary text (user list pattern from Figma node 4305:41844)
|
|
1872
|
+
* <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
|
|
1873
|
+
* <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
|
|
1874
|
+
*
|
|
1875
|
+
* // Disabled state
|
|
1876
|
+
* <ModMenuItem disabled>Disabled item</ModMenuItem>
|
|
1877
|
+
*
|
|
1878
|
+
* // As an anchor — `href` alone is enough
|
|
1879
|
+
* <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
|
|
1880
|
+
*
|
|
1881
|
+
* // External link
|
|
1882
|
+
* <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
|
|
1883
|
+
* Documentation
|
|
1884
|
+
* </ModMenuItem>
|
|
1885
|
+
*
|
|
1886
|
+
* // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
|
|
1887
|
+
* <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
|
|
1888
|
+
* ```
|
|
1889
|
+
*/
|
|
1890
|
+
declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
1891
|
+
declare namespace ModMenuItem {
|
|
1892
|
+
var displayName: string;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1907
1895
|
interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
|
|
1908
1896
|
api?: GridRenderCellParams['api'];
|
|
1909
1897
|
children: ReactNode;
|
|
@@ -2552,11 +2540,6 @@ declare const ModRadio: {
|
|
|
2552
2540
|
displayName: string;
|
|
2553
2541
|
};
|
|
2554
2542
|
|
|
2555
|
-
/**
|
|
2556
|
-
* ModRadioButtonWithText
|
|
2557
|
-
*/
|
|
2558
|
-
declare const ModRadioButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2559
|
-
|
|
2560
2543
|
interface ModRipplingDotProps extends BoxProps$1 {
|
|
2561
2544
|
}
|
|
2562
2545
|
/**
|
|
@@ -2585,6 +2568,28 @@ declare const ModSearchChip: {
|
|
|
2585
2568
|
displayName: string;
|
|
2586
2569
|
};
|
|
2587
2570
|
|
|
2571
|
+
type ModSelectProps = SelectProps;
|
|
2572
|
+
/**
|
|
2573
|
+
* ModSelect - Select component with design system styling
|
|
2574
|
+
*
|
|
2575
|
+
* A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
|
|
2576
|
+
* and ModMenu/ModMenuItem for the dropdown list.
|
|
2577
|
+
*
|
|
2578
|
+
* @example
|
|
2579
|
+
* ```tsx
|
|
2580
|
+
* import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
|
|
2581
|
+
*
|
|
2582
|
+
* <ModSelect value={value} onChange={handleChange}>
|
|
2583
|
+
* <ModSelectOption value="option1">Option 1</ModSelectOption>
|
|
2584
|
+
* <ModSelectOption value="option2">Option 2</ModSelectOption>
|
|
2585
|
+
* </ModSelect>
|
|
2586
|
+
* ```
|
|
2587
|
+
*/
|
|
2588
|
+
declare const ModSelect: {
|
|
2589
|
+
(props: ModSelectProps): react_jsx_runtime.JSX.Element;
|
|
2590
|
+
displayName: string;
|
|
2591
|
+
};
|
|
2592
|
+
|
|
2588
2593
|
interface ModSelectFieldOption {
|
|
2589
2594
|
value: string | number;
|
|
2590
2595
|
label: ReactNode;
|
|
@@ -3019,11 +3024,6 @@ declare const ModToggleButtonGroup: {
|
|
|
3019
3024
|
displayName: string;
|
|
3020
3025
|
};
|
|
3021
3026
|
|
|
3022
|
-
/**
|
|
3023
|
-
* ModToggleButtonWithText
|
|
3024
|
-
*/
|
|
3025
|
-
declare const ModToggleButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3026
|
-
|
|
3027
3027
|
interface ModToolbarProps extends ToolbarProps {
|
|
3028
3028
|
/**
|
|
3029
3029
|
* Toolbar content (typically ModQuickFilter, ModButton, ModToggle, etc.)
|
|
@@ -3118,16 +3118,6 @@ declare const ModTooltip: {
|
|
|
3118
3118
|
displayName: string;
|
|
3119
3119
|
};
|
|
3120
3120
|
|
|
3121
|
-
/**
|
|
3122
|
-
* ModTopNav
|
|
3123
|
-
*/
|
|
3124
|
-
declare const ModTopNav: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3125
|
-
|
|
3126
|
-
/**
|
|
3127
|
-
* ModTourModal
|
|
3128
|
-
*/
|
|
3129
|
-
declare const ModTourModal: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3130
|
-
|
|
3131
3121
|
/**
|
|
3132
3122
|
* Extended item data that ModTreeItem can read from the items array.
|
|
3133
3123
|
* Consumers pass these via the `items` prop on ModTreeView.
|
|
@@ -3227,5 +3217,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
3227
3217
|
|
|
3228
3218
|
declare const version: string
|
|
3229
3219
|
|
|
3230
|
-
export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker,
|
|
3231
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };
|
|
3220
|
+
export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToolbar, ModTooltip, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
|
|
3221
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDataGridSelectProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };
|