@carto/meridian-ds 2.9.2 → 2.9.3-alpha-lists.4
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/CHANGELOG.md +6 -0
- package/dist/{Alert-C4W0H_uN.cjs → Alert-0VBqBP4P.cjs} +1 -1
- package/dist/{Alert-BZPM5zpX.js → Alert-BEzNSCqV.js} +1 -1
- package/dist/{MenuItem-DoBJsRR_.cjs → MenuItem-0c7Cz5g_.cjs} +1 -1
- package/dist/{MenuItem-Cx5lTXXm.js → MenuItem-D4v_HV1x.js} +1 -1
- package/dist/components/index.cjs +255 -7
- package/dist/components/index.js +259 -11
- package/dist/{css-utils-CH7es90t.cjs → css-utils-B3V0Xzli.cjs} +8 -0
- package/dist/{css-utils-CjUBRJVK.js → css-utils-D9LibDjo.js} +12 -4
- package/dist/custom-icons/index.cjs +7 -24
- package/dist/custom-icons/index.js +7 -24
- package/dist/theme/index.cjs +339 -51
- package/dist/theme/index.js +341 -53
- package/dist/types/components/Avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/types/components/List/List.d.ts +24 -0
- package/dist/types/components/List/List.d.ts.map +1 -0
- package/dist/types/components/List/List.stories.d.ts +398 -0
- package/dist/types/components/List/List.stories.d.ts.map +1 -0
- package/dist/types/components/List/List.test.d.ts +2 -0
- package/dist/types/components/List/List.test.d.ts.map +1 -0
- package/dist/types/components/List/ListItem/ListItem.d.ts +9 -0
- package/dist/types/components/List/ListItem/ListItem.d.ts.map +1 -0
- package/dist/types/components/List/ListItem/ListItem.stories.d.ts +307 -0
- package/dist/types/components/List/ListItem/ListItem.stories.d.ts.map +1 -0
- package/dist/types/components/List/ListItem/ListItem.test.d.ts +2 -0
- package/dist/types/components/List/ListItem/ListItem.test.d.ts.map +1 -0
- package/dist/types/components/List/ListItemButton/ListItemButton.d.ts +9 -0
- package/dist/types/components/List/ListItemButton/ListItemButton.d.ts.map +1 -0
- package/dist/types/components/List/ListItemButton/ListItemButton.test.d.ts +2 -0
- package/dist/types/components/List/ListItemButton/ListItemButton.test.d.ts.map +1 -0
- package/dist/types/components/List/ListItemRightContent/ListItemRightContent.d.ts +14 -0
- package/dist/types/components/List/ListItemRightContent/ListItemRightContent.d.ts.map +1 -0
- package/dist/types/components/List/ListItemRightContent/ListItemRightContent.test.d.ts +2 -0
- package/dist/types/components/List/ListItemRightContent/ListItemRightContent.test.d.ts.map +1 -0
- package/dist/types/components/List/ListSubheader/ListSubheader.d.ts +9 -0
- package/dist/types/components/List/ListSubheader/ListSubheader.d.ts.map +1 -0
- package/dist/types/components/List/ListSubheader/ListSubheader.test.d.ts +2 -0
- package/dist/types/components/List/ListSubheader/ListSubheader.test.d.ts.map +1 -0
- package/dist/types/components/List/index.d.ts +12 -0
- package/dist/types/components/List/index.d.ts.map +1 -0
- package/dist/types/components/List/types.d.ts +3 -0
- package/dist/types/components/List/types.d.ts.map +1 -0
- package/dist/types/components/Menu/Menu/Menu.stories.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +2 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/dist/types/custom-icons/SwitchAccessShortcut.d.ts.map +1 -1
- package/dist/types/theme/components/data-display.d.ts.map +1 -1
- package/dist/types/theme/components/navigation.d.ts.map +1 -1
- package/dist/types/theme/types.d.ts +151 -0
- package/dist/types/theme/types.d.ts.map +1 -1
- package/dist/types/utils/theme-constants.d.ts +4 -0
- package/dist/types/utils/theme-constants.d.ts.map +1 -1
- package/dist/widgets/index.cjs +2 -2
- package/dist/widgets/index.js +2 -2
- package/package.json +1 -1
- package/dist/types/theme/components/stories/List.stories.d.ts +0 -62
- package/dist/types/theme/components/stories/List.stories.d.ts.map +0 -1
package/dist/theme/index.js
CHANGED
|
@@ -2,10 +2,10 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
|
2
2
|
import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material";
|
|
3
3
|
import { c as commonPalette } from "../palette-utils-BHqJlHm9.js";
|
|
4
4
|
import { g } from "../palette-utils-BHqJlHm9.js";
|
|
5
|
-
import { g as getPixelToRem, M as MenuItem } from "../MenuItem-
|
|
5
|
+
import { g as getPixelToRem, M as MenuItem } from "../MenuItem-D4v_HV1x.js";
|
|
6
6
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
7
|
-
import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, e as ellipsisStyles, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../css-utils-
|
|
8
|
-
import {
|
|
7
|
+
import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, e as ellipsisStyles, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_DENSE, L as LIST_ITEM_SIZE_DENSE, h as LIST_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../css-utils-D9LibDjo.js";
|
|
8
|
+
import { j, k, i, N } from "../css-utils-D9LibDjo.js";
|
|
9
9
|
import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined, InfoOutlined } from "@mui/icons-material";
|
|
10
10
|
import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
|
|
11
11
|
import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
|
|
@@ -655,8 +655,19 @@ const dataDisplayOverrides = {
|
|
|
655
655
|
styleOverrides: {
|
|
656
656
|
root: ({ theme: theme2, ownerState }) => ({
|
|
657
657
|
overflow: "initial",
|
|
658
|
+
position: "relative",
|
|
658
659
|
color: theme2.palette.secondary.contrastText,
|
|
659
660
|
backgroundColor: theme2.palette.secondary.main,
|
|
661
|
+
// Overlay border on top of all content using ::after pseudo-element
|
|
662
|
+
"&::after": {
|
|
663
|
+
content: '""',
|
|
664
|
+
position: "absolute",
|
|
665
|
+
inset: 0,
|
|
666
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.default.outlinedBorder}`,
|
|
667
|
+
pointerEvents: "none",
|
|
668
|
+
borderRadius: "inherit",
|
|
669
|
+
zIndex: 1
|
|
670
|
+
},
|
|
660
671
|
// Default fallback image override
|
|
661
672
|
// https://github.com/mui/material-ui/issues/33229
|
|
662
673
|
"& .MuiAvatar-fallback": {
|
|
@@ -693,11 +704,25 @@ const dataDisplayOverrides = {
|
|
|
693
704
|
},
|
|
694
705
|
// Disabled styles
|
|
695
706
|
...ownerState.disabled && {
|
|
696
|
-
opacity:
|
|
707
|
+
opacity: 1,
|
|
708
|
+
color: theme2.palette.text.disabled,
|
|
709
|
+
backgroundColor: theme2.palette.action.disabledBackground,
|
|
710
|
+
// Overlay border on top of all content using ::after pseudo-element
|
|
711
|
+
"&::after": {
|
|
712
|
+
content: '""',
|
|
713
|
+
position: "absolute",
|
|
714
|
+
inset: 0,
|
|
715
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
|
|
716
|
+
pointerEvents: "none",
|
|
717
|
+
borderRadius: "inherit",
|
|
718
|
+
zIndex: 1
|
|
719
|
+
}
|
|
697
720
|
}
|
|
698
721
|
}),
|
|
699
|
-
img: ({
|
|
700
|
-
|
|
722
|
+
img: ({ ownerState }) => ({
|
|
723
|
+
...ownerState.disabled && {
|
|
724
|
+
opacity: 0.6
|
|
725
|
+
}
|
|
701
726
|
}),
|
|
702
727
|
circular: () => ({
|
|
703
728
|
borderRadius: avatarCircularRadius,
|
|
@@ -2320,6 +2345,83 @@ const formsOverrides = {
|
|
|
2320
2345
|
}
|
|
2321
2346
|
}
|
|
2322
2347
|
};
|
|
2348
|
+
const getBoxedVariantStyles = (theme2) => ({
|
|
2349
|
+
backgroundColor: theme2.palette.background.paper,
|
|
2350
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
|
|
2351
|
+
borderRadius: theme2.spacing(1),
|
|
2352
|
+
"&.MuiListItemButton-root:hover": {
|
|
2353
|
+
backgroundColor: theme2.palette.background.paper,
|
|
2354
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
|
|
2355
|
+
}
|
|
2356
|
+
});
|
|
2357
|
+
const getListItemAdornmentStyles = (theme2) => ({
|
|
2358
|
+
display: "flex",
|
|
2359
|
+
alignItems: "center",
|
|
2360
|
+
justifyContent: "center",
|
|
2361
|
+
gap: theme2.spacing(1.5),
|
|
2362
|
+
minHeight: MENU_ITEM_SIZE_DEFAULT,
|
|
2363
|
+
minWidth: MENU_ITEM_SIZE_DEFAULT
|
|
2364
|
+
});
|
|
2365
|
+
const getListItemStyles = (ownerState, theme2) => ({
|
|
2366
|
+
gap: theme2.spacing(1.5),
|
|
2367
|
+
minHeight: MENU_ITEM_SIZE_DEFAULT,
|
|
2368
|
+
width: "100%",
|
|
2369
|
+
padding: theme2.spacing(1, ownerState.dense ? 1.5 : 2),
|
|
2370
|
+
// Checkbox and radio button styles
|
|
2371
|
+
"& .MuiCheckbox-root, & .MuiRadio-root": {
|
|
2372
|
+
...getListItemAdornmentStyles(theme2),
|
|
2373
|
+
// Override the default icon size coming from MUI definition
|
|
2374
|
+
"& .MuiSvgIcon-fontSizeMedium": {
|
|
2375
|
+
fontSize: ICON_SIZE_LARGE,
|
|
2376
|
+
width: ICON_SIZE_LARGE,
|
|
2377
|
+
minWidth: ICON_SIZE_LARGE,
|
|
2378
|
+
height: ICON_SIZE_LARGE
|
|
2379
|
+
}
|
|
2380
|
+
},
|
|
2381
|
+
// fixedHeight true (or undefined, which defaults to true)
|
|
2382
|
+
// + dense true: 52px
|
|
2383
|
+
// + dense false: 68px
|
|
2384
|
+
// fixedHeight false: adapts to content
|
|
2385
|
+
// Use data attribute selector since fixedHeight is not passed to MUI component to avoid DOM warning
|
|
2386
|
+
height: ownerState.dense ? LIST_ITEM_SIZE_DENSE : LIST_ITEM_SIZE_DEFAULT,
|
|
2387
|
+
'&[data-fixed-height="false"], [data-fixed-height="false"] &': {
|
|
2388
|
+
height: "auto"
|
|
2389
|
+
},
|
|
2390
|
+
// Handle disablePadding and disableGutters via data attributes for ListItemButton
|
|
2391
|
+
// (since these props are not valid for ListItemButton and would leak to DOM)
|
|
2392
|
+
'&[data-disable-padding="true"]': {
|
|
2393
|
+
padding: "0 !important"
|
|
2394
|
+
},
|
|
2395
|
+
'&[data-disable-gutters="true"]': {
|
|
2396
|
+
paddingLeft: "0 !important",
|
|
2397
|
+
paddingRight: "0 !important"
|
|
2398
|
+
},
|
|
2399
|
+
// Boxed variant styles - applied via data-variant attribute (from ListItem or parent List)
|
|
2400
|
+
'&[data-variant="boxed"], [data-variant="boxed"] &': getBoxedVariantStyles(theme2),
|
|
2401
|
+
// Disable gutters styles
|
|
2402
|
+
...ownerState.disableGutters && {
|
|
2403
|
+
paddingLeft: 0,
|
|
2404
|
+
paddingRight: 0
|
|
2405
|
+
},
|
|
2406
|
+
// Disable padding styles
|
|
2407
|
+
...ownerState.disablePadding && {
|
|
2408
|
+
padding: 0
|
|
2409
|
+
},
|
|
2410
|
+
// Disabled styles
|
|
2411
|
+
...ownerState.disabled && {
|
|
2412
|
+
opacity: "1 !important",
|
|
2413
|
+
color: theme2.palette.text.disabled,
|
|
2414
|
+
".MuiTypography-root": {
|
|
2415
|
+
color: theme2.palette.text.disabled
|
|
2416
|
+
},
|
|
2417
|
+
svg: {
|
|
2418
|
+
color: theme2.palette.text.disabled,
|
|
2419
|
+
path: {
|
|
2420
|
+
fill: theme2.palette.text.disabled
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
}
|
|
2424
|
+
});
|
|
2323
2425
|
const navigationOverrides = {
|
|
2324
2426
|
// Menu
|
|
2325
2427
|
MuiMenu: {
|
|
@@ -2439,44 +2541,101 @@ const navigationOverrides = {
|
|
|
2439
2541
|
},
|
|
2440
2542
|
// List
|
|
2441
2543
|
MuiList: {
|
|
2544
|
+
defaultProps: {
|
|
2545
|
+
variant: "standard",
|
|
2546
|
+
direction: "column"
|
|
2547
|
+
},
|
|
2442
2548
|
styleOverrides: {
|
|
2443
|
-
root: ({ theme: theme2 }) => ({
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2549
|
+
root: ({ theme: theme2, ownerState }) => ({
|
|
2550
|
+
display: "flex",
|
|
2551
|
+
flexDirection: ownerState.direction,
|
|
2552
|
+
gap: theme2.spacing(ownerState.spacing ?? 0),
|
|
2553
|
+
padding: 0,
|
|
2554
|
+
// When direction is column, apply styles for menu-like behavior
|
|
2555
|
+
...ownerState.direction === "column" && {
|
|
2556
|
+
".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
|
|
2557
|
+
minWidth: theme2.spacing(8),
|
|
2558
|
+
// 64px, defined by design
|
|
2559
|
+
maxHeight: MENU_LIST_MAX_SIZE,
|
|
2560
|
+
// 312px, defined by design
|
|
2561
|
+
overflowY: "auto",
|
|
2562
|
+
"&:focus-visible": {
|
|
2563
|
+
outline: "none !important",
|
|
2564
|
+
boxShadow: "none !important"
|
|
2565
|
+
}
|
|
2566
|
+
},
|
|
2567
|
+
".MuiDivider-root": {
|
|
2568
|
+
margin: theme2.spacing(1, 0)
|
|
2569
|
+
},
|
|
2570
|
+
".MuiListSubheader-root": {
|
|
2571
|
+
// We need to offset the margin to avoid double spacing between subheaders and regular list items when using spacing prop.
|
|
2572
|
+
marginBottom: theme2.spacing(-(ownerState.spacing ?? 0))
|
|
2454
2573
|
}
|
|
2455
2574
|
},
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2575
|
+
// Outlined variant: border on the list container and in the list items
|
|
2576
|
+
...ownerState.variant === "outlined" && {
|
|
2577
|
+
"& > .MuiListItem-root, & > .MuiListItemButton-root": {
|
|
2578
|
+
border: `1px solid ${theme2.palette.divider}`,
|
|
2579
|
+
"& .MuiListItemButton-root": {
|
|
2580
|
+
border: "none"
|
|
2581
|
+
}
|
|
2582
|
+
},
|
|
2583
|
+
// First list item has rounded top corners
|
|
2584
|
+
"& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
|
|
2585
|
+
borderRadius: theme2.spacing(1, 1, 0, 0)
|
|
2586
|
+
},
|
|
2587
|
+
// Last list item has rounded bottom corners
|
|
2588
|
+
"& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
|
|
2589
|
+
borderRadius: theme2.spacing(0, 0, 1, 1)
|
|
2590
|
+
},
|
|
2591
|
+
"& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
|
|
2592
|
+
borderTop: "none"
|
|
2465
2593
|
},
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2594
|
+
// When direction is column reverse, rounded corners should be on the top and bottom
|
|
2595
|
+
...ownerState.direction === "column-reverse" && {
|
|
2596
|
+
// First list item has rounded bottom corners
|
|
2597
|
+
"& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
|
|
2598
|
+
borderRadius: theme2.spacing(0, 0, 1, 1)
|
|
2469
2599
|
},
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
paddingLeft: theme2.spacing(10)
|
|
2477
|
-
}
|
|
2478
|
-
}
|
|
2600
|
+
// Last list item has rounded top corners
|
|
2601
|
+
"& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
|
|
2602
|
+
borderRadius: theme2.spacing(1, 1, 0, 0)
|
|
2603
|
+
},
|
|
2604
|
+
"& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
|
|
2605
|
+
borderBottom: "none"
|
|
2479
2606
|
}
|
|
2607
|
+
},
|
|
2608
|
+
// When direction is row, rounded corners should be on the left and right
|
|
2609
|
+
...ownerState.direction === "row" && {
|
|
2610
|
+
// First list item has rounded left corners
|
|
2611
|
+
"& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
|
|
2612
|
+
borderRadius: theme2.spacing(1, 0, 0, 1)
|
|
2613
|
+
},
|
|
2614
|
+
// Last list item has rounded right corners
|
|
2615
|
+
"& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
|
|
2616
|
+
borderRadius: theme2.spacing(0, 1, 1, 0)
|
|
2617
|
+
},
|
|
2618
|
+
"& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
|
|
2619
|
+
borderLeft: "none"
|
|
2620
|
+
}
|
|
2621
|
+
},
|
|
2622
|
+
// When direction is row-reverse, rounded corners should be on the right and left
|
|
2623
|
+
...ownerState.direction === "row-reverse" && {
|
|
2624
|
+
// First list item has rounded right corners
|
|
2625
|
+
"& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
|
|
2626
|
+
borderRadius: theme2.spacing(0, 1, 1, 0)
|
|
2627
|
+
},
|
|
2628
|
+
// Last list item has rounded left corners
|
|
2629
|
+
"& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
|
|
2630
|
+
borderRadius: theme2.spacing(1, 0, 0, 1)
|
|
2631
|
+
},
|
|
2632
|
+
"& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
|
|
2633
|
+
borderRight: "none"
|
|
2634
|
+
}
|
|
2635
|
+
},
|
|
2636
|
+
// When li is the only item in the list (direct children only, excludes nested ListItemButton inside ListItem)
|
|
2637
|
+
"& > .MuiListItem-root:only-of-type, & > .MuiListItemButton-root:only-of-type": {
|
|
2638
|
+
borderRadius: theme2.spacing(1)
|
|
2480
2639
|
}
|
|
2481
2640
|
},
|
|
2482
2641
|
"& .MuiListItemButton-root": {
|
|
@@ -2488,32 +2647,111 @@ const navigationOverrides = {
|
|
|
2488
2647
|
}
|
|
2489
2648
|
},
|
|
2490
2649
|
// List Item
|
|
2650
|
+
MuiListItem: {
|
|
2651
|
+
defaultProps: {
|
|
2652
|
+
dense: true,
|
|
2653
|
+
variant: "standard",
|
|
2654
|
+
disablePadding: false
|
|
2655
|
+
},
|
|
2656
|
+
styleOverrides: {
|
|
2657
|
+
root: ({ theme: theme2, ownerState }) => ({
|
|
2658
|
+
...getListItemStyles(ownerState, theme2),
|
|
2659
|
+
// Reset padding when contains ListItemButton
|
|
2660
|
+
"&:has(.MuiListItemButton-root)": {
|
|
2661
|
+
padding: 0,
|
|
2662
|
+
'&.MuiListItem-root[data-variant="boxed"]': {
|
|
2663
|
+
boxShadow: "none",
|
|
2664
|
+
"&:hover": {
|
|
2665
|
+
backgroundColor: theme2.palette.background.paper,
|
|
2666
|
+
boxShadow: "none"
|
|
2667
|
+
}
|
|
2668
|
+
}
|
|
2669
|
+
},
|
|
2670
|
+
// Add padding right to ListItem when has child ListItemSecondaryAction and not ListItemButton as child
|
|
2671
|
+
"&:has(.MuiListItemSecondaryAction-root):not(:has(.MuiListItemButton-root))": {
|
|
2672
|
+
paddingRight: theme2.spacing(7.5),
|
|
2673
|
+
'&[data-disable-padding="true"], &[data-disable-gutters="true"]': {
|
|
2674
|
+
paddingRight: `${theme2.spacing(5.5)} !important`
|
|
2675
|
+
}
|
|
2676
|
+
},
|
|
2677
|
+
// Reset padding to ListItemButton when inside ListItem, but keep padding left
|
|
2678
|
+
"& > .MuiListItemButton-root": {
|
|
2679
|
+
paddingRight: 0,
|
|
2680
|
+
paddingLeft: theme2.spacing(ownerState.dense ? 1.5 : 2),
|
|
2681
|
+
"&:hover": {
|
|
2682
|
+
backgroundColor: theme2.palette.action.hover
|
|
2683
|
+
}
|
|
2684
|
+
},
|
|
2685
|
+
// Boxed variant hover when inside ListItem
|
|
2686
|
+
'&[data-variant="boxed"] > .MuiListItemButton-root': {
|
|
2687
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
|
|
2688
|
+
borderRadius: theme2.spacing(1),
|
|
2689
|
+
"&:hover": {
|
|
2690
|
+
backgroundColor: theme2.palette.background.paper,
|
|
2691
|
+
boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
|
|
2692
|
+
}
|
|
2693
|
+
},
|
|
2694
|
+
// Add padding right to ListItemButton when sibling ListItemSecondaryAction is present to simulate spacing between the action and the content
|
|
2695
|
+
"&:has(.MuiListItemSecondaryAction-root)": {
|
|
2696
|
+
"& > .MuiListItemButton-root": {
|
|
2697
|
+
paddingRight: theme2.spacing(7.5),
|
|
2698
|
+
'&[data-disable-padding="true"], &[data-disable-gutters="true"]': {
|
|
2699
|
+
paddingRight: `${theme2.spacing(5.5)} !important`
|
|
2700
|
+
}
|
|
2701
|
+
}
|
|
2702
|
+
}
|
|
2703
|
+
})
|
|
2704
|
+
}
|
|
2705
|
+
},
|
|
2706
|
+
// List Item Button
|
|
2707
|
+
MuiListItemButton: {
|
|
2708
|
+
defaultProps: {
|
|
2709
|
+
dense: true,
|
|
2710
|
+
variant: "standard",
|
|
2711
|
+
component: "button"
|
|
2712
|
+
},
|
|
2713
|
+
styleOverrides: {
|
|
2714
|
+
root: ({ theme: theme2, ownerState }) => ({
|
|
2715
|
+
...getListItemStyles(ownerState, theme2)
|
|
2716
|
+
})
|
|
2717
|
+
}
|
|
2718
|
+
},
|
|
2719
|
+
// List Item Text
|
|
2491
2720
|
MuiListItemText: {
|
|
2492
2721
|
defaultProps: {
|
|
2493
2722
|
primaryTypographyProps: {
|
|
2494
|
-
variant: "
|
|
2723
|
+
variant: "button",
|
|
2495
2724
|
noWrap: true,
|
|
2496
2725
|
component: "span"
|
|
2497
2726
|
},
|
|
2498
|
-
secondaryTypographyProps: {
|
|
2727
|
+
secondaryTypographyProps: {
|
|
2728
|
+
variant: "caption",
|
|
2729
|
+
color: "text.secondary"
|
|
2730
|
+
}
|
|
2499
2731
|
},
|
|
2500
2732
|
styleOverrides: {
|
|
2501
|
-
root: (
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2733
|
+
root: () => ({
|
|
2734
|
+
display: "flex",
|
|
2735
|
+
flexDirection: "column",
|
|
2736
|
+
justifyContent: "center",
|
|
2737
|
+
flex: 1,
|
|
2738
|
+
minHeight: theme.spacing(2.5),
|
|
2739
|
+
margin: 0
|
|
2506
2740
|
})
|
|
2507
2741
|
}
|
|
2508
2742
|
},
|
|
2743
|
+
// List Item Icon
|
|
2509
2744
|
MuiListItemIcon: {
|
|
2510
2745
|
styleOverrides: {
|
|
2511
2746
|
root: ({ theme: theme2 }) => ({
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
fontSize: ICON_SIZE_LARGE
|
|
2747
|
+
...getListItemAdornmentStyles(theme2),
|
|
2748
|
+
// Apply styles to SVGs, but exclude those inside Radio or Checkbox components
|
|
2749
|
+
"&:not(:has(.MuiRadio-root)):not(:has(.MuiCheckbox-root)) svg": {
|
|
2750
|
+
color: theme2.palette.text.secondary,
|
|
2751
|
+
fontSize: ICON_SIZE_LARGE,
|
|
2752
|
+
width: ICON_SIZE_LARGE,
|
|
2753
|
+
minWidth: ICON_SIZE_LARGE,
|
|
2754
|
+
height: ICON_SIZE_LARGE
|
|
2517
2755
|
},
|
|
2518
2756
|
".MuiMenuItem-root.MuiButtonBase-root &": {
|
|
2519
2757
|
minWidth: ICON_SIZE_MEDIUM
|
|
@@ -2521,12 +2759,14 @@ const navigationOverrides = {
|
|
|
2521
2759
|
})
|
|
2522
2760
|
}
|
|
2523
2761
|
},
|
|
2762
|
+
// List Item Avatar
|
|
2524
2763
|
MuiListItemAvatar: {
|
|
2525
2764
|
styleOverrides: {
|
|
2526
2765
|
root: ({ theme: theme2 }) => ({
|
|
2766
|
+
...getListItemAdornmentStyles(theme2),
|
|
2527
2767
|
"& .MuiAvatar-root": {
|
|
2528
|
-
height:
|
|
2529
|
-
width:
|
|
2768
|
+
height: MENU_ITEM_SIZE_DEFAULT,
|
|
2769
|
+
width: MENU_ITEM_SIZE_DEFAULT
|
|
2530
2770
|
},
|
|
2531
2771
|
"& .MuiSvgIcon-root": {
|
|
2532
2772
|
fontSize: ICON_SIZE_MEDIUM
|
|
@@ -2534,6 +2774,50 @@ const navigationOverrides = {
|
|
|
2534
2774
|
})
|
|
2535
2775
|
}
|
|
2536
2776
|
},
|
|
2777
|
+
// List Item Secondary Action
|
|
2778
|
+
MuiListItemSecondaryAction: {
|
|
2779
|
+
styleOverrides: {
|
|
2780
|
+
root: ({ theme: theme2 }) => ({
|
|
2781
|
+
...getListItemAdornmentStyles(theme2),
|
|
2782
|
+
// if parent ListItem has disableGutters or disablePadding, reset padding
|
|
2783
|
+
'[data-disable-padding="true"] &, [data-disable-gutters="true"] &': {
|
|
2784
|
+
right: 0
|
|
2785
|
+
}
|
|
2786
|
+
})
|
|
2787
|
+
}
|
|
2788
|
+
},
|
|
2789
|
+
// List Subheader
|
|
2790
|
+
MuiListSubheader: {
|
|
2791
|
+
defaultProps: {
|
|
2792
|
+
disableGutters: true,
|
|
2793
|
+
component: "div"
|
|
2794
|
+
},
|
|
2795
|
+
styleOverrides: {
|
|
2796
|
+
root: ({ theme: theme2 }) => ({
|
|
2797
|
+
display: "flex",
|
|
2798
|
+
alignItems: "center",
|
|
2799
|
+
justifyContent: "flex-start",
|
|
2800
|
+
height: theme2.spacing(3),
|
|
2801
|
+
padding: 0,
|
|
2802
|
+
...theme2.typography.caption,
|
|
2803
|
+
// Use data attribute selector since backgroundColor is not passed to MUI component to avoid DOM warning
|
|
2804
|
+
backgroundColor: theme2.palette.background.default,
|
|
2805
|
+
'&[data-background-color="paper"]': {
|
|
2806
|
+
backgroundColor: theme2.palette.background.paper
|
|
2807
|
+
},
|
|
2808
|
+
'&[data-background-color="inherit"]': {
|
|
2809
|
+
backgroundColor: "inherit"
|
|
2810
|
+
},
|
|
2811
|
+
// Adapt padding when List is variant="standard"
|
|
2812
|
+
'[data-variant="standard"] &': {
|
|
2813
|
+
padding: theme2.spacing(0, 2),
|
|
2814
|
+
'&[data-dense="true"]': {
|
|
2815
|
+
padding: theme2.spacing(0, 1.5)
|
|
2816
|
+
}
|
|
2817
|
+
}
|
|
2818
|
+
})
|
|
2819
|
+
}
|
|
2820
|
+
},
|
|
2537
2821
|
// Tabs
|
|
2538
2822
|
MuiTabs: {
|
|
2539
2823
|
styleOverrides: {
|
|
@@ -3263,9 +3547,13 @@ export {
|
|
|
3263
3547
|
ICON_SIZE_LARGE,
|
|
3264
3548
|
ICON_SIZE_MEDIUM,
|
|
3265
3549
|
ICON_SIZE_SMALL,
|
|
3550
|
+
LIST_ITEM_SIZE_DEFAULT,
|
|
3551
|
+
LIST_ITEM_SIZE_DENSE,
|
|
3552
|
+
j as LIST_MAX_SIZE,
|
|
3553
|
+
k as LIST_OVERSCAN_ITEMS_COUNT,
|
|
3266
3554
|
MENU_ITEM_SIZE_DEFAULT,
|
|
3267
3555
|
MENU_ITEM_SIZE_DENSE,
|
|
3268
|
-
|
|
3556
|
+
i as MENU_ITEM_SIZE_EXTENDED,
|
|
3269
3557
|
MENU_LIST_MAX_SIZE,
|
|
3270
3558
|
N as NOTIFICATION_DURATION_IN_MS,
|
|
3271
3559
|
SPACING,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCG,CAAA;AAChB,eAAe,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCG,CAAA;AAChB,eAAe,OAAO,CAAA;AA8WtB,eAAO,MAAM,UAAU;;;;;;;;;CAKtB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;CAKjB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAGjB,CAAA;AAED,eAAO,MAAM,OAAO;;;;CAEnB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAGtB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;CAGvB,CAAA;AAED,eAAO,MAAM,eAAe;;;;CAE3B,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ListProps as MUIListProps } from '@mui/material';
|
|
3
|
+
import { ListVariant } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* Context to pass List props to child ListItem components.
|
|
6
|
+
* Allows ListItems to inherit variant, fixedHeight, etc. from parent List.
|
|
7
|
+
*/
|
|
8
|
+
export interface ListContextValue {
|
|
9
|
+
variant?: ListVariant;
|
|
10
|
+
fixedHeight?: boolean;
|
|
11
|
+
dense?: boolean;
|
|
12
|
+
disableGutters?: boolean;
|
|
13
|
+
disablePadding?: boolean;
|
|
14
|
+
divider?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare const ListContext: React.Context<ListContextValue>;
|
|
17
|
+
/**
|
|
18
|
+
* Props for the List component.
|
|
19
|
+
* Includes all MUI List props plus custom props defined in theme types
|
|
20
|
+
*/
|
|
21
|
+
export type ListProps = MUIListProps;
|
|
22
|
+
declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
23
|
+
export default List;
|
|
24
|
+
//# sourceMappingURL=List.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAEL,SAAS,IAAI,YAAY,EAE1B,MAAM,eAAe,CAAA;AAStB,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,WAAW,iCAAsC,CAAA;AAc9D;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,YAAY,CAAA;AAgIpC,QAAA,MAAM,IAAI,iGAAoB,CAAA;AAE9B,eAAe,IAAI,CAAA"}
|