@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.
Files changed (57) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/{Alert-C4W0H_uN.cjs → Alert-0VBqBP4P.cjs} +1 -1
  3. package/dist/{Alert-BZPM5zpX.js → Alert-BEzNSCqV.js} +1 -1
  4. package/dist/{MenuItem-DoBJsRR_.cjs → MenuItem-0c7Cz5g_.cjs} +1 -1
  5. package/dist/{MenuItem-Cx5lTXXm.js → MenuItem-D4v_HV1x.js} +1 -1
  6. package/dist/components/index.cjs +255 -7
  7. package/dist/components/index.js +259 -11
  8. package/dist/{css-utils-CH7es90t.cjs → css-utils-B3V0Xzli.cjs} +8 -0
  9. package/dist/{css-utils-CjUBRJVK.js → css-utils-D9LibDjo.js} +12 -4
  10. package/dist/custom-icons/index.cjs +7 -24
  11. package/dist/custom-icons/index.js +7 -24
  12. package/dist/theme/index.cjs +339 -51
  13. package/dist/theme/index.js +341 -53
  14. package/dist/types/components/Avatar/Avatar.stories.d.ts.map +1 -1
  15. package/dist/types/components/List/List.d.ts +24 -0
  16. package/dist/types/components/List/List.d.ts.map +1 -0
  17. package/dist/types/components/List/List.stories.d.ts +398 -0
  18. package/dist/types/components/List/List.stories.d.ts.map +1 -0
  19. package/dist/types/components/List/List.test.d.ts +2 -0
  20. package/dist/types/components/List/List.test.d.ts.map +1 -0
  21. package/dist/types/components/List/ListItem/ListItem.d.ts +9 -0
  22. package/dist/types/components/List/ListItem/ListItem.d.ts.map +1 -0
  23. package/dist/types/components/List/ListItem/ListItem.stories.d.ts +307 -0
  24. package/dist/types/components/List/ListItem/ListItem.stories.d.ts.map +1 -0
  25. package/dist/types/components/List/ListItem/ListItem.test.d.ts +2 -0
  26. package/dist/types/components/List/ListItem/ListItem.test.d.ts.map +1 -0
  27. package/dist/types/components/List/ListItemButton/ListItemButton.d.ts +9 -0
  28. package/dist/types/components/List/ListItemButton/ListItemButton.d.ts.map +1 -0
  29. package/dist/types/components/List/ListItemButton/ListItemButton.test.d.ts +2 -0
  30. package/dist/types/components/List/ListItemButton/ListItemButton.test.d.ts.map +1 -0
  31. package/dist/types/components/List/ListItemRightContent/ListItemRightContent.d.ts +14 -0
  32. package/dist/types/components/List/ListItemRightContent/ListItemRightContent.d.ts.map +1 -0
  33. package/dist/types/components/List/ListItemRightContent/ListItemRightContent.test.d.ts +2 -0
  34. package/dist/types/components/List/ListItemRightContent/ListItemRightContent.test.d.ts.map +1 -0
  35. package/dist/types/components/List/ListSubheader/ListSubheader.d.ts +9 -0
  36. package/dist/types/components/List/ListSubheader/ListSubheader.d.ts.map +1 -0
  37. package/dist/types/components/List/ListSubheader/ListSubheader.test.d.ts +2 -0
  38. package/dist/types/components/List/ListSubheader/ListSubheader.test.d.ts.map +1 -0
  39. package/dist/types/components/List/index.d.ts +12 -0
  40. package/dist/types/components/List/index.d.ts.map +1 -0
  41. package/dist/types/components/List/types.d.ts +3 -0
  42. package/dist/types/components/List/types.d.ts.map +1 -0
  43. package/dist/types/components/Menu/Menu/Menu.stories.d.ts.map +1 -1
  44. package/dist/types/components/index.d.ts +2 -0
  45. package/dist/types/components/index.d.ts.map +1 -1
  46. package/dist/types/custom-icons/SwitchAccessShortcut.d.ts.map +1 -1
  47. package/dist/types/theme/components/data-display.d.ts.map +1 -1
  48. package/dist/types/theme/components/navigation.d.ts.map +1 -1
  49. package/dist/types/theme/types.d.ts +151 -0
  50. package/dist/types/theme/types.d.ts.map +1 -1
  51. package/dist/types/utils/theme-constants.d.ts +4 -0
  52. package/dist/types/utils/theme-constants.d.ts.map +1 -1
  53. package/dist/widgets/index.cjs +2 -2
  54. package/dist/widgets/index.js +2 -2
  55. package/package.json +1 -1
  56. package/dist/types/theme/components/stories/List.stories.d.ts +0 -62
  57. package/dist/types/theme/components/stories/List.stories.d.ts.map +0 -1
@@ -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-Cx5lTXXm.js";
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-CjUBRJVK.js";
8
- import { h, N } from "../css-utils-CjUBRJVK.js";
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: 0.6
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: ({ theme: theme2 }) => ({
700
- boxShadow: `0 0 0 1px ${theme2.palette.default.outlinedBorder}`
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
- paddingTop: 0,
2445
- ".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
2446
- minWidth: theme2.spacing(8),
2447
- // 64px, defined by design
2448
- maxHeight: MENU_LIST_MAX_SIZE,
2449
- // 312px, defined by design
2450
- overflowY: "auto",
2451
- "&:focus-visible": {
2452
- outline: "none !important",
2453
- boxShadow: "none !important"
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
- ".MuiDivider-root": {
2457
- margin: theme2.spacing(1, 0)
2458
- },
2459
- // Indent sublevels, ugly but needed to avoid issues with hover
2460
- "& .MuiList-root": {
2461
- paddingTop: 0,
2462
- paddingBottom: 0,
2463
- "& .MuiListItem-root": {
2464
- paddingLeft: theme2.spacing(4)
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
- "& .MuiList-root": {
2467
- "& .MuiListItem-root": {
2468
- paddingLeft: theme2.spacing(6)
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
- "& .MuiList-root": {
2471
- "& .MuiListItem-root": {
2472
- paddingLeft: theme2.spacing(8)
2473
- },
2474
- "& .MuiList-root": {
2475
- "& .MuiListItem-root": {
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: "body2",
2723
+ variant: "button",
2495
2724
  noWrap: true,
2496
2725
  component: "span"
2497
2726
  },
2498
- secondaryTypographyProps: { variant: "caption" }
2727
+ secondaryTypographyProps: {
2728
+ variant: "caption",
2729
+ color: "text.secondary"
2730
+ }
2499
2731
  },
2500
2732
  styleOverrides: {
2501
- root: ({ theme: theme2 }) => ({
2502
- paddingRight: theme2.spacing(2),
2503
- "& + .MuiBox-root": {
2504
- marginRight: theme2.spacing(1)
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
- display: "flex",
2513
- alignItems: "center",
2514
- gap: theme2.spacing(2),
2515
- "& .MuiSvgIcon-root": {
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: theme2.spacing(4),
2529
- width: theme2.spacing(4)
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
- h as MENU_ITEM_SIZE_EXTENDED,
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;AA8VtB,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"}
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"}